/* =============================================================================
   motor.css - EL SISTEMA del Estudio. Se hereda; no se edita por prototipo.

   Aqui vive lo que NO sale del negocio: la escala, el ritmo, la inversion de
   tema, la barra, la camara del heroe, la mocion, la accion que siempre esta
   y el corte de telefono.

   Lo que SI sale del negocio -la paleta, las dos familias tipograficas, la
   composicion propia y la firma visual- vive en el `piel.css` de cada
   prototipo, que se carga DESPUES.

   No se copia a mano: `estudio/herramientas/sembrar.py <prototipo>` lo lleva
   a assets/ junto con las tres librerias.

   Los nombres de bloque son genericos a proposito: `.capitulo` es una foto a
   sangre con su texto abajo, y en Gumba's era un plato y en un taller es un
   servicio. Si un bloque solo tiene sentido en un rubro, va en su piel.
   ========================================================================== */

/* -- 1 · el numero que manda -------------------------------------------
   Toda la pagina reescala desde --paso... o mas exactamente desde el
   font-size de la raiz. Cambiarlo mueve la composicion entera sin que ningun
   componente se entere. Los VALORES de color y las FAMILIAS tipograficas NO
   estan aqui: salen del negocio y viven en su piel.css.                  */
:root{
  font-size: clamp(11.5px, .75vw + 8.6px, 16px);

  /* escala tipografica, en em contra la raiz */
  --t-1:.833em; --t0:1.111em; --t1:1.667em; --t2:2.222em;
  --t3:3.333em; --t4:5em;     --t5:7.222em;

  /* escalera de espacio, no lineal porque la percepcion no lo es */
  --s1:.277em; --s2:.416em; --s3:.833em; --s4:1.666em; --s5:2.5em;
  --s6:4.167em; --s7:6.666em; --s8:10.833em; --s9:15em;

  --ancho:82em;
  --canal:clamp(1.25rem,5vw,4rem);
  --r-sm:.555em; --r-md:1.111em; --r-pill:999em;
  --barra:4.4em;
}

/* La inversion de tema. No se escriben dos hojas de estilo: se escribe una y
   se cambia QUE SIGNIFICAN los dos anclajes. Cada componente usa solo --fg,
   --bg, --fg-soft, --hairline y --c-accent-t, asi que cae bien en los dos. */
/* ⚠️ EL ACENTO ES DECORATIVO Y TIENE DOS TINTAS DE TEXTO, NO UNA.
   Lo destapo el segundo prototipo: el rojo de las cajas de herramienta de un
   taller (#B02E1E) da 5,46:1 sobre hormigon claro -pasa- pero **2,84:1 sobre
   el negro frio**: como texto en tema oscuro no vale. En Gumba's daba 7,76
   en los dos, asi que con un solo prototipo el sistema parecia correcto y no
   lo era.
   Asi que cada piel declara TRES: --c-accent (fondo de boton, sellos, bordes)
   y las dos tintas de texto. Si una piel no las declara, se cae al acento y
   el medidor lo caza. */
.theme-dark { --fg:var(--c-paper); --bg:var(--c-ink);   --fg-soft:var(--c-muted-on-dark);  --hairline:var(--c-paper-15); --c-accent-t:var(--c-accent-claro,  var(--c-accent)); }
.theme-light{ --fg:var(--c-ink);   --bg:var(--c-paper); --fg-soft:var(--c-muted-on-light); --hairline:var(--c-ink-15);   --c-accent-t:var(--c-accent-oscuro, var(--c-accent)); }

/* -- 2 · base ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--text); font-size:var(--t0); line-height:1.55;
  letter-spacing:-.011em; color:var(--fg); background:var(--bg);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* las superficies del navegador. Salir con los colores de fabrica es la senal
   mas barata de que una pagina se monto en vez de construirse. */
::selection{background:var(--c-accent); color:var(--c-ink)}
:root{caret-color:var(--c-accent); scrollbar-color:var(--c-surface) var(--c-ink)}
img,svg,video,canvas{display:block; max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--c-accent); outline-offset:3px; border-radius:2px}

h1,h2,h3,h4{font-family:var(--display); font-weight:500; margin:0;
  font-optical-sizing:auto; overflow-wrap:break-word}
h1{font-size:var(--t5); line-height:.846; letter-spacing:-.04em}
h2{font-size:var(--t4); line-height:.889; letter-spacing:-.035em}
h3{font-size:var(--t3); line-height:1;    letter-spacing:-.03em}
h4{font-size:var(--t2); line-height:1.125;letter-spacing:-.025em}
p{margin:0 0 var(--s4)}
.lede{font-size:var(--t1); line-height:1.35; letter-spacing:-.02em}
.ceja{font-family:var(--text); font-size:.72em; font-weight:500;
      letter-spacing:.22em; text-transform:uppercase; color:var(--c-accent-t);
      margin:0 0 var(--s4)}
.fina{font-size:var(--t-1); line-height:1.4; color:var(--fg-soft)}

.wrap{width:min(var(--ancho),100% - var(--canal)*2); margin-inline:auto}
.banda{position:relative; padding-block:var(--s8); background:var(--bg); color:var(--fg)}
.banda + .banda{padding-top:var(--s8)}
.banda--cambia{padding-block:var(--s9)}

/* -- 3 · la barra ------------------------------------------------------ */
.barra{
  position:fixed; inset:0 0 auto; z-index:40; height:var(--barra);
  display:flex; align-items:center; gap:var(--s4);
  padding-inline:var(--canal);
  background:var(--c-ink); color:var(--c-paper);          /* SOLIDA, nunca translucida */
  border-bottom:1px solid var(--c-paper-15);
  transition:background-color .3s ease, color .3s ease, border-color .3s ease;
}
.barra.theme-light{background:var(--c-paper); color:var(--c-ink); border-bottom-color:var(--c-ink-15)}
.barra__marca{font-family:var(--display); font-weight:500; font-size:1.45em;
  letter-spacing:.02em; text-decoration:none; line-height:1; white-space:nowrap;
  transform-origin:50% 50%; will-change:auto}
/* SIN opacidad: .55 encima de la tinta daba 3,83:1 en la barra clara. Es la
   quinta vez en este proyecto que una opacidad tumba un par que pasaba. */
.barra__marca sup{font-size:.32em; vertical-align:1.25em; letter-spacing:.2em;
  margin-left:.55em; font-family:var(--text); font-weight:500;
  color:var(--fg-soft)}
.barra__enlaces{margin-left:auto; display:flex; gap:var(--s5); align-items:center;
                font-size:var(--t-1); letter-spacing:.1em; text-transform:uppercase}
.barra__enlaces a{text-decoration:none; opacity:.82; transition:opacity .2s}
.barra__enlaces a:hover{opacity:1}
.barra__tel{font-variant-numeric:tabular-nums; letter-spacing:.04em}
@media (max-width:860px){ .barra__enlaces .oculta-movil{display:none} }

/* -- 4 · el heroe: la camara ------------------------------------------- */
.dolly{position:relative; height:250vh}
.dolly__escena{
  position:sticky; top:0; height:100vh; height:100svh;
  /* Color del escenario: lo que se ve ANTES de que lleguen las fotos, asi
     que el primer pintado ya es un color elegido y no blanco. Cada piel mide
     el dominante de SU fondo y lo pone en --hero-fondo. */
  overflow:hidden; background:var(--hero-fondo,#2A2622);
}
/* SIN will-change y SIN translateZ: promover una capa que luego se escala es
   exactamente lo que hace que Chrome deje de pintarla. */
.dolly__fondo,.dolly__lamina{position:absolute; inset:0}
.dolly__fondo img,.dolly__lamina img{width:100%; height:100%; max-width:none; object-fit:cover}
.dolly__lamina{z-index:2}
.dolly__vineta{position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(60% 60% at 50% 48%,rgba(0,0,0,0) 0%,rgba(20,14,11,.28) 76%,rgba(20,14,11,.52) 100%)}
/* El velo sostiene el contraste del texto, y NO se confia a la fotografia:
   la fotografia cambia de brillo mientras la camara avanza.
   Su forma es del prototipo, no del motor: el tercero abre sobre un muro de
   yeso claro con la tinta oscura, asi que su velo ACLARA por un lado en vez
   de oscurecer por arriba y por abajo. */
.dolly__velo{position:absolute; inset:0; z-index:4; pointer-events:none; opacity:.34;
  background:var(--hero-velo,
    linear-gradient(180deg,rgba(15,10,8,.72) 0%,rgba(15,10,8,.42) 46%,rgba(15,10,8,.78) 100%))}
.dolly__ui{position:absolute; inset:0; z-index:5; display:grid; place-items:center;
  pointer-events:none; color:var(--hero-ink, var(--c-paper)); text-align:center}
.dolly__ui a{pointer-events:auto}
.dolly__titulo{font-size:clamp(2.8rem,9.5vw,7.5rem); line-height:.9; letter-spacing:-.045em;
  margin:0; display:grid; gap:.04em; max-width:14ch}
.dolly__titulo span{display:block}
.dolly__pie{position:absolute; left:0; right:0; bottom:var(--s8); z-index:5;
  display:flex; justify-content:center; gap:var(--s5); color:var(--hero-ink, var(--c-paper));
  font-size:var(--t-1); letter-spacing:.18em; text-transform:uppercase}
.dolly__destino{position:absolute; left:50%; top:31%; width:9.5em; height:2.1em;
  transform:translate(-50%,-50%); pointer-events:none; visibility:hidden}

/* -- 5 · la afirmacion ------------------------------------------------- */
.claim{min-height:78vh; display:grid; align-content:center}
.claim h2{max-width:16ch}
.claim p{max-width:44ch; color:var(--fg-soft); margin-top:var(--s5)}

/* -- 6 · la prueba ----------------------------------------------------- */
.prueba{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4);
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
  padding-block:var(--s6)}
.prueba div{display:grid; gap:var(--s2)}
.prueba b{font-family:var(--display); font-weight:500; font-size:var(--t3);
  line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.prueba span{font-size:var(--t-1); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-soft)}
@media (max-width:760px){ .prueba{grid-template-columns:repeat(2,1fr); gap:var(--s5)} }

/* -- 7 · el capitulo: foto a sangre con su texto abajo ---------------------------------- */
.banda.capitulo{position:relative; min-height:100vh; min-height:100svh;
  display:grid; align-items:end; padding:0; overflow:clip}
.capitulo__txt{padding-block:var(--s7)}
.capitulo__foto{position:absolute; inset:0; z-index:0}
.capitulo__foto img{width:100%; height:100%; object-fit:cover}
/* El velo va POR ENCIMA del lienzo del shader (z-index 2 contra 1). Sin
   esto el canvas de WebGL lo tapaba y el texto quedaba sobre la foto pelada:
   ilegible, y ademas era invisible en el CSS porque el degradado si estaba.
   El contraste sobre una foto no se arregla con text-shadow; eso es la senal
   de que nadie resolvio el problema. */
.capitulo__foto::after{content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(0deg,
    rgba(14,10,8,.95) 0%, rgba(14,10,8,.9) 30%,
    rgba(14,10,8,.62) 52%, rgba(14,10,8,.22) 76%, rgba(14,10,8,.05) 100%)}
.capitulo__txt{position:relative; z-index:3; color:var(--c-paper); max-width:34em}
.capitulo__txt h3{margin-bottom:var(--s3)}
.capitulo__precio{font-family:var(--display); font-size:var(--t2); color:var(--c-accent-t);
  font-variant-numeric:tabular-nums}
/* El texto del capitulo va siempre sobre la foto, y el velo de arriba es
   oscuro, asi que la tinta clara es estructural. Aun asi es un token: el dia
   que una piel quiera un velo claro, no tiene que pelearse con el motor. */
.capitulo__d{color:var(--sobre-foto-soft,#EAE1D8); max-width:44ch}

/* -- 8 · el bloque partido, con sitio para el aire caliente (WebGL) ------------------------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch}
.split__media{position:relative; min-height:34em; overflow:hidden; background:var(--c-deep)}
.split__media img,.split__media canvas{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* NO se le pone position: .capitulo__foto ya es absolute y .split__media
   relative. Al ir esta regla despues en el archivo, un position aqui le
   ganaba por orden y convertia la foto de fondo en una fila de la rejilla
   de 1877 px de alto. Medido el 26 ago 2026. */
[data-haze] canvas{position:absolute; inset:0; width:100%; height:100%;
  opacity:0; transition:opacity .8s ease; z-index:1}
[data-haze].webgl canvas{opacity:1}
[data-haze].webgl > img{opacity:0}
.split__txt{display:grid; align-content:center; padding:var(--s7) var(--canal);
  background:var(--split-bg, var(--c-surface));
  color:var(--split-ink, var(--c-paper));
  /* El panel es una ISLA: redeclara el tema para todo lo que lleve dentro.
     Sin esto, un hijo que use --fg-soft se pinta con el tono del tema de la
     BANDA, no con el del panel. Lo destapo el tercer prototipo, que es el
     primero de tema claro: dos direcciones y dos enlaces daban 2,59 y 2,01. */
  --fg:var(--split-ink, var(--c-paper));
  --bg:var(--split-bg, var(--c-surface));
  --fg-soft:var(--split-soft, var(--c-muted-on-dark));
  --hairline:var(--split-line, var(--c-paper-15));
  --c-accent-t:var(--split-accent, var(--c-accent-claro, var(--c-accent)))}
.split__txt h3{margin-bottom:var(--s4)}
.claim h2,.banda .wrap > h2{margin-bottom:var(--s4)}
/* ⚠️ Aqui vivia un color LITERAL de Gumba's, #D6C9C0, colado al extraer el
   motor de su primer prototipo. No fallo en los dos primeros porque en los
   dos el panel es oscuro; en el tercero, con panel claro, daba 1,35:1.
   Un color de un cliente dentro del motor es deuda que solo se ve cuando
   llega un cliente distinto. */
.split__txt p{color:var(--fg-soft); max-width:38ch}
@media (max-width:900px){ .split{grid-template-columns:1fr} .split__media{min-height:22em} }

/* -- 10 · las preguntas ------------------------------------------------ */
.faq{display:grid; gap:0; max-width:52em}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{cursor:pointer; list-style:none; padding:var(--s4) 0;
  font-family:var(--display); font-size:var(--t1); letter-spacing:-.02em;
  display:flex; justify-content:space-between; gap:var(--s4); align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"\002B"; color:var(--c-accent-t); font-family:var(--text); font-size:.7em}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin:0 0 var(--s4); color:var(--fg-soft); max-width:56ch}
.aviso{color:var(--c-accent-t); font-weight:500}

/* -- 11 · el cierre ---------------------------------------------------- */
.cierre{min-height:92vh; display:grid; align-content:center; gap:var(--s6)}
.cierre__grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s7); align-items:start}
.canal{display:grid; gap:var(--s4); align-content:start}
.canal a{display:flex; align-items:center; gap:var(--s4); text-decoration:none;
  padding:var(--s4); border:1px solid var(--hairline); border-radius:var(--r-md);
  transition:border-color .25s, transform .25s}
.canal a:hover{border-color:var(--c-accent)}
.canal a:active{transform:translateY(1px)}
.canal strong{display:block; font-family:var(--display); font-size:var(--t1); letter-spacing:-.02em}
.canal small{color:var(--fg-soft)}
.canal .flecha{margin-left:auto; color:var(--c-accent); font-size:var(--t1)}
.mapa{border:1px solid var(--hairline); border-radius:var(--r-md); overflow:hidden;
  background:var(--mapa-fondo,#EDE3CF)}
.mapa svg{width:100%; height:auto; display:block}
@media (max-width:900px){ .cierre__grid{grid-template-columns:1fr; gap:var(--s6)} }

/* -- 12 · el pie ------------------------------------------------------- */
.pie{padding-block:var(--s6); border-top:1px solid var(--hairline);
  display:flex; flex-wrap:wrap; gap:var(--s4) var(--s6); align-items:baseline;
  font-size:var(--t-1); color:var(--fg-soft)}
.pie a{text-decoration:none}
.pie a:hover{color:var(--fg)}
.pie__nota{margin-left:auto; max-width:34ch; text-align:right}
@media (max-width:760px){ .pie__nota{margin-left:0; text-align:left} }

/* -- 13 · la accion que siempre esta -------------------------------- */
.pastilla{
  position:fixed; left:50%; bottom:var(--s4); transform:translateX(-50%);
  z-index:45; display:inline-flex; align-items:center; gap:var(--s3);
  padding:var(--s2) var(--s2) var(--s2) var(--s5);
  background:var(--c-accent); color:var(--on-accent, var(--c-ink)); text-decoration:none;
  border-radius:var(--r-pill); font-family:var(--display); font-weight:500;
  font-size:var(--t0); letter-spacing:-.01em;
  box-shadow:0 2px 14px rgba(0,0,0,.28);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.pastilla:hover{box-shadow:0 4px 22px rgba(0,0,0,.34)}
.pastilla:active{transform:translateX(-50%) translateY(2px) scale(.985)}
.pastilla__punta{display:grid; place-items:center; width:2.4em; height:2.4em;
  border-radius:50%; background:var(--on-accent, var(--c-ink)); color:var(--c-accent); font-size:.9em}
/* En el telefono la pastilla se encoge y baja: a 390 px se comia una linea
   de la carta. Sigue siendo la unica accion principal de la pagina. */
@media (max-width:760px){
  .pastilla{font-size:.92em; bottom:var(--s3); padding-left:var(--s4)}
  .pastilla__punta{width:2.1em; height:2.1em}
}
.ultimo{padding-bottom:var(--s8)}

/* -- 14 · idioma ------------------------------------------------------- */
.lang{display:inline-flex; border:1px solid var(--c-paper-25); border-radius:var(--r-pill);
  overflow:hidden; font-size:.9em}
.barra.theme-light .lang{border-color:var(--c-ink-15)}
.lang button{all:unset; cursor:pointer; padding:.3em .7em; letter-spacing:.1em; color:inherit}
.lang button:active{opacity:.7}
.lang button[aria-pressed="true"]{background:var(--c-paper); color:var(--c-ink)}
.barra.theme-light .lang button[aria-pressed="true"]{background:var(--c-ink); color:var(--c-paper)}


/* =============================================================================
   FORMATO 2 · «LA BARAJA»
   Las bandas no van una debajo de otra: cada carta se queda pegada arriba y la
   siguiente se le monta encima. La silueta de la pagina cambia por completo sin
   tocar el motor, los tokens ni los comprobadores.

   Existe porque tres prototipos con la misma estructura empiezan a leerse como
   el mismo acabado, y eso es un problema de VENTA antes que de diseno.

   ⚠️ REGLA DURA: NINGUNA CARTA PUEDE SER MAS ALTA QUE LA PANTALLA.
   Una carta pegada con `top:0` deja de moverse en cuanto llega arriba, asi que
   todo lo que le sobre por abajo queda INALCANZABLE. Por eso la baraja va solo
   en la parte de arriba de la pagina —el heroe y tres o cuatro afirmaciones— y
   el contenido largo sigue despues en bandas normales.
   `revisar.mjs` lo comprueba y falla si alguna se pasa.

   ⚠️ Y el recorte va con `overflow:clip`, NO con `hidden`: `hidden` crea un
   contenedor de scroll y mata `animation-timeline: view()` de todo lo que
   lleve dentro. `clip` recorta igual y no crea contenedor.
   ========================================================================== */
/* La baraja tiene su propia superficie. Cuando una carta se encoge deja ver
   lo que hay detras, y si eso es el fondo del cuerpo se lee como un hueco;
   si es una superficie oscura elegida, se lee como profundidad. */
.baraja{position:relative; background:var(--baraja-fondo, var(--c-deep))}
.baraja > .carta{
  position:sticky; top:0; min-height:100vh; min-height:100svh;
  display:grid; align-content:center; overflow:clip;
  background:var(--bg); color:var(--fg);
  border-radius:var(--r-md) var(--r-md) 0 0;
  /* la sombra hacia arriba es lo que hace que una carta se lea como que se
     monta sobre la de abajo, y no como dos secciones que se solapan */
  box-shadow:0 -22px 56px -18px rgba(0,0,0,.30);
}
.baraja > .carta:first-child{border-radius:0; box-shadow:none}
.carta__media{position:absolute; inset:0; z-index:0}
.carta__media img{width:100%; height:100%; object-fit:cover}
.carta__txt{position:relative; z-index:2}
.carta__velo{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:var(--carta-velo, linear-gradient(0deg,rgba(10,12,12,.86) 0%,rgba(10,12,12,.34) 62%,rgba(10,12,12,.10) 100%))}
.carta__n{font-family:var(--text); font-size:var(--t-1); font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--c-accent-t);
  font-variant-numeric:tabular-nums; display:block; margin-bottom:var(--s4)}
@media (max-width:760px){
  .baraja > .carta{border-radius:var(--r-sm) var(--r-sm) 0 0}
}


/* =============================================================================
   FORMATO 3 · «EL MOSTRADOR»
   La pagina se mueve DE LADO. No es un carrusel con flechas: es una pista que
   se recorre, como quien camina a lo largo de una vitrina.

   Las dos mitades del formato son distintas a proposito, y las dos son lo
   nativo de su aparato:

     ESCRITORIO  la seccion se fija y la pista se desplaza en X con el scroll
                 vertical de siempre. NO se secuestra la rueda: el visitante
                 hace lo de siempre y la pagina se mueve de lado.
     TELEFONO    la pista es una fila que se desliza con el dedo, con
                 `scroll-snap`. Es lo que un telefono ya sabe hacer, y meterle
                 el modo de escritorio seria pelearse con el sistema.

   ⚠️ La altura de la seccion en escritorio NO se escribe a mano: se calcula
   desde lo que mide la pista (`innerHeight + recorrido`). Escrita a mano, el
   dia que se anade una pieza la pista se queda a medias o sobra scroll vacio.

   ⚠️ `overflow:clip` en el escenario, nunca `hidden`: `hidden` crea contenedor
   de scroll y mata `animation-timeline: view()` de lo que lleve dentro.
   ========================================================================== */
.mostrador{position:relative}
.mostrador__pista{display:flex; gap:var(--s5); align-items:stretch;
  padding-inline:var(--canal); margin:0; list-style:none}
.mostrador__pieza{flex:0 0 auto; width:min(26em, 78vw); display:grid;
  align-content:start; scroll-snap-align:center}

@media (max-width:991px){
  .mostrador__pista{overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-block:var(--s3)}
  .mostrador__pista::-webkit-scrollbar{display:none}
}
@media (min-width:992px){
  .mostrador__escena{position:sticky; top:0; height:100vh; height:100svh;
    display:grid; align-content:center; overflow:clip;
    /* ⚠️ minmax(0,1fr) NO es adorno. Sin el, la columna implicita de la
       rejilla se dimensiona por el hijo mas ancho -que es la PISTA, mucho mas
       ancha que la pantalla-, y cualquier hijo con `margin:0 auto` se centra
       respecto a ESA anchura: el encabezado se iba fuera de pantalla y el
       recorte se lo comia. */
    grid-template-columns:minmax(0,1fr)}
  .mostrador__pista{will-change:auto}
}

/* El heroe de este formato mira DE LADO: las dos capas se desplazan en X a
   distinta velocidad en vez de escalar. Mismo coste -dos imagenes-, otra
   direccion. La lamina lleva su alfa arriba para que el fondo se vea. */
.tira{position:relative; height:100vh; height:100svh; overflow:clip;
  display:grid; align-content:center; background:var(--hero-fondo,#2A2622)}
.tira__capa{position:absolute; inset:0}
.tira__capa img{width:100%; height:100%; max-width:none; object-fit:cover}
.tira__velo{position:absolute; inset:0; z-index:3; pointer-events:none;
  background:var(--hero-velo, linear-gradient(180deg,rgba(12,9,7,.62) 0%,rgba(12,9,7,.30) 46%,rgba(12,9,7,.70) 100%))}
.tira__txt{position:relative; z-index:4; color:var(--hero-ink,var(--c-paper));
  width:min(var(--ancho),100% - var(--canal)*2); margin-inline:auto}

/* -- 15 · la mocion ---------------------------------------------------- */
/* Nada nace invisible sin JavaScript: la clase .js la pone un script del head.
   Sin ella todo esto no existe y la pagina se ve entera. */
.js .rv{opacity:0; transform:translateY(1.4em)}
.js .rv-blur{opacity:0; filter:blur(28px)}
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .rv-blur{opacity:1; transform:none; filter:none}
  .dolly{height:100vh}
  .dolly__lamina{transform:scale(1.55)}
  .dolly__fondo{transform:scale(1.28)}
  .dolly__velo{opacity:.55}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
@media (max-width:991px){ .dolly{height:200vh} }

/* -- 16 · el telefono --------------------------------------------------
   La escala editorial que hace que esto parezca caro en un escritorio se
   sale de la pantalla en un movil: a 390 px el h2 daba seis caracteres por
   linea y las palabras se cortaban por el borde derecho. Se baja un peldano
   entero la escala de titulares, y la barra se aprieta: a 390 px se llevaba
   por delante el conmutador de idioma.
   Medido con `mirar-movil.py`, que renderiza a 390 px de verdad. NO vale
   redimensionar la ventana: se piden 402 y innerWidth devuelve 606. */
@media (max-width:760px){
  h1{font-size:var(--t4)}
  h2{font-size:var(--t3)}
  h3{font-size:var(--t2)}
  h4{font-size:var(--t1)}
  .lede{font-size:var(--t0)}
  .claim h2{max-width:none}
  .claim{min-height:auto}
  .banda{padding-block:var(--s7)}
  .banda + .banda{padding-top:var(--s7)}
  .banda--cambia{padding-block:var(--s7)}
  .barra{gap:var(--s3)}
  .barra__marca{font-size:1.12em}
  .barra__marca sup{font-size:.3em; margin-left:.35em}
  .barra__enlaces{gap:var(--s4)}
  .barra__tel{font-size:.84em}
  .lang{font-size:.76em}
  .prueba b{font-size:var(--t2)}
  .cierre{min-height:auto}
  .split__txt{padding:var(--s6) var(--canal)}
}