/* ==========================================================================
   Tsugiwa — landing pública
   Paleta y tipografía: docs/briefing.md §9, alineadas con src/styles/tokens.css
   (PR #39). Las superficies "soft" son las que ya resolvió el prototipo.
   ========================================================================== */

:root{
  /* Paleta del briefing §9 */
  --paper:#FCFCFC;
  --paper-raised:#FFFFFF;
  --ink:#051923;
  --ink-soft:#0F2A38;
  --stone:#5C666C;
  --stone-line:#D6D6D6;
  --indigo:#003554;
  --shu:#F17300;
  --shu-deep:#D96700;
  /* El bermellón CUANDO ES TEXTO sobre superficie clara, que no es el mismo
     tono que cuando es fondo o relleno. Medido en el navegador: --shu-deep
     sobre el beige de las bandas daba 3,20:1 y sobre blanco 3,57:1, y el
     pretítulo va a 14px normales, así que AA le pide 4,5:1 — fallaba en todas
     las secciones de la página. Éste da 5,04:1 sobre el beige y 5,62:1 sobre
     blanco, que es el peor caso de los dos. El token de marca no se toca: se
     sigue usando tal cual para el hover del botón y para los tornillos del
     turnomatic, donde no hay texto encima. */
  --shu-texto:#A64F00;
  --shu-soft:#FDE6D2;
  --moss:#0A6847;
  --moss-soft:#DCEFE6;
  --amber:#8A6508;

  /* Superficies propias de la landing */
  /* Beige cálido. Era la alternancia de fondo del cuerpo y ya no lo es: el
     cuerpo va todo en blanco y quien marca las secciones es el filete. Se
     queda porque le siguen quedando cuatro usos de verdad, todos como
     SUPERFICIE PEQUEÑA sobre blanco y ninguno como fondo de sección:
       · el chip de `code`,
       · el papel del ticket del turnomatic (`.papel-fondo` y el trozo de en
         medio), que es crema a propósito porque un ticket blanco sobre una
         sección blanca desaparecía,
       · el hover de los botones de idioma. */
  --paper-alt:#F7F2E9;
  --ink-panel:#0B2432;
  /* El papel del héroe. NO es --paper: tiene que valer exactamente el mismo
     blanco que el papel de los doce planos de vídeo, que es #FFFFFF medido en
     los archivos servidos (docs/video/LEEME.md). Sección, fondo de carga del
     vídeo y degradado superior beben los tres de aquí para que nadie pueda
     cambiar uno y dejar los otros atrás: eso es justo lo que produjo el
     recuadro visible en móvil. */
  /* Una sola fuente: el color se escribe UNA vez, en componentes, y la forma
     sólida se deriva de ella. Dos constantes con el mismo valor escrito dos
     veces vuelven a ser dos cosas que se pueden separar, que es el fallo que
     estamos arreglando. Lo señaló el Consejero en el contraste de #63. */
  --papel-hero-rgb:255 255 255;
  --papel-hero:rgb(var(--papel-hero-rgb));

  --radius-s:6px;
  --radius-m:10px;
  --border-thin:1px solid var(--stone-line);

  /* Foco: indigo sobre papel (12,5:1). En superficies oscuras se recalcula
     abajo a bermellón: el indigo sobre tinta daba 1,40:1 y era invisible. */
  --focus:var(--indigo);

  /* Tres registros, dos familias (ver fonts.css):
     --cartel  Super Jello, sólo para los titulares gordos del héroe
     --display Instrument Sans en negrita, para los encabezados de sección
     --texto   Instrument Sans, para leer */
  --cartel:'Super Jello', system-ui, sans-serif;
  --display:'Instrument Sans', system-ui, sans-serif;
  --texto:'Instrument Sans', system-ui, sans-serif;

  --wrap:1140px;
  --gutter:24px;
  /* Alto real de la cabecera fija, medido en el navegador: 67px. El primer
     eslogan del héroe tiene que empezar POR DEBAJO de ella o su primera línea
     queda tapada por el logo, que es lo que reportó el titular. Vive aquí, con
     las demás medidas de maquetación, y no arriba con los colores: ahí chocaba
     con los tokens que añade la rama del vídeo en ese mismo punto. */
  --alto-cabecera:68px;
}

*,*::before,*::after{box-sizing:border-box;}

/* la cabecera es sticky: sin esto, saltar a una ancla deja el titular debajo */
[id]{scroll-margin-top:124px;}

html{-webkit-text-size-adjust:100%;}

/* Barra de scroll de 1px. Sólo WebKit y Blink pueden hacerla tan fina; en
   Firefox `thin` es lo más estrecho que existe y ronda los 8px.
   Nota consciente: a 1px la barra deja de poder arrastrarse. Rueda, teclado y
   gesto táctil siguen funcionando igual, que es lo que usa casi todo el mundo,
   pero conviene saber que se pierde el arrastre. */
/* Los dos extremos de la paleta: tinta sobre papel. */
*{scrollbar-width:thin;scrollbar-color:var(--ink) var(--paper);}
::-webkit-scrollbar{width:1px;height:1px;}
::-webkit-scrollbar-track{background:var(--paper);}
::-webkit-scrollbar-thumb{background:var(--ink);}
::-webkit-scrollbar-corner{background:var(--paper);}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--texto);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

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

/* Todos los encabezados en Thunder, la misma voz que los titulares del héroe.
   Instrument Sans se queda para leer y para las etiquetas. */
h1,h2,h3{font-family:var(--cartel);font-weight:400;margin:0;}

h1{
  font-family:var(--cartel);font-weight:400;
  font-size:clamp(2.6rem,5.2vw,4.2rem);
  letter-spacing:-0.016em;
  line-height:1.06;
  letter-spacing:-0.018em;
  max-width:21ch;
  text-wrap:balance;
}

h2{
  /* Thunder es muy condensada: a igualdad de cuerpo ocupa bastante menos, así
     que los encabezados suben respecto a lo que pedía Instrument Sans. */
  font-size:clamp(1.75rem,3.2vw,2.5rem);
  line-height:1.14;
  letter-spacing:-0.014em;
  max-width:22ch;
}

h3{font-size:1.15rem;line-height:1.25;letter-spacing:-0.008em;}

p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}

a{color:inherit;}

code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:0.9em;
  background:var(--paper-alt);
  border:var(--border-thin);
  border-radius:4px;
  padding:1px 5px;
}

:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
  border-radius:3px;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--ink);color:var(--paper);
  padding:10px 16px;border-radius:0 0 var(--radius-s) 0;
  font-weight:600;text-decoration:none;
}
.skip:focus{left:0;}

.wrap{
  width:100%;max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap.narrow > *{max-width:68ch;}

/* ------------------------------- botones ------------------------------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--texto);
  font-size:0.9375rem;font-weight:600;line-height:1;
  padding:13px 22px;
  border-radius:var(--radius-s);
  border:1px solid transparent;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}

.btn-ghost{background:var(--paper-raised);color:var(--ink-soft);border-color:var(--stone-line);}
.btn-ghost:hover{border-color:var(--indigo);color:var(--indigo);}

.btn-s{padding:9px 15px;font-size:0.875rem;}
.btn-l{padding:16px 30px;font-size:1rem;}
.btn-block{display:flex;width:100%;margin-top:auto;}

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

/* Transparente sobre el vídeo y sólida en cuanto lo deja atrás. El cambio lo
   dispara js/portada.js con un IntersectionObserver; sin JavaScript se queda
   sólida desde el principio, que es el estado seguro. */
.site-head{
  position:sticky;top:0;z-index:20;
  background:rgba(252,252,252,.92);
  backdrop-filter:blur(8px);
  border-bottom:var(--border-thin);
  transition:background-color .3s ease,border-color .3s ease,color .3s ease;
}
/* Fija, no pegajosa: así el vídeo empieza en el píxel 0 y la cabecera flota
   ENCIMA de él. Con sticky ocupaba sitio en el flujo y el vídeo arrancaba por
   debajo, con lo que la marca blanca quedaba sobre fondo blanco. */
.js .site-head{
  position:fixed;top:0;left:0;right:0;
  background:transparent;border-bottom-color:transparent;
  backdrop-filter:none;
  color:var(--ink);
}
/* Nada de barra ni de línea sobre el vídeo. Como el plano es blanco, la marca
   va en tinta con halo blanco, igual que los titulares. */
.js .site-head .brand{color:var(--ink);text-shadow:0 0 14px #fff, 0 0 5px #fff;}
/* Sin halo sobre el símbolo: el papel del dibujo ya es blanco y el resplandor
   sólo conseguía lavar el kanji de dentro del enso. */
.js .site-head .brand img{filter:none;}
.js .site-head.head-solida .brand{text-shadow:none;}

/* La píldora de idiomas va sobre vídeo: sin fondo propio, el contraste depende
   del fotograma y el audit lo cazó a 1:1. Con fondo blanco se sostiene siempre,
   y sobre papel blanco además desaparece la caja. */
.js .site-head .idiomas{
  border-color:var(--stone-line);
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(6px);
}
.js .site-head .idiomas > [aria-current]{background:var(--ink);color:var(--paper);}
.js .site-head .idiomas > a{background:transparent;color:var(--stone);}
.js .site-head .idiomas > a:hover{background:var(--paper-alt);color:var(--ink);}
.js .site-head .prelaunch{background:rgba(5,25,35,.55);border-top-color:rgba(241,115,0,.6);color:var(--paper);}

.js .site-head.head-solida{
  background:rgba(252,252,252,.92);
  backdrop-filter:blur(8px);
  border-bottom-color:var(--stone-line);
  color:var(--ink);
}
.js .site-head.head-solida .brand{color:var(--ink);}
.js .site-head.head-solida .idiomas{border-color:var(--stone-line);background:transparent;backdrop-filter:none;}
.js .site-head.head-solida .idiomas > [aria-current]{background:var(--ink);color:var(--paper);}
.js .site-head.head-solida .idiomas > a{background:var(--paper-raised);color:var(--stone);}
.js .site-head.head-solida .prelaunch{background:var(--shu-soft);border-top-color:var(--shu);color:var(--ink);}

.head-inner{
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  min-height:66px;
}

.brand{
  display:flex;align-items:center;gap:11px;
  font-family:var(--cartel);font-weight:400;
  font-size:0.875rem;
  text-transform:uppercase;letter-spacing:0.06em;
  text-decoration:none;
}

.head-nav{display:flex;gap:24px;margin-inline-start:auto;}
.head-nav a{
  font-size:0.9375rem;color:var(--ink-soft);text-decoration:none;
  padding-block:6px;border-bottom:2px solid transparent;
}
.head-nav a:hover{border-bottom-color:var(--shu);color:var(--indigo);}

.head-cta{display:flex;gap:12px;align-items:center;}

.head-link-invitacion{
  font-size:0.875rem;
  font-weight:500;
  text-decoration:none;
  color:inherit;
  opacity:0.9;
  padding:6px 10px;
  border-radius:var(--radius-s);
  transition:opacity .15s ease,color .15s ease,background-color .15s ease;
}
.head-link-invitacion:hover{
  opacity:1;
  color:var(--shu-texto);
}
.site-head:not(.head-solida) .head-link-invitacion:hover{
  color:var(--shu-soft);
  background:rgba(255,255,255,0.1);
}

.head-btn-entrar{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:0.8125rem;font-weight:600;line-height:1;
  padding:7px 14px;
  border-radius:var(--radius-s);
  text-decoration:none;
  color:inherit;
  border:1px solid currentColor;
  opacity:0.9;
  transition:opacity .15s ease,background-color .15s ease,border-color .15s ease,color .15s ease;
}
.head-btn-entrar:hover{
  opacity:1;
  background:rgba(255,255,255,0.15);
}
.head-solida .head-btn-entrar{
  border-color:var(--stone-line);
  color:var(--ink);
  background:var(--paper-raised);
}
.head-solida .head-btn-entrar:hover{
  border-color:var(--ink);
  background:var(--paper-alt);
}

/* Selector de idioma. El idioma activo NO es un enlace: no se enlaza a la
   página en la que ya estás. */
.idiomas{
  display:flex;align-items:center;gap:2px;
  font-size:0.8125rem;font-weight:500;
  border:var(--border-thin);border-radius:var(--radius-s);
  overflow:hidden;
}
.idiomas > *{padding:6px 9px;line-height:1;text-decoration:none;}
.idiomas > [aria-current]{background:var(--ink);color:var(--paper);}
.idiomas > a{color:var(--stone);background:var(--paper-raised);}
.idiomas > a:hover{color:var(--ink);background:var(--paper-alt);}

/* Aviso de prelanzamiento. Vive dentro de la cabecera pegajosa a propósito:
   ninguna afirmación de la página debe leerse sin él delante. */
.prelaunch{
  margin:0;
  background:var(--shu-soft);
  border-top:1px solid var(--shu);
  font-size:0.8125rem;
  color:var(--ink);
}
.prelaunch .wrap{display:block;padding-block:8px;}

@media (max-width:860px){
  .head-nav{display:none;}
  .head-cta{margin-inline-start:auto;}
  .head-link-invitacion{display:none;}
}

/* ------------------------------- bandas ------------------------------- */

/* TODO EL CUERPO EN BLANCO. Antes alternaba blanco y beige, y esa alternancia
   era lo que decía dónde acababa una sección. Al quitarla hace falta que lo
   diga otra cosa, así que la línea deja de ser decoración: es la estructura.

   Va en cada sección del cuerpo y no con un `+`, para que la primera del flujo
   —el manifiesto, que no es `.band`— sea la única sin filete arriba y no haya
   que enumerar pares. La regla `.band + .band{border-top:0}` que había aquí
   existía justamente para evitar filetes; se le da la vuelta.

   Grosor y color: `--border-thin`, o sea 1px de --stone-line. Es el ÚNICO
   grosor de filete que usa el contenido de la página —los siete filetes
   horizontales que había ya eran éste—, así que no se inventa ninguno. El otro
   fondo oscuro que queda es el pie, y ahí no hace falta línea.

   Los márgenes de arriba y abajo son iguales y generosos: antes cada sección
   traía los suyos y el ritmo iba a saltos. */
.band,.close{
  padding-block:clamp(72px,9vw,132px);
  background:#fff;
  border-top:var(--border-thin);
}

.section-lede{
  font-size:1.0625rem;color:var(--ink-soft);
  max-width:60ch;margin-top:16px;
}

/* -------------------------------- la idea -------------------------------- */

/* LA REJILLA DE LA SECCIÓN, y el criterio único del que cuelga todo:

     las dos columnas se atan por la LÍNEA BASE de su primera línea de texto,
     y cada columna tiene UNA sola bandera —la izquierda a la derecha, la
     derecha a la izquierda—.

   Por qué la línea base y no el borde de la caja: con `align-items:start` los
   bordes cuadraban al píxel (medido: 334 y 334) y el ojo seguía viendo dos
   alturas distintas, porque la base del titular de 70px cae 46px por debajo de
   la del párrafo de 17px. Lo que se lee es el texto, no la caja.

   Y por qué UNA bandera por columna: la marca iba a la izquierda y el titular
   a la derecha dentro de la misma columna, con la de texto otra vez a la
   izquierda. Tres alineaciones conviviendo, que es de lo que viene siempre la
   sensación de «raro».

   `align-items:baseline` lo resuelve solo. Aquí NO hay ningún `padding-top`
   para cuadrar a ojo: ése es el atajo que en el héroe acabó pisado por otro
   padding veinte líneas más abajo. */
.idea{display:grid;gap:clamp(24px,3vw,48px);}

.idea-lado{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(18px,2.4vw,28px);
}
/* La marca, más grande y al mismo filo que el titular. Va DEBAJO: encima
   obligaba a empujar la columna de texto 164px para casar las líneas base y
   dejaba un hueco enorme arriba a la derecha. Debajo cierra el ladillo como un
   sello y el empuje se queda en unos 36px. */
.idea-marca{width:clamp(72px,8vw,104px);height:auto;}

/* El cuerpo lo manda la COLUMNA, no la ventana. A 4,4rem la palabra «Tsugiwa»
   medía 361px dentro de una columna de 359 y se salía por el filo: eso era el
   «se sale por arriba». Con este tope entra entera en los dos idiomas, y
   «What Tsugiwa is» es la cadena larga que fija el techo. */
.idea-titulo{
  font-family:var(--cartel);font-weight:400;
  font-size:clamp(2.3rem,4.6vw,3.4rem);
  line-height:1.06;letter-spacing:-0.018em;
  max-width:none;text-wrap:balance;
}

.idea-texto > p{
  font-size:1.0625rem;line-height:1.7;color:var(--ink-soft);
  max-width:60ch;
}
.idea-texto > p + p{margin-top:22px;}

@media (min-width:820px){
  .idea{grid-template-columns:minmax(0,0.62fr) minmax(0,1fr);align-items:baseline;}
  .idea-lado{align-items:flex-end;text-align:right;}
}

/* ------------------------------- listas ------------------------------- */

.two{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,4vw,56px);margin-top:40px;
}
@media (max-width:760px){.two{grid-template-columns:1fr;margin-top:30px;}}

.ticks{list-style:none;margin:0;padding:0;}
.ticks li{
  position:relative;padding-inline-start:28px;padding-block:7px;
  font-size:0.9375rem;color:var(--ink-soft);
  border-top:var(--border-thin);
}
.ticks li:first-child{border-top:0;padding-top:0;}

.ticks li::before{
  content:"";position:absolute;inset-inline-start:2px;top:14px;
  width:11px;height:6px;
  border-inline-start:2px solid var(--moss);
  border-bottom:2px solid var(--moss);
  transform:rotate(-45deg);
}
.ticks li:first-child::before{top:7px;}

/* ------------------------------- precios ------------------------------- */

.invitacion-box{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  max-width:1000px;margin-inline:auto;
  margin-top:36px;margin-bottom:20px;
  padding:24px 28px;
  background:var(--paper-raised);
  border:var(--border-thin);
  border-radius:var(--radius-m);
}
@media (max-width:760px){
  .invitacion-box{
    flex-direction:column;align-items:flex-start;
    padding:20px;
  }
}
.invitacion-box-content{display:flex;flex-direction:column;gap:6px;}
.chip-invitacion{
  align-self:flex-start;
  padding:3px 9px;border-radius:20px;
  background:var(--shu-soft);color:var(--ink);
  border:1px solid var(--shu);
  font-size:0.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:0.04em;
}
.invitacion-box h3{
  margin:0;
  font-size:1.125rem;font-weight:600;
  color:var(--ink);
}
.invitacion-box p{
  margin:0;
  font-size:0.9375rem;
  color:var(--stone);
  line-height:1.5;
  max-width:58ch;
}
.btn-invitacion{
  background:var(--ink);
  color:var(--paper);
  white-space:nowrap;
  flex-shrink:0;
}
.btn-invitacion:hover{
  background:var(--indigo);
  color:var(--paper);
}

.plans{
  /* Dos planes, no tres. Con `repeat(3,…)` las dos tarjetas se quedaban
     estrechas y con un hueco a la derecha donde estaba Estudio. `auto-fit` las
     reparte solas si algún día vuelve un tercero, y el `max-width` evita que
     con dos se estiren a lo ancho de la página y parezcan pancartas. */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));
  max-width:1000px;margin-inline:auto;
  gap:20px;margin-top:40px;align-items:stretch;
}
@media (max-width:880px){.plans{grid-template-columns:1fr;}}

.plan{
  display:flex;flex-direction:column;
  background:var(--paper-raised);
  border:var(--border-thin);
  border-radius:var(--radius-m);
  padding:24px;
}
.plan-lead{border-color:var(--ink);border-width:1.5px;}

/* La tercera tarjeta NO es un plan: es el hueco donde irán los que falten.
   Va de trazo discontinuo y sin precio a propósito. Poner aquí un nombre o una
   cifra es exactamente lo que se decidió no hacer (pricing §1: «si lanzas a
   29 € hoy, estás anclando ese precio para siempre»), y este hueco existe para
   decir «no es todo lo que habrá» sin comprometer ni una tarifa ni una fecha. */
.plan-hueco{
  border:1px dashed var(--stone-line);
  background:transparent;
}
.plan-hueco h3{color:var(--ink-soft);}
.plan-hueco p{font-size:0.875rem;line-height:1.6;color:var(--stone);}
.plan-hueco p + p{margin-top:12px;}
/* Ocupa el sitio del precio y dice lo que hay: nada todavía. Se probó con unos
   puntos suspensivos y se descartó — a ese tamaño se leían como un fallo de
   renderizado, no como una decisión. */
.plan-pendiente{
  font-family:var(--display);font-weight:600;
  font-size:1.0625rem;line-height:1.3;
  color:var(--stone);
  margin:16px 0 20px;
}


.price{font-family:var(--display);margin:10px 0 6px;}
.price b{
  font-family:var(--cartel);font-weight:400;
  font-size:2.7rem;letter-spacing:-0.012em;
}
/* El euro de Thunder es tan condensado que junto a una cifra grande se
   confunde con una «C» con barras. Va en Instrument Sans, algo más pequeño
   para no pesar más que el número, y alineado por arriba en vez de por la
   línea base, que es donde se apoyan las cifras de caja alta.
   Selector con especificidad de sobra: `.price span` —el «al mes»— lo estaba
   pintando en gris y en cuerpo pequeño. */
.price b .eu{
  font-family:var(--texto);font-weight:700;
  font-size:0.52em;
  color:inherit;
  margin-inline-start:0.06em;
  vertical-align:0.34em;
}
.price span{font-size:0.875rem;color:var(--stone);font-family:var(--texto);}

.price-base{font-size:0.8125rem;color:var(--stone);margin:-2px 0 0;}
.plan-for{font-size:0.875rem;color:var(--stone);margin-bottom:18px;margin-top:10px;}
.plan .ticks{margin-bottom:18px;}

.plans-all{
  margin-top:28px;padding-top:20px;border-top:var(--border-thin);
  font-size:0.9375rem;color:var(--ink-soft);max-width:70ch;
}

.two-notes{margin-top:36px;padding-top:20px;border-top:var(--border-thin);}
.note h3{margin-bottom:10px;}
.note p{font-size:0.9375rem;color:var(--ink-soft);max-width:48ch;}

/* ------------------------------ preguntas ------------------------------ */

details{border-top:var(--border-thin);}
details:last-of-type{border-bottom:var(--border-thin);}

summary{
  font-family:var(--cartel);font-weight:400;font-size:1.1rem;
  letter-spacing:-0.008em;
  padding:18px 34px 18px 0;
  cursor:pointer;position:relative;
  list-style:none;
}
summary::-webkit-details-marker{display:none;}
summary::after{
  content:"";position:absolute;inset-inline-end:6px;top:26px;
  width:8px;height:8px;
  border-inline-end:1.5px solid var(--stone);
  border-bottom:1.5px solid var(--stone);
  transform:rotate(45deg);
  transition:transform .18s ease;
}
details[open] summary::after{transform:rotate(-135deg);top:29px;}

details p{
  padding:0 40px 20px 0;
  font-size:0.9375rem;color:var(--ink-soft);max-width:64ch;
}

#preguntas h2{margin-bottom:26px;}

/* -------------------------------- cierre -------------------------------- */

/* El fondo y el filete los pone la regla compartida con `.band`. Aquí sólo
   queda lo que es propio del cierre. */
.close p{font-size:1.0625rem;color:var(--ink-soft);max-width:52ch;margin:16px 0 30px;}

/* ---- «Esto se mueve todos los meses», con su vídeo ---- */

.progreso{display:grid;gap:clamp(28px,4vw,56px);align-items:start;}
.progreso-say > *{max-width:60ch;}
@media (min-width:900px){
  /* El texto manda y el vídeo acompaña: 1fr contra 0,72fr. El clip es casi
     cuadrado (1080×1078), así que a lo ancho de media sección quedaría enorme
     al lado de un párrafo de 60 caracteres.

     `end`: las dos columnas TERMINAN juntas. El texto mide 544px y el marco
     274px, así que sobraban 270px por debajo del vídeo y parecía colgado. No
     se estira el marco para rellenarlos: para que midiera 544 de alto sin
     recortar al personaje habría que darle 866px de ancho, y ahí no cabe el
     texto. El aire se va arriba, que es donde no molesta, y la imagen se
     apoya en la última línea del párrafo. */
  .progreso{grid-template-columns:minmax(0,1fr) minmax(0,0.72fr);align-items:end;}
}

/* EL MARCO ES BLANCO PURO, no el papel de la sección.

   El clip trae su fondo en #FFFFFF —medido y verificado con
   scripts/verificar-papel-video.mjs: 0,00 % de tinte en el anillo del borde—.
   Cuando esta sección era beige, servirlo directamente dibujaba el recuadro,
   que es el fallo #63 de los planos del héroe; ahora la sección también es
   blanca, así que el riesgo desaparece por su cuenta.

   El marco se queda igualmente, y por otro motivo: con todo en blanco es lo
   único que le da un borde a la imagen. Lleva el mismo filete de 1px que el
   resto de la página, así que es parte del mismo sistema y no un elemento
   nuevo. Y el fondo sigue siendo `--papel-hero` y no un `#fff` escrito aquí,
   porque ese token existe justamente para que el blanco del vídeo y el de su
   fondo no puedan separarse nunca. */
.progreso-marco{
  display:none;
  /* El fondo SE QUEDA, y del mismo token que el héroe: es lo que se ve
     mientras llega el archivo, y beber los dos del mismo sitio es lo que evita
     que alguien cambie un blanco y deje el otro atrás.

     El filete y el radio, en cambio, se van. Tenían sentido cuando la sección
     era beige: el marco blanco era una tarjeta sobre otro color. Con la sección
     ya en blanco, lo único que quedaba dibujado era la línea, un rectángulo
     alrededor de un dibujo que tiene que flotar sobre el papel. Es el recuadro
     del vídeo del héroe otra vez, sólo que al revés: allí sobraba tinte en el
     papel, aquí sobraba la raya.

     `overflow:hidden` también se va: estaba para recortar las esquinas
     redondeadas, no para el recorte del clip. Ése lo hace `object-fit:cover`
     dentro de la propia caja del <video>, que no se sale nunca. Verificado en
     el navegador con `overflow:visible`. */
  background:var(--papel-hero);
  /* El clip es casi cuadrado (1080×1078) pero su MITAD DE ARRIBA está en
     blanco: medido en siete instantes repartidos por el bucle, el dibujo no
     empieza hasta la fila 534 de 1078 en ninguno. Servido entero, el marco
     salía medio vacío y parecía una caja mal medida. Se recorta a 1080×680
     anclado abajo, así que lo único que se pierde es papel: quedan 136 filas
     de aire sobre el dibujo. Volver al clip entero es cambiar esta línea.
     La proporción está aquí y no en el HTML para que el hueco quede reservado
     antes de que llegue el archivo: encenderlo no mueve nada de sitio. */
  aspect-ratio:1080/680;
  width:100%;
  justify-self:center;
  max-width:560px;
}
/* Sólo se enseña si hay guion Y no hay movimiento reducido. Las dos
   condiciones en CSS, para que sin JavaScript no quede un marco vacío. */
@media (prefers-reduced-motion:no-preference){
  html.js .progreso-marco.con-video{display:block;}
}
.progreso-video{
  display:block;width:100%;height:100%;
  /* `cover` anclado abajo: recorta por arriba, que es donde sólo hay papel.
     Los bordes izquierdo, derecho e inferior siguen siendo los del archivo, y
     el superior cae en la zona en blanco. Medido tras el recorte: el anillo
     que linda con el marco es 100 % blanco puro. */
  object-fit:cover;object-position:center bottom;
  background:var(--papel-hero);
}
/* `.close p` es más específica que `.eyebrow` y le estaba pisando el cuerpo y
   el color: el pretítulo de esta sección salía a 17px y en tinta, o sea igual
   que un párrafo. Se le devuelve lo suyo con el mismo peso de selector. */
.close p.eyebrow{font-size:0.875rem;color:var(--shu-texto);margin:0 0 12px;max-width:none;}

/* ------------------------------- legales ------------------------------- */

.legal{padding:clamp(44px,6vw,76px) 0 clamp(56px,7vw,88px);}
.legal h1{font-size:clamp(1.9rem,3.4vw,2.6rem);max-width:20ch;}
.legal h2{
  font-size:1.3rem;line-height:1.3;letter-spacing:-0.008em;
  margin:38px 0 12px;max-width:none;
}
.legal p{font-size:0.9375rem;color:var(--ink-soft);max-width:64ch;}
.legal-lede{
  font-size:1.0625rem!important;color:var(--ink)!important;
  margin-top:18px;max-width:58ch!important;
}
.legal-fecha{
  margin-top:40px;padding-top:18px;border-top:var(--border-thin);
  font-size:0.8125rem!important;color:var(--stone)!important;
}
.legal .url{font-family:var(--texto);color:var(--indigo);}

.datos{
  margin:0;border-top:var(--border-thin);
  display:grid;grid-template-columns:minmax(9rem,auto) 1fr;
}
.datos dt{
  padding:11px 0;border-bottom:var(--border-thin);
  font-size:0.875rem;color:var(--stone);
}
.datos dd{
  margin:0;padding:11px 0;border-bottom:var(--border-thin);
  font-size:0.9375rem;
}
@media (max-width:560px){
  .datos{grid-template-columns:1fr;}
  .datos dt{padding-bottom:0;border-bottom:0;}
  .datos dd{padding-top:2px;}
}

/* ------------------------- comparador (modal) ------------------------- */

/* Se abre con :target, sin una línea de JavaScript: la CSP de esta página es
   `default-src 'none'` y <dialog>.showModal() habría obligado a abrirla. */
.modal{
  position:fixed;inset:0;z-index:50;
  display:none;
  padding:clamp(12px,4vw,40px);
  place-items:center;
}
.modal:target{display:grid;}

.modal-fondo{
  position:absolute;inset:0;
  background:rgba(5,25,35,.55);
  backdrop-filter:blur(2px);
}

.modal-caja{
  position:relative;
  width:min(920px,100%);max-height:88vh;
  display:flex;flex-direction:column;
  background:var(--paper);
  border:var(--border-thin);border-radius:var(--radius-m);
  overflow:hidden;
}

.modal-cabeza{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 20px;border-bottom:var(--border-thin);
  background:var(--paper-raised);
}
.modal-cabeza h2{font-size:1.35rem;max-width:none;margin:0;}
.modal-cerrar{
  flex:none;width:34px;height:34px;
  display:grid;place-items:center;
  border:var(--border-thin);border-radius:var(--radius-s);
  color:var(--ink-soft);text-decoration:none;font-size:0.9375rem;
}
.modal-cerrar:hover{border-color:var(--indigo);color:var(--indigo);}

.modal-cuerpo{padding:20px;overflow-y:auto;}
.comparar-linea{margin-top:26px;}

/* Interruptor de «solo lo que cambia». También sin JavaScript: el checkbox
   está oculto pero sigue siendo el control real, así que el teclado y los
   lectores de pantalla lo manejan igual. */
.interruptor{
  display:inline-flex;align-items:center;gap:10px;
  margin-bottom:16px;cursor:pointer;
  font-size:0.875rem;color:var(--ink-soft);
}
.interruptor input{position:absolute;opacity:0;width:0;height:0;}
.interruptor-pista{
  width:38px;height:22px;flex:none;border-radius:999px;
  background:var(--stone-line);position:relative;
  transition:background-color .15s ease;
}
.interruptor-pista::after{
  content:"";position:absolute;top:3px;left:3px;
  width:16px;height:16px;border-radius:50%;
  background:var(--paper-raised);
  transition:transform .15s ease;
}
.interruptor input:checked + .interruptor-pista{background:var(--moss);}
.interruptor input:checked + .interruptor-pista::after{transform:translateX(16px);}
.interruptor input:focus-visible + .interruptor-pista{
  outline:2px solid var(--focus);outline-offset:2px;
}
.modal-cuerpo:has(#solo-dif:checked) .fila-igual{display:none;}

.tabla-planes{border-collapse:collapse;width:100%;min-width:560px;font-size:0.875rem;}
.tabla-planes thead td{border-bottom:2px solid var(--ink);}
.tabla-planes thead th{
  font-family:var(--display);font-weight:600;font-size:0.9375rem;
  text-align:start;padding:10px 12px;border-bottom:2px solid var(--ink);
}
.tabla-planes tbody th{
  text-align:start;font-weight:400;padding:10px 12px;
  border-bottom:var(--border-thin);color:var(--ink-soft);
}
.tabla-planes td{
  padding:10px 12px;border-bottom:var(--border-thin);
  color:var(--ink);white-space:nowrap;
}
.tabla-planes td.no{color:var(--stone);}
.modal-notas{margin-top:26px;}
.plan-quien{
  margin-top:auto;padding-top:14px;border-top:var(--border-thin);
  font-size:0.875rem;color:var(--ink-soft);
}

@media (prefers-reduced-motion:reduce){
  .interruptor-pista,.interruptor-pista::after{transition:none;}
}

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

.site-foot{background:var(--ink);color:#C3CDD3;padding:56px 0 48px;--focus:var(--shu);}

.foot-inner{
  display:flex;flex-wrap:wrap;gap:32px;
  align-items:flex-start;justify-content:space-between;
}

/* Crédito de marca. El brand board de Nijūsan pide el logo rojo maestro y
   prohíbe recolorearlo, estirarlo o añadirle sombras, así que va tal cual, con
   su proporción original y por encima del tamaño mínimo de 18px de alto.
   Alojado aquí, como todo lo demás: esta página no pide nada a otro dominio. */
.powered{
  flex:1 1 100%;order:3;
  margin:6px 0 0;padding-top:26px;
  border-top:1px solid #12303F;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.powered span{font-size:0.8125rem;color:#8FA0A9;}
.powered a{display:inline-flex;line-height:0;border-radius:4px;}
.powered img{width:176px;height:auto;}
.powered a:focus-visible{outline:2px solid var(--shu);outline-offset:3px;}
.foot-brand{display:flex;gap:14px;align-items:flex-start;max-width:36ch;}
.foot-brand p{font-size:0.875rem;line-height:1.6;}
.foot-brand b{color:var(--paper);font-family:var(--cartel);font-weight:400;font-size:1rem;text-transform:uppercase;letter-spacing:.05em;}

.foot-nav{display:grid;grid-template-columns:repeat(2,auto);gap:8px 40px;}
.foot-nav a{font-size:0.875rem;color:#C3CDD3;text-decoration:none;}
.foot-nav a:hover{color:var(--paper);text-decoration:underline;}

/* ------------------------------ pretítulos ------------------------------ */

/* El tema de la sección antes del titular. Deliberadamente NO en versalitas ni
   con tracking: las mayúsculas espaciadas sobre cada encabezado son el tic más
   reconocible de una plantilla. Aquí es una línea corta con una raya delante. */
.eyebrow{
  display:flex;align-items:center;gap:9px;
  margin:0 0 12px;
  font-size:0.875rem;font-weight:500;
  color:var(--shu-texto);
}
.eyebrow::before{
  content:"";width:22px;height:2px;flex:none;
  background:var(--shu);border-radius:2px;
}

/* --------------------- avisos de prelanzamiento --------------------- */

/* El contraste dejó claro que el problema no era mover el aviso, sino que
   desaparecía al salir del héroe: quien llega a #precios desde un enlace
   directo veía promesas sin contexto. Se resuelve por dos vías a la vez.

   (a) Un aviso pegado a CADA promesa. Es el que aguanta jurídicamente, porque
       no depende de que nadie haya visto una barra al principio. */
/* El punto va como marcador en línea, NO como ítem de un flex. Con
   `inline-flex` y `gap`, cualquier <a> dentro del aviso se convertía en otro
   ítem: el de precios salía como «…y  vienen más planes  .», con el punto
   final suelto a nueve píxeles. Así el texto fluye como texto. */
.previsto{
  display:block;
  margin:0 0 18px;
  font-size:0.8125rem;font-weight:600;line-height:1.5;
  color:var(--shu-texto);
}
.previsto::before{
  content:"";display:inline-block;vertical-align:middle;
  width:7px;height:7px;border-radius:50%;
  margin-inline-end:9px;
  background:var(--shu);
}
.modal-cuerpo .previsto{margin-bottom:14px;}

/* (b) Y un distintivo en la cabecera, que aparece justo cuando la cabecera se
       vuelve sólida: así ninguna sección se lee nunca fuera de contexto. */
.chip-dev{
  display:none;
  margin-inline-start:auto;margin-inline-end:14px;
  padding:5px 11px;border-radius:20px;
  background:var(--shu-soft);color:var(--ink);
  border:1px solid var(--shu);
  font-size:0.75rem;font-weight:600;white-space:nowrap;
}
.js .site-head.head-solida .chip-dev{display:inline-flex;}
@media (max-width:520px){.chip-dev{font-size:0.6875rem;padding:4px 9px;}}

/* ------------------------------ cargador ------------------------------ */

/* Sólo existe si hay JavaScript: sin él nunca se muestra, porque nadie podría
   quitarlo después. Por eso se enciende con .js y no al revés. */
.cargador{display:none;}
.js .cargador{
  display:grid;place-content:center;justify-items:center;gap:26px;
  position:fixed;inset:0;z-index:200;
  background:#fff;
  transition:opacity .45s ease,visibility .45s ease;
}
.js .cargador img{width:clamp(76px,9vw,112px);height:auto;}
.js.cargado .cargador{opacity:0;visibility:hidden;pointer-events:none;}

.cargador-barra{
  display:block;width:132px;height:2px;
  background:var(--stone-line);border-radius:2px;overflow:hidden;
}
.cargador-barra i{
  display:block;width:40%;height:100%;
  background:var(--shu);border-radius:2px;
  animation:barra 1.1s ease-in-out infinite;
}
@keyframes barra{
  0%{transform:translateX(-110%);}
  100%{transform:translateX(360%);}
}

/* ----------------------------- manifiesto ----------------------------- */

/* Base sin nada pegajoso: una lista de frases sobre fondo oscuro, legible y
   correcta. Todo lo demás se añade sólo si el navegador lo soporta. */
/* Es el héroe: ocupa la ventana entera desde el primer píxel, y el vídeo va
   por debajo de la cabecera, que aquí es transparente. */
/* Los planos son ilustración de línea sobre BLANCO, así que el héroe es claro
   y el texto va en tinta. Todo lo que aquí había en modo oscuro está invertido
   a propósito, no heredado. */
.manifiesto{background:var(--papel-hero);color:var(--ink);}
/* Columna real: el vídeo ocupa su banda y el pie va DEBAJO, en el flujo.
   Antes iba superpuesto en absoluto y el dibujo quedaba pegado al texto. */
.manifiesto-fija{display:flex;flex-direction:column;}
.manifiesto-fija{position:relative;overflow:hidden;min-height:100vh;min-height:100svh;}


/* La pista alta y el pegado hacen falta con guion y sin él, así que van fuera
   del @supports de animation-timeline. Y van DESPUÉS de la regla de arriba: si
   se declaran antes, el `position:relative` de la base pisa al `sticky` y la
   escena deja de quedarse fija sin que salte ningún error. */
/* La escena se fija también en móvil: allí el vídeo es vertical y los
   eslóganes caen en la mitad superior, sobre papel limpio, con el dibujo
   debajo. La pista es más corta porque en un teléfono cada vh cunde más. */
@media (prefers-reduced-motion:no-preference){
  .manifiesto-pista{height:280vh;}
  .manifiesto-fija{position:sticky;top:0;height:100vh;height:100svh;min-height:0;}
}
@media (min-width:760px) and (prefers-reduced-motion:no-preference){
  .manifiesto-pista{height:340vh;}
}

/* Dónde cae el texto. En escritorio, en el TERCIO superior; en móvil, en la
   MITAD superior. En los dos casos el dibujo vive por debajo, así que el texto
   se apoya sobre papel limpio y no encima de las figuras.
   El `padding-top` vivía aquí y estaba MUERTO: la regla de más abajo declara un
   `padding` de atajo que lo pisaba, así que el primer eslogan arrancaba en 64px
   —por debajo de una cabecera de 68— y se le veía la primera línea tapada. El
   valor pasa a vivir en un solo sitio, como variable, junto al resto. */
@media (min-width:760px){
  .manifiesto-titulos{--hueco-arriba:clamp(104px,14vh,170px);}
}

/* El vídeo vive en su propia banda, no superpuesto. */
.manifiesto-video{
  position:relative;
  flex:1 1 auto;min-height:0;
  width:100%;height:auto;
  /* `contain` y no `cover`: el dibujo se ve ENTERO, sin cortarle los pies.
     Los márgenes que deja sólo son invisibles si valen EXACTAMENTE lo mismo
     que el papel de los planos. Durante un tiempo no fue así y no era culpa
     del CSS: el papel de los doce vídeos no era #FFFFFF sino un blanco
     agrisado con dominante magenta (#FEFAFE / #FEFEFE, con el verde hasta 7
     niveles por debajo; en los ocho verticales el canal verde no alcanzaba
     255 en NINGÚN píxel). Sobre un fondo #FFFFFF eso dibujaba el recuadro del
     vídeo con un borde nítido, visible en un teléfono a brillo alto.
     Se corrigió en el origen, no aquí: los planos se regeneran con un punto de
     blanco medido, y el tinte magenta del anillo de borde pasa del 21-70 % a
     0,0 % en los doce (video/LEEME.md tiene la tabla y los dos casos que no
     llegan al 100 %). Si algún día se vuelven a codificar sin ese paso, el
     recuadro reaparece. */
  object-fit:contain;
  /* Mientras carga, el mismo papel que la sección y que el plano. */
  background:var(--papel-hero);
}
/* Un solo degradado, blanco, arriba: los dibujos suben hasta el borde y el
   titular necesita separarse de la línea. Abajo no hace falta porque el papel
   ya es blanco y el texto va en tinta. */
.manifiesto-fija::before{
  content:"";position:absolute;left:0;right:0;top:0;height:40vh;z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgb(var(--papel-hero-rgb)) 0%,
    rgb(var(--papel-hero-rgb)/.94) 42%,
    rgb(var(--papel-hero-rgb)/0) 100%);
}

.manifiesto-titulos{
  position:absolute;z-index:2;left:0;right:0;top:0;
  list-style:none;margin:0 auto;
  /* Nunca por debajo de la cabecera: el mínimo sale de su alto real más aire. */
  --hueco-arriba:max(calc(var(--alto-cabecera) + 28px), 13vh);
  padding:var(--hueco-arriba) var(--gutter) 64px;
  align-content:start;
  width:100%;max-width:1220px;
  display:grid;gap:26px;
  text-align:center;justify-items:center;
  /* La perspectiva vive en el contenedor: es lo que hace que el doblado de
     cada frase se vea en volumen y no como un simple aplastado. */
  perspective:1100px;
}
.manifiesto-titulos li{
  /* Super Jello es ANCHA y redonda, al revés que una condensada: a igualdad de
     cuerpo ocupa mucho más por línea, así que los tamaños bajan respecto a lo
     que pedía Thunder y el interletrado se cierra un poco en vez de abrirse. */
  font-family:var(--cartel);font-weight:400;
  font-size:clamp(2.6rem,8.2vw,7.2rem);
  line-height:1.02;letter-spacing:-0.018em;
  padding-block:0.04em;
  max-width:none;
  text-wrap:balance;
  /* Halo blanco: separa la tinta del trazo del dibujo sin ensuciar el papel. */
  text-shadow:0 0 26px #fff, 0 0 12px #fff, 0 0 4px #fff;
}
.manifiesto-marca{font-size:clamp(2.8rem,8.4vw,7.4rem);}
.manifiesto-marca span{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2.4vw,34px);}
.manifiesto-marca img{
  width:clamp(64px,10vw,132px);height:auto;
  filter:drop-shadow(0 0 18px #fff);
}
/* Pantallas muy bajas —un teléfono en horizontal— son el caso peor: la banda
   del vídeo se queda sin sitio y el eslogan se metía dentro del pie. Medido a
   760x379: el eslogan acababa en 228 y el «desliza abajo» empezaba en 204, o
   sea 24px de solape. Aquí manda la ALTURA, no el ancho. */
@media (max-height:560px){
  .manifiesto-titulos{--hueco-arriba:max(calc(var(--alto-cabecera) + 10px), 6vh);}
  .manifiesto-titulos li{font-size:clamp(1.7rem,5vw,2.5rem);}
  .manifiesto-marca{font-size:clamp(1.8rem,5.2vw,2.6rem);}
  .manifiesto-marca img{width:clamp(40px,6vw,64px);}
}

/* ---- pie del héroe: la pista de scroll y el aviso de prelanzamiento ---- */
.manifiesto-pie{
  position:relative;z-index:2;
  flex:0 0 auto;
  margin:0;padding:clamp(26px,4vh,46px) var(--gutter) clamp(28px,4vh,44px);
  display:grid;gap:16px;justify-items:center;text-align:center;
  color:var(--ink-soft);
  background:#fff;
}
.desliza{
  display:inline-flex;flex-direction:column;align-items:center;gap:11px;
  /* Más grande a petición del titular: se le perdía al pie del héroe. */
  font-size:clamp(1.05rem,3.6vw,1.25rem);font-weight:700;letter-spacing:.02em;
  text-shadow:0 0 12px #fff, 0 0 5px #fff;
  /* Llama la atención BAJANDO, que es lo que pide el mensaje, y con un latido
     de opacidad corto. El suelo es .78 y no 0 a propósito: por debajo de ahí el
     texto deja de cumplir contraste durante la mitad del ciclo, y ya nos pasó
     una vez con una opacidad animada. A .78 sobre papel blanco sigue muy por
     encima de AA, medido. */
  animation:llamada 2.2s ease-in-out infinite;
}
@keyframes llamada{
  0%,100%{transform:translateY(0);opacity:1;}
  50%    {transform:translateY(6px);opacity:.78;}
}
.desliza i{
  width:3px;height:52px;border-radius:3px;
  background:linear-gradient(180deg,var(--ink),rgba(5,25,35,0));
  animation:gotea 1.9s ease-in-out infinite;
}
@keyframes gotea{
  0%,100%{transform:scaleY(.35);transform-origin:top;opacity:.5;}
  50%    {transform:scaleY(1);transform-origin:top;opacity:1;}
}
/* Con movimiento reducido no parpadea NI se mueve, pero se queda igual de
   grande y a opacidad plena: el titular pidió que se viera más, no que se
   moviera a toda costa. La regla global de abajo acorta la duración de todas
   las animaciones, pero eso deja el fotograma final, no necesariamente el
   legible: aquí se dice explícitamente cómo tiene que quedarse. */
@media (prefers-reduced-motion:reduce){
  .desliza{animation:none;transform:none;opacity:1;}
  .desliza i{animation:none;transform:scaleY(1);opacity:1;}
}
.aviso-pre{
  font-size:0.75rem;line-height:1.5;max-width:62ch;
  color:var(--stone);
  text-shadow:0 0 12px #fff, 0 0 5px #fff;
}

/* ------------------------------ turnomatic ------------------------------ */

/* La sección era seis tarjetas iguales en fila y quedaba sosa. Ahora es una
   sala de espera: la boca del turnomatic escupe el ticket y al lado está el
   panel de turnos, con la cifra en una columna y el oficio en la de al lado.

   SIN JAVASCRIPT SE VEN LOS SEIS con su número, su oficio y su descripción, y
   no rota nada. El contenido está entero en el HTML; el panel es sólo la forma
   de enseñarlo, y es también lo que lee un buscador. */

.turno{
  display:grid;gap:clamp(26px,4vw,48px);
  grid-template-columns:1fr;align-items:start;margin-top:44px;
}
@media (min-width:820px){
  /* `stretch`, no `start`: el turnomatic tiene que ser tan alto como el panel
     de al lado, así que la columna izquierda crece con la fila y el papel se
     estira dentro. */
  .turno{grid-template-columns:minmax(190px,230px) 1fr;align-items:stretch;}
}

/* ---- la boca ---- */

.turno-maquina{display:flex;flex-direction:column;align-items:center;gap:18px;}

/* ---- el botón de «siguiente turno» ----

   Lo crea js/portada.js envolviendo el aparato, y por eso aquí no hay ninguna
   regla que dependa de que exista. Es el aparato entero: en un turnomatic se
   aprieta la máquina y sale el ticket, así que la afordancia ya estaba
   dibujada y sólo faltaba hacerla real.

   La etiqueta se VE. Un botón que es sólo un dibujo no lo encuentra nadie, y
   con `sr-only` sólo lo encontraría quien navegue con lector. Contraste
   medido sobre el papel de la sección: --ink-soft #0F2A38 sobre blanco, 14,9:1.

   El área de toque es la máquina entera, muy por encima de los 44px de la
   guía, así que en móvil no hace falta nada más. */
.turno-siguiente{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  background:none;border:0;padding:0;margin:0;
  font-family:var(--display);font-size:0.8125rem;font-weight:600;
  color:var(--ink-soft);
  cursor:pointer;
  width:100%;
  /* Crece hasta el alto de la columna. Sin esto el botón se quedaba en su alto
     de contenido y el aparato colgaba arriba con 134px de aire debajo, medidos.
     Lo que se estira es el TROZO DE EN MEDIO del papel, que para eso está
     partido en tres: la muesca de arriba y la punta de abajo son SVG de
     proporción fija y no se deforman. */
  flex:1 1 auto;min-height:0;
}
/* `hidden` tiene que ganarle al `display:flex` de arriba: con movimiento
   reducido el guion lo esconde y sin esto seguiría ocupando su sitio. */
.turno-siguiente[hidden]{display:none!important;}
.turno-siguiente:hover{color:var(--indigo);}
.turno-siguiente:focus-visible{
  outline:2px solid var(--focus);outline-offset:6px;border-radius:var(--radius-m);
}
/* Al apretar, la máquina se hunde un pelo. Es la única respuesta táctil que
   hay y se apaga con movimiento reducido como todo lo demás. */
.turno-siguiente:active .turno-boca{transform:translateY(2px);}
.turno-aparato{
  position:relative;width:clamp(170px,38vw,210px);
  display:flex;flex-direction:column;align-items:center;
  flex:1 1 auto;min-height:0;
}
.turno-boca{width:100%;height:auto;display:block;position:relative;z-index:1;transition:transform .1s ease;}
.turno-placa    {fill:var(--shu);}
.turno-placa-luz{fill:#fff;opacity:.17;}
.turno-ranura   {fill:var(--ink-panel);}
.turno-tornillo {fill:var(--shu-deep);}

/* El papel sube hasta meter su borde bajo la ranura. En porcentaje porque los
   márgenes se resuelven contra el ANCHO del contenedor, que es lo que escala. */
.turno-salida{
  position:relative;z-index:0;margin-top:-11%;
  flex:1 1 auto;min-height:190px;
  display:grid;justify-items:center;pointer-events:none;
}

/* EL TICKET, con la silueta del papel de verdad: dos muescas en U arriba —de
   donde tiran los dedos— y la punta en V abajo.

   Va partido en TRES piezas porque el titular lo quiere tan alto como el panel
   de al lado, y una silueta de una sola pieza no se puede estirar sin deformar
   las muescas y la punta. Arriba y abajo son SVG de proporción fija; el trozo
   de en medio es una caja normal que crece, con sus bordes laterales del mismo
   grosor que el trazo del SVG para que la línea no dé un salto.

   El texto va en HTML y no dentro del dibujo, para que el número se pueda
   cambiar y se lea nítido a cualquier densidad de pantalla.

   El rótulo del canto dice TSUGIWA y no la marca del aparato original: la de
   ellos es una marca registrada ajena y esto es material comercial nuestro. */
.turno-ticket{
  grid-area:1/1;
  position:relative;
  /* Ancho en proporción al aparato, no fijo: al estirarse hasta el alto del
     panel, un ancho fijo lo dejaba como una cinta de medio metro. */
  width:clamp(112px,68%,150px);
  display:flex;flex-direction:column;align-self:stretch;
  filter:drop-shadow(0 6px 14px rgba(5,25,35,.14)) drop-shadow(0 1px 0 rgba(5,25,35,.06));
}

/* El papel va en TRES piezas porque tiene que estirarse hasta el alto del panel
   de al lado, y una silueta de una sola pieza no se puede estirar sin deformar
   la muesca y la punta. Arriba y abajo son SVG de proporción fija; el trozo de
   en medio es una caja normal que crece.

   Cada pieza lleva DOS trazados: uno relleno y otro sólo con los bordes que se
   ven. Con un contorno cerrado, la línea de unión con el trozo de en medio se
   dibujaba y aparecía una raya cruzando el papel.

   La muesca es HONDA y ESTRECHA y la punta CORTA y ANCHA, que es la proporción
   del papel de verdad; el primer intento las tenía al revés y salía un arco. */
/* El solape de 1px tapa la costura: con la proporción escalada, el borde de
   cada pieza cae en una fracción de píxel y se colaba una línea del fondo de la
   página entre el dibujo y la caja de en medio. */
.turno-papel-alto,.turno-papel-pie{display:block;width:100%;height:auto;flex:0 0 auto;}
.turno-papel-alto{margin-bottom:-1px;}
.turno-papel-pie {margin-top:-1px;}
.turno-papel-alto{aspect-ratio:88/112;}
.turno-papel-pie {aspect-ratio:88/40;}
/* SIN contorno, ni en el SVG ni en la caja de en medio. Con contorno había que
   hacer casar un trazo de SVG —que el viewBox mete hacia dentro— con un borde
   CSS que va al filo, y la unión entre piezas se veía como un escalón. El papel
   beige ya se separa solo del blanco de la sección, que es como se lee un
   ticket de verdad: por su color, no por una raya. */
.papel-fondo{fill:var(--paper-alt);}
.papel-borde{display:none;}

.turno-papel-medio{
  /* El cuerpo es MÁS ESTRECHO que la cabeza: el papel de verdad baja en hombro
     bajo la muesca. El 72,73 % es (76-12)/88, la misma medida que el escalón
     del dibujo, así que los tres trozos casan sin ajustar nada a ojo. Iba
     redondeado a 73 % y el Consejero pidió la cifra exacta. */
  flex:1 1 auto;min-height:64px;position:relative;
  width:72.73%;margin:0 auto;
  /* El papel va en el beige de la paleta, no en blanco: sobre la sección blanca
     un ticket blanco desaparecía y sólo se veían el número y la flecha. Además
     el papel de verdad es crema. */
  background:var(--paper-alt);
  display:grid;justify-items:center;align-content:start;
  padding:14px 0 0;
}
/* El número, GRANDE, que es lo que se lee de un vistazo. */
.turno-ticket b{
  font-family:'LLPixel',var(--cartel),monospace;
  font-size:clamp(2.3rem,5.4vw,3rem);line-height:1;color:var(--ink);
}
/* Los dos rótulos de canto, como en el papel de verdad, y es lo que llena el
   largo cuando el ticket se estira. Nada de la marca del aparato original: es
   una marca registrada ajena y esto es material comercial nuestro. */
.turno-papel-medio::before,.turno-papel-medio::after{
  position:absolute;top:10px;bottom:10px;
  display:flex;align-items:center;
  writing-mode:vertical-rl;
  font-family:var(--display);font-size:0.5rem;font-weight:700;
  letter-spacing:.24em;color:#9A9184;
}
/* Los dos se leen de arriba abajo. En el papel de verdad van en sentidos
   opuestos, pero girar uno 180° lo sacaba de su caja y se cortaba la primera
   letra; que se lean los dos pesa más que copiar el detalle. */
.turno-papel-medio::before{content:"TSUGIWA";right:9px;}
.turno-papel-medio::after{content:"tsugiwa.net";left:9px;}
/* La flecha rellena de «tira hacia abajo», justo encima de la punta. */
.turno-ticket::after{
  content:"";position:absolute;left:50%;bottom:13%;transform:translateX(-50%);
  width:0;height:0;
  border-left:17px solid transparent;border-right:17px solid transparent;
  border-top:23px solid var(--ink);
}

/* ---- el panel de turnos ---- */

.turno-panel{
  /* Una sola medida para la columna de la cifra y para la sangría de la
     descripción: si se escriben aparte se separan y el texto deja de alinearse
     con el oficio. */
  --turno-cifra:4.6rem;
  --turno-hueco:clamp(14px,2.6vw,28px);
  background:var(--ink-panel);border-radius:var(--radius-m);
  padding:clamp(16px,2.4vw,24px);
  display:grid;gap:14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.turno-panel-cab{
  margin:0;display:grid;grid-template-columns:var(--turno-cifra) 1fr;gap:var(--turno-hueco);
  font-family:'LLPixel',var(--display),monospace;
  font-size:0.75rem;letter-spacing:.16em;text-transform:uppercase;color:#8FA3AE;
  padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.10);
}
.turno-filas{list-style:none;margin:0;padding:0;display:grid;gap:2px;}

/* FORMA BASE: la cifra vive dentro de su ficha, en la columna 1, y todo se ata
   por la línea base de su primera línea. Es lo que se ve sin JavaScript y con
   movimiento reducido, donde se enseñan las diez fichas a la vez y una columna
   de cifras aparte no correspondería con ninguna.

   El envoltorio `.turno-boton` que había aquí desaparece: existía para agrupar
   la cifra y el nombre, y con la cifra fuera no agrupaba nada. Con él se va el
   `padding-left:calc(… + 8px)` con el que la descripción perseguía su padding.
   Ahora la fila es la rejilla y nadie suma el padding de nadie. */
.turno-fila{
  display:grid;
  grid-template-columns:var(--turno-cifra) minmax(0,1fr);
  column-gap:var(--turno-hueco);
  align-items:baseline;
  border-radius:6px;padding:11px 10px;
}
.turno-led{grid-column:1;}
.turno-nombre,.turno-desc,.turno-planes{grid-column:2;}
/* SIN fondo al pasar el ratón. Lo había, con blanco al 6 %, y sobre él el
   nombre apagado caía de 4,54:1 a 3,83:1 y la cifra de 3,25:1 a 2,75:1: el
   contraste no fallaba en una pantalla hipotética, fallaba en un estado real
   de la página. Lo cazó el Consejero. Y las filas ya no son interactivas, así
   que tampoco hay nada que señalar al pasar por encima. */
/* Las cifras, grandes: es lo que se ve desde el otro lado de la sala. */
/* Las cifras, grandes: es lo que se ve desde el otro lado de la sala.
   Y las que no tocan, MUY oscuras, como un LED apagado. El límite no es el
   gusto sino el contraste: son texto grande, así que AA pide 3:1. Se buscó el
   tono MÁS OSCURO que todavía cumple recorriendo la escala sobre el fondo real
   del panel: #526F86 da 3,03:1, y éste lleva un poco de margen (3,25:1). El
   primer intento, #41586A, se quedaba en 2,16:1 — se veía muy bien apagado y
   no cumplía. */
.turno-led{
  font-family:'LLPixel',var(--cartel),monospace;
  font-size:clamp(2.2rem,5vw,3.1rem);line-height:1;letter-spacing:.06em;
  /* Las cifras del panel ya son de ancho fijo: se les igualó el avance en la
     propia fuente, porque el «1» medía 401 y el «3» 715 y un «01» quedaba
     descolocado respecto a un «04». Ver scripts/matriz-acentos.py. */
  font-variant-numeric:tabular-nums;
  color:#56748C;
}
/* El oficio, en la misma tipografía de panel que la cifra. La descripción NO:
   una matriz de puntos en un párrafo de tres líneas se lee fatal, y ahí lo que
   hace falta es leer. */
.turno-nombre{
  font-family:'LLPixel',var(--display),monospace;
  font-size:clamp(1.05rem,2.3vw,1.4rem);line-height:1.25;letter-spacing:.06em;
  /* En blanco, siempre. El estado apagado del nombre existía cuando las cuatro
     fichas de la ventana compartían lista y había que distinguir la que sonaba;
     ahora sólo se ve una, y en la rama estática se ven las diez y todas valen
     lo mismo. De paso sube de 4,52:1 a 16,02:1 sobre el fondo del panel. */
  color:#fff;
  /* MAYÚSCULAS a propósito, y no por costumbre: en caja baja esta fuente pierde
     la tilde —«Estética» salía «ESTETICA»— y dibuja la ñ con forma de minúscula
     entre versales. Sus Á É Í Ñ Ó Ú sí están bien resueltas. Y es además lo que
     pone un panel de sala de espera de verdad. */
  text-transform:uppercase;
}
/* El que suena, ENCENDIDO: naranja con halo, como un LED que ilumina de verdad
   lo que tiene alrededor.

   La clase va en el LED y no en su fila: al partir el panel en dos zonas la
   cifra deja de vivir dentro de la ficha, así que `.turno-fila.es-ahora
   .turno-led` no encontraba nada y no se encendía ninguna. Se marcan las dos
   —la cifra y la ficha— y cada una lee la suya. */
/* Y sólo cuando hay rotación: con movimiento reducido se ven los diez turnos y
   ninguno «suena», así que una cifra encendida entre diez estaría señalando
   algo que no existe. */
@media (prefers-reduced-motion:no-preference){
  .turno-led.es-ahora{
    color:#FF8A1F;
    text-shadow:0 0 6px rgba(255,138,31,.9), 0 0 18px rgba(255,138,31,.55),
                0 0 40px rgba(255,138,31,.28);
  }
}
/* SIN realce de fondo en la ficha. Lo llevaba cuando compartía lista con las
   otras nueve y había que distinguirla; ahora es la única que se ve y el
   rectángulo sólo dibujaba una caja dentro del panel. Lo que dice cuál es el
   turno activo es el LED encendido. */

/* El `code` de base viene con fondo beige y filete claro, que sobre el panel
   oscuro daba 1,14:1 —medido en el navegador— y era ilegible. Aquí se le da su
   propia superficie: blanco al 8 % sobre #0B2432 con el texto en #DCE6EB, que
   mide 11,4:1. */
.turno-desc code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.9em;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
  color:#DCE6EB;
}
.turno-desc{
  margin:6px 0 0;max-width:56ch;
  font-size:0.9375rem;line-height:1.6;color:#B9C7CF;
}
/* La diferencia por plan, que es lo que el panel tiene que dejar claro de un
   vistazo: dos píldoras cuando cambia algo, una línea cuando no cambia nada.

   Contraste medido sobre el fondo real del panel (--ink-panel #0B2432, cuya
   luminancia relativa es 0,0155): el valor en #E3EBEF da 12,1:1 y la etiqueta
   del plan en #8FA3AE da 6,1:1. Las dos pasan AA de texto normal con holgura,
   que es lo que hay que exigirles porque son de 13px y de 11px. El naranja del
   borde de Consulta es sólo borde: no lleva texto encima, así que no entra en
   la cuenta. */
.turno-planes{
  margin:12px 0 0;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.turno-plan{
  display:inline-flex;align-items:baseline;gap:7px;
  border:1px solid rgba(255,255,255,.18);border-radius:999px;
  padding:4px 13px;
  font-size:0.8125rem;line-height:1.5;color:#E3EBEF;
}
.turno-plan b{
  font-family:var(--display);font-weight:700;font-size:0.6875rem;
  letter-spacing:.05em;color:#8FA3AE;
}
/* El plan de pago se distingue por el filete, no por el color del texto: el
   naranja sobre este fondo no llega a 4,5:1 y aquí hay que leer, no adivinar. */
.turno-plan-alta{border-color:rgba(255,138,31,.5);}
.turno-igual{font-size:0.8125rem;line-height:1.5;color:#8FA3AE;}

/* Sin JavaScript el panel no rota, así que no hay nada que pausar y el botón
   sólo podía mentir. Estaba a la vista y no hacía nada. */
html:not(.js) .turno-pausa{display:none;}

.turno-pausa{
  justify-self:start;
  background:none;border:1px solid rgba(255,255,255,.22);border-radius:999px;
  padding:9px 16px;color:#C9D6DD;cursor:pointer;
  font-family:var(--display);font-size:0.8125rem;font-weight:600;
  transition:border-color .16s ease,color .16s ease;
}
.turno-pausa:hover{border-color:rgba(255,255,255,.45);color:#fff;}
.turno-panel :focus-visible{outline:2px solid var(--shu);outline-offset:2px;}

/* ---- con JavaScript: dos zonas y un alto que no cambia ---- */

/* EL PROBLEMA QUE ESTO RESUELVE. La ficha activa se desplegaba dentro de la
   lista, así que el alto del panel dependía de lo largo que fuera el texto del
   turno que tocara y el bloque daba un brinco cada 4,2 segundos, arrastrando a
   la máquina de al lado.

   La solución no es medir el texto más largo y escribir un número: es apilar
   las DIEZ fichas en la misma celda de rejilla. La celda mide entonces lo que
   la más alta, el CSS lo calcula solo, y sigue siendo correcto en las dos
   portadas y a cualquier anchura sin que nadie vuelva a medir nada. Añadir un
   turno mañana tampoco pide tocar esto.

   Las que no se leen van con `opacity:0` y NO con `display:none` por dos
   motivos a la vez: si no ocuparan sitio, la celda no mediría lo que la más
   alta; y siguen en el árbol de accesibilidad, que es la regla que ya había
   aquí —una fila que desaparece del árbol a los 4,2 segundos se lleva el foco
   al principio de la página—.

   Todo el bloque va dentro de `no-preference`: con movimiento reducido no hay
   turno activo, se ven las diez y la forma base de arriba es la correcta. */
@media (prefers-reduced-motion:no-preference){

  .js .turno-cuerpo{
    display:grid;
    grid-template-columns:var(--turno-cifra) minmax(0,1fr);
    column-gap:var(--turno-hueco);
    /* El mismo criterio que el resto de la página: las dos columnas se atan
       por la línea base de su primera línea. Es lo que pone la cifra encendida
       a la altura del nombre que se está leyendo, y sin eso el invento no se
       entiende. */
    align-items:baseline;
    padding:11px 10px;
  }

  /* La columna de cifras. La monta el guion moviendo los LED aquí. */
  .js .turno-cifras{display:flex;flex-direction:column;}
  .js .turno-cifras[hidden]{display:none;}
  /* Fuera de la ventana de cuatro no se enseña. Son decoración —la columna
     entera va `aria-hidden`— así que `display:none` no le quita nada a nadie. */
  .js .turno-led:not(.en-panel){display:none;}
  .js .turno-led{line-height:1.32;}

  /* Las diez fichas, apiladas. */
  .js .turno-filas{display:grid;grid-template-areas:"ficha";gap:0;}
  .js .turno-fila{
    grid-area:ficha;
    display:block;padding:0;border-radius:0;
    opacity:0;pointer-events:none;
  }
  .js .turno-fila.es-ahora{opacity:1;pointer-events:auto;}

  /* La entrada SÓLO al rotar, nunca en la primera pintada: `both` aplica el
     fotograma inicial —opacidad 0— antes de arrancar, y ahí el texto está
     transparente. La auditoría de contraste lo medía en ese instante y daba
     1,88:1 sobre un texto que en pantalla cumple de sobra. */
  .js .turno-fila.rota{animation:turno-entra .34s cubic-bezier(.2,.7,.3,1) both;}
  .js .turno-led.rota{animation:turno-entra .34s cubic-bezier(.2,.7,.3,1) both;}
  @keyframes turno-entra{
    from{opacity:0;transform:translateY(10px);}
    to  {opacity:1;transform:none;}
  }

  .js .turno-ticket{opacity:0;}
  .js .turno-ticket.quieto{opacity:1;}
  .js .turno-ticket.es-nuevo{animation:turno-baja .42s cubic-bezier(.2,.75,.3,1) both;}
  .js .turno-ticket.se-va{animation:turno-cae .42s ease-in both;}
  @keyframes turno-baja{
    from{opacity:0;transform:translateY(-34px) scale(.92);}
    to  {opacity:1;transform:none;}
  }
  @keyframes turno-cae{
    from{opacity:1;transform:none;}
    to  {opacity:0;transform:translateY(30px) scale(.88) rotate(5deg);}
  }
}

/* Sin movimiento: no rota solo, se ven los diez turnos con su cifra dentro y
   nada cae ni baja. El botón de pausa sobra si no hay nada que pausar, y el de
   «siguiente turno» lo retira el guion. */
@media (prefers-reduced-motion:reduce){
  .turno-pausa{display:none;}
  .js .turno-ticket{opacity:1;}
  .js .turno-ticket.es-nuevo,.js .turno-ticket.se-va{animation:none;transform:none;}
}

/* ------------------------------ movimiento ------------------------------ */

/* Movimiento guiado por el desplazamiento, en CSS puro.
   Sin librerías y sin una sola línea de JavaScript, así que la CSP sigue en
   `default-src 'none'`. Deliberadamente NO se anima la entrada de cada sección:
   el fundido-y-subida en todo lo que aparece es el efecto por defecto de las
   librerías de scroll y es justo lo que hace que una página parezca hecha en
   serie. Solo se mueve lo que gana algo al moverse.
   Todo parte de su estado final: si el navegador no soporta animation-timeline,
   la página se ve entera y quieta, que es el comportamiento correcto. */
/* Con JavaScript, el relevo lo lleva js/portada.js: los eslóganes se enseñan
   una vez y NO reaparecen al subir. Eso no se puede hacer con
   animation-timeline, que es simétrico por definición. */
.js .manifiesto-titulos{display:grid;grid-template-areas:"frase";gap:0;}
/* Sólo alfa, y sólo a la ENTRADA. La transición vive en el estado `.es-ahora`,
   no en la base: así la frase que entra funde y la que sale desaparece de
   golpe, sin fundido de salida.
   Nada de clip-path ni de máscaras: recortaban los acentos y los rasgos
   descendentes por arriba y por abajo. */
.js .manifiesto-titulos li{
  grid-area:frase;
  opacity:0;visibility:hidden;
}
/* LA PRIMERA SE VE SIEMPRE, aunque el guion no llegue a decir nada. Se reportó
   que a veces el héroe salía vacío y no conseguí reproducirlo de forma
   determinista, así que en vez de perseguir la causa se cierra la familia
   entera: si `mover()` no ha corrido todavía, si `requestAnimationFrame` está
   frenado porque la pestaña no está visible, o si el guion se cae, lo que se
   ve es el primer eslogan y no un hueco. En cuanto el guion habla, manda él. */
.js .manifiesto-titulos li:first-child{opacity:1;visibility:visible;}
.js .manifiesto-titulos li:first-child.ya-visto{opacity:0;visibility:hidden;}
.js .manifiesto-titulos li.es-ahora{
  opacity:1;visibility:visible;
  transition:opacity .5s ease;
}
.js .manifiesto-titulos li.ya-visto{
  opacity:0;visibility:hidden;
}

/* ---- El manifiesto, fijado. Las frases se relevan una a una mientras
   avanzas y la última es la marca. Cada frase MANTIENE su opacidad plena
   durante la mayor parte de su tramo y sólo cruza al final, para que
   pararse a media transición sea raro y breve: la animación va atada al
   scroll y el usuario puede detenerse donde quiera. ---- */
@supports (animation-timeline: view()) and (animation-range: entry 0% cover 50%) {
  @media (prefers-reduced-motion: no-preference) {
    /* Sin JavaScript el relevo lo hace el CSS, simétrico. Con JavaScript manda
       el guion, que además lo hace de un solo sentido. */
    html:not(.js) .manifiesto{timeline-scope:--manif;}
    /* 340vh de pista: con 100vh pegados, la ventana en la que la sección está
       REALMENTE quieta va de cover 23% a cover 77%. Los cinco relevos tienen
       que caber dentro de ese tramo o la marca aparece cuando la sección ya se
       ha despegado, que es lo que pasaba con 420vh y rangos de 6% a 96%. */
    html:not(.js) .manifiesto-pista{view-timeline:--manif block;}
    html:not(.js) .manifiesto-titulos{display:grid;grid-template-areas:"frase";gap:0;}
    html:not(.js) .manifiesto-titulos li{
      grid-area:frase;
      opacity:0;visibility:hidden;
      animation:relevo linear both;
      animation-timeline:--manif;
    }
    /* SEIS pasos, no cinco: cinco eslóganes más la marca. Van repartidos dentro
       de la ventana en que la escena está de verdad quieta —de cover 23% a 77%—,
       porque fuera de ahí el relevo ocurre con la sección ya despegándose.
       Si se añade o se quita un eslogan hay que volver a repartirlos: el guion
       se adapta solo por `eslogans.length`, pero esta rama sin JavaScript no. */
    html:not(.js) .manifiesto-titulos li:nth-child(1){animation-range:cover 24% cover 35%;}
    html:not(.js) .manifiesto-titulos li:nth-child(2){animation-range:cover 33% cover 44%;}
    html:not(.js) .manifiesto-titulos li:nth-child(3){animation-range:cover 42% cover 53%;}
    html:not(.js) .manifiesto-titulos li:nth-child(4){animation-range:cover 51% cover 62%;}
    html:not(.js) .manifiesto-titulos li:nth-child(5){animation-range:cover 60% cover 71%;}
    html:not(.js) .manifiesto-titulos li:nth-child(6){animation-range:cover 69% cover 78%;}
    @keyframes relevo{
      0%   {opacity:0;visibility:visible;transform:translateY(22px);}
      14%  {opacity:1;transform:none;}
      82%  {opacity:1;transform:none;}
      100% {opacity:0;visibility:visible;transform:translateY(-14px);}
    }
    /* La marca es el final del recorrido: entra y se queda. */
    html:not(.js) .manifiesto-titulos li:nth-child(6){animation-name:relevo-final;}
    @keyframes relevo-final{
      0%   {opacity:0;visibility:visible;transform:translateY(22px);}
      22%  {opacity:1;transform:none;}
      100% {opacity:1;transform:none;}
    }
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* La maqueta del héroe flota un poco más despacio que el texto al bajar.
       Es el único parallax de la página: da profundidad al objeto principal. */
        @keyframes flotar{to{transform:translateY(-30px);}}
  }
}

/* Sin animación no hay relevo: se ven las cinco frases, una debajo de otra.
   Esto no bastaba con ocultar el vídeo, y durante un tiempo la promesa de
   arriba fue falsa. Medido: el vídeo era el único hijo en el flujo de la
   columna, así que al ocultarlo el pie subía a `top:0` y quedaba DEBAJO de los
   eslóganes, que van en absoluto —se solapaban por completo— y sobraban 559 px
   de blanco por debajo. Y con JavaScript sólo se veía una frase de las cinco,
   porque el relevo seguía corriendo sobre una pista sin altura que recorrer.
   Aquí se desmonta la escena entera: las frases vuelven al flujo, las cinco
   visibles, y el pie cae detrás. */
@media (prefers-reduced-motion:reduce){
  .manifiesto-video{display:none;}
  .manifiesto-fija{min-height:0;}
  /* `position:relative` para que el pie caiga detrás y no encima. El hueco de
     arriba NO se vuelve a escribir a mano: se hereda de --hueco-arriba, que sale
     del alto real de la cabecera. Antes había aquí un clamp(88px,13vh,120px)
     repetido, y repetir el valor es cómo se separan las dos ramas. */
  .manifiesto-titulos{position:relative;}
  /* El relevo se apaga: sin altura de pista no puede repartir los eslóganes y
     dejaría todos menos uno invisibles. Hace falta ganarle a `.ya-visto`, que es
     más específica, así que se repite el peso del selector. */
  .js .manifiesto-titulos{grid-template-areas:none;gap:26px;}
  .js .manifiesto-titulos li,
  .js .manifiesto-titulos li.es-ahora,
  .js .manifiesto-titulos li.ya-visto{
    grid-area:auto;opacity:1;visibility:visible;transform:none;
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  }