/* La web de la marca Chubis Life: los colores, las tipografías y los contornos chocolate del juego. Las imágenes y
   piezas.css las prepara herramientas/preparar_web.py. */

@font-face {
  font-family: "Grandstander";
  src: url(fuentes/grandstander.ttf) format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url(fuentes/fredoka.ttf) format("truetype");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --cielo: #eaf6fb;
  --menta: #a8e3c5;
  --menta-suave: #ddf4e8;
  --rosa: #f27ba6;
  --rosa-suave: #ffe4ee;
  --lila-suave: #efe8fb;
  --mantequilla: #ffe08a;
  --mantequilla-suave: #fff4cc;
  --chocolate: #5a3a2a;
  --chocolate-suave: #7a5a48;
  --crema: #fff8ef;
  --titulos: "Grandstander", "Fredoka", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --texto: "Fredoka", "Grandstander", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;   /* (Grandstander: las letras polacas y turcas que no tiene Fredoka) */
  color-scheme: light;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 72px; }   /* (la cabecera se queda arriba) */

body {
  margin: 0;
  background: var(--cielo);
  color: var(--chocolate);
  font-family: var(--texto);
  font-size: 1.125rem;
  line-height: 1.55;
}

img { max-width: 100%; height: auto; }

/* en japonés, coreano y chino, sus letras redondeadas del sistema detrás de las de la marca (que no las tienen) */
html:lang(ja) { --titulos: "Grandstander", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif; --texto: "Fredoka", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif; }
html:lang(ko) { --titulos: "Grandstander", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; --texto: "Fredoka", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; }
html:lang(zh-Hans) { --titulos: "Grandstander", "PingFang SC", "Noto Sans SC", sans-serif; --texto: "Fredoka", "PingFang SC", "Noto Sans SC", sans-serif; }
html:lang(zh-Hant) { --titulos: "Grandstander", "PingFang TC", "Noto Sans TC", sans-serif; --texto: "Fredoka", "PingFang TC", "Noto Sans TC", sans-serif; }
html:lang(ja) .lema, html:lang(ko) .lema, html:lang(zh-Hans) .lema, html:lang(zh-Hant) .lema { max-width: 16em; }

.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

h1, h2, h3, .marca-mini, .pronto, .pareja strong, .promesas strong, .ideas strong {
  font-family: var(--titulos);
}
h1, h2 {
  font-weight: 700;
  line-height: 1.12;
  text-wrap: balance;
  margin: 0 0 0.6em;
}
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
p { margin: 0 0 0.9em; max-width: 62ch; }

a { color: inherit; }
:focus-visible { outline: 4px solid var(--rosa); outline-offset: 4px; border-radius: 12px; }

.ancho {
  max-width: 1100px;
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

/* ---------- la cabecera ---------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--cielo) 86%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px max(20px, env(safe-area-inset-right, 0px)) 14px max(20px, env(safe-area-inset-left, 0px));
  padding-top: max(14px, env(safe-area-inset-top, 0px));
}
.marca-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.25rem;
}
.marca-mini img { width: 48px; height: auto; }
.cabecera nav { display: flex; gap: 18px; margin-left: auto; }
.cabecera nav a { text-decoration: none; font-weight: 500; }
.cabecera nav a:hover { text-decoration: underline wavy var(--rosa) 2px; text-underline-offset: 6px; }
.idioma select {
  font: inherit;
  font-family: var(--texto);
  font-weight: 600;
  font-size: 1rem;
  color: var(--chocolate);
  background: var(--crema) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235a3a2a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 3px solid var(--chocolate);
  border-radius: 999px;
  padding: 6px 36px 6px 16px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.idioma select:hover { background-color: var(--mantequilla-suave); }

/* ---------- lo blandito: todo lo que es un Chubi se aprieta (web.js mueve su muelle) ---------- */

.blandito {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.blandito img { pointer-events: none; -webkit-user-drag: none; }
button.blandito {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
}
.blandito .cuerpo {
  position: relative;
  display: block;
  height: 100%;
  transform-origin: 50% 100%;   /* se aplastan contra el suelo */
}

/* la purpurina dentro de cada Chubi: dos capas de motitas que centellean una tras otra, solo donde dice su máscara;
   al soltarlo, se arremolina */
.brillo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background: url(img/purpurina_a.png) 0 0 / 90px;
  animation: titila 2.2s ease-in-out infinite alternate;
}
.brillo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(img/purpurina_b.png) 30px 20px / 90px;
  animation: titila 2.2s ease-in-out infinite alternate-reverse;
}
.remolino .brillo { animation: titila 2.2s ease-in-out infinite alternate, remolino 1.1s ease-out; }
@keyframes titila { from { opacity: 0.2; } to { opacity: 0.95; } }
@keyframes remolino {
  0% { background-position: 0 0; }
  40% { background-position: 24px -40px; }
  100% { background-position: 0 0; }
}

/* ---------- el principio: el logo, cuyos Chubis botan al abrir y al tocarlos ---------- */

.inicio {
  text-align: center;
  padding: 24px 20px 40px;
}
.logo {
  position: relative;
  width: min(560px, 88vw);
  margin: 0 auto 18px;
}
.logo .fondo { display: block; width: 100%; height: auto; }
.logo .chubi {
  position: absolute;
  transform-origin: 50% 78%;   /* donde se apoyan en las letras */
}
.logo .chubi img { display: block; width: 100%; height: 100%; }
.logo .chubi-1 .brillo { -webkit-mask-image: url(img/brillo_1.png); mask-image: url(img/brillo_1.png); }
.logo .chubi-2 .brillo { -webkit-mask-image: url(img/brillo_2.png); mask-image: url(img/brillo_2.png); }
.logo .chubi-3 .brillo { -webkit-mask-image: url(img/brillo_3.png); mask-image: url(img/brillo_3.png); }

.lema {
  font-size: clamp(1.9rem, 4.6vw, 3.3rem);
  max-width: 21ch;
  margin: 0 auto 0.45em;
}
.entradilla {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  margin: 0 auto;
  max-width: 44ch;
  color: var(--chocolate-suave);
}

/* ---------- aprieta a los Chubis: los seis del público, de pie en su colina ---------- */

.chubis {
  --alto: clamp(86px, 11vw, 150px);
  text-align: center;
  padding: 8px 0 0;
  overflow: hidden;
}
.fila-chubis {
  position: relative;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 6px clamp(4px, 2vw, 26px);
  padding: 34px max(16px, env(safe-area-inset-right, 0px)) 56px max(16px, env(safe-area-inset-left, 0px));
  margin-top: 8px;
}
.fila-chubis::before {   /* la colina */
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: 0;
  height: calc(var(--alto) * 0.42 + 56px);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: var(--menta);
  z-index: -1;
}
.chubi-publico {
  position: relative;
  height: calc(var(--alto) * var(--lienzo));
}
.chubi-publico img { display: block; width: 100%; height: 100%; }
.chubi-publico::after {   /* su sombra en la hierba */
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: -5px;
  height: 10px;
  border-radius: 50%;
  background: rgba(90, 58, 42, 0.14);
  z-index: -1;
}

/* ---------- las secciones, con su borde ondulado de gominola ---------- */

.historia, .juego, .mascotas, .familias, .pintar, .mas {
  position: relative;
  padding: 64px 0 72px;
}
.historia::before, .juego::before, .mascotas::before, .familias::before, .pintar::before, .mas::before, .pie::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -27px;
  height: 28px;
  background: radial-gradient(circle at 50% 100%, var(--fondo) 69%, transparent 70%) 0 0 / 56px 28px repeat-x;
}
.calma { --fondo: var(--menta); background: var(--fondo); position: relative; padding: 8px 0 72px; }   /* (sigue la colina) */
.historia { --fondo: var(--cielo); background: var(--fondo); }
.juego { --fondo: var(--menta-suave); background: var(--fondo); }
.mascotas { --fondo: var(--lila-suave); background: var(--fondo); }
.familias { --fondo: var(--rosa-suave); background: var(--fondo); }
.pintar { --fondo: var(--cielo); background: var(--fondo); }
.mas { --fondo: var(--mantequilla-suave); background: var(--fondo); padding-bottom: 130px; }   /* (sitio para los que se despiden) */
.pie { --fondo: var(--cielo); }

/* ---------- las páginas de privacidad y de ayuda (privacidad/, soporte/; legal.js elige el idioma) ---------- */

.idiomas-legal { margin-left: auto; display: flex; gap: 8px; }
.idiomas-legal button {
  font: inherit;
  font-size: 0.95rem;
  color: var(--chocolate);
  background: var(--crema);
  border: 3px solid var(--chocolate);
  border-radius: 999px;
  padding: 5px 14px;
  cursor: pointer;
}
.idiomas-legal button[aria-pressed="true"] { background: var(--mantequilla); }
.legal { max-width: 760px; margin: 0 auto; padding: 24px 20px 72px; }
.legal h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: 0.2em; }
.legal h2 { font-size: 1.45rem; margin-top: 1.6em; }
.legal .fecha { color: var(--chocolate-suave); font-size: 0.95rem; }
.legal .resumen { font-size: 1.2rem; background: var(--crema); border: 3px solid var(--chocolate); border-radius: 22px; padding: 16px 20px; }
.legal ul { padding-left: 1.2em; }
.legal li { margin-bottom: 0.6em; }
.legal dt { font-family: var(--titulos); font-size: 1.15rem; margin-top: 1.2em; }
.legal dd { margin: 0.3em 0 0; }
.legal article + article { margin-top: 72px; }   /* (sin JavaScript se ven las dos lenguas) */
.legal article[hidden] + article { margin-top: 0; }
.pagina-legal .pie::before { display: none; }

/* ---------- de dónde vienen los Chubis: gotean del arcoíris (cada uno, del color de su franja) ---------- */

.historia-ancho {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.historia h2 { margin-top: 0; }
.historia-texto p { font-size: clamp(1.05rem, 1.6vw, 1.18rem); }
.historia-dibujo { --alto: clamp(64px, 8vw, 104px); max-width: 460px; margin: 0 auto; width: 100%; }
.arcoiris { display: block; width: 100%; height: auto; }
.gotas {
  position: relative;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 7%;
  margin-top: 2%;
}
.gotas::before {   /* la hierba donde rebotan */
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: -12px;
  height: calc(var(--alto) * 0.42 + 12px);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: var(--menta);
  z-index: -1;
}
.gotas .chubi-publico { transform-origin: 50% 100%; }
.gotas .chubi-publico:nth-child(1) { --d: 0s; }
.gotas .chubi-publico:nth-child(2) { --d: 0.45s; }
.gotas .chubi-publico:nth-child(3) { --d: 0.9s; }
.por-gotear .gotas .chubi-publico { opacity: 0; }
.gotea .gotas .chubi-publico { animation: gota 1.2s var(--d) cubic-bezier(0.45, 0, 0.6, 1) both; }
@keyframes gota {   /* cae estirada como una gota, se aplasta al llegar y rebota */
  0% { opacity: 0; transform: translateY(-330%) scale(0.45, 0.7); }
  12% { opacity: 1; }
  55% { transform: translateY(0) scale(0.85, 1.18); }
  68% { transform: translateY(0) scale(1.22, 0.78); }
  82% { transform: translateY(-16%) scale(0.96, 1.05); }
  100% { opacity: 1; transform: none; }
}

/* ---------- para pintar: tres láminas en abanico, como hojas de papel, y la descarga del PDF ---------- */

.pintar-ancho {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.pintar h2 { margin-top: 0; }
.laminas { position: relative; display: block; height: clamp(250px, 30vw, 380px); }
.laminas img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: 88%;
  background: #fff;
  border: 3px solid var(--chocolate);
  border-radius: 10px;
  box-shadow: 0 6px 0 rgba(90, 58, 42, 0.18);
  transform: translate(-50%, -50%);
  transition: transform 0.4s cubic-bezier(0.34, 1.6, 0.5, 1);
}
.laminas img:nth-child(1) { transform: translate(-50%, -50%) translateX(-44%) rotate(-9deg); }
.laminas img:nth-child(2) { transform: translate(-50%, -50%) translateX(44%) rotate(9deg); }
.laminas:hover img:nth-child(1) { transform: translate(-50%, -50%) translateX(-58%) rotate(-13deg); }
.laminas:hover img:nth-child(2) { transform: translate(-50%, -50%) translateX(58%) rotate(13deg); }
.laminas:hover img:nth-child(3) { transform: translate(-50%, -52%) rotate(-1deg); }
.descargar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 14px 30px 14px 24px;
  background: var(--mantequilla);
  color: var(--chocolate);
  font-family: var(--titulos);
  font-size: 1.3rem;
  text-decoration: none;
  border: 4px solid var(--chocolate);
  border-radius: 999px;
  box-shadow: 0 5px 0 var(--chocolate);
  transition: transform 0.15s, box-shadow 0.15s;
}
.descargar:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--chocolate); }
.descargar:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--chocolate); }
.descargar:focus-visible { outline: 3px solid var(--rosa); outline-offset: 4px; }
.nota-pdf { margin-top: 14px; font-size: 0.95rem; color: var(--chocolate-suave); }

/* ---------- un juego tranquilo y amable: cuatro ideas, con los iconos del juego ---------- */

.calma h2 { text-align: center; }
.entrada-calma {
  text-align: center;
  margin: 0 auto 36px;
  max-width: 40ch;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
}
.ideas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 28px 32px;
}
.ideas li { text-align: center; }
.ideas img {
  display: block;
  width: 84px;
  height: 84px;
  object-fit: contain;
  margin: 0 auto 10px;
  transition: transform 0.45s cubic-bezier(0.34, 1.8, 0.5, 1);
}
@media (hover: hover) {
  .ideas li:hover img { transform: translateY(-6px) rotate(-6deg) scale(1.08); }
}
.ideas strong {
  display: block;
  font-size: 1.35rem;
  line-height: 1.2;
  margin-bottom: 6px;
}
.ideas span { display: block; max-width: 30ch; margin: 0 auto; }
/* al llegar, los iconos saltan uno tras otro */
.ideas li:nth-child(1) { --d: 0s; }
.ideas li:nth-child(2) { --d: 0.15s; }
.ideas li:nth-child(3) { --d: 0.3s; }
.ideas li:nth-child(4) { --d: 0.45s; }
.por-saltar img { opacity: 0; transform: scale(0.4); }
.saltan img { animation: salta 0.7s cubic-bezier(0.34, 1.8, 0.5, 1) var(--d) both; }
@keyframes salta {
  0% { opacity: 0; transform: scale(0.4) translateY(20px); }
  60% { opacity: 1; transform: scale(1.1, 0.92) translateY(0); }
  100% { opacity: 1; transform: none; }
}

/* ---------- Squishies Island ---------- */

.juego-cabeza {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: center;
}
.logo-juego { width: 100%; max-width: 440px; justify-self: center; }
.pronto {
  display: inline-block;
  font-family: var(--titulos);
  font-weight: 700;
  background: var(--mantequilla);
  border: 3px solid var(--chocolate);
  border-radius: 999px;
  padding: 6px 18px;
  margin-top: 0.3em;
}

.capturas {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
}
.capturas li { grid-column: span 2; }
.capturas li:nth-child(4), .capturas li:nth-child(5) { grid-column: span 3; }
.capturas img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 4px solid var(--chocolate);
  border-radius: 26px;
  background: var(--crema);
}
.capturas li:nth-child(odd) { --giro: -1.2deg; }
.capturas li:nth-child(even) { --giro: 1deg; }
.capturas li:nth-child(1) { --d: 0s; }
.capturas li:nth-child(2) { --d: 0.12s; }
.capturas li:nth-child(3) { --d: 0.24s; }
.capturas li:nth-child(4) { --d: 0.36s; }
.capturas li:nth-child(5) { --d: 0.48s; }
.capturas img {
  transform: rotate(var(--giro));
  transition: transform 0.45s cubic-bezier(0.34, 1.8, 0.5, 1);   /* con un poco de rebote, como gominola */
}
@media (hover: hover) {
  .capturas img:hover { transform: rotate(0deg) scale(1.035); }
}
/* al llegar, caen una tras otra y se aplastan un poco al tocar el suelo */
.por-caer img { opacity: 0; transform: translateY(-40px) rotate(var(--giro)); }
.caidas img { animation: cae 0.75s ease-out var(--d) both; }
@keyframes cae {
  0% { opacity: 0; transform: translateY(-40px) rotate(var(--giro)); }
  55% { opacity: 1; transform: translateY(0) scale(1.03, 0.94) rotate(var(--giro)); }
  75% { transform: translateY(-6px) scale(0.99, 1.02) rotate(var(--giro)); }
  100% { opacity: 1; transform: rotate(var(--giro)); }
}

/* ---------- Mimi y Juju ---------- */

.mascotas h2 { text-align: center; }
.pareja {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  max-width: 860px;
  margin: 0 auto;
}
.pareja figure { margin: 0; text-align: center; }
.pareja .mascota {
  display: block;
  width: 82%;
  margin: 0 auto;
  padding: 8% 10% 2%;
  border-radius: 58% 42% 52% 48% / 52% 48% 52% 48%;
}
.pareja figure:first-child .mascota { background: #ffe1c7; }
.pareja figure:last-child .mascota { background: #e3d6fa; }
.pareja .mascota img { display: block; width: 100%; height: auto; }
.pareja figcaption { margin-top: 14px; }
.pareja strong { display: block; font-family: var(--titulos); font-size: 1.6rem; }

/* ---------- para familias: primero, lo que podéis decidir (el tiempo de juego); luego, lo que nunca encontraréis ---------- */

.tiempo {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: 32px;
  margin: 8px 0 40px;
  padding: 26px 30px;
  background: var(--crema);
  border: 4px solid var(--chocolate);
  border-radius: 30px;
  box-shadow: 0 6px 0 var(--chocolate);
}
.tiempo-foto { position: relative; margin: 0; }
.tiempo-foto > img:first-child {
  display: block;
  width: 100%;
  height: auto;
  border: 4px solid var(--chocolate);
  border-radius: 22px;
}
.tiempo-foto .candado {   /* el candado de la zona de padres, en la esquina como en el juego */
  position: absolute;
  right: -14px;
  top: -18px;
  width: 58px;
  height: auto;
  transform: rotate(8deg);
}
.tiempo h3 { font-size: 1.5rem; margin: 0 0 8px; line-height: 1.2; }
.tiempo p { margin: 0; }
.tiempo-puntos { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.tiempo-puntos li { padding-left: 26px; position: relative; }
.tiempo-puntos li::before {   /* una estrellita del proyector */
  content: "★";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--rosa);
  animation: centellea 3.2s ease-in-out infinite;
}
.tiempo-puntos li:nth-child(2)::before { animation-delay: -0.8s; }
.tiempo-puntos li:nth-child(3)::before { animation-delay: -1.6s; }
.tiempo-puntos li:nth-child(4)::before { animation-delay: -2.4s; }
@keyframes centellea { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.8); } }
.tiempo-puntos strong { display: block; }


.entrada-familias { font-size: 1.2rem; }
.promesas {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 26px 40px;
}
.promesas li { max-width: 46ch; }
.promesas strong {
  display: block;
  font-family: var(--titulos);
  font-size: 1.45rem;
  line-height: 1.2;
  margin-bottom: 4px;
  text-decoration: line-through wavy var(--rosa) 3px;
  text-decoration-skip-ink: none;
}
.promesas li:nth-child(1) { --d: 0s; }
.promesas li:nth-child(2) { --d: 0.25s; }
.promesas li:nth-child(3) { --d: 0.5s; }
.promesas li:nth-child(4) { --d: 0.75s; }
.promesas li:nth-child(5) { --d: 1s; }
.por-tachar strong { text-decoration-color: transparent; }
.tachada strong {
  text-decoration-color: var(--rosa);
  transition: text-decoration-color 0.3s ease var(--d);
  animation: tachon 0.4s ease-out var(--d) both;
}
@keyframes tachon {
  0% { transform: none; }
  45% { transform: scale(1.06, 0.92) rotate(-1deg); }
  100% { transform: none; }
}

/* ---------- más isla ---------- */

.mas-ancho {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 40px;
  align-items: center;
}
/* el globo del juego, flotando sobre el mapa */
.mapa { position: relative; }
.mapa .globo {
  position: absolute;
  top: -14%;
  left: 58%;
  width: 15%;
  animation: viaja 22s ease-in-out infinite alternate;
  pointer-events: none;
}
.mapa .globo img {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0;
  transform: none;
  filter: drop-shadow(0 10px 8px rgba(90, 58, 42, 0.18));
  animation: flota 3.4s ease-in-out infinite alternate;
}
@keyframes viaja {
  from { transform: translateX(0); }
  to { transform: translateX(-220%); }
}
@keyframes flota {
  from { transform: translateY(0) rotate(-3deg); }
  to { transform: translateY(-14px) rotate(3deg); }
}
.mapa > img {
  border: 4px solid var(--chocolate);
  border-radius: 26px;
  transform: rotate(1.2deg);
}

/* ---------- el pie ---------- */

/* ---------- la despedida: cuatro Chubis asoman por el borde del pie y saludan ---------- */

.despedida {
  --alto: clamp(92px, 8vw, 118px);
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(10px, 4vw, 40px);
  height: calc(var(--alto) * 1.1);
  margin-top: calc(var(--alto) * -1.1);
  overflow: hidden;
  pointer-events: none;
}
.despedida .chubi-publico {
  margin-bottom: calc(var(--alto) * -0.12);   /* los pies, detrás del borde ondulado */
  pointer-events: auto;
  transition: transform 0.6s cubic-bezier(0.34, 1.6, 0.5, 1);
}
.despedida .chubi-publico::after { display: none; }
.despedida .chubi-publico:nth-child(2) { transition-delay: 0.12s; }
.despedida .chubi-publico:nth-child(3) { transition-delay: 0.24s; }
.despedida .chubi-publico:nth-child(4) { transition-delay: 0.36s; }
.escondidos .chubi-publico { transform: translateY(100%); }
.asomados .chubi-publico { transform: none; }

.pie {
  position: relative;
  z-index: 2;
  background: var(--cielo);
  text-align: center;
  padding: 36px 20px max(36px, env(safe-area-inset-bottom, 0px));
  font-size: 0.95rem;
  color: var(--chocolate-suave);
}
.pie p { margin: 0 auto 0.3em; }

/* ---------- en un móvil ---------- */

@media (max-width: 760px) {
  .historia-ancho, .pintar-ancho { grid-template-columns: 1fr; }
  .pintar-texto { text-align: center; }
  .historia-texto { text-align: center; }
  .cabecera nav { display: none; }
  .idioma { margin-left: auto; }
  .juego-cabeza, .mas-ancho { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .capturas {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 6px 4px 14px;
    margin-left: -4px;
    margin-right: -4px;
  }
  .capturas li { flex: 0 0 82%; scroll-snap-align: center; }
  .pareja { grid-template-columns: minmax(0, 1fr); max-width: 380px; }
  .chubis { --alto: 92px; }
  .tiempo { grid-template-columns: 1fr; gap: 22px; padding: 20px; }
  .despedida { --alto: 68px; gap: 8px; }
  .fila-chubis { padding-left: 24px; padding-right: 24px; row-gap: 18px; }
  .fila-chubis::before { height: calc(var(--alto) * 1.75 + 56px); border-radius: 50% 50% 0 0 / 30% 30% 0 0; }   /* dos filas: las dos en la hierba */
  .idioma select { font-size: 0.9rem; padding: 5px 30px 5px 12px; background-position: right 10px center; }
}

@media (max-width: 440px) {
  .marca-mini span { display: none; }   /* en un móvil estrecho, solo el círculo: el logo grande está justo debajo */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .brillo, .brillo::after, .remolino .brillo { animation: none; opacity: 0.7; }
  .tachada strong, .caidas img, .saltan img { animation: none; }
  .mapa .globo, .mapa .globo img { animation: none; }
  .tiempo-puntos li::before { animation: none; }
  .laminas img, .descargar { transition: none; }
}