/* ═══════════════════════════════════════════════════════════════════════════════
   LA PORTADA — la puerta de la calle (unidad 022)

   Repartida desde la maqueta verificada (`.runtime/yura-web/limpia.src.html`), no
   copiada: aquí las tipografías se piden a `static/fuentes/` y las fotos entran por
   `background-image`, nunca por un `<img>`.

   Tres cosas que ya costaron caro en la maqueta y no hace falta que vuelvan a costar:

   · El castellano en versales LLEVA TILDES. Con `line-height` por debajo de 1,0 la Ó
     de MIÉRCOLES se come el renglón de arriba. Por eso `.tit` va a 1.0 y no a .9.
   · El revelado letra a letra NO puede ir con máscara de recorte: la manuscrita va con
     `line-height:.88`, la caja del renglón es más baja que el glifo y la ventana corta
     la tilde de «qué». Sube apareciendo, que es igual de escalonado y no corta nada.
   · En la pila de tarjetas, el hueco entre tarjetas ES el tiempo que cada una se deja
     leer. Con 26 px la siguiente tapaba el rótulo antes de que diera tiempo a leerlo.

   Y una regla que no estaba en la maqueta y aquí manda: **sin JavaScript la página se
   lee entera**. Todo lo que empieza escondido esperando un scroll se esconde SOLO bajo
   `.con-guion`, que es la clase que el guion se pone a sí mismo al arrancar. Sin guion,
   nada se esconde.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* **Los tokens de la marca, y el único sitio donde vive un color** (unidad 101, R1).

   Va lo primero porque un `@import` detrás de cualquier regla lo tira el navegador sin
   decir nada. Es el MISMO fichero del que come el `@theme` de Tailwind, así que la calle
   y las pantallas de trabajo no pueden volver a separarse: el azul se cambia en un sitio.

   La ruta es RELATIVA por lo mismo que las tipografías de aquí abajo: con el manifiesto
   de huella (R6 de la unidad 007) Django reescribe también los `@import` de esta hoja al
   nombre con huella, y una ruta absoluta no se reescribiría.

   Se escribe con la forma larga aunque la corta —solo la ruta entre comillas— sea CSS
   igual de válido: el manifiesto reescribe las dos, pero la corta la CONVIERTE en la
   larga, así que el fichero cambiaría en cada pasada y `collectstatic` se quedaría dando
   vueltas hasta morir con «Max post-process passes exceeded».

   Y un aviso para quien edite estos comentarios: **aquí no se escribe una ruta de ejemplo
   entre paréntesis, ni una regla de importación de ejemplo**, ni siquiera dentro de un
   comentario. El manifiesto las busca con una expresión regular que no sabe qué es un
   comentario, intenta resolver lo que encuentre y `collectstatic` se cae diciendo que
   falta un fichero con un nombre absurdo. Django 5.2, comprobado el 2026-09-04. */
@import url("marca.c48c68a0100d.css");

/* ─────────────────────────────────────────────────────────────
   FUENTES — las tres son libres (SIL Open Font License) y se
   sirven desde aquí. La ruta es RELATIVA a propósito: con el
   manifiesto de huella (R6 de la 007), Django reescribe las
   `url()` de esta hoja al nombre con huella; una ruta absoluta
   no se reescribe y el navegador pediría un fichero que ya no
   se llama así. Procedencia y licencia: `static/fuentes/LEEME.md`.
   ───────────────────────────────────────────────────────────── */
@font-face{font-family:"ArchivoX";src:url("../fuentes/Archivo-variable.de2f1fe81758.woff2") format("woff2-variations");
  font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"CaveatX";src:url("../fuentes/Caveat-700.9700119a3654.woff2") format("woff2");
  font-weight:400 700;font-display:swap}
@font-face{font-family:"ManropeX";src:url("../fuentes/Manrope.938c6e8019b6.woff2") format("woff2");
  font-weight:200 800;font-display:swap}

/* ─────────────────────────────────────────────────────────────
   PALETA — «Yura complementaria», la que el usuario eligió el
   2026-09-04. **Aquí ya no hay ni un hexadecimal**: los tres
   colores salen de `marca.css`, que es el único sitio donde
   viven, y de ahí come también el `@theme` de Tailwind que
   pinta las pantallas de dentro (unidad 101, R1). Cambiar el
   azul allí lo cambia en las dos caras.

   Los nombres de aquí —`--fondo`, `--acento`— no se renombran a
   propósito: los usan cuatrocientas líneas de esta hoja y el
   guion de la portada, y esta unidad **no cambia ni un píxel de
   la calle**. Son los papeles que cada color hace en esta
   página; el color en sí ya no se decide aquí.
   ───────────────────────────────────────────────────────────── */
:root{
  --fondo:var(--marca); --acento:var(--firma); --senal:var(--firma);
  /* copia inmutable de los tres: la banda clara los intercambia y si
     leyera de --fondo/--crema se realimentaría a sí misma */
  --fondo-fijo:var(--marca); --acento-fijo:var(--firma); --crema-fija:var(--crema);
  --hondo:  color-mix(in srgb, var(--fondo) 68%, #000);
  --velo:   color-mix(in srgb, var(--crema) 12%, transparent);
  --linea:  color-mix(in srgb, var(--crema) 18%, transparent);
  --apagado:color-mix(in srgb, var(--crema) 62%, transparent);

  --ancho:min(1440px, 100% - 6vw);
  --r:22px;
  --paso:cubic-bezier(.625,.05,0,1);   /* arranca y frena en seco */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fondo); color:var(--crema);
  font-family:"ManropeX",system-ui,sans-serif; font-size:17px; line-height:1.5;
  overflow-x:clip;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--acento); outline-offset:3px; border-radius:4px}

.contenedor{width:var(--ancho); margin-inline:auto}

/* Toda foto de esta página entra por aquí, y nunca por un `<img>`.
   Es lo que hace cierto R4: una `<img>` sin fichero pinta el icono partido del
   navegador; un fondo que no carga deja el color de la caja, que ya es el de la página. */
.foto{position:absolute; inset:0; background-size:cover; background-position:center;
  background-repeat:no-repeat}

/* ── Tipografía de titulares ─────────────────────────────── */
.tit{
  font-family:"ArchivoX",Impact,sans-serif; font-weight:900; font-stretch:122%;
  text-transform:uppercase; letter-spacing:-.02em; line-height:1.0;
  text-wrap:balance; margin:0;
}
/* Medidas tomadas de la referencia a 1440x860, no a ojo:
   firma 154 · display 55 · manuscrita 102 · cita 42 · lema 33
   rótulo de tarjeta 23 · cuerpo 17 · rótulo chico 15 · botón 14 · pie 13
   El salto que da carácter a la página es 102 contra 55: la palabra
   escrita a mano es casi el DOBLE que las versales que lleva al lado. */
.tit.l   {font-size:clamp(1.75rem, 3.82vw, 3.44rem)}   /* 55px */
.tit.cita{font-size:clamp(1.5rem,  2.92vw, 2.63rem)}   /* 42px */
.tit.lema{font-size:clamp(1.15rem, 2.29vw, 2.06rem)}   /* 33px */
.tit.m   {font-size:clamp(1.05rem, 1.60vw, 1.44rem)}   /* 23px */
.tit .mano{font-size:1.855em; line-height:.88}         /* 102/55 */
.mano{
  font-family:"CaveatX",cursive; font-weight:700; font-stretch:normal;
  text-transform:none; letter-spacing:0; color:var(--acento);
}
.rotulo{
  font-family:"ArchivoX",sans-serif; font-weight:700; font-stretch:88%;
  text-transform:uppercase; letter-spacing:.16em; font-size:.76rem;
  color:var(--apagado);
}
p{margin:0 0 1em}
.cuerpo{max-width:34em; color:var(--apagado)}

/* ── Botón ───────────────────────────────────────────────── */
.boton{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.85em 1.5em; border-radius:999px;
  background:var(--acento); color:var(--fondo);
  font-weight:800; font-size:.88rem; border:0; cursor:pointer;
  transition:transform .4s var(--paso), filter .4s var(--paso);
}
.boton:hover{transform:translateY(-2px); filter:brightness(1.08)}
.boton svg{width:1.1em; flex:none}

/* ─────────────────────────────────────────────────────────────
   LA FIRMA  —  «miescudo360°»
   El margen negativo se calcula contra el em del EXPONENTE, no
   el del padre: por eso el número lleva el suyo propio.
   ───────────────────────────────────────────────────────────── */
.fm{display:inline-flex; align-items:baseline; line-height:.78; white-space:nowrap}
.fm .mi{font-family:"CaveatX",cursive; font-weight:700; color:var(--acento);
  font-size:1.42em; transform:rotate(-7deg); display:inline-block}
.fm .esc{font-family:"ArchivoX",Impact,sans-serif; font-weight:900; font-stretch:122%;
  letter-spacing:-.035em; color:var(--crema)}
.fm .num{color:var(--acento)}
/* El tratamiento elegido el 2026-09-04: manuscrito, elevado y más pequeño que el nombre.
   Es el ÚNICO de los seis que viaja en esta hoja, porque es el único que la portada
   pública usa; los otros cinco —la `fC`, que era la que estaba puesta, incluida— viven en
   `portada-taller.css`, que solo se sirve detrás de la llave del taller. */
.fA .num{font-family:"CaveatX",cursive; font-weight:700; font-size:.62em; margin-left:.05em;
  align-self:flex-start; position:relative; top:-.02em; display:inline-block}

/* ── Barra de arriba ─────────────────────────────────────── */
/* Sin fondo (BUG 153): la barra va sobre la imagen o el vídeo como un PNG, y la sombra de
   texto es lo que la deja leerse sobre un vídeo claro. */
.barra{
  position:fixed; inset:0 0 auto 0; z-index:900; padding:1.1rem 0;
  text-shadow:0 1px 10px rgba(0,0,0,.45);
}
.barra .contenedor{display:flex; align-items:center; justify-content:space-between; gap:2rem}
.barra .fm{font-size:24px}
.menu{display:flex; gap:1.6rem; align-items:center; font-weight:600; font-size:1rem}
.menu a{position:relative; padding-block:.3em; overflow:visible}
.menu .entrar{color:var(--acento); font-weight:800}
@media (max-width:860px){ .menu a:not(.entrar){display:none} }

/* ── El bloque de marca de la esquina (unidad 107) ────────
   Hasta aquí, arriba a la izquierda no había NADA hasta hacer scroll: la barra llevaba la
   firma y las dos reglas de abajo la escondían mientras corre el guion. Ahora la esquina la
   ocupa el bloque de marca —logotipo de Cementos Yura, barrita y firma—, escrito una sola
   vez en `templates/marca/esquina.html` y compartido con la puerta de entrada (R4).

   **Desde la unidad 152 ya no hay dos estados**: el usuario quiere el logotipo, la barrita,
   la firma y el menú a la vista todo el tiempo, también al bajar. Lo único que hace la
   barra con el scroll es posarse (`.posada`, fondo translúcido a partir de 40 px), y ya no
   se esconde: la clase `oculta` y las reglas que apagaban la firma y la barrita hasta
   posarse se retiraron. */
.esquina{display:flex; align-items:center; gap:.7rem}
.esquina__yura{display:flex; align-items:center}
/* A un ALTO ESCRITO: sin él, el PNG de 565 px entra a su tamaño natural y revienta la barra.
   24 px es el mismo cuerpo que `.barra .fm`, que es lo que él pidió: los dos del mismo
   tamaño. */
.esquina__logotipo{display:block; height:24px; width:auto}
.esquina__barrita{display:block; width:1px; height:22px; background:currentcolor; opacity:.45}
/* En un teléfono el bloque encoge en vez de desbordar ni tapar el menú. */
@media (max-width:520px){
  .esquina__logotipo{height:20px}
  .esquina__barrita{height:18px}
  .barra .fm{font-size:20px}
}

/* La raya del menú, trazada como a mano. Cinco trazos distintos: si todos los enlaces
   llevaran la misma curva se notaría que es una plantilla y no un pulso. */
.menu a .raya{position:absolute; left:-.15em; right:-.15em; bottom:-.1em; width:calc(100% + .3em);
  height:.62em; overflow:visible; pointer-events:none}
.menu a .raya path{fill:none; stroke:var(--acento); stroke-width:2.4; stroke-linecap:round;
  stroke-dasharray:var(--largo); stroke-dashoffset:var(--largo);
  transition:stroke-dashoffset .5s var(--paso)}
.menu a:hover .raya path,.menu a:focus-visible .raya path{stroke-dashoffset:0}

/* ─────────────────────────────────────────────────────────────
   PORTADA
   Alto fijo: entra ENTERA en la pantalla. La firma va encima de
   todo, montada sobre el pie de la foto — ahí es donde el retrato
   es más oscuro y la crema se lee sin necesidad de un velo.
   ───────────────────────────────────────────────────────────── */
.portada{position:relative; height:100svh; overflow:hidden; padding:clamp(10px,1.32vw,19px)}
.portada .rejilla{
  height:100%; display:grid;
  grid-template-columns:minmax(0,682fr) minmax(0,651fr);   /* la foto ocupa el 48,6% */
  gap:clamp(18px,3.68vw,53px);
}
.retrato{position:relative; border-radius:var(--r); overflow:hidden; background:var(--hondo); min-height:0}
.retrato .foto{opacity:0; transition:opacity 1.2s var(--paso), transform 7s linear}
.retrato .foto.viva{opacity:1; transform:scale(1.06)}
.lema{align-self:center; text-align:center; padding-bottom:3.4vh}
.lema h1{margin:0; line-height:1.0}
.lema .l1,.lema .l3{display:block}
/* en la PORTADA la manuscrita apenas crece (el bloque entero mide 105px en la
   referencia); el salto a 102 es cosa de los titulares de sección, no del lema. */
.lema h1 .l2{display:block; font-size:1.15em; line-height:.95; margin:-.02em 0 0}

.firmona{position:absolute; left:23.6%; right:2.36%; bottom:4%; pointer-events:none}
.firmona .fm{font-size:11vw; align-items:flex-end; padding-bottom:.16em}


@media (max-width:860px){
  /* En vertical la foto se lleva el sitio que sobra, el lema va justo debajo y abajo
     queda reservado el hueco de la firma. */
  .portada .rejilla{grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto;
    gap:1rem; padding-bottom:14vh}
  .lema{align-self:start; padding-bottom:0}
  .firmona{left:2.5%; right:2.5%}
}

/* ─────────────────────────────────────────────────────────────
   MANIFIESTO sobre imagen — la imagen crece y se apaga mientras
   el texto se enciende palabra a palabra.
   ───────────────────────────────────────────────────────────── */
/* NI EL FILTRO NI LAS LETRAS NACEN PUESTOS, Y NACEN JUNTOS. `--filtro` va de 0 a 1, lo
   mueve el scroll, y de ese único número cuelgan las DOS cosas: el velo y el párrafo del
   manifiesto. Que sea uno solo no es economía, es el requisito: el velo existe para que
   las letras se lean sobre el vídeo, así que no puede haber velo sin letras que resaltar
   ni letras sin velo que las separe del vídeo.

   Arriba del todo vale 0 y el vídeo se ve **solo**: sin velo y sin una sola letra encima.
   Al seguir bajando sube a 1, y con él aparece el párrafo subiendo desde abajo. Sólo
   después, ya con el velo puesto, las palabras se van encendiendo una a una.

   La primera vuelta del BUG 029 quitó el velo pero se dejó las letras, que seguían ahí
   desde el primer píxel: «Ahora las letras están siempre, corrige eso.»

   El valor de reposo es 1 —todo PUESTO— a propósito: sin JavaScript nadie va a moverlo, y
   un párrafo invisible esperando un scroll que nadie va a animar es texto perdido. Solo
   `.con-guion` se atreve a ponerlo a 0, porque solo entonces hay quien lo suba. Lo mismo
   con el movimiento reducido, abajo: allí no hay scroll que valga. */
.manifiesto{height:400vh; position:relative; --filtro:1}   /* 340vh hasta la 152; 480 fue de más (BUG 153) */
.con-guion .manifiesto{--filtro:0}
.manifiesto .fija{position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; place-items:center}
/* El marco del vídeo (152): la escala la pone `portada.js` desde `--marco-inicial`; sin
   guion o con el movimiento reducido queda a 1. `overflow:hidden` deja ver las esquinas. */
.manifiesto{--marco-inicial:.42}
.manifiesto .lienzo{position:absolute; inset:0; background:var(--hondo); overflow:hidden;
  transform-origin:center; will-change:transform, border-radius}
@media (max-width:860px){ .manifiesto{--marco-inicial:.8} }
.manifiesto .lienzo video{width:100%; height:100%; object-fit:cover; will-change:transform}
.manifiesto .sombra{position:absolute; inset:0; background:var(--fondo);
  opacity:calc(.8 * var(--filtro))}
/* velo detrás del texto: el cielo de la foto es lo bastante claro como para que la
   palabra apagada desaparezca del todo. Entra con el filtro, no antes. */
.manifiesto .fija::after{content:""; position:absolute; inset:0; pointer-events:none;
  opacity:var(--filtro);
  background:radial-gradient(ellipse 82% 52% at 50% 50%,
    color-mix(in srgb, var(--fondo) 92%, transparent) 0%, transparent 74%)}
.manifiesto .texto{position:relative; z-index:2; width:var(--ancho); max-width:980px; text-align:center;
  text-shadow:0 2px 18px color-mix(in srgb, var(--fondo) 70%, transparent)}
/* El párrafo entero entra con el velo, y entra SUBIENDO. Apagar el párrafo —y no palabra
   por palabra— es lo que garantiza que arriba del todo no quede ni una letra encima del
   vídeo: da igual a cuánto esté cada `.pal`, si su párrafo está a 0 no se ve ninguna.
   El desplazamiento se calcula del mismo número: 2.4rem abajo cuando `--filtro` vale 0,
   en su sitio cuando vale 1. */
.con-guion .manifiesto .texto{opacity:var(--filtro);
  transform:translateY(calc((1 - var(--filtro)) * 2.4rem))}
.manifiesto .pal{opacity:.34; transition:opacity .25s linear}
.manifiesto .pal.on{opacity:1}
/* Y las palabras SUBEN desde abajo mientras se encienden. `inline-block` es obligatorio:
   una caja en línea no acepta `transform`, así que sin esto el desplazamiento no existe y
   la palabra solo aparecería. Los espacios entre palabras son nodos de texto aparte, así
   que el renglón sigue partiendo donde debe. */
.con-guion .manifiesto .pal{display:inline-block; transform:translateY(.5em);
  transition:opacity .3s linear, transform .55s var(--paso)}
.con-guion .manifiesto .pal.on{transform:none}

/* El interruptor de sonido del manifiesto. Sin guion no hay nada que encender: se va. */
.sonido{display:none}
.con-guion .sonido{position:absolute; left:clamp(14px,2.4vw,34px); bottom:clamp(14px,2.4vw,34px); z-index:3;
  display:flex; align-items:center; gap:.6em; padding:.5em .55em .5em .95em; border-radius:999px;
  border:1px solid var(--linea); background:color-mix(in srgb, var(--fondo) 62%, transparent);
  backdrop-filter:blur(12px); color:var(--crema); cursor:pointer;
  font:600 .77rem/1 "ManropeX",system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase}
.sonido i{width:30px; height:17px; border-radius:999px; background:var(--velo); position:relative;
  transition:background .4s var(--paso)}
.sonido i::after{content:""; position:absolute; top:2px; left:2px; width:13px; height:13px;
  border-radius:50%; background:var(--crema); transition:transform .4s var(--paso), background .4s var(--paso)}
.sonido[aria-pressed="true"] i{background:var(--acento)}
.sonido[aria-pressed="true"] i::after{transform:translateX(13px); background:var(--fondo)}

/* ─────────────────────────────────────────────────────────────
   MÓDULOS — pila pegajosa, sin una línea de JS para pegarse
   ───────────────────────────────────────────────────────────── */
.seccion{padding-block:clamp(4rem,11vh,9rem)}
.cabecera{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2.5rem; align-items:end;
  margin-bottom:clamp(2rem,6vh,4rem)}
@media (max-width:860px){ .cabecera{grid-template-columns:1fr; gap:1.2rem} }

/* El hueco entre tarjetas ES el tiempo de lectura de cada una. Con 26px la siguiente
   tapaba el rótulo antes de que diera tiempo a leerlo. */
.pila{display:flex; flex-direction:column; gap:clamp(2.5rem,30vh,18rem)}
.tarjeta{
  position:sticky; top:calc(9vh + var(--i)*10px);
  border-radius:var(--r); overflow:hidden; background:var(--hondo);
  min-height:min(62svh,560px); display:flex; align-items:flex-end;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.55);
  transform-origin:top center;
}
.tarjeta .foto{opacity:.62}
.tarjeta .pie{position:relative; width:100%; padding:clamp(1.2rem,3vw,2.4rem);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:linear-gradient(to top, color-mix(in srgb,var(--fondo) 92%, transparent), transparent)}
.tarjeta .n{font-size:.72rem; letter-spacing:.2em; color:var(--acento); font-weight:800; margin:0}
.tarjeta .que{margin:.5em 0 0; color:var(--apagado); font-size:.95rem}
.tarjeta .flecha{width:44px; height:44px; border-radius:50%; flex:none;
  display:grid; place-items:center; background:var(--acento); color:var(--fondo);
  transition:transform .5s var(--paso)}
.tarjeta:hover .flecha{transform:translateX(4px)}

/* ─────────────────────────────────────────────────────────────
   FRANJA horizontal empujada por el scroll vertical
   ───────────────────────────────────────────────────────────── */
.franja{height:280vh; position:relative}
.franja .fija{position:sticky; top:0; height:100svh; overflow:hidden; display:flex; flex-direction:column;
  justify-content:center; gap:2rem}
.franja .tren{display:flex; gap:clamp(1rem,2vw,1.8rem); padding-inline:3vw; will-change:transform}
.ficha{flex:none; width:min(34vw,420px); border-radius:var(--r); overflow:hidden; position:relative;
  aspect-ratio:4/5; background:var(--hondo); margin:0}
.ficha figcaption{position:absolute; inset:auto 0 0 0; padding:1.2rem;
  background:linear-gradient(to top, color-mix(in srgb,var(--fondo) 92%, transparent), transparent);
  font-weight:800; text-transform:uppercase; letter-spacing:.02em; font-size:.95rem}
@media (max-width:860px){ .ficha{width:72vw} }

/* La franja se arrastra, y el ratón lo dice. */
.tren-caja{overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none;
  cursor:grab; touch-action:pan-y}
.tren-caja::-webkit-scrollbar{display:none}
.tren-caja.agarrando{cursor:grabbing}
.tren-caja .ficha .foto{pointer-events:none; user-select:none}
#burbuja{position:fixed; z-index:8000; pointer-events:none; translate:-50% -50%;
  width:84px; height:84px; border-radius:50%; display:grid; place-items:center;
  background:var(--acento); color:var(--fondo);
  font:900 .62rem/1 "ArchivoX",system-ui,sans-serif; letter-spacing:.14em;
  opacity:0; scale:.4; transition:opacity .3s var(--paso), scale .3s var(--paso)}
#burbuja.viva{opacity:1; scale:1}
@media (hover:none){ #burbuja{display:none} }

/* ─────────────────────────────────────────────────────────────
   POR QUÉ — acordeón
   ───────────────────────────────────────────────────────────── */
.porque{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr); gap:clamp(2rem,5vw,4.5rem);
  align-items:center}
@media (max-width:960px){ .porque{grid-template-columns:1fr} .porque .visual{order:-1} }
.porque .visual{border-radius:var(--r); overflow:hidden; aspect-ratio:4/5; position:relative; background:var(--hondo)}
.porque .visual .foto{opacity:0; transition:opacity .7s var(--paso), transform 1.2s var(--paso);
  transform:scale(1.05)}
.porque .visual .foto.viva{opacity:1; transform:scale(1)}
.pastillas{display:flex; flex-direction:column; gap:.7rem; list-style:none; margin:0; padding:0}
.pastilla{border-radius:18px; background:var(--velo); box-shadow:inset 0 0 0 1px var(--linea); overflow:hidden}
.pastilla button{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.05rem 1.3rem; background:none; border:0; cursor:pointer; color:inherit; text-align:left;
  font-family:"ArchivoX",sans-serif; font-weight:900; font-stretch:110%; text-transform:uppercase;
  letter-spacing:.01em; font-size:clamp(.95rem,1.6vw,1.15rem);
}
.pastilla .mas{width:28px; height:28px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--velo); position:relative; transition:background .4s var(--paso)}
.pastilla .mas::before,.pastilla .mas::after{content:""; position:absolute; background:currentColor;
  transition:transform .5s var(--paso)}
.pastilla .mas::before{width:11px; height:1.6px}
.pastilla .mas::after{width:1.6px; height:11px}
.pastilla[aria-expanded="true"] .mas{background:var(--acento); color:var(--fondo)}
.pastilla[aria-expanded="true"] .mas::after{transform:scaleY(0)}
/* Sin guion los cuatro paneles se quedan abiertos: el texto se lee igual y nadie se
   queda con una pastilla que no abre. Con guion, se cierran los tres que no tocan. */
.pastilla .panel{display:grid; grid-template-rows:1fr; transition:grid-template-rows .55s var(--paso)}
.con-guion .pastilla[aria-expanded="false"] .panel{grid-template-rows:0fr}
.pastilla .panel>div{overflow:hidden}
.pastilla .panel p{padding:0 1.3rem 1.2rem; margin:0; color:var(--apagado); max-width:44ch}

/* ─────────────────────────────────────────────────────────────
   TESTIMONIO
   ───────────────────────────────────────────────────────────── */
.cita{text-align:center}
.cita blockquote{margin:0 auto; max-width:18ch}
.cita .quien{margin-top:1.6rem; color:var(--apagado); font-size:.95rem}

/* ─────────────────────────────────────────────────────────────
   EL REPRODUCTOR
   ───────────────────────────────────────────────────────────── */
.pelicula{padding-block:clamp(3rem,8vh,6rem)}
.reproductor{position:relative; margin:0; border-radius:var(--r); overflow:hidden;
  background:var(--hondo); aspect-ratio:16/9}
.reproductor video{width:100%; height:100%; object-fit:cover; display:block}
.reproductor .tapa,.reproductor .mandos{display:none}
.con-guion .reproductor .tapa{position:absolute; inset:0; width:100%; border:0; cursor:pointer;
  background:color-mix(in srgb, var(--fondo) 34%, transparent);
  display:grid; place-items:center; color:var(--fondo); transition:opacity .5s var(--paso)}
.reproductor .tapa svg{width:34px; padding:24px; border-radius:50%; background:var(--acento);
  box-sizing:content-box; transition:transform .5s var(--paso)}
.reproductor .tapa:hover svg{transform:scale(1.08)}
.con-guion .reproductor.rodando .tapa{opacity:0; pointer-events:none}
.con-guion .mandos{position:absolute; left:0; right:0; bottom:0; padding:clamp(.8rem,1.6vw,1.3rem);
  display:flex; align-items:center; gap:clamp(.6rem,1.4vw,1.1rem);
  background:linear-gradient(to top, color-mix(in srgb,#000 62%, transparent), transparent);
  opacity:0; transform:translateY(30%); transition:opacity .4s var(--paso), transform .4s var(--paso)}
.con-guion .reproductor.rodando .mandos,
.con-guion .reproductor:hover .mandos,
.con-guion .reproductor:focus-within .mandos{opacity:1; transform:none}
.mandos button{width:34px; height:34px; flex:none; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.16); color:#fff; display:grid; place-items:center; position:relative}
.mandos .pp::before,.mandos .pp::after{content:""; position:absolute; width:3.5px; height:13px;
  background:#fff; border-radius:1px; transition:all .3s var(--paso)}
.mandos .pp::before{transform:translateX(-4px)} .mandos .pp::after{transform:translateX(4px)}
.reproductor:not(.rodando) .mandos .pp::before{transform:translateX(-2px) scaleY(1)}
.reproductor:not(.rodando) .mandos .pp::after{opacity:0}
.mandos .reloj{font:600 .78rem/1 "ManropeX",system-ui,sans-serif; color:#fff;
  font-variant-numeric:tabular-nums; flex:none; opacity:.9}
.mandos .son .suena{opacity:0}
.mandos .son[aria-pressed="true"] .muda{opacity:0}
.mandos .son[aria-pressed="true"] .suena{opacity:1}
.mandos .riel{flex:1; height:4px; border-radius:999px; background:rgba(255,255,255,.24); cursor:pointer;
  position:relative}
.mandos .riel i{position:absolute; inset:0 auto 0 0; width:0; border-radius:999px; background:var(--acento)}
.mandos .riel:focus-visible{outline:2px solid var(--acento); outline-offset:4px}

/* ─────────────────────────────────────────────────────────────
   CIERRE
   ───────────────────────────────────────────────────────────── */
.cierre{text-align:center; padding:clamp(2rem,6vh,4rem) 0 clamp(5rem,14vh,10rem)}
.cierre .tit{max-width:16ch; margin-inline:auto; margin-bottom:2.2rem}
/* ── EL PIE (unidad 031, R1) ──────────────────────────────
   Aquí es donde el sitio dice QUÉ es. Hasta la 031 eran dos líneas de relleno —un
   copyright sin titular y un enlace a «Privacidad» que llevaba a la pantalla de
   entrar—, que es exactamente el aspecto de una página sin terminar.

   Tres piezas en una fila que se parte sola: en el móvil se apilan y se leen
   igual, sin desplegar nada. Las medidas van en `ch` y no en píxeles porque lo
   que tiene que caber es texto, y `ch` mide justo eso. */
.pie{border-top:1px solid var(--linea); padding:1.6rem 0 3.4rem; font-size:.85rem; color:var(--apagado)}
.pie .contenedor{display:flex; align-items:flex-start; justify-content:space-between;
  gap:1rem 2rem; flex-wrap:wrap}
.pie p{margin:0; max-width:46ch; line-height:1.5}
.pie .que-es{flex:1 1 26ch}
/* Lo que de verdad hay que poder leer de un vistazo: qué es y para quién. */
.pie .que-es strong{color:var(--crema); font-weight:800}
.pie .como-se-entra{flex:1 1 22ch}
.pie .puerta{flex:none; color:var(--acento); font-weight:800;
  border-bottom:1px solid currentColor; padding-bottom:.15em;
  transition:color .3s var(--paso)}
.pie .puerta:hover{color:var(--crema)}

/* ── La banda clara ──────────────────────────────────────── */
[data-tema="claro"]{
  --fondo:var(--crema-fija); --crema:var(--fondo-fijo); --acento:var(--acento-fijo);
  --hondo:  color-mix(in srgb, var(--fondo) 88%, #000);
  --velo:   color-mix(in srgb, var(--crema) 8%,  transparent);
  --linea:  color-mix(in srgb, var(--crema) 16%, transparent);
  --apagado:color-mix(in srgb, var(--crema) 68%, transparent);
  background:var(--fondo); color:var(--crema);
  transition:background .7s var(--paso), color .7s var(--paso);
}
[data-tema="claro"] .mano{color:color-mix(in srgb, var(--acento-fijo) 88%, #000)}

/* ── Entradas ────────────────────────────────────────────── */
/* Solo bajo `.con-guion`: sin JavaScript nada de esto se esconde, porque el
   `IntersectionObserver` que lo volvería a encender tampoco existiría. */
.con-guion [data-sube]{opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--paso), transform .8s var(--paso)}
.con-guion [data-sube].dentro{opacity:1; transform:none}

/* ── Letra a letra ───────────────────────────────────────── */
/* La letra NO se recorta con una ventana. Lo intenté y no cabe: la manuscrita va con
   `line-height:.88`, así que la caja de la línea es más baja que el propio glifo, y la
   ventana se comía la tilde de «qué» y el asta de la F. Para que cupieran habría que
   separar los renglones — o sea, romper el ajuste de 102 contra 55 que es lo que da
   carácter a la página. Sube apareciendo, que es igual de escalonado y no corta nada. */
[data-letras] .palabra{display:inline-block}
[data-letras] .rendija{display:inline-block}
[data-letras] .letra{display:inline-block; opacity:0; transform:translateY(.42em);
  transition:opacity .5s var(--paso), transform .68s var(--paso)}
[data-letras].dentro .letra{opacity:1; transform:none}

/* ── El telón de las transiciones ────────────────────────── */
#telon{position:fixed; inset:0; z-index:9500; background:var(--acento); pointer-events:none;
  transform:translateY(100%); transition:transform .62s var(--paso)}
#telon.entra{transform:none}
#telon.sale{transform:translateY(-100%); transition-duration:.7s}

/* ─────────────────────────────────────────────────────────────
   R7 · Con el movimiento reducido, la portada se lee ENTERA.
   Nada se queda invisible esperando un scroll que nunca llega, y
   nada se pega: las tres piezas que dependían del recorrido se
   sueltan y se leen una detrás de otra.
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .con-guion [data-sube]{opacity:1; transform:none}
  [data-letras] .letra{opacity:1; transform:none}
  .manifiesto{height:auto}
  .manifiesto .fija{position:static; height:auto; padding-block:6rem}
  .manifiesto .pal{opacity:1}
  /* Aquí muerde el punto 3 del BUG 029 en sentido contrario: sin scroll no hay quien
     coloque el filtro, y el texto del manifiesto sobre el vídeo sin nada que los separe
     no se leería. Llega puesto, y las palabras llegan encendidas y en su sitio.
     Las tres reglas van con `.con-guion` delante porque es lo que llevan las de arriba: a
     igual especificidad gana la última, y estas tienen que ganar.
     La del párrafo se escribe entera —`opacity:1; transform:none`— aunque `--filtro:1` ya
     la dejaría así: aquí es donde se paga que las letras nazcan invisibles esperando un
     scroll, y esto no puede depender de que nadie toque el número de arriba. */
  .con-guion .manifiesto{--filtro:1}
  .con-guion .manifiesto .texto{opacity:1; transform:none}
  .con-guion .manifiesto .pal{opacity:1; transform:none}
  .franja{height:auto}
  .franja .fija{position:static; height:auto; padding-block:4rem}
  .franja .tren{transform:none !important}
  /* `relative`, NO `static`: la foto de cada tarjeta es un `position:absolute` que se
     coloca contra su tarjeta. Con `static` la tarjeta deja de ser su referencia y las seis
     fotos se van a buscar al primer antepasado colocado — o sea, seis tarjetas vacías
     justo en el modo que existe para que la página se lea entera. Se vio en la captura. */
  .tarjeta{position:relative}
  .con-guion .pastilla[aria-expanded="false"] .panel{grid-template-rows:1fr}
  #telon{display:none}
  #burbuja{display:none}
}