/* Colores de la portada. El decorativo y el de texto nunca son el mismo hex. */
:root {
  --amarillo: #FFDD67;        /* fondo de la portada: solo superficies */
  --crema: #FFF6D6;           /* página de día */
  --azul: #467591;            /* "DORMIRSE": solo títulos grandes (3,75:1 sobre amarillo) */
  --azul-texto: #2F5670;      /* 5,88:1 sobre amarillo */
  --cafe: #664F26;            /* boca y ojos: texto (5,82:1 sobre amarillo, 7,16 sobre crema) */
  --tinta: #3A3020;           /* texto largo (9,73:1 sobre amarillo) */
  --noche: #13212E;           /* archivo y modo noche */
  --noche-2: #1B2F40;
  --noche-3: #25405A;
  --nube: #E8EEF3;            /* texto sobre noche (13,98:1) */
  --niebla: #9FB8CB;          /* texto secundario sobre noche (7,93:1) */
  --luna: #FFDD67;            /* acento sobre noche (12,29:1) */

  --fondo: var(--crema);
  --texto: var(--tinta);
  --texto-2: var(--cafe);
  --titulo: var(--azul-texto);
  --superficie: #FFFFFF;
  --borde: rgba(102, 79, 38, .18);
  --hero: var(--amarillo);

  --radio: 18px;
  --radio-chico: 12px;
  --pastilla: 999px;
  --curva: cubic-bezier(.22, .8, .24, 1);
  --display: 'Oswald', 'Arial Narrow', sans-serif;
  --cuerpo: 'Figtree', 'Segoe UI', sans-serif;
  --reproductor: 84px;
}
:root[data-tema="noche"] {
  --fondo: var(--noche);
  --texto: var(--nube);
  --texto-2: var(--niebla);
  --titulo: var(--luna);
  --superficie: var(--noche-2);
  --borde: rgba(159, 184, 203, .18);
  --hero: var(--noche);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 400 17px/1.6 var(--cuerpo);
  padding-bottom: calc(var(--reproductor) + env(safe-area-inset-bottom));
  transition: background-color .5s var(--curva), color .5s var(--curva);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--azul-texto); outline-offset: 3px; border-radius: 6px; }
[data-tema="noche"] :focus-visible, .noche :focus-visible { outline-color: var(--luna); }
.envoltura { width: min(1120px, 100% - 32px); margin-inline: auto; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Lo que se muestra solo con JavaScript llega con hidden; las clases con display no deben pisarlo. */
[hidden] { display: none !important; }
/* Salto al archivo: invisible hasta que llega el foco del teclado. */
.salto {
  position: absolute; left: 16px; top: 12px; z-index: 40; padding: 10px 16px; border-radius: var(--pastilla);
  background: var(--azul-texto); color: #FFFFFF; font-weight: 600; text-decoration: none; translate: 0 -200%;
}
.salto:focus-visible { translate: 0 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.02; letter-spacing: .005em; margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }

/* Encabezado */
.cabecera {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--hero) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}
.cabecera .envoltura { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.marca img { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 0 0 1px var(--borde); }
.marca span { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; color: var(--titulo); line-height: 1; }
.marca small { display: block; font-size: 11px; letter-spacing: .32em; color: var(--texto-2); margin-top: 3px; }
.menu { display: flex; gap: 4px; }
.menu a { text-decoration: none; font-weight: 500; font-size: 15px; padding: 10px 12px; border-radius: var(--pastilla); color: var(--texto); }
.menu a:hover { background: color-mix(in srgb, var(--texto) 8%, transparent); }
.tema {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--borde); border-radius: var(--pastilla); background: var(--superficie); cursor: pointer; font-weight: 500; font-size: 14px;
}
.tema svg { width: 18px; height: 18px; }
@media (max-width: 760px) { .menu { display: none; } }
.marca span { white-space: nowrap; }
/* En el teléfono el botón de tema es solo el ícono: el texto queda para el lector de pantalla. */
@media (max-width: 560px) {
  .tema { width: 44px; padding: 0; justify-content: center; }
  .tema span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Hero: el amarillo de la portada, de día y de noche. El logo va sin tarjeta: su fondo es
   el mismo amarillo, así que la cara queda flotando en el centro. Adentro del hero valen
   siempre los colores de día (sobre amarillo, el texto claro de la noche no se lee). */
.hero {
  --texto: var(--tinta); --texto-2: var(--cafe); --titulo: var(--azul-texto);
  background: var(--amarillo); color: var(--tinta); overflow: hidden;
  border-end-start-radius: 48px; border-end-end-radius: 48px;
}
.hero .envoltura { display: grid; justify-items: center; text-align: center; padding-block: 16px 72px; }
.hero h1 { font-size: clamp(36px, 4.8vw, 66px); color: var(--azul-texto); text-transform: uppercase; max-width: 19ch; margin-top: 4px; }
.hero h1 em { font-style: normal; color: var(--cafe); }
.bajada { font-size: clamp(18px, 2vw, 21px); max-width: 36ch; margin: 20px auto 30px; color: var(--tinta); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px;
  border-radius: var(--pastilla); border: 0; cursor: pointer; font-weight: 600; font-size: 16px; text-decoration: none;
  transition: transform .18s var(--curva), background-color .2s;
}
.boton:active { transform: scale(.97); }
.boton svg { width: 20px; height: 20px; flex: none; }
.boton-lleno { background: var(--azul-texto); color: #FFFFFF; }
.boton-lleno:hover { background: #24465C; }
.boton-borde { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 2px currentColor; }
[data-tema="noche"] .boton-lleno, .noche .boton-lleno { background: var(--luna); color: var(--noche); }
[data-tema="noche"] .boton-lleno:hover, .noche .boton-lleno:hover { background: #FFE88F; }
.cifras { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; margin: 40px 0 0; padding: 0; list-style: none; }
.cifras li { display: grid; justify-items: center; }
.cifras b { font-family: var(--display); font-weight: 600; font-size: 34px; line-height: 1; color: var(--titulo); }
.cifras span { font-size: 14px; color: var(--texto-2); }
.portada { position: relative; width: min(360px, 74vw, 40vh); margin: 0; }
.portada .logo-vivo { background: transparent; }
/* Adentro del hero los botones y el foco son los de día también en el tema noche. */
:root[data-tema] .hero .boton-lleno { background: var(--azul-texto); color: #FFFFFF; }
:root[data-tema] .hero .boton-lleno:hover { background: #24465C; }
.hero .boton-borde { color: var(--tinta); }
:root[data-tema] .hero :focus-visible { outline-color: var(--azul-texto); }
@media (max-width: 560px) {
  .hero { border-end-start-radius: 32px; border-end-end-radius: 32px; }
  .hero .envoltura { padding-block: 8px 56px; }
  .portada { width: min(300px, 78vw, 38vh); }
}

/* Logo vivo: la portada armada con sus capas reales (scripts/separar-capas.ps1).
   Posiciones en % de la portada de 640 px, sacadas de assets/capas/capas.json.
   Sin animaciones se ve idéntico a la imagen. */
.logo-vivo { position: relative; display: block; aspect-ratio: 1; width: 100%; background: var(--amarillo); overflow: hidden; }
.logo-vivo .capa { position: absolute; height: auto; max-width: none; }
.capa-z1 { left: 31.094%; top: 25.469%; width: 10.625%; }
.capa-z2 { left: 42.031%; top: 16.719%; width: 11.875%; }
.capa-z3 { left: 55.312%; top: 13.281%; width: 18.438%; }
.capa-ojo1 { left: 29.688%; top: 45.469%; width: 15.469%; }
.capa-ojo2 { left: 50.625%; top: 35.625%; width: 15.469%; }
.capa-boca { left: 47.812%; top: 52.188%; width: 15.469%; }
.capa-texto { left: 21.25%; top: 72.188%; width: 59.062%; }

/* Secciones */
section { scroll-margin-top: 72px; }
.seccion { padding-block: 88px; }
.seccion h2 { font-size: clamp(34px, 4.6vw, 56px); color: var(--titulo); text-transform: uppercase; }
.seccion .intro { max-width: 52ch; color: var(--texto-2); margin: 14px 0 36px; font-size: 18px; }

/* Para esta noche */
.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 24px;
  display: grid; gap: 10px; align-content: start;
}
.tarjeta .etiqueta { font-family: var(--display); font-weight: 500; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--texto-2); }
.tarjeta h3 { font-size: 26px; color: var(--texto); text-transform: none; font-weight: 500; }
.tarjeta p { margin: 0; color: var(--texto-2); font-size: 15px; }
.tarjeta .boton { justify-self: start; margin-top: 8px; min-height: 44px; padding: 0 18px; font-size: 15px; }
@media (max-width: 860px) { .tres { grid-template-columns: 1fr; } }

/* Archivo: siempre de noche */
.noche {
  --texto: var(--nube); --texto-2: var(--niebla); --titulo: var(--luna); --superficie: var(--noche-2); --borde: rgba(159, 184, 203, .18);
  background: var(--noche); color: var(--nube);
}
.filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 20px; }
.buscador { position: relative; flex: 1 1 320px; }
.buscador svg { position: absolute; left: 16px; top: 50%; translate: 0 -50%; width: 20px; height: 20px; color: var(--niebla); pointer-events: none; }
.buscador input {
  width: 100%; min-height: 52px; padding: 0 16px 0 46px; border-radius: var(--pastilla);
  border: 1px solid var(--borde); background: var(--noche-2); color: var(--nube); font-size: 17px;
}
.buscador input::placeholder { color: var(--niebla); opacity: 1; }
.fichas { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha {
  min-height: 44px; padding: 0 16px; border-radius: var(--pastilla); border: 1px solid var(--borde);
  background: transparent; color: var(--nube); cursor: pointer; font-weight: 500; font-size: 15px;
}
.ficha[aria-pressed="true"] { background: var(--luna); color: var(--noche); border-color: var(--luna); }
.ficha .n { opacity: .72; font-variant-numeric: tabular-nums; margin-left: 4px; }
.resultado { color: var(--niebla); font-size: 15px; margin: 0 0 8px; min-height: 24px; }
.lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--borde); }
.episodio {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center;
  padding: 14px 4px; border-bottom: 1px solid var(--borde);
}
.episodio .num { font-family: var(--display); font-weight: 500; font-size: 26px; color: var(--niebla); font-variant-numeric: tabular-nums; text-align: right; }
.episodio .num.sin { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.episodio h3 { font-family: var(--cuerpo); font-weight: 600; font-size: 17px; line-height: 1.35; text-transform: none; letter-spacing: 0; text-wrap: pretty; }
.episodio .meta { font-size: 14px; color: var(--niebla); margin-top: 2px; }
.episodio .meta .seguir { color: var(--luna); font-weight: 600; }
.episodio.sonando h3 { color: var(--luna); }
.play {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--borde); background: var(--noche-2);
  display: grid; place-items: center; cursor: pointer; color: var(--nube); transition: background-color .2s, transform .18s var(--curva);
}
.play:hover { background: var(--noche-3); }
.play:active { transform: scale(.94); }
.play svg { width: 20px; height: 20px; }
.episodio.sonando .play { background: var(--luna); color: var(--noche); border-color: var(--luna); }
.mas { display: flex; justify-content: center; margin-top: 28px; }
.vacio { padding: 40px 0; color: var(--niebla); text-align: center; }
@media (max-width: 560px) {
  .episodio { grid-template-columns: 44px 1fr auto; gap: 12px; }
  .episodio .num { font-size: 20px; }
}

/* Apoyar */
.apoyo { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
.apoyo .principal { background: var(--amarillo); color: var(--tinta); border: 0; padding: 32px; }
.apoyo .principal .etiqueta, .apoyo .principal p { color: var(--cafe); }
.apoyo .principal h3 { font-size: 40px; font-family: var(--display); font-weight: 600; color: var(--azul-texto); text-transform: uppercase; }
.apoyo .principal .boton { background: var(--azul-texto); color: #FFFFFF; }
.otras { display: grid; gap: 12px; }
.otra {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; text-decoration: none;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 16px 18px; min-height: 64px;
  transition: border-color .2s, transform .18s var(--curva);
}
.otra:hover { border-color: var(--texto-2); }
.otra:active { transform: scale(.99); }
.otra b { font-weight: 600; }
.otra span { grid-column: 1; font-size: 14px; color: var(--texto-2); }
.otra svg { grid-row: 1 / span 2; grid-column: 2; width: 20px; height: 20px; color: var(--texto-2); }
.aclaracion { font-size: 14px; color: var(--texto-2); margin-top: 16px; }
@media (max-width: 860px) { .apoyo { grid-template-columns: 1fr; } }

/* Mandá tu audio */
.audio { background: var(--hero); transition: background-color .5s var(--curva); }
.audio .envoltura { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.audio p { max-width: 50ch; margin: 14px 0 0; }
.boton-wa { background: #1F7A4D; color: #FFFFFF; }
.boton-wa:hover { background: #196640; }
@media (max-width: 760px) { .audio .envoltura { grid-template-columns: 1fr; } }

/* Pie */
.pie { padding-block: 48px 32px; font-size: 15px; color: var(--texto-2); border-top: 1px solid var(--borde); }
.pie .envoltura { display: grid; gap: 20px; }
.redes { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.redes a { text-decoration: none; font-weight: 500; color: var(--texto); padding: 8px 0; }
.redes a:hover { text-decoration: underline; text-underline-offset: 4px; }
.propuesta { font-size: 13px; border: 1px dashed var(--borde); border-radius: var(--radio-chico); padding: 12px 14px; margin: 0; }

/* Reproductor */
.reproductor {
  position: fixed; inset: auto 0 0 0; z-index: 30; min-height: var(--reproductor);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--noche) 94%, transparent); color: var(--nube);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(159, 184, 203, .2);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center;
  translate: 0 100%; transition: translate .45s var(--curva);
}
.reproductor.visible { translate: 0 0; }
.rp-info { display: flex; gap: 12px; align-items: center; min-width: 0; }
.rp-info .logo-vivo { width: 52px; border-radius: 10px; flex: none; }
.rp-texto { min-width: 0; }
.rp-sub.error { color: #FFB4A8; }
.rp-titulo { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-sub { font-size: 13px; color: var(--niebla); font-variant-numeric: tabular-nums; }
.rp-mandos { display: flex; align-items: center; gap: 8px; }
.rp-mandos button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--nube); cursor: pointer; display: grid; place-items: center; }
.rp-mandos button:hover { background: var(--noche-3); }
.rp-mandos svg { width: 22px; height: 22px; }
.rp-mandos .rp-play { width: 56px; height: 56px; background: var(--luna); color: var(--noche); }
.rp-mandos .rp-play:hover { background: #FFE88F; }
.rp-mandos .rp-play svg { width: 26px; height: 26px; }
.rp-derecha { display: flex; align-items: center; gap: 12px; justify-content: flex-end; min-width: 0; }
.rp-barra { flex: 1; max-width: 280px; accent-color: var(--luna); height: 44px; }
.temporizador {
  min-height: 44px; padding: 0 14px; border-radius: var(--pastilla); border: 1px solid rgba(159, 184, 203, .3);
  background: transparent; color: var(--nube); cursor: pointer; font-size: 14px; font-weight: 500; white-space: nowrap; display: inline-flex; gap: 8px; align-items: center;
}
.temporizador svg { width: 18px; height: 18px; }
.temporizador.activo { background: var(--luna); color: var(--noche); border-color: var(--luna); }
@media (max-width: 860px) {
  :root { --reproductor: 132px; }
  .reproductor { grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 6px 12px; }
  .rp-info { grid-column: 1; }
  .rp-mandos { grid-column: 2; grid-row: 1; }
  .rp-mandos .rp-atras, .rp-mandos .rp-adelante { display: none; }
  .rp-derecha { grid-column: 1 / -1; justify-content: space-between; }
  .rp-barra { max-width: none; }
}

/* ---------- Movimiento ---------- */
:root {
  --ease-salida: cubic-bezier(0.23, 1, 0.32, 1);      /* entrar */
  --ease-mover: cubic-bezier(0.77, 0, 0.175, 1);      /* moverse en pantalla */
}

/* El texto del hero sube una vez al cargar. */
@keyframes subir { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
.hero h1, .hero .bajada, .hero .acciones, .hero .cifras { animation: subir .7s var(--ease-salida) both; }
.hero h1 { animation-delay: .06s; } .hero .bajada { animation-delay: .12s; } .hero .acciones { animation-delay: .18s; } .hero .cifras { animation-delay: .24s; }

/* Entrada del logo, una vez: los ojos se asientan (se está durmiendo), la boca
   respira y las zetas nacen de a una desde la boca, de la chica a la grande.
   app.js quita .con-entrada al terminar, para que no se repita al frenar el ciclo. */
@keyframes ojos-caen { from { transform: translateY(-9%); } to { transform: none; } }
@keyframes boca-respira { 0%, 100% { transform: none; } 50% { transform: scale(1.06); } }
@keyframes z-nace { from { opacity: 0; transform: translate(-30%, 40%) scale(.72); } to { opacity: 1; transform: none; } }
.logo-vivo.con-entrada .capa-ojo1,
.logo-vivo.con-entrada .capa-ojo2 { animation: ojos-caen .7s var(--ease-salida) both; }
.logo-vivo.con-entrada .capa-boca { animation: boca-respira .9s var(--ease-mover) .1s both; }
.logo-vivo.con-entrada .capa-z1 { animation: z-nace .55s var(--ease-salida) .35s both; }
.logo-vivo.con-entrada .capa-z2 { animation: z-nace .55s var(--ease-salida) .53s both; }
.logo-vivo.con-entrada .capa-z3 { animation: z-nace .55s var(--ease-salida) .71s both; }

/* Mientras suena un episodio: las zetas suben, se desvanecen y vuelven a nacer,
   escalonadas; la boca respira. Es el indicador de "reproduciendo". Cada capa lleva
   .flota por su cuenta: al pausar, app.js se la quita recién al final de su vuelta,
   así queda quieta en su lugar y nunca a mitad de camino. */
@keyframes z-flota {
  0% { opacity: 1; transform: none; }
  40% { opacity: 0; transform: translate(16%, -28%) scale(1.08); }
  41% { opacity: 0; transform: translate(-30%, 40%) scale(.72); }
  72%, 100% { opacity: 1; transform: none; }
}
.logo-vivo .capa-z1.flota { animation: z-flota 4.2s var(--ease-mover) 0s infinite; }
.logo-vivo .capa-z2.flota { animation: z-flota 4.2s var(--ease-mover) .35s infinite; }
.logo-vivo .capa-z3.flota { animation: z-flota 4.2s var(--ease-mover) .7s infinite; }
.logo-vivo .capa-boca.flota { animation: boca-respira 4.2s var(--ease-mover) 0s infinite; }

/* ---------- Carga inicial ----------
   El logo se arma sobre amarillo en el centro de la pantalla y después viaja a su lugar en
   el hero mientras el fondo se desvanece (app.js mide las dos cajas y lo mueve). Una vez por
   sesión (tema.js). pointer-events: none: nunca bloquea un clic. Sin JavaScript no existe. */
.carga { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; pointer-events: none; }
html[data-intro="mostrando"] .carga, html[data-intro="saliendo"] .carga { display: grid; }
.carga-fondo { position: absolute; inset: 0; background: var(--amarillo); }
.carga .logo-vivo { position: relative; width: min(64vmin, 400px); background: transparent; }
@keyframes logo-aparece { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes texto-sube { from { opacity: 0; transform: translateY(16%); } to { opacity: 1; transform: none; } }
html[data-intro="mostrando"] .carga .logo-vivo { animation: logo-aparece .5s var(--ease-salida) both; }
.logo-carga .capa-ojo1, .logo-carga .capa-ojo2 { animation: ojos-caen .7s var(--ease-salida) .05s both; }
.logo-carga .capa-boca { animation: boca-respira .8s var(--ease-mover) .12s both; }
.logo-carga .capa-z1 { animation: z-nace .55s var(--ease-salida) .3s both; }
.logo-carga .capa-z2 { animation: z-nace .55s var(--ease-salida) .46s both; }
.logo-carga .capa-z3 { animation: z-nace .55s var(--ease-salida) .62s both; }
.logo-carga .capa-texto { animation: texto-sube .6s var(--ease-salida) .8s both; }
/* Mientras está la carga, el logo del hero espera escondido (el de la carga aterriza encima)
   y el texto del hero queda en pausa hasta que el logo aterrizó: si subiera durante el viaje,
   el logo le pasaría por encima. */
html[data-intro="mostrando"] .portada .logo-vivo, html[data-intro="saliendo"] .portada .logo-vivo { visibility: hidden; }
/* Un toque durante la carga la adelanta (app.js), pero no tiene que caer en un botón del hero
   que todavía no se ve. */
html[data-intro="mostrando"] .hero, html[data-intro="saliendo"] .hero { pointer-events: none; }
html[data-intro="mostrando"] .hero h1, html[data-intro="mostrando"] .hero .bajada,
html[data-intro="mostrando"] .hero .acciones, html[data-intro="mostrando"] .hero .cifras,
html[data-intro="saliendo"] .hero h1, html[data-intro="saliendo"] .hero .bajada,
html[data-intro="saliendo"] .hero .acciones, html[data-intro="saliendo"] .hero .cifras { animation-play-state: paused; }

/* ---------- Entradas de cada sección ----------
   Lo oculto existe solo con html[data-entradas] (lo pone tema.js si hay movimiento). Cuando la
   sección entra en pantalla, app.js le pone .visto: las palabras del título suben dentro de su
   máscara (50 ms entre una y otra), después el párrafo, y los bloques en el orden de data-entra.
   Todo corre una vez; al terminar, app.js quita data-entra para devolverle a cada botón su
   propia transición. Las filas del archivo, escalonadas con tope en la 12. */
.palabra { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.palabra > span { display: inline-block; transition: transform .8s var(--ease-salida); }
.palabra:nth-child(2) > span { transition-delay: 50ms; }
.palabra:nth-child(3) > span { transition-delay: 100ms; }
.palabra:nth-child(4) > span { transition-delay: 150ms; }
.palabra:nth-child(n+5) > span { transition-delay: 200ms; }
html[data-entradas] .seccion:not(.visto) .palabra > span { transform: translateY(110%); }

html[data-entradas] .seccion [data-entra] { transition: opacity .65s var(--ease-salida), transform .65s var(--ease-salida); }
html[data-entradas] .seccion:not(.visto) [data-entra] { opacity: 0; transform: translateY(22px); }
html[data-entradas] .seccion [data-entra="1"] { transition-delay: .2s; }
html[data-entradas] .seccion [data-entra="2"] { transition-delay: .3s; }
html[data-entradas] .seccion [data-entra="3"] { transition-delay: .38s; }
html[data-entradas] .seccion [data-entra="4"] { transition-delay: .46s; }
html[data-entradas] .seccion [data-entra="5"] { transition-delay: .54s; }
html[data-entradas] .seccion [data-entra="6"] { transition-delay: .62s; }

html[data-entradas] .lista > li { transition: opacity .5s var(--ease-salida), transform .5s var(--ease-salida); transition-delay: .72s; }
html[data-entradas] .seccion:not(.visto) .lista > li { opacity: 0; transform: translateY(14px); }
html[data-entradas] .lista > li:nth-child(1) { transition-delay: .34s; }
html[data-entradas] .lista > li:nth-child(2) { transition-delay: .37s; }
html[data-entradas] .lista > li:nth-child(3) { transition-delay: .4s; }
html[data-entradas] .lista > li:nth-child(4) { transition-delay: .43s; }
html[data-entradas] .lista > li:nth-child(5) { transition-delay: .46s; }
html[data-entradas] .lista > li:nth-child(6) { transition-delay: .49s; }
html[data-entradas] .lista > li:nth-child(7) { transition-delay: .52s; }
html[data-entradas] .lista > li:nth-child(8) { transition-delay: .55s; }
html[data-entradas] .lista > li:nth-child(9) { transition-delay: .58s; }
html[data-entradas] .lista > li:nth-child(10) { transition-delay: .61s; }
html[data-entradas] .lista > li:nth-child(11) { transition-delay: .64s; }
html[data-entradas] .lista > li:nth-child(12) { transition-delay: .67s; }

/* Movimiento reducido: menos y más suave, no cero. Nada se desplaza; mientras suena,
   las zetas solo laten en opacidad para que se sepa que está reproduciendo. */
@keyframes z-late { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero h1, .hero .bajada, .hero .acciones, .hero .cifras,
  .logo-vivo.con-entrada .capa { animation: none; }
  .logo-vivo .capa-z1.flota, .logo-vivo .capa-z2.flota, .logo-vivo .capa-z3.flota { animation-name: z-late; animation-timing-function: ease-in-out; }
  .logo-vivo .capa-boca.flota { animation: none; }
  .reproductor { transition: none; }
}

/* Al imprimir: todo a la vista, sin carga ni reproductor (las secciones que nunca se
   bajaron seguirían ocultas). */
@media print {
  .carga, .reproductor, .salto, .tema { display: none !important; }
  html[data-entradas] .seccion [data-entra], html[data-entradas] .lista > li { opacity: 1 !important; transform: none !important; transition: none !important; }
  html[data-entradas] .palabra > span { transform: none !important; transition: none !important; }
  .portada .logo-vivo { visibility: visible !important; }
  body { padding-bottom: 0; }
}