/* ═══════════════════════════════════════════════════════════════════════════
   PERLA NEGRA TATTOO STUDIO — landing inmersiva · Diseñado por Operaria
   v3 · la pieza vertical. HTML/CSS/JS plano.
   Concepto LO QUE QUEDA · claim «Lo que cicatriza, queda.»

   El celular es una pieza propia con el mismo arco y el mismo efecto por
   capítulo. No es el estado apilado al que la página cae cuando el breakpoint
   no aplica. Por eso esta hoja tiene CUATRO bloques y el orden importa:

     1. BASE  — tokens y el estado RESUELTO: apilado, legible, sin pin, sin
                transform. Acá viven los recortes verticales y las cajas
                verticales.
     2. M     — movimiento: `@media (prefers-reduced-motion: no-preference)`
                + `html.js`. Los pines de los OCHO capítulos y toda la
                coreografía, con geometría vertical.
     3. A     — ancho: `@media (min-width: 1025px)`. Solo layout de escritorio.
     4. B     — ancho + movimiento. Solo lo que DIFIERE de M en escritorio.

   La trampa de especificidad: las reglas de M van prefijadas con `html.js`
   (0,2,0) y las de A no (0,1,0). Si una regla de M colisiona con una de A,
   M gana también en escritorio aunque A vaya después. Por eso todo valor
   geométrico escrito en M tiene su contraparte en B —no en A—, con el mismo
   prefijo, y B va después de A. Lo que se puede resolver con una VARIABLE se
   resuelve con una variable: una variable no tiene especificidad y no puede
   ganar una pelea que no debía pelear.

   Sigue habiendo un solo número, 1025, declarado dos veces (A y B).
   El bloque M no trae número: trae una preferencia y una clase.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── 1 · TOKENS ───────────────────────── */
:root{
  /* superficie */
  --casco:      oklch(0.134 0 0);          /* #080808 · fondo dominante */
  --casco-alto: oklch(0.190 0.006 56);     /* #161311 · barra, fichas, pie */
  --borde:      oklch(0.235 0.011 61);     /* #221d19 · reglas de 1px */
  /* texto */
  --hueso:      oklch(0.979 0 0);          /* #f8f8f8 */
  --hueso-2:    oklch(0.795 0.016 61);     /* #c4bab2 */
  --apagado:    oklch(0.544 0.022 60);     /* #7a6d63 · 4,0:1 — su propio dominio lo
                                              limita a metadatos GRANDES: en esta página
                                              ningún rótulo llega a 18px, así que los
                                              lleva `--hueso-2` (10,5:1). Queda declarado
                                              porque es la paleta, no porque sobre. */
  /* cobre */
  --cobre:      oklch(0.365 0.101 43);     /* #682808 · líneas, rótulos, relleno */
  --cobre-vivo: oklch(0.604 0.128 60);     /* #b86c22 · palabra marcada y enlaces */
  --cobre-luz:  oklch(0.690 0.124 66);     /* #cf8a3d · hover y foco */
  /* materiales */
  --piel:       oklch(0.653 0.053 48);     /* #ac8774 · fondo del capítulo 6, y nada más */
  --nacar:      oklch(0.922 0.009 188);    /* #dfe7e6 · filo de 1px, un destello */
  --taller:     oklch(0.330 0.039 222);    /* #1d3a44 · fondo del capítulo 7, y nada más */

  /* voces */
  --display: Fraunces, Georgia, "Times New Roman", serif;
  --texto:   "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* geometría y tiempo — los valores de la pieza VERTICAL */
  --sangra:  max(20px, 5vw);               /* el relleno lateral, y la medida de la sangría */
  --cinta-h: 0px;                          /* en vertical la cinta se funde con la barra */
  --barra-h: 44px;
  --tope:    calc(var(--cinta-h) + var(--barra-h));
  --pildora-h: 44px;                       /* barra baja de una línea */
  --pie-libre: calc(var(--pildora-h) + env(safe-area-inset-bottom));
  --medida:  38rem;
  --ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --piso: 11px;                            /* nada bajo 11px en vertical */

  /* las cajas de escena, en vertical. B las redefine para escritorio. */
  --banda2-h:    min(50svh, 460px);        /* cap. 2 · la banda del biomecánico */
  --par-h:       min(60svh, 540px);        /* cap. 3 · la banda del par */
  --ranura-cic:  min(14svh, 112px);        /* cap. 3 · la ranura que comparten h2 y versos */
  --placa-h:     min(38svh, 300px);        /* cap. 5 · el alto de cada placa */
  --tapa-w:      52%;                      /* cap. 4 · lo que cubre la tapa cerrada */
  --z0:          1.46;                     /* cap. 1 · el macro de partida */
  --drift:       2vh;
}

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

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;                    /* el freno ancla instantáneo; smooth le pelea al scrub */
  scrollbar-color: var(--borde) var(--casco);
  scrollbar-width: thin;
}

body{
  margin: 0;
  background: var(--casco);
  color: var(--hueso);
  font-family: var(--texto);
  font-size: clamp(max(1rem, var(--piso)), .97rem + .2vw, 1.0625rem);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
/* `height: auto` NO es opcional: los atributos width/height del HTML actúan
   como CSS de baja prioridad y sin esto el alto del atributo manda. */

::selection { background: var(--cobre); color: var(--hueso); }
:focus-visible { outline: 2px solid var(--cobre-luz); outline-offset: 3px; }

a { color: var(--cobre-vivo); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover, a:focus-visible { color: var(--cobre-luz); }

/* El «aquí» es lo enlazado: el patrón de la casa. El número jamás es texto de enlace. */
.aqui{ color: var(--cobre-vivo); text-decoration: underline;
       text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover .aqui, a:focus-visible .aqui { color: var(--cobre-luz); }

/* La sangría: un solo gesto para todo lo que va de borde a borde dentro de un
   marco con relleno. Se resta el relleno, no se pide `100vw` — pedir `100vw`
   dentro de un documento con barra de scroll es cómo se gana un overflow. */
.a-sangre{ margin-inline: calc(-1 * var(--sangra)); }

/* ───────────────────────── TIPOGRAFÍA ─────────────────────────
   Una sola escala. UNA regla de h2 para los ocho capítulos: el error que
   aparece solo es que cada capítulo declare el suyo y terminen midiendo entre
   51 y 64px. Todo lo que va dentro de un pin mide también por `vh`. */
h1, h2, h3{
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 72;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}
h1      { font-size: clamp(2.6rem, min(8vw, 9.2vh), 6rem); }
.cap h2 { font-size: clamp(2rem, min(5.4vw, 6.2vh), 3.4rem); }
h3      { font-size: clamp(1.15rem, min(2.2vw, 2.6vh), 1.5rem); font-weight: 700; }

p { text-wrap: pretty; margin: 0 0 .9em; }
/* La medida de lectura se pide donde hay lectura, no a todo <p>: la cinta y la
   barra también son párrafos y quedaban recortadas a 68ch. */
.banda__texto, .faq details p, .paso__bajada, .paso__clave { max-width: 68ch; }
p:last-child { margin-bottom: 0; }

.mono, .dato, .rotulo{
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(max(.72rem, var(--piso)), min(1.1vw, 1.3vh), .8125rem);
  letter-spacing: .12em; text-transform: uppercase; color: var(--hueso-2);
}
.rotulo { margin: 0 0 clamp(.5rem, 1.4vh, .9rem); }
/* El número de orden es coreografía, no contenido: puede pesar menos. */
.dato-linea__n, .fila dt { color: color-mix(in oklab, var(--hueso-2) 72%, transparent); }
.dato   { margin: clamp(.4rem, 1.1vh, .8rem) 0 0; }

.lede{ font-size: clamp(max(1.02rem, var(--piso)), min(1.7vw, 2.2vh), 1.25rem);
       color: var(--hueso-2); max-width: 34ch; }

/* En vertical el CTA vive en la barra baja desde el capítulo 3, así que el
   micro de cada capítulo sobra: decía el mismo enlace dos veces en la misma
   pantalla. El hero es la excepción — ahí la barra baja todavía no existe. */
.micro{ display: none;
        font-size: clamp(max(.86rem, var(--piso)), min(1.2vw, 1.6vh), .95rem);
        color: var(--hueso-2); margin-top: clamp(.6rem, 1.6vh, 1rem); }
.cap--hero .micro{ display: block; }

/* La palabra marcada. Nunca en cursiva, nunca con gradiente, una sola vez por
   bloque de texto. El subrayado capilar es la costura cerrada. */
.cic{ font-variant: small-caps; letter-spacing: .08em; color: var(--cobre-vivo);
      border-bottom: 1px solid var(--cobre); padding-bottom: 1px; }

/* Los datos que Rodrigo todavía no entregó se ven faltar. No se rellenan. */
.pendiente{
  font-family: var(--mono); font-size: clamp(max(.7rem, var(--piso)), 1vw, .78rem);
  line-height: 1.6; letter-spacing: .04em; color: var(--hueso-2);
  border-left: 1px solid var(--borde); padding-left: .8rem;
  margin-top: clamp(.8rem, 2vh, 1.2rem); max-width: 54ch;
}
.pendiente b { font-weight: 500; color: var(--hueso-2); }
.pendiente--linea{ border: 0; padding: 0; margin: 0; display: inline;
                   font-size: .82em; color: var(--hueso-2); }

/* ───────────────────────── 2 · ESTRUCTURA ─────────────────────────
   El riel va por fuera y el sticky por dentro. La sección NUNCA se pinea a sí
   misma. Y `.cap__pin` recibe `position` en DOS lugares de toda la hoja
   —`static` acá, `sticky` en el bloque M— y en ninguno más. */
.cap   { position: relative; background: var(--casco); }
.riel  { position: relative; }
.cap__pin { position: static; }          /* ÚNICA declaración base de `position` */

/* Todo lo que puede quedar bajo la barra baja del CTA reserva `--pie-libre`
   DESDE LA PRIMERA PANTALLA, esté la píldora puesta o no. Reservar siempre
   cuesta 44px de aire al pie —que además despeja la zona del pulgar— y
   elimina de raíz la clase de bug «la píldora volvió y tapó el crédito». */
.cap__marco{
  position: relative; z-index: 2;
  padding-inline: var(--sangra);
  padding-block: clamp(2.2rem, 7vh, 4rem)
                 calc(clamp(2.2rem, 7vh, 4rem) + var(--pie-libre));
}
.cap__lienzo { position: relative; z-index: 0; overflow: clip; }
.cap__foto   { width: 100%; height: 100%; object-fit: cover; }

/* Capítulos de lectura: miden lo que tienen que decir, ni un pixel más. */
.banda{
  position: relative; z-index: 2;
  padding-inline: var(--sangra);
  padding-block: clamp(2rem, 6vh, 3.4rem)
                 calc(clamp(2rem, 6vh, 3.4rem) + var(--pie-libre));
  border-top: 1px solid var(--borde);
}
.banda__texto{ max-width: var(--medida); color: var(--hueso-2); }
.banda .dato { color: var(--hueso-2); }

/* Los versos: líneas cortas, una bajo otra. La numeración es coreografía y no
   se imprime. */
.versos{ list-style: none; margin: clamp(.9rem, 2.6vh, 1.5rem) 0 clamp(1rem, 3vh, 1.6rem); padding: 0;
         display: grid; gap: clamp(.25rem, .9vh, .5rem); }
.versos li{ font-family: var(--display); font-weight: 700;
            font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 72;
            font-size: clamp(1.1rem, min(2.4vw, 2.8vh), 1.55rem);
            line-height: 1.25; color: var(--hueso); }
.versos li > span { display: block; }

/* ───────────────────────── 3 · PIEZAS COMUNES ───────────────────────── */

/* Cinta de propuesta. En vertical se funde con la barra —el chip lo dice en
   cada pantalla y el pie lo dice entero una vez— y se recuperan 28px de
   pantalla en TODAS las pantallas. En escritorio vuelve como estaba. */
.cinta{
  display: none;
  position: fixed; inset: 0 0 auto 0; z-index: 41; margin: 0;
  height: var(--cinta-h); align-items: center; justify-content: center;
  background: var(--casco-alto); border-bottom: 1px solid var(--borde);
  font-family: var(--mono); font-size: max(11px, .64rem); letter-spacing: .1em;
  text-transform: uppercase; color: var(--hueso-2);
  white-space: nowrap; overflow: clip;
}

/* Barra: el sello chico. Es `fixed` y no reclama el borde del documento, así
   que todos los pines pueden usar `top: 0`. Lo que los pines reservan es el
   relleno superior de su marco (`--tope`). */
.barra{
  position: fixed; inset: var(--cinta-h) 0 auto 0; z-index: 40;
  height: var(--barra-h); pointer-events: none;
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: max(20px, 4vw);
  transition: background .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.barra > *      { pointer-events: auto; }
.barra__marca   { display: block; line-height: 0; }
/* v3 · el sello va recortado con canal alfa. Los PNG anteriores eran opacos y
   traían su propio negro `#080808` sobre una superficie `--casco-alto`
   `#161311`: se veía el parche. El dibujo no se tocó —sigue siendo su sello,
   entero—; lo que se sacó es el fondo. */
.barra__sello   { height: 26px; width: auto; }
.barra__derecha { margin: 0; display: flex; align-items: center; gap: .7rem; }
.barra__dato    { display: none; }
.barra__chip{
  display: inline-block; padding: .2em .5em; border-radius: 3px;
  border: 1px solid var(--cobre); background: var(--casco-alto);
  color: var(--hueso-2); font-size: max(11px, .62rem); letter-spacing: .1em;
  line-height: 1.5;
}
.barra__cta     { color: var(--hueso); text-decoration: none; }
.barra__cta .aqui{ color: var(--cobre-luz); }
/* Sobre el hero la barra no tiene fondo. Se posa cuando el hero sale, y el
   fondo posado es OPACO: un 8% de transparencia no es un efecto, es un choque
   de textos. */
.barra--posada{
  background: var(--casco-alto);
  border-bottom-color: var(--borde);
}

/* Píldora fija «reserva aquí».
   v3 · en vertical es una BARRA BAJA de una sola línea, a todo el ancho, de
   44px más el área segura. La caja de dos líneas anclada a la derecha tapaba
   el último párrafo de casi todos los capítulos. Relleno en `--cobre`, el tono
   profundo: `--cobre-luz` es filo y estado al tocar, jamás relleno bajo texto.
   Único `will-change` de toda la página. */
.pildora{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  min-height: var(--pildora-h); border-radius: 0; max-width: none;
  display: flex; align-items: center; justify-content: center;
  padding: 0 14px; padding-bottom: env(safe-area-inset-bottom);
  font-family: var(--mono); font-size: max(11px, .68rem); letter-spacing: .06em;
  line-height: 1.4; text-decoration: none;
  background: var(--cobre); color: var(--hueso);
  border-top: 1px solid color-mix(in oklab, var(--nacar) 22%, transparent);
  box-shadow: 0 -10px 28px rgba(0,0,0,.55);
  white-space: nowrap; overflow: clip;
  will-change: transform;
}
.pildora .aqui  { color: var(--hueso); }
.pildora__larga { display: none; }
html.js .pildora{ opacity: 0; transform: translateY(12px); pointer-events: none;
                  transition: opacity .6s var(--ease), transform .6s var(--ease); }
html.js .pildora.is-on{ opacity: 1; transform: none; pointer-events: auto; }
html.js .pildora.se-va{ opacity: 0; pointer-events: none; transition: opacity .45s var(--ease); }

/* El velo. Solo donde hay texto encima. Negro puro, nunca un velo de color de
   marca sobre la obra. Techo absoluto: 70%. En vertical el velo lateral no
   corresponde donde el texto vive FUERA de la foto: se enciende capítulo por
   capítulo en el bloque M. */
.velo{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top,
    rgba(0,0,0,.70) 0%, rgba(0,0,0,.42) 34%, rgba(0,0,0,0) 72%);
}
.velo--izq{ display: none; }

/* El cabo: regla capilar de cobre con un filo de nácar. Un destello, jamás
   una textura. */
.cabo{
  display: block; height: 1px; width: 100%; background: var(--cobre);
  box-shadow: 0 -1px 0 color-mix(in oklab, var(--nacar) 40%, transparent);
  margin: clamp(1rem, 3vh, 1.6rem) 0;
}

/* Botones del cierre. Sin JS quedan encendidos: `var(--p,1)` → `--b:1`.
   En vertical van a todo el ancho de la columna, uno bajo otro. */
.btn{
  --b: clamp(0, calc((var(--p, 1) - .68) / .08), 1);
  display: block; text-decoration: none; text-align: center;
  font-family: var(--texto); font-weight: 600;
  font-size: clamp(max(.92rem, var(--piso)), min(1.3vw, 1.8vh), 1rem);
  padding: clamp(.62rem, 1.7vh, .9rem) clamp(1rem, 2.4vw, 1.5rem);
  border-radius: 6px;
  background: color-mix(in oklab, var(--cobre) calc(var(--b) * 100%), transparent);
  border: 1px solid color-mix(in oklab, var(--cobre) calc(40% + var(--b) * 60%), transparent);
  /* El piso del texto es 68%: el botón sigue encendiéndose —el relleno y el
     filo cuentan el gesto— pero su rótulo nunca baja de un contraste legible
     sobre la foto. Es el elemento que cobra la página. */
  color: color-mix(in oklab, var(--hueso) calc(68% + var(--b) * 32%), transparent);
  transition: border-color .3s var(--ease);
}
.btn .aqui { color: inherit; }
.btn:hover, .btn:focus-visible { border-color: var(--cobre-luz); color: var(--hueso); }
.botones{ display: grid; gap: clamp(.4rem, 1.2vh, .8rem); justify-items: stretch;
          margin-top: clamp(1rem, 3vh, 1.6rem); }

/* ═══════════════ 4 · LOS OCHO CAPÍTULOS · capa base ═══════════════ */

/* ─── 1 · EL FONDO (hero) ─────────────────────────────────────────
   Estado resuelto: la foto entera a sangre, el claim y el pie puestos. El hero
   JAMÁS nace negro: es un `<img>` en el HTML, no un canvas.
   v3 · el teléfono recibe su PROPIO recorte (`hero-pulpo-v-*.jpg`, 1782×3850).
   Con la foto 3:4 el empate no tenía salida: `12%` dejaba el sello entero pero
   perdía el hombro iluminado, y `56%` recuperaba el hombro y partía el sello.
   El archivo vertical trae la cabeza, el ojo, las ventosas, el hombro Y el
   sello completo. Y trae un regalo de dirección: al arranque, con el macro en
   1,34, el sello está fuera de cuadro y entra por el pie cuando la cámara
   retrocede. La firma de Rodrigo llega junto con el claim. */
.cap--hero picture{ display: block; position: absolute; inset: 0; }
.cap--hero .cap__lienzo{ position: absolute; inset: 0; }
.cap--hero .hero__foto{
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 100%;                /* anclado al pie: lo que se pierde al ensanchar
                                               la ventana es el borde de arriba, y el sello
                                               queda entero */
}
/* La barra vive sobre la foto en la primera pantalla: el velo del hero suma
   una banda superior para sostenerla. Sigue siendo negro puro y sigue bajo el
   techo del 70%. */
.cap--hero .velo{ background:
  linear-gradient(to top, rgba(0,0,0,.70) 0%, rgba(0,0,0,.42) 34%, rgba(0,0,0,0) 72%),
  linear-gradient(to bottom, rgba(0,0,0,.68) 0%, rgba(0,0,0,.58) 9%, rgba(0,0,0,.20) 15%, rgba(0,0,0,0) 23%); }
.cap--hero .cap__pin{ min-height: 100svh; display: grid;
                      align-content: end; overflow: clip; }
.cap--hero .cap__marco{ padding-block: var(--tope)
                        calc(clamp(3rem, 10vh, 5.4rem) + var(--pie-libre)); }
.cap--hero .hero__pie { margin-top: clamp(1rem, 3vh, 1.6rem); }

/* La pista de scroll no va ligada al scroll: un elemento que pide movimiento no
   puede depender del movimiento. Entra por temporizador y se va al primer
   evento de scroll. */
.pista{
  position: absolute; left: 50%; translate: -50% 0;
  bottom: calc(var(--pie-libre) + .5rem); z-index: 3; margin: 0;
  font-family: var(--mono); font-size: max(11px, .66rem); letter-spacing: .18em;
  text-transform: uppercase; color: var(--hueso-2);
}
html.js .pista{ opacity: 0; transition: opacity .8s var(--ease); }
html.js .pista.is-on{ opacity: .85; }
html.js .pista.se-fue{ opacity: 0; }

/* ─── 2 · PERLA NEGRA ─────────────────────────────────────────────
   En vertical la placa deja de ser placa: es una BANDA a sangre, sin marco y
   sin un pixel de aire lateral. 720px es el techo de este material, así que no
   va a pantalla completa; lo que cambia es la caja. */
.perla__rejilla{ display: grid; gap: clamp(1.4rem, 4vh, 2.4rem); }
.placa--perla{ margin: 0 calc(-1 * var(--sangra)); position: relative; }
.placa--perla img{ width: 100%; height: var(--banda2-h); object-fit: cover;
                   object-position: 46% 38%; }
.placa--perla figcaption{ padding-inline: var(--sangra); }
.perla__tapa{ display: none; }            /* solo dibuja el scrub: no existe donde no hay scrub */
.capas{ list-style: none; margin: clamp(1rem, 3vh, 1.6rem) 0 0; padding: 0;
        display: grid; gap: clamp(.5rem, 1.6vh, .9rem); }
.capa{ font-family: var(--display); font-weight: 700;
       font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 72;
       font-size: clamp(1.15rem, min(2.6vw, 3vh), 1.75rem); line-height: 1.2; }
.capa > span { display: block; }
.sello-grande{ margin: 0; }
.sello-grande img{ width: 240px; max-width: 70%; height: auto; }
.sello-grande figcaption{ margin-top: .7rem; }

/* ─── 3 · CICATRIZADO ─────────────────────────────────────────────
   El capítulo que mejor queda en un teléfono: las dos fotos son verticales, el
   sujeto está centrado y el cruce se hace con el pulgar. */
.cic__rejilla{ display: grid; gap: clamp(1.4rem, 4vh, 2.2rem); }
.par{ display: grid; gap: clamp(1rem, 3vh, 1.6rem); }
.par__caja{ position: relative; margin: 0; }
.par__foto{ width: 100%; height: auto; }
.par__pie { color: var(--hueso-2); }

/* La forma encontrada: su propia pastilla negra de historia. UNA sola vez en
   toda la página, sobre la foto cicatrizada del par, arriba a la izquierda —
   abajo quedaba justo encima del pie `CICATRIZADO · 4 AÑOS` y la palabra se
   leía dos veces, una sobre otra, en dos tipografías distintas. */
.pastilla{
  position: absolute; left: clamp(.6rem, 2vw, 1rem); top: clamp(.6rem, 2vw, 1rem);
  margin: 0; background: #000; color: #fff;
  font-family: var(--texto); font-weight: 600;
  font-size: clamp(max(.78rem, var(--piso)), min(1.3vw, 1.7vh), .95rem);
  letter-spacing: .02em; padding: .34em .7em; border-radius: 3px;
}

/* El muro de evidencia. En vertical va a DOS columnas, de borde a borde, con
   hueco de 2px: doce baldosas son seis filas y el visitante baja por dentro
   del archivo. A 194px de baldosa la pieza se reconoce; a 110px —tres
   columnas dentro del relleno— eran doce miniaturas. */
.muro{ padding-inline: 0; padding-block: clamp(1.4rem, 4vh, 2.4rem)
       calc(clamp(2.4rem, 7vh, 3.6rem) + var(--pie-libre)); }
.muro__grilla{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
}
.muro__grilla img{ width: 100%; aspect-ratio: 1; object-fit: cover; }
.muro__pie{ text-align: center; margin-top: clamp(1rem, 3vh, 1.4rem);
            padding-inline: var(--sangra); }
.muro .pendiente{ margin-inline: var(--sangra); }

/* ─── 4 · LOS QUE YA NO ESTÁN ─────────────────────────────────────
   La única foto de la página a proporción nativa, y es a propósito: un `cover`
   9:19,5 sobre un archivo 1:1 muestra el 46,2% del ancho y cualquier valor de
   `object-position` se come una de las dos caras, y con ella el argumento
   entero del capítulo. La caja 1:1 no es `contain` —caja e imagen tienen la
   misma razón—, es una decisión de encuadre. */
.ret__cuadro{ position: relative; width: min(100%, 56svh); margin-inline: auto; }
.cap--retratos .cap__foto{ aspect-ratio: 1 / 1; height: auto; object-position: 50% 44%; }
.tapa{ display: none; }                     /* solo dibuja el scrub */

/* ─── 5 · COLOR Y GRISES ──────────────────────────────────────────
   Estado resuelto: las dos tríadas COMPLETAS, en flujo, cada una con su
   rótulo. El `display:none` de la tercera placa vive en el bloque M, no acá:
   sin JS no se pierde ninguna obra. */
.rango__escena{ position: relative; display: grid; gap: clamp(1.4rem, 4vh, 2.2rem);
                margin-top: clamp(1rem, 3vh, 1.6rem); }
.triada{ list-style: none; margin: 0; padding: 0;
         display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.triada .placa{ margin: 0; }
.triada .placa img{ width: 100%; aspect-ratio: 1; object-fit: cover; }
.triada .dato{ display: block; margin-top: .45rem; }
.triada__rot{ margin: 0 0 .5rem; grid-column: 1 / -1; }
.rango__pie{ color: var(--hueso-2); margin-top: clamp(1rem, 3vh, 1.6rem); max-width: 44ch; }
/* Los versos del capítulo suben al pin en vertical y la tercera dupla baja a
   la banda: las dos piezas existen en el HTML y el bloque que corresponde se
   enciende donde corresponde. Nunca las dos a la vez. */
.versos--rango{ display: none; }
.rango__tercera{ display: none; }
/* Un tope de ancho, no de alto: a proporción nativa no se recorta un pixel,
   y en una tablet de 1024 —que también es la pieza vertical— dos fotos a todo
   el ancho dejarían la banda más larga que su propio riel. */
.rango__tercera .placa{ margin: 0 auto; position: relative; max-width: 480px; }
.rango__tercera .placa img{ width: 100%; height: auto; }
.rango__tercera .dato{ display: block; position: absolute; left: 0; right: 0; top: 0;
  margin: 0; padding: .5rem var(--sangra); color: var(--hueso);
  background: linear-gradient(to bottom, rgba(0,0,0,.78), rgba(0,0,0,0)); }
/* object-position, decidido placa por placa y MEDIDO sobre cada archivo: dónde
   vive el sello de Rodrigo, dónde vive el sujeto, y qué ventana muestra la
   placa a 194 px de ancho. En las cuatro del pin el sello queda ENTERO. */
.pl--leon    img{ object-position: 0% 60%; }   /* sello x 4–26 · ojos y colmillos x 26–65 */
.pl--espalda img{ object-position: 5% 30%; }   /* sello x 4–26 · capucha y sigilo x 17–83 */
.pl--walter  img{ object-position: 0% 85%; }   /* sello x 3–28 · rostro y lentes x 28–78 */
.pl--manga   img{ object-position: 0% 85%; }   /* sello x 5–27 · la manga x 14–55 */
/* Las dos de la banda van a proporción nativa: no se recorta un pixel, así que
   el sello y el sujeto están enteros por construcción y no hay `object-position`
   que decidir. Ésa es la salida limpia al empate de la placa Pennywise. */
.pl--cristo  img{ object-position: 50% 50%; }
.pl--payaso  img{ object-position: 50% 50%; }

/* ─── 6 · ASÍ SE TRABAJA ACÁ ──────────────────────────────────────
   El único capítulo claro. `--casco` sobre `--piel`: contraste ≈ 8,9:1. Es el
   color que él mismo eligió para su historia del abono. Y es el que cobra la
   página: 0 KB de imagen, a propósito. */
.cap--trabajo{ background: var(--piel); color: var(--casco); }
/* Sobre `--piel` (L 0,27) el casco al 68% daba 3,9:1 y al 72% daba 4,2:1 —bajo
   el mínimo para texto de 13px—. Medido: 80% → 4,9:1 · 78% → 4,7:1 · 82% → 5,0:1. */
.cap--trabajo .rotulo,
.cap--trabajo .dato    { color: color-mix(in oklab, var(--casco) 80%, transparent); }
.cap--trabajo .banda   { border-top-color: color-mix(in oklab, var(--casco) 22%, transparent); }
.cap--trabajo .banda__texto,
.cap--trabajo .versos li{ color: var(--casco); }
.cap--trabajo .cic{ color: color-mix(in oklab, var(--casco) 86%, transparent);
                    border-bottom-color: color-mix(in oklab, var(--casco) 50%, transparent); }
.cap--trabajo .pendiente{ color: color-mix(in oklab, var(--casco) 82%, transparent);
                          border-left-color: color-mix(in oklab, var(--casco) 28%, transparent); }
.cap--trabajo .pendiente b{ color: var(--casco); }

/* En vertical la columna se disuelve (`display: contents`) y sus tres piezas
   pasan a ser filas de la rejilla; la firma toma `order: 2` y cae al CIERRE
   del capítulo, que es donde el documento la quiere: sola, como firma seca.
   El DOM no se mueve, así que en escritorio la columna vuelve a ser columna y
   no cambia un pixel. */
.trabajo__rejilla{ display: grid; gap: clamp(.8rem, 2.4vh, 1.6rem); }
.trabajo__col{ display: contents; }
.trabajo__col .firma{ order: 2; }
.pasos{ list-style: none; margin: 0; padding: 0;
        display: grid; gap: clamp(.5rem, 1.5vh, 1rem); }
.paso{ position: relative; max-width: 68ch; }
.paso__regla{ display: block; height: 1px; background: var(--cobre);
              margin-bottom: clamp(.36rem, 1vh, .7rem); }
.paso h3{ margin: 0 0 .22em; }
/* El número del paso no es coreografía: la FAQ manda a «los cinco datos del
   paso 01», así que se lee. 78% → 4,7:1. */
.paso__n{ color: color-mix(in oklab, var(--casco) 78%, transparent); margin-right: .5em;
          font-size: .72em; letter-spacing: .12em; }
.paso__bajada{ font-weight: 600; margin-bottom: .3em;
               font-size: clamp(max(.95rem, var(--piso)), min(1.4vw, 1.9vh), 1.0625rem); }
.paso__clave { margin-bottom: .3em;
               font-size: clamp(max(.95rem, var(--piso)), min(1.4vw, 1.9vh), 1.0625rem); }
.paso__lista{ list-style: none; margin: 0; padding: 0; }
/* Es una LISTA PINEADA: sus filas miden en `vh`, nunca en `rem` fijos. */
.paso__lista li{
  padding-block: clamp(.22rem, .85vh, .6rem);
  font-size: clamp(max(.95rem, var(--piso)), min(1.5vw, 1.9vh), 1.0625rem);
  line-height: 1.45;
  border-bottom: 1px solid color-mix(in oklab, var(--casco) 18%, transparent);
}
.paso__lista li:last-child{ border-bottom: 0; }
.paso__lista b{ font-weight: 600; }
/* La escalera de caída del capítulo 6 en vertical, en este orden y no en otro:
   1) la glosa de cada uno de los cinco datos —que la banda dice entera, en
      prosa, para que no se pierda una palabra—;
   2) los tres `.dato mono` de pie de paso.
   NUNCA se cae una de las cinco líneas: son las que cobran la cotización. */
.paso__glosa{ display: none; }
.cap--trabajo .paso .dato{ display: none; }
.cap--trabajo .paso__clave{ display: none; }
.cap--trabajo .paso__bajada--01{ display: none; }
.cap--trabajo .firma{ margin-top: clamp(.6rem, 1.8vh, 1.2rem); }
.versos--trabajo-v{ display: none; }
/* Las filas de la ficha miden en `vh` y en vertical se aprietan: es una lista
   pineada y cinco líneas que no caben son cinco cotizaciones que no llegan. */
.cap--trabajo .paso__lista li{ padding-block: clamp(.18rem, .55vh, .6rem); }
.cap--trabajo .pasos{ gap: clamp(.4rem, 1.1vh, 1rem); }
.firma{ margin: clamp(.9rem, 2.6vh, 1.6rem) 0 0; padding: 0; }
.firma p{ font-family: var(--display); font-weight: 800;
          font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 72;
          font-size: clamp(1.2rem, min(2.8vw, 3.2vh), 1.8rem); line-height: 1.15; margin: 0; }
.firma cite{ display: block; font-style: normal; margin-top: .6rem; }

/* ─── 7 · LA SERENA ───────────────────────────────────────────────
   Mirado el archivo (1440×1440): la camilla vive en x 25–68%, el muro petróleo
   en x 55–100% y el sello de Rodrigo en x 5–28%. La ventana del teléfono
   muestra el 46,2% del ancho: con 64% abre en 35,8% y el sello queda
   completamente fuera, con la camilla, el muro, la repisa y el piso en cuadro.
   El 50% del eje vertical es inerte acá —un 1:1 en un cuadro más alto recorta
   solo en horizontal— y se escribe como decisión, no como descuido. */
.cap--serena{ background: var(--taller); }
.cap--serena .cap__lienzo{ position: relative; }
.cap--serena .foto--studio{ width: 100%; height: min(56svh, 460px); object-fit: cover;
                            object-position: 64% 50%; }
.serena__rejilla{ display: grid; gap: clamp(1.4rem, 4vh, 2.2rem); }
.ficha{ margin: clamp(1rem, 3vh, 1.6rem) 0 0; }
.fila{ display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: baseline;
       gap: .8rem; padding-block: clamp(.5rem, 1.6vh, 1rem); }
.fila dt{ margin: 0; }
.fila dd{ margin: 0; position: relative;
          font-size: clamp(max(.95rem, var(--piso)), min(1.5vw, 2.1vh), 1.0625rem); }
.fila__regla{ display: block; height: 1px; background: var(--cobre);
              box-shadow: 0 -1px 0 color-mix(in oklab, var(--nacar) 40%, transparent);
              margin-top: clamp(.4rem, 1.2vh, .7rem); }
.placa--rodrigo{ margin: 0; }
.placa--rodrigo figcaption{ background: color-mix(in oklab, var(--casco) 74%, transparent);
                            padding: .4rem .55rem; margin-top: 0; color: var(--hueso-2); }
.placa--rodrigo img{ width: 100%; aspect-ratio: 1; object-fit: cover;
                     object-position: 42% 40%; border: 1px solid var(--borde); }
/* El retrato de oficio sale del pin en vertical —ahí compite con la ficha por
   la misma columna— y cierra el capítulo desde la banda, a todo el ancho. */
.placa--rodrigo--banda{ display: none; }

/* ─── FAQ ─────────────────────────────────────────────────────────
   v3 · la FAQ tenía una composición que se adivinaba desde «estudio de
   tatuaje»: siete filas con un «+» a la derecha. Ahora usa el lenguaje de la
   página y de nadie más: índice en mono, la pregunta en Fraunces, el cabo de
   cobre como marca —crece al abrir, no gira ni se cruza— y la respuesta en
   una columna medida bajo el número. */
.cap--faq{ border-top: 1px solid var(--borde); }
.faq__marco{ padding-inline: var(--sangra);
             padding-block: clamp(2.6rem, 8vh, 4.4rem)
                            calc(clamp(2.6rem, 8vh, 4.4rem) + var(--pie-libre));
             max-width: calc(var(--medida) + 12rem); margin-inline: auto; }
.faq{ margin-top: clamp(1.2rem, 3.4vh, 2rem); }
.faq details{ border-bottom: 1px solid var(--borde); }
.faq summary{
  cursor: pointer; list-style: none;
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) 2.4rem;
  align-items: baseline; gap: .8rem;
  padding-block: clamp(.8rem, 2.2vh, 1.15rem);
}
.faq summary::-webkit-details-marker{ display: none; }
.faq__q{ font-family: var(--display); font-weight: 700;
         font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 72;
         font-size: clamp(1.08rem, min(2.2vw, 2.5vh), 1.4rem); line-height: 1.16; }
.faq__marca{
  display: block; height: 1px; width: 14px; justify-self: end; align-self: center;
  background: var(--cobre-vivo);
  box-shadow: 0 -1px 0 color-mix(in oklab, var(--nacar) 40%, transparent);
  transition: width .32s var(--ease);
}
.faq details[open] .faq__marca{ width: 2.4rem; }
.faq details[open] .faq__n{ color: var(--cobre-vivo); }
.faq details p{ color: var(--hueso-2); max-width: 60ch;
                margin-left: 3.2rem; padding-bottom: clamp(.8rem, 2.2vh, 1.15rem); }

/* ─── 8 · ESCRÍBELE (cierre) ──────────────────────────────────────
   Mirado el archivo (1440×1440): el ojo izquierdo está en x 22–30%, el derecho
   en x 45–50% y el sello en x 4,7–27%. La ventana del teléfono muestra el
   46,2%: con 8% abre en 4,3% —justo antes del sello— y cierra en 50,5%, con
   los dos ojos y el sello completo en cuadro. Es el único valor que los tiene
   los tres. */
.cap--cierre .cap__lienzo{ position: relative; }
.cap--cierre .foto--cierre{ width: 100%; height: min(56svh, 460px); object-fit: cover;
                            object-position: 4% 50%; }
.mensaje{ list-style: none; margin: clamp(1rem, 3vh, 1.6rem) 0 0; padding: 0;
          display: grid; gap: clamp(.4rem, 1.2vh, .7rem); }
.dato-linea{ display: grid; grid-template-columns: 2.4rem minmax(0, 1fr);
             align-items: baseline; gap: .6rem;
             font-size: clamp(max(.95rem, var(--piso)), min(1.5vw, 2.1vh), 1.0625rem); }
.salida{ margin-top: clamp(.8rem, 2.4vh, 1.2rem); color: var(--hueso-2);
         font-size: clamp(max(.88rem, var(--piso)), min(1.2vw, 1.6vh), .95rem); }

/* ─── PIE ─────────────────────────────────────────────────────────
   Ahí vive la cinta completa y el crédito «Diseñado por Operaria», el único
   elemento de la página que responde al canon visual de Operaria. */
.pie{ background: var(--casco-alto); border-top: 1px solid var(--borde);
      padding-inline: var(--sangra);
      padding-block: clamp(2.4rem, 7vh, 3.6rem) calc(1.6rem + var(--pie-libre)); }
.pie__marco{ display: grid; gap: clamp(1rem, 3vh, 1.6rem); align-items: start; }
.pie__sello{ height: 44px; width: auto; }
.pie__id p{ margin: 0; color: var(--hueso-2); }
.pie__nombre{ font-family: var(--display); font-weight: 800;
              font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 72;
              font-size: 1.15rem; color: var(--hueso) !important; }
.pie__datos{ margin: 0; line-height: 1.9; }
.pie__enlaces{ margin: 0; display: grid; gap: .45rem; justify-items: start; }
.pie__cinta{ margin: clamp(1.6rem, 5vh, 2.4rem) 0 0; font-family: var(--mono);
             font-size: max(11px, .64rem); letter-spacing: .1em; text-transform: uppercase;
             color: var(--hueso-2); }
.pie__cred{ margin: .5rem 0 0; font-family: var(--mono);
            font-size: max(11px, .66rem); letter-spacing: .08em; color: var(--hueso-2); }

/* ═══════════════════════════════════════════════════════════════════════════
   5 · BLOQUE M — movimiento. Sin número de ancho: una preferencia y una clase.
   Acá viven los pines de los OCHO capítulos y toda la coreografía, con la
   geometría VERTICAL. Bajo `prefers-reduced-motion` el bloque entero no
   aplica: los rieles vuelven a `height: auto`, ningún pin se activa y la
   landing queda apilada, sin una sola línea que «deshaga» pines.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference){

  /* --- el pin. Ningún sticky más alto que la pantalla: `100dvh`, exacto.
     Va condicionado a `html.js` porque todo lo que el pin sostiene —las
     escenas superpuestas, la tapa, la ranura de versos— lo compone el scrub.
     Lo que solo dibuja el scrub no debe existir donde no hay scrub. --- */
  html.js .cap--riel .riel, html.js .cap--cicatrizado .riel{
    height: calc(100dvh + var(--pista, 100vh));
  }
  html.js .cap--riel .cap__pin, html.js .cap--cicatrizado .cap__pin{
    position: sticky; top: 0; height: 100dvh; min-height: 0;
    display: grid; align-content: center;
  }

  /* Las pistas verticales. Perfil plano a propósito: pista máxima 1,15, mínima
     0,90, razón 1,28 — del mismo orden que el 1,30 del escritorio. Son más
     cortas que en escritorio porque el pulgar recorre ~70vh por gesto contra
     los ~50vh/s de la rueda: la misma pista se siente más larga. */
  .cap--hero        { --pista: 90vh; }
  .cap--perla       { --pista: 90vh; }
  .cap--cicatrizado { --pista: 115vh; --pie-cambia: .80; }
  .cap--retratos    { --pista: 90vh; }
  .cap--rango       { --pista: 100vh; }
  .cap--trabajo     { --pista: 100vh; }
  .cap--serena      { --pista: 90vh; }
  .cap--cierre      { --pista: 95vh; }

  /* El marco reserva la barra arriba y la barra baja del CTA abajo. El pin
     centra su contenido y lo que se desborda se pierde POR ARRIBA, bajo la
     barra — el rótulo y la cabecera. En escritorio `--pie-libre` vale el área
     segura (0 en un monitor), así que esta misma regla sirve para los dos. */
  .cap--riel .cap__marco, .cap--cicatrizado .cap__marco{
    padding-block: calc(var(--tope) + clamp(.6rem, 2vh, 1.4rem))
                   calc(var(--pie-libre) + clamp(1rem, 3.4vh, 2rem));
  }

  /* La atenuación del capítulo que ya pasó: LUMINANCIA, nunca desaturación.
     Sus fotos no se desaturan por diseño: el negro y gris es una decisión
     técnica suya, no un filtro nuestro. El filtro va en el LIENZO y nunca en
     el elemento sticky — un `filter` crea bloque contenedor y no se mezcla con
     el pineado. */
  .cap__lienzo{ filter: brightness(calc(1 - .45 * var(--salida, 0))); }

  /* ─── cap. 1 · el macro retrocede ─────────────────────────────── */
  html.js .cap--hero .cap__pin{ align-content: end; overflow: clip; }
  /* El pie del hero le deja el sitio al sello: el texto termina donde la firma
     de Rodrigo empieza (su borde superior vive en el 73% del alto del archivo).
     No es aire: es la mitad de abajo de la composición. */
  html.js .cap--hero .cap__marco{
    padding-block: var(--tope) calc(var(--pie-libre) + 26svh);
  }
  html.js .cap--hero .hero__foto{
    --e: clamp(0, calc((var(--p, 1) - .08) / .64), 1);
    --z: calc(var(--z0) - (var(--z0) - 1) * var(--e));
    transform: translate3d(0, calc(var(--drift) * (1 - var(--e)) * -1), 0) scale(var(--z));
    /* Origen medido, no elegido: con `--z0: 1.46` y este origen la ventana de
       partida cierra en el 70,3% del alto del archivo y el sello de Rodrigo
       —cuyo borde superior está en el 73%— queda COMPLETAMENTE fuera de cuadro
       al arranque. Entra por el pie cuando la cámara retrocede, junto con el
       claim. Entero o fuera: partido, nunca. */
    transform-origin: 50% 0%;
  }
  html.js .cap--hero .hero__texto{
    --q: clamp(0, calc((var(--p, 1) - .60) / .08), 1);
    opacity: var(--q); transform: translateY(calc(10px * (1 - var(--q))));
  }
  html.js .cap--hero .hero__pie{
    --q: clamp(0, calc((var(--p, 1) - .74) / .07), 1);
    opacity: var(--q); transform: translateY(calc(10px * (1 - var(--q))));
  }

  /* ─── cap. 2 · las capas se depositan, y la última es opaca ──────
     Tres líneas que entran una sobre otra sin borrar la anterior —el efecto ES
     la metáfora— y el capítulo cierra con lo que la metáfora dice que pasa: la
     carne se cierra encima y lo que queda es la pieza. No es un segundo
     efecto: es el último depósito, y es el único que es opaco. Y respeta el
     sistema visual: el sello nunca va encima de una foto — cuando aparece, la
     foto ya no está. */
  .capa{
    --q: clamp(0, calc((var(--p, 1) - (.16 + .18 * var(--t))) / .10), 1);
    opacity: var(--q);
  }
  .capa > span{ transform: translateY(calc(14px * (1 - var(--q)))); }
  .cap--perla .cabo{
    --q: clamp(0, calc((var(--p, 1) - .68) / .10), 1);
    transform: scaleX(var(--q)); transform-origin: left;
  }
  .sello-grande{
    --q: clamp(0, calc((var(--p, 1) - .82) / .08), 1);
    opacity: var(--q);
  }
  html.js .cap--perla .perla__col .sello-grande{ display: none; }
  html.js .cap--perla .perla__tapa{
    display: grid; align-content: center; justify-items: center; gap: .6rem;
    position: absolute; inset: 0 0 auto 0; height: var(--banda2-h); z-index: 2;
    background: var(--casco); padding-inline: var(--sangra);
    opacity: clamp(0, calc((var(--p, 1) - .78) / .08), 1);
  }
  html.js .cap--perla .perla__tapa img{
    height: min(30svh, 260px); width: auto; max-width: 70%;
    opacity: clamp(0, calc((var(--p, 1) - .82) / .08), 1);
  }
  html.js .cap--perla .placa--perla > figcaption{
    opacity: calc(1 - clamp(0, calc((var(--p, 1) - .78) / .08), 1));
  }
  html.js .cap--perla .perla__tapa .dato{
    margin: 0; text-align: center;
    opacity: clamp(0, calc((var(--p, 1) - .84) / .08), 1);
  }

  /* ─── cap. 3 · el cruce fresco ↔ cicatrizado ─────────────────────
     Opacidad en el compositor, una sola propiedad, cero repintado por
     fotograma. `--cruce` por defecto 1: el estado resuelto es el cicatrizado,
     que es la tesis. El JS lo retrocede a 0 y lo sube con el scroll.
     En vertical la banda va a todo el ANCHO y no a toda la pantalla: a
     `100dvh` se vería el 61,6% del archivo con 2,16× de aumento; a todo el
     ancho con `--par-h` se ve el 83% con 1,41×. Más nítido, más pieza en
     cuadro, y sigue siendo de borde a borde: no es una tarjeta, es una banda.
     Y deja el texto sobre negro y no sobre la evidencia, que en este capítulo
     es lo correcto: nada se pone encima de la prueba. */
  html.js .par{
    position: relative; display: block; overflow: clip;
    height: var(--par-h); margin-inline: calc(-1 * var(--sangra));
  }
  html.js .par__caja{ position: absolute; inset: 0; }
  html.js .par__foto{
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 53% 50%;   /* el centro de la esfera del reloj */
  }
  html.js .par__caja--cic{
    --cruce: clamp(0, calc((var(--p, 1) - .38) / .38), 1);
    opacity: var(--cruce);
    /* Calce medido sobre los archivos reales por correlación de gradiente:
       sin ajuste 0,5967 → con ajuste 0,6301. Las perillas cierran el último 1%;
       el recorte NO se toca: está medido y moverlo desalinea todo lo demás. */
    --ajuste-x: .21%;
    --ajuste-y: -.34%;
    --ajuste-s: .012;
    transform: translate(calc(.7% + var(--ajuste-x, 0%)), var(--ajuste-y, 0%))
               scale(calc(1.008 + var(--ajuste-s, 0)));
    transform-origin: 53% 65%;
  }
  html.js .par__pie{
    position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
    padding: .5rem var(--sangra);
    background: linear-gradient(to top, rgba(0,0,0,.72), transparent);
    color: var(--hueso);
  }
  html.js .pastilla{ left: var(--sangra); }
  .pastilla{
    --q: clamp(0, calc((var(--p, 1) - .78) / .06), 1);
    opacity: var(--q); transform: translateY(calc(-8px * (1 - var(--q))));
    top: clamp(.7rem, 2vh, 1.1rem);
  }
  /* El pie del par no se «opera»: un dato no se liga al scroll. Cambia por
     clase, con transición. El umbral lo lee el JS de `--pie-cambia`. */
  html.js .par__caja--cic .par__pie{ opacity: 0; transition: opacity .32s var(--ease); }
  .cap--cicatrizado.pie-cambiado .par__caja--cic .par__pie{ opacity: 1; }
  .cap--cicatrizado.pie-cambiado .par__caja--fresco .par__pie{ opacity: 0; }
  .par__caja--fresco .par__pie{ transition: opacity .32s var(--ease); }

  /* La ranura: el h2 y los cuatro versos se turnan en una sola altura fija.
     Apilados no caben, y acumulados compiten con el cruce, que es lo que hay
     que estar mirando. La resta de dos `clamp()` es un pulso: entra, se
     sostiene, sale. CSS puro y compositor puro — cero JS nuevo.
     Vive SOLO bajo `html.js`: si el pulso viviera en la capa base, sin JS
     `var(--p,1)` daría 1 − 1 = 0 y los cuatro versos saldrían invisibles. */
  html.js .cap--cicatrizado .cic__col{ position: relative; height: var(--ranura-cic); }
  html.js .cap--cicatrizado .cic__col > .cap__entra{
    position: absolute; inset: 0;
    opacity: calc(1 - clamp(0, calc((var(--p, 1) - .05) / .03), 1));
  }
  html.js .versos--cic{ position: absolute; inset: 0; display: block; margin: 0; }
  html.js .versos--cic li{
    position: absolute; inset: 0; margin: 0;
    opacity: calc( clamp(0, calc((var(--p, 1) - var(--in, 0)) / .04), 1)
                 - clamp(0, calc((var(--p, 1) - var(--out, 2)) / .04), 1) );
  }

  /* En los dos capítulos que sangran a pantalla completa el texto se POSA
     abajo, sobre el tramo que el velo sostiene. Centrado quedaba en mitad de
     la foto, donde el velo vale 0,22 y la ficha no se lee: se ve en captura y
     en ninguna cifra. */
  html.js .cap--serena .cap__pin, html.js .cap--cierre .cap__pin{ align-content: end; }
  html.js .cap--serena .velo--izq, html.js .cap--cierre .velo--izq{
    display: block;
    background: linear-gradient(to top,
      rgba(0,0,0,.70) 0%, rgba(0,0,0,.68) 50%, rgba(0,0,0,.46) 70%, rgba(0,0,0,0) 94%);
  }

  /* ─── cap. 4 · la referencia calza sobre la piel ──────────────────
     Un panel de `--casco` que se corre hacia la derecha, con el cabo montado
     en su borde. Compositor puro: la foto no se toca, se mueve lo que la tapa.
     `--tapa-w: 52%` en vertical porque la caja es la foto entera y no la
     pantalla: la fotografía impresa arranca en el 47% del ancho del archivo,
     así que la tapa cerrada tiene que llegar hasta ahí. */
  html.js .tapa{
    display: block; position: absolute; inset: 0 0 0 auto; width: var(--tapa-w); z-index: 1;
    background: var(--casco);
    border-left: 1px solid var(--cobre);
    box-shadow: -1px 0 0 var(--nacar);
    transform: translateX(calc(100% * clamp(0, calc((var(--p, 1) - .10) / .52), 1)));
  }
  .cap--retratos .versos li{
    --q: clamp(0, calc((var(--p, 1) - (.66 + .08 * var(--t))) / .05), 1);
    opacity: var(--q);
  }
  .cap--retratos .versos li > span{ transform: translateY(calc(10px * (1 - var(--q)))); }

  /* ─── cap. 5 · el cruce del dúo ───────────────────────────────────
     El cruce es de MATERIAL, no de filtro: obras suyas en negro y gris ceden
     el paso a obras suyas a color. En vertical ocurre en DOS ranuras y no en
     tres, y es una decisión de material: las seis placas miden 720px de ancho,
     y a tres columnas cada placa pediría 5,0× de aumento. A dos, 1,07×. La
     tercera dupla —espalda ↔ Pennywise— baja a la banda, a todo el ancho. Se
     muestra la misma cantidad de obra; lo que cambia es dónde. */
  html.js .cap--rango .rango__escena{ position: relative; height: calc(var(--placa-h) + 2.6rem); }
  html.js .cap--rango .triada{
    position: absolute; inset: 0; align-content: start;
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
    margin-inline: calc(-1 * var(--sangra));
  }
  html.js .cap--rango .triada .pl--cristo, html.js .cap--rango .triada .pl--payaso{ display: none; }
  html.js .triada--color .placa{
    opacity: clamp(0, calc((var(--p, 1) - (.14 + .06 * var(--t))) / .38), 1);
  }
  html.js .triada .placa{ margin-top: 2.2rem; position: relative; }
  html.js .triada .placa img{ height: var(--placa-h); width: 100%;
                              aspect-ratio: auto; object-fit: cover; }
  html.js .triada__rot{ position: absolute; top: 0; left: var(--sangra); }
  /* El pie de cada placa va SOBRE su foto y ARRIBA, no abajo. Debajo caía
     justo encima de la marca de agua de Rodrigo en las seis placas; y dos pies
     de dos tríadas en el mismo sitio se leen encimados durante todo el cruce.
     Arriba es la esquina opuesta al sello en las seis. */
  html.js .triada .dato{
    position: absolute; left: 0; right: 0; top: 0; bottom: auto; margin: 0;
    padding: .5rem .6rem; color: var(--hueso);
    background: linear-gradient(to bottom, rgba(0,0,0,.78), rgba(0,0,0,0));
  }
  html.js .triada--gris .dato{
    opacity: calc(1 - clamp(0, calc((var(--p, 1) - .14) / .38), 1));
  }
  html.js .triada--color .triada__rot{
    opacity: clamp(0, calc((var(--p, 1) - .62) / .06), 1);
  }
  html.js .triada--gris .triada__rot{
    opacity: calc(1 - clamp(0, calc((var(--p, 1) - .62) / .06), 1));
  }
  html.js .triada--color .triada__rot, html.js .triada--gris .triada__rot{ grid-column: 1 / -1; }
  .cap--rango .cabo--rango{
    width: 4rem;
    transform: translateX(calc(10rem * clamp(0, calc((var(--p, 1) - .62) / .06), 1)));
  }
  /* Los tres versos suben al pin: son los que narran el cruce y sin ellos el
     pin deja 223px de aire — un valle DENTRO del pin, que es un defecto tan
     real como el valle de texto y no lo caza ninguna cifra. */
  html.js .cap--rango .versos--rango{
    display: block; position: relative; margin: clamp(.6rem, 2vh, 1rem) 0 0;
    height: min(11svh, 72px);
  }
  html.js .cap--rango .versos--rango li{
    position: absolute; inset: 0; margin: 0;
    opacity: calc( clamp(0, calc((var(--p, 1) - var(--in, 0)) / .04), 1)
                 - clamp(0, calc((var(--p, 1) - var(--out, 2)) / .04), 1) );
  }
  html.js .cap--rango .banda > .versos{ display: none; }
  html.js .cap--rango .rango__tercera{
    display: grid; gap: 2px; margin: clamp(1.4rem, 4vh, 2.2rem) calc(-1 * var(--sangra)) 0;
  }
  .rango__pie{
    --q: clamp(0, calc((var(--p, 1) - .80) / .06), 1);
    opacity: var(--q);
  }

  /* ─── cap. 6 · los tres pasos se encienden ────────────────────────
     Se encienden, NO se turnan: el paso anterior no se apaga. Al final los
     tres están al 100% y la ficha se lee completa — que es como tiene que
     quedar, porque es la ficha que el cliente va a volver a leer. */
  html.js .cap--trabajo .versos--trabajo{ display: none; }
  html.js .cap--trabajo .versos--trabajo-v{ display: grid; }
  .paso{
    --q: clamp(0, calc((var(--p, 1) - (.16 + .24 * var(--t))) / .14), 1);
    opacity: calc(.22 + .78 * var(--q));
  }
  .paso__cuerpo{ transform: translateY(calc(10px * (1 - var(--q)))); }
  .paso__regla { transform: scaleX(var(--q)); transform-origin: left; }
  .firma{
    --q: clamp(0, calc((var(--p, 1) - .80) / .06), 1);
    opacity: var(--q);
  }

  /* ─── cap. 7 · la ficha se llena, fila por fila ───────────────────
     El efecto más chico que además significa algo: la ficha técnica del lugar
     se completa mientras la miras, y los datos que faltan se ven faltar. En
     vertical los tiempos se comprimen de .14 a .12 por fila para que la sexta
     llegue antes del hold: seis filas × 0,14 = 0,84 no deja freno con 0,90. */
  html.js .cap--serena .cap__lienzo{ position: absolute; inset: 0; }
  html.js .cap--serena .foto--studio{ height: 100%; }
  html.js .cap--serena .serena__rejilla .placa--rodrigo{ display: none; }
  html.js .cap--serena .placa--rodrigo--banda{ display: block;
    margin: clamp(1.4rem, 4vh, 2.2rem) calc(-1 * var(--sangra)) 0; }
  .fila{
    --q: clamp(0, calc((var(--p, 1) - (.18 + .12 * var(--t))) / .10), 1);
    opacity: var(--q);
  }
  .fila__regla{ transform: scaleX(var(--q)); transform-origin: left; }

  /* ─── cap. 8 · el mensaje se arma y el botón se enciende ──────────
     Es literalmente la acción: el visitante ve armarse el mensaje que va a
     mandar, y cuando la lista está completa el botón deja de ser un contorno.
     Los tiempos se comprimen en vertical porque son cinco líneas MÁS tres
     botones sobre una pista de 0,95. */
  html.js .cap--cierre .cap__lienzo{ position: absolute; inset: 0; }
  html.js .cap--cierre .foto--cierre{ height: 100%; }
  .dato-linea{
    --q: clamp(0, calc((var(--p, 1) - (.14 + .10 * var(--t))) / .08), 1);
    opacity: var(--q);
  }
  .dato-linea__txt{ display: block; transform: translateY(calc(8px * (1 - var(--q)))); }
  .salida{
    --q: clamp(0, calc((var(--p, 1) - .82) / .06), 1);
    opacity: var(--q);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   6 · BLOQUE A — el único breakpoint de la hoja, solo ancho.
   1025px es el número de la casa. No hay un segundo número en ninguna parte.
   Acá va layout de escritorio y nada más: ni un `--p`, ni un `transform`.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px){
  :root{
    --piso: 0px;
    --cinta-h: 24px; --barra-h: 56px;
    --pildora-h: 0px;                       /* la píldora vuelve a flotar: no reserva pie */
  }

  .cinta{ display: flex; }
  .barra__sello{ height: 34px; }
  .barra__chip{ display: none; }
  .barra__dato{ display: inline; }
  .barra__derecha{ gap: 1.1rem; }

  .micro{ display: block; }

  /* La píldora vuelve a ser píldora: flotante, redondeada, abajo a la derecha. */
  .pildora{
    left: auto; right: 1rem; bottom: max(1rem, env(safe-area-inset-bottom));
    max-width: min(22rem, calc(100vw - 2rem));
    min-height: 0; display: block; border-radius: 6px;
    padding: .72rem 1.05rem; padding-bottom: .72rem;
    border-top: 0; box-shadow: 0 12px 34px rgba(0,0,0,.6);
    white-space: normal; overflow: visible;
  }
  .pildora__larga { display: inline; }
  .pildora__corta { display: none; }

  /* el texto vive en una columna lateral: se suma el eje horizontal */
  .velo--izq{ display: block; background:
      linear-gradient(to top,  rgba(0,0,0,.52) 0%, rgba(0,0,0,0) 62%),
      linear-gradient(90deg,   rgba(0,0,0,.70) 0%, rgba(0,0,0,.34) 46%, rgba(0,0,0,0) 78%); }

  .cap__marco{ padding-block: clamp(2.2rem, 7vh, 4rem); }
  .banda{ padding-block: clamp(2.6rem, 8vh, 4.2rem); }
  .banda__texto, .banda .versos{ margin-inline: 0; }
  .banda--hero{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  .banda--hero .versos{ margin-bottom: 0; }

  .cap--hero .hero__foto{ object-position: 57% 33%; }
  .cap--hero .cap__marco{ padding-block: var(--tope) clamp(4rem, 12vh, 6rem); }
  .cap--hero .hero__texto, .cap--hero .hero__pie{ max-width: 46rem; }
  .pista{ bottom: max(.9rem, env(safe-area-inset-bottom)); }

  .perla__rejilla{ grid-template-columns: min(34vw, 380px) minmax(0, 1fr);
                   gap: clamp(2rem, 5vw, 3.4rem); align-items: center; }
  .placa--perla img{ height: auto; aspect-ratio: 2 / 3; object-position: 46% 42%;
                     border: 1px solid var(--borde); }
  .placa--perla{ margin-inline: 0; }
  .placa--perla figcaption{ padding-inline: 0; }
  .sello-grande img{ width: clamp(240px, 36vh, 320px); max-width: 100%; }

  .cic__rejilla{ grid-template-columns: min(34vw, 420px) minmax(0, 1fr);
                 gap: clamp(2rem, 5vw, 3.4rem); align-items: center; }

  .cap--retratos .cap__lienzo{ position: absolute; inset: 0; }
  .cap--retratos .ret__cuadro{ position: absolute; inset: 0; width: auto; margin-inline: 0; }
  /* `40% 4%` y no `40% 42%`: a 1440×900 un cuadro 1:1 muestra el 62,5% de su
     alto, y el sello de Rodrigo vive entre el 62% y el 93%. Con 42% el sello
     entraba cortado por la mitad y del tamaño de un puño. Con 4% queda
     completamente fuera y las dos caras —el capítulo entero— siguen en cuadro. */
  .cap--retratos .cap__foto{ aspect-ratio: auto; width: 100%; height: 100%;
                             object-position: 40% 4%; }

  /* El ancho de la escena se deriva del alto de la placa para que las tres
     midan 3:4 exactas: con `width:100%` y `height` declarados a la vez, la
     `aspect-ratio` se ignora y las placas salían casi cuadradas. */
  .rango__escena{ grid-template-columns: minmax(0, 1fr);
                  width: min(100%, calc(min(50vh, 470px) * 2.25 + 24px));
                  margin-inline: auto; }
  .triada{ gap: 12px; }
  .triada .placa img{ height: min(50vh, 470px); }
  .pl--cristo  img{ object-position: 48% 26%; }
  .pl--leon    img{ object-position: 45% 40%; }
  .pl--espalda img{ object-position: 50% 32%; }
  .pl--walter  img{ object-position: 50% 34%; }
  .pl--manga   img{ object-position: 50% 38%; }
  /* 7% y no 30%. La placa recorta al 75% del alto de este archivo y el sello de
     Rodrigo vive justo en el 70%–76%: no hay encuadre que lo deje fuera sin
     perder la cara. Se hace lo contrario —dejarlo ENTERO— y 7% es el valor que
     lo mete completo con la cara del payaso todavía centrada. */
  .pl--payaso  img{ object-position: 50% 7%; }

  /* La columna vuelve a ser columna: la firma regresa bajo los versos, en su
     sitio de siempre, sin haber movido una línea del HTML. */
  .trabajo__rejilla{ grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
                     gap: clamp(2rem, 5vw, 3.6rem); align-items: start; }
  .trabajo__col{ display: block; }
  .paso__glosa{ display: inline; }
  .cap--trabajo .paso .dato{ display: block; }
  .cap--trabajo .paso__clave{ display: block; }
  .cap--trabajo .paso__bajada--01{ display: block; }
  .cap--trabajo .firma{ margin-top: clamp(.9rem, 2.6vh, 1.6rem); }
  .cap--trabajo .paso__lista li{ padding-block: clamp(.22rem, .85vh, .6rem); }
  .cap--trabajo .pasos{ gap: clamp(.5rem, 1.5vh, 1rem); }
  .banda--trabajo{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
                   gap: clamp(1.4rem, 3vw, 2.4rem); }
  .banda--trabajo .banda__glosa{ display: none; }

  .cap--serena .cap__lienzo{ position: absolute; inset: 0; }
  /* El sello de Rodrigo ocupa el 72%–99% del alto de esta foto. A 1440×900 se
     ve el 62,5%: con 25% el sello queda completamente fuera y la camilla y el
     muro petróleo —lo que tiene que sobrevivir— siguen en cuadro. */
  .cap--serena .foto--studio{ height: 100%; object-position: 52% 25%; }
  .serena__rejilla{ grid-template-columns: minmax(0, 1fr) min(20vw, 240px);
                    gap: clamp(2rem, 4vw, 3rem); align-items: start; }
  .cap--serena .cap__marco--izq{ max-width: 62rem; }

  .cap--cierre .cap__lienzo{ position: absolute; inset: 0; }
  /* Misma razón que el capítulo 4: el sello vive entre el 63,5% y el 93,75%
     del alto. Con 2% queda fuera y los dos ojos azules siguen en cuadro. */
  .cap--cierre .foto--cierre{ height: 100%; object-position: 40% 2%; }
  .cap--cierre .cap__marco--izq{ max-width: 48rem; }
  .botones{ grid-auto-flow: row; justify-items: start; gap: clamp(.5rem, 1.4vh, .8rem); }
  .btn{ display: inline-block; text-align: left; }

  .muro{ padding-inline: var(--sangra);
         padding-block: clamp(1.4rem, 4vh, 2.4rem) clamp(2.4rem, 7vh, 3.6rem); }
  .muro__grilla{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
  .muro__grilla img{ height: min(16vh, 170px); aspect-ratio: auto; }
  .muro__pie{ padding-inline: 0; }
  .muro .pendiente{ margin-inline: auto; }

  .faq__marco{ padding-block: clamp(2.6rem, 8vh, 4.4rem); }
  .pie{ padding-block: clamp(2.4rem, 7vh, 3.6rem) 1.6rem; }
  .pie__marco{ grid-template-columns: auto minmax(0, 1fr) auto auto;
               gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   7 · BLOQUE B — el mismo breakpoint, ancho + movimiento.
   SOLO lo que difiere de M. Mismo prefijo `html.js` que en M, y después de A:
   así una regla vertical nunca gana una pelea que no debía pelear. Donde el
   valor es idéntico en los dos, no se repite.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference){

  /* Las cajas de escena, en escritorio. Una variable no tiene especificidad:
     redefinirla acá basta para que todas las reglas de M cambien de tamaño. */
  :root{
    --par-h:   min(58vh, 560px);
    --placa-h: min(50vh, 470px);
    --tapa-w:  46%;
    --z0:      1.30;
    --drift:   3vh;
  }

  /* Las pistas de escritorio. */
  .cap--hero        { --pista: 120vh; }
  .cap--perla       { --pista: 100vh; }
  .cap--cicatrizado { --pista: 130vh; --pie-cambia: .72; }
  .cap--retratos    { --pista: 100vh; }
  .cap--rango       { --pista: 120vh; }
  .cap--trabajo     { --pista: 110vh; }
  .cap--serena      { --pista: 100vh; }
  .cap--cierre      { --pista: 100vh; }

  /* El marco pineado de escritorio. Va acá y no en M porque A declara el suyo
     para el hero (`.cap--hero .cap__marco`) con la misma especificidad: sin
     esta copia, A —que va después de M— le ganaría al marco pineado y el hero
     de escritorio cambiaría de relleno. Sin JS, A manda, que es lo correcto. */
  .cap--riel .cap__marco, .cap--cicatrizado .cap__marco{
    padding-block: calc(var(--tope) + clamp(.6rem, 2vh, 1.4rem))
                   calc(var(--pie-libre) + clamp(1rem, 3.4vh, 2rem));
  }

  /* La columna de texto se limita por MEDIDA, no por un `padding-right` que
     estrangula las rejillas de adentro. */
  .cap--retratos .cap__marco--izq{ max-width: 46rem; }

  /* ─── cap. 1 ─── */
  html.js .cap--hero .hero__foto{
    --e: clamp(0, calc((var(--p, 1) - .08) / .70), 1);
    transform-origin: 57% 33%;
  }
  html.js .cap--hero .hero__texto{ --q: clamp(0, calc((var(--p, 1) - .62) / .08), 1); }

  /* ─── cap. 2 ─── */
  .capa{ --q: clamp(0, calc((var(--p, 1) - (.16 + .20 * var(--t))) / .12), 1); }
  .cap--perla .cabo{ --q: clamp(0, calc((var(--p, 1) - .72) / .10), 1); }
  .sello-grande{ --q: clamp(0, calc((var(--p, 1) - .80) / .08), 1); }
  html.js .cap--perla .perla__col .sello-grande{ display: block; }
  html.js .cap--perla .perla__tapa{ display: none; }

  /* ─── cap. 3 ─── */
  html.js .par{ margin-inline: auto; aspect-ratio: 3 / 4; }
  html.js .par__foto{ object-position: 50% 52%; }
  html.js .par__caja--cic{ --cruce: clamp(0, calc((var(--p, 1) - .18) / .44), 1); }
  html.js .par__pie{ padding: .5rem .7rem; }
  html.js .pastilla{ left: clamp(.6rem, 2vw, 1rem); }
  .pastilla{ --q: clamp(0, calc((var(--p, 1) - .64) / .06), 1); }
  html.js .cap--cicatrizado .cic__col{ position: static; height: auto; }
  html.js .cap--cicatrizado .cic__col > .cap__entra{ position: static; opacity: 1; }
  html.js .versos--cic{ position: static; display: grid;
    margin: clamp(.9rem, 2.6vh, 1.5rem) 0 clamp(1rem, 3vh, 1.6rem); }
  html.js .versos--cic li{
    position: static;
    --q: clamp(0, calc((var(--p, 1) - (.12 + .12 * var(--t))) / .10), 1);
    opacity: var(--q);
  }
  html.js .versos--cic li > span{ transform: translateY(calc(10px * (1 - var(--q)))); }

  /* ─── cap. 4 ─── */
  .cap--retratos .versos li{
    --q: clamp(0, calc((var(--p, 1) - (.62 + .10 * var(--t))) / .08), 1);
  }

  /* ─── cap. 5 ─── */
  html.js .cap--rango .triada{
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-inline: 0;
  }
  html.js .cap--rango .triada .pl--cristo, html.js .cap--rango .triada .pl--payaso{ display: block; }
  html.js .triada--color .placa{
    opacity: clamp(0, calc((var(--p, 1) - (.14 + .05 * var(--t))) / .42), 1);
  }
  html.js .triada__rot{ left: 0; }
  html.js .triada--gris .dato{
    opacity: calc(1 - clamp(0, calc((var(--p, 1) - .14) / .42), 1));
  }
  html.js .triada--color .triada__rot{
    opacity: clamp(0, calc((var(--p, 1) - .56) / .08), 1);
  }
  html.js .triada--gris .triada__rot{
    opacity: calc(1 - clamp(0, calc((var(--p, 1) - .56) / .08), 1));
  }
  .cap--rango .cabo--rango{
    transform: translateX(calc(10rem * clamp(0, calc((var(--p, 1) - .56) / .08), 1)));
  }
  html.js .cap--rango .versos--rango{ display: none; }
  html.js .cap--rango .banda > .versos{ display: grid; }
  html.js .cap--rango .rango__tercera{ display: none; }
  .rango__pie{ --q: clamp(0, calc((var(--p, 1) - .78) / .06), 1); }

  /* ─── caps. 7 y 8 · la composición de escritorio ─── */
  html.js .cap--serena .cap__pin, html.js .cap--cierre .cap__pin{ align-content: center; }
  html.js .cap--serena .velo--izq, html.js .cap--cierre .velo--izq{
    background: linear-gradient(to top,  rgba(0,0,0,.52) 0%, rgba(0,0,0,0) 62%),
                linear-gradient(90deg,   rgba(0,0,0,.70) 0%, rgba(0,0,0,.34) 46%, rgba(0,0,0,0) 78%);
  }

  /* ─── cap. 6 ─── */
  html.js .cap--trabajo .versos--trabajo{ display: grid; }
  html.js .cap--trabajo .versos--trabajo-v{ display: none; }

  /* ─── cap. 7 ─── */
  html.js .cap--serena .serena__rejilla .placa--rodrigo{ display: block; }
  html.js .cap--serena .placa--rodrigo--banda{ display: none; }
  .fila{ --q: clamp(0, calc((var(--p, 1) - (.18 + .14 * var(--t))) / .10), 1); }

  /* ─── cap. 8 ─── */
  .dato-linea{ --q: clamp(0, calc((var(--p, 1) - (.16 + .12 * var(--t))) / .09), 1); }
  html.js .btn{ --b: clamp(0, calc((var(--p, 1) - .72) / .08), 1); }
}

/* Lo cosmético que no depende del pin se apaga aparte. */
@media (prefers-reduced-motion: reduce){
  .pildora, .btn, .paso__regla, .pista, .barra, .faq__marca{ transition: none; animation: none; }
  html.js .pista{ opacity: .85; }
}