/* THE OPENING · sitio.
   Dos fuentes, las de la marca: Libre Franklin y IBM Plex Mono.
   Una sola escala de siete tamaños para las cuatro páginas (auditoría del 4 oct). Sin negritas: el énfasis es la cursiva
   del mismo peso (el segundo tiempo de cada frase). Interfaz en blanco y negro; el color vive en el dibujo,
   en los pictogramas y en una palabra resaltada. */
@font-face { font-family: "Libre Franklin"; src: url(fuentes/libre-franklin-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url(fuentes/libre-franklin-latin-wght-italic.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(fuentes/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(fuentes/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --negro: #000; --blanco: #fff; --g1: #666; --g2: #9a9a9a; --g3: #d2d2d2; --gris: #f2f2f2;
  /* 21 oct: negro y blanco puros (THE OPENING no es tibio). ?tono=hueso: blanco hueso editorial; ?tono=crema: el papel del 20 oct */
  --crema: #fff;
  --rojo: #FF3B30; --azul: #2D6BFF; --verde: #12B76A; --violeta: #8A3FFC;
  --sans: "Libre Franklin", Helvetica, Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace;
  /* la escala: siete tamaños, nada más */
  --f-display: clamp(40px, 5.3vw, 82px);   /* uno por página: portada y cierre */
  --f-enun: clamp(30px, 3.6vw, 54px);      /* uno por sección */
  --f-sub: clamp(22px, 2.05vw, 30px);      /* texto de escena, fila que se abre, renglón que cambia */
  --f-fila: clamp(19px, 1.55vw, 22px);     /* títulos de fila, tarjetas, frases de apoyo */
  --f-cuerpo: clamp(17px, 1.32vw, 19px);   /* lectura */
  --f-sec: 15px;                           /* apoyo */
  --f-mono: 12px;                          /* rótulos y contadores */
  /* la voz: Franklin pesada, de afiche pegado y tabloide (la letra de Nueva York). Para volver a la voz liviana: 300, 300, 300 y --caja: none. */
  --p-titulo: 900; --p-frase: 800; --p-sub: 600; --caja: uppercase;
  --salida: cubic-bezier(.16, 1, .3, 1);
  --m: 4vw;               /* el margen */
  --lomo: 52px;           /* el lomo de cada sección */
  --k: 1;                 /* factor de las duraciones: 1 en uso normal; mayor al grabar cuadro por cuadro */
}
* { box-sizing: border-box; }
html { background: var(--blanco); color: var(--negro); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { margin: 0; overflow-x: hidden; }
/* sin barra de desplazamiento se guarda su lugar (--sb lo mide pagina.js): si no, al volver la barra todo cambia de ancho y cada lámina se vuelve a armar */
body.con-intro, body.menu-abierto { overflow: hidden; height: 100vh; padding-right: var(--sb, 0px); }
::selection { background: var(--negro); color: var(--blanco); }
a { color: inherit; }
p, h1, h2, h3, ol, ul { margin: 0; padding: 0; font-weight: inherit; font-size: inherit; }
li { list-style: none; }
strong, b { font-weight: inherit; }
em, strong, .ac { font-style: italic; }
.to { display: block; fill: currentColor; }

/* ---------- la letra ---------- */
.t-display { font-weight: var(--p-titulo); font-size: var(--f-display); line-height: .94; letter-spacing: -.02em; text-transform: var(--caja); text-wrap: balance; }
.t-enun { font-weight: var(--p-frase); font-size: var(--f-enun); line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
/* lo corto se grita: mayúsculas de afiche. Lo largo se dice firme, en frase, para que se lea. */
.grita { font-weight: var(--p-titulo); text-transform: var(--caja); letter-spacing: -.012em; line-height: .96; }
.t-sub { font-weight: var(--p-sub); font-size: var(--f-sub); line-height: 1.14; letter-spacing: -.018em; text-wrap: balance; }
.t-fila { font-weight: 500; font-size: var(--f-fila); line-height: 1.3; letter-spacing: -.014em; text-wrap: pretty; }
.t-cuerpo { font-weight: 400; font-size: var(--f-cuerpo); line-height: 1.5; text-wrap: pretty; }
.t-sec { font-weight: 400; font-size: var(--f-sec); line-height: 1.45; color: var(--tenue); }
.t-mono { font-family: var(--mono); font-size: var(--f-mono); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.tenue { color: var(--tenue); }
.pri { color: var(--tinta); }
/* la palabra resaltada: una por sección, siempre en rojo */
.ac[class*="m-"] { background: linear-gradient(var(--rojo), var(--rojo)) no-repeat 0 76% / 0% 34%; padding: 0 .1em 0 .04em; margin: 0 -.03em; transition: background-size calc(.9s * var(--k)) var(--salida) calc(.35s * var(--k)); }
.visto .ac[class*="m-"], .ac.visto[class*="m-"] { background-size: 100% 34%; }

/* ---------- los campos: blanco, gris de papel y negro ---------- */
.campo-blanco { --fondo: var(--blanco); --tinta: var(--negro); --tenue: #4a4a4a; --raya: var(--negro); }
.campo-gris { --fondo: var(--gris); --tinta: var(--negro); --tenue: #474747; --raya: var(--negro); }
.campo-negro { --fondo: var(--negro); --tinta: var(--blanco); --tenue: #c2c2c2; --raya: var(--blanco); }
[class*="campo-"] { background: var(--fondo); color: var(--tinta); }

/* ---------- la intro ---------- */
#intro { --negro: #000; --blanco: #FFFFFF; position: fixed; inset: 0; z-index: 100; background: var(--negro); overflow: hidden; transition: opacity calc(.5s * var(--k)); }
#intro.se-va { opacity: 0; pointer-events: none; }

/* ---------- lo que está siempre ---------- */
/* la barra: una pastilla negra que flota; se esconde al bajar y vuelve al subir, para no tapar los títulos */
.barra { position: fixed; top: 14px; left: 50%; translate: -50% 0; z-index: 50; display: flex; align-items: center; height: 46px; padding: 0 7px 0 18px; background: var(--negro); color: var(--blanco); border-radius: 999px; box-shadow: 0 0 0 1.5px var(--blanco); font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; transition: translate calc(.5s * var(--k)) var(--salida), opacity calc(.4s * var(--k)); }
.con-intro .barra, .bajando:not(.menu-abierto) .barra { translate: -50% -76px; }
.con-intro .barra { opacity: 0; }
.barra a { text-decoration: none; }
.barra .marca-to { display: flex; align-items: center; margin-right: 16px; }
.barra .to { width: 40px; height: auto; }
.barra .paginas { display: flex; gap: 2px; }
.barra .paginas a { padding: 9px 14px 8px; border-radius: 999px; opacity: .6; transition: opacity .2s, background .2s, color .2s; }
.barra .paginas a:hover { opacity: 1; }
.barra .paginas a[aria-current] { opacity: 1; background: var(--blanco); color: var(--negro); }
.barra .idiomas { display: flex; margin-left: 10px; padding: 0 6px 0 12px; border-left: 1px solid #444; }
.barra button { all: unset; cursor: pointer; font: inherit; letter-spacing: inherit; padding: 9px 6px 8px; }
.barra button[aria-pressed="false"] { opacity: .5; }
.barra button:hover { opacity: 1; }
.barra .abre-menu { display: none; padding: 9px 14px 8px; background: var(--blanco); color: var(--negro); border-radius: 999px; }
.menu { position: fixed; inset: 0; z-index: 45; background: var(--negro); color: var(--blanco); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 92px var(--m) 28px; overflow-y: auto; clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--salida); pointer-events: none; }
.menu-abierto .menu { clip-path: inset(0); pointer-events: auto; }
.menu a { text-decoration: none; color: inherit; }
/* 22 oct: el menú con contenido. Arriba, qué hace THE OPENING; en el medio, las páginas con lo que hay en cada una; abajo, correo y ciudades.
   Al abrirse, cada renglón sube con un poco de atraso respecto del anterior; la página en la que estás va en negativo. */
.mn-etq { font-size: 11px; letter-spacing: .14em; color: var(--g2); margin: 0 0 12px; }
.mn-lema { display: grid; justify-items: start; gap: .08em; margin: 0 0 22px; font: 900 clamp(26px, 7.6vw, 40px)/.98 var(--sans); text-transform: uppercase; letter-spacing: -.02em; }
.mn-lema span { padding: .04em .16em .02em; margin-left: -.16em; }
.mn-lema .neg { background: var(--blanco); color: var(--negro); rotate: -1.2deg; transform-origin: 0 50%; margin-left: .1em; }
.mn-cap { display: grid; gap: 6px; justify-items: start; margin: 0; }
.mn-cap b { font: 800 clamp(13px, 3.6vw, 16px)/1 var(--sans); text-transform: uppercase; background: var(--rojo); color: var(--blanco); padding: .42em .6em .38em; }
.mn-cap span { font: 500 14px/1.45 var(--sans); color: var(--g3); max-width: 30em; }
.mn-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.18); }
.mn-lista li { border-bottom: 1px solid rgba(255,255,255,.18); translate: 0 18px; opacity: 0; transition: translate .5s var(--salida), opacity .4s; transition-delay: calc(.12s + var(--i) * .06s); }
.menu-abierto .mn-lista li { translate: 0 0; opacity: 1; }
.mn-lista a { display: grid; grid-template-columns: 2.2em 1fr; column-gap: 10px; padding: 12px 0 13px; align-items: baseline; }
.mn-n { font-size: 11px; color: var(--rojo); }
.mn-nom { font: 900 clamp(30px, 9vw, 46px)/.95 var(--sans); text-transform: uppercase; letter-spacing: -.02em; width: fit-content; padding: .04em .16em .02em; margin-left: -.16em; transition: background .25s, color .25s; }
.mn-de { grid-column: 2; font: 500 13.5px/1.4 var(--sans); color: var(--g2); margin-top: 6px; max-width: 32em; }
.mn-lista a[aria-current] .mn-nom, .mn-lista a:hover .mn-nom { background: var(--blanco); color: var(--negro); }
.mn-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; align-items: baseline; }
.mn-ciudades { font-size: 11px; letter-spacing: .08em; color: var(--g2); margin: 0; }
.avance { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 51; background: var(--rojo); transform-origin: left; transform: scaleX(0); }
/* el sello: grande sólo en la primera pantalla; después, un punto chico que no tapa nada; se va al llegar al pie */
.boton { position: fixed; right: calc(var(--m) - 6px); bottom: 16px; z-index: 30; width: 96px; height: 96px; border-radius: 50%; background: var(--blanco); border: 1.5px solid var(--negro); display: grid; place-items: center; text-decoration: none; transition: width calc(.5s * var(--k)) var(--salida), height calc(.5s * var(--k)) var(--salida), opacity .3s, scale .4s var(--salida); }
.boton:hover { scale: 1.1; }
.boton svg.gira { position: absolute; inset: 5px; animation: gira calc(14s * var(--k)) linear infinite; transition: opacity .3s; }
.boton .punto { width: 18px; height: 18px; border-radius: 50%; background: var(--rojo); transition: width .4s, height .4s; }
.boton .dice { display: none; font: 600 14px/1 var(--sans); letter-spacing: -.01em; color: var(--negro); white-space: nowrap; }
.boton .flecha { display: none; font: 600 15px/1 var(--sans); color: var(--rojo); transition: translate .3s var(--salida); } .boton:hover .flecha { translate: 3px 0; }
.pasada .boton { width: auto; height: 42px; border-radius: 21px; padding: 0 16px 0 13px; grid-auto-flow: column; column-gap: 9px; } .pasada .boton svg.gira { opacity: 0; } .pasada .boton .punto { width: 12px; height: 12px; }
.pasada .boton .dice, .pasada .boton .flecha { display: block; }
.en-pie .boton, .tapa-boton .boton { opacity: 0; pointer-events: none; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- las láminas: el dibujo a pantalla completa, fijo; el copy encima, en un lugar fijo de lectura ---------- */
.lamina { --vh: 1vh; position: relative; height: calc(var(--alto, 300) * var(--vh)); background: var(--blanco); }
.lamina.oscura { background: var(--negro); }
.fija { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.fija canvas { display: block; width: 100%; height: 100%; }
[data-p] { opacity: 0; transition: opacity calc(.16s * var(--k)); }
[data-p].ver { opacity: 1; transition: opacity calc(.5s * var(--k)) var(--salida) calc(.14s * var(--k)); }
/* el texto va sobre tiras de papel, una por renglón: se lee sobre cualquier dibujo, sin cajas ni sombras */
.tira { background: var(--blanco); color: var(--negro); padding: .09em .3em .13em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tira.it { font-style: italic; }
.oscura .tira { background: var(--negro); color: var(--blanco); }
.sobre { position: absolute; inset: 0; pointer-events: none; }
.sobre .etq { position: absolute; left: var(--m); top: 84px; display: flex; align-items: center; gap: 14px; }
.etq b { font-weight: 500; }
/* los puntos: cuántos tiempos tiene la lámina y por cuál se va */
.pts { display: inline-flex; gap: 5px; background: var(--blanco); padding: 6px 7px; }
.pts i[data-p] { display: block; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--negro); opacity: 1; transition: background calc(.3s * var(--k)); }
.pts i.ver { background: var(--negro); }
.oscura .pts { background: var(--negro); } .oscura .pts i[data-p] { border-color: var(--blanco); } .oscura .pts i.ver { background: var(--blanco); }
/* el lugar de lectura: siempre el mismo. Con el scroll cambia el texto; el ojo no tiene que ir a buscarlo. */
.lee { position: absolute; left: var(--m); top: 128px; width: min(46vw, 720px); }
/* cada tiempo es un puñado de recortes de papel pegados sobre el dibujo: una tira por renglón, sin borde ni sombra.
   Los titulares van en mayúsculas pesadas y un poco torcidos, como afiche pegado; el segundo tiempo, en negativo. */
.tiempo { position: absolute; left: 0; top: 0; width: 100%; display: grid; row-gap: 10px; justify-items: start; opacity: 0; transition: none; }
.tiempo.ver { opacity: 1; transition: none; }
.tiempo p { display: grid; justify-items: start; line-height: 1.24; }
.lee .tira, .titular h1 .tira { display: block; width: fit-content; max-width: 100%; padding: .14em .42em .2em; }
.tiempo .t-sub { font-weight: var(--p-sub); letter-spacing: -.016em; text-wrap: pretty; }
.tiempo .t-sub.fuerte { text-wrap: balance; }
.tiempo .t-enun { line-height: 1; max-width: 13.5em; margin: .12em 0 .16em; }
.tiempo .t-enun .tira, .titular h1 .tira { padding: .1em .26em .12em; rotate: var(--r, -1.2deg); transform-origin: 0 50%; }
.tiempo .t-enun .tira + .tira, .titular h1 .tira + .tira, .titular h1 span + span .tira { margin-top: .1em; }
.tiempo .t-enun .tira:nth-child(even), .titular h1 > [data-p] .tira { --r: .9deg; margin-left: .34em; }
.tira.it { background: var(--negro); color: var(--blanco); font-style: normal; }
.oscura .tira.it { background: var(--blanco); color: var(--negro); }
.tiempo .t-mono { line-height: 2.3; }
/* las tiras se pegan de a una, a los saltos (doce por segundo, como el dibujo); los titulares, además, hierven */
/* 21 oct: el golpe de pegado, contenido (antes la tira entraba +14 % y 5° girada y tapaba el renglón de arriba) */
@keyframes pega { 0% { opacity: 0; transform: translate(-5px, -6px) rotate(-1.4deg) scale(1.04); } 1% { opacity: 1; transform: translate(-5px, -6px) rotate(-1.4deg) scale(1.04); } 34% { opacity: 1; transform: translate(2px, 1px) rotate(.6deg) scale(1.01); } 67% { opacity: 1; transform: translate(-1px, 0) rotate(-.2deg); } 100% { opacity: 1; transform: none; } }
.tiempo .tira { transform-origin: 0 50%; }
@keyframes hierve { 0% { translate: 0 0; } 33% { translate: .7px -.5px; } 66% { translate: -.6px .6px; } }
.tiempo .tira { opacity: 0; }
.tiempo.ver .tira { animation: pega calc(.333s * var(--k)) step-end calc((var(--i, 0) * .07s + .06s) * var(--k)) both; }
.tiempo.ver .t-enun .tira, .titular h1 .tira { animation: pega calc(.333s * var(--k)) step-end calc((var(--i, 0) * .07s + .06s) * var(--k)) both, hierve calc(.5s * var(--k)) steps(1, end) calc(var(--i, 0) * -.17s) infinite; }
/* el rótulo de la lámina: una etiqueta negra */
.sobre .etq .tira { background: var(--negro); color: var(--blanco); padding: .55em .8em .5em; }
.oscura .sobre .etq .tira { background: var(--blanco); color: var(--negro); }
.pista { position: absolute; left: 50%; bottom: 26px; translate: -50% 0; background: var(--negro); color: var(--blanco); padding: 7px 12px 6px; }
/* la portada del Home: el título queda fijo abajo a la izquierda; lo demás se lee a su derecha, apoyado en la misma línea */
.titular { position: absolute; left: var(--m); bottom: 7vh; }
.titular .etq { position: static; margin-bottom: 14px; gap: 12px; }
.nombre-marca { display: block; height: 40px; width: auto; background: var(--blanco); padding: 5px 6px; margin-left: -6px; }
.titular h1 { line-height: 1; display: grid; justify-items: start; max-width: 15em; font-size: clamp(30px, 3.35vw, 52px); }
/* el segundo tiempo del título no ocupa lugar hasta que llega: mientras tanto se ve más calle; cuando llega, se pega debajo y empuja al primero */
.titular h1 > [data-p] { display: none; opacity: 1; transition: none; } .titular h1 > [data-p].ver { display: block; }
.titular .etq .tira { background: var(--negro); color: var(--blanco); padding: .55em .8em .5em; }
.titular .capacidad { margin-top: 18px; max-width: 34em; display: grid; gap: 6px; justify-items: start; }
.titular .capacidad b { font: 800 clamp(15px, 1.25vw, 20px)/1 var(--sans); text-transform: uppercase; letter-spacing: .01em; background: var(--rojo); color: var(--blanco); padding: .42em .6em .38em; }
.titular .capacidad span { font: 500 clamp(13px, .95vw, 15px)/1.4 var(--sans); background: var(--blanco); color: var(--negro); padding: .35em .6em; }
.lee.der { left: auto; top: auto; right: calc(var(--m) + 104px); bottom: calc(7vh + 15.5em); width: min(31vw, 470px); } /* el copy final tiene un título más ancho: lo que se lee va arriba, a la derecha */
.lee.der .tiempo { top: auto; bottom: 0; }
/* la lámina que pasa: una franja dibujada, ancha, que avanza mientras cruza la pantalla */
.lamina.pasa { height: auto; border-top: 1.5px solid var(--negro); border-bottom: 1.5px solid var(--negro); }
.lamina.pasa .fija { position: relative; height: min(66vh, 46vw); }
.lamina.pasa canvas { height: 100%; }

/* ---------- las secciones de lectura ---------- */
.sec { position: relative; }
/* el lomo: el nombre de la sección en el canto, como un libro en el estante */
.lomo { position: absolute; left: 0; top: 0; bottom: 0; width: var(--lomo); border-right: 1.5px solid var(--raya); pointer-events: none; z-index: 3; color: var(--tenue); }
.lomo span { position: sticky; top: 30px; display: block; width: max-content; margin: 0 auto; padding: 28px 0; writing-mode: vertical-rl; rotate: 180deg; }
.lomo b { font-weight: 500; color: var(--tinta); }
.dentro { padding: 15vh calc(var(--m) + 56px) 15vh calc(var(--lomo) + var(--m)); display: grid; row-gap: 6vh; }
.dentro > * { min-width: 0; }
.cierra { max-width: 24em; }
.tres { display: grid; gap: .12em; }
.col { display: grid; gap: .3em; align-content: start; max-width: 30em; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: center; }
.firma { display: flex; gap: 2.4em; color: var(--tenue); }
ol.versos { display: grid; gap: .1em; }
/* el Home corto: quiénes somos, y la invitación del cierre */
.r-quienes .quien { display: grid; row-gap: .7em; max-width: 880px; }
.r-quienes .bloque { display: grid; row-gap: 3.4vh; }
.r-quienes .selector .rotor { gap: .5em; }
/* las tres maneras de trabajar: el nombre va de rótulo y se lee la frase */
.r-quienes .ramas-3 .nombre { font-family: var(--mono); font-size: var(--f-mono); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; margin-top: 8px; }
.r-quienes .ramas-3 .frase { font-weight: 500; font-size: clamp(19px, 1.62vw, 24px); line-height: 1.26; letter-spacing: -.018em; }
.r-quienes .origen .t-fila { max-width: 36em; } .r-quienes .origen .ref { color: var(--tenue); }
.r-quienes .origen { max-width: 880px; row-gap: 2.4vh; border-top: 1.5px solid var(--negro); padding-top: 4.5vh; }
/* quién está detrás (Dossier): una foto chica, en fotocopia y pegada torcida como un volante, con su nombre en una tira negra */
.retrato { margin: 5vh 0 0; width: clamp(150px, 15vw, 210px); rotate: -2.4deg; }
.retrato img { display: block; width: 100%; height: auto; border: 1.5px solid var(--negro); box-shadow: 7px 7px 0 var(--negro); image-rendering: pixelated; }
.retrato figcaption { display: grid; row-gap: .35em; width: max-content; margin-top: 16px; padding: .6em .85em .55em; background: var(--negro); color: var(--blanco); rotate: 1.2deg; }
.retrato figcaption b { font-weight: 500; } .retrato figcaption span { color: #b9b9b9; }
.invita { display: grid; row-gap: .5em; max-width: 760px; }
/* el cierre: el método en tres pasos, chico; la invitación, grande; y la puerta para escribir */
.tres-pasos { display: flex; flex-wrap: wrap; gap: .5em 2.6em; color: #cfcfcf; font-size: var(--f-fila); letter-spacing: -.012em; }
.tres-pasos li { display: flex; align-items: baseline; gap: .7em; } .tres-pasos i { font-style: normal; color: #8c8c8c; }
.llamado { display: grid; justify-items: start; row-gap: .04em; }
.escribi { color: inherit; } .escribi .cuad { border-color: var(--blanco); } .escribi:hover .cuad { background: var(--blanco); color: var(--negro); }
.r-cierre .dentro { row-gap: 5vh; }
.r-cierre .franca { max-width: 30em; color: #d9d9d9; }
.versos-firma { display: flex; flex-wrap: wrap; gap: .5em 2.2em; color: #9a9a9a; margin-top: 4vh; }
.r-quienes .mesa { max-width: 34em; border-left: 3px solid var(--negro); padding-left: .9em; }
/* quién está detrás: cuatro hechos en cuatro renglones, el puente en grande y el fundador como dato */
.r-detras .hechos { max-width: 880px; }
.r-detras .cuatro { border-top: 1.5px solid var(--negro); }
.r-detras .cuatro li { padding: .62em 0 .66em; border-bottom: 1px solid #bdbdbd; font-weight: 500; font-size: clamp(19px, 1.62vw, 24px); line-height: 1.24; letter-spacing: -.018em; }
.r-detras .puente { max-width: 22em; }
.r-detras .origen { border-top: 0; padding-top: 0; }
/* cerca de lo que ya tenés: cuatro renglones, uno por mundo */
.r-cerca .cuatro { border-top: 1.5px solid var(--negro); max-width: 980px; }
.r-cerca .cuatro li { display: grid; grid-template-columns: 11em 1fr; column-gap: 2em; align-items: baseline; padding: .7em 0 .74em; border-bottom: 1px solid #bdbdbd; }
.r-cerca .cuatro .donde { color: var(--tenue); }
.r-cerca .cuatro .que { font-weight: 500; font-size: clamp(19px, 1.62vw, 24px); line-height: 1.24; letter-spacing: -.018em; }
/* la puerta de arriba, para quien llega con una propuesta en la mano */
.puerta-arriba { position: absolute; left: var(--m); top: 78px; z-index: 3; font: 600 clamp(15px, 1.2vw, 18px)/1.15 var(--sans); letter-spacing: -.01em; text-decoration: none;
  background: var(--negro); color: var(--blanco); padding: .62em .9em .6em 2em; rotate: -1.2deg; }
.puerta-arriba::before { content: ""; position: absolute; left: .78em; top: 50%; width: .62em; height: .62em; margin-top: -.31em; border-radius: 50%; background: var(--rojo); }
.puerta-arriba:hover { background: var(--rojo); } .puerta-arriba:hover::before { background: var(--blanco); }
/* el mail, escrito: en el cierre del Inicio, en el recuadro de la propuesta y al final del registro */
.mail { font: 600 clamp(22px, 2.3vw, 34px)/1.1 var(--sans); letter-spacing: -.02em; }
.mail a { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; } .mail a:hover { color: var(--rojo); }
.dc-propuesta .mail { padding: .7em 0 .5em; border-top: 1px solid #4a4a4a; font-size: clamp(20px, 1.9vw, 28px); }
.bx-cierre .mail { margin-top: 5vh; }
/* las dos ciudades: un epígrafe bajo cada reloj, y lo que dejan las dos */
.ciudad .epi { margin-top: 14px; font-size: var(--f-fila); line-height: 1.3; letter-spacing: -.014em; max-width: 26em; }
.bx-contexto { display: grid; row-gap: 2.4vh; padding: 7vh 0 12vh; }
.bx-contexto .bx-chico-uno { font-size: var(--f-sub); font-weight: var(--p-sub); letter-spacing: -.018em; color: var(--tenue); }
/* el número de una ficha */
.bx-numero { font-weight: var(--p-titulo); font-size: clamp(26px, 3vw, 44px); line-height: .98; letter-spacing: -.03em; text-transform: uppercase; margin-bottom: 4px; max-width: 14em; }

/* títulos que suben por renglón; el aire de arriba es para que no se corten los acentos */
.linea { display: block; overflow: hidden; padding: .2em .08em .24em 0; margin: -.2em 0 -.24em; }
.linea > span { display: block; transform: translateY(112%); transition: transform calc(.95s * var(--k)) var(--salida); }
.visto .linea > span, .sube.visto .linea > span { transform: none; }
.visto .linea:nth-child(2) > span { transition-delay: calc(.09s * var(--k)); } .visto .linea:nth-child(n+3) > span { transition-delay: calc(.18s * var(--k)); }
.entra { opacity: 0; transform: translateY(28px); transition: opacity calc(.8s * var(--k)) var(--salida), transform calc(.8s * var(--k)) var(--salida); }
.entra.visto { opacity: 1; transform: none; }
/* tachar lo que no es */
.tacha { background: linear-gradient(var(--rojo), var(--rojo)) no-repeat 0 56% / 0% .085em; transition: background-size calc(.7s * var(--k)) var(--salida) calc(.3s * var(--k)), color calc(.5s * var(--k)) calc(.7s * var(--k)); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tacha.visto { background-size: 100% .085em; color: var(--tenue); }
.rotor > li:not(.on) .tacha.visto { background-size: 0% .085em; color: inherit; transition: none; }

/* ---------- las listas: enteras, a la vista; el renglón que el dibujo de al lado está actuando queda marcado ---------- */
.rotor { display: grid; gap: .3em; align-content: center; }
.rotor > li { position: relative; padding-left: 1.05em; }
.rotor > li::before { content: ""; position: absolute; left: 0; top: .5em; width: .4em; height: .4em; border-radius: 50%; border: 1.5px solid currentColor; transition: background calc(.3s * var(--k)), border-color calc(.3s * var(--k)), scale calc(.4s * var(--k)) var(--salida); }
.rotor > li.on::before { background: var(--rojo); border-color: var(--rojo); scale: 1.5; }
.escalonada { display: grid; gap: .16em; }
.escalonada > li:nth-child(2) { margin-left: 9%; } .escalonada > li:nth-child(3) { margin-left: 18%; } .escalonada > li:nth-child(4) { margin-left: 27%; }

/* una situación dibujada: una escena chica con gente */
.sit { background: var(--blanco); border: 1.5px solid var(--negro); }
.sit canvas { display: block; width: 100%; height: auto; aspect-ratio: 9 / 7; }
.sit.noche { background: var(--negro); border: 0; } .sit.noche canvas { aspect-ratio: 4 / 3; }
.sits-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2vw; }
.ramas-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4vw; }
.ramas-3 a { display: grid; gap: 14px; align-content: start; text-decoration: none; }
.ramas-3 .sit { transition: translate calc(.5s * var(--k)) var(--salida), box-shadow calc(.5s * var(--k)) var(--salida); }
.ramas-3 a:hover .sit { translate: -5px -5px; box-shadow: 8px 8px 0 var(--negro); }
.ramas-3 .nombre { font-weight: var(--p-sub); font-size: var(--f-sub); line-height: 1.1; letter-spacing: -.018em; margin-top: 6px; }
.ramas-3 .frase { font-size: var(--f-fila); line-height: 1.34; letter-spacing: -.014em; color: var(--tinta); text-wrap: pretty; }
.ramas-3 .cuad { margin-top: 6px; }

/* la tarjeta: un dibujo chico que actúa el renglón de al lado */
.ventana { position: relative; background: var(--blanco); border: 1.5px solid var(--negro); box-shadow: 8px 8px 0 var(--tinta); color: var(--negro); }
.ventana canvas { display: block; width: 100%; height: auto; aspect-ratio: 56 / 43; }
.tarjeta { display: grid; grid-template-columns: 6fr 6fr; gap: 5vw; align-items: center; }
.tarjeta .ventana { rotate: -1.4deg; }
.tarjeta.al-reves { grid-template-columns: 6fr 5fr; } .tarjeta.al-reves .ventana { order: 2; rotate: 1.4deg; }

/* la frase que cruza la pantalla (fuera de escala: es una imagen) */
.corre-caja { position: relative; z-index: 4; overflow: hidden; background: var(--negro); color: var(--blanco); padding: 4vh 0 5vh; }
.corre { white-space: nowrap; width: max-content; font-weight: var(--p-titulo); font-size: clamp(92px, 17vw, 340px); line-height: 1.04; letter-spacing: -.035em; transform: translateX(var(--x, 60vw)); will-change: transform; }
.corre .ac[class*="m-"] { background-size: 100% 34%; }

/* las piezas de las cuatro capacidades: el mismo color en todo el sitio */
.pieza { display: block; width: clamp(60px, 8.6vw, 150px); height: auto; aspect-ratio: 1; }
.rojo .pieza .f { fill: var(--rojo); } .azul .pieza .f { fill: var(--azul); } .verde .pieza .f { fill: var(--verde); } .violeta .pieza .f { fill: var(--violeta); }
/* Home 11 · las cuatro piezas como selector: una encendida, con su nombre */
.selector { display: grid; grid-template-columns: minmax(280px, 40%) 1fr; gap: 5vw; align-items: center; }
.sel-izq { display: grid; gap: 26px; justify-items: start; } .sel-izq .ventana { width: 100%; }
.selector .rotor { gap: .1em; }
.piezas-fila { display: grid; grid-template-columns: repeat(4, clamp(54px, 6.4vw, 100px)); gap: 10px; }
.piezas-fila button { all: unset; cursor: pointer; display: block; transition: transform calc(.6s * var(--k)) var(--salida); }
.piezas-fila .pieza { width: 100%; }
.piezas-fila button:not(.on) .pieza .f { fill: #cfcfcf; } .piezas-fila button:not(.on) .pieza rect:last-child { stroke: #aaa; }
.piezas-fila button.on { transform: translateY(-10px) rotate(-6deg); }
.piezas-fila button:focus-visible { outline: 2px solid var(--rojo); outline-offset: 4px; }

/* las puertas (mount): un pictograma, el nombre, su frase a la derecha y un cuadrado con flecha */
ol.puertas > li > a { display: grid; grid-template-columns: 1.15fr 1fr 56px; gap: 3vw; align-items: center; padding: 24px 0; border-top: 1.5px solid var(--raya); text-decoration: none; transition: background .25s, color .25s, padding calc(.5s * var(--k)) var(--salida); }
ol.puertas > li.con-picto > a { grid-template-columns: 52px 1.15fr 1fr 56px; }
ol.puertas > li:last-child > a { border-bottom: 1.5px solid var(--raya); }
ol.puertas > li > a:hover { background: var(--tinta); color: var(--fondo); padding-left: 18px; padding-right: 18px; }
ol.puertas .picto { width: 44px; height: 44px; }
ol.puertas .nombre { font-weight: var(--p-sub); font-size: var(--f-sub); line-height: 1.1; letter-spacing: -.018em; }
ol.puertas .frase { font-size: var(--f-cuerpo); line-height: 1.5; text-align: right; text-wrap: balance; color: var(--tenue); }
ol.puertas > li > a:hover .frase { color: inherit; }
.cuad { width: 56px; height: 56px; border: 1.5px solid currentColor; display: grid; place-items: center; }
a:hover > .cuad svg { animation: empuja calc(.5s * var(--k)) var(--salida); }
@keyframes empuja { 0% { translate: 0; } 49% { translate: 140% 0; opacity: 0; } 50% { translate: -140% 0; opacity: 0; } 100% { translate: 0; } }
.puerta-sola { display: inline-flex; align-items: center; gap: 18px; text-decoration: none; justify-self: start; }
.puerta-sola:hover .cuad { background: var(--tinta); color: var(--fondo); }

/* Home 14 · público / privado: el legajo con renglones tapados */
.reparto { grid-template-columns: 7fr 5fr; column-gap: 6vw; align-items: start; }
.reparto > h2, .reparto > p { grid-column: 1; }
.reparto > .legajo { grid-column: 2; grid-row: 1 / span 2; }
.legajo { background: var(--blanco); color: var(--negro); --tinta: var(--negro); border: 1.5px solid var(--negro); box-shadow: 8px 8px 0 var(--negro); padding: 22px 26px 26px; rotate: 1.8deg; }
.legajo .cab { display: flex; justify-content: space-between; border-bottom: 1.5px dashed var(--negro); padding-bottom: 12px; margin-bottom: 16px; }
.tapado { display: grid; gap: 9px; margin: 14px 0 24px; }
.tapado i { display: block; height: 14px; width: var(--w); background: var(--negro); transform-origin: left; scale: 0 1; transition: scale calc(.8s * var(--k)) var(--salida) calc(.5s * var(--k)); }
.tapado i:nth-child(2) { transition-delay: calc(.62s * var(--k)); } .tapado i:nth-child(3) { transition-delay: calc(.74s * var(--k)); } .tapado i:nth-child(4) { transition-delay: calc(.86s * var(--k)); }
.visto .tapado i { scale: 1 1; }

/* lo que se pliega: una fila cerrada que se abre con su «+» (el acordeón de Practice, la planilla del Dossier) */
.plegable > h2 > button { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; align-items: center; }
.plegable > h2 > button:focus-visible { outline: 2px solid var(--rojo); outline-offset: 4px; }
.mas { position: relative; width: 26px; height: 26px; transition: rotate calc(.5s * var(--k)) var(--salida); }
.mas::before, .mas::after { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 2px; background: currentColor; }
.mas::after { rotate: 90deg; transition: scale calc(.4s * var(--k)); }
.abierta .mas { rotate: 180deg; } .abierta .mas::after { scale: 0 1; } .abierta .mas::before { background: var(--rojo); }
.pliegue { display: grid; grid-template-rows: 0fr; transition: grid-template-rows calc(.6s * var(--k)) var(--salida); }
.abierta > .pliegue { grid-template-rows: 1fr; }
.pliegue-dentro { overflow: hidden; min-height: 0; }

/* el óvalo a mano alrededor de lo que importa (mount) */
.ovalo { position: relative; display: inline-block; white-space: nowrap; margin: 0 .16em; padding: 0 .42em; }
.ovalo svg { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; overflow: visible; pointer-events: none; }
.ovalo svg path { fill: none; stroke: var(--negro); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset calc(1.3s * var(--k)) var(--salida) calc(.3s * var(--k)); }
.ovalo.visto svg path { stroke-dashoffset: 0; }

/* ---------- Bureau: la página de servicios de mount, en nuestro mundo ----------
   De mount: todo chico y en calma; la jerarquía sale del aire, de los filetes y del óvalo, no del tamaño. */
.mt { padding: 14vh 5vw 0; --tenue: #4a4a4a; --tinta: var(--negro); }
.mt-abre { padding-top: 20vh; }
.mt-etq { padding-bottom: 12px; border-bottom: 1px solid var(--negro); margin-bottom: 9vh; color: var(--tenue); }
.mt-etq b { font-weight: 500; color: var(--negro); }
.mt-dos { display: grid; grid-template-columns: 31fr 59fr; column-gap: 5%; align-items: start; }
.mt-tesis { font-weight: var(--p-sub); font-size: var(--f-sub); line-height: 1.2; letter-spacing: -.018em; text-wrap: balance; }
.mt-titulo { font-weight: 400; font-size: var(--f-fila); line-height: 1.3; letter-spacing: -.014em; text-wrap: balance; }
.mt-parrafo { display: grid; row-gap: .35em; max-width: 40em; }
.mt-parrafo p, .mt-renglon { font-size: var(--f-cuerpo); line-height: 1.5; }
.mt-frase { font-weight: 400; font-size: var(--f-fila); line-height: 1.75; letter-spacing: -.014em; text-wrap: balance; }
.mt-frase.g { font-weight: var(--p-sub); font-size: var(--f-sub); line-height: 1.6; letter-spacing: -.018em; margin-top: 8vh; }
.mt-igual { display: block; width: 13px; height: 6px; border-top: 1.5px solid var(--negro); border-bottom: 1.5px solid var(--negro); margin: 22px 0 16px; }
.mt-rotor { border-top: 1px solid var(--negro); border-bottom: 1px solid var(--g3); padding: 14px 0 16px; margin: .6em 0; }
.mt-rotor .rotor > li { font-weight: var(--p-sub); font-size: var(--f-sub); letter-spacing: -.018em; line-height: 1.14; }
.mt-rotor .rotor.todas > li { font-size: var(--f-cuerpo); font-weight: 400; letter-spacing: 0; line-height: 1.3; padding: 11px 0 10px; border-bottom: 1px solid var(--g3); }
.mt-rotor .rotor.todas > li:last-child { border-bottom: 0; }
/* el mapa: las cuatro capacidades, como las tarjetas apiladas de mount */
.mt-panel { background: var(--gris); padding: 8vh 6vw 12vh; margin-bottom: 8vh; }
.mt-cartas { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1180px; margin: 0 auto; }
.mt-cartas li { position: relative; background: var(--blanco); border: 1.5px solid var(--negro); border-radius: 12px; padding: 18px 18px 20px; min-height: clamp(150px, 15vw, 210px); display: grid; align-content: space-between; gap: 22px; font-size: var(--f-fila); line-height: 1.2; box-shadow: 5px 5px 0 var(--negro); }
.mt-cartas li + li { margin-left: -12px; }
.mt-cartas li:nth-child(2) { top: 22px; } .mt-cartas li:nth-child(3) { top: 44px; } .mt-cartas li:nth-child(4) { top: 66px; }
.mt-cartas .pieza { width: clamp(44px, 5vw, 76px); }
.mt-cartas.verbos { max-width: none; margin-top: 8vh; }
.mt-cartas.verbos li { top: 0; min-height: clamp(130px, 12vw, 180px); font-weight: var(--p-sub); font-size: var(--f-sub); letter-spacing: -.018em; }
/* un bloque por capacidad: título, frase con un óvalo y un dibujo al lado; a la derecha, el mapa chico con su parte encendida */
.mt-cap { display: grid; grid-template-columns: 76fr 6fr 8fr; align-items: start; }
.mt-cap > .mt-etq { grid-column: 1 / -1; }
.mt-cab { display: grid; grid-template-columns: 1fr clamp(240px, 30vw, 440px); gap: 4vw; align-items: start; margin-bottom: 5vh; }
.mt-cab .sit { margin-top: -2vh; box-shadow: 8px 8px 0 var(--negro); }
.mt-cuerpo { display: grid; row-gap: 4vh; }
.mt-lado { grid-column: 3; position: sticky; top: 20vh; }
.minimapa { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.minimapa .pieza { width: 100%; }
.minimapa span:not(.on) .pieza .f { fill: #d2d2d2; } .minimapa span:not(.on) .pieza rect:last-child { stroke: #b0b0b0; }
/* las listas numeradas, con filete */
.mt-lista { border-top: 1px solid var(--negro); }
.mt-lista li { display: grid; grid-template-columns: 3.4em 1fr; align-items: baseline; padding: 13px 0 12px; border-bottom: 1px solid var(--g3); font-size: var(--f-cuerpo); }
.mt-lista li i { font-style: normal; color: var(--tenue); }
.mt-lista.tabla li > span { display: grid; grid-template-columns: 1.3fr 7em 1fr; column-gap: 2vw; }
.mt-lista.tabla .v { color: var(--tenue); }
.mt-catalogo .mt-frase.g { margin-left: calc(36% - .3em); }
/* las tres ramas, lado a lado */
[data-pagina="bureau"] main { display: grid; grid-template-columns: repeat(3, 1fr); }
[data-pagina="bureau"] main > * { grid-column: 1 / -1; min-width: 0; }
[data-pagina="bureau"] main > #s08, [data-pagina="bureau"] main > #s09, [data-pagina="bureau"] main > #s10 { grid-column: auto; }
.mt-rama { padding: 16vh 2vw 0; display: grid; align-content: start; }
#s08 .mt-rama { padding-left: 5vw; } #s10 .mt-rama { padding-right: 5vw; }
.mt-rama .mt-etq { margin-bottom: 5vh; }
.mt-rama .mt-parrafo { margin-bottom: 3vh; }
.mt-rama .mt-titulo { min-height: 2.6em; }
.mt-rama .sit { margin-bottom: 3vh; }
.mt-suma { display: grid; justify-items: start; gap: 6px; margin-bottom: 3vh; font-size: var(--f-cuerpo); }
.mt-suma .carta { background: var(--blanco); border: 1.5px solid var(--negro); border-radius: 10px; padding: 9px 14px; box-shadow: 4px 4px 0 var(--negro); }
.mt-suma .signo { padding-left: 14px; font-size: var(--f-fila); }
/* las notas: una fila cada una, con su pictograma */
.mt-nota { padding-top: 0; }
#s11 .mt-nota { padding-top: 16vh; }
.mt-nota .fila { display: grid; grid-template-columns: 31fr 59fr; column-gap: 5%; align-items: center; padding: 24px 0 26px; border-top: 1px solid var(--negro); }
.mt-nota .fila > .t-mono { color: var(--tenue); }
#s14 .mt-nota .fila { border-bottom: 1px solid var(--negro); }
/* el cierre: la tabla, la frase y el mapa entero encendido */
.mt-cierre { padding-bottom: 12vh; }
.mt-cierre .mt-tesis { margin: 9vh 0 0; max-width: 22em; }

/* ---------- Practice: la página de servicios de Dentsu Creative, en nuestro mundo ----------
   De Dentsu: la página entera en un color y un acordeón de filas numeradas que se abren con el «+». */
[data-pagina="practice"] main { background: var(--negro); color: var(--blanco); }
.dc { padding: 0 var(--m); --tinta: var(--blanco); --tenue: #c2c2c2; --fondo: var(--negro); }
/* cada paso del método: una situación dibujada y su copy entero */
.dc-paso { display: grid; grid-template-columns: 5fr 7fr; column-gap: 6vw; align-items: start; padding: 9vh var(--m) 10vh; border-top: 1px solid var(--blanco); }
#s02 .dc-paso { margin-top: 9vh; }
.dc-paso .lado { position: sticky; top: 12vh; display: grid; gap: 18px; }
.dc-paso.par .lado { order: 2; } .dc-paso.par { grid-template-columns: 7fr 5fr; }
.dc-paso .dc-etq { padding: 0; }
.dc-etq { font-style: normal; color: var(--tenue); } .dc-etq b { font-weight: 500; color: var(--blanco); }
.dc-paso .tit { margin-bottom: 4vh; max-width: 18em; }
.dc-cont { display: grid; row-gap: 3vh; }
.dc-p { font-size: var(--f-fila); line-height: 1.34; letter-spacing: -.014em; max-width: 32em; text-wrap: pretty; }
.dc-ps { display: grid; row-gap: .3em; }
.dc-lista { columns: 2; column-gap: 4%; font-size: var(--f-fila); line-height: 1.3; }
.dc-lista.larga { columns: 1; max-width: 46em; }
.dc-lista li { break-inside: avoid; padding: 10px 0 9px; border-top: 1px solid #4a4a4a; }
.dc-golpe { font-weight: var(--p-frase); font-size: var(--f-enun); line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; }
.dc-caminos .dc-etq { padding: 14vh 0 4vh; }
/* dos maneras de entrar: dos tarjetas claras, lado a lado */
.dc-caminos { padding-bottom: 4vh; }
.dc-cartas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 8vh; }
.dc-cartas article { --tinta: var(--negro); --tenue: #666; background: var(--blanco); color: var(--negro); border-radius: 14px; padding: 26px 28px 32px; display: grid; align-content: start; row-gap: 2.4vh; }
.dc-cartas .t-mono { padding-bottom: 12px; border-bottom: 1.5px solid var(--negro); }
/* «qué podés pedirnos»: tres tarjetas, y debajo las reglas de la casa */
.dc-cartas.tres { grid-template-columns: repeat(3, 1fr); }
.dc-pedir .tit { max-width: 20em; margin: 0 0 6vh; }
.dc-paso .dc-ps .dc-p + .dc-p { margin-top: .8em; }
.dc-pedir .reglas { display: grid; row-gap: 1.2em; max-width: 44em; margin-bottom: 6vh; }
/* para quien recibió una propuesta: qué se cobra y qué pasa si dice que no */
.dc-propuesta { max-width: 46em; border: 1.5px solid var(--blanco); border-radius: 14px; padding: 22px 28px 12px; margin: 2vh 0 8vh; }
.dc-propuesta .t-mono { padding-bottom: 14px; } .dc-propuesta .t-sub { padding-bottom: 16px; }
.dc-propuesta li { padding: .78em 0 .82em; border-top: 1px solid #4a4a4a; font-size: var(--f-fila); line-height: 1.3; letter-spacing: -.014em; }
.dc-paso .paso span { color: var(--tenue); }
.dc-pedir .privado { max-width: 26em; margin-bottom: 4vh; }
.dc-pedir .puerta-sola { margin-bottom: 12vh; }
.dc-secuencia.tres { grid-template-columns: repeat(3, 1fr); margin-bottom: 8vh; } .dc-practica .dc-secuencia { margin-bottom: 8vh; }
.dc-cartas .dc-lista { columns: 1; } .dc-cartas .dc-lista li { border-color: #d2d2d2; }
/* la secuencia: siete pasos en una línea */
.dc-practica { padding-bottom: 14vh; display: grid; row-gap: 6vh; }
.dc-practica .dc-etq { padding: 14vh 0 0; }
.dc-arriba { display: grid; grid-template-columns: 1fr minmax(300px, 36%); gap: 5vw; align-items: end; }
.dc-vista { background: var(--blanco); border: 1.5px solid var(--blanco); } .dc-vista canvas { display: block; width: 100%; height: auto; aspect-ratio: 9 / 7; }
.dc-secuencia { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--blanco); border-bottom: 1px solid var(--blanco); }
.dc-secuencia li { display: grid; align-content: start; gap: 12px; padding: 22px 14px 26px 0; font-size: var(--f-fila); line-height: 1.24; transition: color calc(.4s * var(--k)); }
.dc-secuencia li + li { border-left: 1px solid #4a4a4a; padding-left: 14px; }
.dc-secuencia i { font-style: normal; color: var(--tenue); transition: color calc(.4s * var(--k)); }
.dc-secuencia li.viva i { color: var(--rojo); }
.dc-final { font-weight: var(--p-titulo); font-style: italic; font-size: var(--f-display); line-height: .98; letter-spacing: -.03em; }

/* ---------- Dossier: Bureaux, en nuestro mundo ----------
   De Bureaux: la cinta que corre, la declaración chica y la planilla honesta. En lugar del objeto cromado,
   los nueve pictogramas del registro, que después marcan cada fila. */
[data-pagina="dossier"] main { background: var(--gris); }
.bx { position: relative; padding: 0 var(--m); --tenue: #474747; --tinta: var(--negro); --fondo: var(--gris); }
.bx-etq { color: var(--tenue); } .bx-etq b { font-weight: 500; color: var(--negro); }
.bx-abre { display: grid; row-gap: 6vh; padding: 132px 0 7vh; }
.bx-abre .bx-pie { margin: 0 var(--m); }
.banda-caja { overflow: hidden; pointer-events: none; }
.banda-caja.recta { position: absolute; inset: 78px 0 auto 0; }
.banda-caja.inclinada { padding: 9vh 0; margin: -4vh 0; position: relative; z-index: 5; }
.inclinada .banda { background: var(--negro); color: var(--blanco); transform: rotate(-4.8deg) scale(1.08); padding: 20px 0 19px; font-size: clamp(16px, 1.8vw, 30px); letter-spacing: .1em; }
.inclinada .banda .tira i { width: .5em; height: .5em; vertical-align: .08em; }
.banda { white-space: nowrap; font: 500 var(--f-mono) var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.banda.recta { color: var(--negro); border-top: 1px solid var(--negro); border-bottom: 1px solid var(--negro); padding: 11px 0 10px; }
.banda .tira { display: inline-block; will-change: transform; }
.banda .tira span { margin: 0 .9em; }
.banda .tira i { font-style: normal; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rojo); }
.bx-pie { position: relative; display: grid; grid-template-columns: 5fr 3fr 3fr; column-gap: 4%; align-items: end; padding-right: 124px; }
.bx-pie .bx-etq { margin-bottom: 16px; }
.bx-dice { font-weight: var(--p-sub); font-size: var(--f-sub); line-height: 1.14; letter-spacing: -.018em; text-wrap: balance; }
.bx-dice.g { font-size: var(--f-display); line-height: .98; letter-spacing: -.045em; }
.bx-chico p, .bx-texto { font-size: var(--f-cuerpo); line-height: 1.5; color: var(--tenue); }
.bx-chico .pri, .bx-chico p.pri { color: var(--negro); }
.bx-chico.fin { justify-self: end; text-align: right; }
.bx-pie .bx-chico p + p { margin-top: .8em; } .bx-pie .bx-chico.fin p + p { margin-top: 0; }
/* las dos ciudades, con su hora */
.bx-ciudades { padding-top: 4vh; }
.bx-dos-ciudades { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--negro); border-bottom: 1px solid var(--negro); }
.ciudad { display: grid; gap: 18px; padding: 16px 2vw 26px 0; }
.ciudad + .ciudad { border-left: 1px solid var(--negro); padding-left: 2vw; padding-right: 0; }
.ciudad .cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ciudad .nombre { font-weight: var(--p-titulo); font-size: var(--f-display); line-height: .98; letter-spacing: -.03em; white-space: nowrap; }
.hora { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.vivo { width: 9px; height: 9px; border-radius: 50%; background: var(--rojo); animation: late calc(1.6s * var(--k)) infinite; }
@keyframes late { 50% { opacity: .2; } }
.bx-cols { display: grid; grid-template-columns: 5fr 6fr; column-gap: 4%; padding: 6vh 0 12vh; align-items: start; }
.bx-distintas { font-size: var(--f-fila); line-height: 1.3; max-width: 24em; }
.bx-distintas li { padding: 9px 0; border-bottom: 1px solid #c4c4c4; } .bx-distintas li:first-child { border-top: 1px solid #c4c4c4; }
.bx-cols .bx-chico { margin-top: 3vh; }
/* el registro: cada fila, su situación dibujada, el nombre y el copy entero */
.bx-fila .fila { display: grid; grid-template-columns: minmax(200px, 26%) 20% 1fr; column-gap: 3%; align-items: start; padding: 26px 0 30px; border-top: 1px solid #bdbdbd; }
#s03 .bx-fila .fila { border-top-color: var(--negro); } #s10 .bx-fila .fila { border-bottom: 1px solid var(--negro); }
.bx-fila .cab { display: grid; gap: 8px; }
.bx-fila .cab i { font-style: normal; color: var(--tenue); }
.bx-fila .nombre { font-weight: var(--p-sub); font-size: var(--f-sub); line-height: 1.1; letter-spacing: -.018em; }
.bx-fila .cuerpo { display: grid; gap: 10px; align-content: start; }
.bx-fila .bx-texto { color: var(--negro); max-width: 38em; }
/* la ficha: cuándo y dónde, debajo del nombre; y «qué dejó», aparte, como la frase de la fila */
.bx-ficha .cuando { color: var(--tenue); margin-top: 4px; line-height: 1.5; }
.bx-ficha .dejo { color: var(--tenue); margin-top: 14px; padding-top: 12px; border-top: 1px solid #bdbdbd; max-width: 38em; }
.bx-ficha .bx-golpe { margin-top: 0; max-width: 24em; }
.bx-lista { font-size: var(--f-cuerpo); line-height: 1.5; color: var(--tenue); max-width: 38em; }
.bx-lista li { display: inline; } .bx-lista li::after { content: " "; }
.bx-golpe { font-weight: var(--p-sub); font-style: italic; font-size: var(--f-sub); line-height: 1.14; letter-spacing: -.018em; text-wrap: balance; max-width: 22em; margin-top: 6px; }
/* lo que dejó el registro */
.bx-tabla { padding-top: 13vh; }
.bx-ensenanzas { margin: 4vh 0 8vh; border-top: 1px solid var(--negro); }
.bx-ensenanzas li > span { display: grid; grid-template-columns: 3fr 2fr 6fr; column-gap: 2%; align-items: baseline; padding: 13px 0 14px; border-bottom: 1px solid #bdbdbd; font-size: var(--f-fila); letter-spacing: -.014em; }
.bx-ensenanzas .v { color: var(--tenue); font-size: var(--f-sec); letter-spacing: 0; }
.bx-ensenanzas .b { font-style: italic; }
.bx-ahora { padding-top: 12vh; } .bx-ahora .bx-cols { padding-top: 4vh; }
.bx-cierre { min-height: 70vh; display: grid; align-content: end; padding-bottom: 9vh; }

/* ---------- el paso a la página siguiente y el pie ---------- */
.sigue { display: grid; gap: 2vh; padding: 10vh var(--m) 11vh; background: var(--blanco); color: var(--negro); text-decoration: none; border-top: 1.5px solid var(--negro); }
.sigue .t-mono { color: #666; }
.sigue:hover .t-display { font-style: italic; }
.sigue .flecha { display: inline-block; vertical-align: -.04em; transition: transform .6s var(--salida); }
.sigue .flecha svg { width: .7em; height: .7em; }
.sigue:hover .flecha { transform: translateX(.3em); }
.cierre { --fondo: var(--negro); --tinta: var(--blanco); --raya: var(--blanco); --tenue: #c2c2c2; background: var(--negro); color: var(--blanco); padding: 9vh var(--m) 5vh; }
.cierre .indice a[aria-current] .nombre::after { content: ""; display: inline-block; width: .3em; height: .3em; margin-left: .22em; border-radius: 50%; background: var(--rojo); vertical-align: .2em; }
.pase { margin: 11vh auto 0; width: min(100%, 660px); display: grid; grid-template-columns: 1fr auto; background: var(--blanco); color: var(--negro); text-decoration: none; border-radius: 10px; overflow: hidden; rotate: -1.6deg; transition: rotate .5s var(--salida), scale .5s var(--salida), opacity .8s, transform .8s var(--salida); }
.pase:hover { rotate: 1deg; scale: 1.02; }
.pase .cuerpo-pase { padding: 24px 28px 22px; }
.pase .cuerpo-pase .t-sub { margin: 14px 0 18px; } .pase .llego { margin: 12px 0 16px; max-width: 26em; }
.pase .talon { border-left: 2px dashed var(--negro); padding: 24px 20px; display: grid; align-content: space-between; justify-items: center; writing-mode: vertical-rl; }
.pase .talon .punto { width: 24px; height: 24px; border-radius: 50%; background: var(--rojo); }
.pie { margin-top: 12vh; display: grid; gap: 18px; color: var(--g2); }
.pie .lockup { width: 100%; filter: invert(1); display: block; }

/* ---------- pantallas angostas ---------- */
@media (max-width: 900px) {
  .barra .paginas { display: none; } .barra .abre-menu { display: block; margin-left: 6px; }
  .barra .idiomas { border-left: 0; margin-left: 0; padding-left: 0; }
}
@media (max-width: 820px) {
  :root { --m: 5vw; --lomo: 0px; }
  .lomo { position: static; width: auto; border-right: 0; border-bottom: 1.5px solid var(--raya); }
  .lomo span { position: static; writing-mode: horizontal-tb; rotate: none; margin: 0; padding: 76px var(--m) 12px; width: auto; }
  .dentro { padding: 8vh var(--m) 10vh; row-gap: 4.5vh; }
  .dos, .tarjeta, .tarjeta.al-reves, .selector, .reparto, .sits-3, .ramas-3, .dc-arriba { grid-template-columns: 1fr; gap: 4.5vh; }
  .reparto > .legajo, .reparto > h2, .reparto > p { grid-column: 1; grid-row: auto; }
  .tarjeta .ventana, .tarjeta.al-reves .ventana { order: 0; rotate: 0deg; box-shadow: 5px 5px 0 var(--tinta); }
  .gira.con-picto { grid-template-columns: 64px 1fr; gap: 5vw; } .gira.con-picto .picto { width: 64px; }
  .piezas-fila { grid-template-columns: repeat(4, 1fr); max-width: 320px; }
  ol.puertas > li > a, ol.puertas > li.con-picto > a { grid-template-columns: 40px 1fr 44px; gap: 8px 4vw; padding: 20px 0; }
  ol.puertas .picto { width: 34px; height: 34px; }
  ol.puertas .frase { grid-column: 2; grid-row: 2; text-align: left; }
  ol.puertas > li:not(.con-picto) > a { grid-template-columns: 1fr 44px; } ol.puertas > li:not(.con-picto) .frase { grid-column: 1; }
  ol.puertas .cuad { grid-row: 1 / span 2; grid-column: -2; align-self: start; }
  .cuad { width: 44px; height: 44px; }
  .legajo { rotate: 1deg; box-shadow: 5px 5px 0 var(--negro); }
  /* Practice */
  .dc-paso, .dc-paso.par { grid-template-columns: 1fr; row-gap: 4vh; padding: 7vh var(--m) 8vh; } .dc-paso .lado { position: static; } .dc-paso.par .lado { order: 0; }
  .dc-lista { columns: 1; } .dc-cartas, .dc-cartas.tres { grid-template-columns: 1fr; } .dc-secuencia.tres { grid-template-columns: 1fr; }
  .r-cerca .cuatro li { grid-template-columns: 1fr; row-gap: .3em; } .puerta-arriba { top: 76px; font-size: 10px; }
  .dc-secuencia { grid-template-columns: 1fr; } .dc-secuencia li { grid-template-columns: 2.4em 1fr; align-items: baseline; padding: 12px 0; gap: 10px; } .dc-secuencia li + li { border-left: 0; border-top: 1px solid #4a4a4a; padding-left: 0; }
  /* Dossier */
  .bx-abre { padding-top: 124px; } .retrato { margin-bottom: 4vh; }
  .bx-pie, .bx-cols, .bx-dos-ciudades { grid-template-columns: 1fr; row-gap: 3vh; padding-right: 0; } .bx-chico.fin { justify-self: start; text-align: left; }
  .ciudad + .ciudad { border-left: 0; border-top: 1px solid var(--negro); padding-left: 0; }
  .bx-fila .fila { grid-template-columns: 1fr; row-gap: 14px; } .ciudad { padding-right: 0; }
  .bx-ensenanzas li > span { grid-template-columns: 1fr; row-gap: 0; }
  /* Bureau */
  .mt { padding: 10vh var(--m) 0; } .mt-abre { padding-top: 15vh; } .mt-etq { margin-bottom: 5vh; }
  .mt-dos, .mt-nota .fila { grid-template-columns: 1fr; row-gap: 3vh; }
  .mt-cartas { grid-template-columns: 1fr 1fr; gap: 10px; } .mt-cartas li, .mt-cartas li:nth-child(n) { margin-left: 0; top: 0; }
  .mt-panel { padding: 5vh 5vw; }
  .mt-cap { grid-template-columns: 1fr; } .mt-lado { display: none; }
  .mt-cab { grid-template-columns: 1fr; } .mt-cab .sit { margin: 0; order: -1; box-shadow: 5px 5px 0 var(--negro); }
  .escalonada > li:nth-child(2) { margin-left: 6%; } .escalonada > li:nth-child(3) { margin-left: 12%; } .escalonada > li:nth-child(4) { margin-left: 18%; }
  .mt-lista.tabla li > span { grid-template-columns: 1fr; }
  .mt-catalogo .mt-frase.g { margin-left: 0; }
  .ovalo { white-space: normal; }
  [data-pagina="bureau"] main { grid-template-columns: 1fr; }
  .mt-rama, #s08 .mt-rama, #s10 .mt-rama { padding: 10vh var(--m) 0; } .mt-rama .mt-titulo { min-height: 0; }
  .lamina.pasa .fija { height: 64vw; }
  /* las láminas: una pantalla fija; la escena arriba y el texto debajo, que cambia en su lugar */
  .lamina { --vh: .9vh; }
  .fija { display: flex; flex-direction: column; background: var(--blanco); }
  .oscura .fija { background: var(--negro); }
  .fija canvas { flex: none; height: var(--escena, 54vh); border-bottom: 1.5px solid var(--negro); }
  .oscura .fija canvas { border-color: var(--blanco); }
  .sobre { position: static; flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .sobre .etq { position: static; padding: 12px var(--m) 4px; }
  .pts { padding: 6px 0; }
  .titular { position: static; padding: 12px var(--m) 2px; }
  .titular .etq { padding: 0; margin-bottom: 6px; gap: 8px; }
  .nombre-marca { height: 28px; padding: 4px 0; margin-left: 0; }
  .titular h1 { font-size: 25px; }
  .lee, .lee.der { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; flex: 1; margin: 8px var(--m) 0; }
  .lee.der .tiempo { top: 0; bottom: auto; }
  .tiempo { row-gap: 8px; }
  .tiempo .t-sub { font-size: 20px; } .tiempo .t-enun { font-size: 29px; }
  .lee .tira, .titular h1 .tira { padding-left: 0; padding-right: .3em; }
  .tiempo .t-enun .tira, .titular h1 .tira { padding: .08em .22em .1em; }
  .titular h1 { max-width: none; }
  .pista { display: none; }
  .boton { width: 60px; height: 60px; bottom: 12px; } .pasada .boton { width: 38px; height: 38px; padding: 0; } .pasada .boton .dice, .pasada .boton .flecha { display: none; }  /* en el celular el rótulo tapaba texto */
  .pase { grid-template-columns: 1fr; } .pase .talon { writing-mode: horizontal-tb; border-left: 0; border-top: 2px dashed var(--negro); grid-auto-flow: column; justify-content: space-between; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .tiempo .tira, .titular h1 .tira { animation: none !important; opacity: 1; }
  .linea > span, .entra, [data-p], .tacha, .tapado i, .ac[class*="m-"], .rotor > li { transition: none; }
  .boton svg.gira { animation: none; }
}

/* ---------- el afiche: una sección compuesta como póster de cine (muestra del 6 oct) ----------
   Todo al eje. Dos pesos de Franklin (900 y 400) y la mono; el título manda por tamaño, no por caja. Blanco liso, sin grano ni grises. */
.afiche { text-align: center; background-image: none !important; }
.afiche .dentro { padding: 17vh var(--m) 16vh; justify-items: center; row-gap: 0; }
.afiche .af-titulo { font-weight: 900; font-size: clamp(44px, 7.4vw, 118px); line-height: .92; letter-spacing: -.035em; }
.afiche .af-titulo > span { display: block; text-wrap: balance; }
.afiche .af-titulo .ac { padding: 0 .08em 0 .04em; }
.afiche .af-bajada { font-weight: 400; font-size: clamp(19px, 1.8vw, 26px); line-height: 1.3; letter-spacing: -.01em; margin-top: 8vh; max-width: 30em; text-wrap: balance; }
.afiche .af-creditos { margin-top: 3.4vh; display: grid; row-gap: .42em; justify-items: center; }
.afiche .af-creditos li { font-weight: 400; font-size: clamp(19px, 1.8vw, 26px); line-height: 1.24; letter-spacing: -.012em; max-width: 30em; text-wrap: balance; }
.afiche .af-remate { font-weight: 900; font-style: italic; font-size: clamp(28px, 3.35vw, 50px); line-height: 1; letter-spacing: -.03em; margin-top: 12vh; max-width: 15em; text-wrap: balance; }
.afiche .af-nota { font-weight: 400; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; margin-top: 4.5vh; max-width: 30em; text-wrap: balance; }
.afiche .af-pie { margin-top: 10vh; display: grid; justify-items: center; row-gap: 3vh; }
.afiche .af-pie .t-mono { font-size: 13px; }
@media (max-width: 760px) {
  .afiche .dentro { padding: 12vh var(--m) 12vh; }
  .afiche .af-pie .t-mono { font-size: 12px; }
  .afiche .af-creditos { row-gap: .85em; }
}

/* ---------- la escala nueva de las secciones de lectura (7 oct) ----------
   Cada sección tiene su composición, pero todas comparten esto: blanco y negro lisos (sin grano ni grises), el título en
   Franklin 900 a tamaño de afiche contra la lectura en 400, y el rótulo en mono arriba en lugar del lomo vertical. */
.liso { background-image: none !important; }
.rotulo-g { font-size: 13px; }
.g-titulo { font-weight: 900; font-size: clamp(40px, 6.3vw, 100px); line-height: .92; letter-spacing: -.035em; text-wrap: balance; }
.g-bajada { font-weight: 400; font-size: clamp(19px, 1.8vw, 26px); line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
.g-remate { font-weight: 900; font-style: italic; font-size: clamp(27px, 3.2vw, 48px); line-height: 1; letter-spacing: -.03em; text-wrap: balance; }
.afiche .rotulo-g { margin-bottom: 6vh; }
/* 02 · una frase sola, al eje */
.frase-sola { text-align: center; }
.frase-sola .dentro { padding: 15vh var(--m) 13vh; justify-items: center; row-gap: 6vh; }
.frase-sola .g-titulo { max-width: 12.6em; }
/* 06 · la tabla, de punta a punta */
.tabla-g .dentro { padding: 15vh var(--m) 15vh; row-gap: 0; }
.tabla-g .g-titulo { margin-top: 5vh; max-width: 11em; }
.filas-g { margin-top: 9vh; border-top: 2px solid var(--negro); }
.filas-g li { display: grid; grid-template-columns: minmax(11em, 23%) 1fr; column-gap: 3vw; align-items: baseline; padding: .6em 0 .64em; border-bottom: 1px solid var(--negro); }
.filas-g .donde { font-size: 13px; }
.filas-g .que { font-weight: 400; font-size: clamp(20px, 2vw, 29px); line-height: 1.16; letter-spacing: -.022em; }
/* 08 · tres columnas: la palabra manda */
.tres-g .dentro { padding: 15vh var(--m) 15vh; row-gap: 0; }
.tres-g .g-bajada { margin-top: 4vh; }
.ramas-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6vw; margin-top: 7vh; }
.ramas-g a { display: grid; gap: 18px; align-content: start; text-decoration: none; }
.ramas-g .nombre { font-weight: 900; text-transform: uppercase; font-size: clamp(40px, 5.1vw, 80px); line-height: .9; letter-spacing: -.035em; }
.ramas-g .sit { transition: translate calc(.5s * var(--k)) var(--salida), box-shadow calc(.5s * var(--k)) var(--salida); }
.ramas-g a:hover .sit { translate: -5px -5px; box-shadow: 8px 8px 0 var(--negro); }
.ramas-g .frase { font-weight: 400; font-size: clamp(18px, 1.55vw, 22px); line-height: 1.36; letter-spacing: -.01em; text-wrap: pretty; }
.tres-g .g-remate { justify-self: center; text-align: center; max-width: 17em; margin-top: 11vh; }
/* 11 · el cierre: a la izquierda, sobre negro, más grande; el mail como la fecha de estreno */
.cierre-g .dentro { padding: 15vh var(--m) 13vh; row-gap: 6vh; }
.cierre-g .llamado { font-size: clamp(44px, 8vw, 128px); line-height: .98; letter-spacing: -.03em; row-gap: 0; }
.cierre-g .invita p { font-weight: 400; font-size: clamp(19px, 1.8vw, 26px); line-height: 1.3; }
.cierre-g .invita { max-width: 820px; }
.cierre-g .mail { font-size: clamp(26px, 3.2vw, 48px); font-weight: 900; }
.cierre-g .firma { color: var(--blanco); }
@media (max-width: 820px) {
  .rotulo-g { font-size: 12px; }
  .frase-sola .dentro, .tabla-g .dentro, .tres-g .dentro, .cierre-g .dentro { padding: 11vh var(--m) 11vh; }
  .filas-g li { grid-template-columns: 1fr; row-gap: .35em; padding: .8em 0 .85em; }
  .filas-g .donde { font-size: 12px; }
  .ramas-g { grid-template-columns: 1fr; gap: 7vh; }
  .puerta-arriba { font-size: 13px; }
  .cierre-g .llamado { line-height: 1.05; }  /* el «¿» no toca el renglón de abajo */
}

/* ---------- las voces dentro de una frase (7 oct) ----------
   Cada recurso quiere decir una cosa, para que no sea adorno:
   .rev  calado, en tira torcida como las de las láminas: LA COSA de la que se habla. Una por sección, sólo en títulos y remates.
   rojo  (el subrayado que ya estaba): EL GIRO de la frase.
   .ch   el planteo, chico y en 400, antes del golpe grande.   .fina  la otra voz: Franklin muy fina en itálica.
   .neg  en el texto de lectura, EL DATO (700; una por párrafo).   .cur  la voz (cursiva; una por bloque).
   .mano la letra de los carteles del dibujo, trazada a mano por la misma pluma: rótulos y, como mucho, una palabra por página. */
.rev { display: inline-block; background: var(--negro); color: var(--blanco); padding: .03em .2em .09em; margin: .04em .05em; rotate: -1.5deg; line-height: 1; white-space: nowrap; font-style: normal; }
.campo-negro .rev { background: var(--blanco); color: var(--negro); }
.ch { display: block; font-size: .46em; font-weight: 400; line-height: 1.14; letter-spacing: -.012em; text-transform: none; margin-bottom: .34em; }
.fina { font-weight: 200; font-style: italic; }
.neg { font-weight: 700; }
.campo-negro .neg { font-weight: 600; }
.cur { font-style: italic; }
.mono-may { font-family: var(--mono); font-size: .76em; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; }
.resto { display: block; font-weight: 400; font-style: normal; font-size: .6em; line-height: 1.2; letter-spacing: -.015em; margin-top: .55em; }
.mano { display: inline-block; white-space: nowrap; line-height: 0; }
.ovalo.anota { margin: 0 .1em; padding: 0 .22em; } .ovalo.anota svg path { stroke: var(--rojo); stroke-width: 5; }
.mano canvas { display: inline-block; }
.rotulo-g .mano { font-size: 31px; color: var(--rojo); rotate: -2.2deg; margin-left: .1em; --trazo: .1; --inclina: .1; }
.rotulo-g { display: flex; align-items: center; gap: .7em; }
.rotulo-g > span:first-child { white-space: nowrap; flex: none; }
.frase-sola .rotulo-g, .afiche .rotulo-g { justify-content: center; }
.g-titulo:has(.rev) { line-height: 1; }
/* la tira dentro de un título: más chica, en mayúsculas y más torcida, metida entre los renglones grandes */
.g-titulo .rev, .llamado .rev { font-size: .6em; text-transform: uppercase; letter-spacing: -.005em; padding: .14em .32em .16em; rotate: -2.6deg; vertical-align: .2em; margin: 0 .12em; }
/* la mono también habla: a máquina, en mayúsculas (.maq) o bajito, en frase (.maq-baja) */
.maq { font-family: var(--mono) !important; font-weight: 500 !important; text-transform: uppercase; font-size: clamp(14px, 1.3vw, 19px) !important; line-height: 1.5 !important; letter-spacing: .07em !important; text-wrap: balance; }
.maq-baja { font-family: var(--mono) !important; font-weight: 400 !important; font-size: clamp(13px, 1.05vw, 15px) !important; line-height: 1.6 !important; letter-spacing: .01em !important; }
.g-titulo .mano { font-size: 1.16em; rotate: -3deg; margin: 0 .02em; --trazo: .058; --inclina: .2; }
/* 10 · el título del afiche cambia de voz por la mitad */
.afiche .af-titulo .ch { margin-bottom: .5em; }
.afiche .af-remate { font-weight: 400; }
.afiche .af-remate .rev { font-weight: 900; text-transform: uppercase; font-size: 1.12em; margin-top: .14em; }
/* 08 · el remate: la tira y, debajo, el resto dicho bajito */
.tres-g .g-remate { font-style: normal; }
.tres-g .g-remate .rev { text-transform: uppercase; font-size: .92em; }
/* 11 · la pregunta, más chica; la respuesta, a todo tamaño */
.cierre-g .llamado .preg { font-size: .5em; line-height: 1.16; margin-bottom: .2em; }
@media (max-width: 820px) {
  .ch { font-size: .6em; }
  .frase-sola .g-titulo { font-size: 34px; }

  .cierre-g .llamado .preg { font-size: .56em; }
}

/* ---------- un solo sistema en el Inicio (7 oct): el texto de las láminas habla como la lectura ----------
   Título en tiras, 900; apoyo en 400 (antes 600: «el gris»); la promesa de la portada, grande; la idea, lo más grande sobre el dibujo. */
:root { --f-mono: 13px; }
.tiempo .t-sub { font-weight: 400; font-size: clamp(19px, 1.72vw, 25px); line-height: 1.26; letter-spacing: -.012em; }
.tiempo .t-sub.fuerte { font-weight: 900; font-size: clamp(22px, 2.15vw, 31px); line-height: 1.12; letter-spacing: -.025em; }
.tiempo .t-enun { font-size: clamp(31px, 3.9vw, 58px); }
[data-lamina="calle"] .lee { width: min(64vw, 920px); }
[data-lamina="calle"] .tiempo .t-enun { font-size: clamp(32px, 4.05vw, 60px); max-width: none; }
/* la portada: la promesa es lo que explica qué hacemos; va pesada y grande */
.lee.der { width: min(35vw, 520px); }
.lee.der .tiempo:first-child .t-sub { font-weight: 900; font-size: clamp(22px, 2.3vw, 34px); line-height: 1.08; letter-spacing: -.03em; }
/* la jerarquía de la lectura: la frase puente de la 06 baja; el «para quién» también */
.tabla-g .g-titulo { font-size: clamp(34px, 4.5vw, 66px); max-width: 13em; }
.frase-sola .g-titulo { font-size: clamp(38px, 5.4vw, 80px); }
/* la salida al final de la 03 */
.salida { display: grid; grid-template-columns: 1fr 1fr; border-top: 1.5px solid var(--blanco); }
.salida a { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; padding: 3.4vh var(--m) 3.6vh; text-decoration: none; color: var(--blanco); font: 900 clamp(22px, 2.3vw, 34px)/1.05 var(--sans); letter-spacing: -.03em; }
.salida a + a { border-left: 1.5px solid var(--blanco); }
.salida a:hover { background: var(--blanco); color: var(--negro); }
.salida i { font-style: normal; } .salida b { font-weight: 400; font-size: .62em; letter-spacing: -.01em; text-decoration: underline; text-underline-offset: .18em; }
/* 10 · menos volumen: los hechos más grandes que el lema */
.afiche .af-creditos li { font-size: clamp(20px, 2.05vw, 30px); }
.afiche .af-remate { font-size: clamp(24px, 2.6vw, 38px); margin-top: 9vh; }
.afiche .af-nota { font-size: clamp(17px, 1.4vw, 20px); }
.cuad { flex: none; }
@media (max-width: 820px) {
  .salida { grid-template-columns: 1fr; } .salida a + a { border-left: 0; border-top: 1.5px solid var(--blanco); }
  .boton, .pasada .boton { width: auto; height: 42px; border-radius: 21px; padding: 0 15px 0 12px; grid-auto-flow: column; column-gap: 8px; }
  .boton svg.gira { display: none; } .boton .dice, .pasada .boton .dice, .boton .flecha { display: block; } .boton .punto { width: 12px; height: 12px; }
  .lee.der { width: auto; }
  .sobre > .titular { bottom: auto; padding-top: 22px; }  /* 30 oct: el bottom: 7vh de compu lo subía 46 px sobre la escena («necesita aire»); la escena de la portada deja 130 px para el botón fijo (pagina.min.js) */
}

/* ---------- las páginas internas con el sistema nuevo (7 oct) ---------- */
.g-cuerpo { font-weight: 400; font-size: clamp(18px, 1.55vw, 22px); line-height: 1.42; letter-spacing: -.008em; max-width: 31em; text-wrap: pretty; }
.liso .tacha.visto, .campo-negro .tacha.visto { color: inherit; }
.campo-negro .sit { border-color: var(--blanco); }
.salida.una { grid-template-columns: 1fr; }
/* Cómo trabajamos · un paso por pantalla */
.paso-g .dentro { padding: 13vh var(--m) 13vh; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-areas: "num dib" "txt dib"; column-gap: 5vw; row-gap: 3vh; align-items: start; }
.paso-g.par .dentro { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); grid-template-areas: "dib num" "dib txt"; }
.paso-g .num { grid-area: num; display: flex; align-items: baseline; gap: 1em; }
.paso-g .num b { font-weight: 900; font-size: clamp(88px, 13.5vw, 200px); line-height: .78; letter-spacing: -.055em; }
.paso-g .txt { grid-area: txt; display: grid; row-gap: 2.8vh; align-content: start; }
.paso-g .g-titulo { font-size: clamp(31px, 4vw, 58px); }
.placa-g { font-weight: 900; font-size: clamp(25px, 2.8vw, 41px); line-height: 1; letter-spacing: -.03em; margin-top: 1.6vh; text-wrap: balance; max-width: 16em; }
.placa-g span { display: block; } .placa-g .fina { font-weight: 300; }
.paso-g .dib { grid-area: dib; align-self: center; }
/* la propuesta: un boleto blanco sobre negro */
.prop-g { text-align: center; }
.prop-g .dentro { padding: 14vh var(--m) 13vh; justify-items: center; row-gap: 6vh; }
.boleto-g { background: var(--blanco); color: var(--negro); width: min(100%, 780px); padding: 36px 42px 30px; text-align: left; rotate: -.8deg; }
.boleto-g h2 { font-weight: 900; font-size: clamp(28px, 3.3vw, 48px); line-height: 1; letter-spacing: -.035em; padding-bottom: .55em; }
.boleto-g li { padding: .72em 0 .76em; border-top: 1.5px solid var(--negro); font-size: clamp(18px, 1.6vw, 23px); line-height: 1.3; letter-spacing: -.01em; }
.boleto-g .neg { font-weight: 700; }
.boleto-g .mail { border-top: 1.5px solid var(--negro); padding-top: .6em; font-weight: 900; }
.prop-g .g-remate { font-style: normal; max-width: 21em; }
/* De dónde venimos · apertura */
.abre-g { text-align: center; }
.abre-g .dentro { padding: 25vh var(--m) 12vh; justify-items: center; row-gap: 5vh; }
.abre-g .g-titulo { font-size: clamp(40px, 7.2vw, 116px); }
.abre-g .g-titulo > span, .placa-neg .g-titulo > span, .cierre-d .g-titulo > span, .col-g .g-remate > span { display: block; }
.col-g .dentro { padding: 12vh var(--m) 14vh; justify-items: center; row-gap: 3.2vh; }
.col-g .g-bajada, .col-g .g-cuerpo { width: min(100%, 720px); max-width: none; }
.col-g .g-remate { text-align: center; font-style: normal; margin-top: 7vh; font-size: clamp(30px, 4vw, 60px); }
.col-g .g-remate .fina { font-style: italic; }
/* las dos ciudades y la placa */
.ciudades-g .dentro { padding: 12vh var(--m) 12vh; }
.dos-g { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; }
.ciudad-g { display: grid; row-gap: 2.2vh; align-content: start; }
.ciudad-g .g-titulo { font-size: clamp(40px, 6.4vw, 100px); }
.ciudad-g .vivo { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rojo); margin-right: .7em; }
.placa-neg { text-align: center; }
.placa-neg .dentro { padding: 17vh var(--m) 17vh; justify-items: center; row-gap: 5vh; }
.placa-neg .g-titulo { font-size: clamp(36px, 6vw, 96px); max-width: 13em; }
/* las fichas: el hecho manda */
.ficha-g .dentro { margin: 0 var(--m); padding: 7vh 0 9vh; border-top: 2px solid var(--negro); grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); column-gap: 5vw; row-gap: 0; align-items: start; }
.ficha-g .izq { display: grid; row-gap: 1.7vh; align-content: start; justify-items: start; }
.ficha-g .n { font-weight: 900; font-size: clamp(56px, 7.2vw, 106px); line-height: .8; letter-spacing: -.055em; }
.ficha-g .g-titulo { font-size: clamp(28px, 3.1vw, 46px); }
.ficha-g .sit { margin-top: 2vh; width: min(100%, 540px); }
.ficha-g .der { display: grid; row-gap: 2.4vh; align-content: start; padding-top: .8vh; }
.ficha-num { font-weight: 900; text-transform: uppercase; font-size: clamp(30px, 4.1vw, 60px); line-height: .94; letter-spacing: -.035em; text-wrap: balance; }
.ficha-g .dejo { margin-top: 2.4vh; }
.dejo-g { font-size: clamp(22px, 2.3vw, 33px); line-height: 1.12; letter-spacing: -.02em; max-width: 22em; text-wrap: balance; }
.dejo-g.fina { font-weight: 300; }
/* por qué ahora y el cierre */
.ahora-g { text-align: center; }
.ahora-g .dentro { padding: 16vh var(--m) 16vh; justify-items: center; row-gap: 4.5vh; }
.ahora-g .g-titulo { font-size: clamp(36px, 5.8vw, 92px); max-width: 12em; }
.ahora-g .col { display: grid; row-gap: 1.3em; width: min(100%, 700px); text-align: left; }
.ahora-g .col .g-cuerpo { max-width: none; }
.ahora-g .retrato { margin-top: 3vh; } .ahora-g .retrato img { border-color: var(--blanco); box-shadow: 7px 7px 0 var(--blanco); }
.ahora-g .retrato figcaption { background: var(--blanco); color: var(--negro); } .ahora-g .retrato figcaption span { color: var(--negro); }
.cierre-d { text-align: center; }
.cierre-d .dentro { padding: 18vh var(--m) 16vh; justify-items: center; row-gap: 7vh; }
.cierre-d .g-titulo { font-size: clamp(36px, 6vw, 96px); max-width: 14em; }
@media (max-width: 820px) {
  .paso-g .dentro, .paso-g.par .dentro { grid-template-columns: 1fr; grid-template-areas: "num" "dib" "txt"; padding: 9vh var(--m) 10vh; }
  .dos-g, .ficha-g .dentro { grid-template-columns: 1fr; } .dos-g { gap: 9vh; } .ficha-g .der { padding-top: 4vh; }
  .boleto-g { padding: 26px 22px 22px; }
  .abre-g .dentro { padding-top: 21vh; }
}

/* ---------- hacia el 10 (7 oct): la lectura se mueve como el dibujo, y lo que pidió la mesa de uso ---------- */
/* las tiras caladas se pegan, a los saltos, igual que las del dibujo */
/* la tira no deja hueco: la palabra se lee desde el principio y la tira se le pega encima */
.rev:not(.visto) { background: none !important; color: inherit !important; }
.rev.visto { animation: pegatira calc(.333s * var(--k)) step-end calc(.18s * var(--k)) both; }
/* el rótulo a mano entra primero */
.rotulo-g { opacity: 0; translate: -10px 0; transition: opacity calc(.3s * var(--k)), translate calc(.4s * var(--k)) var(--salida); }
.rotulo-g.visto { opacity: 1; translate: 0 0; }
.rotulo-g .mano { font-size: 38px; --trazo: .13; }
/* los números entran finos y engordan */
.engorda { font-weight: 200 !important; transition: font-weight calc(.42s * var(--k)) steps(4, jump-none) calc(.1s * var(--k)); }
.engorda.visto { font-weight: 900 !important; }
/* el boleto de la propuesta cae torcido y se acomoda; el mail se subraya */
.boleto-g { transition: rotate calc(.5s * var(--k)) var(--salida), translate calc(.5s * var(--k)) var(--salida); rotate: -4deg; translate: 0 26px; }
.boleto-g.visto { rotate: -.8deg; translate: 0 0; }
.mail a { text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 2px; transition: background-size calc(.6s * var(--k)) var(--salida) calc(.3s * var(--k)); padding-bottom: .08em; }
.mail.visto a { background-size: 100% 2px; }
/* la calle con lluvia: las fallas llegan de a una */
[data-lamina="campo"] .tiempo.ver .lista .tira { animation-delay: calc((var(--i, 0) * .42s + .1s) * var(--k)); }
/* el cierre del Inicio: un solo grito; el llamado baja de tamaño */
.cierre-g .escribi .t-enun { font-size: clamp(22px, 2.3vw, 34px); }
/* la costa */
.sit.costa canvas { aspect-ratio: 4 / 3; }
/* uso: foco visible, saltar al contenido, el mail en el menú */
:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; }
.salta { position: fixed; left: 12px; top: -80px; z-index: 200; background: var(--negro); color: var(--blanco); padding: 12px 16px; font: 600 15px var(--sans); text-decoration: none; }
.salta:focus { top: 12px; }
.menu .correo { font: 500 15px var(--mono); letter-spacing: .04em; color: inherit; text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 820px) {
  .rotulo-g .mano { font-size: 25px; }
  /* el botón no tapa lo que se está leyendo: baja al leer hacia abajo y vuelve al subir */
  .boton { transition: translate .3s var(--salida), opacity .3s; }
  .bajando .boton { translate: 0 90px; }
}
@media (prefers-reduced-motion: reduce) {
  .rev, .rotulo-g { opacity: 1; animation: none !important; translate: none; transition: none; }
  .rev:not(.visto) { background: var(--negro) !important; color: var(--blanco) !important; }
  .engorda { font-weight: 900 !important; transition: none; }
  .boleto-g { rotate: -.8deg; translate: none; transition: none; } .mail a { background-size: 100% 2px; transition: none; }
}

/* segunda vuelta (7 oct): las fichas sin marco y con el primer hecho grande; el aviso de la portada, más visible */
.ficha-g .sit { border: 0; width: 100%; }
.ficha-g .der > .g-cuerpo:first-child { font-size: clamp(21px, 2.1vw, 30px); line-height: 1.22; letter-spacing: -.018em; max-width: 24em; }
.puerta-arriba { font-size: clamp(16px, 1.5vw, 22px); }

@keyframes pegatira { 0% { transform: rotate(-6deg) scale(1.14); } 34% { transform: rotate(2deg) scale(1.03); } 67% { transform: rotate(-.6deg); } 100% { transform: none; } }

/* ---------- el movimiento de la lectura, segunda parte (7 oct): todo a los saltos, como el dibujo ---------- */
/* el marcador rojo, el tachado y el subrayado del mail avanzan en cuatro trazos, no en una curva suave */
.ac[class*="m-"] { transition: background-size calc(.42s * var(--k)) steps(5, jump-none) calc(.25s * var(--k)); }
.tacha { transition: background-size calc(.42s * var(--k)) steps(5, jump-none) calc(.25s * var(--k)), color calc(.3s * var(--k)) calc(.6s * var(--k)); }
.mail a { transition: background-size calc(.42s * var(--k)) steps(5, jump-none) calc(.25s * var(--k)); }
.rotulo-g { translate: none; transition: opacity calc(.1s * var(--k)); }
/* «Tres maneras»: las tres columnas se pegan de a una */
.ramas-g > li { opacity: 0; }
.ramas-g.visto > li { animation: pega calc(.333s * var(--k)) step-end both; }
.ramas-g.visto > li:nth-child(2) { animation-delay: calc(.3s * var(--k)); } .ramas-g.visto > li:nth-child(3) { animation-delay: calc(.6s * var(--k)); }
/* las filas de «Cerca de lo que ya tenés» y los créditos de «Quién está detrás» entran renglón por renglón */
.filas-g > li, .af-creditos > li { opacity: 0; }
.filas-g.visto > li, .af-creditos.visto > li { animation: pega calc(.25s * var(--k)) step-end both; animation-delay: calc(var(--n, 0) * .083s * var(--k)); }
.filas-g > li:nth-child(2), .af-creditos > li:nth-child(2) { --n: 1; } .filas-g > li:nth-child(3), .af-creditos > li:nth-child(3) { --n: 2; }
.filas-g > li:nth-child(4), .af-creditos > li:nth-child(4) { --n: 3; } .filas-g > li:nth-child(5) { --n: 4; }
@media (prefers-reduced-motion: reduce) {
  .ramas-g > li, .filas-g > li, .af-creditos > li { opacity: 1; animation: none !important; }
}

/* ---------- cierre del bloque (7 oct) ---------- */
/* el texto de la ronda no tapa el cartel del local */
[data-lamina="calle"] .tiempo .t-sub { max-width: 27em; }
/* los dibujos de las internas, más grandes que el texto */
.paso-g .dentro { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); }
.paso-g.par .dentro { grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); }
.ficha-g .dentro { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); }
.ficha-g .sit { width: 100%; }
/* uso */
.barra button:focus-visible, .barra a:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 820px) {
  .paso-g .dentro, .paso-g.par .dentro, .ficha-g .dentro { grid-template-columns: 1fr; }
}

/* ---------- la escala: siete tamaños y tres pesos (7 oct) ----------
   t1 el afiche de cada tramo · t2 el título · t3 el remate · t4 la frase de apoyo · t5 la bajada · t6 la lectura · mono 13.
   Pesos: 900 (títulos), 400 (lectura), 200 itálica (la otra voz) y 700 sólo para el dato dentro de un párrafo. Aparte, los números enormes. */
:root { --t1: clamp(40px, 5.3vw, 76px); --t2: clamp(30px, 3.9vw, 56px); --t3: clamp(26px, 2.8vw, 40px); --t4: clamp(21px, 2.1vw, 30px); --t5: clamp(19px, 1.7vw, 24px); --t6: clamp(17px, 1.4vw, 20px);
  --p-frase: 900; --p-sub: 400; --f-mono: 13px; }
.g-titulo, .frase-sola .g-titulo, .abre-g .g-titulo, .ciudad-g .g-titulo, .placa-neg .g-titulo, .ahora-g .g-titulo, .cierre-d .g-titulo, .afiche .af-titulo, .ramas-g .nombre, .cierre-g .llamado { font-size: var(--t1); }
.tabla-g .g-titulo, .paso-g .g-titulo, .ficha-num, .titular h1, .tiempo .t-enun, [data-lamina="calle"] .tiempo .t-enun { font-size: var(--t2); }
.ficha-g .g-titulo, .g-remate, .col-g .g-remate, .afiche .af-remate, .placa-g, .boleto-g h2, .cierre-g .llamado .preg, .afiche .af-titulo .ch { font-size: var(--t3); }
.dejo-g, .mail, .dc-propuesta .mail, .cierre-g .mail, .salida a, .tiempo .t-sub.fuerte, .lee.der .tiempo:first-child .t-sub, .cierre-g .escribi .t-enun, .ficha-g .der > .g-cuerpo:first-child { font-size: var(--t4); }
.g-bajada, .afiche .af-bajada, .afiche .af-creditos li, .filas-g .que, .tiempo .t-sub, .cierre-g .invita p { font-size: var(--t5); }
.g-cuerpo, .afiche .af-nota, .ramas-g .frase, .boleto-g li, .puerta-arriba { font-size: var(--t6); }
.t-mono, .rotulo-g, .filas-g .donde, .afiche .af-pie .t-mono { font-size: 13px; }
.afiche .af-titulo .ch { font-weight: 400; }
/* ---------- la costura: una línea a pluma abre cada tramo de lectura, y el texto de la lámina se despega ---------- */
.sec:has(.rotulo-g)::before { content: ""; position: absolute; left: var(--m); right: var(--m); top: 0; height: 2.5px; background: currentColor; transform-origin: 0 50%; scale: 0 1; transition: scale calc(.42s * var(--k)) steps(6, jump-none); }
.sec:has(.rotulo-g.visto)::before { scale: 1 1; }
@keyframes despega { 0% { opacity: 1; transform: none; } 50% { opacity: 1; transform: translate(0, -7px) rotate(2.4deg); } 100% { opacity: 0; transform: translate(0, -7px) rotate(2.4deg); } }
.tiempo.sale { opacity: 1; }
.tiempo.sale .tira { animation: despega calc(.17s * var(--k)) step-end both !important; }
@media (max-width: 820px) {
  :root { --t1: 40px; --t2: 31px; --t3: 26px; --t4: 21px; --t5: 19px; --t6: 17px; }
  .frase-sola .g-titulo { font-size: 34px; }
  .t-mono, .rotulo-g, .filas-g .donde { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .sec:has(.rotulo-g)::before { scale: 1 1; transition: none; } .tiempo.sale { opacity: 0; } }

/* ---------- el pie: los créditos (7 oct) ----------
   Una cinta roja inclinada que corre, el mail a tamaño de afiche, un bloque de créditos como el de un póster de cine
   (páginas, las dos ciudades con su hora, legales, idioma) y el nombre a todo el ancho. */
.creditos { padding: 0 0 4vh; overflow: hidden; }
.cr-cinta { margin: 0; padding: 7vh 0 6vh; }
.cr-cinta .banda { background: var(--rojo); color: var(--negro); font-weight: 500; }
.cr-cinta .banda .tira i { background: var(--negro); }
.cr-mail { padding: 7vh var(--m) 9vh; display: grid; row-gap: 3vh; justify-items: start; }
.cr-correo { font-weight: 900; font-size: clamp(34px, 8.1vw, 132px); line-height: .9; letter-spacing: -.045em; color: var(--blanco); text-decoration: none; background: linear-gradient(var(--rojo), var(--rojo)) no-repeat 0 92% / 0% .09em; transition: background-size calc(.42s * var(--k)) steps(5, jump-none); padding-bottom: .06em; }
.cr-correo:hover, .cr-correo:focus-visible { background-size: 100% .09em; }
.cr-dos { font-size: var(--t5); line-height: 1.34; color: var(--blanco); }
.cr-bloque { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr 1fr; gap: 3vw; margin: 0 var(--m); padding: 5vh 0 6vh; border-top: 2px solid var(--blanco); border-bottom: 2px solid var(--blanco); }
.cr-bloque > div > .t-mono { color: #9a9a9a; margin-bottom: 1.4em; }
.cr-bloque ul { display: grid; row-gap: .5em; }
.cr-bloque a, .cr-bloque li > span:first-child, .cr-idioma button { font-weight: 900; font-size: var(--t4); line-height: 1.1; letter-spacing: -.025em; color: var(--blanco); text-decoration: none; }
.cr-bloque a:hover, .cr-idioma button:hover { font-style: italic; }
.cr-bloque a[aria-current]::after { content: ""; display: inline-block; width: .3em; height: .3em; margin-left: .25em; border-radius: 50%; background: var(--rojo); vertical-align: .2em; }
.cr-horas li { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; max-width: 17em; }
.cr-horas .vivo { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rojo); margin-right: .6em; animation: late 1.2s steps(2, jump-none) infinite; }
@keyframes late { 50% { opacity: .25; } }
.cr-idioma { display: grid; row-gap: .5em; justify-items: start; }
.cr-idioma button { all: unset; cursor: pointer; font-weight: 900; font-size: var(--t4); line-height: 1.1; letter-spacing: -.025em; color: #6f6f6f; }
.cr-idioma button[aria-pressed="true"] { color: var(--blanco); }
.cr-idioma button:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; }
.cr-creditos { margin: 5vh var(--m) 0; text-align: center; color: #c2c2c2; line-height: 2; letter-spacing: .16em; text-wrap: balance; }
.cr-creditos b { color: var(--blanco); font-weight: 500; }
.creditos .pie { margin: 7vh var(--m) 0; color: var(--blanco); }
.cr-firma { display: flex; justify-content: space-between; }
/* ---------- las páginas legales ---------- */
.legal .dentro { padding: 20vh var(--m) 14vh; row-gap: 0; }
.legal .g-titulo { margin-top: 4vh; }
.legal .g-bajada { margin-top: 3vh; max-width: 30em; }
.lg-lista { margin-top: 9vh; border-top: 2px solid var(--negro); }
.lg-item { display: grid; grid-template-columns: minmax(12em, 30%) 1fr; column-gap: 4vw; padding: 3.4vh 0 3.6vh; border-bottom: 1px solid var(--negro); align-items: baseline; }
.lg-item h2 { font-weight: 900; font-size: var(--t4); line-height: 1.1; letter-spacing: -.025em; }
.lg-item p { font-size: var(--t6); line-height: 1.5; max-width: 38em; }
.lg-item a { text-underline-offset: .18em; }
.lg-fecha { margin-top: 5vh; }
@media (max-width: 820px) {
  .cr-bloque { grid-template-columns: 1fr 1fr; row-gap: 6vh; }
  .lg-item { grid-template-columns: 1fr; row-gap: .6em; }
  .cr-firma { flex-direction: column; gap: .6em; }
}
@media (prefers-reduced-motion: reduce) { .cr-horas .vivo { animation: none; } }

/* ---------- el final de página, segunda versión (7 oct): un solo cierre, callado ----------
   De los pies de referencia: una sola invitación (ya está en el cierre de cada página), servicio en letra chica,
   el nombre gigante al fondo y una fila mínima de legales. Lo nuestro: la ciudad de noche, que se enciende al llegar. */
.fin { padding: 0 0 26px; }
.fin-ciudad.lamina.pasa { border: 0; background: var(--negro); }
.fin-ciudad .fija { height: min(52vh, 38vw); }
.fin-salidas { display: grid; grid-template-columns: 1fr 1fr; margin: 0 var(--m); border-top: 1.5px solid var(--blanco); border-bottom: 1.5px solid var(--blanco); }
.fin-salidas a { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "que flecha" "donde flecha"; row-gap: 10px; align-items: end; padding: 30px 0 32px; text-decoration: none; color: var(--blanco); }
.fin-salidas a + a { border-left: 1.5px solid var(--blanco); padding-left: 3vw; }
.fin-salidas .t-mono { grid-area: que; color: #9a9a9a; }
.fin-salidas b { grid-area: donde; font-weight: 900; font-size: var(--t3); line-height: 1; letter-spacing: -.03em; }
.fin-salidas i { grid-area: flecha; font-style: normal; display: grid; place-items: center; width: 52px; height: 52px; border: 1.5px solid var(--blanco); margin-right: 3vw; }
.fin-salidas a + a i { margin-right: 0; }
.fin-salidas a:hover i, .fin-salidas a:focus-visible i { background: var(--blanco); color: var(--negro); }
.fin-salidas a:hover b { font-style: italic; }
.fin-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3vw; margin: 0 var(--m); padding: 34px 0 9vh; }
.fin-cols > div > .t-mono { color: #9a9a9a; margin-bottom: 14px; font-size: 12px; }
.fin-cols ul, .fin-idioma { display: grid; row-gap: 7px; justify-items: start; }
.fin-cols a, .fin-cols li, .fin-idioma button { font-weight: 400; font-size: 16px; line-height: 1.3; color: var(--blanco); text-decoration: none; }
.fin-cols a:hover, .fin-idioma button:hover { text-decoration: underline; text-underline-offset: .2em; }
.fin-cols a[aria-current]::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-radius: 50%; background: var(--rojo); vertical-align: 2px; }
.fin-horas li { display: flex; gap: 1.2em; align-items: baseline; }
.fin-horas .t-mono { font-size: 12px; color: #c2c2c2; }
.fin-horas .vivo { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--rojo); margin-right: 7px; animation: late 1.2s steps(2, jump-none) infinite; }
.fin-idioma button { all: unset; cursor: pointer; font-size: 16px; line-height: 1.3; color: #8a8a8a; }
.fin-idioma button[aria-pressed="true"] { color: var(--blanco); }
.fin-idioma button:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; }
.fin-marca { display: block; width: calc(100% - 2 * var(--m)); margin: 0 var(--m); filter: invert(1); }
.fin-legal { display: flex; justify-content: space-between; gap: 2em; margin: 22px var(--m) 0; color: #9a9a9a; font-size: 11px; }
@media (max-width: 820px) {
  .fin-ciudad .fija { height: 64vw; }
  .fin-salidas { grid-template-columns: 1fr; } .fin-salidas a + a { border-left: 0; border-top: 1.5px solid var(--blanco); padding-left: 0; } .fin-salidas i { margin-right: 0; width: 44px; height: 44px; }
  .fin-cols { grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .fin-legal { flex-direction: column; gap: 6px; }
}

/* ---------- menos regla, más aire (7 oct, por pedido del owner) ----------
   Fuera los filetes que separaban todo: las cosas se ordenan por tamaño, peso y espacio. Y los espacios dejan de ser iguales:
   cada tramo respira distinto según lo que dice (una frase sola pide mucho; una tabla que sigue a un dibujo, poco). */
.sec:has(.rotulo-g)::before { display: none; }
.lamina.pasa { border: 0; }
.filas-g, .filas-g li, .lg-lista, .lg-item, .boleto-g li, .boleto-g .mail, .ficha-g .dentro, .salida, .salida a + a, .dc-propuesta .mail { border: 0; }
.liso .sit, .paso-g .sit, .ciudad-g .sit, .ramas-g .sit { border: 0; }
.filas-g li { padding: .5em 0 .55em; }
.boleto-g li { padding: .45em 0; }
.lg-item { padding: 2.4vh 0 2.6vh; }
/* los espacios, uno por tramo */
.frase-sola .dentro { padding: 21vh var(--m) 17vh; }
.tabla-g .dentro { padding: 8vh var(--m) 19vh; } .filas-g { margin-top: 6vh; }
.tres-g .dentro { padding: 12vh var(--m) 10vh; } .tres-g .g-remate { margin-top: 8vh; }
.afiche .dentro { padding: 19vh var(--m) 12vh; }
.cierre-g .dentro { padding: 13vh var(--m) 7vh; row-gap: 4.4vh; }
.ficha-g .dentro { padding: 4vh 0 13vh; }
[data-cap]:nth-child(3n) > .ficha-g .dentro { padding: 9vh 0 7vh; }
[data-cap]:nth-child(3n+1) > .ficha-g .dentro { padding-left: 7vw; }
.paso-g .dentro { padding: 10vh var(--m) 15vh; }
.paso-g.par .dentro { padding: 16vh var(--m) 9vh; }
.col-g .dentro { padding: 7vh var(--m) 16vh; }
.placa-neg .dentro { padding: 23vh var(--m) 19vh; }
.legal .dentro { padding: 19vh var(--m) 10vh; } .lg-lista { margin-top: 7vh; }
/* ---------- el pie, fino ---------- */
.fino { padding: 0 0 22px; }
.fino .fin-ciudad .fija { height: min(46vh, 34vw); }
.fino-cuerpo { display: grid; grid-template-columns: minmax(0, 2.3fr) repeat(3, minmax(0, 1fr)); column-gap: 3vw; align-items: start; padding: 5vh var(--m) 11vh; }
.fino-izq { display: grid; justify-items: start; row-gap: 0; }
.fino-marca img { display: block; width: 156px; height: auto; filter: invert(1); } /* 23 oct: THE OPENING sin corchetes */
.fino-mail { margin-top: 26px; font-weight: 300; font-size: clamp(22px, 2.3vw, 34px); line-height: 1.1; letter-spacing: -.02em; color: var(--blanco); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.fino-mail:hover { font-style: italic; }
.fino-sigue { margin-top: 12px; font-weight: 400; font-size: 15px; color: #a8a8a8; text-decoration: none; }
.fino-sigue:hover { color: var(--blanco); }
.fino-col { display: grid; row-gap: 6px; justify-items: start; padding-top: 4px; }
.fino-col li, .fino-col a { font-weight: 400; font-size: 15px; line-height: 1.35; color: #d6d6d6; text-decoration: none; }
.fino-col a:hover { color: var(--blanco); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.fino-col a[aria-current] { color: var(--blanco); }
.fino-horas .t-mono { font-size: 11px; color: #8f8f8f; margin-left: .5em; letter-spacing: .08em; }
.fino-idioma { margin-top: 12px; display: flex; gap: 12px; }
.fino-idioma button { all: unset; cursor: pointer; font: 500 11px var(--mono); letter-spacing: .14em; color: #7d7d7d; }
.fino-idioma button[aria-pressed="true"] { color: var(--blanco); }
.fino-idioma button:focus-visible { outline: 2px solid var(--rojo); outline-offset: 3px; }
.fino-legal { display: flex; justify-content: space-between; gap: 2em; padding: 0 var(--m); font-weight: 400; font-size: 12px; color: #8f8f8f; }
@media (max-width: 820px) {
  .fino .fin-ciudad .fija { height: 60vw; }
  .fino-cuerpo { grid-template-columns: 1fr 1fr; row-gap: 34px; padding-bottom: 8vh; } .fino-izq { grid-column: 1 / -1; margin-bottom: 8px; }
  .fino-legal { flex-direction: column; gap: 4px; }
  [data-cap]:nth-child(3n+1) > .ficha-g .dentro { padding-left: 0; }
}

/* ---------- la tira invertida y torcida, sólo donde pega (7 oct) ----------
   Era el mismo gesto once veces en el Inicio. Queda en tres lugares: el título de la portada, la idea («El público ya existe…»)
   y «algo entre manos». En el resto de las láminas el título va en tiras de papel derechas, sin invertir; el cartel «SALIR AL AIRE»
   va derecho, como un cartel de estudio; la etiqueta de arriba, derecha. */
.lamina:not([data-lamina="portada"]):not([data-lamina="calle"]) .tiempo .t-enun .tira { rotate: 0deg; margin-left: 0; }
.lamina:not([data-lamina="portada"]):not([data-lamina="calle"]):not(.oscura) .tiempo .tira.it { background: var(--blanco); color: var(--negro); }
.lamina.oscura .tiempo .tira.it { background: var(--negro); color: var(--blanco); }
.lamina.oscura .tiempo .t-enun .tira { background: none; padding-left: 0; }
.afiche .af-remate .rev { rotate: 0deg; }
.puerta-arriba { rotate: 0deg; }

/* Brooklyn de noche (Inicio 03): el dibujo llena todo el cuadro, así que el título también lleva su tira negra */
.lamina.oscura[data-lamina="brooklynNoche"] .tiempo .t-enun .tira, .lamina.oscura[data-lamina="vista"] .tiempo .t-enun .tira { background: var(--negro); padding-left: .26em; }

/* Tres maneras, con sus nombres nuevos (Estrategia / Idea / Producción): tres columnas iguales y la palabra a un tamaño que entre */
.ramas-g { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ramas-g .nombre { font-size: clamp(34px, 4.2vw, 66px); }
@media (max-width: 760px) { .ramas-g { grid-template-columns: minmax(0, 1fr); } }

/* ---------- correcciones de la auditoría del 7 oct (noche) ---------- */
/* la lluvia: el texto a la derecha, sobre los pisos altos; a la izquierda tapaba el cartel del cine, donde pasan dos de los efectos */
@media (min-width: 821px) {
  [data-lamina="campo"] .lee, [data-lamina="campo"] .sobre .etq { left: calc(100% - var(--m) - min(40vw, 600px)); }
  [data-lamina="campo"] .lee { width: min(40vw, 600px); }
}

/* ---------- la prueba, más visible (8 oct) ---------- */
/* Quién está detrás: cada crédito abre con su hecho en grande, como el reparto de un afiche */
.afiche .af-creditos { row-gap: 1.25em; margin-top: 5vh; }
.afiche .af-creditos .cab { display: block; font-weight: 900; font-size: 1.62em; line-height: 1; letter-spacing: -.032em; margin: .1em 0 .12em; text-wrap: balance; }
/* Cómo trabajamos: el hecho del registro al pie de cada paso */
.dato-g { display: grid; row-gap: .5em; justify-items: start; margin-top: 3.4vh; max-width: 31em; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.42; }
.dato-g .t-mono { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; background: var(--rojo); color: var(--negro); padding: .3em .6em .26em; }

/* ---------- el afiche (20 oct 2026) ---------- */
html.hueso { --blanco: #F5F3EE; --gris: #E9E7E1; --g3: #d6d4ce; --crema: #FCFBF8; }
html.crema { --negro: #161310; --blanco: #ECE2CB; --g1: #5e544a; --g2: #8f8373; --g3: #c9bb9f; --gris: #DDD0B2; --crema: #F6EFDF; --rojo: #D8291D; }
html.imprenta { --negro: #17191E; --blanco: #FFFFFF; --g1: #5f6166; --g2: #8A8C90; --g3: #d0d1d3; --gris: #EDEDED; --crema: #FFFFFF; --rojo: #FE0000; } /* 23 oct: el rojo de la referencia del dueño (antes bermellón #E2452B) */
html.crema .campo-blanco { --tenue: #4d443b; } html.crema .campo-gris { --tenue: #4a4138; } html.crema .campo-negro { --tenue: #c9bb9f; }

/* sitio final (22 oct): los botones del copy, y el lema del pie */
.enlace-copy { color: inherit; text-decoration: none; }
.enlace-copy:hover { text-decoration: underline; text-decoration-thickness: 2px; }
/* 29 oct: el mail grande del Primer paso no entraba en el celular (428 px en una pantalla de 390): se achica para entrar */
@media (max-width: 820px) { .t-enun .enlace-copy { font-size: min(1em, 7.2vw); } }
.fino-lema { text-transform: uppercase; letter-spacing: .04em; }

/* el fundador, el registro y el archivo (Dossier, después de los capítulos) */
.fx { background: var(--negro); color: var(--blanco); padding: 16vh var(--m) 14vh; }
.fx + .fx, div[data-cap] + div[data-cap] > .fx { padding-top: 6vh; }
.fx .dentro { max-width: 1180px; margin: 0 auto; }
.fx-etq { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 28px; }
.fx-etq span { background: var(--blanco); color: var(--negro); padding: .5em .8em; }
.fx-tit { margin: 0 0 22px; font-size: clamp(34px, 5.2vw, 84px); line-height: .98; font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; }
.fx-tit span { background: var(--blanco); color: var(--negro); padding: .06em .22em .1em; display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; rotate: -1.2deg; }
.fx-tit { rotate: -1.2deg; transform-origin: 0 50%; }
.fx-cols { display: grid; grid-template-columns: minmax(240px, 5fr) 7fr; gap: clamp(28px, 5vw, 80px); align-items: end; }
.fx-foto { aspect-ratio: 4 / 5; border: 2px dashed rgba(255,255,255,.35); display: grid; place-items: center; }
.fx-pend { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.fx-pend i, .fx-pend-chico { font-style: normal; color: var(--rojo, #e3262b); }
.fx-pend-chico { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-left: 12px; }
.fx-rol { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 26px; }
.fx-txt { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.5; max-width: 34em; margin: 0 0 16px; opacity: .88; }
.fx-txt.ancho { max-width: 44em; }
.fx-lema { font-style: italic; font-size: clamp(19px, 1.6vw, 25px); margin: 26px 0 0; }
.fx-logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 36px 0 14px; }
.fx-logos span { aspect-ratio: 3 / 2; border: 1px dashed rgba(255,255,255,.28); }
.fx-nota .fx-pend { flex-direction: row; gap: 12px; }
.fx-botones { margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.fx-boton { border: 2px solid var(--blanco); color: var(--blanco); padding: .9em 1.3em; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.fx-boton:hover { background: var(--blanco); color: var(--negro); }
@media (max-width: 760px) { .fx-cols { grid-template-columns: 1fr; } .fx-foto { max-width: 260px; } .fx-logos { grid-template-columns: repeat(3, 1fr); } }

/* ---------- títulos de póster y de revista (22 oct) ----------
   El titular de cada capítulo va a escala de tapa: enorme, apretado, en tiras que se pisan; el remate (lo que el copy marca
   en negrita) sube un escalón; lo que se lee queda en su columna angosta, para que el contraste de tamaños haga el golpe. */
.lee { width: min(88vw, 1380px); }
.tiempo .t-enun.cab { font-size: clamp(50px, 6.6vw, 122px); line-height: .82; letter-spacing: -.055em; max-width: none; margin: 0 0 .1em; }
.tiempo .t-enun.cab .tira { white-space: nowrap; }
.tiempo .t-enun.cab .tira { padding: .04em .14em .07em; }
.tiempo .t-enun.cab .tira + .tira { margin-top: -.02em; margin-left: .5em; }
.tiempo .t-enun.cab .tira:nth-child(3n) { margin-left: .18em; }
.tiempo .t-enun:not(.cab) { font-size: var(--t1); line-height: .9; letter-spacing: -.045em; max-width: 12em; }
.tiempo .t-sub, .tiempo .t-mono { max-width: min(46vw, 700px); }
.titular h1 { font-size: clamp(52px, 6.8vw, 124px); line-height: .84; letter-spacing: -.055em; max-width: none; }
.titular h1 .tira { padding: .04em .14em .07em; }
@media (max-width: 760px) {
  .lee { width: auto; }
  .tiempo .t-enun.cab { font-size: 46px; } .tiempo .t-enun:not(.cab) { font-size: 34px; }
  .tiempo .t-sub, .tiempo .t-mono { max-width: none; }
  .titular h1 { font-size: 42px; }
}

/* los lugares que esperan la foto y los logos: armados, sin avisos */
.fx-foto { position: relative; background: #141414; border: 0; overflow: hidden; }
.fx-foto img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.08); }
.fx-foto.sin .fx-vacio { font-size: clamp(40px, 6vw, 88px); font-weight: 500; color: #2c2c2c; letter-spacing: .02em; }
.fx-logos span { border: 0; background: #121212; display: grid; place-items: center; padding: 14%; }
.fx-logos img { max-width: 100%; max-height: 100%; filter: grayscale(1) invert(1); opacity: .86; }
.fx-boton.apagado { opacity: .45; cursor: default; }
@media (max-width: 760px) {
  .tiempo .t-enun.cab { font-size: 36px; } .tiempo .t-enun.cab .tira { white-space: normal; }
}

/* auditoría del 22 oct: el campo nuevo deja el titular arriba a la izquierda, como las demás láminas (a la derecha se cortaba);
   y el titular de cada capítulo va siempre en mayúsculas, aunque sea largo */
@media (min-width: 821px) {
  [data-lamina="campo"] .lee, [data-lamina="campo"] .sobre .etq { left: var(--m); }
  [data-lamina="campo"] .lee { width: min(88vw, 1380px); }
}
.tiempo .t-enun.cab { text-transform: uppercase; font-weight: var(--p-titulo); }
@media (max-width: 760px) { .tiempo .t-enun.cab { font-size: 33px; line-height: .94; } .tiempo .t-enun.cab .tira + .tira { margin-left: .3em; } }
@media (max-width: 760px) { .tiempo .t-enun.cab { font-size: clamp(26px, 8vw, 33px); line-height: 1; } .tiempo .t-enun.cab .tira { white-space: nowrap; } .tiempo .t-enun.cab .tira + .tira { margin-left: .15em; } }

/* bilingüe (22 oct): en castellano el titular de portada es más largo; cada renglón en una sola línea y el texto de la derecha más arriba */
.titular h1 .tira { white-space: nowrap; }
.titular h1 { font-size: clamp(44px, 5.6vw, 104px); }
@media (min-width: 761px) { .lee.der { bottom: calc(7vh + 17.5em); } }
@media (max-width: 760px) { .titular h1 { font-size: clamp(30px, 9vw, 40px); } }
@media (max-width: 760px) { .titular h1 .tira { white-space: normal; } .titular h1 { font-size: clamp(28px, 8.4vw, 38px); } }

/* lectura fluida (22 oct, «la navegación se siente trabada»): el texto ya no entra a los saltos ni tiembla; cada tira entra
   suave, de a una, deslizándose desde abajo, y queda quieta para leer */
@keyframes entraSuave { from { opacity: 0; transform: translateY(14px) rotate(var(--r, 0deg)); } to { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); } }
.tiempo.ver .tira, .tiempo.ver .t-enun .tira, .titular h1 .tira { animation: entraSuave calc(.42s * var(--k)) cubic-bezier(.2, .7, .2, 1) calc((var(--i, 0) * .06s) * var(--k)) both; }
.tiempo .t-enun .tira, .titular h1 .tira { rotate: none; transform-origin: 0 50%; }

/* qué entregamos (22 oct): la franja concreta del Home, después de la portada */
.que-hacemos { background: var(--negro); color: var(--blanco); padding: 13vh var(--m) 12vh; position: relative; z-index: 2; }
.qh-dentro { max-width: 1400px; margin: 0 auto; }
.qh-etq { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 4vh; }
.qh-etq span { background: var(--rojo); color: var(--blanco); padding: .5em .8em; }
.qh-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.qh-pasos li { border-top: 2px solid var(--blanco); padding: 18px 18px 0 0; position: relative; }
.qh-pasos li + li::before { content: "→"; position: absolute; left: -.9em; top: .5em; font-size: clamp(28px, 3.2vw, 56px); font-weight: 900; color: var(--rojo); }
.qh-n { display: block; font-size: 12px; letter-spacing: .14em; opacity: .6; margin-bottom: 10px; }
.qh-p { display: block; font-weight: 900; text-transform: uppercase; letter-spacing: -.045em; line-height: .88; font-size: clamp(34px, 5.2vw, 96px); }
.qh-cosas { margin: 7vh 0 0; font-size: clamp(19px, 1.9vw, 30px); font-weight: 700; line-height: 1.35; max-width: 34em; }
.qh-nota { margin: 2.4vh 0 0; font-size: clamp(16px, 1.25vw, 20px); opacity: .7; max-width: 36em; }
@media (max-width: 760px) {
  .qh-pasos { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .qh-pasos li + li::before { display: none; }
  .qh-p { font-size: 38px; }
}
.qh-pasos { grid-template-columns: repeat(4, auto); column-gap: 3.2vw; justify-content: start; }
.qh-pasos li { padding-right: 0; }
.qh-pasos li + li::before { left: -2.6vw; font-size: clamp(22px, 2.4vw, 40px); top: 1.05em; }
.qh-p { font-size: clamp(28px, 4vw, 72px); }
@media (max-width: 760px) { .qh-pasos { grid-template-columns: 1fr; row-gap: 14px; } .qh-p { font-size: 40px; } }

/* en la práctica (22 oct): reemplaza la franja «qué entregamos»; editorial, breve, por debajo del manifiesto en jerarquía */
.en-practica { background: var(--negro); color: var(--blanco); padding: 11vh var(--m) 10vh; position: relative; z-index: 2; }
.ep-dentro { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 5vw; align-items: end; }
.ep-etq { grid-column: 1 / -1; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 3.5vh; opacity: .75; }
.ep-tit { margin: 0; font-weight: 900; text-transform: uppercase; letter-spacing: -.04em; line-height: .92; font-size: clamp(30px, 3.6vw, 60px); }
.ep-txt { margin: 0; font-size: clamp(17px, 1.3vw, 21px); line-height: 1.5; opacity: .88; }
@media (max-width: 760px) { .ep-dentro { grid-template-columns: 1fr; row-gap: 22px; } .ep-tit { font-size: 34px; } }

/* la marquesina de los terrenos (22 oct): más grande y con peso de afiche, rojo detrás y franja negra encima */
.terrenos { padding: 7vh 0; }
.terrenos .banda { font: 900 clamp(26px, 3.4vw, 58px)/1 "Libre Franklin", sans-serif; letter-spacing: -.02em; padding: 22px 0 20px; background: var(--negro);
  box-shadow: 0 0 0 0 transparent, 0 14px 0 0 var(--rojo); }
.terrenos .banda .tira span { margin: 0 .55em; }
.terrenos .banda .tira i { width: .32em; height: .32em; vertical-align: .2em; background: var(--rojo); border-radius: 0; transform: rotate(45deg); }
@media (max-width: 760px) { .terrenos .banda { font-size: 24px; padding: 14px 0 12px; box-shadow: 0 8px 0 0 var(--rojo); } }

/* 22 oct: el menú entra entero en la pantalla del celular, sin scroll: todo se mide con el alto de la pantalla (dvh).
   La frase de la marca, la capacidad en su tira roja y las cinco páginas, cada una con su nombre en un renglón y lo que hay. */
.menu { overflow: hidden; justify-content: flex-start; padding: 80px var(--m) 2dvh; gap: 1.8dvh; }
.mn-etq { margin-bottom: .8dvh; font-size: 10px; }
.mn-lema { font-size: min(6.2vw, 3.1dvh); margin-bottom: 1.4dvh; gap: .2em; line-height: 1; }
.mn-cap span { display: none; }
.mn-cap b { font-size: min(3.6vw, 1.9dvh); }
.mn-lista a { grid-template-columns: 1.9em 1fr; column-gap: 6px; padding: .9dvh 0 1dvh; }
.mn-n { font-size: 10px; }
.mn-nom { font-size: min(7.4vw, 3.4dvh); white-space: nowrap; }
.mn-de { font-size: min(13px, 1.65dvh); line-height: 1.28; margin-top: .3dvh; }
.mn-pie { margin-top: auto; }
.mn-pie .correo { font-size: min(14px, 1.75dvh); }
.mn-ciudades { font-size: min(10.5px, 1.4dvh); }
@media (max-height: 700px) { .mn-etq { display: none; } }
/* 22 oct: sin filetes ni números en el menú («las líneas y números le restan»): las páginas se separan sólo por el espacio */
.mn-lista, .mn-lista li { border: 0; }
.mn-n { display: none; }
.mn-lista a { grid-template-columns: 1fr; padding: 1.1dvh 0 1.2dvh; }
.mn-de { grid-column: 1; }

/* 23 oct: el menú abre con THE OPENING sin corchetes y el dato «Strategic Bureau» al lado */
.mn-etq { display: flex; align-items: center; gap: 12px; }
.mn-marca { height: min(15px, 1.9dvh); width: auto; filter: invert(1); }
.mn-etq .t-mono { font-size: 10px; letter-spacing: .14em; color: var(--g2); }
@media (max-height: 700px) { .mn-etq { display: flex; } }


/* ---------- prueba «tres mundos» (23 oct, ?mundos) ----------
   El afiche (la ciudad del pie), el póster (rojo puro, texturas, tipo gigante) y la animación, juntos: la ciudad sigue animada,
   pero impresa como serigrafía — lo oscuro del cielo en negro, la ciudad en rojo, las luces en papel — con las texturas del póster encima. */
.mundos-def, .mundos-tex, .mundos-tipo { display: none; }
/* (la ciudad del pie ya no se filtra: el rojo es el fondo del póster, la ciudad se ve como es) */
html.mundos .fin-ciudad.lamina.pasa { position: relative; background: #FE0000; padding-top: min(34vh, 24vw); overflow: hidden; }
html.mundos .fin-ciudad::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background: linear-gradient(rgba(0,0,0,.3), transparent 30%),
              repeating-linear-gradient(0deg, rgba(0,0,0,.07) 0 1px, transparent 1px 4px),
              repeating-conic-gradient(from -90deg at 50% 62%, rgba(0,0,0,.075) 0 1.4deg, transparent 1.4deg 6deg); }
html.mundos .mundos-tipo { display: block; position: absolute; left: 0; right: 0; top: min(5vh, 3.4vw); margin: 0; text-align: center; pointer-events: none; z-index: 2;
  font: 900 min(7.2vw, 10.5vh)/.86 var(--sans); text-transform: uppercase; letter-spacing: -.055em; color: #000; }
html.mundos .mundos-tipo span { display: block; }
@media (max-width: 700px) { html.mundos .mundos-tipo { font-size: 9.6vw; } html.mundos .fin-ciudad.lamina.pasa { padding-top: 40vw; } }
/* 23 oct: el atardecer rojo sobre escenas enteras se sacó («cambiaste todo a rojo y no se ve nada… el fondo rojo está bien, no lo uses siempre»): el rojo queda sólo de fondo, en el pie. */

/* 23 oct: «el tamaño de la tipografía no se lee bien, queda muy chica con respecto a las animaciones».
   El texto de escena sube un escalón (de ~25 a ~32 px en compu), con más peso, y la columna se ensancha para que no se parta de más. */
.lee { width: min(54vw, 880px); }
.tiempo .t-sub { font-weight: 500; font-size: clamp(22px, 2.2vw, 34px); line-height: 1.2; letter-spacing: -.016em; }
.tiempo .t-sub.fuerte, .lee.der .tiempo:first-child .t-sub { font-weight: 900; font-size: clamp(26px, 2.75vw, 42px); line-height: 1.08; letter-spacing: -.028em; }
[data-lamina="calle"] .tiempo .t-sub { max-width: 30em; }
@media (max-width: 700px) {

  .tiempo .t-sub { font-size: 21px; } .tiempo .t-sub.fuerte, .lee.der .tiempo:first-child .t-sub { font-size: 25px; }
}

/* 23 oct: el botón «Dar el primer paso» en el lenguaje del póster (el pie rojo que el dueño aprobó): una tira roja, letra negra
   gruesa, barrido fino como el [TO] del 26 jun, apenas inclinada como las tiras del sitio. Sin círculo ni texto que gira. */
.boton, .pasada .boton { width: auto; height: auto; border: 0; border-radius: 0; padding: 13px 18px 12px; grid-auto-flow: column; column-gap: 10px;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 1px, transparent 1px 4px), #FE0000; rotate: -1.2deg; box-shadow: 0 0 0 1.5px #000; }
.boton svg.gira, .boton .punto { display: none; }
.boton .dice, .pasada .boton .dice { display: block; font: 900 15px/1 var(--sans); text-transform: uppercase; letter-spacing: -.01em; color: #000; }
.boton .flecha, .pasada .boton .flecha { display: block; color: #000; font: 900 17px/1 var(--sans); }
.boton:hover { scale: 1; rotate: 0deg; background-color: #000; } .boton:hover .dice, .boton:hover .flecha { color: #FE0000; }
@media (max-width: 700px) { .boton, .pasada .boton { width: auto; height: auto; padding: 10px 13px 9px; } .boton .dice, .pasada .boton .dice { display: block; font-size: 12px; } .boton .flecha, .pasada .boton .flecha { display: block; font-size: 14px; } }

/* 23 oct: «en toda la página se pierde el texto, queda chico, fino». Toda la escala sube un escalón y nada queda en peso fino:
   lectura 19–22 px a peso 500, apoyo 17 px, frases 24–34 px a 700. La mono (IBM Plex Mono) de rótulos, contadores y horas
   pasa de 11–13 px a 14–15 px, para que se vea como parte del diseño y no como letra chica. */
:root { --f-sub: clamp(24px, 2.3vw, 34px); --f-fila: clamp(21px, 1.8vw, 26px); --f-cuerpo: clamp(19px, 1.5vw, 22px); --f-sec: 17px; --f-mono: 14px; --p-sub: 700; }
.t-cuerpo, .t-sec, .mt-titulo, .mt-frase, .mt-rotor .rotor.todas > li { font-weight: 500; }
.t-sec { color: inherit; opacity: .78; }
.t-mono, .rotulo-g, .filas-g .donde, .afiche .af-pie .t-mono { font-size: 14px; }
.sobre .etq .tira, .titular .etq .tira { font-size: 14px; }
.fino-col li, .fino-col a, .fino-sigue { font-size: 17px; font-weight: 500; }
.fino-horas .t-mono { font-size: 13px; }
.ep-txt { font-size: var(--f-cuerpo); font-weight: 500; }
.mn-de { font-weight: 500; }
@media (max-width: 700px) { .t-mono, .sobre .etq .tira, .titular .etq .tira { font-size: 12.5px; } .tiempo .t-sub { font-size: 22px; } }
/* los tamaños fijos chicos que no tomaban la escala: rótulos mono a 13–14 px, letra legal a 14 px, nada por debajo */
.fx-etq, .fx-pend, .fx-pend-chico, .qh-etq, .qh-n, .ep-etq, .dato-g .t-mono, .fin-cols > div > .t-mono, .fin-horas .t-mono, .fino-idioma button, .rotulo-g, .filas-g .donde, .afiche .af-pie .t-mono { font-size: 13px; }
.fx-rol, .fx-boton { font-size: 14px; }
.fin-legal, .fino-legal { font-size: 14px; font-weight: 500; color: #b5b5b5; }
.fx-txt { font-weight: 500; opacity: 1; font-size: clamp(18px, 1.45vw, 22px); }
.mn-etq, .mn-etq .t-mono, .mn-ciudades { font-size: 12px; } .mn-de { font-size: min(14px, 1.75dvh); }
.puerta-arriba { font-size: 14px; }
.fino-mail { font-weight: 600 !important; } /* 23 oct: el mail del pie no en peso fino */

/* 28 oct, «el hero no está fluido, desde el celu se traba y pasan los textos como si no existieran»: en el celular el titular
   queda fijo y cada texto de abajo tiene más recorrido (la portada mide un 45 % más), con letra un poco menor para que entre entero. */
@media (max-width: 700px) {
  .lamina[data-lamina="portada"] { height: calc(var(--alto, 300) * var(--vh) * 1.45); }
  [data-lamina="portada"] .tiempo .t-sub { font-size: 19px; line-height: 1.22; }
  [data-lamina="portada"] .tiempo .t-sub.fuerte, [data-lamina="portada"] .lee.der .tiempo:first-child .t-sub { font-size: 21px; }
  [data-lamina="portada"] .titular .capacidad span { font-size: 13px; }
}

/* 28 oct: «hay muchos textos abajo de los dibujos que no ocupan el ancho de la pantalla, más en móvil… se leería mejor más grande,
   más cuerpo». En el celular el texto de escena va de margen a margen (la regla de compu, 54vw, se colaba) y un escalón más grande. */
@media (max-width: 700px) {
  .lee, .lee.der, [data-lamina="calle"] .lee { width: auto !important; left: auto; right: auto; }
  [data-lamina="portada"] .lee.der { margin-left: 0; left: var(--m); right: auto; width: calc(100vw - 2 * var(--m)) !important; }
  [data-lamina="portada"] .lee.der .tiempo:first-child .t-sub { font-size: 22px; }
  .tiempo .t-sub, [data-lamina="calle"] .tiempo .t-sub { max-width: none; font-size: 24px; line-height: 1.22; font-weight: 500; }
  .tiempo .t-sub.fuerte, .lee.der .tiempo:first-child .t-sub { font-size: 27px; }
  .lee .tira { max-width: none; }
}

/* 28 oct, «no se entiende por qué cambia sólo el texto de abajo y no toda la sección, es confuso»: en pantallas angostas el titular y
   la capacidad son el primer paso del hero; al bajar se van y cada texto siguiente ocupa todo el lugar, grande, como un capítulo.
   En compu el titular sigue fijo (abajo a la izquierda, con el texto a su derecha). */
.solo-primero[data-p] { opacity: 1; transition: none; }
@media (max-width: 820px) {
  .solo-primero[data-p]:not(.ver) { display: none; }
  [data-lamina="portada"] .tiempo:not(:first-child) .t-sub { font-size: 27px; line-height: 1.16; font-weight: 600; letter-spacing: -.02em; }
  [data-lamina="portada"] .tiempo:last-child .t-sub.fuerte { font-size: 30px; }
  [data-lamina="portada"] .lee.der { margin-top: 14px; }
}

/* 28 oct: arte en el texto — dos palabras clave por texto, en negativo, negrita o cursiva (ver «arte» en generar_final.py) */
.mk-neg { background: var(--negro); color: var(--blanco); padding: 0 .16em .04em; margin: 0 .02em; font-weight: 700; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mk-b { font-weight: 900; letter-spacing: -.02em; }
.mk-it { font-style: italic; font-weight: 700; }
.oscura .mk-neg, .fx .mk-neg { background: var(--blanco); color: var(--negro); }

/* 28 oct, «no queda bien aún, le falta creatividad, diseño y arte»: en el celular el panel de texto bajo la escena es una hoja de afiche.
   — el número del capítulo gigante, recortado contra el borde de abajo a la derecha, en tinta muy baja;
   — el barrido fino de imprenta (1 px cada 4) sobre el papel y un filete rojo arriba;
   — la palabra clave en negativo va en rojo pleno, la negrita lleva subrayado rojo grueso, la cursiva queda en negro;
   — el texto, más grande y apretado, como bajada de revista. */
@media (max-width: 820px) {
  .sobre { position: relative; overflow: hidden;
    background: repeating-linear-gradient(0deg, rgba(23,25,30,.045) 0 1px, transparent 1px 4px); }
  .sobre::before { content: ""; position: absolute; left: var(--m); right: var(--m); top: 0; height: 4px; background: var(--rojo); }
  .oscura .sobre { background: repeating-linear-gradient(0deg, rgba(242,240,235,.05) 0 1px, transparent 1px 4px); }
  .sobre > * { position: relative; z-index: 1; }
  .sobre .etq { padding-top: 16px; }
  .tiempo .t-sub, [data-lamina="calle"] .tiempo .t-sub { font-size: 25px; line-height: 1.18; letter-spacing: -.022em; font-weight: 500; }
  .lee .tira { background: transparent; }
  .mk-neg { background: var(--rojo); color: #000; font-weight: 800; padding: 0 .14em .02em; rotate: -1.2deg; display: inline-block; line-height: 1.12; }
  .mk-b { font-weight: 900; text-decoration: underline; text-decoration-color: var(--rojo); text-decoration-thickness: .16em; text-underline-offset: .1em; }
  .mk-it { font-style: italic; font-weight: 800; }
}

/* 28 oct, «lo que quiero es que sea corrido el scroll, que no sea difícil de entender la página»: en el celular las láminas ya no
   quedan fijas cambiando el texto en el lugar. Cada capítulo es: la escena (animada) y debajo todo su texto, uno después del otro,
   y la página corre derecho como cualquier lectura. */
@media (max-width: 820px) {
  html.corrido .lamina:not(.pasa) { height: auto !important; }
  html.corrido .lamina:not(.pasa) .fija { position: relative; top: auto; height: auto; overflow: visible; }
  html.corrido .lamina:not(.pasa) .sobre { flex: none; overflow: visible; padding-bottom: 7vh; }
  html.corrido .lamina:not(.pasa) .lee, html.corrido .lamina:not(.pasa) .lee.der { position: static; margin-top: 10px; }
  html.corrido .lamina:not(.pasa) .tiempo { position: static; opacity: 1; }
  html.corrido .lamina:not(.pasa) .tiempo + .tiempo { margin-top: 26px; }
  html.corrido .lamina:not(.pasa) .tiempo .tira { animation: none; opacity: 1; }
  html.corrido .lamina:not(.pasa) .pts { display: none; }
  html.corrido .solo-primero[data-p], html.corrido .solo-primero[data-p]:not(.ver) { display: block; }
  html.corrido .titular h1 > [data-p] { display: block; }
}
@media (max-width: 820px) { /* (28 oct) con el scroll corrido, nada más ancho que la pantalla */
  html.corrido .lamina:not(.pasa) .titular { padding-left: var(--m); padding-right: var(--m); box-sizing: border-box; max-width: 100vw; bottom: auto; top: auto; }
  html.corrido .lamina:not(.pasa) .tiempo, html.corrido .lamina:not(.pasa) .tiempo p { max-width: 100%; box-sizing: border-box; }
  html.corrido .lamina:not(.pasa) .t-enun { overflow-wrap: anywhere; }
  html.corrido .lamina:not(.pasa) .lee .tira { max-width: 100%; white-space: normal; }
  html.corrido, html.corrido body { overflow-x: hidden; }
}
@media (max-width: 820px) { /* 30 oct: corrido en la subida — los titulares en tira se veían blanco sobre blanco; el texto de la portada sin margen */
  html.corrido .lamina:not(.pasa) .lee .t-enun .tira { background: var(--negro); color: var(--blanco); }
  html.corrido .lamina.oscura:not(.pasa) .lee .t-enun .tira { background: var(--blanco); color: var(--negro); }
  html.corrido [data-lamina="portada"] .lee.der { margin: 14px var(--m) 0 !important; width: auto !important; left: auto; }
  html.corrido [data-lamina="portada"] .lee.der .tiempo:first-child { padding-bottom: 6px; }
  html.corrido .titular .capacidad.solo-primero { display: grid; justify-items: start; gap: 8px; }  /* la tira roja y su bajada, una debajo de la otra */
}