/* ── El cuento a pantalla completa ───────────────────────────────────────────
   Marco, 8-sep, con cuatro referencias en la mano (everydaygift.polimata.mx,
   sadumedia.com, why.zero.university, khanhnguyen.design): *"son moverse en
   pantallas completas y ver la historia... la imagen tiene que ocupar toda la
   pantalla, poner textos dinamicamente"*.

   De esas cuatro salen tres reglas, y esta hoja no hace nada más:
     1. UNA escena = UNA lámina a pantalla completa, con UNA frase encima.
     2. El texto cambia de sitio en cada escena. Nunca dos seguidas en el
        mismo rincón: eso es lo que hace que se sienta película y no plantilla.
     3. El movimiento lo manda el scroll, no un reloj. Todo cuelga de `--p`
        —0 al entrar, .5 centrada, 1 al salir— que escribe `cuento.js`.

   11-sep, la versión que se siente suave. Marco: *"las letras quedan saltando
   tanto en mobile como en computadora... no se siente que estuviéramos
   bajando de forma smooth"*. Dos causas, las dos aquí:
     · La frase iba anclada a la ventana con JavaScript (`--desplaza`), que
       llega siempre un cuadro tarde. Ahora vive en un `.cuadro` con
       `position: sticky`: lo fija el navegador en el mismo cuadro que el
       scroll. No hay nada que perseguir, así que nada brinca.
     · Cada frase entraba línea por línea, con retrasos, cada 60 % de pantalla.
       Ahora cada escena mide 1.25 pantallas: la frase sube con el scroll,
       se queda quieta un cuarto de pantalla mientras se lee y la lámina
       siguiente se funde detrás, y se va. Se funde entera, sin escalera.

   Cómo se reparte el recorrido de una escena (en `--p`; su cuadro está
   pegado a la ventana entre .5 y .6):
       frase     enciende .20 → .30   se lee quieta .30 → .60   apaga .60 → .70
       lámina    entra .12 → .26      (encima de la anterior, en el telón)
   Así la frase que se va ya se apagó cuando la lámina nueva pasa de un tercio,
   y la que llega enciende con la lámina nueva ya entera. Dos vecinas van
   siempre a Δp = .5 (cuento.js lo garantiza midiendo contra la propia sección).

   El arte viene en dos tallas (`-ancha` 16:9 y `-alta` 9:19.5) porque `cover`
   recorta: de un cuadrado, una pantalla ancha se come el alto y un teléfono se
   come el ancho. Cada pantalla recibe la suya y el dibujo nunca se pierde. */

.cuento {
  --papel: #fdfcf7;
  --papel-hondo: #f4eee2;
  --tinta: #33231a;
  --tinta-2: #6f5949;
  --tinta-3: #7a6553;
  --coral: #e2744e;
  --coral-hondo: #c85c37;
  /* El sitio general tiene modo oscuro; el cuento no puede tenerlo, porque el
     papel de las láminas es crema y no cambia. Sin fijar esto, en un teléfono
     en oscuro la cabecera tomaba de `site.css` la tinta clara y el nombre
     «Mesada» salía crema sobre papel crema: invisible. */
  --tarjeta: #fffdf8;
  --linea: #e6dcc9;
  --fondo: var(--papel);
  --fondo-2: var(--papel-hondo);
  --oro: #d9a441;
  --coral-suave: #e2744e;
  color-scheme: light;
  background: var(--papel);
  color: var(--tinta);
  overflow-x: clip;   /* `clip`, no `hidden`: `hidden` mataría los cuadros pegajosos */
}

/* La pantalla, con respaldo. `svh` no existe antes de Safari 15.4, Chrome 108
   y Firefox 101; una declaración con var() se da por buena al leerla y, si al
   calcular sale inválida, cae a `auto` —las escenas medirían 0 px—. Por eso la
   unidad nueva va dentro de @supports y el resto de la hoja solo usa esta
   variable. `svh` es la pantalla CHICA —con las barras de Safari a la vista—:
   lo que de verdad se ve, así la frase de abajo nunca cae tras la barra. */
.cuento { --pantalla: 100vh; }
@supports (height: 100svh) { .cuento { --pantalla: 100svh; } }

/* ── El telón ─────────────────────────────────────────────────────────────────
   Una sola capa fija con TODAS las láminas apiladas por orden de escena. La que
   entra sube su opacidad encima de la anterior, que se queda opaca debajo hasta
   quedar tapada: por eso las dos se funden y por eso nunca puede verse el papel
   entre una y otra. Lo llena `cuento.js`; sin JavaScript cada lámina se queda en
   su sección y el cuento se lee igual, quieto. */

.telon {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: clip;
  pointer-events: none;
  background: var(--papel-hondo);
}
.telon .arte {
  --p: 0;
  --c: 0;
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: clip;
  /* Entra fundiéndose y se queda: la de abajo no se apaga hasta que ésta la
     tapa entera. Arranca en .12 —cuando la frase anterior (.62 de la suya) ya
     va apagándose— y termina en .26, justo antes de que la frase nueva
     encienda del todo (.30). */
  opacity: clamp(0, calc((var(--p) - .12) / .14), 1);
}
/* Componer todas las pantallas a la vez es más de lo que aguanta un teléfono
   de hace cuatro años. La que ya quedó debajo de una lámina opaca se apaga. */
.telon .arte.dormida { visibility: hidden; }

/* ── La escena ────────────────────────────────────────────────────────────── */

.escena {
  --p: .5;
  --c: 1;
  position: relative;
  z-index: 1;
  height: var(--pantalla);
  isolation: isolate;
}
/* Con el motor andando cada escena del cuento mide 1.25 pantallas: una para
   que la frase suba con el scroll y un cuarto en que se queda quieta (el
   cuadro pegajoso) mientras se lee y la lámina siguiente se funde detrás. Es
   EL número que se toca si el cuento se siente corto o largo. El cierre no:
   termina en el pie. */
.con-motor .escena:not(.cuento-cierre) { height: calc(var(--pantalla) * 1.25); }

/* El cuadro: una pantalla que el navegador deja pegada arriba mientras su
   sección pasa por debajo. Aquí viven la frase y su velo; lo mueve el motor de
   scroll del sistema, nunca JavaScript, así que va en el mismo cuadro que el
   dedo. `clip` para que el velo no asome fuera de su pantalla mientras entra. */
.escena .cuadro {
  position: sticky;
  top: 0;
  height: var(--pantalla);
  overflow: clip;
}
/* Lo que no está en su ventana no se compone: velos y frases a pantalla
   completa con opacidad 0 siguen costando una capa cada uno. `viva` la pone
   cuento.js cuando `--p` anda entre .08 y .74. */
/* El cierre queda FUERA de esta regla: mide su `--p` contra su propio alto
   con el pie dentro, y en un teléfono chico con letra grande puede pasar de
   .74 justo mientras alguien escribe su correo. Con un botón nadie lo notaba;
   con un campo sería un fallo a la vista. */
.con-motor .escena:not(.viva):not(.cuento-cierre) .linea,
.con-motor .escena:not(.viva) .baja { visibility: hidden; }

/* Sin JavaScript la lámina se queda en su sitio y se ve entera. */
.escena .arte { position: absolute; inset: 0; margin: 0; z-index: 0; overflow: clip; }
/* `picture` es un envoltorio en línea: sin esto, el `width:100%` de la imagen
   se mide contra un cajón que no ocupa nada y la lámina sale a su tamaño
   natural, con franjas de papel a los lados. */
.arte picture { position: absolute; inset: 0; display: block; }
.arte img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
  /* Ken Burns atado al scroll: entra un punto más grande y se ASIENTA al pasar
     por el centro. El 1.14 de base no es decorativo: deja margen de sobra para
     que el desplazamiento nunca descubra el borde. */
  /* Lo que le falta a la lámina para estar puesta: 1 cuando asoma, 0 en el
     mismo .26 en que su opacidad llega a 1. Mientras aparece sube un poco y
     se asienta, así el fundido se lee como una llegada y no como dos
     fotogramas quietos encimados. Para no salirse del margen del `cover`
     —(S−1)/2 del alto de la lámina—: se traslada ANTES de escalar y en `%`,
     que en un translate se mide contra la propia imagen. Aguanta en cualquier
     pantalla de 272 px o más. */
  --entra: calc(1 - clamp(0, calc((var(--p) - .12) / .14), 1));
  transform: translate3d(0, calc((var(--p) - .5) * -34px + var(--entra) * 3.4% + var(--baja, 0%)), 0)
             scale(calc(1.14 - var(--c) * .05 + var(--entra) * .05));
}
/* El héroe en escritorio baja un pelo: la burbuja de pensamiento del niño
   nace a un 5 % del borde de arriba de la lámina ancha y la ficha «Mesada»
   de la cabecera le caía encima (13-sep, fotograma 1440×900). Cabe en el
   margen que deja la escala 1.09 del reposo (4.5 % por lado). `arte-heroe`
   la pone cuento.js cuando la lámina sube al telón; sin JS sigue en su
   sección y la alcanza el primer selector. */
@media (min-aspect-ratio: 1/1) {
  .cuento-heroe .arte img, .telon .arte-heroe img { --baja: 3.8%; }
}

.escena .linea {
  position: absolute;
  z-index: 2;
  width: min(600px, 80vw);
  margin: 0;
  will-change: opacity;
  /* La ventana de la frase: enciende .20–.30 mientras sube, se lee quieta
     toda la parada del cuadro (.30–.60, pegado entre .5 y .6) y se apaga
     .60–.70 mientras se va. Cuando la siguiente empieza a encender (su .20 =
     .70 de ésta) la que sale ya se apagó del todo: en el cruce hay lámina
     nueva y un instante sin letra, que es lo que hace que se lea como un
     cambio de escena y no como dos frases peleando. Las de abajo entran a la
     pantalla más tarde (ya encendidas): fuera de la pantalla no se ven. */
  opacity: min(clamp(0, calc((var(--p) - .20) / .10), 1),
               clamp(0, calc((.70 - var(--p)) / .10), 1));
}
/* El velo: un halo de papel ceñido a la frase, que viaja con ella. Antes era
   un degradado desde el borde de la pantalla y, mientras el cuadro entraba por
   abajo, ese borde cruzaba el dibujo como una banda. Un óvalo alrededor del
   texto no tiene borde que cruce nada y deja el resto de la lámina limpio. */
.escena .linea::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -30% -22%;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
              rgba(253,252,247,.95) 0%, rgba(253,252,247,.84) 34%,
              rgba(253,252,247,.42) 60%, rgba(253,252,247,0) 80%);
}

/* Los sitios del texto. Nunca dos escenas seguidas en el mismo, y el sitio se
   escoge contra el lado donde el dibujo dejó el papel vacío. */
.escena[data-pos="arriba-izq"] .linea { top: clamp(96px, 17vh, 200px); left: clamp(24px, 7vw, 110px); text-align: left; }
.escena[data-pos="arriba-der"] .linea { top: clamp(96px, 17vh, 200px); right: clamp(24px, 7vw, 110px); text-align: right; }
.escena[data-pos="abajo-izq"]  .linea { bottom: calc(clamp(64px, 13vh, 150px) + env(safe-area-inset-bottom, 0px)); left: clamp(24px, 7vw, 110px); text-align: left; }
.escena[data-pos="abajo-der"]  .linea { bottom: calc(clamp(64px, 13vh, 150px) + env(safe-area-inset-bottom, 0px)); right: clamp(24px, 7vw, 110px); text-align: right; }
/* En el teléfono la lámina es OTRO recorte del mismo dibujo, y el papel vacío
   no cae en el mismo sitio que en la ancha: cada escena trae su rincón de
   teléfono en `data-pos-alta`, medido contra la lámina alta. Se anulan las
   cuatro esquinas a mano porque cambiar de abajo a arriba exige soltar
   `bottom`, no basta con poner `top`. El corte no se repite: se niega el
   del `<picture>`, así una ventana exactamente cuadrada cae siempre del mismo
   lado que la lámina. */
@media not all and (min-aspect-ratio: 1/1) {
  .escena[data-pos-alta="arriba-izq"] .linea { top: clamp(96px, 17vh, 200px); bottom: auto; left: clamp(24px, 7vw, 110px); right: auto; text-align: left; }
  .escena[data-pos-alta="arriba-der"] .linea { top: clamp(96px, 17vh, 200px); bottom: auto; right: clamp(24px, 7vw, 110px); left: auto; text-align: right; }
  .escena[data-pos-alta="abajo-izq"]  .linea { bottom: calc(clamp(64px, 13vh, 150px) + env(safe-area-inset-bottom, 0px)); top: auto; left: clamp(24px, 7vw, 110px); right: auto; text-align: left; }
  .escena[data-pos-alta="abajo-der"]  .linea { bottom: calc(clamp(64px, 13vh, 150px) + env(safe-area-inset-bottom, 0px)); top: auto; right: clamp(24px, 7vw, 110px); left: auto; text-align: right; }
}

/* Un halo de papel alrededor de la letra: donde el velo ya se acabó y el dibujo
   tiene detalle, esto es lo que mantiene el trazo legible sin tapar nada. */
.escena .linea > * { text-shadow: 0 0 22px rgba(253,252,247,.92), 0 1px 2px rgba(253,252,247,.9); }

.escena .momento {
  display: block;
  font-family: "Nunito Sans", system-ui, sans-serif;
  font-size: clamp(10.5px, .78vw, 12px);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta-2);
  margin-bottom: 18px;
}
/* Una idea por escena, en no más de cinco líneas: la letra puede ser grande. */
.escena .linea p {
  font-family: "Fredoka", "Nunito Sans", sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 2.3vw, 36px);
  line-height: 1.3;
  letter-spacing: -.012em;
  color: var(--tinta);
  text-wrap: balance;
  margin: 0;
}

/* El giro: la frase más larga del cuento sobre la pared vacía que hay encima
   de Gani. Caja más ancha (tres renglones, no cinco) y un poco más arriba,
   para cerrar antes de su cabeza, que arranca al 36 % del alto en la ancha. */
#giro .linea { width: min(760px, 84vw); }
.escena#giro[data-pos="arriba-izq"] .linea { top: clamp(92px, 12vh, 200px); }

/* ── El héroe ─────────────────────────────────────────────────────────────── */

/* En reposo (`--p` = .5) la ventana de la frase ya vale 1: el héroe se ve
   entero al abrir y se despide como todos. */
.cuento-heroe h1 {
  font-family: "Fredoka", "Nunito Sans", sans-serif;
  font-weight: 500;
  font-size: clamp(36px, 4.7vw, 68px);
  line-height: 1.05;
  letter-spacing: -.024em;
  text-wrap: balance;
  margin: 0 0 18px;
  color: var(--tinta);
}
.cuento-heroe .linea p { font-family: "Nunito Sans", sans-serif; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.55; color: var(--tinta-2); font-weight: 400; margin: 0; max-width: 34ch; }
.escena[data-pos$="-der"] .linea p { margin-left: auto; }
/* El titular del héroe cabe en dos renglones a 375 px: la frase tiene que
   quedar por encima del dibujo, que ocupa la mitad de abajo de la lámina. */
.cuento-heroe .linea { width: min(680px, 84vw); }

/* La palabra que vende, subrayada a mano: un trazo de tinta coral dentro del
   propio titular que se DIBUJA al llegar (el único movimiento de entrada del
   sitio). Va en un `<em>` con su SVG: `preserveAspectRatio: none` lo estira
   al ancho de la palabra y `non-scaling-stroke` mantiene el grosor. */
.cuento-heroe h1 em { font-style: normal; position: relative; white-space: nowrap; }
.cuento-heroe .raya {
  position: absolute; left: -1%; right: -1%; bottom: -.06em; width: 102%; height: .3em;
  overflow: visible; pointer-events: none;
}
.cuento-heroe .raya path {
  fill: none; stroke: var(--coral); stroke-width: 4.2; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: raya .7s cubic-bezier(.4, 0, .2, 1) 1s forwards;
}
@keyframes raya { to { stroke-dashoffset: 0; } }

/* Las tres fichas del escéptico: cuánto cuesta, si hay que dar una tarjeta,
   y cuándo. Papel translúcido como la cabecera; se alinean al lado del texto. */
.fichas { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.escena[data-pos$="-der"] .fichas { justify-content: flex-end; }
.fichas li {
  font: 700 11px/1 "Nunito Sans", sans-serif; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinta-2); text-shadow: none;
  background: rgba(253,252,247,.88); border: 1px solid rgba(230,220,201,.95); border-radius: 999px; padding: 9px 12px;
  box-shadow: 0 1px 2px rgba(51,35,26,.06);
}
@media not all and (min-aspect-ratio: 1/1) {
  .escena[data-pos-alta$="-der"] .fichas { justify-content: flex-end; }
  .escena[data-pos-alta$="-izq"] .fichas { justify-content: flex-start; }
  .escena[data-pos-alta$="-der"] .linea p { margin-left: auto; }
  .escena[data-pos-alta$="-izq"] .linea p { margin-left: 0; }
  .cuento-heroe[data-pos-alta] .linea { top: clamp(88px, 12vh, 200px); }
}
@media (max-width: 600px) {
  .fichas { display: block; margin-top: 16px; font: 700 11px/1.7 "Nunito Sans", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
  .fichas li { display: inline; white-space: nowrap; font: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; box-shadow: none; }
  .fichas li:not(:last-child)::after { content: " ·"; color: var(--coral-hondo); }
}

/* La llegada: cada pieza del héroe sube un dedo y enciende, en escalera corta.
   Una sola vez, al cargar; el scroll no la repite. Por debajo de .7 s no se
   nota; por encima de 1 s estorba a quien llega con prisa. */
.cuento-heroe .linea > * { animation: llega .85s cubic-bezier(.19, 1, .22, 1) both; }
.cuento-heroe .linea > h1 { animation-delay: .12s; }
.cuento-heroe .linea > p { animation-delay: .3s; }
.cuento-heroe .linea > .fichas { animation-delay: .46s; }
@keyframes llega { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }

/* La señal de bajar, que es lo que invita a entrar al cuento. Marco, 9-sep:
   «sería cool tener en la primer slide algo que invite a bajar para ver la
   historia». Va centrada abajo, en una ficha de papel como la cabecera, con
   una flecha que respira. Es un enlace a la escena 1: tocarla también baja. */
.baja {
  position: absolute;
  bottom: calc(clamp(22px, 4vh, 42px) + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px 11px 20px;
  border-radius: 999px;
  background: rgba(253,252,247,.84);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(51,35,26,.08), 0 6px 18px -10px rgba(51,35,26,.35);
  font-family: "Nunito Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-2);
  text-decoration: none;
  white-space: nowrap;
  opacity: clamp(0, calc((.70 - var(--p)) / .10), 1);
}
.baja:hover { color: var(--tinta); }
.baja:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
/* La flecha: un chevron de dos trazos que baja y vuelve, despacio. */
.baja i {
  display: block;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  animation: baja-respira 1.8s ease-in-out infinite;
}
@keyframes baja-respira {
  0%, 100% { transform: rotate(45deg) translate(-2px, -2px); opacity: .55; }
  50%      { transform: rotate(45deg) translate(1px, 1px);   opacity: 1; }
}

/* La señal de «sigue» en cada escena del cuento: el mismo chevron de la ficha
   del héroe, solo, en un disco de papel abajo al centro. Marco, 11-sep: quien
   toca la ficha aterriza en la escena 1 sin saber que hay que seguir bajando;
   con esto, desde arriba hasta el giro siempre hay una señal de que hay más,
   y tocarla baja suave a la siguiente (cuento.js). Enciende y se apaga con la
   frase, así nunca compite con la lámina que entra. */
.sigue {
  position: absolute;
  bottom: calc(clamp(18px, 3.5vh, 36px) + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(253,252,247,.84);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(51,35,26,.08), 0 6px 18px -10px rgba(51,35,26,.35);
  color: var(--tinta-2);
  opacity: min(clamp(0, calc((var(--p) - .20) / .10), 1),
               clamp(0, calc((.70 - var(--p)) / .10), 1));
}
.sigue:hover { color: var(--tinta); }
.sigue:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.sigue i {
  display: block;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  animation: baja-respira 1.8s ease-in-out infinite;
}
.con-motor .escena:not(.viva) .sigue { visibility: hidden; }

/* ── El botón ────────────────────────────────────────────────────────────────
   Vivía en `landing.css`, que es la hoja del sitio viejo y estas páginas ya no
   cargan: el enlace del cierre salía SIN estilo, letra suelta encima del
   dibujo. */

.cuento .boton {
  display: inline-block;
  font-family: "Fredoka", "Nunito Sans", sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1;
  padding: 17px 30px;
  border-radius: 999px;
  text-decoration: none;
  text-shadow: none;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.cuento .boton.primario {
  background: var(--coral);
  color: #fffaf6;
  box-shadow: 0 2px 3px rgba(74,53,39,.14), 0 16px 30px -16px rgba(200,92,55,.75);
}
.cuento .boton.primario:hover { background: var(--coral-hondo); transform: translateY(-2px); }
.cuento .boton:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }

/* ── El canal de dudas, ideas y soporte ──────────────────────────────────────
   Dos campos y un botón, en columna, donde estaba el enlace de correo. La
   lámina del cierre tiene a Gani desde la mitad hacia abajo y el bloque vive
   en el tercio de arriba por eso; en teléfono el cajón del mensaje se queda en
   dos renglones para no crecerle encima.

   El campo va a 17 px porque por debajo de 16 Safari iOS hace zoom al enfocar
   y descoloca la página; y `.cuento .boton` está escrito para un `<a>`, así que
   a un `<button>` hay que quitarle lo que trae del sistema. */
.pedido {
  width: min(440px, 88vw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  text-align: left;
}
.pedido .campo { display: flex; gap: 8px; align-items: stretch; }
.pedido .campo input[type="email"] { flex: 1 1 auto; min-width: 0; }
.pedido input[type="email"],
.pedido textarea {
  width: 100%;
  box-sizing: border-box;
  font: 400 17px/1.45 "Nunito Sans", sans-serif;
  color: var(--tinta);
  background: var(--tarjeta);
  border: 1.5px solid var(--linea);
  border-radius: 18px;
  padding: 13px 18px;
  box-shadow: inset 0 1px 2px rgba(74,53,39,.05);
  -webkit-appearance: none;
          appearance: none;
}
.pedido input[type="email"] { border-radius: 999px; }
.pedido textarea { resize: vertical; min-height: 3.2em; }
.pedido input::placeholder,
.pedido textarea::placeholder { color: var(--tinta-3); opacity: .75; }
.pedido input:focus-visible,
.pedido textarea:focus-visible { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(226,116,78,.18); }
.pedido [aria-invalid="true"] { border-color: var(--coral-hondo); }
.pedido .boton {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  padding: 14px 24px;
  -webkit-appearance: none;
          appearance: none;
}
/* Tres clases para ganarle a `.cuento-cierre .linea p` (0,2,1). */
.cuento-cierre .pedido .nota {
  margin: 8px 0 0;
  min-height: 2.6em;               /* el sitio del mensaje ya está reservado:
                                      al enviar no brinca la maqueta */
  font-size: 13px;
  line-height: 1.5;
  color: var(--tinta-2);
  max-width: none;
  text-align: center;
  transition: color .2s ease;
}
.cuento-cierre .pedido[data-estado="invalido"] .nota,
.cuento-cierre .pedido[data-estado="error"] .nota { color: var(--coral-hondo); }
.cuento-cierre .pedido[data-estado="ok"] .nota { font-size: 16px; color: var(--tinta); }
.pedido[data-estado="ok"] textarea,
.pedido[data-estado="ok"] .campo { display: none; }
.pedido[data-estado="enviando"] .boton { opacity: .65; pointer-events: none; }
.pedido[data-estado="enviando"] input,
.pedido[data-estado="enviando"] textarea { opacity: .65; }

/* Visible para un lector de pantalla, invisible para el resto. */
.oculto {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (min-width: 700px) {
  .pedido { width: min(520px, 80vw); }
  .pedido textarea { min-height: 2.8em; }
  /* En 1440×900 la pila (titular, frase, dos campos, nota y sello) tiene que
     cerrar antes del 46 % del alto: la cabeza de Gani arranca al 33 % de la
     lámina ancha y sus ojos al 58 %. Medido con fotograma el 13-sep. */
  .cuento-cierre .pedido .nota { min-height: 2em; margin-top: 6px; }
  .cuento-cierre .sello { margin-top: 8px; }
}

/* ── El cierre ──────────────────────────────────────────────────────────────
   La última pantalla no se despide y termina en el pie, que vive DENTRO de
   ella: la frase se centra en lo que queda por encima del pie, con espacio
   para las fichas de la cabecera. Antes el pie venía después y empujaba el
   cierre fuera de su ventana: el botón se apagaba justo donde el lector
   aterriza, y JS lo perseguía para recentrarlo. Ahora es una columna. */
.cuento-cierre { height: auto; min-height: var(--pantalla); overflow: clip; }
/* La lámina del cierre ocupa EXACTAMENTE la pantalla del titular, y el pie va
   debajo sobre papel liso. Antes cubría también el alto del pie: en el teléfono
   —donde el pie se apila y es alto— Gani quedaba partido por su borde y se
   transparentaba detrás de la letra legal. */
.cuento-cierre .arte { height: var(--pantalla); bottom: auto; }
.cuento-cierre .cuadro {
  position: relative;
  top: auto;
  height: auto;
  min-height: var(--pantalla);
  overflow: visible;
  display: flex;
  flex-direction: column;
}
.cuento-cierre .linea {
  position: relative;
  min-height: var(--pantalla);
  width: min(760px, 88vw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* El titular vive en el TERCIO DE ARRIBA y Gani se queda con la mitad de
     abajo: centrado, el botón caía sobre su cara. */
  justify-content: flex-start;
  text-align: center;
  padding: clamp(72px, 9vh, 200px) 0 clamp(40px, 7vh, 80px);
  opacity: clamp(0, calc((var(--p) - .20) / .10), 1);
}
.cuento-cierre .linea::before { inset: 10% -16%; }
.cuento-cierre h2 {
  font-family: "Fredoka", "Nunito Sans", sans-serif;
  font-weight: 600;
  font-size: clamp(30px, 4.4vw, 58px);
  line-height: 1.08;
  letter-spacing: -.025em;
  text-wrap: balance;
  margin: 0 0 16px;
  color: var(--tinta);
}
.cuento-cierre .linea p { font-family: "Nunito Sans", sans-serif; font-size: clamp(16px, 1.5vw, 19px); color: var(--tinta-2); margin: 0 0 18px; max-width: 46ch; }
.cuento-cierre .sello { display: block; margin-top: 16px; font-size: 13px; color: var(--tinta-2); }
/* La nota del campo vive dentro del formulario y no heredaba el halo de papel
   de la frase: en un SE la letra chica caía sobre la cabeza de Gani y se
   perdía en su tinta (14-sep). Mismo halo, un poco más ceñido. */
.cuento-cierre .pedido .nota,
.cuento-cierre .sello { text-shadow: 0 0 10px rgba(253,252,247,.98), 0 0 3px rgba(253,252,247,.98); }
/* En un teléfono bajo (el SE con las barras de Safari: ~470 px útiles) la pila
   no cabe antes del 55 % donde arranca Gani, y el halo solo no basta: la nota
   y el sello caen sobre sus ojos. Ahí cada uno lleva la ficha de papel de la
   cabecera, ceñida a su letra. Sin reservar alto: con la ficha, un renglón de
   más en un aviso de error se nota menos que una ficha vacía. */
@media (max-aspect-ratio: 1/1) and (max-height: 600px) {
  .cuento-cierre .pedido .nota,
  .cuento-cierre .sello {
    display: table;
    margin-left: auto; margin-right: auto;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(253,252,247,.86);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    text-shadow: none;
  }
  .cuento-cierre .pedido .nota { min-height: 0; }
  .cuento-cierre .pedido .nota:empty { display: none; }
}

/* En teléfono la pila crece: titular, frase, campo, botón, nota y sello. La
   tinta de Gani empieza al 55 % del alto de `cierre-alta.jpg` (medido), así que
   el bloque sube un poco y la nota reserva dos renglones en vez de tres: el
   sello cierra al 52 % y nada se le apoya encima a la moneda. */
@media (max-width: 699px) {
  .cuento-cierre .linea { padding-top: clamp(78px, 9.6vh, 200px); }
  .cuento-cierre .pedido .nota { min-height: 2.2em; margin-top: 6px; }
  .cuento-cierre .linea > p { margin-bottom: 14px; }
  .cuento-cierre .sello { margin-top: 10px; }
  .pedido textarea { min-height: 2.6em; }
}

/* ── El pie, con lo que Apple pide a la vista ─────────────────────────────── */

.pie-cuento { position: relative; z-index: 2; background: var(--papel); padding: clamp(36px, 6vh, 70px) clamp(24px, 5vw, 60px) clamp(28px, 5vh, 56px); border-top: 1px solid #e9dfcd; }
.pie-cuento .dentro-pie { max-width: 1040px; margin: 0 auto; display: grid; gap: 22px; }
.pie-cuento .enlaces { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.pie-cuento a { color: var(--tinta-2); text-decoration: none; border-bottom: 1px solid #ddd0ba; padding-bottom: 2px; font-size: 15px; }
.pie-cuento a:hover { color: var(--tinta); border-color: var(--coral); }
.pie-cuento .legal { font-size: 13.5px; line-height: 1.65; color: var(--tinta-3); max-width: 68ch; margin: 0; }
.pie-cuento .firma { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: var(--tinta-3); margin: 0; }

/* La cabecera flota: nada compite con el cuento. Sin `multiply`: sobre una
   lámina oscura la tinta multiplicada se perdía y «Mesada» y el selector
   desaparecían. En su lugar, cada pieza lleva su propia ficha de papel
   translúcido: se lee sobre cualquier dibujo y no pinta una franja encima. */
.cuento .cabecera { position: fixed; top: 0; left: 0; right: 0; background: none; border: 0; box-shadow: none; z-index: 5; }
.cuento .cabecera .marca,
.cuento .cabecera .idiomas {
  background: rgba(253,252,247,.84);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(51,35,26,.08), 0 6px 18px -10px rgba(51,35,26,.35);
}
.cuento .cabecera .marca { border-radius: 999px; padding: 5px 14px 5px 6px; }
.cuento .cabecera .idiomas { border-color: rgba(230,220,201,.9); }
/* En un teléfono el selector de idioma se salía por la derecha: se vio en el
   render de 430 px. */
@media (max-width: 520px) {
  .cuento .cabecera { padding-left: 16px; padding-right: 16px; gap: 8px; }
  .cuento .cabecera .marca strong { font-size: 17px; }
  .cuento .cabecera .idiomas { flex: none; }
  .cuento .cabecera .idiomas a { padding: 6px 9px; font-size: 12px; }
}
/* Con la letra de Safari al 150 % un iPhone SE deja 250 px de ancho, y la
   ficha «Mesada» más los tres idiomas no cabían: «PT» quedaba fuera de la
   pantalla (14-sep). Primero se encoge todo; por debajo de 280 px el nombre se
   esconde a la vista —la moneda sigue llevando a casa y el lector de pantalla
   sigue leyendo «Mesada»— y los idiomas nunca se pierden. */
@media (max-width: 340px) {
  .cuento .cabecera { padding-left: 10px; padding-right: 10px; gap: 6px; }
  .cuento .cabecera .marca { gap: 8px; padding: 4px 10px 4px 4px; }
  .cuento .cabecera .marca img { width: 36px; height: 36px; }
  .cuento .cabecera .marca strong { font-size: 15px; }
  .cuento .cabecera .idiomas a { min-width: 32px; padding: 6px 6px; font-size: 11px; }
}
@media (max-width: 280px) {
  .cuento .cabecera .marca { padding: 4px; }
  .cuento .cabecera .marca strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Un teléfono de pie con muy poco alto: el SE con la letra grande de Safari
   (250×373) o con las barras abiertas. Las frases del cuento se salían por
   abajo del cuadro —y el cuadro corta—, y en el héroe la ficha «Ver cómo
   funciona» se sentaba encima del texto. Todo sube, la letra baja un punto y
   la ficha se queda en su disco con la flecha, como la de las escenas. Solo
   aquí: arriba de 440 px de alto nada cambia. */
@media (max-aspect-ratio: 1/1) and (max-height: 440px) {
  .cuento .cabecera { padding-top: 10px; }
  .escena[data-pos-alta^="arriba"] .linea { top: 62px; }
  .cuento-heroe[data-pos-alta] .linea { top: 58px; }
  .escena#giro[data-pos-alta^="arriba"] .linea { top: 62px; }
  .escena[data-pos-alta^="abajo"] .linea { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  .escena[data-pos-alta$="-izq"] .linea { left: 7vw; }
  .escena[data-pos-alta$="-der"] .linea { right: 7vw; }
  .escena .linea, #giro .linea, .cuento-heroe .linea { width: 86vw; }
  .escena .momento { margin-bottom: 8px; }
  .escena .linea p { font-size: 18px; line-height: 1.28; }
  .cuento-heroe h1 { font-size: 28px; margin-bottom: 10px; }
  .cuento-heroe .linea p { font-size: 15px; line-height: 1.45; }
  .fichas { margin-top: 10px; }
  /* A la esquina: al centro caía sobre las fichas del héroe. El translate de
     −50 % se queda (lo exige también el movimiento reducido), así que el
     disco se centra a 32 px del borde. */
  .baja { width: 40px; height: 40px; padding: 0; gap: 0; justify-content: center; font-size: 0; letter-spacing: 0; left: calc(100% - 32px); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .baja i { margin-top: -5px; }
  .sigue { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .cuento-cierre .linea { padding-top: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .arte img, .escena .linea, .telon .arte { transform: none !important; opacity: 1 !important; visibility: visible !important; }
  /* La ficha y el disco se centran con su translate: quitarlo junto con los
     demás los corría media anchura a la derecha (iPhone SE, 14-sep). */
  .baja, .sigue { transform: translateX(-50%) !important; opacity: 1 !important; visibility: visible !important; }
  .tarjetas li { opacity: 1; transform: none; transition: none; }
  .cuento-heroe .linea > *, .cuento-heroe .raya path { animation: none !important; opacity: 1; transform: none; stroke-dashoffset: 0; }
  .cuento .boton { transition: none; }
  .baja i, .sigue i { animation: none; }
}

/* ── Los paneles: el porqué y el precio ─────────────────────────────────────
   Marco, 8-sep: "la primera parte debe ser vender la metodologia y el porque,
   y lo segundo las funcioalidades bien hecho y el precio". Y el 13-sep, tras
   la revisión con usuarios: el cuento se queda en tres escenas y el porqué
   deja de ser una tesis a pantalla completa más una lista: es UN panel de
   seis tarjetas, cada una con un sticker del app, y cada una contesta lo que
   pregunta quien desconfía. Papel hondo detrás para que se lea como otro
   capítulo y no como una continuación del dibujo. */

.panel { position: relative; z-index: 1; padding: clamp(56px, 9vh, 120px) clamp(20px, 5vw, 60px) clamp(56px, 10vh, 120px); }
.porque { background: var(--papel-hondo); }
.panel .rotulo { max-width: 1040px; margin: 0 auto clamp(26px, 5vh, 52px); }
.panel .momento {
  display: block;
  font-family: "Nunito Sans", system-ui, sans-serif;
  font-size: clamp(10.5px, .78vw, 12px);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta-2);
  margin-bottom: 14px;
}
.panel h2 {
  font-family: "Fredoka", "Nunito Sans", sans-serif;
  font-weight: 500;
  font-size: clamp(27px, 3.4vw, 46px);
  line-height: 1.12;
  letter-spacing: -.022em;
  margin: 0 0 14px;
  max-width: 24ch;
  text-wrap: balance;
  color: var(--tinta);
}
.panel .rotulo p {
  font-family: "Nunito Sans", sans-serif;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--tinta-2);
  margin: 0;
  max-width: 56ch;
}

/* Las seis tarjetas. Una rejilla que se acomoda sola: tres en escritorio, dos
   en una tableta, una columna en el teléfono. Miden lo mismo entre hermanas
   (regla de Marco: los bloques hermanos miden igual) porque la rejilla las
   estira a la fila. */
.tarjetas {
  max-width: 1040px; margin: 0 auto; list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(14px, 2vw, 22px);
}
.tarjetas li {
  background: var(--tarjeta);
  border: 1px solid #e9dfcd;
  border-radius: 22px;
  padding: 24px 24px 26px;
  box-shadow: 0 1px 2px rgba(74,53,39,.04), 0 18px 34px -28px rgba(74,53,39,.45);
  opacity: 0; transform: translate3d(0, 18px, 0);
  transition: opacity .8s cubic-bezier(.19,1,.22,1), transform .8s cubic-bezier(.19,1,.22,1);
}
.tarjetas li.dentro { opacity: 1; transform: none; }
/* El sticker viene del app tal cual (contorno café, borde blanco): a 64 px se
   lee entero, y la sombra corta lo despega del papel como una calcomanía. */
.tarjetas img { width: 64px; height: 64px; display: block; margin: 0 0 14px -4px; filter: drop-shadow(0 4px 6px rgba(74,53,39,.16)); }
.tarjetas h4 { font-family: "Fredoka", "Nunito Sans", sans-serif; font-weight: 500; font-size: 19.5px; line-height: 1.2; margin: 0 0 7px; color: var(--tinta); text-wrap: balance; }
.tarjetas p { margin: 0; font-size: 16px; line-height: 1.58; color: var(--tinta-2); }
@media (max-width: 480px) { .tarjetas li { padding: 20px 20px 22px; border-radius: 20px; } .tarjetas img { width: 56px; height: 56px; margin-bottom: 12px; } }

/* Los sellos: lo que un padre quiere leer justo antes de ver un precio. */
.sellos { max-width: 1040px; margin: 0 auto clamp(26px, 5vh, 48px); padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.sellos li {
  font: 700 11.5px/1 "Nunito Sans", sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-2); background: var(--papel); border: 1px solid #e6dcc9; border-radius: 999px; padding: 10px 14px;
}
@media (max-width: 480px) { .sellos { gap: 6px; } .sellos li { font-size: 10px; letter-spacing: .06em; padding: 8px 10px; } }

/* ── El precio ───────────────────────────────────────────────────────────── */

.planes { background: var(--papel); border-top: 1px solid #ece3d2; }
.planes-caja { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(20px, 3vw, 42px); align-items: start; }
.plan-uno { background: var(--papel); border: 1px solid #e6dcc9; border-radius: 18px; padding: clamp(24px, 3vw, 38px); }
.plan-uno.destacado { border-color: var(--coral); box-shadow: 0 2px 4px rgba(74,53,39,.05), 0 22px 44px -30px rgba(74,53,39,.5); }
.plan-uno h3 { font-family: "Fredoka", "Nunito Sans", sans-serif; font-weight: 600; font-size: 21px; margin: 0 0 6px; color: var(--tinta); }
.plan-uno .cifra { font-family: "Fredoka", "Nunito Sans", sans-serif; font-weight: 500; font-size: clamp(19px, 1.8vw, 24px); color: var(--coral-hondo); margin: 0 0 4px; font-variant-numeric: tabular-nums; }
.plan-uno .nota { font-size: 14px; color: var(--tinta-3); margin: 0 0 18px; }
.plan-uno ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 11px; }
.plan-uno li { display: grid; grid-template-columns: 18px 1fr; gap: 11px; font-size: 16px; line-height: 1.5; color: var(--tinta-2); }
.plan-uno li::before { content: "·"; color: var(--coral-hondo); font-weight: 700; text-align: center; }
.letra-chica { max-width: 1000px; margin: clamp(24px, 4vh, 40px) auto 0; font-size: 13px; line-height: 1.6; color: var(--tinta-3); }

@media (prefers-reduced-motion: reduce) { .tarjetas li { opacity: 1; transform: none; transition: none; } }

/* ── La página de todas las funciones ───────────────────────────────────────
   Marco, 13-sep: «conoce todas las funcionalidades… en forma de venta…
   stickers y frases nada más». Misma casa que la portada (papel, Fredoka,
   tarjetas con sticker), sin láminas: la portada vende en diez segundos y
   esta página vende en cinco minutos. */

.portada { position: relative; z-index: 1; background: var(--papel); padding: clamp(112px, 16vh, 170px) clamp(20px, 5vw, 60px) 0; }
.portada > .dentro { max-width: 1040px; margin: 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.portada .texto { max-width: 640px; }
.portada .momento {
  display: block; font-family: "Nunito Sans", system-ui, sans-serif; font-size: clamp(10.5px, .78vw, 12px);
  font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: 14px;
}
.portada h1 {
  font-family: "Fredoka", "Nunito Sans", sans-serif; font-weight: 500; font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.06; letter-spacing: -.024em; margin: 0 0 16px; text-wrap: balance; color: var(--tinta);
}
.portada .texto p { font-family: "Nunito Sans", sans-serif; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--tinta-2); margin: 0; max-width: 52ch; }
/* Gani celebra a la derecha del titular, como calcomanía: sombra corta y un
   giro de nada, para que no parezca icono puesto. */
.portada .gani { width: clamp(96px, 12vw, 160px); height: auto; flex: none; transform: rotate(-6deg); filter: drop-shadow(0 8px 12px rgba(74,53,39,.18)); }
/* La barra de saltos: pegada bajo las fichas de la cabecera, en su propio
   papel, y en el teléfono se desliza de lado sin envolver. */
.subnav { position: sticky; top: 66px; z-index: 4; margin: 0; padding: clamp(22px, 4vh, 40px) clamp(20px, 5vw, 60px) 12px; background: linear-gradient(var(--papel) 70%, rgba(253,252,247,0)); pointer-events: none; }
.portada { padding-bottom: 0; }
.subnav .dentro { max-width: 1040px; margin: 0 auto; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; pointer-events: auto; padding-bottom: 4px; }
.subnav .dentro::-webkit-scrollbar { display: none; }
.subnav a {
  flex: none; font: 700 11.5px/1 "Nunito Sans", sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-2); text-decoration: none; background: var(--tarjeta); border: 1px solid #e6dcc9; border-radius: 999px; padding: 10px 14px;
  box-shadow: 0 1px 2px rgba(51,35,26,.06); transition: color .18s ease, border-color .18s ease, transform .18s ease;
}
.subnav a:hover { color: var(--tinta); border-color: var(--coral); transform: translateY(-1px); }
.subnav a:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.grupo-funciones { scroll-margin-top: 120px; }
.grupo-funciones.hondo { background: var(--papel-hondo); }
.grupo-funciones:not(.hondo) { background: var(--papel); }
.grupo-funciones .tarjetas li { position: relative; padding-top: 28px; }
/* La etiqueta de cada función, arriba a la derecha de su tarjeta. */
.tarjetas .plan {
  position: absolute; top: 14px; right: 14px;
  font: 700 10.5px/1 "Nunito Sans", sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-3); background: var(--papel-hondo); border: 1px solid #e6dcc9; border-radius: 999px; padding: 7px 10px;
}
.tarjetas .plan.plus { color: var(--coral-hondo); background: rgba(226,116,78,.12); border-color: rgba(226,116,78,.35); }
.tarjetas .plan.mixto { color: var(--tinta-2); }
.tarjetas .plan.viene { color: var(--tinta-2); background: var(--papel); border-style: dashed; }
/* Lo que viene: tarjetas de trazo punteado, para que se lea como promesa y
   no como función. */
.grupo-funciones.viene .tarjetas li { border: 1.5px dashed #d9cbb2; background: rgba(255,253,248,.7); box-shadow: none; }
/* El botón quieto: papel con borde, para «ver todas las funciones» y para
   volver. Se levanta al tocar (regla B de Marco: lo que se toca se levanta). */
.mas { text-align: center; margin: clamp(28px, 5vh, 48px) 0 0; }
.cuento .boton.quieto { background: var(--tarjeta); color: var(--tinta); border: 1.5px solid #e0d4bf; box-shadow: 0 1px 2px rgba(74,53,39,.06), 0 12px 24px -18px rgba(74,53,39,.45); }
.cuento .boton.quieto:hover { border-color: var(--coral); color: var(--tinta); transform: translateY(-2px); }
.cierre-funciones { background: var(--papel-hondo); text-align: center; }
.cierre-funciones .rotulo { margin-left: auto; margin-right: auto; }
.cierre-funciones .rotulo h2 { margin-left: auto; margin-right: auto; }
.cierre-funciones .rotulo p { margin-left: auto; margin-right: auto; }
.cierre-funciones .caja-pedido { max-width: 520px; margin: 0 auto; }
.cierre-funciones .pedido .nota { min-height: 2.2em; margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--tinta-2); text-align: center; }
.cierre-funciones .pedido[data-estado="invalido"] .nota,
.cierre-funciones .pedido[data-estado="error"] .nota { color: var(--coral-hondo); }
.cierre-funciones .pedido[data-estado="ok"] .nota { font-size: 16px; color: var(--tinta); }
.cierre-funciones .sello { display: block; margin-top: 12px; font-size: 13px; color: var(--tinta-2); }
@media (max-width: 700px) {
  .portada > .dentro { flex-direction: column; align-items: flex-start; }
  .portada .gani { width: 88px; align-self: flex-end; margin-top: -8px; }
  .subnav { top: 62px; }
  .grupo-funciones { scroll-margin-top: 104px; }
}
@media (prefers-reduced-motion: reduce) { .subnav a, .cuento .boton.quieto { transition: none; } }