/* ==========================================================================
   LAS LETRAS, SERVIDAS DESDE ACÁ
   ==========================================================================
   Auto-alojadas a propósito, no traídas de fonts.gstatic.com. La página promete que no hay
   rastreadores de terceros, y un pedido a Google por cada visita le manda a Google la IP de cada
   persona que entra: eso es justo lo que dice que no hace. Además ahorra dos conexiones nuevas.

   UNA SOLA FAMILIA: Signika Negative (Google Fonts, licencia OFL), 700 para títulos y botones y
   400 para el cuerpo. La eligió el dueño el 20/10/2026, en lugar de Baloo 2 y Nunito: «no me
   gusta las fuentes que hay en la web y en la app, parecen comic sans en negrita».

   Es una fuente VARIABLE: Google sirve el mismo archivo para el 400 y el 700, así que cada
   subconjunto es un archivo solo y se declara con el rango de pesos. Sólo latin y latin-ext: la ñ
   y los signos de apertura ya están en latin (U+00A1, U+00BF, U+00F1), y el navegador mira el
   unicode-range ANTES de pedir el archivo, así que latin-ext ni se pide mientras no aparezca una
   letra que lo necesite. Quien lee en español baja 41 kB de letra, contra 72 de antes. */

@font-face {
  font-family: 'Signika Negative';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fuentes/signika-negative-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Signika Negative';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fuentes/signika-negative-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Medidos sobre el logo: KnowledgeBase/31-el-diseno.md */
  --menta: #4EA08A;
  --menta-clara: #B1ECDC;
  /* Blanco sobre #4EA08A da 3,1:1 y no pasa AA; sobre éste da 4,9:1. */
  --menta-profunda: #2E7D6A;
  --crema: #FCF8E5;
  --tinta: #292C31;

  /* La paleta del juego, con su labio elegido a mano (oscurecer el oro lo vuelve oliva) */
  --oro: #FFC530;      --oro-labio: #C8890B;
  --menta-juego: #3FBF9A; --menta-labio: #2A8A6E;
  --cielo: #3D9BFF;    --cielo-labio: #1F63BA;
  --uva: #A45CF0;      --uva-labio: #6E31B0;

  --fondo: var(--crema);
  --fondo-tarjeta: #FFFFFF;
  --texto: var(--tinta);
  --texto-suave: #5C6169;
  --borde: #E4DFC5;
  --sombra: 0 2px 0 rgba(41, 44, 49, .07), 0 12px 28px -18px rgba(41, 44, 49, .5);

  /* EL CANTO: el aire entre el contenido y el borde de la ventana. Era 16 px fijos, y como el
     envoltorio tope a 1060, en una ventana de 1078 el contenido quedaba a 25 px del borde y la
     pagina se veia apretada contra los costados. Crece con la ventana y se frena en 40.
     Las tiras que se salen del envoltorio para llegar al borde (etapas, vestidos, tramos,
     deportes, carrusel) usan ESTA medida, no un 16 repetido: si se tocan por separado, entre
     700 y 760 px la tira y el envoltorio dejan de coincidir. */
  --canto: clamp(16px, 3vw, 40px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #191C21;
    --fondo-tarjeta: #23272E;
    --texto: #F3F1E6;
    --texto-suave: #A7AEB8;
    --borde: #343A43;
    --sombra: 0 2px 0 rgba(0, 0, 0, .3), 0 12px 28px -18px #000;
  }
}
:root[data-theme="dark"] {
  --fondo: #191C21;
  --fondo-tarjeta: #23272E;
  --texto: #F3F1E6;
  --texto-suave: #A7AEB8;
  --borde: #343A43;
  --sombra: 0 2px 0 rgba(0, 0, 0, .3), 0 12px 28px -18px #000;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* Las figuras que entran «desde la derecha» arrancan corridas 38 px (ver [data-entra="derecha"])
   y, mientras no entraron, estiraban la página: en un teléfono de 390 px quedaba un scroll
   horizontal de 19 px. Medido el 20/10/2026 con mirar-movil.mjs. Va en `main` y no en `html`: en
   el raíz el overflow pasa al viewport, y Chrome en un teléfono igual agranda el viewport de
   layout hasta el contenido (con `html` seguía en 409 px). `clip` y no `hidden`, para no crear un
   contenedor de scroll. */
main { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: "Signika Negative", "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .5em; font-weight: 700; text-wrap: balance; }
p { text-wrap: pretty; }
h1 { font-size: clamp(2rem, 7vw, 3.6rem); }
h2 { font-size: clamp(1.5rem, 5vw, 2.4rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
a { color: var(--menta-profunda); }
/* En oscuro, SÓLO los links de texto van en menta. Los botones de la portada también son <a>, y
   una regla sobre todos los <a> les pintaba el texto del color de su propio fondo: el «Probarla»
   quedaba verde sobre verde, invisible, en cualquier teléfono en modo oscuro (22/9/2026). */
/* Y en oscuro el menta del logo no alcanza para un enlace: medido da 4,80:1 sobre la tarjeta y
   5,47 sobre el fondo, pero apenas 3,65 sobre el amarillento de los avisos, y AA pide 4,5. Éste
   es el menta más cercano al de la marca que pasa sobre los tres fondos oscuros a la vez. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) a:not([class]) { color: #5FB89F; } }
:root[data-theme="dark"] a:not([class]) { color: #5FB89F; }

.envoltorio { width: 100%; max-width: 1060px; margin: 0 auto; padding-inline: var(--canto); }

/* La medida del renglón. El envoltorio llega a 1028 px de texto: medido con el ancho real de la
   fuente, eso son 100 caracteres por renglón, y a esa medida el ojo pierde dónde empieza el
   siguiente. Lo cómodo son 45 a 75. Los títulos ya tenían su tope desde el principio
   (.titulo-seccion, 36em); esto se lo pone al cuerpo. Las tiras, las grillas y las tarjetas
   quedan afuera a propósito: ahí el ancho lo manda la maqueta, no la lectura. */
.par > div:not(.foto),
.envoltorio > .aviso,
.faq details p,
.mas p, .mas li,
.portada .letra-chica { max-width: 66ch; }
/* Éstos llevan el tope propio, no heredado: «ch» se mide con la letra del elemento que lo lleva,
   y un al-pie de 15,6 px dentro de un padre acotado a 66ch de 17 px entraba a 80 caracteres. */
.al-pie, .dictamen { max-width: 66ch; }

/* ---------- barra de arriba ---------- */
.barra {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}
.barra .envoltorio {
  display: flex; align-items: center; gap: 14px;
  min-height: 62px;
}
/* 44 px de alto en todo lo que se toca en la barra: medido, la marca daba 38 y la pildora 41, y
   en un telefono eso es un dedo que falla. El alto se gana con relleno, no agrandando la letra. */
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; font-weight: 700; min-height: 44px; }
.marca img {
  width: 38px; height: 38px; border-radius: 11px;
  border: 2px solid var(--menta); background: #fff; object-fit: cover;
}
.marca span { font-size: 1.25rem; letter-spacing: .01em; }
.barra nav { margin-left: auto; display: flex; gap: 20px; align-items: center; }
.barra nav a {
  color: var(--texto-suave); text-decoration: none; font-weight: 700; font-size: .95rem;
  display: inline-flex; align-items: center; min-height: 44px;
}
.barra nav a:hover { color: var(--menta); }
/* Con «Las visitas» son cinco links: entre 641 y 760 px se partían en dos renglones cada uno. Debajo
   de 760 quedan sólo la marca y «Probarla»; y ningún link se parte, para que el corte se note en
   el ancho y no en una barra de dos pisos. */
.barra nav a { white-space: nowrap; }
@media (max-width: 760px) { .barra nav .opcional { display: none; } }
.barra nav a.pildora {
  color: #fff; background: var(--menta-profunda);
  padding: 8px 16px; border-radius: 999px; min-height: 44px;
  display: inline-flex; align-items: center;
}
.barra nav a.pildora:hover { color: #fff; filter: brightness(1.08); }

/* ---------- el botón gordo, como en la app ---------- */
.gordo {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border: 0; border-radius: 16px;
  font: inherit; font-weight: 700; font-size: 1.02rem;
  color: #fff; text-decoration: none; cursor: pointer;
  background: var(--cara);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .38), 0 6px 0 var(--labio);
  /* Blanco sobre el oro no llega a 3:1: lo que contrasta es el contorno oscuro */
  text-shadow: 0 2px 0 rgba(41, 44, 49, .45);
  transition: transform .09s ease, box-shadow .09s ease;
}
.gordo:active {
  transform: translateY(3px);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .38), 0 3px 0 var(--labio);
}
.gordo.oro   { --cara: var(--oro);        --labio: var(--oro-labio); }
/* En la web la cara del botón menta es la profunda: blanco sobre el menta del juego da 2,30:1,
   y la sombra de contorno ayuda a la vista pero no cuenta para WCAG. Así da 4,93:1. */
.gordo.menta { --cara: var(--menta-profunda); --labio: #1E5A4C; }
.gordo.cielo { --cara: var(--cielo);      --labio: var(--cielo-labio); }
@media (prefers-reduced-motion: reduce) { .gordo { transition: none; } }

/* El botón de segunda línea se identifica SÓLO por su contorno, así que ese contorno es
   información, no adorno: WCAG 1.4.11 le pide 3:1. El --borde general sirve para separar
   tarjetas (1,31:1 en oscuro, 1,34 en claro) y ahí está bien; acá desaparecía el botón de
   iPhone. Medido: #968E61 da 3,31 sobre blanco y 3,11 sobre el crema; #6B7787, 3,29 sobre la
   tarjeta oscura. Sigue leyéndose como secundario, porque lo secundario lo hace el relleno. */
.sencillo {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 16px;
  border: 2px solid #968E61;
  background: var(--fondo-tarjeta); color: var(--texto);
  text-decoration: none; font-weight: 700;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sencillo { border-color: #6B7787; } }
:root[data-theme="dark"] .sencillo { border-color: #6B7787; }
.sencillo:hover { border-color: var(--menta); color: var(--menta); }

/* ---------- portada ---------- */
/* Mobile-first: en celular la primera pantalla tiene que mostrar a la criatura, no sólo
   texto. Arriba va el ícono de la app, y el teléfono grande de la derecha se reemplaza por
   el carrusel de capturas que sigue a la portada. */
.portada { padding: 28px 0 8px; overflow: hidden; }
.portada .envoltorio { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) {
  .portada { padding: 72px 0 40px; }
  .portada .envoltorio { grid-template-columns: 1.05fr .95fr; gap: 48px; }
}
.encabezado-portada { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.icono-app {
  width: 64px; height: 64px; flex: none;
  border-radius: 18px; border: 3px solid var(--menta);
  box-shadow: 0 4px 0 var(--menta-labio), 0 12px 24px -14px rgba(41, 44, 49, .6);
}
@media (min-width: 900px) { .icono-app { width: 76px; height: 76px; border-radius: 21px; } }
.pastilla {
  display: inline-block;
  padding: 6px 14px; border-radius: 999px;
  background: var(--menta-clara); color: #235C4C;
  font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
}
/* La de «En desarrollo» no puede parecerse a la de «En pruebas»: una dice que lo podés usar hoy
   y la otra que todavía no existe. Va en los colores del texto, sin el menta de la marca. */
.pastilla.gris { background: var(--borde); color: var(--texto); }
.titulo-seccion .pastilla { margin-bottom: 12px; }

.portada p.bajada { font-size: 1.08rem; color: var(--texto-suave); max-width: 34em; }
@media (min-width: 900px) { .portada p.bajada { font-size: 1.16rem; } }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
/* En celular los dos botones van a todo el ancho: son lo único que importa de esta pantalla. */
.acciones > a { justify-content: center; }
@media (max-width: 480px) { .acciones > a { flex: 1 1 100%; } }
.letra-chica { margin-top: 14px; font-size: .88rem; color: var(--texto-suave); }

/* ---------- secciones ---------- */
section { padding: 36px 0; }
@media (min-width: 900px) { section { padding: 64px 0; } }
.titulo-seccion { max-width: 36em; margin-bottom: 24px; }
@media (min-width: 900px) { .titulo-seccion { margin-bottom: 34px; } }
.titulo-seccion p { color: var(--texto-suave); font-size: 1.08rem; margin: 0; }

.rejilla { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .rejilla { gap: 16px; grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px) { .rejilla.tres { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .rejilla.cuatro { grid-template-columns: repeat(4, 1fr); } }
.tarjeta {
  background: var(--fondo-tarjeta);
  border: 2px solid var(--borde);
  border-radius: 20px;
  padding: 24px 22px;
  box-shadow: var(--sombra);
}
.tarjeta h3 { margin-bottom: .35em; }
@media (max-width: 599px) {
  .tarjeta { padding: 16px; border-radius: 18px; }
  .rejilla .tarjeta.con-ficha {
    display: grid; grid-template-columns: 46px 1fr; column-gap: 14px; align-items: start;
  }
  .rejilla .tarjeta.con-ficha .ficha { grid-row: span 2; margin-bottom: 0; }
  .tarjeta h3 { font-size: 1.05rem; margin-bottom: .2em; }
  .tarjeta p { font-size: .93rem; line-height: 1.55; }
}
.tarjeta p { margin: 0; color: var(--texto-suave); font-size: .97rem; }
.ficha {
  width: 46px; height: 46px; margin-bottom: 14px;
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: 1.35rem;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 4px 0 var(--labio);
  background: var(--cara);
}
.ficha.oro   { --cara: var(--oro);         --labio: var(--oro-labio); }
.ficha.menta { --cara: var(--menta-juego); --labio: var(--menta-labio); }
.ficha.cielo { --cara: var(--cielo);       --labio: var(--cielo-labio); }
.ficha.uva   { --cara: var(--uva);         --labio: var(--uva-labio); }

/* ---------- la crianza, a dos columnas ---------- */
.par { display: grid; gap: 30px; align-items: center; }
@media (min-width: 900px) { .par { grid-template-columns: 1fr 1fr; gap: 54px; } }
.par.invertido .foto { order: -1; }
/* Las fotos decorativas se esconden en celular (son capturas verticales que empujan todo hacia
   abajo). Las que SON el contenido de su sección llevan «siempre» y se quedan: sin la captura
   del permiso o la del parque, esos párrafos hablan de algo que no se ve. */
@media (max-width: 899px) { .par .foto:not(.siempre) { display: none; } }
.foto figure { margin: 0; }
.foto img {
  width: min(280px, 72vw); height: auto; display: block; margin: 0 auto;
  border-radius: 20px; border: 4px solid var(--tinta);
  box-shadow: 0 20px 40px -24px rgba(41, 44, 49, .6);
}
/* Las capturas de pantalla enteras son más altas que anchas: más chicas, o se comen la pantalla.
   En celular van todavía más chicas — a 230 px de ancho cada una sumaba medio scroll de alto. */
.foto.angosta img { width: min(230px, 58vw); }
@media (max-width: 899px) { .foto.angosta img { width: min(178px, 46vw); } }
/* Dos capturas en la misma columna: dos teléfonos distintos y dos mascotas distintas prueban
   mejor que una sola que esto pasa de verdad y no es un montaje. */
.dos-fotos { display: grid; gap: 22px; }
/* Las dos son recortes de un escritorio, casi cuadrados: van del mismo tamaño y más anchas que
   una captura de pantalla entera, que es alta y angosta. Con el ancho de «angosta» la criatura
   quedaba del tamaño de una uña. */
/* Las dos pruebas del overlay, una al lado de la otra. Apiladas ocupaban 700 px en un teléfono
   para decir dos cosas de la misma idea; en fila se siguen leyendo y la sección pierde 350. */
/* Alineadas por ARRIBA: con los pies alineados, la que lleva sello y tres renglones de pie
   empujaba a la otra hacia abajo y los dos textos se cruzaban. */
.dos-fotos { grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.dos-fotos img, .dos-fotos .video-marco { width: 100%; }
@media (min-width: 900px) { .dos-fotos { gap: 16px; } .dos-fotos img, .dos-fotos .video-marco { width: 100%; } }

/* El epígrafe se ata al ancho de su imagen. Sin el tope corría los 736 px de la columna debajo
   de una foto de 270, y un pie tres veces más ancho que lo que explica se lee como otra cosa. */
.foto figcaption {
  margin-top: 10px; text-align: center;
  max-width: 32ch; margin-inline: auto;
  font-size: .875rem; color: var(--texto-suave);
}
.lista { list-style: none; padding: 0; margin: 20px 0 0; }
.lista li { position: relative; padding-left: 30px; margin-bottom: 12px; color: var(--texto-suave); }
.lista li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--menta-juego); box-shadow: 0 0 0 4px color-mix(in srgb, var(--menta-clara) 70%, transparent);
}
.lista li b { color: var(--texto); }

/* Contraste medido: blanco sobre --menta-profunda da 4,9:1. Las tarjetas de adentro son MÁS
   oscuras que la franja y no más claras: aclarar el fondo bajaba el texto a 3,9:1. */
.franja { background: var(--menta-profunda); color: #fff; }
.franja h2, .franja .titulo-seccion p { color: #fff; }
.franja .tarjeta { background: rgba(0, 0, 0, .16); border-color: rgba(255, 255, 255, .22); box-shadow: none; }
.franja .tarjeta h3, .franja .tarjeta p { color: #fff; }

.lista.compacta { margin-top: 14px; }
.lista.compacta li { margin-bottom: 8px; font-size: .95rem; }

/* La franja también lleva listas y pies de foto, y los dos heredaban gris oscuro sobre el menta:
   ilegible. Sobre --menta-profunda va blanco, que es lo único medido que pasa AA (4,9:1). */
.franja .lista li, .franja .lista li b, .franja figcaption { color: #fff; }
/* Medido: el blanco al 88 % sobre el menta profundo da 4,21:1 y AA pide 4,5 para este tamaño.
   La jerarquía la hace el cuerpo más chico, no un blanco apagado. */
.franja .al-pie { color: #fff; }
.franja a { color: #fff; }

/* Una aclaración al pie de la sección, más chica que el cuerpo pero no decorativa. */
.al-pie { font-size: .92rem; color: var(--texto-suave); margin-top: 18px; }

/* ---------- las siete etapas ---------- */
/* En celular es una tira que se desliza; las siete juntas serían siete estampillas ilegibles.
   Desde 700 px entran las siete en fila. Los dibujos vienen del render con un recuadro común,
   así que la cría se ve chica y la adulta grande: esa diferencia es el contenido de la sección. */
.etapas {
  list-style: none; margin: 0; padding: 8px var(--canto) 14px;
  display: flex; gap: 10px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--canto);
  scrollbar-width: none;
  /* Se sale del envoltorio para que la tira llegue al borde de la pantalla. */
  margin-inline: calc(-1 * var(--canto));
}
.etapas::-webkit-scrollbar { display: none; }
.etapas > li {
  flex: 0 0 auto; width: 132px; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--fondo-tarjeta);
  border: 2px solid var(--borde); border-radius: 18px;
  padding: 10px 8px 12px;
}
.etapas img { width: 96px; height: auto; display: block; }
.etapas b { font-size: .95rem; margin-top: 4px; }
.etapas span { font-size: .82rem; color: var(--texto-suave); }
@media (min-width: 700px) {
  .etapas {
    display: grid; grid-template-columns: repeat(7, 1fr);
    overflow: visible; margin-inline: 0; padding: 8px 0 14px; gap: 12px;
  }
  .etapas > li { width: auto; padding: 14px 8px 16px; }
  .etapas img { width: 100%; max-width: 124px; }
}

/* ---------- los conjuntos del ropero ---------- */
/* Seis dibujos del mismo tamaño: lo que cambia es la ropa, que es de lo que habla la sección.
   Se deslizan en celular; a partir de 700 px entran de a tres y en escritorio los seis. */
.vestidos {
  list-style: none; margin: 26px calc(-1 * var(--canto)) 0; padding: 4px var(--canto) 10px;
  display: flex; gap: 10px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--canto); scrollbar-width: none;
}
.vestidos::-webkit-scrollbar { display: none; }
.vestidos > li {
  flex: 0 0 auto; width: 132px; scroll-snap-align: start; text-align: center;
  background: var(--fondo-tarjeta); border: 2px solid var(--borde); border-radius: 16px;
  padding: 8px 6px 12px;
}
.vestidos img { width: 100%; height: auto; display: block; }
.vestidos b { display: block; margin-top: 4px; font-size: .85rem; }
@media (min-width: 700px) {
  .vestidos { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; gap: 12px; }
  .vestidos > li { width: auto; }
}
@media (min-width: 980px) { .vestidos { grid-template-columns: repeat(6, 1fr); } }

/* Lo que la IA escribió, en sus palabras. Va como cita porque es una cita. */
.dictamen {
  margin: 12px 0 0; padding: 16px 20px;
  border-left: 4px solid var(--menta-juego);
  background: color-mix(in srgb, var(--menta-juego) 10%, var(--fondo-tarjeta));
  border-radius: 0 14px 14px 0;
  font-size: 1.02rem; font-style: italic;
}
.dictamen span { display: block; margin-top: 8px; font-style: normal; font-size: .9rem; color: var(--texto-suave); }

/* Los cuatro momentos del parecido: se deslizan en celular, entran los cuatro en escritorio. */
.tramos {
  list-style: none; margin: 18px calc(-1 * var(--canto)) 0; padding: 4px var(--canto) 10px;
  display: flex; gap: 10px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--canto); scrollbar-width: none;
}
.tramos::-webkit-scrollbar { display: none; }
.tramos > li {
  flex: 0 0 auto; width: 136px; scroll-snap-align: start; text-align: center;
  background: var(--fondo-tarjeta); border: 2px solid var(--borde); border-radius: 16px;
  padding: 8px 8px 12px;
}
.tramos img { width: 100%; height: auto; display: block; }
.tramos b { display: block; margin-top: 4px; font-size: .84rem; }
@media (min-width: 760px) {
  .tramos { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; }
  .tramos > li { width: auto; }
}

/* ---------- los tres deportes del parque ---------- */
/* Son capturas apaisadas: a tres columnas en un celular quedarían de 110 px y no se vería la
   cancha. Se deslizan, como el carrusel de la portada, y recién a 760 px entran las tres. */
.deportes {
  list-style: none; margin: 26px calc(-1 * var(--canto)) 0; padding: 0 var(--canto) 6px;
  display: flex; gap: 12px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--canto);
  scrollbar-width: none;
}
.deportes::-webkit-scrollbar { display: none; }
.deportes > li { flex: 0 0 auto; width: min(76vw, 300px); scroll-snap-align: start; }
.deportes img {
  width: 100%; height: auto; display: block;
  border-radius: 16px; border: 3px solid var(--tinta);
  box-shadow: 0 14px 28px -20px rgba(41, 44, 49, .6);
}
.deportes b { display: block; margin-top: 10px; }
.deportes span { color: var(--texto-suave); font-size: .9rem; }
@media (min-width: 760px) {
  .deportes {
    display: grid; grid-template-columns: repeat(3, 1fr);
    overflow: visible; margin-inline: 0; padding-inline: 0;
  }
  .deportes > li { width: auto; }
}

/* ---------- preguntas frecuentes ---------- */
.faq { display: grid; gap: 12px; }
.faq details {
  background: var(--fondo-tarjeta);
  border: 2px solid var(--borde); border-radius: 16px;
  padding: 2px 18px;
}
.faq summary {
  cursor: pointer; font-weight: 700; padding: 14px 0;
  /* El triangulito propio del navegador se queda; sólo se le da lugar y un foco visible. */
  list-style-position: outside;
}
/* El triangulito sigue al color del texto: en oscuro, el menta profundo sobre la tarjeta gris
   quedaba casi invisible, y es la única pista de que la respuesta se abre. */
.faq summary::marker { color: currentColor; }
.faq details[open] summary { border-bottom: 1px solid var(--borde); }
.faq details p { color: var(--texto-suave); font-size: .96rem; margin: 14px 0; }

/* ---------- cierre ---------- */
.cierre { text-align: center; }
.cierre p { color: var(--texto-suave); max-width: 32em; margin-inline: auto; }
.cierre .acciones { justify-content: center; }

/* ---------- descarga ---------- */
.descarga { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .descarga { gap: 16px; grid-template-columns: repeat(2, 1fr); } }
.descarga .tarjeta { display: flex; flex-direction: column; }
.descarga .tarjeta .gordo, .descarga .tarjeta .sencillo { margin-top: auto; align-self: flex-start; }
.aviso {
  margin-top: 26px; padding: 18px 20px;
  border-left: 5px solid var(--oro);
  background: color-mix(in srgb, var(--oro) 12%, var(--fondo-tarjeta));
  border-radius: 0 14px 14px 0;
  font-size: .95rem; color: var(--texto-suave);
}
.aviso b { color: var(--texto); }

/* ---------- pie ---------- */
footer {
  border-top: 1px solid var(--borde);
  padding: 34px 0 44px;
  color: var(--texto-suave); font-size: .9rem;
}
footer .envoltorio { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
/* Lo mismo abajo: medidos daban 24 px de alto en escritorio y 36 en telefono. El relleno
   vertical no mueve nada de sitio porque la fila ya esta centrada. */
footer nav { margin-left: auto; display: flex; gap: 0 18px; flex-wrap: wrap; align-items: center; }
footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 640px) {
  footer .envoltorio { flex-direction: column; align-items: flex-start; }
  footer nav { margin-left: 0; gap: 6px 20px; }
  footer nav a { padding: 6px 0; }
}
footer a { color: var(--texto-suave); text-decoration: none; }
footer a:hover { color: var(--menta); }

/* ---------- páginas de documento (privacidad, baja de cuenta) ---------- */
.documento { max-width: 760px; padding: 44px 16px 72px; margin: 0 auto; }
.documento h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); margin-bottom: .3em; }
.documento .fecha { color: var(--texto-suave); font-size: .92rem; margin-bottom: 34px; }
.documento h2 {
  font-size: 1.4rem; margin-top: 2.1em; padding-top: 1.1em;
  border-top: 2px solid var(--borde);
}
.documento h2:first-of-type { border-top: 0; padding-top: 0; }
.documento h3 { font-size: 1.08rem; margin-top: 1.6em; }
.documento p, .documento li { color: var(--texto-suave); }
.documento li { margin-bottom: .5em; }
.documento strong, .documento b { color: var(--texto); }

/* Una captura dentro de una página de documento: centrada y del ancho de un teléfono, no del
   ancho del texto, que la dejaría enorme. */
.documento .captura { margin: 26px 0 32px; }
.documento .captura img {
  width: min(230px, 62vw); height: auto; display: block; margin: 0 auto;
  border-radius: 18px; border: 4px solid var(--tinta);
  box-shadow: 0 18px 36px -24px rgba(41, 44, 49, .6);
}
.documento .captura figcaption {
  margin-top: 10px; text-align: center; font-size: .875rem; color: var(--texto-suave);
}

.documento code {
  background: color-mix(in srgb, var(--menta-juego) 14%, var(--fondo-tarjeta));
  border: 1px solid var(--borde); border-radius: 6px;
  padding: 1px 6px; font-size: .92em;
}

.documento table {
  width: 100%; border-collapse: collapse; margin: 1.2em 0;
  font-size: .95rem;
}
.documento th, .documento td {
  text-align: left; padding: 10px 12px;
  border-bottom: 1px solid var(--borde);
  vertical-align: top; color: var(--texto-suave);
}
.documento th { color: var(--texto); font-weight: 700; }
@media (max-width: 560px) {
  .documento table, .documento thead, .documento tbody,
  .documento tr, .documento th, .documento td { display: block; }
  .documento thead { display: none; }
  .documento tr { border-bottom: 2px solid var(--borde); padding: 10px 0; }
  .documento td { border: 0; padding: 3px 0; }
  .documento td::before { content: attr(data-de) ": "; color: var(--texto); font-weight: 700; }
}

/* Lo que más importa de cada página, en un recuadro que no se saltea. */
.destacado {
  margin: 26px 0; padding: 20px 22px;
  border-left: 5px solid var(--menta-juego);
  background: color-mix(in srgb, var(--menta-juego) 10%, var(--fondo-tarjeta));
  border-radius: 0 16px 16px 0;
}
.destacado :last-child { margin-bottom: 0; }
.destacado.ojo { border-left-color: var(--fuego, #FF5A4E); background: color-mix(in srgb, #FF5A4E 9%, var(--fondo-tarjeta)); }

/* El botón de bajar, adentro de una página de documento: quien viene a leer los pasos después
   tiene que poder bajarla sin volver a la portada. */
.documento .con-boton { margin: 26px 0 32px; }
.documento .con-boton .gordo, .documento .con-boton .sencillo { width: 100%; justify-content: center; }
@media (min-width: 560px) {
  .documento .con-boton .gordo, .documento .con-boton .sencillo { width: auto; }
}

.pasos { counter-reset: paso; list-style: none; padding: 0; }
.pasos > li {
  counter-increment: paso; position: relative;
  padding-left: 52px; margin-bottom: 22px; min-height: 36px;
}
.pasos > li::before {
  content: counter(paso);
  position: absolute; left: 0; top: -2px;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--menta-juego); color: #fff;
  font-weight: 700; font-size: 1.05rem;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 3px 0 var(--menta-labio);
}
.pasos > li b { display: block; color: var(--texto); margin-bottom: .2em; }

/* ---------- la página que no está (404) ---------- */
.perdida { text-align: center; }
.perdida img { width: 132px; height: auto; margin: 0 auto 6px; display: block; }
.perdida p { max-width: 30em; margin-inline: auto; }
.perdida .acciones { justify-content: center; margin-bottom: 26px; }

/* ---------- la barra fija de abajo, sólo en celular ---------- */
/* Para instalar había que bajar hasta el final. La barra lleva ahí, y se esconde sola cuando
   la sección de descarga ya está en pantalla: dos botones iguales a la vista es ruido. */
.cta-fija {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--fondo) 92%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--borde);
  display: flex; align-items: center; gap: 12px;
  transition: transform .25s ease, opacity .25s ease;
}
.cta-fija .gordo { flex: 1; padding: 13px 18px; }
.cta-fija img { width: 40px; height: 40px; border-radius: 11px; border: 2px solid var(--menta); flex: none; }
/* visibility además de opacity: si no, escondida seguía en el orden del Tab y el foco caía en un
   botón invisible. La transición de visibility va con demora para que igual se vea bajar. */
.cta-fija.escondida { transform: translateY(110%); opacity: 0; pointer-events: none; visibility: hidden;
  transition: transform .25s ease, opacity .25s ease, visibility 0s linear .25s; }
@media (min-width: 900px) { .cta-fija { display: none; } }
@media (prefers-reduced-motion: reduce) { .cta-fija { transition: none; } }
/* Que el pie no quede tapado por la barra. */
@media (max-width: 899px) { body.con-cta-fija { padding-bottom: 76px; } }

/* ---------- accesibilidad ---------- */
/* Saltar al contenido: invisible hasta que llega el foco del teclado. */
.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 12px;
  background: var(--tinta); color: #fff; font-weight: 700; text-decoration: none;
}
.saltar:focus { top: 12px; }
/* Un anillo de foco propio y consistente, visible sobre crema, sobre la franja y en oscuro. */
:focus-visible { outline: 3px solid var(--menta-profunda); outline-offset: 3px; border-radius: 8px; }
.franja :focus-visible { outline-color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :focus-visible { outline-color: var(--menta-clara); } }

/* ==========================================================================
   EL MOVIMIENTO
   ==========================================================================
   La app se mueve como un juego: los botones son físicos, nada cambia de golpe y la criatura es
   la estrella. La web tenía el mismo dibujo pero quieta, y se sentía una ficha técnica.

   Tres reglas que no se negocian:

   1. NADA SE ESCONDE SIN JAVASCRIPT. Todo lo de acá cuelga de `html.movimiento`, una clase que
      pone el guion. Si el guion no carga, no corre o el navegador es viejo, la página se ve
      entera y quieta, como antes. Esconder con CSS y revelar con JS es la forma clásica de
      dejar una página en blanco.
   2. SI EL SISTEMA PIDE MENOS MOVIMIENTO, NO HAY MOVIMIENTO. El guion ni siquiera pone la clase,
      y acá abajo hay además una red de seguridad por si alguien la pone a mano.
   3. SÓLO SE ANIMAN `transform` Y `opacity`. Son las dos que el navegador resuelve sin rehacer
      la maqueta; animar alto, márgenes o `top` en una página de 14.000 px la haría tironear.   */

:root {
  /* El rebote de la app: pasa de largo y vuelve. Es lo que hace que un botón se sienta físico
     en vez de interpolado. */
  --rebote: cubic-bezier(.22, 1.28, .36, 1);
  --rebote-corto: cubic-bezier(.34, 1.56, .64, 1);
  --suave: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- 1. lo que entra al scrollear ---------- */
/* Sin `will-change`: son unos ciento cincuenta elementos y adelantar una capa de composición
   por cada uno cuesta más memoria de la que ahorra. Una transición de transform y opacity el
   navegador ya la resuelve en el compositor. */
html.movimiento [data-entra] {
  opacity: 0;
  transform: translateY(26px);
}
html.movimiento [data-entra].entro {
  opacity: 1;
  transform: none;
  transition:
    opacity .5s var(--suave) var(--retraso, 0ms),
    transform .66s var(--rebote) var(--retraso, 0ms);
}

/* Un «pop»: el ícono de la app, las fichas de color, los sellos. Nace chico y pasa de largo. */
html.movimiento [data-entra="pop"] { transform: scale(.72); }
html.movimiento [data-entra="pop"].entro {
  transform: none;
  transition: opacity .34s var(--suave) var(--retraso, 0ms), transform .52s var(--rebote-corto) var(--retraso, 0ms);
}

/* Las fichas de las tiras se reparten como cartas: entran de abajo, giradas, y se acomodan. */
html.movimiento [data-entra="carta"] { transform: translateY(34px) rotate(var(--giro, -4deg)) scale(.94); }
html.movimiento [data-entra="carta"].entro {
  transform: none;
  transition: opacity .38s var(--suave) var(--retraso, 0ms), transform .62s var(--rebote) var(--retraso, 0ms);
}

/* Las fotos de sección llegan de su lado y con una pizca de escala: da profundidad sin paralaje. */
html.movimiento [data-entra="izquierda"] { transform: translateX(-38px) scale(.97); }
html.movimiento [data-entra="derecha"]  { transform: translateX(38px) scale(.97); }
html.movimiento [data-entra="izquierda"].entro,
html.movimiento [data-entra="derecha"].entro { transform: none; }

/* El titular, renglón por renglón. Los <span> los arma el guion. */
html.movimiento .renglon { display: block; overflow: hidden; }
html.movimiento .renglon > i {
  display: block; font-style: inherit;
  transform: translateY(105%);
}
html.movimiento .renglon.entro > i {
  transform: none;
  transition: transform .72s var(--rebote) var(--retraso, 0ms);
}

/* ---------- 2. los botones, que son objetos físicos ---------- */
/* El botón gordo ya tenía labio y se hundía al apretarlo. Le falta la otra mitad del gesto: al
   soltarlo pasa de largo y vuelve, como en la app (0,92 a 1,05 a 1). */
.gordo { transition: transform .12s var(--suave), box-shadow .12s var(--suave), filter .18s var(--suave); }
.gordo:hover { transform: translateY(-2px); box-shadow: inset 0 3px 0 rgba(255,255,255,.38), 0 9px 0 var(--labio); filter: brightness(1.04); }
.gordo:active { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255,255,255,.38), 0 3px 0 var(--labio); }
html.movimiento .gordo.soltado { animation: soltar .34s var(--rebote-corto); }
@keyframes soltar {
  0%   { transform: translateY(3px) scale(.96); }
  45%  { transform: translateY(-3px) scale(1.045); }
  100% { transform: none; }
}

.sencillo { transition: transform .12s var(--suave), border-color .18s var(--suave), color .18s var(--suave); }
.sencillo:hover { transform: translateY(-2px); }
.sencillo:active { transform: translateY(1px); }

html.movimiento .barra nav a.pildora { transition: transform .14s var(--rebote-corto), filter .18s var(--suave); }
html.movimiento .barra nav a.pildora:hover { transform: scale(1.06); }
html.movimiento .barra nav a.pildora:active { transform: scale(.95); }

/* ---------- 3. la criatura, que es la estrella ---------- */
/* El teléfono de la portada respira. Seis segundos y nueve píxeles: se nota que está vivo y no
   marea a nadie que esté leyendo al lado. */

/* Las prendas del ropero se levantan y se enderezan al pasarles por encima: es la vidriera. */
.vestidos > li, .etapas > li, .tramos > li {
  transition: transform .2s var(--rebote-corto), border-color .2s var(--suave), box-shadow .2s var(--suave);
}
html.movimiento .vestidos > li:hover,
html.movimiento .etapas > li:hover,
html.movimiento .tramos > li:hover {
  transform: translateY(-6px) scale(1.03);
  border-color: var(--menta);
  box-shadow: 0 14px 26px -18px rgba(41, 44, 49, .65);
}
/* Y la criatura de adentro se inclina, como si mirara a quien la mira. */
html.movimiento .vestidos > li img { transition: transform .26s var(--rebote-corto); }
html.movimiento .vestidos > li:hover img { transform: rotate(-3deg) scale(1.06); }

/* Las canchas del parque se acercan. La sombra crece con ellas o se ve pegada. */
.deportes img { transition: transform .22s var(--rebote-corto), box-shadow .22s var(--suave); }
html.movimiento .deportes > li:hover img {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 22px 36px -22px rgba(41, 44, 49, .7);
}

/* Las fichas de color de las tarjetas se sacuden una vez cuando la sección entra. Es el «pop»
   de recompensa de la app, servido de a uno. */
html.movimiento .ficha { transition: transform .2s var(--rebote-corto); }
html.movimiento .ficha.saluda { animation: saludar .62s var(--rebote-corto) var(--retraso, 0ms); }
@keyframes saludar {
  0%   { transform: scale(.7) rotate(-12deg); }
  55%  { transform: scale(1.12) rotate(7deg); }
  100% { transform: none; }
}
html.movimiento .tarjeta:hover .ficha { transform: rotate(-6deg) scale(1.08); }

/* ---------- 4. las preguntas, que se abren en vez de aparecer ---------- */
/* <details> no transiciona su alto: el guion lo anima con la API de animaciones y marca
   `.abriendo` mientras dura. Acá sólo va lo que sí es CSS. */
.faq summary { transition: color .18s var(--suave); }
html.movimiento .faq details { transition: border-color .2s var(--suave); }
html.movimiento .faq details:hover { border-color: var(--menta); }
html.movimiento .faq details[open] { border-color: var(--menta); }
html.movimiento .faq details.abriendo { overflow: hidden; }

/* ---------- 5. la barra fija de abajo ---------- */
/* Ya se escondía cuando el botón de verdad estaba a la vista; antes desaparecía de golpe. */
#cta-fija { transition: transform .32s var(--rebote), opacity .22s var(--suave); }
#cta-fija.escondida { transform: translateY(120%); opacity: 0; pointer-events: none; }
/* Un brillo que cruza el botón cada tanto. Es el gesto de «mirá esto» de la app, y va tapado
   por el propio botón, así que no puede desbordar nada. */
html.movimiento #cta-fija .gordo { position: relative; overflow: hidden; }
html.movimiento #cta-fija .gordo::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%;
  width: 45%; transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  animation: brillar 5.5s ease-in-out 2s infinite;
}
@keyframes brillar {
  0%, 62%   { left: -60%; }
  86%, 100% { left: 130%; }
}

/* ---------- 6. la que camina ---------- */
/* Una franja donde la criatura cruza la página. Los dieciséis cuadros salen de una grabación del
   escritorio de un teléfono, recortada contra una foto de la misma pantalla sin la app: es su
   caminata de verdad, la que dibuja el Kotlin del overlay, no una imitación hecha acá.
   Cómo se sacó: KnowledgeBase/32-el-sitio.md. */
.paseo { position: relative; height: 132px; overflow: hidden; pointer-events: none; }
.paseo .piso {
  position: absolute; left: 0; right: 0; bottom: 16px; height: 3px;
  background: linear-gradient(90deg, transparent, var(--borde) 10%, var(--borde) 90%, transparent);
}
.paseo .caminante {
  /* 14 y no 18: el recorte le deja unos píxeles de aire abajo y con 18 caminaba flotando. */
  position: absolute; bottom: 14px; left: 0;
  width: 66px; height: 108px;
}
/* Recorta ésta y no `.caminante`, para que el salto de `.brinco` no quede cortado por arriba. */
.paseo .ventana { width: 100%; height: 100%; overflow: hidden; }
/* Los cuadros se recorren deslizando la tira dentro de esta ventanita. Con `background-position`
   en porcentaje el salto NO cae en cuadros enteros —el porcentaje se reparte sobre el sobrante,
   no sobre el ancho— y se ve un barrido en vez de una caminata. Con una tira de 16 cuadros que
   mide 16 veces la ventana, ir de 0 a -100 % en steps(16) da exactamente los cuadros 0 a 15. */
.paseo .caminante img { display: block; height: 100%; width: auto; max-width: none; }
html.movimiento .paseo .caminante img { animation: pisar .8s steps(16) infinite; }
@keyframes pisar { from { transform: translateX(0); } to { transform: translateX(-100%); } }
/* Cuánto tarda en cruzar lo pone el guion, porque depende del ancho de la ventana: si fuera fijo,
   en un teléfono iría corriendo y en un monitor iría patinando con los pies quietos. */
html.movimiento .paseo .caminante { animation: pasear var(--cruce, 40s) linear infinite; }
@keyframes pasear {
  0%   { transform: translateX(-80px) scaleX(1); }
  48%  { transform: translateX(var(--lejos, 100vw)) scaleX(1); }
  50%  { transform: translateX(var(--lejos, 100vw)) scaleX(-1); }
  98%  { transform: translateX(-80px) scaleX(-1); }
  100% { transform: translateX(-80px) scaleX(1); }
}

/* ---------- 7. los videos ---------- */
/* `.foto figure { margin: 0 }` le gana a `.video-marco` por especificidad (0,1,1 contra 0,1,0)
   y el video quedaba pegado a la izquierda mientras la foto de al lado iba centrada. */
.video-marco { position: relative; display: block; margin: 0 auto; width: min(280px, 72vw); }
.foto .video-marco, .dos-fotos .video-marco { margin-inline: auto; }
.video-marco video {
  width: 100%; height: auto; display: block;
  border-radius: 22px; border: 4px solid var(--tinta);
  box-shadow: 0 18px 34px -22px rgba(41, 44, 49, .65);
  background: var(--fondo-tarjeta);
}
/* Un sello que dice que esto es grabado de la app y no un montaje. */
/* Si el sistema pide menos movimiento, el guion pausa el video y le pone controles: quien no
   quiere cosas moviéndose solas igual puede verlo, apretando. */
.video-marco video[controls] { cursor: pointer; }
.video-marco .sello {
  /* A caballo del borde de arriba: adentro tapaba un ícono de la grabación. */
  position: absolute; top: -13px; right: -6px;
  background: var(--menta-profunda); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  padding: 5px 11px; border-radius: 999px;
  box-shadow: 0 3px 0 #1E5A4C;
}

/* ---------- la red de seguridad ---------- */
/* El guion no pone `movimiento` cuando el sistema pide menos movimiento, así que casi todo lo de
   arriba ni se aplica. Esto es por si la clase aparece igual (una extensión, o la preferencia
   cambiada con la página ya abierta): nada se esconde y nada se mueve solo. */
@media (prefers-reduced-motion: reduce) {
  html.movimiento [data-entra],
  html.movimiento .renglon > i {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  html.movimiento .paseo .caminante,
  html.movimiento .paseo .caminante img,
  html.movimiento .paseo .brinco.saltando,
  html.movimiento #cta-fija .gordo::after,
  html.movimiento .gordo.soltado,
  html.movimiento .ficha.saluda { animation: none !important; }
  .gordo, .sencillo, .vestidos > li, .etapas > li, .tramos > li, .deportes img, #cta-fija {
    transition: none !important;
  }
}

/* ==========================================================================
   QUE PAREZCA UN JUEGO Y NO UNA FICHA TÉCNICA
   ==========================================================================
   Lo de acá abajo es lo que separa «una página que explica un juego» de «una página que se siente
   como el juego»: la letra, el cielo, los bordes que no son rectos y el color por sección.

   Va después del bloque del movimiento a propósito: son las formas y los colores; el movimiento
   ya está resuelto arriba y sigue valiendo (nada se esconde sin JS, y si el sistema pide menos
   movimiento, nada se mueve).                                                                  */

/* ---------- 1. la letra ---------- */
/* La misma familia que el cuerpo, en 700. Queda como variable aparte porque es la lista de lo que
   va «de título» (abajo), y porque hasta el 20/10/2026 era otra familia (Baloo 2). */
:root {
  --titulares: "Signika Negative", "Trebuchet MS", system-ui, sans-serif;
}
h1, h2, h3,
.gordo, .sencillo, .pastilla, .marca span,
.etapas b, .vestidos b, .tramos b, .deportes b,
.faq summary, .ficha, .video-marco .sello, .cuenta {
  font-family: var(--titulares);
  letter-spacing: 0;
}
/* Los tamaños e interlineados vienen de cuando los títulos eran Baloo 2. Con Signika Negative 700
   el ancho es casi el mismo (los botones miden un 1 % menos), así que se dejaron. */
h1 { font-size: clamp(2rem, 6.6vw, 3.4rem); line-height: 1.08; }
h2 { font-size: clamp(1.45rem, 4.7vw, 2.3rem); line-height: 1.12; }
h1, h2, h3 { font-weight: 700; letter-spacing: -.005em; }

/* ---------- 2. el cielo de la portada ---------- */
/* Arriba, cielo; abajo, el crema de siempre. No es decoración sola: le pone un arriba y un abajo
   a la página, que es lo que hace que después la criatura caminando por la franja se lea como
   que camina por el piso y no como que flota. */
:root {
  --cielo-alto: #D6ECFF;
  --cielo-bajo: var(--fondo);
  --nube: #FFFFFF;
  --nube-borde: #E4F0FA;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cielo-alto: #10182B;
    --nube: #232C3E;
    --nube-borde: #2C3648;
  }
}
:root[data-theme="dark"] { --cielo-alto: #10182B; --nube: #232C3E; --nube-borde: #2C3648; }

.portada { position: relative; background: linear-gradient(180deg, var(--cielo-alto) 0%, var(--cielo-bajo) 68%); }
.portada > .envoltorio { position: relative; z-index: 1; }
/* Con el prefijo `.portada`: a secas, `.cielo` también agarraba a las fichas celestes
   (`.ficha.cielo`, la de iPhone y la de las visitas) y las volvía una caja absoluta invisible. */
.portada .cielo { position: absolute; left: 0; right: 0; top: 0; height: 68%; overflow: hidden; pointer-events: none; z-index: 0; }
/* En oscuro el cielo tiene estrellas. Son un degradado radial repetido, no imágenes: pesan cero
   y no hay nada que cargar. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .portada .cielo::before {
    content: ""; position: absolute; inset: 0;
    background-image:
      radial-gradient(1.4px 1.4px at 18% 22%, #fff 50%, transparent 51%),
      radial-gradient(1.2px 1.2px at 62% 14%, #fff 50%, transparent 51%),
      radial-gradient(1.6px 1.6px at 81% 33%, #fff 50%, transparent 51%),
      radial-gradient(1.2px 1.2px at 37% 41%, #fff 50%, transparent 51%),
      radial-gradient(1.4px 1.4px at 92% 12%, #fff 50%, transparent 51%),
      radial-gradient(1.1px 1.1px at 8% 48%, #fff 50%, transparent 51%);
    opacity: .75;
  }
}

/* Una nube de dibujito: tres bollos y una base redondeada. Hecha con un SVG en línea dentro del
   CSS, así que escala sin pixelarse y no es un pedido más al servidor. */
.nube {
  position: absolute; display: block;
  background: no-repeat center / 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 104'%3E%3Cg fill='%23FFFFFF'%3E%3Ccircle cx='72' cy='56' r='34'/%3E%3Ccircle cx='114' cy='44' r='42'/%3E%3Ccircle cx='158' cy='60' r='28'/%3E%3Crect x='58' y='62' width='114' height='34' rx='17'/%3E%3C/g%3E%3C/svg%3E");
  opacity: .92;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nube {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 104'%3E%3Cg fill='%23232C3E'%3E%3Ccircle cx='72' cy='56' r='34'/%3E%3Ccircle cx='114' cy='44' r='42'/%3E%3Ccircle cx='158' cy='60' r='28'/%3E%3Crect x='58' y='62' width='114' height='34' rx='17'/%3E%3C/g%3E%3C/svg%3E");
    opacity: .85;
  }
}
.nube.n1 { width: 148px; height: 70px; top: 8%;  left: -20%; }
.nube.n2 { width: 104px; height: 49px; top: 34%; left: -20%; opacity: .7; }
.nube.n3 { width: 190px; height: 90px; top: 58%; left: -20%; opacity: .55; }
.nube.n4 { width:  84px; height: 40px; top: 19%; left: -20%; opacity: .8; }
/* Cuatro velocidades distintas: si todas fueran a la misma se ve una guarda desplazándose, no un
   cielo. Las de arriba van más lento, como las que están más lejos. */
html.movimiento .nube.n1 { animation: derivar 68s linear infinite; }
html.movimiento .nube.n2 { animation: derivar 52s linear -14s infinite; }
html.movimiento .nube.n3 { animation: derivar 96s linear -40s infinite; }
html.movimiento .nube.n4 { animation: derivar 42s linear -26s infinite; }
@keyframes derivar { to { transform: translateX(calc(100vw + 40vw)); } }

/* ---------- 3. los bordes que no son rectos ---------- */
/* Una sección de color que termina en una línea recta se ve como una tabla. Terminando en una
   onda se ve dibujada. El SVG va relleno con el color de la sección VECINA, así que tapa la
   franja por arriba y por abajo y deja el borde ondulado. */
.franja { position: relative; padding-top: 74px; padding-bottom: 74px; }
.onda {
  position: absolute; left: 0; width: 100%; height: 46px;
  display: block; fill: var(--fondo);
  pointer-events: none;
}
.onda.arriba { top: -1px; }
.onda.abajo { bottom: -1px; transform: scaleY(-1); }
@media (min-width: 900px) { .onda { height: 64px; } }

/* ---------- 4. color por sección ---------- */
/* Todo el crema seguido hace que la página se lea como un documento largo. Cada sección lleva
   ahora un tinte del color que le corresponde en la paleta del juego, tan suave que el texto
   sigue midiendo lo mismo contra el fondo (medido: el tinte más fuerte cambia el contraste del
   cuerpo en menos de una décima). */
#crece    { background: color-mix(in srgb, var(--oro) 7%, var(--fondo)); }
#parecido { background: color-mix(in srgb, var(--uva) 6%, var(--fondo)); }
#monedas  { background: color-mix(in srgb, var(--oro) 9%, var(--fondo)); }
#preguntas{ background: color-mix(in srgb, var(--menta-juego) 6%, var(--fondo)); }

/* ---------- los mundos ---------- */
/* Cada sección grande deja de ser crema con un tinte y pasa a tener un lugar. No son fondos
   fotográficos ni degradados tecnológicos: son los colores de la paleta del juego puestos en
   capas, para que haya un arriba y un abajo.

   Con `color-mix` contra el crema no alcanzaba: mezclar un 14 % de cielo en crema da un gris
   verdoso y la escena se lava entera. Van colores propios, medidos contra el texto. */
:root {
  --parque-cielo: #DCEEFA;
  --parque-medio: #E8F5EA;
  --parque-pasto: #CDE9D3;
  --parque-loma: #3FBF9A;
  --casa-luz: #FBEFCF;
  --casa-piso: #F2E3C2;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --parque-cielo: #141E2E;
    --parque-medio: #152420;
    --parque-pasto: #17301F;
    --parque-loma: #2E7D6A;
    --casa-luz: #241F17;
    --casa-piso: #211C15;
  }
}
:root[data-theme="dark"] {
  --parque-cielo: #141E2E; --parque-medio: #152420; --parque-pasto: #17301F;
  --parque-loma: #2E7D6A; --casa-luz: #241F17; --casa-piso: #211C15;
}

/* EL PARQUE: cielo arriba, pasto abajo, y una línea de lomas entre los dos. El SVG va como data
   URI —400 bytes y ni un pedido más— y se estira a lo ancho. */
#parque {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg,
    var(--parque-cielo) 0%, var(--parque-cielo) 26%,
    var(--parque-medio) 46%, var(--parque-pasto) 100%);
}
#parque::before {
  content: ""; position: absolute; left: 0; right: 0; z-index: -1;
  top: 22%; height: 110px;
  background: no-repeat center / 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 74 C140 22 250 92 400 58 C540 26 640 86 800 52 C950 22 1060 90 1220 56 C1320 34 1380 54 1440 46 L1440 110 L0 110 Z' fill='%233FBF9A' fill-opacity='.38'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* LA CASA: luz de interior. Un charco cálido arriba —la lámpara— y el piso abajo, como en los
   cuartos de la app. */
#viva {
  position: relative; isolation: isolate;
  background:
    radial-gradient(72% 48% at 50% 4%, var(--casa-luz), transparent 72%),
    linear-gradient(180deg, var(--fondo) 0%, var(--fondo) 64%, var(--casa-piso) 100%);
}

/* ---------- 5. las tarjetas, con relieve de juego ---------- */
/* El mismo labio que los botones: una franja más oscura abajo. Es lo que hace que una tarjeta
   parezca una ficha que se puede levantar y no un rectángulo impreso. */
.etapas > li, .vestidos > li, .tramos > li, .faq details {
  box-shadow: 0 3px 0 var(--borde);
}
.tarjeta { box-shadow: 0 4px 0 var(--borde), var(--sombra); }
.franja .tarjeta { box-shadow: 0 4px 0 rgba(0, 0, 0, .22); }

/* ---------- 6. las chispas de los botones ---------- */
/* Al apretar un botón gordo saltan unas chispas. Las pone el guion y se borran solas: son cuatro
   <i> con una animación de medio segundo. Nada de librerías de partículas para esto. */
.chispa {
  position: fixed; z-index: 60; pointer-events: none;
  width: 10px; height: 10px; border-radius: 3px;
  background: var(--color, var(--oro));
  animation: chispear .62s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes chispear {
  0%   { transform: translate(-50%, -50%) scale(.4) rotate(0deg); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2) rotate(var(--giro)); opacity: 0; }
}

/* ---------- 7. la criatura de la franja, que responde ---------- */
/* Se le puede tocar. Es lo único de la franja que recibe el dedo; el resto sigue transparente al
   toque para no robarle el scroll a nadie. */
.paseo .caminante { pointer-events: auto; cursor: pointer; }
/* El salto va en una capa PROPIA, `.brinco`, entre la que se desplaza y la ventanita de los
   cuadros. Tres animaciones sobre el mismo elemento no se pueden apilar —la segunda pisa el
   transform de la primera— y animar `margin-bottom` rehace la maqueta en cada cuadro, que es
   justo lo que este archivo dice arriba que no se hace. */
.paseo .brinco { width: 100%; height: 100%; }
html.movimiento .paseo .brinco.saltando { animation: saltito .52s var(--rebote-corto); }
@keyframes saltito {
  0%   { transform: translateY(0) scaleY(1); }
  18%  { transform: translateY(0) scaleY(.86); }
  50%  { transform: translateY(-30px) scaleY(1.08); }
  100% { transform: translateY(0) scaleY(1); }
}
.corazon {
  position: absolute; pointer-events: none;
  font-size: 20px; line-height: 1;
  animation: subir .9s ease-out forwards;
}
@keyframes subir {
  0%   { transform: translate(-50%, 0) scale(.5); opacity: 0; }
  20%  { transform: translate(-50%, -10px) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%, -64px) scale(.9); opacity: 0; }
}

/* ---------- 8. los números que cuentan ---------- */
.numeros {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr);
}
.numeros > li {
  text-align: center;
  background: var(--fondo-tarjeta);
  border: 2px solid var(--borde); border-radius: 18px;
  padding: 16px 8px 14px;
  box-shadow: 0 4px 0 var(--borde);
}
.numeros .cuenta {
  display: block;
  font-family: var(--titulares); font-weight: 700;
  font-size: clamp(1.9rem, 7vw, 2.9rem); line-height: 1;
  color: var(--menta-profunda);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .numeros .cuenta { color: var(--menta-clara); } }
:root[data-theme="dark"] .numeros .cuenta { color: var(--menta-clara); }
.numeros small { display: block; margin-top: 6px; font-size: .84rem; color: var(--texto-suave); }

/* ---------- la red de seguridad, otra vez ---------- */
@media (prefers-reduced-motion: reduce) {
  html.movimiento .nube { animation: none !important; }
  .chispa, .corazon { display: none !important; }
}

/* ---------- 9. las siete etapas, que crecen con el scroll ---------- */
/* La sección se llama «Siete etapas» y hasta ahora eran siete estampillas quietas. Ahora, a
   medida que la sección pasa por la pantalla, se enciende una tras otra: el scroll ES el paso del
   tiempo. Es la única animación de la página que cuenta algo en vez de decorar. */
.etapas > li {
  transition:
    transform .34s var(--rebote-corto),
    border-color .3s var(--suave),
    box-shadow .3s var(--suave),
    background-color .3s var(--suave);
}
html.movimiento .etapas > li.activa {
  transform: translateY(-9px) scale(1.06);
  border-color: var(--menta-juego);
  background-color: color-mix(in srgb, var(--menta-juego) 12%, var(--fondo-tarjeta));
  box-shadow: 0 6px 0 var(--menta-labio), 0 18px 28px -18px rgba(41, 44, 49, .5);
}
/* Medido sobre el fondo REAL de la tarjeta encendida, que es más claro que el de las otras:
   el menta profundo da 4,47:1 ahí y AA pide 4,5. Éste da 5,17. */
html.movimiento .etapas > li.activa b { color: #2A7261; }
/* OJO con el selector: `:root` ES `html`, así que `:root ... html.movimiento` pide un <html>
   adentro de otro <html> y no coincide NUNCA. La primera versión de esta regla estaba así y el
   rótulo de la etapa encendida quedó en verde oscuro sobre verde oscuro, 2,45:1, en modo oscuro. */
@media (prefers-color-scheme: dark) {
  html.movimiento:not([data-theme="light"]) .etapas > li.activa b { color: var(--menta-clara); }
}
html.movimiento[data-theme="dark"] .etapas > li.activa b { color: var(--menta-clara); }

/* La barra que se llena: es la vida de la mascota, de la cría a la anciana. */
.crecimiento {
  position: relative; height: 10px; margin: 16px 0 0;
  border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--borde) 80%, var(--fondo));
}
.crecimiento > i {
  display: block; height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--menta-juego), var(--oro));
  transform: scaleX(0); transform-origin: left;
  transition: transform .18s linear;
}
/* Sin movimiento la barra no dice nada a medias: se muestra entera, que es la verdad —la mascota
   recorre las siete— y no una barra vacía que parece rota. */
@media (prefers-reduced-motion: reduce) { .crecimiento > i { transform: none !important; } }

/* ==========================================================================
   LA ESCENA DE LA PORTADA
   ==========================================================================
   El living de verdad de la app —la misma imagen que va adentro del APK— con la criatura dibujada
   por el mismo programa que la dibuja en un teléfono. No hay una segunda criatura hecha en CSS: si
   la de la web no fuera la del producto, la portada estaría prometiendo otra cosa.

   El plano sale de `assets/casa/ambientes.json`, el mismo archivo que lee la app:
     piso = 0,94 del alto del cuarto   ·   se camina de 0,08 a 0,92 del ancho
     el sillón va DELANTE de la mascota (`capasDelante`), así que camina por detrás.

   SIN JAVASCRIPT se ve el cuarto, la criatura parada adentro y el pie de foto. Los controles los
   agrega el guion: un botón que no hace nada es peor que ningún botón.

   TRES CAPAS Y UNA TRANSFORMACIÓN CADA UNA. `.criatura` se desplaza y mira para un lado,
   `.brinco` salta, y la ficha de adentro pasa los cuadros. Apiladas en un solo elemento, la
   segunda animación le pisa el `transform` a la primera y la criatura se teletransporta.       */

.escena { position: relative; margin: 0; width: 100%; }

/* ---------- la casita ---------- */
/* El mismo marco que dibuja `MarcoDeCasita` en la app: borde grueso, esquinas redondeadas. */
.casita {
  position: relative;
  width: 100%; max-width: 520px; margin-inline: auto;
  aspect-ratio: 720 / 483;
  border-radius: 20px;
  border: 5px solid var(--tinta);
  background: var(--fondo-tarjeta);
  overflow: hidden;
  box-shadow: 0 6px 0 rgba(41, 44, 49, .18), 0 26px 40px -28px rgba(41, 44, 49, .7);
}
.casita .cuarto { display: block; width: 100%; height: 100%; object-fit: cover; }
/* ---------- la criatura ---------- */
/* La ficha mide 111x182, la criatura ocupa 161 de esos 182 y los pies caen en y=173. Para
   apoyarla en el piso del plano hay que descontarle a la ficha el aire que le queda abajo. */
.criatura {
  /* 52 % de ficha = 46 % de criatura, que es la escala medida en la app («un ambiente de
     313x209 dp con la mascota en 96 dp»). Y los pies: el piso del plano está a 6 % del borde de
     abajo, y la ficha le deja debajo de los pies un 4,95 % de su propio alto. */
  --alto-bicho: 52%; --alto-bicho-n: .52;
  position: absolute; left: 0; bottom: calc(6% - 4.95% * var(--alto-bicho-n));
  /* El ancho se calcula, no se hereda. Un porcentaje de ancho se mide contra el ANCHO del
     contenedor y uno de alto contra el ALTO: en un cuarto que no es cuadrado, poner el mismo
     número en los dos deja la ventana del sprite más ancha que un cuadro y se ven cuatro
     criaturas en fila. Y `aspect-ratio` tampoco alcanza, porque un <button> se encoge a su
     contenido y eso le gana.
       ancho = alto × (111/182 de la ficha) × (483/720 del cuarto) = alto × 0,4091            */
  height: var(--alto-bicho);
  width: calc(var(--alto-bicho) * 0.4091);
  z-index: 1;
  padding: 0; border: 0; background: none; -webkit-appearance: none; appearance: none;
  transform: translate(var(--px, 40px), var(--py, 0px)) scaleX(var(--lado, 1));
}
.criatura .brinco, .criatura .ventana { display: block; width: 100%; height: 100%; }
/* `position: relative` NO es decorativo: la tira de caminata va `position: absolute`, y un
   absoluto sólo lo recorta un ancestro que además sea su bloque contenedor. Sin esto, su bloque
   contenedor era `.criatura` —que sí está posicionada— y el `overflow: hidden` de acá no le hacía
   nada: se veían tres criaturas en fila saliendo de la casa. */
.criatura .ventana { overflow: hidden; position: relative; }
/* Y la tira se esconde cuando no camina, o queda tapando a la pose de encima. */
.criatura:not(.anda) .pasos { visibility: hidden; }
.criatura img {
  display: block; height: 100%; width: auto; max-width: none;
  /* La tira de poses tiene cuatro cuadros: quieta, curiosa, contenta y dormida. */
  transform: translateX(calc(var(--pose, 0) * -25%));
}
.criatura .pasos { position: absolute; inset: 0; }

/* Encendida por el guion es un botón de verdad: dedo, mouse y teclado. */
button.criatura { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.criatura:focus-visible { outline: 3px solid var(--menta-profunda); outline-offset: 3px; border-radius: 12px; }

/* Respirar: milímetro y medio, cinco segundos. Es lo que hace que un dibujo quieto parezca que
   está ahí. Va en la ficha de adentro, que ya lleva el corrimiento del cuadro. */
html.movimiento .criatura .poses { animation: alentar 5.2s ease-in-out infinite; }
@keyframes alentar {
  0%, 100% { transform: translateX(calc(var(--pose, 0) * -25%)) translateY(0); }
  50%      { transform: translateX(calc(var(--pose, 0) * -25%)) translateY(-1.4%); }
}
/* Caminando manda el paso y el aliento se apaga. */
html.movimiento .criatura.anda .pasos { animation: pisar .8s steps(16) infinite; }
.criatura.anda .poses { visibility: hidden; }

/* El salto de la caricia. Squash antes de subir: es lo que lo hace físico y no un desplazamiento. */
html.movimiento .brinco.salta { animation: brincar .52s var(--rebote-corto); }
@keyframes brincar {
  0%   { transform: translateY(0) scaleY(1); }
  18%  { transform: translateY(0) scaleY(.88); }
  50%  { transform: translateY(-17%) scaleY(1.06); }
  100% { transform: translateY(0) scaleY(1); }
}

/* La marca de «se puede tocar»: el mismo punto que late en los trece muebles de la casa —cada
   3,2 s, creciendo un 42 %—. Se apaga apenas alguien la toca una vez, y no vuelve. */
.toqueme {
  position: absolute; z-index: 4;
  left: 50%; top: -9%; margin-left: -7px;
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff; border: 2px solid var(--tinta);
  pointer-events: none;
  box-shadow: 0 1px 0 rgba(41, 44, 49, .35);
}
html.movimiento .toqueme { animation: latir 3.2s ease-in-out infinite; }
@keyframes latir {
  0%, 60%, 100% { transform: scale(1); }
  70%           { transform: scale(1.42); }
  80%           { transform: scale(1); }
}
.escena.tocada .toqueme { display: none; }

/* ---------- los corazones ---------- */
/* Tres, en abanico y a distinto ritmo, como hace la app al acariciarla (`Casa.kt`). Y salen en el
   acto: la app tampoco espera la respuesta del servidor para dibujarlos. */
.escena .corazon {
  position: absolute; z-index: 5; pointer-events: none;
  font-size: 20px; line-height: 1; color: #E8503A;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .85);
  animation: flotar .95s ease-out forwards;
}
@keyframes flotar {
  0%   { transform: translate(-50%, 0) scale(.5); opacity: 0; }
  18%  { transform: translate(-50%, -12px) scale(1.15); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--deriva, 0px)), -74px) scale(.85); opacity: 0; }
}

/* ---------- el pie y los controles ---------- */
.escena-pie {
  margin: 14px auto 0; max-width: 520px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px;
  text-align: center;
}
.escena-dice { font-size: .95rem; color: var(--texto-suave); min-height: 1.4em; }
/* El botón de la escena habla el idioma de los gordos pero en chico: es el control de una demo,
   no la llamada principal. La llamada principal sigue siendo «Probarla». */
.escena-pie .gordo.chico {
  padding: 9px 18px; border-radius: 13px; font-size: .95rem; min-height: 44px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .38), 0 4px 0 var(--labio);
}
.escena-pie .gordo.chico:hover { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .38), 0 6px 0 var(--labio); }
.escena-pie .gordo.chico:active { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .38), 0 2px 0 var(--labio); }

/* ---------- cuando sale ---------- */
/* Afuera de la casita, sobre el cielo de la portada: la casita deja de recortar y la criatura
   pasa a estar apoyada en el piso de la escena, no en el del cuarto. */
/* SALIR ES SALIR. La primera versión la dejaba asomada en el borde del marco, un poco más abajo,
   y el dueño lo dijo en una línea: «queda medio parecido a cuando estaba adentro». Ahora cruza el
   marco de verdad y termina parada ENCIMA DEL TEXTO de la portada, que es exactamente lo que
   hace el overlay en un teléfono: quedarse sobre lo que estés usando.

   Para eso se muda de contenedor —de la casita a una capa que cubre la portada entera—, porque
   adentro de la casita no hay a dónde ir. */
.afuera-capa {
  position: absolute; inset: 0; z-index: 4;
  pointer-events: none;                 /* la capa no roba clics; ella sí los recibe */
  overflow: hidden;
}
.afuera-capa .criatura {
  top: 0; bottom: auto;
  pointer-events: auto;
  /* Parada sobre el texto necesita despegarse de él: una sombra de contacto y un contorno claro,
     como cualquier cosa que está por encima de otra. */
  filter: drop-shadow(0 6px 5px rgba(41, 44, 49, .32));
}
.escena.afuera .casita .cuarto { filter: saturate(.86) brightness(.97); }
.escena .casita .cuarto { transition: filter .5s var(--suave); }

/* ---------- la red de seguridad ---------- */
@media (prefers-reduced-motion: reduce) {
  html.movimiento .criatura .poses,
  html.movimiento .criatura.anda .pasos,
  html.movimiento .brinco.salta,
  html.movimiento .toqueme { animation: none !important; }
  .escena .corazon { animation: none; opacity: 1; transform: translate(-50%, -38px); }
  .criatura { transition: none !important; }
}

/* Fuera de pantalla o con la pestaña en segundo plano, la escena se queda quieta: respirar y
   latir para nadie es batería regalada. */
.escena.dormida .poses,
.escena.dormida .pasos,
.escena.dormida .toqueme { animation-play-state: paused !important; }

/* ---------- el ADN, en dos capas ---------- */
/* La foto y los cuatro momentos, juntos: la transformación es lo que hay que ver. */
.herencia-corta { display: grid; gap: 22px; margin-top: 26px; }
@media (min-width: 900px) { .herencia-corta { grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 34px; } }
.herencia-corta .la-foto { margin: 0; }
.herencia-corta .la-foto img {
  display: block; width: min(200px, 54vw); height: auto; margin-inline: auto;
  border-radius: 16px; border: 4px solid var(--tinta);
  box-shadow: 0 14px 26px -18px rgba(41, 44, 49, .6);
}
.herencia-corta .la-foto figcaption {
  margin-top: 8px; text-align: center; font-size: .875rem; color: var(--texto-suave);
}
.herencia-corta .tramos { margin-top: 0; }
.tramos span { display: block; font-size: .78rem; color: var(--texto-suave); }

/* El aviso corto: la frase de la foto tiene que verse SIN desplegar nada. */
.aviso.corto { margin-top: 26px; font-size: .95rem; }

/* La segunda capa. Lo técnico no se borró: se corrió acá adentro. */
.mas {
  margin-top: 18px;
  border: 2px solid var(--borde); border-radius: 16px;
  background: var(--fondo-tarjeta);
  padding: 2px 18px;
  box-shadow: 0 3px 0 var(--borde);
}
.mas > summary {
  cursor: pointer; font-weight: 700; padding: 14px 0;
  font-family: var(--titulares);
}
.mas[open] > summary { border-bottom: 1px solid var(--borde); margin-bottom: 14px; }
.mas .par { gap: 22px; margin-bottom: 18px; }
html.movimiento .mas { transition: border-color .2s var(--suave); }
html.movimiento .mas:hover, html.movimiento .mas[open] { border-color: var(--menta); }

/* ---------- el probador del ropero ---------- */
/* La tira de seis conjuntos se vuelve un probador: una criatura grande y seis perchas. El HTML
   sigue teniendo los seis con su nombre, así que sin el guion no se pierde nada. */
.probador { margin-top: 26px; display: grid; gap: 16px; justify-items: center; }
@media (min-width: 760px) { .probador { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); align-items: center; gap: 28px; } }
.tarima {
  position: relative;
  width: min(230px, 58vw);
  background: var(--fondo-tarjeta);
  border: 3px solid var(--borde); border-radius: 22px;
  box-shadow: 0 5px 0 var(--borde), var(--sombra);
  padding: 10px;
}
.tarima .puesto { display: block; width: 100%; height: auto; }
html.movimiento .tarima .puesto.cambia { animation: vestirse .42s var(--rebote-corto); }
@keyframes vestirse {
  0%   { transform: translateY(6px) scale(.94); opacity: .35; }
  60%  { transform: translateY(-3px) scale(1.03); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

.perchas {
  display: flex; gap: 10px; width: 100%;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--canto); scrollbar-width: none;
  padding: 4px 2px 10px;
}
.perchas::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { .perchas { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; } }
.percha {
  flex: 0 0 auto; width: 92px; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--fondo-tarjeta);
  border: 2px solid var(--borde); border-radius: 15px;
  box-shadow: 0 3px 0 var(--borde);
  padding: 6px 4px 8px; cursor: pointer;
  font: inherit; color: inherit;
  min-height: 44px;
}
@media (min-width: 760px) { .percha { width: auto; } }
.percha img { width: 100%; height: auto; display: block; }
.percha span { font-family: var(--titulares); font-weight: 700; font-size: .8rem; }
html.movimiento .percha { transition: transform .18s var(--rebote-corto), border-color .2s var(--suave), box-shadow .2s var(--suave); }
html.movimiento .percha:hover { transform: translateY(-4px); border-color: var(--menta); }
.percha:active { transform: translateY(1px); }
/* El elegido NO se marca sólo por color: lleva el borde grueso menta y el labio del mismo tono,
   y además `aria-pressed`. */
.percha[aria-pressed="true"] {
  border-color: var(--menta-juego); border-width: 3px;
  background: color-mix(in srgb, var(--menta-juego) 12%, var(--fondo-tarjeta));
  box-shadow: 0 4px 0 var(--menta-labio);
}
.percha[aria-pressed="true"] span { color: #2A7261; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .percha[aria-pressed="true"] span { color: var(--menta-clara); }
}
html[data-theme="dark"] .percha[aria-pressed="true"] span { color: var(--menta-clara); }
@media (prefers-reduced-motion: reduce) {
  html.movimiento .tarima .puesto.cambia { animation: none !important; }
}

/* La portada y la tira de números se tocan: dos rellenos de sección seguidos dejaban 200 px de
   crema vacía justo después de lo más importante de la página. */
@media (min-width: 900px) { .portada { padding-bottom: 12px; } }
.numeritos { padding-top: 20px; }
@media (min-width: 900px) { .numeritos { padding-top: 28px; } }
/* En escritorio el pie de la escena va en dos renglones: el botón centrado debajo del texto, no
   al costado, donde quedaba pegado al borde de la casita. */
@media (min-width: 900px) { .escena-pie { flex-direction: column; gap: 10px; } }

/* En media columna el sello no entra arriba: pasa a ser una línea debajo del video. */
@media (max-width: 560px) {
  .dos-fotos .video-marco .sello {
    position: static; display: inline-block; margin-top: 8px;
    font-size: .66rem; padding: 3px 8px; box-shadow: 0 2px 0 #1E5A4C;
  }
  .dos-fotos figcaption { font-size: .875rem; }
}

/* ---------- los dos caracteres ---------- */
/* Demostrar en vez de enumerar: dos mascotas cualesquiera, la misma situación, y lo que las
   separa es lo que HACEN. El color no es el carácter —sale del nacimiento y del ADN— y por eso
   la diferencia se cuenta con la reacción y con un número medido, no con el dibujo. */
.caracteres { margin-top: 26px; }
.situacion { text-align: center; margin-bottom: 18px; }
.caracteres .dos { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.caracter {
  text-align: center;
  background: rgba(0, 0, 0, .16);
  border: 2px solid rgba(255, 255, 255, .22);
  border-radius: 18px;
  padding: 14px 10px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.caracter .retrato {
  display: block; width: min(104px, 30vw); aspect-ratio: 1; 
  background-image: url("/img/dos-caracteres.webp?v=b95f9abe");
  background-size: 200% 100%; background-repeat: no-repeat;
}
.caracter[data-caracter="0"] .retrato { background-position: 0 0; }
.caracter[data-caracter="1"] .retrato { background-position: 100% 0; }
.caracter h3 { margin: 0; font-size: 1.02rem; }
.franja .caracter h3 { color: #fff; }
.caracter .reaccion p { margin: 0 0 4px; }
.franja .caracter .reaccion p { color: #fff; }
.caracter .dato { display: flex; flex-direction: column; align-items: center; margin-top: 6px; }
.caracter .dato .cuenta {
  font-family: var(--titulares); font-weight: 700; font-size: 1.8rem; line-height: 1;
  color: var(--menta-clara);
}
.caracter .dato small { font-size: .78rem; opacity: .92; }
html.movimiento .caracter .reaccion { animation: asomar .42s var(--rebote-corto); }
@keyframes asomar {
  0%   { transform: translateY(8px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { html.movimiento .caracter .reaccion { animation: none !important; } }

/* ---------- el selector de deportes ---------- */
.cancha { margin-top: 26px; display: grid; gap: 14px; justify-items: center; }
.canchas { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.cancha-chip {
  font: inherit; font-family: var(--titulares); font-weight: 700;
  padding: 10px 18px; min-height: 44px; border-radius: 999px; cursor: pointer;
  background: var(--fondo-tarjeta); color: var(--texto);
  border: 2px solid var(--borde); box-shadow: 0 3px 0 var(--borde);
}
html.movimiento .cancha-chip { transition: transform .16s var(--rebote-corto), border-color .2s var(--suave), box-shadow .2s var(--suave); }
html.movimiento .cancha-chip:hover { transform: translateY(-2px); border-color: var(--menta); }
.cancha-chip:active { transform: translateY(1px); }
.cancha-chip[aria-pressed="true"] {
  background: var(--menta-profunda); color: #fff;
  border-color: var(--menta-profunda); box-shadow: 0 3px 0 #1E5A4C;
}
.cancha-foto {
  display: block; width: 100%; max-width: 460px; height: auto;
  border-radius: 16px; border: 3px solid var(--tinta);
  box-shadow: 0 14px 28px -20px rgba(41, 44, 49, .6);
}
html.movimiento .cancha-foto.cambia { animation: vestirse .4s var(--rebote-corto); }
.cancha-regla { max-width: 52ch; text-align: center; margin: 0; font-size: .95rem; color: var(--texto-suave); }
@media (prefers-reduced-motion: reduce) { html.movimiento .cancha-foto.cambia { animation: none !important; } }

/* El desplegable dentro de una franja de color: la tarjeta es clara y el texto lo hereda BLANCO
   de la franja, así que quedaba blanco sobre blanco —1:1, invisible—. El contenido de la tarjeta
   vuelve al color del texto normal. */
.franja .mas { color: var(--texto); }
.franja .mas p, .franja .mas li, .franja .mas summary { color: var(--texto); }
.franja .mas .al-pie { color: var(--texto-suave); }
.franja .mas a { color: var(--menta-profunda); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .franja .mas a { color: #5FB89F; } }
html[data-theme="dark"] .franja .mas a { color: #5FB89F; }

/* «Crece» es una palabra corta y quedaba en 40 px de ancho: un enlace de menú tiene que poder
   tocarse igual de fácil que los largos. */
.barra nav a.opcional { min-width: 44px; justify-content: center; }

/* La pregunta de los dos caracteres corría 112 caracteres en escritorio. */
.situacion { max-width: 52ch; margin-inline: auto; }

/* ---------- la metamorfosis ---------- */
/* Una criatura central que cambia con el scroll, y detrás las etapas por las que ya pasó. Es la
   misma imagen que cada ficha de la tira —misma URL, misma descarga— puesta en grande.
   La diferencia de tamaño entre una cría y una anciana NO se toca: viene del render, con un
   recuadro común, y es el contenido de la sección. */
.metamorfosis {
  position: relative;
  height: 220px; margin: 22px auto 6px;
  width: min(420px, 90%);
  display: none;                      /* la enciende el guion */
}
html.movimiento .metamorfosis { display: block; }
.metamorfosis img {
  position: absolute; left: 50%; bottom: 0;
  height: 100%; width: auto;
  transform: translateX(-50%);
}
/* Las anteriores: desvaídas, corridas a la izquierda y más chicas cuanto más viejas. Son la
   estela de por dónde pasó. */
.metamorfosis .estela {
  opacity: calc(.26 - var(--atras, 0) * .07);
  filter: grayscale(.35);
  transform: translateX(calc(-50% - var(--atras, 0) * 44px)) scale(calc(1 - var(--atras, 0) * .06));
}
.metamorfosis .ahora { z-index: 2; }
html.movimiento .metamorfosis .ahora.cambia { animation: crecer .5s var(--rebote-corto); }
@keyframes crecer {
  0%   { transform: translateX(-50%) scale(.9); opacity: .5; }
  60%  { transform: translateX(-50%) scale(1.04); opacity: 1; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}
.metamorfosis .rotulo {
  position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%);
  z-index: 3; white-space: nowrap;
  font-family: var(--titulares); font-weight: 700; font-size: 1.05rem;
  background: var(--fondo-tarjeta); color: var(--texto);
  border: 2px solid var(--borde); border-radius: 999px;
  padding: 4px 14px; box-shadow: 0 3px 0 var(--borde);
}
.metamorfosis .rotulo small { font-weight: 400; color: var(--texto-suave); margin-left: 6px; }

/* EL PASO DEL TIEMPO EN EL FONDO. Dos capas: la de siempre y una de atardecer, y lo que se mueve
   es la OPACIDAD de la de arriba, que el navegador resuelve en el compositor. Pintar un degradado
   nuevo en cada cuadro sobre una sección de 700 px sería repintar media pantalla al scrollear. */
#crece { position: relative; isolation: isolate; }
#crece::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--uva) 10%, var(--fondo)), color-mix(in srgb, var(--oro) 12%, var(--fondo)));
  opacity: var(--tarde, 0);
  transition: opacity .25s linear;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  html.movimiento .metamorfosis .ahora.cambia { animation: none !important; }
  #crece::before { opacity: .5 !important; transition: none !important; }
}

/* ---------- las visitas ---------- */
/* La grabación es un recorte apaisado del escritorio (720×312): va a lo ancho de la columna, no
   al ancho de teléfono de los otros videos, o las cinco criaturas quedan del tamaño de un ícono. */
.video-marco.ancho { width: min(720px, 100%); margin: 6px auto 0; }
.video-marco.ancho figcaption {
  margin-top: 10px; text-align: center;
  font-size: .875rem; color: var(--texto-suave);
}
.rejilla.visitas { margin-top: 30px; }
.acciones.invitar { align-items: center; }
.acciones.invitar .al-pie { margin: 0; }