/* EverRise · la web.
   Todo valor de este archivo sale de la app (mobile/src): la paleta del kit del
   onboarding, la aurora de FondoAurora, el botón BotonOnb, las letras Manrope,
   IBM Plex Mono y Fraunces, las duraciones de motion/tokens.ts. */

@font-face { font-family: 'Manrope'; font-weight: 400; font-display: swap; src: url(../fonts/Manrope_400Regular.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 500; font-display: swap; src: url(../fonts/Manrope_500Medium.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 600; font-display: swap; src: url(../fonts/Manrope_600SemiBold.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 700; font-display: swap; src: url(../fonts/Manrope_700Bold.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 800; font-display: swap; src: url(../fonts/Manrope_800ExtraBold.woff2) format('woff2'); }
@font-face { font-family: 'Plex'; font-weight: 400; font-display: swap; src: url(../fonts/IBMPlexMono_400Regular.woff2) format('woff2'); }
@font-face { font-family: 'Plex'; font-weight: 500; font-display: swap; src: url(../fonts/IBMPlexMono_500Medium.woff2) format('woff2'); }
@font-face { font-family: 'Plex'; font-weight: 700; font-display: swap; src: url(../fonts/IBMPlexMono_700Bold.woff2) format('woff2'); }
@font-face { font-family: 'Fraunces'; font-weight: 700; font-display: swap; src: url(../fonts/Fraunces_700Bold.woff2) format('woff2'); }
@font-face { font-family: 'Fraunces'; font-weight: 700; font-style: italic; font-display: swap; src: url(../fonts/Fraunces_700Bold_Italic.woff2) format('woff2'); }

:root {
  --noche: #0B0A12;
  --fondo: #0C0B11;
  --tarjeta: #13111A;
  --tarjeta-2: #16151D;
  --tinta: #F7F4ED;
  --tinta-2: #CFC8BA;
  --gris: #ADA79A;
  --apagado: rgba(255, 255, 255, .38);
  --filo: rgba(255, 255, 255, .07);
  --borde: rgba(255, 255, 255, .08);
  --oro: #F5B942;
  --oro-claro: #FFD877;
  --oro-hondo: #E9A12E;
  --sobre-oro: #141219;
  --verde: #4FD3A0;
  --brasa: #E8524E;
  --chispa: #FFF6D6;

  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Plex', ui-monospace, 'SF Mono', Menlo, monospace;
  --serif: 'Fraunces', Georgia, serif;

  --salida: cubic-bezier(.22, 1, .36, 1);
  --salida-fuerte: cubic-bezier(.23, 1, .32, 1);
  --vaiven: cubic-bezier(.37, 0, .63, 1);
  --t-toque: 120ms;
  --t-corto: 200ms;
  --t-medio: 300ms;
  --t-largo: 520ms;

  --margen: 24px;
  --ancho: 1120px;
  --radio: 24px;
  --radio-fila: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--noche);
  color: var(--tinta-2);
  font: 500 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, canvas, video { display: block; }
/* Solo las imágenes de contenido se encogen con su caja. Los dibujos (el sol,
   sus anillos, la estrella, el mar) miden a propósito más que su caja o nacen
   en una de ancho 0: con `max-width` se recortaban y el estallido caía en una
   esquina (E1, 22/10). */
img, video { max-width: 100%; }
.sol img { max-width: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 8px; }
::selection { background: rgba(245, 185, 66, .32); color: var(--tinta); }
/* Lo que se esconde con `hidden` se esconde aunque su regla le dé otro display. */
[hidden]:not(.cajon) { display: none !important; }
.solo-lector { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--oro); color: var(--sobre-oro); padding: 10px 16px; border-radius: 12px; font-weight: 800; transition: top var(--t-corto) var(--salida); }
.saltar:focus { top: 12px; }

/* ── La aurora (FondoAurora) ─────────────────────────────────────────────── */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(180deg, #0A0911 0%, #0D0B15 60%, #120E17 100%); pointer-events: none; }
.aurora .estrellas { position: absolute; inset: 0; width: 100%; height: 100%; }
.aurora .luz { position: absolute; border-radius: 50%; will-change: transform; animation: luz var(--d) var(--vaiven) infinite alternate; }
.aurora .luz.violeta { --d: 26s; width: 120vmax; height: 120vmax; left: calc(6% - 60vmax); top: calc(8% - 60vmax); background: radial-gradient(closest-side, rgba(110, 86, 232, .24), rgba(110, 86, 232, .108) 55%, rgba(110, 86, 232, 0)); }
.aurora .luz.azul { --d: 31s; width: 105vmax; height: 105vmax; left: calc(96% - 52.5vmax); top: calc(38% - 52.5vmax); background: radial-gradient(closest-side, rgba(46, 143, 214, .15), rgba(46, 143, 214, .068) 55%, rgba(46, 143, 214, 0)); animation-delay: -9s; }
.aurora .luz.oro { --d: 34s; width: 130vmax; height: 130vmax; left: calc(30% - 65vmax); top: calc(98% - 65vmax); background: radial-gradient(closest-side, rgba(245, 155, 66, .11), rgba(245, 155, 66, .05) 55%, rgba(245, 155, 66, 0)); animation-delay: -17s; }
@keyframes luz { from { transform: translate3d(-2.5%, -2%, 0) scale(1); } to { transform: translate3d(2.5%, 2%, 0) scale(1.08); } }
.aurora .velo { position: absolute; left: -40vw; top: 18vh; width: 180vw; height: 22vh; transform: rotate(-13deg); animation: velo 19s var(--vaiven) infinite alternate; opacity: .9; }
.aurora .velo i { position: absolute; inset: 0; border-radius: 50%; }
.aurora .velo i:first-child { background: radial-gradient(50% 50% at 42% 50%, rgba(63, 209, 176, .13), rgba(63, 209, 176, .05) 55%, transparent 100%); }
.aurora .velo i:last-child { background: radial-gradient(45% 50% at 64% 54%, rgba(122, 107, 240, .12), rgba(122, 107, 240, .045) 55%, transparent 100%); }
@keyframes velo { from { transform: rotate(-13deg) translate3d(-3%, 0, 0); } to { transform: rotate(-10deg) translate3d(3%, 2vh, 0); } }

/* ── Tipografía ──────────────────────────────────────────────────────────── */
.rotulo { font: 500 12px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--oro); margin: 0 0 14px; }
.rotulo.gris { color: var(--gris); }
.titular { font: 800 clamp(31px, 4.2vw, 50px)/1.08 var(--sans); letter-spacing: -.035em; color: var(--tinta); margin: 0; text-wrap: balance; }
.titular em { font-style: normal; color: var(--oro-claro); }
.grande em { font-family: var(--serif); font-style: italic; font-weight: 700; color: var(--oro-claro); letter-spacing: -.02em; }
.bajada { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; color: var(--tinta-2); margin: 18px 0 0; max-width: 34em; text-wrap: pretty; }
.nota { font-size: 14px; line-height: 1.55; color: var(--gris); }
.mono { font-family: var(--mono); }
.cifra { font-variant-numeric: tabular-nums; }

/* ── Disposición ─────────────────────────────────────────────────────────── */
.contenedor { width: min(var(--ancho), 100% - 2 * var(--margen)); margin-inline: auto; }
.seccion { padding: clamp(84px, 11vw, 150px) 0; position: relative; overflow-x: clip; }
/* Lo que está lejos no se pinta: cada sección solo se dibuja cuando se acerca a la
   vista. Medido con la CPU ×4: cada cuadro de la página tiene que recomponer lo que
   hay pintado en TODA la página, y con los bloques de la fase 4 eso encarecía todas
   las animaciones (el cierre del día pasó de 0 a 29 cuadros de más de 20 ms).
   Se enciende desde app.js con el alto real de cada sección (si no, los saltos de
   la barra calculan la posición con un alto inventado y caen en otro sitio). */
.lejos main > section { content-visibility: auto; }
.cabeza { max-width: 720px; }
.cabeza.centro { margin-inline: auto; text-align: center; }
.cabeza.centro .bajada { margin-inline: auto; }

/* ── Botones (BotonOnb) ──────────────────────────────────────────────────── */
.boton { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 28px; border-radius: 28px;
  font: 800 14px/1 var(--sans); letter-spacing: .11em; text-transform: uppercase; white-space: nowrap; overflow: hidden; user-select: none;
  transition: transform 160ms var(--salida-fuerte), box-shadow var(--t-corto) var(--salida), opacity var(--t-corto); }
.boton:active { transform: scale(.97); }
.boton.oro { color: var(--sobre-oro); background: linear-gradient(180deg, var(--oro-claro) 0%, var(--oro) 52%, var(--oro-hondo) 100%);
  box-shadow: 0 8px 18px rgba(245, 185, 66, .32), inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(160, 96, 10, .25); }
.boton.oro::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 55%); }
/* La banda de luz de BotonOnb: solo cruza al pulsar (620 ms, curva suave). */
.boton .banda { position: absolute; top: -20px; bottom: -20px; left: 0; width: 70px; z-index: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); transform: translateX(-200%) rotate(18deg); }
.boton.claro .banda { background: linear-gradient(90deg, rgba(240, 128, 80, 0), rgba(240, 128, 80, .34), rgba(240, 128, 80, 0)); }
.boton > *:not(.banda) { position: relative; z-index: 1; }
.boton.borde { color: var(--tinta); border: 1.5px solid rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .03); }
.boton.verde { color: #0B2A1F; background: linear-gradient(180deg, #8BEFC6, #4FD3A0 55%, #2DB585); box-shadow: 0 8px 18px rgba(79, 211, 160, .28), inset 0 1px 0 rgba(255, 255, 255, .45); }
.boton[disabled], .boton.apagado { opacity: .38; pointer-events: none; box-shadow: none; }
.boton[disabled]::after, .boton.apagado::after { animation: none; display: none; }
.boton .manzana { width: 18px; height: 18px; margin-top: -2px; flex: none; }
.boton.ancho { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .boton.oro:hover { box-shadow: 0 12px 28px rgba(245, 185, 66, .42), inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(160, 96, 10, .25); }
  .boton.borde:hover { background: rgba(255, 255, 255, .08); }
}
.enlace { color: var(--tinta); border-bottom: 1px solid rgba(255, 255, 255, .22); transition: border-color var(--t-corto); }
.enlace:hover { border-color: var(--oro); }
.enlace-oro { color: var(--oro-claro); font-weight: 700; }

/* ── La barra de arriba: una burbuja de cristal, como las de Apple ─────────
   Una cápsula que flota a 10 px del borde (pedido del usuario, 23/10): 54 de
   alto y radio 27, así que acaba a 64 px, donde acababa la barra de antes. Los
   botones de dentro son concéntricos con ella: la pastilla de oro (radio 16) y
   el botón del menú (radio 18) quedan a 11 y 9 px de su borde. El desenfoque
   está siempre puesto: fundirlo costaba cuadros de 50-80 ms con la CPU ×4 (fase 5).
   En el computador abraza lo que lleva; en el celular ocupa el ancho. */
.barra { position: fixed; z-index: 40; top: 10px; left: 0; right: 0; height: 54px; display: flex; justify-content: center; pointer-events: none; transition: opacity 420ms var(--salida); }
.barra .contenedor { pointer-events: auto; display: flex; align-items: center; gap: 10px; width: auto; max-width: calc(100% - 24px); height: 54px; margin: 0; padding: 0 11px 0 14px; border-radius: 27px;
  background: rgba(24, 22, 33, .46); backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .12), 0 14px 34px rgba(0, 0, 0, .34), 0 2px 6px rgba(0, 0, 0, .22);
  transition: background var(--t-medio); }
.barra.bajada-ya .contenedor { background: rgba(17, 16, 25, .7); }
.marca { display: flex; align-items: center; gap: 10px; font: 800 18px/1 var(--sans); letter-spacing: -.02em; color: var(--tinta); }
.marca img { width: 32px; height: 32px; border-radius: 9px; }
.menu { display: flex; gap: 24px; margin-left: 22px; }
.menu a { font-size: 14px; font-weight: 600; color: var(--gris); transition: color var(--t-corto); }
.menu a:hover { color: var(--tinta); }
.barra .derecha { margin-left: 26px; display: flex; align-items: center; gap: 10px; }
/* La pastilla de las rachas y el oro del Marcador de Inicio (Marcador.tsx,
   `pastilla`): 34 de alto, radio 17, la tarjeta #16151D con su filo, y la cifra
   en Manrope 800 de 15. Al pulsar se apaga a 0,75, como allí. */
.pastilla-sol { display: flex; align-items: center; gap: 5px; height: 34px; padding: 0 10px 0 5px; border-radius: 17px; background: #16151D; border: 1px solid rgba(255, 255, 255, .07);
  font: 800 15px/1 var(--sans); color: var(--tinta); white-space: nowrap; }
.pastilla-sol:active { opacity: .75; }
.pastilla-sol .mini { position: relative; width: 24px; height: 24px; flex: none; }
.pastilla-sol .mini svg { position: absolute; inset: 0; width: 24px; height: 24px; overflow: visible; }
.pastilla-sol .mini img { position: absolute; left: 5px; top: 5px; width: 14px; height: 14px; }
.pastilla-sol .de { color: #8B8579; }
/* La pastilla de oro de las cabeceras (aurora/Pantalla.tsx, `PastillaOro`). */
.pastilla-oro { display: inline-flex; align-items: center; justify-content: center; flex: none; height: 32px; padding: 0 14px; border-radius: 16px; background: var(--oro);
  font: 800 13px/17px var(--sans); color: var(--sobre-oro); white-space: nowrap; user-select: none; -webkit-tap-highlight-color: transparent; }
.pastilla-oro:active { transform: scale(.95); }
/* Los botones redondos de volver y cerrar (kit.tsx `atras`, piezas.tsx
   `BotonCerrar`): 36 × 36, el blanco a 0,08 y sus aspas de 13 × 2. */
.redondo { position: relative; flex: none; width: 36px; height: 36px; border-radius: 18px; background: rgba(255, 255, 255, .08); }
.redondo:active { opacity: .6; }
.redondo i { position: absolute; left: 50%; top: 50%; width: 13px; height: 2px; margin: -1px 0 0 -6.5px; border-radius: 1px; background: var(--tinta); }
.abrir-menu i:nth-child(1) { transform: translateY(-5px); }
.abrir-menu i:nth-child(3) { transform: translateY(5px); }
.cerrar-cajon i:nth-child(1) { transform: rotate(45deg); }
.cerrar-cajon i:nth-child(2) { transform: rotate(-45deg); }
.abrir-menu { display: none; }
@media (max-width: 899px) {
  .menu { display: none; }
  .abrir-menu { display: block; }
  .barra .contenedor { width: calc(100% - 24px); padding-left: 9px; }
  .barra .derecha { margin-left: auto; }
}
/* En el celular cabe todo a un toque si el logo se queda sin el nombre. */
@media (max-width: 419px) { .barra .nombre-marca { display: none; } }

/* El menú del celular: el cajón del perfil (ProfileDrawer.tsx). Un panel de
   min(86 %, 380) que entra desde la izquierda sobre un velo negro que llega a
   0,6; dentro, su aurora «noche» y lo de dentro en cascada. El movimiento lo
   escribe el JS en cada cuadro. */
.cajon { position: fixed; inset: 0; z-index: 60; }
/* Cerrado sigue montado pero invisible (fuera del árbol de accesibilidad y sin
   toques): así el primer cuadro al abrirlo no tiene que maquetarlo de cero. */
.cajon[hidden] { display: block; visibility: hidden; pointer-events: none; }
.con-cajon, .con-cajon body { overflow: hidden; }
.panel-cajon:focus { outline: none; }
.velo-cajon { position: absolute; inset: 0; background: #000; opacity: 0; }
.panel-cajon { position: absolute; top: 0; bottom: 0; left: 0; width: min(86vw, 380px); background: #0B0A12; border-right: 1px solid rgba(255, 255, 255, .08); overflow: hidden; transform: translateX(-100%); will-change: transform; }
/* AuroraTarjeta tono «noche» (en un lienzo de 100 × 100 que se estira) y su velo. */
.aurora-noche, .grupo-aurora::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.aurora-noche { z-index: 0;
  background:
    radial-gradient(60% 14% at 45% 12%, rgba(63, 209, 176, .09), rgba(63, 209, 176, .03) 60%, rgba(63, 209, 176, 0)),
    radial-gradient(70% 50% at 40% 110%, rgba(245, 155, 66, .1), rgba(245, 155, 66, .04) 55%, rgba(245, 155, 66, 0)),
    radial-gradient(60% 70% at 100% 60%, rgba(46, 143, 214, .16), rgba(46, 143, 214, .064) 55%, rgba(46, 143, 214, 0)),
    radial-gradient(70% 80% at 8% 0%, rgba(110, 86, 232, .26), rgba(110, 86, 232, .104) 55%, rgba(110, 86, 232, 0)); }
.dentro-cajon { position: relative; z-index: 1; height: 100%; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(18px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom)); }
.cabeza-cajon { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
/* GrupoAurora con FilaEmoji (aurora/Pantalla.tsx): radio 24, la tarjeta
   #13111A con filo, filas de 14 × 16 con el emoji de 40 y la flecha. */
.grupo-aurora { position: relative; isolation: isolate; display: block; overflow: hidden; border-radius: 24px; background: #13111A; border: 1px solid rgba(255, 255, 255, .08); }
.grupo-aurora::before {
  background:
    radial-gradient(60% 14% at 45% 12%, rgba(63, 209, 176, .09), rgba(63, 209, 176, .03) 60%, rgba(63, 209, 176, 0)),
    radial-gradient(60% 55% at 85% 110%, rgba(232, 82, 126, .1), rgba(232, 82, 126, .04) 55%, rgba(232, 82, 126, 0)),
    radial-gradient(55% 60% at 100% 20%, rgba(63, 209, 176, .12), rgba(63, 209, 176, .048) 55%, rgba(63, 209, 176, 0)),
    radial-gradient(75% 85% at 0% 0%, rgba(122, 98, 240, .3), rgba(122, 98, 240, .12) 55%, rgba(122, 98, 240, 0)); }
.fila-emoji { display: flex; align-items: center; gap: 14px; padding: 14px 16px; font: 700 16px/21px var(--sans); color: var(--tinta); -webkit-tap-highlight-color: transparent; }
.fila-emoji + .fila-emoji { border-top: 1px solid rgba(255, 255, 255, .07); }
.fila-emoji:active { background: rgba(255, 255, 255, .05); }
.fila-emoji img { width: 40px; height: 40px; flex: none; }
.fila-emoji span { flex: 1; }
.fila-emoji svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--gris); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.entra-cajon + .entra-cajon { margin-top: 12px; }
/* La luz que vuela a la pastilla: el punto blanco de los interludios
   (Interludio.tsx), con el vuelo de las recompensas (motion/Vuelo.tsx). */
.vuelo { position: fixed; left: 0; top: 0; z-index: 70; width: 16px; height: 16px; border-radius: 50%; pointer-events: none; opacity: 0; background: #fff; box-shadow: 0 0 8px rgba(255, 246, 214, .9); }

/* ── El sol, por piezas (NaceSol + SolHeroe) ─────────────────────────────── */
.sol { position: relative; width: var(--tam, 220px); aspect-ratio: 1; -webkit-tap-highlight-color: transparent; }
.sol img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.sol .movil, .sol .respira, .sol .cuerpo, .sol .forma, .sol .rueda-sol { position: absolute; inset: 0; }
.sol .cuerpo, .sol .forma, .sol .rayo, .sol .movil { will-change: transform; }
.sol .rayo { position: absolute; }
.sol .aleteo { position: absolute; inset: 0; }
.sol .halo { position: absolute; left: -45%; top: -45%; width: 190%; height: 190%; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 216, 115, .55), rgba(245, 165, 58, .18) 45%, rgba(245, 165, 58, 0)); }
.sol .crema { position: absolute; inset: 0; opacity: 0; background: #FFF1C2; -webkit-mask: url(../img/sol/sol-nucleo.webp) center / 100% 100% no-repeat; mask: url(../img/sol/sol-nucleo.webp) center / 100% 100% no-repeat; }
.sol .aro-suelo { position: absolute; left: 10%; bottom: -8%; width: 80%; height: 16%; border-radius: 50%; border: 2.5px solid #FFE29A; opacity: 0; pointer-events: none; }
.sol .centro-salto { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.sol .anillo-salto { position: absolute; left: calc(var(--tam, 220px) * -1.2); top: calc(var(--tam, 220px) * -1.2); width: calc(var(--tam, 220px) * 2.4); height: calc(var(--tam, 220px) * 2.4); overflow: visible; }
.sol .anillo-salto circle { opacity: 0; }
.sol .estrella { position: absolute; left: 0; top: 0; width: calc(var(--tam, 220px) * 1.2); height: calc(var(--tam, 220px) * 1.2); opacity: 0; }
.sol .cuadraditos i, .sol .brasas i { position: absolute; left: 0; top: 0; border-radius: 1.5px; opacity: 0; }
.sol .brasas { position: absolute; left: 50%; top: 80%; width: 0; height: 0; pointer-events: none; }
.sol .brasas i { border-radius: 50%; }
/* Vivo: respira cada 2,6 s, la rueda da una vuelta cada 48 s y cada rayo aletea a su ritmo. */
.sol.respirando .respira { animation: respira 2600ms cubic-bezier(.37, 0, .63, 1) infinite alternate; }
.sol.respirando .halo { animation: halo-vivo 2600ms cubic-bezier(.37, 0, .63, 1) infinite alternate; }
.sol.respirando .rueda-sol { animation: rueda 48s linear infinite; }
.sol.respirando .aleteo { animation: aleteo 1700ms linear infinite; }
.sol.pausado .respira, .sol.pausado .halo, .sol.pausado .rueda-sol, .sol.pausado .aleteo { animation-play-state: paused; }
@keyframes respira { from { transform: scale(1); } to { transform: scale(1.035); } }
@keyframes halo-vivo { from { opacity: .55; transform: scale(1); } to { opacity: .8; transform: scale(1.06); } }
@keyframes rueda { to { transform: rotate(360deg); } }
@keyframes aleteo { 0% { transform: scale(1); } 25% { transform: scale(1.055); } 50% { transform: scale(1); } 75% { transform: scale(.945); } 100% { transform: scale(1); } }
.anillo-sol { position: absolute; inset: -24%; width: 148%; height: 148%; overflow: visible; pointer-events: none; opacity: 0; }
.anillo-sol .tramo { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 2.4; stroke-linecap: round; transition: stroke 600ms var(--salida); }
.anillo-sol .tramo.encendido { stroke: var(--oro-anillo); }
.anillo-sol .luz-tramo { fill: none; stroke: var(--chispa); stroke-width: 3; stroke-linecap: round; opacity: 0; }

/* ── Portada (Portada.tsx), sobre la misma noche que el resto de la página ──
   (el cielo del amanecer lo quitó el usuario el 23/10: el fondo es oscuro en
   toda la web; el único amanecer es el del pico final). */
.portada { min-height: 100svh; display: grid; place-items: center; text-align: center; position: relative; isolation: isolate; overflow: hidden;
  /* El sol y los espacios también se ajustan a la ALTURA de la ventana, para que
     el botón del App Store se vea sin bajar en un iPhone con las barras de Safari
     a la vista y en un portátil. Lo que sobresale el anillo (0,24 del sol) se
     cuenta en los márgenes. */
  --tam-p: clamp(108px, 18svh, 136px);
  padding: calc(64px + var(--tam-p) * .24 + clamp(6px, 1.6svh, 14px)) 0 84px; }
@media (min-width: 700px) { .portada { --tam-p: clamp(96px, min(19vw, 18svh), 184px); padding-top: calc(64px + var(--tam-p) * .24 + clamp(8px, 2.4svh, 28px)); } }
.portada .contenido { display: flex; flex-direction: column; align-items: center; }
.portada .sol { --tam: var(--tam-p); margin-bottom: calc(var(--tam-p) * .24 + clamp(8px, 1.6svh, 16px)); }
@media (min-width: 700px) { .portada .sol { margin-bottom: calc(var(--tam-p) * .24 + clamp(10px, 2.2svh, 24px)); } }
.portada .grande { font-size: clamp(32px, 5.2svh, 38px); }
@media (min-width: 700px) { .portada .grande { font-size: clamp(36px, min(6.6vw, 8.8svh), 82px); } }
.grande { font: 700 clamp(38px, 6.6vw, 82px)/1.04 var(--serif); letter-spacing: -.03em; color: #fff; margin: 0; text-wrap: balance; max-width: 12.5ch; }
.grande em { color: var(--oro-claro); }
/* «de por vida» en su propia línea: 4 líneas en el celular y 3 desde 700 px. */
.portada .grande em { display: block; }
@media (min-width: 700px) { .portada .grande { max-width: none; } }
.grande .palabra { display: inline-block; white-space: nowrap; }
.grande .ranura { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .01em .08em; margin-bottom: -.08em; }
.grande .letra { display: inline-block; }
.portada .bajada { margin: clamp(12px, 2.2svh, 22px) auto 0; max-width: 31em; color: rgba(255, 255, 255, .86); }
@media (min-width: 700px) { .portada .bajada { max-width: 37em; } }
/* En el celular la bajada también se ajusta a la altura, para que el botón del App Store se vea sin bajar. */
@media (max-width: 699px) { .portada .bajada { font-size: clamp(15px, 2.45svh, 17px); line-height: 1.5; } }
/* El rótulo del juego encima del título y, debajo de los botones, la línea que
   lo explica, con la letra de la línea de la portada de la app (Portada.tsx):
   14 px y el blanco a 0,9. Va debajo para que el botón del App Store se vea sin
   bajar. */
.portada .kicker-portada { margin: 0 0 clamp(10px, 1.8svh, 18px); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px; }
.portada .acciones { margin-top: clamp(18px, 3.4svh, 34px); }
@media (min-width: 700px) and (max-height: 660px) { .portada .bajada { font-size: 17px; line-height: 1.5; } }
.linea-portada { margin: 22px auto 0; max-width: 32em; font: 500 14px/1.55 var(--sans); color: rgba(255, 255, 255, .9); text-wrap: pretty; }
.boton.claro { color: var(--sobre-oro); background: #fff; box-shadow: 0 10px 26px rgba(20, 10, 30, .32), inset 0 -2px 0 rgba(0, 0, 0, .08); }
.boton.borde-claro { color: #F7F4ED; border: 1.5px solid rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
@media (hover: hover) and (pointer: fine) { .boton.claro:hover { box-shadow: 0 14px 34px rgba(20, 10, 30, .4); } .boton.borde-claro:hover { background: rgba(255, 255, 255, .14); } }
/* La entrada por tramos. Sin JavaScript se ve todo de una vez. */
.js .portada .grande .letra { transform: translateY(105%); }
.js .portada .lema, .js .portada .kicker-portada { opacity: 0; transform: translateY(9px); }
.js .portada .linea-portada { opacity: 0; }
.js .portada .acciones { opacity: 0; transform: translateY(12px); }
.js .portada .contenido { transform: translateY(7.5vh); }
.js .portada .sol { visibility: hidden; }
.js .portada.lista .sol { visibility: visible; }
.portada.rotulo-dentro .grande .letra { transform: none; transition: transform 240ms cubic-bezier(.33, 1, .68, 1); transition-delay: calc(var(--i) * 18ms); }
.portada.lema-dentro .lema, .portada.lema-dentro .kicker-portada { opacity: 1; transform: none; transition: opacity 140ms cubic-bezier(.45, 0, .55, 1), transform 360ms cubic-bezier(.33, 1, .68, 1); }
.portada.linea-dentro .linea-portada { opacity: 1; transition: opacity 160ms cubic-bezier(.45, 0, .55, 1); }
.portada.sube .contenido { transform: none; transition: transform 560ms cubic-bezier(.65, 0, .35, 1); }
.portada.todo-dentro .acciones { opacity: 1; transform: none; transition: opacity 320ms cubic-bezier(.33, 1, .68, 1), transform 320ms cubic-bezier(.33, 1, .68, 1); }
.portada.sin-espera * { transition-duration: 0ms !important; transition-delay: 0ms !important; }
.nota a { color: var(--tinta-2); border-bottom: 1px solid rgba(255, 255, 255, .2); }
.portada .bajar { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); width: 26px; height: 40px; border-radius: 13px; border: 1.5px solid rgba(255, 255, 255, .2); }
.portada .bajar::after { content: ''; position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--oro); animation: bajar 1.8s var(--salida) infinite; }
@keyframes bajar { 0% { opacity: 0; transform: translateY(-3px); } 30% { opacity: 1; } 80%, 100% { opacity: 0; transform: translateY(12px); } }

/* «Toca para empezar»: la portada espera a oscuras, sin barra y sin poder bajar.
   El halo es el del sol (`.sol .halo`) y respira con su ritmo (2,6 s, vaivén);
   la nota es la de SplashIntro.tsx (Manrope y el marfil #FFF8EE) a 17 px. */
.esperando, .esperando body { overflow: hidden; }
.esperando .barra, .esperando .portada .bajar { opacity: 0; pointer-events: none; }
.portada .bajar { transition: opacity 420ms var(--salida); }
.empezar { position: fixed; inset: 0; z-index: 80; width: 100%; height: 100%; touch-action: none; opacity: 0; -webkit-tap-highlight-color: transparent;
  transition: opacity 500ms cubic-bezier(.5, 1, .89, 1); }
.empezar.visible { opacity: 1; }
.empezar.fuera { opacity: 0; pointer-events: none; transition: opacity 260ms cubic-bezier(.45, 0, .55, 1); }
.empezar:focus { outline: none; }
.halo-empezar { position: absolute; left: var(--x, 50%); top: var(--y, 40%); width: calc(var(--tam, 136px) * 1.9); height: calc(var(--tam, 136px) * 1.9); margin: calc(var(--tam, 136px) * -.95) 0 0 calc(var(--tam, 136px) * -.95); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 216, 115, .55), rgba(245, 165, 58, .18) 45%, rgba(245, 165, 58, 0)); animation: halo-empezar 2600ms cubic-bezier(.37, 0, .63, 1) infinite alternate; }
.txt-empezar { position: absolute; left: 16px; right: 16px; top: calc(var(--y, 40%) + var(--tam, 136px) * 1.02); text-align: center; font: 600 17px/1.3 var(--sans); letter-spacing: .4px; color: #FFF8EE;
  animation: txt-empezar 2600ms cubic-bezier(.37, 0, .63, 1) infinite alternate; }
.empezar:focus-visible .txt-empezar { text-decoration: underline; text-decoration-color: var(--oro); text-underline-offset: 6px; }
@keyframes halo-empezar { from { opacity: .4; transform: scale(.88); } to { opacity: .85; transform: scale(1.04); } }
@keyframes txt-empezar { from { opacity: .5; } to { opacity: .95; } }

/* Aparición escalonada (lo que entra al cargar o al asomar). */
.js .entra { opacity: 0; transform: translateY(14px); }
.entra.dentro { opacity: 1; transform: none; transition: opacity 700ms var(--salida), transform 900ms var(--salida); transition-delay: var(--retraso, 0ms); }
/* Solo con JavaScript: sin él, todo se ve desde el principio (E10). */
.js .asoma { opacity: 0; transform: translateY(22px); transition: opacity 800ms var(--salida), transform 1000ms var(--salida); transition-delay: var(--retraso, 0ms); }
.js .asoma.visto { opacity: 1; transform: none; }

/* ── Misiones ────────────────────────────────────────────────────────────── */
/* Lo que vuela fuera de una escena (papeles, rombos, chispas) se corta en los lados de la pantalla: si no, a 360 px
   un papel del «Calculando» dejaba la página 13 px más ancha y se podía mover de lado. */
.mision { padding: clamp(56px, 8vw, 96px) 0; overflow-x: clip; }
/* En el computador, con la ventana baja, menos aire arriba y abajo: así la escena de cada
   misión cabe entera al llegar a ella desde la barra (23/10). */
@media (min-width: 700px) { .mision { padding-block: clamp(32px, min(8vw, 6svh), 96px); } }
.mision .contenedor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(32px, 6vw, 96px); align-items: center; }
@media (min-width: 700px) and (max-width: 1000px) { .mision .contenedor { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 40px; } }
.mision.invertida .contenedor > .texto { order: 2; }
.mision .texto .titular { font-size: clamp(30px, 3.6vw, 44px); }
.mision .estado { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--apagado); }
.mision .estado i { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .18); display: grid; place-items: center; transition: background 400ms var(--salida), border-color 400ms; }
.mision .estado i svg { width: 12px; height: 12px; opacity: 0; transform: scale(.6); transition: opacity 300ms, transform 400ms var(--salida); }
.mision .estado .si, .mision.hecha .estado .no { display: none; }
.mision.hecha .estado .si { display: inline; }
.mision.hecha .estado { color: var(--verde); }
.mision.hecha .estado i { background: var(--verde); border-color: var(--verde); }
.mision.hecha .estado i svg { opacity: 1; transform: none; }
@media (max-width: 699px) {
  .mision .contenedor { grid-template-columns: 1fr; gap: 28px; }
  .mision.invertida .contenedor > .texto { order: 0; }
  .mision .texto { text-align: left; }
}

/* ── Las pantallas del onboarding (kit.tsx y Progreso.tsx), a escala 1:1 ─────
   Sin caja, sobre la aurora, como en la app: la barra de arriba (el botón de
   volver de 36 y la pista de 4), el titular de 27/33, las filas de radio 16, el
   check de 22 y el botón de 56. El alto de la escena lo pone el JS: el de la
   pregunta más alta, para que el botón no se mueva de una a otra. */
.onb { position: relative; width: 100%; max-width: 400px; margin-inline: auto; height: var(--alto-onb, 518px); font-family: var(--sans); color: var(--tinta); }
/* El alto sigue a la pregunta que se ve (el botón, justo debajo de las opciones). */
.onb:not(.libre) { transition: height 360ms var(--salida); }
.cabeza-onb { position: absolute; left: 0; right: 0; top: 0; height: 36px; display: flex; align-items: center; gap: 14px; transition: opacity 220ms cubic-bezier(.45, 0, .55, 1); }
.hueco-atras { width: 36px; height: 36px; flex: none; }
.atras-onb { width: 36px; height: 36px; border-radius: 18px; background: rgba(255, 255, 255, .08); display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
.atras-onb[hidden] { display: none; }
.atras-onb:active { opacity: .6; }
.atras-onb i { width: 8px; height: 8px; margin-left: 3px; border-left: 2px solid var(--tinta); border-bottom: 2px solid var(--tinta); transform: rotate(45deg); }
.pista-onb { position: relative; flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.pista-onb i { position: absolute; inset: 0; border-radius: 2px; background: var(--oro); transform: translateX(-100%); transition: transform 520ms var(--salida); }
.pasos-onb { position: absolute; left: 0; right: 0; top: 62px; bottom: 68px; }
/* Mientras desliza (de la última pregunta a «Calculando»), en el computador lo
   que entra por la derecha se recorta en el borde de la columna; en el celular
   llega desde el borde de la pantalla, como en la app. */
@media (min-width: 700px) { .onb.onb-desliza { overflow-x: clip; } }
/* Los pasos que no se ven, ocultos. El que se ha preparado en reposo («Calculando»,
   la cifra) ya está `listo`: visible a opacidad 0, con sus estilos calculados,
   para que mostrarlo en el toque sea solo cambiar su opacidad. */
.paso-onb { position: absolute; left: 0; right: 0; top: 0; visibility: hidden; pointer-events: none; opacity: 0; }
.paso-onb.dentro, .paso-onb.saliendo, .paso-onb.listo { visibility: visible; }
.paso-onb.dentro { pointer-events: auto; }
/* «Calculando» y la cifra van en su propia capa y, preparados, ya pintados (a una
   opacidad que no se ve): al deslizar, el navegador no tiene que pintarlos de cero. */
.paso-onb.pantalla { will-change: transform, opacity; }
.paso-onb.listo { opacity: .002; }
/* «Calculando» y el resultado ocupan la escena entera, sin barra ni botón. */
.paso-onb.pantalla { top: -62px; bottom: -68px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* iOS coloca esta letra 2 pt más arriba en su línea de 33 que Chrome y WebKit
   (medido contra la build 18): `top` lo sube sin mover nada más. */
.titulo-onb { position: relative; top: -2px; margin: 0 0 24px; font: 800 27px/33px var(--sans); letter-spacing: -.6px; color: var(--tinta); }
.filas-onb { display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; }
/* FilaOnb: al pulsar se ilumina (no se encoge); elegida, fondo #2A2416 y borde de oro en 180 ms. */
/* Los bordes de 1,5 van como sombra interior: Chrome redondea un borde de 1,5 px a 1
   y la fila medía 54 en vez de 55. */
.fila-onb { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 16.5px 15.5px; border-radius: 16px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .07); background: #16151D;
  text-align: left; -webkit-tap-highlight-color: transparent; transition: background-color 180ms cubic-bezier(.45, 0, .55, 1), box-shadow 180ms cubic-bezier(.45, 0, .55, 1); }
.fila-onb::after { content: ''; position: absolute; inset: 1.5px; border-radius: 15px; background: rgba(255, 255, 255, .06); opacity: 0; pointer-events: none; transition: opacity 200ms cubic-bezier(.45, 0, .55, 1); }
.fila-onb.pulsada::after { opacity: 1; transition-duration: 70ms; }
.fila-onb[aria-checked="true"] { background: #2A2416; box-shadow: inset 0 0 0 1.5px var(--oro); }
.fila-onb .txt-fila { flex: 1; font: 600 16px/21px var(--sans); color: var(--tinta); }
.hueco-emo { position: relative; width: 36px; height: 36px; flex: none; }
/* La marca: 22 × 22, redonda (radio 11) o, en las de varias respuestas, cuadrada (radio 7). */
.marca-onb { position: relative; width: 22px; height: 22px; flex: none; border-radius: 11px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2); }
.marca-onb.cuadrada { border-radius: 7px; }
[aria-checked="true"] > .marca-onb { box-shadow: none; }
.marca-onb b { position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: inherit; background: var(--oro); display: grid; place-items: center; opacity: 0; transform: scale(.3); }
.marca-onb b::before { content: ''; width: 9px; height: 5px; margin-bottom: 2px; border-left: 2.2px solid #141219; border-bottom: 2.2px solid #141219; transform: rotate(-45deg); box-sizing: border-box; }
/* Los emojis vivos (EmojiVivo.tsx): el gris debajo, el color encima, la silueta crema y el brillo de su color. */
.emo-vivo { position: absolute; left: 0; top: 0; }
.emo-vivo .halo-emo { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0; }
.emo-vivo .cuerpo-emo { position: absolute; inset: 0; }
.emo-vivo img, .emo-vivo .crema-emo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
/* La silueta crema: la imagen de color como máscara (va en línea, para que la ruta sea la de la página). */
.emo-vivo .crema-emo { opacity: 0; background: #FFF1C2; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.emo-vivo .chispa-emo { position: absolute; left: 50%; top: 50%; opacity: 0; pointer-events: none; }
.emo-vivo .chispa-emo svg, .rombo svg { display: block; width: 100%; height: 100%; }
/* El reloj de las franjas (Reactivas.tsx): 196 × 196, fijo encima de las filas. */
.reloj-franjas { --s: 1; position: relative; width: 196px; height: 196px; scale: var(--s); margin: calc(-10px - 98px * (1 - var(--s))) auto calc(12px - 98px * (1 - var(--s))); }
/* En pantallas bajas el reloj se encoge, y en las muy bajas se queda fuera, para
   que la barra, la pregunta, sus cinco filas y el botón quepan a la vez (23/10). */
@media (max-height: 820px) { .reloj-franjas { --s: .8; } }
@media (max-height: 760px) { .reloj-franjas { --s: .66; } }
@media (max-height: 690px) { .reloj-franjas { display: none; } }
.reloj-franjas svg { position: absolute; left: 0; top: 0; overflow: visible; }
.reloj-franjas .hora-reloj { position: absolute; width: 28px; text-align: center; font: 400 10px/16px var(--mono); color: rgba(255, 255, 255, .4); }
.reloj-franjas .centro-reloj { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.reloj-franjas .veinticuatro { font: 400 13px/16px var(--mono); color: #8B8579; }
.reloj-franjas .caja-emo { position: relative; width: 46px; height: 46px; }
/* El pie y el botón (PieOnb y BotonOnb). Apagado, el blanco a 0,08 y el texto a
   0,38; al encenderse, la sombra y el relleno se funden en 160 ms (se apagan en
   220). Al pulsar se hunde a 0,97 con el muelle `pulsar`. */
.pie-onb { position: absolute; left: 0; right: 0; bottom: 0; padding-top: 12px; transition: opacity 220ms cubic-bezier(.45, 0, .55, 1); }
.boton-onb { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 56px; border-radius: 28px; background: rgba(255, 255, 255, .08);
  font: 800 14px/1 var(--sans); letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255, 255, 255, .38); white-space: nowrap; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform 480ms linear(0, 0.044, 0.156, 0.304, 0.466, 0.624, 0.766, 0.884, 0.977, 1.043, 1.086, 1.108, 1.115, 1.110, 1.097, 1.080, 1.062, 1.043, 1.027, 1.013, 1.003, 0.995, 0.990, 0.988, 0.987, 0.987, 0.989, 0.991, 0.993, 0.995, 0.997, 0.998, 1.000, 1.001, 1.001, 1.001, 1.002, 1.001, 1.001, 1.001, 1); }
.boton-onb[disabled] { cursor: default; }
.boton-onb .flecha { font: 400 17px/1 -apple-system, system-ui, sans-serif; letter-spacing: 0; margin-top: -1px; }
.boton-onb .sombra-onb, .boton-onb .relleno-onb { position: absolute; inset: 0; border-radius: 28px; pointer-events: none; opacity: 0; transition: opacity 220ms cubic-bezier(.45, 0, .55, 1); }
.boton-onb .sombra-onb { z-index: -2; background: var(--oro); box-shadow: 0 8px 18px rgba(245, 185, 66, .32); }
.boton-onb .relleno-onb { z-index: -1; overflow: hidden; background: linear-gradient(105deg, #FFD877 19%, #F5B942 50%, #E9A12E 81%); }
.boton-onb .relleno-onb::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 52%; background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0)); }
.boton-onb.on { color: #141219; }
.boton-onb.on .sombra-onb, .boton-onb.on .relleno-onb { opacity: 1; transition-duration: 160ms; }
.boton-onb.on:active { transform: scale(.97); }
.boton-onb.borde .sombra-onb { display: none; }
.boton-onb.borde .relleno-onb { background: none; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .26); }
.boton-onb.borde .relleno-onb::after { display: none; }
.boton-onb.borde.on { color: var(--tinta); }
@media (hover: hover) and (pointer: fine) { .boton-onb.on:hover .sombra-onb { box-shadow: 0 12px 26px rgba(245, 185, 66, .42); } .boton-onb.borde.on:hover .relleno-onb { background: rgba(255, 255, 255, .05); } }

/* «Calculando» (Calculando.tsx): el escenario de 280, la píldora de 70 × 28,
   el titular de 25/31, las frases en 46 y las filas en 118. */
.calc { position: relative; width: 280px; height: 280px; flex: none; }
.calc > * { position: absolute; }
.calc .disco-calc { left: 74px; top: 74px; width: 132px; height: 132px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 216, 115, .26), rgba(245, 165, 58, .07) 70%, rgba(245, 165, 58, 0)); }
.calc svg.anillo-calc { left: 0; top: 0; width: 280px; height: 280px; overflow: visible; }
.calc .onda-calc { left: 54px; top: 54px; width: 172px; height: 172px; border-radius: 50%; border: 2px solid rgba(255, 226, 154, .9); opacity: 0; }
.calc .estrella-calc { opacity: 0; }
.calc .sol-calc { left: 84px; top: 84px; width: 112px; height: 112px; }
.calc .rueda-calc, .calc .nucleo-calc { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.calc .rayo-calc { position: absolute; }
.calc .rayo-calc img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.calc .punto-calc { border-radius: 50%; opacity: .55; }
.calc .trozo, .calc .chispa-calc, .calc .papel, .calc .icono-calc { left: 0; top: 0; opacity: 0; }
.calc .icono-calc, .calc .icono-calc img { width: 40px; height: 40px; max-width: none; }
.pildora-calc { position: relative; margin-top: -40px; width: 70px; height: 28px; border-radius: 14px; background: #16151D; border: 1px solid rgba(255, 255, 255, .07); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pildora-calc .cifras-pct { display: flex; align-items: center; }
.pildora-calc .col-pct { width: 9.6px; height: 18px; overflow: hidden; }
.pildora-calc .col-pct span, .pildora-calc .por-pct { display: block; width: 9.6px; height: 18px; font: 800 14px/18px var(--sans); color: var(--oro); text-align: center; font-variant-numeric: tabular-nums; }
.pildora-calc .por-pct { width: auto; }
.pildora-calc .listo-pct { position: absolute; inset: 0; background: var(--oro); display: grid; place-items: center; font: 800 14px/1 var(--sans); color: #1A1206; font-variant-numeric: tabular-nums; opacity: 0; }
.titulo-calc { margin: 20px 0 0; font: 800 25px/31px var(--sans); letter-spacing: -.5px; color: var(--tinta); text-align: center; }
.frases-calc { position: relative; align-self: stretch; height: 46px; margin-top: 10px; }
.frase-calc { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; align-items: center; opacity: 0; }
.frase-calc .linea-calc { display: flex; align-items: center; white-space: nowrap; font: 600 14.5px/20px var(--sans); color: var(--tinta-2); }
.frase-calc .bolita { width: 6px; height: 6px; border-radius: 3px; margin-right: 7px; flex: none; }
.frase-calc .detalle-calc { margin-top: 2px; white-space: nowrap; font: 500 12.5px/18px var(--sans); color: var(--gris); }
.filas-calc { align-self: stretch; height: 118px; margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.franjas-calc { display: flex; gap: 8px; }
.franja-calc { width: 32px; height: 32px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .05); display: grid; place-items: center; opacity: 0; }
.franja-calc.marcada { background: rgba(245, 185, 66, .14); border-color: var(--oro); }
.franja-calc img { width: 20px; height: 20px; }

/* Las horas (HorasTuyas, Plan90.tsx): la cifra de 50 en oro que rueda como una
   tragaperras, la unidad de 22 y el rótulo de 15,5/21. */
.horas-onb { display: flex; flex-direction: column; align-items: center; opacity: 0; }
.fila-horas { position: relative; display: flex; align-items: flex-end; gap: 8px; }
.cifra-horas { display: flex; }
.rueda-horas { height: 54px; overflow: hidden; }
.rueda-horas .tira-horas { display: flex; flex-direction: column; }
.rueda-horas span { display: block; height: 54px; font: 800 50px/54px var(--sans); letter-spacing: -1.6px; color: var(--oro); font-variant-numeric: tabular-nums; }
.unidad-horas { margin-bottom: 9px; font: 800 22px/1.2 var(--sans); letter-spacing: -.4px; color: var(--oro); }
.chispas-horas { position: absolute; left: -20px; top: -14px; width: 140px; height: 80px; pointer-events: none; }
.rotulo-horas { margin: 2px 0 0; font: 600 15.5px/21px var(--sans); color: var(--tinta); text-align: center; }

/* ── El marco «libre»: la escena mide lo suyo y el botón va justo debajo ──── */
.onb.libre { height: auto; }
.onb.libre .cabeza-onb { position: relative; }
.onb.libre .pie-onb { position: relative; padding-top: 12px; }
.titulo-onb.centro { text-align: center; margin-bottom: 14px; }
/* Los gráficos y el sol de los gráficos (SolGrafico.tsx), que usa el blog. */
.graf { position: relative; }
.graf svg { position: absolute; left: 0; top: 0; overflow: visible; }
.graf .marca-graf { position: absolute; font: 500 9.5px/12px var(--mono); letter-spacing: .8px; white-space: nowrap; }
.pie-graf { margin: 10px 0 0; font: 600 13px/18px var(--sans); color: var(--tinta-2); text-align: center; opacity: 0; }
.sol-graf { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; }
.sol-graf > *, .sol-graf .forma-sg > * { position: absolute; }
.sol-graf .forma-sg, .sol-graf .rueda-sg { inset: 0; }
.sol-graf .halo-sg { border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, rgba(255, 216, 115, .6), rgba(245, 165, 58, .18) 45%, rgba(245, 165, 58, 0)); }
.sol-graf img, .sol-graf .crema-sg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.sol-graf .rayo-sg { position: absolute; opacity: 0; }
.sol-graf .rayo-sg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sol-graf .crema-sg { opacity: 0; background: #FFF1C2; -webkit-mask: url(../img/sol/sol-nucleo.webp) center / 100% 100% no-repeat; mask: url(../img/sol/sol-nucleo.webp) center / 100% 100% no-repeat; }
.graf .rotulo-graf { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 3px; opacity: 0; }
.graf .rotulo-graf b { font: 600 10.5px/14px var(--sans); color: var(--tinta); text-align: center; }
.graf .rotulo-graf small { font: 500 9.5px/12px var(--mono); letter-spacing: .8px; text-align: center; }
/* ── Misión 2: el check-in de la mañana (app/checkin.tsx y components/checkin/*)
   a escala 1:1, sin caja, sobre la aurora: la barra de 3, la fecha en mono de 11,
   el titular de 27/33 con la palabra clave en oro, las escenas de 196 (la ola,
   236), las filas con su cara y el botón de 56. Todo lleva el sufijo `-ck`. ── */
.ck { position: relative; width: 100%; max-width: 400px; height: auto; margin-inline: auto; font-family: var(--sans); color: var(--tinta); }
.ck [hidden] { display: none !important; }

/* Cabecera: volver, la barra de las páginas y su hueco; debajo, la fecha y la franja. */
.cabeza-ck { display: flex; align-items: center; gap: 14px; height: 36px; }
.hueco-ck { width: 36px; height: 36px; flex: none; }
.barra-ck { position: relative; flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .09); overflow: hidden; }
.barra-ck i { display: block; width: 0; height: 3px; border-radius: 2px; background: var(--oro); transition: width 520ms var(--salida); }
.fecha-ck { margin: 16px 0 0; font: 500 11px/15px var(--mono); letter-spacing: 1.2px; color: #ADA79A; }

/* Las páginas: la que sale se queda encima, quieta, mientras se funde. */
.paginas-ck { position: relative; padding-top: 16px; }
.pagina-ck.saliendo-ck { position: absolute; left: 0; right: 0; top: 16px; pointer-events: none; }
/* La siguiente, preparada en reposo: maquetada y pintada a una opacidad que no se ve. */
.pagina-ck.previa-pg-ck { position: absolute; left: 0; right: 0; top: 16px; opacity: .002; pointer-events: none; }
.titulo-clave-ck { margin-bottom: 6px; }
.titulo-ck { margin: 0; font: 800 27px/33px var(--sans); letter-spacing: -.6px; color: var(--tinta); }
.titulo-ck em { font-style: normal; color: var(--oro); }
.sub-ck { margin: 6px 0 0; font: 500 15px/21px var(--sans); color: #ADA79A; }
.marco-escena-ck { position: relative; }
.marco-escena-ck > .escena-ck { transform-origin: 0 0; }
.opciones-ck { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

/* La fila con su cara (FilaOnb con `cara`): 12 arriba y abajo, el título de 16/21 y la línea de 13/18. */
.fila-onb.fila-ck { padding: 13.5px 15.5px; scroll-margin-bottom: 96px; }
.escalon-ck { scroll-margin-bottom: 96px; }
.fila-ck .txt-ck { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.fila-ck .t-ck { font: 600 16px/21px var(--sans); color: var(--tinta); }
.fila-ck .s-ck { margin-top: 1px; font: 400 13px/18px var(--sans); color: #ADA79A; }
.cara-ck { position: relative; width: 36px; height: 36px; flex: none; }
.halo-cara-ck { position: absolute; left: -16px; top: -16px; width: 68px; height: 68px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 216, 115, .55), rgba(245, 165, 58, .2) 50%, rgba(245, 165, 58, 0)); }
.bote-cara-ck { position: absolute; inset: 0; }
.bote-cara-ck img, .crema-cara-ck { position: absolute; inset: 0; width: 36px; height: 36px; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.bote-cara-ck img.c { opacity: 0; }
.crema-cara-ck { opacity: 0; background: #FFF1C2; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

/* La escala del 1 al 10 y el aviso de las ganas altas. */
.escala-ck { display: flex; gap: 5px; margin-top: -6px; }
.escalon-ck { flex: 1; min-width: 0; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .07);
  font: 800 12.5px/1 var(--sans); color: #ADA79A; -webkit-tap-highlight-color: transparent; }
.escalon-ck.on { box-shadow: none; color: #141219; }
.aviso-ck { margin: 12px 0 0; font: 600 13.5px/19px var(--sans); color: #F28A86; }

/* El botón, justo debajo; si la página no cabe en la ventana, se queda abajo,
   fijo, como el pie de la app, mientras lo de arriba pasa por debajo. */
.pie-ck { position: sticky; z-index: 3; bottom: max(14px, env(safe-area-inset-bottom)); padding-top: 12px; }
/* Fijo encima de las filas, una veladura sin bordes detrás para que el botón
   apagado no se lea mezclado con el texto de debajo. */
.pie-ck::before { content: ''; position: absolute; z-index: -1; left: -16px; right: -16px; top: -26px; bottom: calc(-1 * max(14px, env(safe-area-inset-bottom))); pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(11, 10, 18, 0), rgba(11, 10, 18, .9) 38px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  transition: opacity 200ms cubic-bezier(.45, 0, .55, 1); }
.pie-ck.pegado-ck::before { opacity: 1; }
.tope-pie-ck { display: block; height: 1px; }

/* ── Las escenas ─────────────────────────────────────────────────────────── */
.escena-ck { position: relative; pointer-events: none; }
.escena-ck > *, .escena-ck i, .escena-ck img, .escena-ck span { position: absolute; }
.escena-ck img { max-width: none; user-select: none; -webkit-user-drag: none; }
.capa-chispas-ck { left: 0; top: 0; width: 0; height: 0; }
.capa-chispas-ck i { left: 0; top: 0; }
.capa-chispas-ck i svg { display: block; width: 100%; height: 100%; }

/* El sol vivo (SolVivo.tsx): halo, rayos sueltos, el canto de la moneda y el núcleo. */
.solv-ck { position: absolute; left: 0; top: 0; }
.solv-ck .halo-solv-ck { border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, rgba(255, 216, 115, .6), rgba(245, 165, 58, .18) 45%, rgba(245, 165, 58, 0)); }
.solv-ck .forma-solv-ck, .solv-ck .rueda-solv-ck { position: absolute; inset: 0; }
.solv-ck .rayo-solv-ck { position: absolute; }
.solv-ck .rayo-solv-ck img, .solv-ck .nucleo-solv-ck, .solv-ck .crema-solv-ck { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; user-select: none; -webkit-user-drag: none; }
.solv-ck .rayo-solv-ck img.c, .solv-ck .nucleo-solv-ck.c { opacity: 0; }
.solv-ck .canto-solv-ck { position: absolute; border-radius: 50%; border-style: solid; border-color: #FFC94A; background: rgba(255, 201, 74, .18); opacity: 0; box-sizing: border-box; }
.solv-ck .crema-solv-ck { opacity: 0; background: #FFF1C2; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

/* Solo lo que se mueve sin parar va en su propia capa (unas diez por escena): así
   el halo, el alba y las estrellas, que son degradados grandes, no se vuelven a
   pintar en cada cuadro. */
.solv-ck .halo-solv-ck, .solv-ck .forma-solv-ck { will-change: transform, opacity; }
.solv-ck .rueda-solv-ck { will-change: transform; }
.sueno-ck .capa-estrellas-ck, .sueno-ck .alba-ck { will-change: opacity; }
.sueno-ck .zeta-ck, .animo-ck .nube-ck { will-change: transform, opacity; }

/* El sueño: estrellas en tres capas, la luna, la estrella fugaz, el alba, el sol
   cortado por el horizonte, las zetas y la línea del horizonte. */
.sueno-ck .noche-ck, .sueno-ck .capa-estrellas-ck { position: absolute; inset: 0; }
.sueno-ck .capa-estrellas-ck i { border-radius: 50%; background: #FFF9E6; }
.sueno-ck .estela-ck { left: 0; top: 0; width: 74px; height: 2.4px; border-radius: 2px; opacity: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 248, 220, .95)); }
.sueno-ck .alba-ck { border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 194, 122, .55), rgba(238, 106, 77, .18) 45%, rgba(238, 106, 77, 0)); }
.sueno-ck .corte-ck { left: 0; top: 0; overflow: hidden; }
.sueno-ck .zeta-ck { font-weight: 800; color: #E2DAFF; opacity: 0; }
.sueno-ck .horizonte-ck { left: -12px; right: -12px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, rgba(255, 214, 150, 0), rgba(255, 214, 150, .9), rgba(255, 214, 150, 0)); }

/* El ánimo: el sol entre nubes, con lluvia en «Muy mal». */
.animo-ck .lluvia-ck { inset: 0; }
.animo-ck .lluvia-ck i { width: 1.8px; border-radius: 1px; background: rgba(196, 212, 240, .7); opacity: 0; }
.animo-ck .nube-ck { left: 0; top: 0; opacity: 0; }
.animo-ck .nube-ck img { left: 0; top: 0; width: 100%; height: 100%; }

/* Las ganas: el agua de borde a borde (en el computador se funde a los lados, como
   la ola de la misión 3), las gotas desde el 7 y la cifra que rueda. */
.ganas-ck { overflow: hidden; }
.ganas-ck .agua-ck { inset: 0; overflow: hidden; }
.ganas-ck .capa-ola-ck { position: absolute; left: 0; top: 0; will-change: transform; }
.ganas-ck .capa-ola-ck svg { display: block; }
@media (min-width: 700px) { .ganas-ck .agua-ck { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); } }
.ganas-ck .salpica-ck { left: 0; top: 0; background: rgba(255, 236, 230, .9); opacity: 0; }
.ganas-ck .cifra-ck { top: 2px; opacity: 0; }
.ganas-ck .cifra-ck > * { position: relative; }
.ganas-ck .cifras-ck { display: flex; }
.ganas-ck .col-ck { position: relative; overflow: hidden; }
.ganas-ck .tira-ck { position: relative; display: flex; flex-direction: column; }
.ganas-ck .tira-ck span { position: relative; display: block; width: 34px; text-align: center; font: 800 54px/62px var(--sans); letter-spacing: -2px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.ganas-ck .cifra-ck small { display: block; margin-top: -4px; font: 500 10.5px/1.3 var(--mono); letter-spacing: 1.1px; color: rgba(247, 244, 237, .6); white-space: nowrap; }

/* ── La carga (la escena de «Calculando», con el icono en su círculo blanco) ── */
.carga-ck { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 540px; padding: 8px 0; cursor: pointer; }
.carga-ck.saliendo-ck { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
.calc .icono-calc.circulo-ck { border-radius: 20px; background: #FFFFFF; display: grid; place-items: center; }
.calc .icono-calc.circulo-ck svg { width: 20px; height: 20px; }

/* ── El resultado (Resultado.tsx) ──────────────────────────────────────── */
.resultado-ck { position: relative; }
/* Preparado durante la carga: maquetado y pintado, sin verse ni ocupar sitio. */
.resultado-ck.previa-ck { position: absolute; left: 0; right: 0; top: 0; visibility: hidden; pointer-events: none; }
.res-ck { padding-top: 18px; }
.kicker-res-ck { margin: 0; font: 500 11px/15px var(--mono); letter-spacing: 1.4px; color: #ADA79A; text-align: center; }
.escenario-ck { position: relative; margin: 8px auto 0; }
.escenario-ck > * { position: absolute; }
.escenario-ck .anillo-dia-ck { left: 0; top: 0; }
.escenario-ck .estrella-ck { opacity: 0; }
.escenario-ck .aro-suelo-ck { border: 5px solid #FFE29A; border-radius: 50%; box-sizing: border-box; opacity: 0; }
.escenario-ck .destellos-ck, .escenario-ck .destellos-ck i { left: 0; top: 0; }
.escenario-ck .destellos-ck { width: 0; height: 0; }
.escenario-ck .destellos-ck i { position: absolute; opacity: 0; }
.escenario-ck .punto-ck { width: 0; height: 0; }
.escenario-ck .punto-ck i { position: absolute; left: 0; top: 0; border-radius: 1.5px; opacity: 0; }
.escenario-ck .nube-lenta-ck { left: 0; top: 0; max-width: none; opacity: 0; pointer-events: none; }
.escenario-ck .nube-lenta-ck.a { width: 150px; height: 150px; }
.escenario-ck .nube-lenta-ck.b { width: 118px; height: 118px; }
.titular-res-ck { margin: 6px 0 0; font: 800 32px/38px var(--sans); letter-spacing: -.8px; color: var(--tinta); text-align: center; }
.titular-res-ck .oro { color: var(--oro); }
.titular-res-ck .tinta2 { color: #CFC8BA; }
.linea-res-ck { margin: 8px 0 0; font: 500 15.5px/22px var(--sans); color: #CFC8BA; text-align: center; }
.accion-ck { margin-top: 18px; }
.pastilla-accion-ck { position: relative; display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px 16px 13px 14px; border-radius: 20px; background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); overflow: hidden; text-align: left; -webkit-tap-highlight-color: transparent; }
.pastilla-accion-ck .banda-accion-ck { position: absolute; top: -30px; bottom: -30px; left: 0; width: 110px; pointer-events: none; background: linear-gradient(90deg, rgba(255, 236, 190, 0), rgba(255, 236, 190, .13), rgba(255, 236, 190, 0)); }
.pastilla-accion-ck .emoji-accion-ck { width: 40px; height: 40px; flex: none; max-width: none; }
.pastilla-accion-ck .txt-accion-ck { flex: 1; display: flex; flex-direction: column; }
.pastilla-accion-ck b { font: 700 15.5px/20px var(--sans); color: var(--tinta); }
.pastilla-accion-ck .txt-accion-ck span { margin-top: 2px; font: 500 13px/18px var(--sans); color: #ADA79A; }
.pastilla-accion-ck svg { flex: none; }
.dia-ck { margin-top: 20px; text-align: center; }
.dia-txt-ck { margin: 0; font: 800 16px/22px var(--sans); color: var(--tinta); }
.dia-sub-ck { margin: 3px 0 0; font: 500 13.5px/19px var(--sans); color: #ADA79A; }
.kicker2-ck { margin: 0 0 10px; font: 500 10.5px/14px var(--mono); letter-spacing: 1.4px; color: #ADA79A; }
.fila-estado-ck { margin-bottom: 14px; opacity: 0; }
.arriba-estado-ck { display: flex; justify-content: space-between; margin-bottom: 7px; }
.arriba-estado-ck span:first-child { font: 600 14.5px/20px var(--sans); color: var(--tinta); }
.arriba-estado-ck span:last-child { font: 600 14px/20px var(--sans); color: #CFC8BA; }
.pista-estado-ck { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.pista-estado-ck i { display: block; width: 3%; height: 8px; border-radius: 4px; }

/* La semana del ánimo (MoodWeek, sin tarjeta). */
.cabeza-semana-ck { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.cabeza-semana-ck p { margin: 0; font: 700 15.5px/22px var(--sans); letter-spacing: -.2px; color: var(--tinta); }
.leyenda-ck { display: flex; gap: 9px; }
.leyenda-ck span { display: inline-flex; align-items: center; gap: 4px; font: 600 10.5px/18px var(--sans); color: #8B8579; }
.leyenda-ck i { width: 7px; height: 7px; border-radius: 4px; }
.nota-semana-ck { margin: 0 0 14px; font: 400 13px/19px var(--sans); color: #8B8579; }
.grafico-semana-ck { position: relative; height: 104px; }
.grafico-semana-ck svg { position: absolute; left: 0; top: 0; }
.columnas-ck { position: relative; display: flex; gap: 7px; align-items: flex-end; height: 104px; }
.columna-ck { flex: 1; display: flex; flex-direction: column; align-items: center; }
.pila-ck { width: 100%; height: 84px; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; }
.pila-ck i { display: block; border-radius: 999px; }
.pila-ck i.vacia { height: 8px; background: #201E29; box-shadow: inset 0 0 0 1.5px #262430; }
.columna-ck span { margin-top: 8px; font: 500 11px/15px var(--sans); color: #8B8579; }
.columna-ck span.hoy { font-weight: 800; color: var(--tinta); }
.fin-ck { margin-top: 18px; text-align: center; }
.entra-ck { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .barra-ck i { transition: none; }
  .entra-ck, .fila-estado-ck { opacity: 1; }
}

/* La técnica de la ola: OlaPrueba sobre el mar en calma de EscenaGanas, sin
   caja, sobre la aurora como en la app. Las medidas son las suyas, en px. */
.ola-prueba { position: relative; }
.kicker-ola { margin: 0; font: 500 10.5px/1.3 var(--mono); letter-spacing: 1.6px; color: var(--oro); text-transform: uppercase; }
.titulo-ola { margin: 6px 0 8px; font: 800 21px/27px var(--sans); letter-spacing: -.4px; color: var(--tinta); }
.escena-ola { position: relative; }
.escena-ola .mar { position: relative; overflow: hidden; pointer-events: none; }
.escena-ola .agua { position: absolute; inset: 0; overflow: hidden; }
.escena-ola .capa { position: absolute; left: 0; top: 0; will-change: transform; }
.escena-ola .capa svg { display: block; }
/* Con dos columnas el agua no llega al borde de la pantalla: se funde a los lados. */
@media (min-width: 700px) { .escena-ola .agua { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); } }
.cifra-ola { position: absolute; top: 2px; }
.cifras-viva { display: flex; }
.col-viva { overflow: hidden; }
.col-viva .tira, .cuenta .tira { display: flex; flex-direction: column; will-change: transform; }
.col-viva .tira span { display: block; width: 34px; text-align: center; font: 800 54px/62px var(--sans); letter-spacing: -2px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.cifra-ola small { display: block; margin-top: -4px; font: 500 10.5px/1.3 var(--mono); letter-spacing: 1.1px; color: rgba(247, 244, 237, .6); white-space: nowrap; }
.centro-ola { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.centro-ola > * { position: absolute; }
.aro-ola { width: 150px; height: 150px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .32); background: rgba(12, 11, 17, .42); opacity: 0; }
.dentro-ola { width: 150px; display: flex; flex-direction: column; align-items: center; opacity: 0; }
.cuenta { display: flex; justify-content: center; height: 40px; font: 800 34px/40px var(--sans); letter-spacing: -1px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.cuenta .col-c { display: block; width: 21px; height: 40px; overflow: hidden; }
.cuenta .tira span { display: block; text-align: center; }
.rotulos-aliento { position: relative; height: 20px; margin-top: 2px; align-self: stretch; }
.rotulos-aliento span { position: absolute; left: 0; right: 0; text-align: center; font: 700 13.5px/20px var(--sans); color: var(--tinta-2); opacity: 0; }
.check-ola { width: 66px; height: 66px; border-radius: 50%; background: var(--verde); display: grid; place-items: center; box-shadow: 0 0 18px rgba(79, 211, 160, .6); opacity: 0; transform: scale(.001); }
.check-ola svg { width: 32px; height: 32px; }
.aro-check { width: 66px; height: 66px; border-radius: 50%; border: 2.5px solid #9BF0CC; opacity: 0; }
.centro-ola .chispas-ola { left: 50%; top: 50%; width: 0; height: 0; }
.textos-ola { position: relative; min-height: 140px; margin-top: 14px; }
.textos-ola .bloque { position: absolute; inset: 0; pointer-events: none; }
.textos-ola .explica { margin: 0; font: 400 14px/20px var(--sans); color: rgba(247, 244, 237, .74); }
.textos-ola .frases p { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; text-align: center; font: 700 16px/22px var(--sans); color: var(--tinta); opacity: 0; }
.textos-ola .hecha { opacity: 0; text-align: center; }
.textos-ola .sola { margin: 0 0 6px; font: 800 18px/24px var(--sans); color: var(--verde); }
.empezar-ola { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 0 18px; height: 42px; border-radius: 21px; border: 1.5px solid var(--oro); color: var(--oro);
  font: 800 13px/1 var(--sans); letter-spacing: 1.4px; text-transform: uppercase; transition: transform 160ms var(--salida-fuerte), background 200ms; }
.empezar-ola span { font-size: 11px; letter-spacing: 0; }
.otra-vez { margin-top: 8px; padding: 4px 10px; font: 700 13px/1.3 var(--sans); color: var(--oro); }
.empezar-ola:active, .otra-vez:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .empezar-ola:hover { background: rgba(245, 185, 66, .1); } }
/* Solo recibe toques el bloque que se ve entero (E2). */
#escena-ola[data-fase="quieta"] .quieta, #escena-ola[data-fase="hecha"] .hecha { pointer-events: auto; }

/* ── Los emojis por piezas: el 📅 (ruta/Calendario.tsx), que usa Programa ──── */
.pieza { position: relative; display: block; flex: none; }
.pieza .movil-pieza, .pieza .forma-pieza { position: absolute; inset: 0; }
.pieza img, .pieza .crema-pieza { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.pieza img.c { opacity: 0; }
.pieza .crema-pieza, .sombra-esq i { opacity: 0; background: #FFF1C2; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.pieza .aro-pieza { position: absolute; box-sizing: border-box; border: 2.5px solid #FFE29A; opacity: 0; }
.chispas-pieza { position: absolute; inset: 0; pointer-events: none; }
.chispas-pieza i { position: absolute; left: 50%; top: 50%; opacity: 0; }
.chispas-pieza svg { display: block; width: 100%; height: 100%; }
.casilla-cal { position: absolute; background: #9C99A4; }
.casilla-cal b { position: absolute; inset: 0; border-radius: inherit; background: #F5B942; opacity: 0; }
/* Hecho: el oro con el reflejo de arriba (blanco a 0,32 en el 38 % de la casilla). */
.casilla-cal em { position: absolute; inset: 0; border-radius: inherit; background: #F5B942; overflow: hidden; opacity: 0; }
.casilla-cal em s { display: block; background: rgba(255, 255, 255, .32); }
.esq-cal, .sombra-esq { position: absolute; }
.sombra-esq { opacity: 0; }
.sombra-esq i { position: absolute; inset: 0; opacity: 1; background: #2B2147; }
/* Lo que sigue vivo al terminar: la casilla de hoy late y a la esquina le da el
   aire cada 4,4 s (en la app, `vivo`). */
@keyframes late-hoy { 0%, 50% { animation-timing-function: cubic-bezier(.37, 0, .63, 1); } 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes aire-esq {
  0%, 81.448% { transform: none; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  87.330% { transform: scale(1.0675) rotate(.75deg); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  95.475% { transform: scale(.991) rotate(-.1deg); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  100% { transform: none; }
}
@keyframes aire-sombra {
  0%, 81.448% { opacity: 0; transform: none; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  87.330% { opacity: .048; transform: translate(-.105px, -.105px) scale(1.0729) rotate(.75deg); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  95.475%, 100% { opacity: 0; transform: none; }
}
.casilla-cal b.late { animation: late-hoy 1520ms infinite; }
.esq-cal.aire { animation: aire-esq 4420ms infinite; }
.sombra-esq.aire { animation: aire-sombra 4420ms infinite; }
/* ── Misión 4: «El color manda» (games/Color.tsx dentro de GameShell) ───────
   Una pantalla del alto de la ventana (menos la barra), con tope de 640: la
   portada, la partida y el final caben enteros bajo la barra, como en la app.
   Sin caja, sobre la aurora. Las medidas son las de la app en puntos. */
.juego-cm, .onb.juego-cm { position: relative; width: 100%; max-width: 400px; margin-inline: auto; height: 640px; height: clamp(470px, calc(100vh - 108px), 640px); height: clamp(470px, calc(100svh - 108px), 640px);
  font-family: var(--sans); color: var(--tinta); text-align: left; }
/* En dos columnas la escena va junto al texto, dentro del relleno de la sección: se descuenta. */
@media (min-width: 700px) { .juego-cm, .onb.juego-cm { height: clamp(470px, calc(100svh - 88px - clamp(32px, min(8vw, 6svh), 96px)), 640px); } }
.fase-cm { position: absolute; inset: 0; display: flex; flex-direction: column; isolation: isolate; }
.cuerpo-cm { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: visible; scrollbar-width: none; text-align: center; }
.cuerpo-cm::-webkit-scrollbar { display: none; }
.pie-cm { flex: none; padding-top: 8px; }
.entra-cm { opacity: 0; }

/* La portada (juegos/Portada.tsx): escena de 176, qué entrena, el nombre, cómo se juega y tus marcas. */
/* Sin el oro ni el XP de la app, el botón va pegado a las marcas y todo queda centrado en la escena. */
.portada-cm { justify-content: center; }
.portada-cm .cuerpo-cm { flex: 0 1 auto; padding: 4px 0 20px; }
.escena-cm { height: 176px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; }
.kicker-cm { margin: 14px 0 0; font: 500 11px/15px var(--mono); letter-spacing: 1.4px; }
.titulo-cm { margin: 6px 0 0; font: 800 32px/38px var(--sans); letter-spacing: -.9px; color: var(--tinta); }
.como-cm { margin: 12px 0 0; font: 400 16px/24px var(--sans); color: var(--tinta-2); }
.duracion-cm { margin: 10px 0 0; font: 400 11.5px/15px var(--mono); color: var(--gris); }
.bloque-cm { margin-top: 28px; text-align: left; }
.cabeza-cm { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rotulo-cm { margin: 0; font: 500 10.5px/14px var(--mono); letter-spacing: 1.3px; color: var(--gris); }
.cuenta-marcas-cm { font: 600 13px/18px var(--sans); color: var(--tinta-2); }

/* La paleta por piezas (juegos/Protagonista.tsx): lo vivo, en CSS. */
.paleta-cm .giro-pal, .paleta-cm .vivo-pal, .paleta-cm .vivo-mancha { position: absolute; inset: 0; }
.paleta-cm .trozo-pal, .paleta-cm .mancha-pal { position: absolute; }
.paleta-cm .aro-cm { position: absolute; box-sizing: border-box; border: 2px solid rgba(255, 241, 194, .85); opacity: 0; }
.paleta-cm.viva .vivo-pal { animation: vive-pal-cm 3600ms linear infinite; }
.paleta-cm.viva .vivo-mancha { animation: bote-mancha-cm 3600ms linear infinite; }
.paleta-cm.viva .mancha-pal:nth-child(3) .vivo-mancha { animation-delay: 420ms; }
.paleta-cm.viva .mancha-pal:nth-child(4) .vivo-mancha { animation-delay: 840ms; }
.paleta-cm.viva .mancha-pal:nth-child(5) .vivo-mancha { animation-delay: 1260ms; }
.juego-cm.fuera-cm .viva .vivo-pal, .juego-cm.fuera-cm .viva .vivo-mancha { animation-play-state: paused; }
/* sen(2π·v/3600)·1,6°: un cuarto de seno en cada tramo. */
@keyframes vive-pal-cm {
  0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.39, .575, .565, 1); }
  25% { transform: rotate(1.6deg); animation-timing-function: cubic-bezier(.47, 0, .745, .715); }
  50% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.39, .575, .565, 1); }
  75% { transform: rotate(-1.6deg); animation-timing-function: cubic-bezier(.47, 0, .745, .715); }
  100% { transform: rotate(0deg); }
}
/* 1 + 0,08·sen(πu) entre los 500 y los 1020 ms de cada vuelta. */
@keyframes bote-mancha-cm {
  0%, 13.889% { transform: scale(1); animation-timing-function: cubic-bezier(.39, .575, .565, 1); }
  21.111% { transform: scale(1.08); animation-timing-function: cubic-bezier(.47, 0, .745, .715); }
  28.333%, 100% { transform: scale(1); }
}

/* La escalera de las tres marcas (juegos/Escalera.tsx). */
.fila-pin-cm { position: relative; height: 22px; margin-bottom: 2px; }
.pin-cm { position: absolute; left: 0; top: 0; height: 20px; padding: 0 7px; border-radius: 10px; background: rgba(255, 255, 255, .1); display: flex; align-items: center; white-space: nowrap; }
.pin-txt-cm { font: 500 10px/16px var(--mono); color: var(--gris); white-space: pre; }
.cifra-pin-cm { font: 800 11.5px var(--sans); color: var(--tinta); }
.zona-esc-cm { position: relative; height: 48px; padding-top: 7px; }
.pista-esc-cm { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.pista-esc-cm i { display: block; height: 8px; border-radius: 4px; transform-origin: left center; transform: scaleX(0); }
.marca-esc-cm { position: absolute; top: 0; width: 22px; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.punto-esc-cm { position: relative; box-sizing: border-box; width: 22px; height: 22px; border-radius: 11px; background: #1B1925; border: 2px solid rgba(255, 255, 255, .28); }
.ya-esc-cm { position: absolute; inset: 0; border-radius: 11px; background: var(--verde); display: grid; place-items: center; opacity: 0; }
.ya-esc-cm svg { width: 12px; height: 12px; }
.valor-esc-cm { margin-top: 5px; font: 500 10.5px/14px var(--mono); color: var(--gris); }
.chispas-esc-cm { position: absolute; left: -29px; top: -29px; width: 80px; height: 80px; pointer-events: none; }

/* Las cifras que ruedan (onboarding/CifraRueda.tsx): cada tira con su alto escrito. */
.viva-cm { display: inline-flex; }
.col-viva-cm { display: block; flex: none; overflow: hidden; }
.tira-viva-cm, .tira-rueda-cm { display: block; }
.tira-viva-cm span, .tira-rueda-cm span { display: block; text-align: center; font-variant-numeric: tabular-nums; }
.cifra-rueda-cm { display: inline-flex; }
.rueda-cm { display: block; overflow: hidden; }

/* El botón de cerrar (mision/piezas.tsx): 36, blanco a 0,08 y el aspa de 13. */
.arriba-cm { flex: none; position: relative; z-index: 2; height: 40px; display: flex; align-items: center; }
.cerrar-cm { position: relative; width: 36px; height: 36px; border-radius: 18px; background: rgba(255, 255, 255, .08); -webkit-tap-highlight-color: transparent; }
.cerrar-cm i { position: absolute; left: 11.5px; top: 17px; width: 13px; height: 2px; border-radius: 1px; background: var(--tinta); transform: rotate(45deg); }
.cerrar-cm i + i { transform: rotate(-45deg); }
.cerrar-cm:active { opacity: .6; }

/* La partida (GameShell.tsx, juegos/Marcador.tsx y games/Color.tsx). */
.marcador-cm { flex: none; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; margin: -30px 0 14px; pointer-events: none; }
.puntos-cm { display: flex; justify-content: center; }
.cifra-puntos-cm { font: 800 46px var(--sans); letter-spacing: -1px; color: var(--tinta); }
.bajo-cm { display: flex; align-items: center; gap: 8px; height: 26px; margin-top: 2px; }
.meta-cm { font: 500 10.5px/14px var(--mono); letter-spacing: 1.2px; color: var(--gris); white-space: nowrap; }
/* «N SEGUIDOS»: invisible ocupa su sitio, como en la app (la meta queda a su izquierda). */
.seguidos-cm { height: 24px; padding: 0 10px; border-radius: 12px; border: 1.2px solid; display: inline-flex; align-items: center; background: rgba(12, 11, 17, .6);
  font: 800 10.5px/1 var(--sans); letter-spacing: 1.2px; white-space: nowrap; opacity: 0; }
.tiempo-cm { flex: none; display: flex; align-items: center; gap: 12px; }
.pista-t-cm { flex: 1; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.pista-t-cm i { display: block; height: 8px; border-radius: 4px; background: #FF8FAB; transform-origin: left center; }
.segundos-cm { min-width: 26px; text-align: right; font: 800 17px/22px var(--sans); color: var(--tinta); font-variant-numeric: tabular-nums; }
.area-cm { flex: 1 1 auto; min-height: 0; position: relative; display: flex; flex-direction: column; margin-top: 14px; }
.zona-cm { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.palabra-cm { font: 800 56px/66px var(--sans); letter-spacing: -1.5px; white-space: nowrap; opacity: 0; }
.rejilla-cm { flex: none; display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 10px; }
.partida-cm:not(.jugando) .zona-cm, .partida-cm:not(.jugando) .rejilla-cm { visibility: hidden; }
.celda-cm { width: 48.5%; }
.color-cm { position: relative; width: 100%; height: 64px; border-radius: 18px; border: 1.8px solid; background: #15131C; display: flex; align-items: center; justify-content: center; gap: 9px; overflow: hidden;
  font: 700 15.5px/1 var(--sans); letter-spacing: .4px; color: #FFFFFF; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; }
.color-cm:active { opacity: .8; }
.luz-cm { position: absolute; inset: 0; border-radius: 16px; opacity: 0; pointer-events: none; }
.punto-cm { position: relative; width: 9px; height: 9px; border-radius: 4.5px; flex: none; }
.color-cm span { position: relative; }
.aviso-cm { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: center; pointer-events: none; }
.aviso-cm span { height: 34px; padding: 0 16px; border-radius: 17px; border: 1.5px solid; background: #100E17; display: inline-flex; align-items: center; font: 800 13px/1 var(--sans); letter-spacing: 1.4px; opacity: 0; }
/* 3, 2, 1: cada número entra grande y se asienta, con su onda. */
.cuenta-cm { position: absolute; inset: 0; pointer-events: none; }
.paso-cuenta-cm { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.onda-cuenta-cm { position: absolute; width: 170px; height: 170px; border-radius: 85px; border: 3px solid; opacity: 0; visibility: hidden; }
.paso-cuenta-cm span { position: absolute; font: 800 104px/120px var(--sans); letter-spacing: -3px; opacity: 0; visibility: hidden; }
.paso-cuenta-cm span.ya-cm { font-size: 72px; line-height: 86px; letter-spacing: -1.5px; }
.capa-cm { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.volador-cm { position: absolute; left: 0; top: 0; width: 60px; height: 32px; display: flex; align-items: center; justify-content: center; opacity: 0; }
.volador-cm b { font: 800 22px/28px var(--sans); text-shadow: 0 0 10px currentColor; white-space: nowrap; }

/* El final (juegos/Final.tsx). El tinte y el fondo del sello se funden en los
   bordes: la escena no tiene caja. */
.final-cm { justify-content: center; }
.final-cm .cuerpo-cm { flex: 0 1 auto; padding: 48px 0 8px; }
.final-cm .arriba-cm { position: absolute; left: 0; right: 0; top: 0; }
.final-cm .kicker-cm { margin: 0; }
.final-cm .pie-cm { padding-top: 10px; }
.escena-final-cm { height: 128px; margin-top: 4px; display: flex; align-items: flex-end; justify-content: center; }
.rotulo-puntos-cm { margin: 12px 0 0; font: 500 10.5px/14px var(--mono); letter-spacing: 1.4px; color: var(--gris); }
.caja-puntos-cm { position: relative; display: inline-block; }
.late-cm { display: inline-block; }
.cifra-final-cm { font: 800 76px/86px var(--sans); letter-spacing: -2.5px; }
.ondas-cm { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.ondas-cm i { position: absolute; left: -130px; top: -130px; width: 260px; height: 260px; border-radius: 50%; border-style: solid; opacity: 0; visibility: hidden; }
.bloque-veredicto-cm { margin-top: 4px; }
.veredicto-cm { margin: 0; font: 800 24px/30px var(--sans); letter-spacing: -.5px; color: var(--tinta); }
.linea-cm { margin: 6px 0 0; font: 400 15px/22px var(--sans); color: var(--tinta-2); }
.marcas-cm { margin-top: 22px; text-align: left; }
.ultimas-cm { margin-top: 26px; text-align: left; }
.filas-ultimas-cm { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.fila-ultima-cm { display: flex; align-items: center; gap: 10px; }
.cifra-ultima-cm { width: 30px; font: 800 13px/18px var(--sans); color: var(--gris); font-variant-numeric: tabular-nums; }
.pista-ultima-cm { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.pista-ultima-cm i { display: block; height: 6px; border-radius: 3px; transform-origin: left center; transform: scaleX(0); }
.tinte-cm { position: absolute; z-index: -1; top: -25%; bottom: 0; left: -45%; right: -45%; pointer-events: none; opacity: 0; visibility: hidden; }
.sello-cm { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.sello-cm i { position: absolute; left: -30%; right: -30%; top: -20%; bottom: -20%; background: radial-gradient(closest-side, #0C0B11 62%, rgba(12, 11, 17, 0)); opacity: 0; visibility: hidden; }
.sello-cm span { position: relative; font: 800 44px/52px var(--sans); letter-spacing: -1.2px; color: var(--tinta); white-space: nowrap; opacity: 0; visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .paleta-cm .vivo-pal, .paleta-cm .vivo-mancha { animation: none !important; }
}

/* ── Misión 5: el cofre (cofre/AbrirCofre.tsx y CofreArte.tsx), a 220 px ──── */
.cofre-onb { position: relative; display: flex; flex-direction: column; align-items: center; }
.rotulo-cofre { display: grid; place-items: center; height: 30px; margin-bottom: 10px; }
.rotulo-cofre span { grid-area: 1 / 1; font: 800 20px/1 var(--sans); letter-spacing: 1.6px; text-align: center; }
.rotulo-cofre span + span { opacity: 0; }
.zona-cofre { position: relative; display: block; flex: none; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.zona-cofre:focus-visible { outline: 2px solid var(--oro); outline-offset: 6px; border-radius: 24px; }
.zona-cofre[aria-disabled="true"] { cursor: default; }
.zona-cofre > * { pointer-events: none; }
.sombra-cofre { position: absolute; background: #000; border-radius: 999px; }
.sombra-cofre { opacity: .5; }
.aro-cofre { position: absolute; left: 0; top: 0; overflow: visible; }
.arte-cofre { position: absolute; left: 0; top: 0; }
.halo-cofre { position: absolute; inset: 0; opacity: 0; }
.flota-cofre, .grupo-cofre, .rareza-cofre { position: absolute; inset: 0; }
.rareza-cofre + .rareza-cofre { opacity: 0; }
.rareza-cofre img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; user-select: none; -webkit-user-drag: none; }
.boca-cofre { position: absolute; overflow: hidden; background: linear-gradient(#FFF6D0, #FFC24A); opacity: 0; }
.haz-cofre { position: absolute; left: 0; width: 100%; overflow: hidden; transform-origin: 50% 100%; opacity: 0; }
.haz-cofre i { position: absolute; left: 0; top: 0; border-radius: 50%; background: radial-gradient(ellipse 50% 80% at 50% 80%, rgba(255, 246, 208, .95) 0%, rgba(255, 216, 119, .55) 35%, rgba(255, 184, 74, 0) 100%); }
.destellos-cofre { position: absolute; inset: 0; }
.destellos-cofre i { position: absolute; color: #E8C766; opacity: 0; animation: titila 1.6s linear infinite; }
.destellos-cofre svg, .lluvia-cofre svg { display: block; width: 100%; height: 100%; }
/* Los destellos titilan en 1,6 s (opacidad sin(πf), giro 60f, escala 0,4 + 0,6·sin), uno cada 0,37 s. */
@keyframes titila {
  0% { opacity: 0; transform: rotate(0deg) scale(.4); }
  12.5% { opacity: .383; transform: rotate(7.5deg) scale(.63); }
  25% { opacity: .707; transform: rotate(15deg) scale(.824); }
  37.5% { opacity: .924; transform: rotate(22.5deg) scale(.954); }
  50% { opacity: 1; transform: rotate(30deg) scale(1); }
  62.5% { opacity: .924; transform: rotate(37.5deg) scale(.954); }
  75% { opacity: .707; transform: rotate(45deg) scale(.824); }
  87.5% { opacity: .383; transform: rotate(52.5deg) scale(.63); }
  100% { opacity: 0; transform: rotate(60deg) scale(.4); }
}
/* En reposo flota: 6 px arriba y abajo en 1,1 + 1,1 s. */
@keyframes flota { 0%, 50% { animation-timing-function: cubic-bezier(.37, 0, .63, 1); } 0%, 100% { transform: none; } 50% { transform: translateY(-6px); } }
.flota-cofre.flota { animation: flota 2200ms infinite; }
.cofre-onb.dormida .flota, .cofre-onb.dormida .destellos-cofre i { animation-play-state: paused; }
.disco-cofre { position: absolute; border-radius: 50%; background: #FFF6D0; opacity: 0; }
.lluvia-cofre { position: absolute; inset: 0; }
.lluvia-cofre i { position: absolute; left: 50%; top: 50%; opacity: 0; }
.antes-cofre { display: flex; flex-direction: column; align-items: center; margin-top: 14px; }
.puntos-cofre { display: flex; gap: 12px; justify-content: center; }
.puntos-cofre i { position: relative; width: 22px; height: 22px; border-radius: 11px; background: rgba(255, 255, 255, .12); }
.puntos-cofre b { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 11px; background: var(--oro); opacity: 0; }
.puntos-cofre i:first-child b { opacity: 1; }
.pistas-cofre { position: relative; width: 320px; max-width: 100%; height: 22px; margin-top: 12px; }
.pistas-cofre span { position: absolute; left: 0; right: 0; font: 700 15.5px/22px var(--sans); color: var(--tinta); text-align: center; }
.pistas-cofre span + span { opacity: 0; }
.cifra-cofre, .frase-cofre { position: absolute; left: 0; right: 0; text-align: center; opacity: 0; }
.cifra-cofre { top: 0; pointer-events: none; }
.cifra-cofre .cifra { margin: 0; font: 800 26px/32px var(--sans); letter-spacing: -.5px; color: #2F8BF0; }
.frase-cofre .kicker { margin: 0 0 10px; font: 500 10.5px/14px var(--mono); letter-spacing: 1.4px; color: #ADA79A; }
.frase-cofre .otra-vez { margin-top: 14px; }
/* ── Misión 5: el cofre del día (cofre/AbrirCofre.tsx), lo que cambia ──────
   El resto de piezas (cofre, aros, destellos, puntos, pistas) siguen en
   everrise.css con sus nombres. */
.cofre-dia { height: 354px; }
/* Ya abierto: la rareza arriba, donde estaba su rótulo, y la frase en el sitio
   del cofre (la app pone el botín ahí; la web no tiene XP ni oro). */
.cofre-dia .frase-cofre { top: 56px; padding-inline: 4px; pointer-events: none; }
/* La frase queda encima del cofre: invisible no puede quedarse con el toque (E2). */
.cofre-dia.abierta .frase-cofre { pointer-events: auto; }
/* Nombre propio: `.mision .texto` (celular) la alinearía a la izquierda (§4.4). */
.cofre-dia .texto-cd { margin: 0; font: 600 19px/28px var(--sans); color: var(--tinta); text-align: center; text-wrap: balance; }
.cofre-dia .autor-cd { margin: 10px 0 0; font: 500 14px/20px var(--sans); color: #ADA79A; }
.cofre-dia .autor-cd span { font-weight: 400; }

/* ── El pico final (Bienvenida.tsx): el amanecer a pantalla completa ─────── */
.amanecer { position: fixed; inset: 0; z-index: 75; overflow: hidden; overscroll-behavior: contain; touch-action: none; background: #0C0B11; }
.amanecer.se-va { opacity: 0; transition: opacity 220ms ease; }
.cielo-amanecer { position: absolute; inset: 0; opacity: 0; background: linear-gradient(180deg, #0E0B1A 0%, #221A46 24%, #47296C 44%, #8C3E76 64%, #D8635A 85%, #F39A45 100%); }
.grupo-amanecer { position: absolute; inset: 0; pointer-events: none; }
.amanecer .sol { position: absolute; left: 50%; margin-left: -68px; }
.saludo-amanecer { position: absolute; left: 24px; right: 24px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.luz-saludo { position: absolute; top: -26px; left: 50%; width: 360px; height: 140px; margin-left: -180px; background: radial-gradient(closest-side, rgba(255, 214, 140, .24), rgba(255, 214, 140, 0)); opacity: 0; }
.saludo-amanecer .titulo { position: relative; margin: 0; font: 700 30px/37px var(--serif); letter-spacing: -.3px; color: var(--tinta); opacity: 0; }
.saludo-amanecer .nombre { position: relative; margin: 0; font: italic 700 42px/52px var(--serif); letter-spacing: -.4px; color: var(--oro); opacity: 0; }
.pie-amanecer { position: absolute; left: 24px; right: 24px; bottom: calc(18px + env(safe-area-inset-bottom)); max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; }
.linea-amanecer { opacity: 0; text-align: center; }
.linea-amanecer .listo { margin: 0 0 16px; font: 800 19px/1.3 var(--sans); color: #fff; }
.pie-amanecer .boton { opacity: 0; transition: box-shadow var(--t-corto) var(--salida); }
.cerrar-amanecer { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 22px; color: rgba(255, 255, 255, .82); background: rgba(255, 255, 255, .1); cursor: pointer; }
.cerrar-amanecer svg { width: 18px; height: 18px; }
.cerrar-amanecer:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.amanecer.quieto .cielo-amanecer, .amanecer.quieto .luz-saludo, .amanecer.quieto .titulo, .amanecer.quieto .nombre, .amanecer.quieto .linea-amanecer, .amanecer.quieto .boton { opacity: 1; }

/* El confeti a pantalla completa y las chispas en rombo */
/* El tamaño lo pone el JS en px, igual que el de sus píxeles (E11). */
.confeti { position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; width: 0; height: 0; }
/* Las chispas en rombo de la app (el `Rombo` de Particulas.tsx). */
.chispa { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 5; }
.chispa svg { display: block; width: 100%; height: 100%; }

/* ── La app por dentro ───────────────────────────────────────────────────── */
.corazon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(36px, 7vw, 110px); align-items: center; margin-top: clamp(48px, 7vw, 80px); }
/* Dos columnas desde 700 px; entre 700 y 1000, la del teléfono más estrecha (E13).
   En el celular, el texto y su botón primero y el teléfono debajo (E4). */
@media (min-width: 700px) and (max-width: 1000px) { .corazon { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 40px; } }
@media (max-width: 699px) { .corazon { grid-template-columns: 1fr; gap: 40px; } }
.acciones.izquierda { justify-content: flex-start; }
/* La proporción de la grabación va en la PANTALLA, no en el marco: si no, sobraba una franja abajo. */
.telefono { position: relative; width: min(330px, 100%); margin-inline: auto; border-radius: 52px; padding: 11px;
  background: linear-gradient(145deg, #3A3842, #1A1920 40%, #2C2A33); box-shadow: 0 50px 100px rgba(0, 0, 0, .55), inset 0 0 0 1.5px rgba(255, 255, 255, .12); }
.telefono .pantalla { position: relative; width: 100%; aspect-ratio: 1080 / 2336; border-radius: 42px; overflow: hidden; background: #0B0A12; isolation: isolate; }
.telefono .pantalla > img { width: 100%; height: 100%; object-fit: cover; }
.telefono .isla { position: absolute; z-index: 5; top: 10px; left: 50%; width: 31%; height: 26px; margin-left: -15.5%; border-radius: 14px; background: #000; }
.telefono .estado-ios { position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 6px 26px 0 30px; font: 700 14px/1 var(--sans); color: #fff; letter-spacing: -.01em; }
.telefono .estado-ios svg { height: 11px; width: auto; }
.telefono .estado-ios .iconos { display: flex; gap: 5px; align-items: center; }
.bloque-txt h3 { font: 800 clamp(26px, 3vw, 36px)/1.12 var(--sans); letter-spacing: -.03em; color: var(--tinta); margin: 0; text-wrap: balance; }
.bloque-txt p { margin: 16px 0 0; }
.lista-datos { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.lista-datos li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; font-size: 15.5px; line-height: 1.5; }
.lista-datos img { width: 32px; height: 32px; }
.lista-datos b { color: var(--tinta); font-weight: 700; }

/* La pantalla de Inicio de la build 18. El lienzo mide lo que la pantalla de
   la grabación en puntos (414 × 895,5) y se escala con --k al teléfono. La
   captura es el fondo (barra de estado y tarjeta tapadas); encima va la barra
   de estado redibujada y la tarjeta del amanecer, con las medidas de
   Amanecer.tsx y CifrasAmanecer.tsx tal cual (1 px aquí = 1 pt allí). */
.lienzo-app { position: absolute; left: 0; top: 0; width: 414px; height: 895.5px; transform-origin: 0 0; transform: scale(var(--k, .744)); font-family: var(--sans); }
.lienzo-app .captura-app { position: absolute; left: 0; top: 0; width: 414px; height: 895.5px; max-width: none; user-select: none; pointer-events: none; }
.estado-app { position: absolute; left: 0; top: 0; right: 0; height: 44px; }
.estado-app .hora-ios { position: absolute; left: 31px; top: 12px; width: 45px; text-align: center; font: 600 16px/18px -apple-system, 'SF Pro Text', system-ui, 'Segoe UI', sans-serif; color: #fff; letter-spacing: -.2px; }
.estado-app .iconos-ios { position: absolute; right: 18px; top: 15px; display: flex; align-items: center; gap: 5px; }
.estado-app svg { display: block; }
.tarjeta-amanecer { position: absolute; border-radius: 28px; padding: 20px; background: #13111A; border: 1px solid rgba(255, 216, 115, .18); overflow: hidden; isolation: isolate; text-align: center; }
/* AuroraTarjeta tono «amanecer», quieta: tres luces y el velo, en un lienzo de 100 × 100 que se estira. */
.tarjeta-amanecer .aurora-tarjeta { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 14% at 45% 12%, rgba(63, 209, 176, .09), rgba(63, 209, 176, .03) 60%, rgba(63, 209, 176, 0)),
    radial-gradient(75% 45% at 50% 105%, rgba(245, 155, 66, .12), rgba(245, 155, 66, .048) 55%, rgba(245, 155, 66, 0)),
    radial-gradient(55% 45% at 100% 10%, rgba(46, 143, 214, .12), rgba(46, 143, 214, .048) 55%, rgba(46, 143, 214, 0)),
    radial-gradient(70% 55% at 0% 0%, rgba(110, 86, 232, .2), rgba(110, 86, 232, .08) 55%, rgba(110, 86, 232, 0)); }
/* La luz del sol, quieta, detrás de la escena: elipse de 0,58·ancho × 0,78·158 centrada en el sol. */
.tarjeta-amanecer .luz-sol { position: absolute; left: 0; top: 0; width: 374px; height: 298px; z-index: -1; pointer-events: none;
  background: radial-gradient(216.92px 123.24px at 187px 116px, rgba(245, 155, 66, .26), rgba(238, 106, 77, .08) 50%, rgba(238, 106, 77, 0)); }
/* iOS deja el texto más abajo dentro de su línea que el navegador cuando la
   línea es más alta que la letra: medido contra el fotograma de la build 18,
   estos textos van entre 1,1 y 2 pt más abajo (`top` no mueve nada más). */
.kicker-am, .bajo-am { position: relative; top: 1.8px; }
.cifras-am em { position: relative; top: 1.1px; }
.kicker-am { margin: 0 0 2px; font: 400 11px/15px var(--mono); letter-spacing: 1.6px; color: #ADA79A; }
.escena-am { position: relative; }
.marcas-am { position: absolute; width: 140px; height: 140px; pointer-events: none; }
.marcas-am .hora { position: absolute; inset: 0; }
.marcas-am .hora i { position: absolute; left: 68.4px; top: 0; width: 3.2px; height: 9px; border-radius: 1.6px; background: rgba(255, 255, 255, .13); }
.marcas-am .hora i.oro { opacity: 0; }
.ondas-am { position: absolute; width: 220px; height: 220px; pointer-events: none; }
.ondas-am i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid #FFD873; opacity: 0; }
.chispas-am { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
/* El sol de Inicio (SolHeroe), por piezas: halo, cuerpo, corona con 8 rayos, núcleo y su silueta crema. */
.sol-heroe { position: absolute; width: 104px; height: 104px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sol-heroe:focus-visible { outline-offset: 6px; border-radius: 50%; }
.sol-heroe .halo-h { position: absolute; border-radius: 50%; pointer-events: none; opacity: .5;
  background: radial-gradient(closest-side, rgba(255, 216, 115, .62), rgba(245, 165, 58, .2) 42%, rgba(245, 165, 58, 0)); }
.sol-heroe .cuerpo-h, .sol-heroe .corona-h { position: absolute; inset: 0; }
.sol-heroe .rayo-h { position: absolute; }
.sol-heroe img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.sol-heroe .crema-h { position: absolute; inset: 0; opacity: 0; background: #FFF1C2; -webkit-mask: url(../img/sol/sol-nucleo.webp) center / 100% 100% no-repeat; mask: url(../img/sol/sol-nucleo.webp) center / 100% 100% no-repeat; }
.meta-am { position: relative; height: 18px; margin-top: 2px; }
.meta-am .linea { position: absolute; inset: 2px 0 -2px; display: flex; justify-content: center; align-items: baseline; white-space: pre; }
.meta-am .dia-am { font: 500 11px/18px var(--mono); letter-spacing: 1.2px; color: #F5B942; }
.meta-am .falta { font: 500 12.5px/18px var(--sans); color: #ADA79A; }
.meta-am .fiesta { font: 800 14px/18px var(--sans); color: #F5B942; opacity: 0; }
.reloj-am { display: flex; justify-content: center; align-items: center; margin-top: 6px; }
.reloj-am .col { display: block; width: 27px; height: 54px; overflow: hidden; }
.reloj-am .tira { display: flex; flex-direction: column; }
.reloj-am .tira span { display: block; height: 54px; font: 500 44px/54px var(--mono); color: #F7F4ED; text-align: center; }
.reloj-am .dos { height: 54px; margin: 0 -3px; font: 500 40px/54px var(--mono); color: #F7F4ED; }
.bajo-am { margin: 2px 0 0; font: 500 13.5px/19px var(--sans); color: #CFC8BA; }
.raya-am { height: 1px; background: rgba(255, 255, 255, .07); margin: 18px 0 16px; }
.cifras-am { display: flex; align-items: stretch; }
.cifras-am > div { flex: 1; display: flex; flex-direction: column; align-items: center; }
.cifras-am .sep { width: 1px; background: rgba(255, 255, 255, .08); margin: 0 10px; }
/* La línea mide 32 como en la app: con «días» a 15 px, el navegador la estiraba 3 px. */
.cifras-am b { display: block; height: 32px; font: 800 26px/32px var(--sans); letter-spacing: -.8px; color: #F7F4ED; white-space: nowrap; }
.cifras-am b small { font: 700 15px/32px var(--sans); letter-spacing: 0; color: #CFC8BA; }
.cifras-am em { font: 500 13px/18px var(--sans); font-style: normal; color: #CFC8BA; margin-top: 2px; }
.recup-am .cabeza-rec { display: flex; align-items: baseline; justify-content: space-between; }
.recup-am .cabeza-rec > span:first-child { font: 600 14px/19px var(--sans); color: #CFC8BA; }
.recup-am .der { display: flex; align-items: baseline; gap: 8px; }
.recup-am .sube { font: 700 12px/16px var(--sans); color: #4FD3A0; }
.recup-am .pct { font: 800 18px/22px var(--sans); color: #F7F4ED; }
.recup-am .pista-am { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); margin-top: 10px; overflow: hidden; text-align: left; }
.recup-am .pista-am i { display: block; height: 6px; width: 2%; border-radius: 3px; background: linear-gradient(90deg, #FFD873, #F5943A); }

/* ── Todo lo que trae la app ─────────────────────────────────────────────── */
.intro-app { padding-bottom: 0; }
.intro-app + .seccion { padding-top: clamp(40px, 6vw, 70px); }
/* En el computador, la pieza a la izquierda y el texto a la derecha. */
@media (min-width: 700px) {
  .corazon.invertido { grid-template-columns: minmax(0, 374px) minmax(0, 1fr); }
  .corazon.invertido > .bloque-txt { order: 2; }
}
@media (min-width: 700px) and (max-width: 1000px) { .corazon.invertido { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); } }

/* Programa: la baraja de cinco fichas (app/(tabs)/program.tsx). Cada ficha mide
   200 y la siguiente le come 62; radio 28, #13111A, borde 1 a 0,09 por dentro y
   la sombra «lg» de la app. Las medidas van en px = pt de la app. */
.pantalla-prog { width: min(374px, 100%); margin-inline: auto; }
.titulo-prog { margin: 0; font: 800 22px/27px var(--sans); letter-spacing: -.45px; color: var(--tinta); }
.sub-prog { margin: 4px 0 0; font: 400 13px/18px var(--sans); color: #8B8579; }
.baraja { position: relative; margin-top: 20px; }
/* Cada ficha y su figura en su propia capa: lo que se mueve dentro no obliga a repintar la aurora de la ficha. */
.ficha-prog { position: relative; display: block; width: 100%; height: 200px; padding: 0; border-radius: 28px; background: #13111A; box-shadow: 0 12px 34px rgba(0, 0, 0, .14); text-align: left; transform-origin: 50% 50%; will-change: transform; }
.ficha-prog + .ficha-prog { margin-top: -62px; }
.ficha-prog:active { opacity: .92; }
.ficha-prog:focus-visible { outline-offset: -3px; border-radius: 28px; }
.dentro-ficha { position: absolute; inset: 0; display: block; border-radius: 28px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .09); isolation: isolate; }
.aurora-ficha { position: absolute; inset: 0; display: block; }
.figura-ficha { position: absolute; right: 20px; top: 50px; width: 108px; height: 108px; display: block; pointer-events: none; will-change: transform; }
.anillo-ficha { position: absolute; inset: 0; overflow: visible; }
.centro-figura { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
#programa:not(.activa) .centro-figura { visibility: hidden; }
.cabeza-ficha { position: relative; display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 21px 0; }
.nombre-ficha { flex: 1; min-width: 0; display: block; }
.nombre-ficha b { display: block; font: 800 24px/29px var(--sans); letter-spacing: -.6px; color: #F7F4ED; }
.nombre-ficha span { display: block; margin-top: 2px; font: 500 12.5px/17px var(--sans); color: rgba(247, 244, 237, .62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flecha-ficha { flex: none; width: 31px; height: 31px; border-radius: 16px; background: rgba(255, 255, 255, .1); display: grid; place-items: center; }
.flecha-ficha svg { width: 15px; height: 15px; fill: none; stroke: #F7F4ED; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cifra-ficha { position: relative; display: flex; align-items: flex-end; gap: 7px; margin: 20px 21px 0; }
.cifra-ficha b { font: 500 48px/50.88px var(--mono); letter-spacing: -1.6px; color: #F7F4ED; }
.cifra-ficha > span { display: flex; flex-direction: column; margin-bottom: 4.8px; }
.cifra-ficha i { font-style: normal; }
.cifra-ficha i:first-child { font: 400 11.5px/15px var(--mono); color: #ADA79A; }
.cifra-ficha i:last-child { font: 700 11.5px/16px var(--sans); color: #CFC8BA; }
/* Dentro de su línea, iOS pone el lema, la cifra y lo de al lado 1-2 pt más abajo que el navegador, y el
   título 1,5 pt más arriba (medido contra la build 18, 9:28). */
.nombre-ficha b { position: relative; top: -1.5px; }
.nombre-ficha span { position: relative; top: 1px; }
.cifra-ficha b { position: relative; top: 1px; }
.cifra-ficha > span { position: relative; top: 2px; }
/* Las figuras por piezas: el aro del suelo, el mando, el libro. */
.aro-ficha { position: absolute; box-sizing: border-box; opacity: 0; }
.todo-mando { position: absolute; inset: 0; will-change: transform; }
.trozo-mando { position: absolute; }
.luz-mando { position: absolute; inset: 0; background: #FFF1C2; opacity: 0; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.fig-libro .luz-libro { position: absolute; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, rgba(255, 231, 163, .55), rgba(245, 185, 66, .22) 45%, rgba(245, 185, 66, 0)); }
.cuerpo-libro { position: absolute; inset: 0; opacity: 0; }
.hoja-libro { position: absolute; inset: 0; opacity: 0; }
.hoja-libro img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sombra-hoja { position: absolute; inset: 0; background: #3E3767; opacity: 0; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.destello-libro { position: absolute; inset: 0; opacity: 0; }

/* Las herramientas: las baldosas de «¿Qué te ayudó?» (emergencia/Pasos.tsx,
   `Baldosa`) y el teléfono con la pantalla real de cada una. */
.visor-h { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 330px); gap: clamp(36px, 7vw, 110px); align-items: start; }
@media (min-width: 700px) and (max-width: 1000px) { .visor-h { grid-template-columns: minmax(0, 1fr) minmax(0, 290px); gap: 40px; } }
@media (max-width: 699px) { .visor-h { grid-template-columns: 1fr; gap: 30px; } }
.tel-h { position: sticky; top: 96px; }
@media (max-width: 699px) { .tel-h { position: static; } .tel-h .telefono { width: min(270px, 74%); } }
.cap-h { opacity: 0; transition: opacity 300ms var(--salida); }
.cap-h.vista { opacity: 1; }
/* La rejilla: 4 columnas (3 en el celular estrecho), hueco 10. La baldosa mide
   su lado de ancho y 0,96 de alto; el emoji, el 42 % del lado. */
.rejilla-h { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 30px; max-width: 520px; }
/* En el celular, tres por fila y la última centrada. */
@media (max-width: 520px) { .rejilla-h { display: flex; flex-wrap: wrap; justify-content: center; } .rejilla-h > .baldosa-h { width: calc((100% - 20px) / 3); } }
.baldosa-h { display: block; width: 100%; padding: 0; container-type: inline-size; -webkit-tap-highlight-color: transparent; }
.baldosa-h:focus-visible { outline-offset: 2px; border-radius: 20px; }
.caja-bal { position: relative; display: flex; flex-direction: column; align-items: center; aspect-ratio: 1 / .96; padding: 0 8px; border-radius: 20px; border: 1.5px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .045); overflow: hidden; }
.halo-bal { position: absolute; left: 50%; top: calc(28cqw - 37px); width: 74px; height: 74px; margin-left: -37px; border-radius: 50%; opacity: 0; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 216, 115, .5), rgba(245, 165, 58, .14) 55%, rgba(245, 165, 58, 0)); }
.emo-bal { position: relative; flex: none; width: 42cqw; height: 42cqw; margin-top: 7cqw; }
.emo-bal img, .emo-bal .crema-pieza { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.emo-bal img.c { opacity: 0; }
.emo-bal .crema-pieza { opacity: 0; background: #FFF1C2; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.txt-bal { position: relative; margin-top: 8px; font: 600 13px/16.5px var(--sans); text-align: center; color: #CFC8BA; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.check-bal { position: absolute; right: 8px; top: 8px; width: 20px; height: 20px; border-radius: 10px; background: #F5B942; display: grid; place-items: center; opacity: 0; }
.check-bal svg { width: 11px; height: 11px; fill: none; stroke: #141219; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
/* El texto de la elegida: los ocho apilados en la misma celda. */
.texto-h { display: grid; margin-top: 28px; max-width: 520px; }
.item-h { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 120ms var(--salida), transform 120ms var(--salida), visibility 0s 120ms; }
.item-h.actual { opacity: 1; visibility: visible; transform: none; transition: opacity 320ms var(--salida) 120ms, transform 360ms var(--salida) 120ms, visibility 0s; }
.nombre-h { margin: 0; font: 800 22px/1.2 var(--sans); letter-spacing: -.02em; color: var(--tinta); }
.frase-h { margin: 10px 0 0; font-size: 17px; line-height: 1.55; color: var(--tinta-2); text-wrap: pretty; }
.dato-h { margin: 12px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--gris); text-wrap: pretty; }

/* La medalla «Una semana» (insignias/Medalla.tsx y Vitrina.tsx): la moneda de
   plata, el halo que respira, el brillo que cruza la cara y los textos. */
.vitrina-m { display: flex; flex-direction: column; align-items: center; text-align: center; }
.zona-m { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.zona-m:active { cursor: grabbing; }
.movil-m { position: relative; will-change: transform; }
.halo-m { position: absolute; left: 50%; border-radius: 50%; opacity: 0; pointer-events: none; will-change: transform, opacity; background: radial-gradient(closest-side, rgba(255, 255, 255, .45), rgba(201, 208, 219, .14) 42%, rgba(201, 208, 219, 0)); }
.vivo .halo-m { animation: respira-m 2400ms cubic-bezier(.37, 0, .63, 1) infinite alternate; }
@keyframes respira-m { from { opacity: .55; transform: scale(1); } to { opacity: .85; transform: scale(1.06); } }
.vivo .movil-m { animation: flota-m 3200ms cubic-bezier(.37, 0, .63, 1) infinite alternate; }
@keyframes flota-m { from { transform: translateY(0); } to { transform: translateY(-6px); } }
.moneda-m { position: relative; }
/* Las caras, el canto y las luces en su capa: girar solo las estrecha, no las vuelve a pintar. */
.otra-m { position: absolute; left: 0; top: 0; border-radius: 50%; opacity: 0; will-change: transform, opacity; }
.canto-m { position: absolute; top: 0; opacity: 0; will-change: transform, opacity; }
.canto-m svg, .disco-m, .vidrio-m { display: block; }
.cara-m { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.disco-m, .vidrio-m { position: absolute; left: 0; top: 0; }
.escena-m { position: absolute; border-radius: 50%; overflow: hidden; }
.escena-m img { position: absolute; max-width: none; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.req-m { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; }
.req-m b, .pie-m b { font-family: var(--sans); font-weight: 800; text-transform: uppercase; }
.pie-m { position: absolute; left: 0; right: 0; display: flex; justify-content: center; }
.pie-m b { opacity: .75; }
.sombra-m, .destello-m { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; opacity: 0; pointer-events: none; will-change: opacity; }
.sombra-m { background: #000; }
.destello-m { background: #fff; }
.cinta-m { position: absolute; left: -20px; right: -20px; display: flex; justify-content: center; pointer-events: none; }
.cuerpo-cinta { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cuerpo-cinta svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cuerpo-cinta b { position: relative; font-family: var(--sans); font-weight: 800; letter-spacing: .3px; font-variant-numeric: tabular-nums; }
.cuerpo-cinta i { position: absolute; inset: 0; border-style: solid; border-color: #0C0B11; }
/* El brillo: una banda del 32 % del lado, girada 24°, que cruza la cara en 950 ms
   (curva suave) y espera 3,6 s; recortado al círculo. */
.brillo-m { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none; }
.brillo-m i { position: absolute; left: 50%; opacity: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); }
.vivo .brillo-m i { animation: brillo-m 4550ms infinite 200ms; }
@keyframes brillo-m {
  0% { opacity: 1; transform: translateX(calc(var(--tam) * -.95)) rotate(24deg); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  20.87% { opacity: 1; transform: translateX(calc(var(--tam) * .95)) rotate(24deg); }
  20.88%, 100% { opacity: 0; transform: translateX(calc(var(--tam) * .95)) rotate(24deg); }
}
.dormida .halo-m, .dormida .movil-m, .dormida .brillo-m i { animation-play-state: paused; }
.textos-m { margin-top: 18px; }
.js .vitrina-m .textos-m { opacity: 0; }
.rotulo-m { margin: 0; font: 800 13px/18px var(--sans); letter-spacing: 2px; text-transform: uppercase; color: #E6EBF3; }
.nombre-m { margin: 8px 0 0; font: 800 30px/36px var(--sans); letter-spacing: -.6px; color: var(--tinta); }
.requisito-m { margin: 4px 0 0; font: 500 15.5px/22px var(--sans); color: var(--tinta-2); }
.pista-m { display: flex; align-items: center; gap: 8px; margin: 26px 0 0; font: 400 11.5px/1.3 var(--mono); letter-spacing: .6px; color: var(--gris); opacity: 0; transition: opacity 500ms cubic-bezier(.45, 0, .55, 1) 1500ms; }
.pista-m span { font: 15px/1 system-ui, -apple-system, sans-serif; }
.vitrina-m.dentro .pista-m { opacity: 1; }
.vitrina-m .pista-m.fuera { opacity: 0; transition: opacity 220ms cubic-bezier(.45, 0, .55, 1); }

/* ── Las cintas: un carrusel horizontal que no se acaba (reseñas y estudios) ──
   A todo el ancho, con los bordes fundidos en la noche. Las piezas miden lo
   mismo y se estiran al alto de la más alta; el enlace de cada ficha queda
   abajo. Se arrastra de lado; de arriba abajo, la página baja como siempre. */
.cinta { position: relative; margin-top: clamp(36px, 5vw, 56px); overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 clamp(20px, 8vw, 140px), #000 calc(100% - clamp(20px, 8vw, 140px)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 clamp(20px, 8vw, 140px), #000 calc(100% - clamp(20px, 8vw, 140px)), transparent); }
.cinta.arrastrando { cursor: grabbing; }
.pista-cinta { display: flex; align-items: stretch; gap: 16px; width: max-content; padding: 2px 0 6px; will-change: transform; }
.pieza-cinta { flex: none; width: 320px; }
.cinta-resenas .pieza-cinta { width: 340px; }
@media (max-width: 699px) { .pista-cinta { gap: 12px; } .pieza-cinta, .cinta-resenas .pieza-cinta { width: min(300px, 82vw); } }
.cinta img { -webkit-user-drag: none; }
/* Las fichas del blog, ya a la vista (en el blog entran al bajar). */
.js .cinta .ficha-b { opacity: 1; transform: none; }
.cinta .ficha-b { padding: 20px; }
.cinta .fuente-b { margin-top: auto; padding-top: 14px; }

/* Reseñas (capitulos/Resenas.tsx): el texto a 15,5/23,5, las comillas de fondo en
   oro a 0,10 y la firma con el icono de la app, en la tarjeta de las fichas (la
   aurora «noche»). Sin estrellas. */
.cita-r { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; margin: 0; padding: 22px 22px 20px; border-radius: 24px; background: #13111A; border: 1px solid rgba(255, 255, 255, .08); }
.cita-r::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 14% at 45% 12%, rgba(63, 209, 176, .09), rgba(63, 209, 176, .03) 60%, rgba(63, 209, 176, 0)),
    radial-gradient(70% 50% at 40% 110%, rgba(245, 155, 66, .1), rgba(245, 155, 66, .04) 55%, rgba(245, 155, 66, 0)),
    radial-gradient(60% 70% at 100% 60%, rgba(46, 143, 214, .16), rgba(46, 143, 214, .064) 55%, rgba(46, 143, 214, 0)),
    radial-gradient(70% 80% at 8% 0%, rgba(110, 86, 232, .26), rgba(110, 86, 232, .104) 55%, rgba(110, 86, 232, 0)); }
.comillas-r { position: absolute; right: 14px; top: -6px; font: 800 96px/104px var(--sans); color: rgba(245, 185, 66, .10); pointer-events: none; }
.cita-r blockquote { position: relative; margin: 0; font: 500 15.5px/23.5px var(--sans); letter-spacing: .05px; color: rgba(247, 244, 237, .9); }
.cita-r figcaption { display: flex; align-items: center; margin-top: auto; padding-top: 16px; }
.cita-r figcaption img { width: 24px; height: 24px; border-radius: 12px; margin-right: 9px; box-shadow: 0 0 0 1px rgba(245, 185, 66, .45); }
.cita-r figcaption b { font: 700 13px/1.3 var(--sans); color: var(--tinta); }
.cita-r figcaption span { font: 400 11.5px/1.3 var(--mono); color: var(--gris); margin-left: 6px; }

/* Ayuda en crisis (app/crisis.tsx): sin animación, a propósito. Las líneas con su
   botón de llamar (oro las de apoyo, con borde las de emergencia) y las 22
   pastillas de los países. */
.ayuda { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(32px, 6vw, 90px); align-items: start; }
@media (max-width: 899px) { .ayuda { grid-template-columns: 1fr; gap: 26px; } }
.salvavidas-a { width: 64px; height: 64px; margin-top: 4px; }
.ayuda h2 { margin: 14px 0 0; font: 800 clamp(28px, 3.2vw, 36px)/1.2 var(--sans); letter-spacing: -.6px; color: var(--tinta); text-wrap: balance; }
.ayuda-txt p { margin: 12px 0 0; font: 400 16px/24px var(--sans); color: var(--tinta-2); max-width: 34em; }
.ayuda-txt .fuerte-a { margin-top: 14px; font: 700 18px/1.4 var(--sans); color: var(--tinta); }
.ayuda-txt .nota-a { font-size: 14px; line-height: 21px; color: var(--gris); }
.pais-a { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.rotulo-a { margin: 0; font: 500 11px/1.4 var(--mono); letter-spacing: 1.4px; color: var(--gris); }
.cambiar-a { font: 700 14px/1.4 var(--sans); color: var(--oro); padding: 8px 0 8px 12px; }
.paises-a { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.pastilla-a { height: 38px; padding: 0 14px; border-radius: 19px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .10); background: rgba(255, 255, 255, .05); font: 600 14px/1 var(--sans); color: var(--tinta-2); }
.pastilla-a[aria-checked="true"] { box-shadow: inset 0 0 0 1.5px var(--oro); background: rgba(245, 185, 66, .14); color: var(--tinta); }
.lineas-a { margin-top: 4px; }
.linea-a { display: flex; align-items: center; gap: 14px; padding: 16px 0; }
.linea-a + .linea-a { border-top: .5px solid rgba(255, 255, 255, .12); }
.txt-linea { flex: 1; min-width: 0; }
.txt-linea b { display: block; font: 700 16px/21px var(--sans); color: var(--tinta); }
.txt-linea span { display: block; margin-top: 2px; font: 500 13px/18px var(--sans); color: var(--gris); }
.aviso-a { margin: 8px 0 0; font: 600 13px/18px var(--sans); color: var(--oro); }
.llamar-a { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 15px; border-radius: 21px; background: var(--oro); color: #141219; font: 800 14.5px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; transition: transform 120ms var(--salida); }
.llamar-a:active { transform: scale(.96); }
.llamar-a svg { width: 15px; height: 15px; fill: currentColor; }
.llamar-a.emergencia { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1.5px rgba(247, 244, 237, .4); }
.nota-pais { margin: 14px 0 0; font: 500 14.5px/21px var(--sans); color: var(--tinta-2); }
.cierre-a { margin: 30px 0 0; font: 400 14px/21px var(--sans); color: var(--gris); }

/* En qué nos apoyamos: la cifra rueda (CifraRueda), la frase, el límite siempre a la vista y la fuente. */
.evidencia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(40px, 6vw, 64px); }
@media (max-width: 899px) { .evidencia { grid-template-columns: 1fr; } }
.dato { position: relative; border-radius: 24px; padding: 26px 24px 24px; background: #13111A; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); overflow: hidden; display: flex; flex-direction: column; }
.cifra-ev { margin: 0; display: flex; align-items: baseline; gap: 8px; font: 500 clamp(52px, 6vw, 64px)/1 var(--mono); letter-spacing: -2px; color: var(--tinta); }
.numero-ev { display: inline-flex; }
.rueda-ev { display: inline-block; height: 1em; overflow: hidden; }
.tira-ev { display: block; line-height: 1; font-variant-numeric: tabular-nums; }
.cifra-ev small { font: 700 16px/1 var(--sans); letter-spacing: 0; color: var(--oro-claro); }
.frase-ev { margin: 16px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--tinta); }
.limite-ev { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--gris); }
.limite-ev span { display: block; margin-bottom: 4px; font: 500 11px/1.4 var(--mono); letter-spacing: 1.4px; text-transform: uppercase; color: var(--oro); }
.fuente-ev { margin: auto 0 0; padding-top: 18px; font: 500 12px/1.45 var(--mono); color: var(--gris); }
.fuente-ev a { border-bottom: 1px solid rgba(255, 255, 255, .15); transition: color 200ms, border-color 200ms; }
.fuente-ev a:hover { color: var(--tinta); border-color: var(--oro); }
.mas-ev { margin: 30px 0 0; text-align: center; }
.mas-ev a { font-size: 16px; }

/* Preguntas (Paywall.tsx, `Pregunta`): tarjeta #16151D de radio 18 con sombra
   «sm», la pregunta en Manrope 700 15/21, el + / − en mono 17 de oro y las
   respuestas en párrafos sueltos de 13/20. Sin animación al abrir, como la app. */
.preguntas-p { display: grid; gap: 9px; max-width: 720px; margin: clamp(36px, 5vw, 56px) auto 0; }
.pregunta-p { border-radius: 18px; background: #16151D; box-shadow: 0 4px 12px rgba(0, 0, 0, .08); }
.pregunta-p > button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 15px 16px; text-align: left; border-radius: 18px; transition: opacity 120ms; }
.pregunta-p > button:active { opacity: .7; }
.pregunta-p > button span { flex: 1; font: 700 15px/21px var(--sans); color: var(--tinta); }
.pregunta-p > button i { font: 400 17px/1 var(--mono); font-style: normal; color: var(--oro); margin-top: -2px; }
@media (min-width: 700px) { .pregunta-p > button span { font-size: 16.5px; line-height: 23px; } }
.respuesta-p { display: grid; gap: 11px; padding: 0 16px 16px; margin-top: -3px; }
.respuesta-p p { margin: 0; font: 400 13px/20px var(--sans); color: var(--tinta-2); }
@media (min-width: 700px) { .respuesta-p p { font-size: 15px; line-height: 23px; } }
.respuesta-p a { color: var(--oro-claro); border-bottom: 1px solid rgba(245, 185, 66, .35); }

/* El aviso de Android, debajo del botón de la App Store: discreto, para que el
   único botón destacado sea el blanco. */
.android { margin-top: 22px; display: flex; flex-direction: column; align-items: center; }
.abrir-android { font: 600 15px/1.4 var(--sans); color: var(--tinta-2); border-bottom: 1px solid rgba(255, 255, 255, .22); padding: 6px 0 2px; transition: color 200ms, border-color 200ms; }
.abrir-android:hover { color: var(--tinta); border-color: var(--oro); }
.form-android { width: min(420px, 100%); }
.fila-form { display: flex; gap: 8px; }
.campo-android { flex: 1; min-width: 0; height: 52px; border-radius: 26px; padding: 0 20px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); color: var(--tinta); font: 600 16px/1 var(--sans); }
.campo-android::placeholder { color: var(--apagado); }
.campo-android:focus { outline: none; border-color: var(--oro); }
.android .enviar { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--oro); color: #141219; flex: none; transition: transform 160ms var(--salida-fuerte); }
.android .enviar:active { transform: scale(.94); }
.android .enviar svg { width: 20px; height: 20px; }
.android.enviando .enviar { opacity: .5; }
.android .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.nota-form { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--gris); }
.estado-android { min-height: 1.4em; margin: 10px 0 0; font-size: 14px; color: var(--gris); }
.estado-android.mal { color: #EB6B66; }
.hecho-android { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--tinta-2); }
.hecho-android b { color: var(--tinta); }

/* Cierre */
.cierre { text-align: center; }
.cierre .sol { --tam: clamp(120px, 14vw, 150px); position: relative; width: var(--tam); height: var(--tam); margin: 0 auto 40px; }
.cierre .grande { margin: 0 auto; max-width: 14ch; font: 800 clamp(40px, 6vw, 72px)/1.05 var(--sans); letter-spacing: -.035em; color: var(--tinta); text-wrap: balance; }
.cierre .bajada { margin-inline: auto; }
.cierre .acciones { margin-top: 30px; }

/* Pie */
.pie-pagina { padding: 56px 0 44px; border-top: 1px solid var(--filo); font-size: 14px; color: var(--gris); }
.pie-pagina .fila { display: flex; flex-wrap: wrap; gap: 24px 40px; justify-content: space-between; align-items: flex-start; }
.pie-pagina nav { display: flex; flex-wrap: wrap; gap: 12px 26px; }
.pie-pagina nav a { color: var(--tinta-2); font-weight: 600; }
.pie-pagina nav a:hover { color: var(--tinta); }
.pie-pagina p { margin: 22px 0 0; max-width: 60em; line-height: 1.6; font-size: 13px; }
.pie-pagina p + p { margin-top: 10px; }
.pie-pagina .correo-pie { color: var(--tinta-2); border-bottom: 1px solid rgba(255, 255, 255, .15); }
.pie-pagina .creditos { font-size: 12px; color: var(--apagado); }
.pie-pagina .creditos a { color: var(--gris); border-bottom: 1px solid rgba(255, 255, 255, .15); }

/* ── El blog (blog.html) ─────────────────────────────────────────────────
   Las fichas son la tarjeta de «En qué nos apoyamos» (app/research.tsx,
   `StudyCard`): TarjetaAurora de radio 24 y relleno 16 con la aurora de su
   tono, el Rotulo del tipo de evidencia en mono 11/15 y del color de su grupo,
   el titular 16/21, el hallazgo 14/21, la cita en mono 10,5/15 y el enlace en
   oro 13/18. El límite va siempre abierto, con la letra del de la portada. Las
   medidas del celular son las de la app; desde 700 px crecen, como las preguntas. */
.cabecera-blog { padding: calc(64px + clamp(48px, 8vw, 104px)) 0 clamp(24px, 4vw, 40px); }
.cabeza-blog { max-width: 860px; }
.titulo-blog { font-size: clamp(38px, 5.6vw, 68px); max-width: 15ch; }
.cabeza-blog .bajada { max-width: 38em; }
.evidencia.cifras-blog { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(36px, 5vw, 56px); }
@media (max-width: 999px) { .evidencia.cifras-blog { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cifras-blog .dato { padding: 22px 20px 20px; }
.cifras-blog .frase-ev { font-size: 14.5px; margin-top: 12px; }
.cifras-blog .fuente-ev { padding-top: 14px; font-size: 11px; }
@media (max-width: 519px) {
  .evidencia.cifras-blog { gap: 10px; }
  .cifras-blog .dato { padding: 18px 14px 16px; border-radius: 20px; }
  .cifras-blog .cifra-ev { font-size: 42px; letter-spacing: -1.5px; gap: 5px; }
  .cifras-blog .cifra-ev small { font-size: 14px; }
  .cifras-blog .frase-ev { font-size: 13.5px; line-height: 1.45; }
}
.fuente-ev a[href^="#"] { border-bottom-style: dotted; }

/* El índice: GrupoAurora con FilaEmoji y su subtítulo (aurora/Pantalla.tsx). */
.indice-blog { max-width: 640px; margin-top: clamp(44px, 6vw, 72px); }
.indice-blog .rotulo { font-size: 11px; letter-spacing: 1.6px; margin-bottom: 12px; }
.fila-indice span { display: flex; flex-direction: column; min-width: 0; }
.fila-indice b { font: 700 16px/21px var(--sans); color: var(--tinta); }
.fila-indice small { margin-top: 2px; font: 500 13px/18px var(--sans); color: var(--gris); }
@media (hover: hover) and (pointer: fine) { .fila-indice:hover { background: rgba(255, 255, 255, .04); } }

/* Cada sección: su emoji 3D, el titular y la entradilla; debajo, su gráfico y las fichas. */
.bloque-blog { padding: clamp(64px, 9vw, 120px) 0 clamp(24px, 4vw, 48px); }
.cabeza-b { max-width: 760px; }
.emo-b { position: relative; display: block; width: 56px; height: 56px; margin-bottom: 18px; }
.emo-b > img { width: 56px; height: 56px; }
.cabeza-b .titular { font-size: clamp(30px, 3.8vw, 46px); }
.nota-b { max-width: 720px; margin-top: 26px; padding: 18px 20px; border-radius: 20px; background: rgba(245, 185, 66, .07); box-shadow: inset 0 0 0 1px rgba(245, 185, 66, .2); }
.nota-b p { margin: 0; font: 500 15px/1.6 var(--sans); color: var(--tinta-2); }
.nota-b b { color: var(--tinta); }

/* Los gráficos: el rótulo en mono como el Rotulo de la app y un pie de 12,5. */
.grafico-b { margin: clamp(36px, 5vw, 52px) 0 0; max-width: 720px; }
.rotulo-graf { margin: 0 0 16px; font: 400 11px/15px var(--mono); letter-spacing: 1.6px; text-transform: uppercase; color: var(--gris); }
.pie-graf { margin: 14px 0 0; font: 500 12.5px/18px var(--sans); color: var(--gris); }

/* 1 · La línea de edades: la proyección del onboarding (capitulos/Proyeccion.tsx) sobre
   las edades. La línea de puntos de base, el trazo de oro de 4 que llega hasta el sol,
   los puntos de 12 con su aro y, debajo, las filas de los hitos. */
.lienzo-edades { position: relative; height: 132px; }
.lienzo-edades svg { position: absolute; left: 0; top: 0; overflow: visible; }
.lienzo-edades .marca-graf-e { position: absolute; top: 112px; font: 400 11px/14px var(--mono); color: rgba(247, 244, 237, .5); white-space: nowrap; transform: translateX(-50%); }
.punto-e { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; }
.punto-e i, .punto-e b { position: absolute; inset: 0; border-radius: 6px; }
.punto-e i { border: 2px solid var(--oro); opacity: 0; }
.punto-e b { border: 2px solid #0C0B11; background: rgba(255, 255, 255, .35); overflow: hidden; }
.punto-e em { position: absolute; inset: 0; background: var(--oro); opacity: 0; }
/* La cifra que rueda (CifraRueda): cada tira con su alto escrito, en una ventana del alto de una cifra. */
.rueda-r { display: inline-block; overflow: hidden; vertical-align: top; }
.tira-r, .tira-r > span { display: block; }
.filas-edades { list-style: none; padding: 0; margin: 6px 0 0; }
.filas-edades li { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.filas-edades li + li { border-top: .5px solid rgba(255, 255, 255, .09); }
.marca-e { flex: none; width: 8px; height: 8px; border-radius: 4px; background: var(--oro); }
.cifra-e { flex: none; width: 74px; font: 800 17px/22px var(--sans); letter-spacing: -.2px; color: var(--oro-claro); font-variant-numeric: tabular-nums; white-space: nowrap; }
.txt-e { flex: 1; min-width: 0; font: 600 15px/20px var(--sans); color: var(--tinta); }
.txt-e small { display: block; margin-top: 2px; font: 400 11px/15px var(--mono); color: var(--gris); }
.js .edades-b .filas-edades li { opacity: .3; }

/* 2 · Las 304 escenas: el mundo en puntos del mapa de los 42 países (GraficosPrologo.tsx,
   `GraficoMapa`): puntos de 0,27 de la celda en blanco a 0,26; los que cuentan se encienden
   por capas, sin sonido ni golpe, como las franjas de Estadísticas («es un riesgo, no un logro»). */
.pares-e { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 4vw, 40px); max-width: 560px; }
.puntos-e { position: relative; width: 100%; aspect-ratio: 16 / 19; }
.puntos-e svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.puntos-e .fila-p { will-change: transform, opacity; }
.dato-e { margin: 14px 0 0; }
.dato-e b { display: block; font: 500 clamp(26px, 3vw, 32px)/1 var(--mono); letter-spacing: -1px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.dato-e > span { display: block; margin-top: 6px; font: 600 14px/19px var(--sans); color: var(--tinta-2); }

/* 3 · El anillo de los 18: el de las lecciones de Aprender (AnilloAprender.tsx), un tramo
   por estudio con su hueco entre grupos, que se llena con el barrido del anillo del plan;
   en el centro, el 🔬 de la pantalla (research.tsx). */
.anillo-b { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(28px, 5vw, 56px); align-items: center; }
.anillo-b .rotulo-graf, .anillo-b .pie-graf { grid-column: 1 / -1; }
.lienzo-anillo { position: relative; width: 208px; height: 208px; }
.lienzo-anillo > svg { position: absolute; inset: 0; overflow: visible; }
.centro-anillo { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; }
.leyenda-b { list-style: none; padding: 0; margin: 0; }
.leyenda-b li { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.leyenda-b li + li { border-top: .5px solid rgba(255, 255, 255, .09); }
.n-ley { flex: none; width: 34px; font: 500 30px/1 var(--mono); letter-spacing: -1px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.leyenda-b li > span { font: 400 11px/15px var(--mono); letter-spacing: 1.6px; color: var(--oro); }
.js .anillo-b .leyenda-b li { opacity: .3; }
@media (max-width: 559px) {
  .anillo-b { grid-template-columns: 1fr; justify-items: center; }
  .anillo-b .rotulo-graf, .anillo-b .pie-graf { justify-self: start; }
  .leyenda-b { width: 100%; margin-top: 18px; }
}

/* Los grupos de la sección del programa: la cabecera de grupo de research.tsx
   (emoji de 46, titular 18/23 y la explicación en 13/18). */
.grupo-b { margin-top: clamp(52px, 7vw, 80px); scroll-margin-top: 84px; }
.cabeza-grupo-b { display: flex; align-items: center; gap: 13px; max-width: 760px; }
.cabeza-grupo-b img { flex: none; width: 46px; height: 46px; }
.cabeza-grupo-b h3 { margin: 0; display: flex; align-items: center; gap: 10px; font: 800 18px/23px var(--sans); letter-spacing: -.3px; color: var(--tinta); }
.cabeza-grupo-b p { margin: 2px 0 0; font: 500 13px/18px var(--sans); color: var(--gris); }
.n-b { font: 500 12px/1 var(--mono); color: var(--oro); background: rgba(245, 185, 66, .12); border-radius: 99px; padding: 4px 9px; }
@media (min-width: 700px) { .cabeza-grupo-b h3 { font-size: 21px; line-height: 27px; } .cabeza-grupo-b p { font-size: 14.5px; line-height: 21px; } }

/* Las fichas: una columna en el celular y dos desde 900 px. */
.fichas-b { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; margin-top: clamp(28px, 4vw, 40px); }
.grupo-b .fichas-b { margin-top: 18px; }
@media (max-width: 899px) { .fichas-b { grid-template-columns: 1fr; gap: 10px; } }
.ficha-b { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; border-radius: 24px; padding: 16px; background: #13111A; border: 1px solid rgba(255, 255, 255, .08); scroll-margin-top: 84px; }
.ficha-b::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* AuroraTarjeta (inicio/AuroraTarjeta.tsx, TONOS): tres luces y el velo boreal en un
   lienzo de 100 × 100 que se estira con la tarjeta. */
.tono-noche::before { background:
  radial-gradient(60% 14% at 45% 12%, rgba(63, 209, 176, .09), rgba(63, 209, 176, .03) 60%, rgba(63, 209, 176, 0)),
  radial-gradient(70% 50% at 40% 110%, rgba(245, 155, 66, .1), rgba(245, 155, 66, .04) 55%, rgba(245, 155, 66, 0)),
  radial-gradient(60% 70% at 100% 60%, rgba(46, 143, 214, .16), rgba(46, 143, 214, .064) 55%, rgba(46, 143, 214, 0)),
  radial-gradient(70% 80% at 8% 0%, rgba(110, 86, 232, .26), rgba(110, 86, 232, .104) 55%, rgba(110, 86, 232, 0)); }
.tono-verde::before { background:
  radial-gradient(60% 14% at 45% 12%, rgba(63, 209, 176, .09), rgba(63, 209, 176, .03) 60%, rgba(63, 209, 176, 0)),
  radial-gradient(70% 45% at 60% 115%, rgba(122, 98, 240, .1), rgba(122, 98, 240, .04) 55%, rgba(122, 98, 240, 0)),
  radial-gradient(60% 75% at 100% 40%, rgba(46, 143, 214, .16), rgba(46, 143, 214, .064) 55%, rgba(46, 143, 214, 0)),
  radial-gradient(75% 85% at 0% 0%, rgba(63, 209, 176, .22), rgba(63, 209, 176, .088) 55%, rgba(63, 209, 176, 0)); }
.tono-violeta::before { background:
  radial-gradient(60% 14% at 45% 12%, rgba(63, 209, 176, .09), rgba(63, 209, 176, .03) 60%, rgba(63, 209, 176, 0)),
  radial-gradient(60% 55% at 85% 110%, rgba(232, 82, 126, .1), rgba(232, 82, 126, .04) 55%, rgba(232, 82, 126, 0)),
  radial-gradient(55% 60% at 100% 20%, rgba(63, 209, 176, .12), rgba(63, 209, 176, .048) 55%, rgba(63, 209, 176, 0)),
  radial-gradient(75% 85% at 0% 0%, rgba(122, 98, 240, .3), rgba(122, 98, 240, .12) 55%, rgba(122, 98, 240, 0)); }
.tono-cielo::before { background:
  radial-gradient(60% 14% at 45% 12%, rgba(63, 209, 176, .09), rgba(63, 209, 176, .03) 60%, rgba(63, 209, 176, 0)),
  radial-gradient(70% 45% at 50% 115%, rgba(245, 185, 66, .08), rgba(245, 185, 66, .032) 55%, rgba(245, 185, 66, 0)),
  radial-gradient(60% 80% at 0% 30%, rgba(122, 98, 240, .2), rgba(122, 98, 240, .08) 55%, rgba(122, 98, 240, 0)),
  radial-gradient(70% 90% at 100% 0%, rgba(59, 91, 200, .28), rgba(59, 91, 200, .112) 55%, rgba(59, 91, 200, 0)); }
.tono-brasa::before { background:
  radial-gradient(60% 14% at 45% 12%, rgba(63, 209, 176, .09), rgba(63, 209, 176, .03) 60%, rgba(63, 209, 176, 0)),
  radial-gradient(50% 55% at 100% 0%, rgba(122, 98, 240, .14), rgba(122, 98, 240, .056) 55%, rgba(122, 98, 240, 0)),
  radial-gradient(70% 70% at 100% 100%, rgba(245, 148, 58, .16), rgba(245, 148, 58, .064) 55%, rgba(245, 148, 58, 0)),
  radial-gradient(70% 85% at 0% 10%, rgba(238, 106, 77, .24), rgba(238, 106, 77, .096) 55%, rgba(238, 106, 77, 0)); }
/* El tipo de evidencia va primero (research.tsx): debajo se leería después de haberse creído el titular. */
.sello-b { margin: 0; display: flex; justify-content: space-between; gap: 12px; font: 400 11px/15px var(--mono); letter-spacing: 1.6px; color: var(--sello, var(--oro)); }
.anio-b { flex: none; color: var(--gris); letter-spacing: 1px; }
.titulo-b { margin: 8px 0 0; font: 700 16px/21px var(--sans); color: var(--tinta); }
.hallazgo-b { margin: 7px 0 0; font: 500 14px/21px var(--sans); color: var(--tinta-2); }
.cita-b { margin: 12px 0 0; font: 400 10.5px/15px var(--mono); color: var(--gris); }
.limite-b { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); font: 500 13.5px/20px var(--sans); color: var(--gris); }
.limite-b span { display: block; margin-bottom: 4px; font: 500 11px/1.4 var(--mono); letter-spacing: 1.4px; text-transform: uppercase; color: var(--oro); }
.fuente-b { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font: 700 13px/18px var(--sans); color: var(--oro); transition: opacity 120ms; }
.fuente-b:active { opacity: .6; }
.fuente-b i { font-style: normal; font-size: 12px; }
@media (hover: hover) and (pointer: fine) { .fuente-b:hover { color: var(--oro-claro); } }
@media (min-width: 700px) {
  .ficha-b { padding: 20px; }
  .titulo-b { font-size: 17.5px; line-height: 23px; }
  .hallazgo-b { font-size: 15px; line-height: 23px; }
  .cita-b { font-size: 11.5px; line-height: 17px; }
  .limite-b { font-size: 14px; line-height: 21px; }
  .fuente-b { font-size: 14px; }
}
/* La entrada de cada ficha: FadeInDown de la pantalla (25 px, 360 ms, cuadrática). */
.js .ficha-b { opacity: 0; transform: translateY(25px); }
.ficha-b.vista { opacity: 1; transform: none; transition: opacity 360ms cubic-bezier(.45, 0, .55, 1) var(--retraso, 0ms), transform 360ms cubic-bezier(.45, 0, .55, 1) var(--retraso, 0ms); }
.nota-final-b { max-width: 720px; margin-top: clamp(48px, 6vw, 72px); }
.nota-final-b p { margin: 0; font: 500 13.5px/1.6 var(--sans); color: var(--gris); }
.nota-final-b p + p { margin-top: 8px; }
.pagina-blog .cierre { padding-top: clamp(72px, 9vw, 120px); }
.pagina-blog .menu a[aria-current], .pie-pagina nav a[aria-current] { color: var(--tinta); }

/* ── Soporte (soporte.html) ──────────────────────────────────────────────
   La pantalla de Soporte de la app (app/soporte.tsx): el 📬 por piezas, el
   titular, la pastilla del plazo, el correo en oro, «Antes de escribir» con las
   filas de Preguntas.tsx dentro de un GrupoAurora «noche», y la ayuda en una
   TarjetaAurora «coral» con el filo de oro. Las medidas del celular son las de
   la app; desde 700 px crecen, como en el blog. En una columna, «Escribir al
   soporte» va fijo abajo, como el pie de PantallaAurora; con dos (desde 1000 px),
   en la cabecera, que se queda quieta al bajar si cabe entera. */
.cuerpo-s { padding: calc(64px + clamp(20px, 5vw, 64px)) 0 clamp(64px, 9vw, 112px); }
/* La pregunta tocada se queda en su sitio desde soporte.js: el anclaje del navegador se sumaría. */
body.pagina-soporte { overflow-anchor: none; }
.rejilla-s { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: clamp(56px, 7vw, 112px); align-items: start; }
@media (max-width: 999px) { .rejilla-s.contenedor { width: min(560px, 100% - 2 * var(--margen)); grid-template-columns: minmax(0, 1fr); gap: 0; } }
.cabeza-s { display: flex; flex-direction: column; align-items: center; text-align: center; }
@media (min-width: 1000px) { .cabeza-s.fija { position: sticky; top: 104px; } }

/* El 📬 (soporte/Buzon.tsx, `motion/emojisSoporte.ts`): las piezas en su caja del
   lienzo de 512, en %, para que crezcan con el buzón. La bandera gira dentro de una
   caja cuadrada de 440 centrada en el eje (295, 214). Lo que mueve, lo escribe el JS. */
.buzon-s { position: relative; flex: none; width: 140px; height: 140px; margin-top: 6px; pointer-events: none; }
.buzon-s .movil-s, .buzon-s .forma-s { position: absolute; inset: 0; }
.buzon-s img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; user-select: none; -webkit-user-drag: none; }
.carta-s, .giro-s, .eje-s { position: absolute; }
.carta-s { left: 18.75%; top: 36.133%; width: 25.977%; height: 34.18%; }
.giro-s { left: 14.648%; top: -1.172%; width: 85.938%; height: 85.938%; }
.giro-s img { left: 44.091%; top: 7.5%; width: 30.909%; height: 35.455%; }
.eje-s { left: 50.391%; top: 33.594%; width: 15.039%; height: 15.82%; }
/* La silueta crema del destello: el cuerpo de color como máscara (tintColor en la app). */
.crema-s { position: absolute; inset: 0; opacity: 0; background: #FFF1C2;
  -webkit-mask: url(../img/soporte/cuerpo-color.webp) center / 100% 100% no-repeat; mask: url(../img/soporte/cuerpo-color.webp) center / 100% 100% no-repeat; }
/* El aro del suelo: 0,76 × 0,15 del buzón, con los extremos redondos. */
.aro-s { position: absolute; left: 12%; bottom: -5%; width: 76%; height: 15%; border: 2.5px solid #FFE29A; border-radius: 999px; opacity: 0; }
.chispa-s { position: absolute; left: 50%; top: 50%; opacity: 0; }
.chispa-s svg { display: block; width: 100%; height: 100%; }
/* Antes de que llegue el JS: arriba, en gris y con la bandera bajada, como al montarse. */
.js .buzon-s .movil-s { transform: translateY(-140%); }
.js .buzon-s .color { opacity: 0; }
.js .buzon-s .giro-s { transform: rotate(90deg); }
/* Red de seguridad: si soporte.js no llegara a arrancar (sin red, un error), a los 4 s se
   ve todo en su sitio. En cuanto arranca, marca el buzón (`vivo-s`) y lo demás (`dentro`). */
.js .buzon-s:not(.vivo-s) .movil-s, .js .buzon-s:not(.vivo-s) .giro-s, .js .buzon-s:not(.vivo-s) .color,
.js .entra-s:not(.dentro), .js .pie-s:not(.dentro) { animation: seguro-s 1ms 4s forwards; }
@keyframes seguro-s { to { opacity: 1; transform: none; } }

.titulo-s { margin: 16px 0 0; font: 800 25px/31px var(--sans); letter-spacing: -.5px; color: var(--tinta); text-wrap: balance; }
.bajada-s { margin: 10px 0 0; max-width: 30em; font: 500 15px/22px var(--sans); color: var(--tinta-2); text-wrap: pretty; }
/* La pastilla del plazo: 32 de alto, radio 16, blanco a 0,06 con filo a 0,1 y el reloj en oro. */
.plazo-s { display: inline-flex; align-items: center; gap: 7px; height: 32px; margin: 14px 0 0; padding: 0 13px; border-radius: 16px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  font: 600 13px/17px var(--sans); color: var(--tinta-2); white-space: nowrap; }
.plazo-s svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--oro); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.correo-cab-s { display: flex; flex-direction: column; align-items: center; margin-top: 16px; }
.pide-s { margin: 0; font: 500 14px/20px var(--sans); color: var(--tinta-2); }
.correo-s { margin-top: 3px; font: 700 17px/23px var(--sans); letter-spacing: -.2px; color: var(--oro); overflow-wrap: anywhere; transition: opacity 120ms; }
.correo-s:active { opacity: .6; }
@media (hover: hover) and (pointer: fine) { .correo-s:hover { color: var(--oro-claro); } }
.idiomas-s { margin: 4px 0 0; font: 500 13px/18px var(--sans); color: var(--gris); }
.copiar-s { display: none; margin-top: 6px; padding: 4px 6px; font: 600 13px/18px var(--sans); color: var(--gris); text-decoration: underline; text-underline-offset: 2px; transition: opacity 120ms, color 200ms; }
.js .copiar-s { display: inline-block; }
.copiar-s:active { opacity: .6; }
.copiar-s.hecho { color: var(--verde); text-decoration: none; }
.boton-onb.hecho .txt-copiar { color: var(--verde); }
/* Desde 700 px la cabecera crece, como el blog; desde 1000, en su columna, también el buzón. */
@media (min-width: 700px) {
  .titulo-s { font-size: 30px; line-height: 36px; letter-spacing: -.7px; }
  .bajada-s { font-size: 16px; line-height: 25px; }
}
@media (min-width: 1000px) {
  .buzon-s { width: 168px; height: 168px; }
  .titulo-s { margin-top: 20px; font-size: 36px; line-height: 42px; letter-spacing: -.9px; }
  .bajada-s { margin-top: 12px; }
  .plazo-s { margin-top: 18px; }
  .correo-cab-s { margin-top: 20px; }
  .pide-s { font-size: 15px; line-height: 21px; }
  .correo-s { font-size: 20px; line-height: 27px; }
  .idiomas-s { font-size: 13.5px; }
}

/* «Escribir al soporte» (BotonOnb): entra fundiéndose (FadeIn de 420 ms). */
.pie-s { width: 100%; max-width: 360px; margin-top: 24px; }
.pie-s .boton-onb { text-decoration: none; }
.js .pie-s { opacity: 0; }
.pie-s.dentro { opacity: 1; transition: opacity 420ms cubic-bezier(.45, 0, .55, 1) var(--retraso, 0ms); }
@media (max-width: 999px) {
  .pie-s { position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; max-width: none; margin: 0; padding: 12px var(--margen) calc(14px + env(safe-area-inset-bottom)); background: rgba(11, 10, 18, .92); }
  .pie-s .boton-onb { max-width: 560px; margin-inline: auto; }
  body.pagina-soporte { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
}

/* Las tarjetas con aurora de la pantalla: AuroraTarjeta «ámbar» (el error) y «coral» (la ayuda). */
.error-s, .ayuda-s { position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; background: #13111A; }
.error-s::before, .ayuda-s::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.tono-ambar::before { background:
  radial-gradient(60% 14% at 45% 12%, rgba(63, 209, 176, .09), rgba(63, 209, 176, .03) 60%, rgba(63, 209, 176, 0)),
  radial-gradient(70% 45% at 70% 115%, rgba(122, 98, 240, .12), rgba(122, 98, 240, .048) 55%, rgba(122, 98, 240, 0)),
  radial-gradient(55% 70% at 100% 30%, rgba(232, 82, 126, .14), rgba(232, 82, 126, .056) 55%, rgba(232, 82, 126, 0)),
  radial-gradient(75% 85% at 0% 0%, rgba(245, 148, 58, .2), rgba(245, 148, 58, .08) 55%, rgba(245, 148, 58, 0)); }
.tono-coral::before { background:
  radial-gradient(60% 14% at 45% 12%, rgba(63, 209, 176, .09), rgba(63, 209, 176, .03) 60%, rgba(63, 209, 176, 0)),
  radial-gradient(50% 50% at 90% 0%, rgba(122, 98, 240, .12), rgba(122, 98, 240, .048) 55%, rgba(122, 98, 240, 0)),
  radial-gradient(60% 75% at 100% 70%, rgba(245, 185, 66, .15), rgba(245, 185, 66, .06) 55%, rgba(245, 185, 66, 0)),
  radial-gradient(70% 85% at 0% 0%, rgba(232, 82, 126, .2), rgba(232, 82, 126, .08) 55%, rgba(232, 82, 126, 0)); }
.error-s { width: 100%; margin-top: 18px; padding: 16px; border: 1px solid rgba(255, 255, 255, .08); text-align: left; }
.error-s .rotulo-s { margin: 0; color: var(--oro); }
.texto-error-s { margin: 8px 0 0; font: 500 14px/21px var(--sans); color: var(--tinta-2); }
.error-s .boton-onb { margin-top: 14px; }
.error-s.entra-error { animation: aparece-s 260ms cubic-bezier(.45, 0, .55, 1); }
@keyframes aparece-s { from { opacity: 0; } }

/* El rótulo de sección (Rotulo): mono 11/15, espaciado 1,6, en gris. */
.rotulo-s { margin: 30px 0 10px; font: 400 11px/15px var(--mono); letter-spacing: 1.6px; text-transform: uppercase; color: var(--gris); }
@media (min-width: 1000px) { .antes-s > .rotulo-s { margin-top: 8px; } }

/* FilaPregunta (soporte/Preguntas.tsx): el emoji de 34, la pregunta en 15/20, el + que
   gira a × con el muelle `firme` y se vuelve de oro; la respuesta en 14/21 con 64 de
   sangría, que se despliega en 340 ms con `salida` (Desplegable de ruta/Fases.tsx). */
.fila-p-s + .fila-p-s { border-top: 1px solid rgba(255, 255, 255, .07); }
.fila-p-s h3 { margin: 0; font: inherit; }
.fila-p-s button { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-align: left; transition: background-color 120ms; }
.fila-p-s button:active { background: rgba(255, 255, 255, .05); }
@media (hover: hover) and (pointer: fine) { .fila-p-s button:hover { background: rgba(255, 255, 255, .04); } }
.fila-p-s button img { width: 34px; height: 34px; flex: none; }
.fila-p-s button span { flex: 1; min-width: 0; font: 700 15px/20px var(--sans); color: var(--tinta); }
.mas-s { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--gris); stroke-width: 1.9; stroke-linecap: round; }
[aria-expanded="true"] > .mas-s { stroke: var(--oro); }
.js .despliega-s { height: 0; overflow: hidden; visibility: hidden; }
.cuerpo-p-s { padding: 0 18px 16px 64px; }
.cuerpo-p-s p { margin: 0; font: 500 14px/21px var(--sans); color: var(--tinta-2); overflow-wrap: break-word; }
.cuerpo-p-s p + p { margin-top: 8px; }
.cuerpo-p-s em, .ayuda-s em { font-style: normal; font-weight: 600; color: var(--tinta); }
.cuerpo-p-s a { color: var(--oro-claro); border-bottom: 1px solid rgba(245, 185, 66, .35); }
@media (min-width: 700px) {
  .fila-p-s button span { font-size: 16.5px; line-height: 23px; }
  .cuerpo-p-s p { font-size: 15px; line-height: 23px; }
}

/* La ayuda: la fila del 🛟 (FilaEmoji: 40, 16/21 y 13/18) y debajo las líneas de la
   portada (crisis.tsx), con el filo de oro de 1,5 a 0,55 de la tarjeta de la app. */
.ayuda-s { margin-top: 14px; border: 1.5px solid rgba(245, 185, 66, .55); scroll-margin-top: 84px; }
.cabeza-ayuda-s { display: flex; align-items: center; gap: 14px; padding: 14px 16px 6px; }
.cabeza-ayuda-s img { width: 40px; height: 40px; flex: none; }
.cabeza-ayuda-s h2 { margin: 0; font: 700 16px/21px var(--sans); color: var(--tinta); }
.cabeza-ayuda-s p { margin: 2px 0 0; font: 500 13px/18px var(--sans); color: var(--tinta-2); }
.dentro-ayuda-s { padding: 10px 16px 16px; }
.nota-ayuda-s { margin: 12px 0 0; font: 500 13px/19px var(--sans); color: var(--gris); }
.fuerte-ayuda-s { margin: 14px 0 0; font: 700 15px/21px var(--sans); color: var(--tinta); }
@media (min-width: 700px) {
  .cabeza-ayuda-s h2 { font-size: 17.5px; line-height: 23px; }
  .cabeza-ayuda-s p { font-size: 14.5px; line-height: 21px; }
}

.fecha-s { margin: 22px 0 0; font: 400 11px/15px var(--mono); letter-spacing: .4px; color: var(--gris); }

/* La cascada de la pantalla: FadeInDown (25 px, 380 ms, cuadrática) en cuanto el buzón se posa. */
.js .entra-s { opacity: 0; transform: translateY(25px); }
.entra-s.dentro { opacity: 1; transform: none; transition: opacity 380ms cubic-bezier(.45, 0, .55, 1) var(--retraso, 0ms), transform 380ms cubic-bezier(.45, 0, .55, 1) var(--retraso, 0ms); }

/* ── Movimiento reducido: sin desplazamientos, con fundidos cortos ──────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aurora .luz, .aurora .velo, .portada .bajar::after, .vivo .semana-letras span.hoy i, .halo-empezar, .txt-empezar { animation: none !important; }
  .halo-empezar { opacity: .7; }
  .txt-empezar { opacity: .92; }
  .entra, .asoma { transform: none !important; }
  .entra.dentro, .asoma.visto { transition: opacity 300ms ease !important; }
  .item-h { transform: none !important; }
  .cap-h { transition-duration: 0ms; }
  .ficha-b { transform: none !important; }
  .ficha-b.vista { transition: opacity 300ms ease !important; }
  /* Soporte: como en la app con «Reducir movimiento», todo ya puesto y el buzón quieto. */
  .js .entra-s, .js .pie-s { opacity: 1; transform: none !important; transition: none !important; }
  .js .buzon-s .movil-s, .js .buzon-s .giro-s { transform: none; }
  .js .buzon-s .color { opacity: 1; }
}