/* ═══════════════════════════════════════════════════════════════════════
   NEGRA MATEA · landing-v15.css
   Versionar = archivo nuevo. v1…v14 quedan intactas en esta misma carpeta.

   QUÉ CAMBIÓ EN v15 — la ronda de cuatro auditorías (estructura, tipografía,
   craft, movimiento) y el encargo de Francisco: «más dinamismo, más
   movimiento, un landing inmersivo… la letra principal es ilegible… súbanle
   el nivel».

   LO QUE ESTABA ROTO Y AHORA NO (medido, no mirado):

   · LA LETRA PRINCIPAL. No era Bodoni ni el par de color: era una opacidad.
     `.marca__a/__b` llevaban `opacity: calc(.4 + var(--t) * .6)` atada al
     scroll, y a scroll 0 —el estado en que la página ABRE— eso deja «Matea»
     en 1,94:1 y «La Negra» en 3,12:1 sobre el negro. Con la opacidad fuera,
     los mismos dos colores dan 7,20:1 y 16,02:1. Regla que queda escrita:
     **un efecto ligado al scroll convierte su fotograma inicial en un estado
     de reposo**, así que nada que el visitante vea al llegar puede nacer
     apagado ahí.
   · LOS OCHO CTA. `href="[[WHATSAPP]]"` no empieza por esquema: el navegador
     lo resolvía relativo y cada clic daba 404. Ver el bloque `.falta`.
   · «DOS PRENDAS QUE SE JUNTAN» NO SE JUNTABAN. Viajaban 34% de su propio
     ancho (≈40px en teléfono) hacia un centro que estaba mucho más lejos, así
     que a `--p:1` se veían tres prendas en fila bajo un texto que dice lo
     contrario. Ahora convergen 115%, se cruzan, y la tercera sale del cruce.
   · EL CRÉDITO DE OPERARIA A 1,48:1 y la NAVEGACIÓN A 1,4:1 — las dos por lo
     mismo: viven fuera de `<main>`, o sea fuera de todo `.en-negro`, así que
     heredaban el `--texto-suave` de modo claro (#2A2C3C, tinta para papel
     amarillo) y lo pintaban sobre negro. Se arregló en el HTML con la clase,
     que es donde estaba la causa.
   · EL MENÚ ATERRIZABA EN CAPÍTULOS VACÍOS. Un `href="#cap"` cae al inicio
     del riel, que es donde `--p` vale 0: quien apretaba «La Vuelta» llegaba a
     una pantalla con la pieza y la etiqueta en opacidad 0. `scroll-margin-top`
     negativo entra el ancla al 45% del recorrido.

   LO QUE SUBIÓ DE NIVEL:

   · PESO. Bodoni Moda va de 400 a 900 y se estaba usando el 12% de la fuente
     que ya se descarga. Títulos y wordmark a 750, claim a 600, tracking del
     titán a -.045em. La página pasa de *delicada* a *cartel* sin tocar una
     sola decisión cerrada — y de paso «El Perchero» en amarillo sobre azul
     deja de perder la mitad de sus astas.
   · RADIOS A 0. La paleta dice «el póster es de cartel: cantos vivos», y la
     página tenía cinco radios conviviendo, tres de ellos píldoras de 999px.
     El único radio que sobrevive es el arco del isotipo, que es la forma de
     la marca.
   · EL CORAL, RACIONADO. Aparecía en siete sitios; un color en siete sitios
     es decoración, en dos es un signo. Se queda donde significa: la costura
     de LA VUELTA y la puerta del isotipo.
   · TRES TIPOS DE CAPÍTULO en vez de uno. Ver «el molde», más abajo.

   LO INMERSIVO — y con qué se hizo:

   · **LA LÍNEA SE DIBUJA CON EL SCROLL.** Es la técnica principal de esta
     página, no un efecto: el mundo de esta marca es línea coral sobre negro,
     así que lo que tiene que ocurrir es que esa línea se trace. Las seis
     ilustraciones de Iris entran INLINE (como `<img>` el CSS no las alcanza)
     y cada trazado lleva `pathLength="1"`, así una sola regla los dibuja
     todos sin medir ninguno.
   · **EL TRÍO DE LA VUELTA es el momento alto.** Las tres láminas comparten
     sistema de coordenadas y la tercera reusa el trazado de la primera al
     dígito: entre «Era esto» y «Ahora es esto» el contorno no se mueve, entra
     la tela del otro y baja la costura. «Hecho de dos» ocurriendo.
   · Fondos a sangre, capas con parallax (las ilustraciones vienen separadas
     en fondo/medio/frente a propósito), el retrato rompiendo la simetría de
     toda la página, y los títulos entrando por máscara.
   · Todo anima `transform` y `opacity`. La única excepción es
     `stroke-dashoffset`, que es la técnica misma; se paga solo en el capítulo
     que está en pantalla porque el JS dejó de escribir `--p` en los 16.
   ═══════════════════════════════════════════════════════════════════════

   QUÉ CAMBIÓ EN v14 — la puerta del isotipo vuelve al canon.
   Esta hoja declaraba `.iso { --iso-luz: var(--amarillo) }`, de cuando la
   variable no existía en ninguna parte. Ahora paleta.css la declara como
   --coral, y mi declaración local se la comía: la puerta —que es la
   INTERSECCIÓN, el «hecho de dos» del isotipo— renderizaba amarilla, o sea
   invisible sobre el amarillo de la firma del cierre. Se quita el override
   y manda la paleta.
   Apareció corriendo la comprobación que sugirió brandbook sobre las
   variables más usadas. Su arreglo estaba bien; lo que lo tapaba era mío.

   QUÉ CAMBIÓ EN v13 — EL OJO se queda SIN ilustración (la medición ganó:
   un calce conceptual no fabrica espacio vertical) y EL ESPEJO pasa al
   recorte de 700×300. No es la misma pieza achicada: el arco conserva su
   radio exacto y se muestra menos riel, así que baja la altura sin tocar
   la familia. Aspecto 2,33 en vez de 1,8 → pide bastante menos alto.

   QUÉ CAMBIÓ EN v12 — dos cosas:
     · El modo flujo que entró en v11 reintrodujo la mentira de proporción
       justo en el hueco que más importa: `hero-yoel` salía APAISADO (1,56)
       en una ventana de escritorio baja, bajo un pie que dice «vertical
       4:5». Lo pilló Iris. Su arreglo, verificado con la sonda: atar el
       alto también al ANCHO disponible, no solo al viewport.
     · Entran las ilustraciones de línea (Iris): reemplazan el riel de
       prendas en EL PERCHERO —dos piezas diciendo lo mismo en una pantalla
       es peor que cualquiera sola— y se suman en EL OJO y EL ESPEJO.

   QUÉ CAMBIÓ EN v11 — el pineado tiene un suelo de altura, y ahora se
   declara. Medido: por debajo de ~630px de viewport los capítulos empiezan
   a cortarse (a 320×568 se cortaban cinco). No se apretó nada para forzar
   que entren: se aplicó la ley del oficio —«un capítulo que no cabe no se
   pinea: fluye»— reusando la MISMA degradación que ya existía para
   reduced-motion. Un solo bloque, dos disparadores.
   El umbral es 620px: 630 es el suelo empírico y 640 (el Android barato
   más común) tiene 66px de holgura, así que se queda pineado.
   Ojo: esto también desactiva el pineado en una ventana de ESCRITORIO
   baja —1440×580, un portátil con un panel abajo—, y eso es correcto: ahí
   el pin también cortaba. Es mejor perder el freno que cortar el contenido.

   QUÉ CAMBIÓ EN v10 — el aviso de ilustración estaba en --texto-tenue.
   Lo levantó Vera con una frase que se queda como regla: «un aviso de
   honestidad que hay que buscar con lupa deja de ser honesto». Sube a
   --texto-suave. Es la única regla de esta hoja que NO se puede apagar
   para ganar contraste de diseño ni espacio: si algo tiene que ceder,
   cede otra cosa.

   QUÉ CAMBIÓ EN v9 — las seis imágenes generadas salieron de la landing
   (decisión del brandbook: una pieza no puede afirmar un hecho que no
   ocurrió, y un antes/después de clóset afirma que ese trabajo se hizo).
   Los huecos volvieron a su estado documentado, esperando material real.
   Dos consecuencias:
     · en v8 se había apretado media página para hacerle sitio a los avisos
       «Ilustración…». Sin ellos sobran 226-406px por capítulo, así que se
       devuelve lo recortado: las ilustraciones vuelven a su alto y el
       comparador a su aire.
     · las reglas que solo sirven con fotos NO se borran: quedan agrupadas
       y marcadas como DORMIDAS. Borrarlas obligaría a reinventarlas el día
       que llegue el material —y la trampa de «CSS que sobrevive a su DOM»
       se evita documentando, no amputando lo que sí va a volver.

   QUÉ CAMBIÓ EN v8 — llegaron las fotos (Iris), el copy afinado (Vera) y los
   avisos «Ilustración…» bajo cada imagen generada. Tres consecuencias:
     · .rotulo-ilustracion vivía en un <style> dentro del index. Una segunda
       hoja suelta es una fuente de estilos que el siguiente no encuentra:
       se absorbió acá y el bloque del HTML se borró.
     · esos avisos suman ~60px por capítulo y a 360×640 desbordaron dos
       pines (vuelta-precio -43, dedia -44). NO se recortan: son la parte
       honesta de la página. Lo que cede es todo lo demás.
     · AGUA se movió al final (ver su bloque en la rampa).

   QUÉ CAMBIÓ EN v7 — la paleta terminó de aterrizar en la del póster de
   Yoel: cuatro colores planos (negro, azul, coral, amarillo) y EL PAPEL ES
   AMARILLO. La escala --piel-NN quedó como capa de compatibilidad y hoy es
   un gris azulado: seguir usándola de fondo dejaba la mitad clara de la
   landing en gris, o sea fuera de la marca.
   La rampa de fondos pasa a ser la que el propio canon declara en su regla
   4: NEGRO → AZUL → CORAL → AMARILLO. Y calza literal con el color de cada
   línea: AGUA es azul-hondo, EL PERCHERO «del póster ES azul», CLÓSET
   ADENTRO es la mano (coral), DE DÍA es el amarillo mismo.
   Los acentos se eligieron contra la tabla de contrastes medida del canon,
   no a ojo: el coral pleno NO escribe sobre amarillo (2,2:1) — para eso
   está --coral-hondo (4,7:1); el azul pleno no escribe sobre negro (3,1:1)
   — para eso está --azul-claro (6,5:1).

   QUÉ CAMBIÓ EN v6 — la paleta se reescribió entera. Ya no es una gama de
   tonos de piel: es la del póster de Yoel (negro azulado, crudo, destello
   lima, hilo coral, espejo azul). Los NOMBRES de las variables se
   conservaron, así que casi todo siguió solo. Lo que NO siguió solo:

     · El pulso dejó de subir. Con los valores nuevos, --espejo-hondo (L≈49)
       es más OSCURO que --piel-07 (L≈74) y --espejo-alto (L≈189) más oscuro
       que --piel-02 (L≈237): dos capítulos retrocedían a media página, justo
       lo que prohíbe la regla 4 de la paleta. Se recalculó la rampa completa
       por luminancia y ahora sube monótona: 15 → 29 → 47 → 74 → 81 → 219 →
       237 → 248. EL ESPEJO conserva su frío donde el canon lo pone de
       verdad: en la SUPERFICIE de la UI (--espejo-alto) y en su acento, no
       como fondo de página.
     · Acentos que dejaron de leerse. --linea-ronda pasó a --espejo-hondo,
       que es tinta para fondo claro y sobre un capítulo oscuro desaparece;
       y --hilo pasó de rojo oscuro a coral (#EB7D51), que sobre crudo no da
       contraste. Regla que quedó: sobre oscuro van las variantes -alto, y
       sobre claro las -tinta / -bajo.
     · Las prendas seguían pintadas con hexadecimales de la gama vieja
       (estaban a mano en el HTML). Ahora salen de las variables, y los
       nombres de la demo se corrigieron: decía «falda café» sobre un gris.

   QUÉ CAMBIÓ EN v5 — el claim creció y cambió de preposición:
     «Déjame entrar EN tu clóset.» + bajada «y no vas a salir más.»
   La bajada es PARTE del claim, no un subtítulo. La composición es la
   canónica del brandbook y se copia tal cual: todo el bloque escala desde
   UN solo font-size en .claim, y la bajada sale de él en em
   (--claim-razon .42 · --claim-aire .30em · --claim-alto .98). El tamaño
   de la bajada no se fija nunca a mano.
   Dos consecuencias que hubo que resolver acá:
     · con el tamaño anterior la primera línea medía 22px en teléfono, y a
       .42 la bajada caía a 9px — ilegible. En vez de inventar una razón
       propia (el brandbook ya tiene su excepción para piezas chicas), se
       subió la escala del claim: es el hero, tiene que mandar igual.
     · lo que antes eran «claims chicos» —el de asesoría y el de DE DÍA—
       pasó a .frase: `.claim` queda reservada a la composición canónica,
       que ahora arrastra una bajada.

   QUÉ CAMBIÓ EN v4 — cuatro bugs que solo aparecieron al MIRAR las
   capturas del piloto, capítulo por capítulo:
     · LA VUELTA salía alineada a la izquierda pese a `#vuelta .cap__pin
       { text-align:center }`: el hijo `.centro--texto` DECLARA left, y una
       declaración directa le gana a la herencia por lejos que venga el id.
       (la trampa de «especificidad silenciosa» del skill, en su variante
       de herencia). Se arregla apuntando al hijo, no al padre.
     · un título de dos líneas partía mal («Hasta lo / roto.»): text-wrap.
     · el riel del perchero cortaba la prenda del borde a cuchillo, y eso
       se lee como error, no como riel que sigue: máscara en los cantos.
     · cifras y títulos de tarifa reventaban su columna en vertical.

   QUÉ CAMBIÓ EN v3, y por qué — todo salió de MEDIR, no de mirar:
   El piloto de landing-pro daba verde (ningún sticky más alto que la
   pantalla) mientras CINCO capítulos perdían contenido: un pin de 100svh
   con overflow:hidden puede tener adentro un bloque de 1.400px, y eso no
   corta el capítulo, corta el contenido, en silencio. Medido con una
   sonda propia, a 390×844, 820×720 y 1440×900:
       nombre  -231 · adentro -440 · espejo -287 · vuelta -448 · dedia -91
   La ley del skill dice «un capítulo que no cabe no se pinea». Acá se
   tomó el otro camino, que era el correcto: los capítulos no cabían
   porque llevaban dos ideas cada uno. Se partieron en dos —el servicio y
   su precio, la línea y su prueba— y las fotos dejaron de poder crecer
   sin techo. Un pin, una idea.

   Las cuatro leyes que rigen la estructura (landing-pro):
     1 · ningún position:sticky más alto que la pantalla → .cap__pin = 100svh
     2 · el riel va por fuera, el sticky por dentro      → .cap > .cap__pin
     3 · un solo breakpoint                              → 900px, siempre min-width
     4 · el CSS manda y el JS obedece                    → el JS lee position del pin

   UNA NOTA DE TIPOGRAFÍA, porque contradice al skill a propósito:
   landing-pro manda mono para seriales y certificados. La paleta de esta
   marca dice «dos familias, no se agrega una tercera». Manda el canon del
   cliente. El rol que haría el mono lo hace --fuente-etiqueta (Archivo en
   mayúsculas con tracking abierto) + font-variant-numeric: tabular-nums.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* El h2 de un capítulo pineado NO puede medirse solo por ancho: en un
     portátil bajo revienta el sticky (corolario de la ley 1). Este es el
     paso --t-h1 de la paleta, acotado también por altura. Es la ÚNICA
     escala de h2 de la página: ningún capítulo declara la suya. */
  --t-h1-pin:    clamp(2.1rem, min(8.8vw, 6.8svh), 4rem);
  --t-titan-pin: clamp(2.8rem, min(14vw, 11svh), 6.4rem);
  /* Una sola escala de claim para el hero y para el cierre. Sube respecto de
     v4 porque la bajada mide .42 de esta cifra: por debajo de ~33px la bajada
     deja de leerse en un teléfono. Medido también por altura, que va pineado. */
  --t-claim-pin: clamp(2rem, min(8.6vw, 6svh), 3rem);

  /* Escala del riel: en vertical los capítulos frenan un poco menos.
     Un solo número de corte en todo el archivo. */
  --riel-esc: .88;
}
@media (min-width: 900px) { :root { --riel-esc: 1; } }


/* ───────────────────────── base ───────────────────────── */

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

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

body {
  margin: 0;
  background: var(--negro);
  color: var(--amarillo);
  font-family: var(--fuente-texto);
  font-size: var(--t-cuerpo);
  font-weight: var(--peso-normal);
  line-height: var(--alto-cuerpo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
/* height:auto NO es opcional donde haya atributos width/height: actúan
   como CSS de baja prioridad y reservan un boquete o estiran la imagen. */
img { height: auto; display: block; }

a { color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

::selection { background: var(--coral); color: var(--negro); }

/* El anillo de foco de la paleta es `rgba(36,82,202,.55)`, o sea el azul de
   sistema: no es de esta marca y sobre el capítulo azul directamente
   desaparece. Cada capítulo enfoca con SU propio acento, y sin radio. */
:focus-visible {
  outline: none;
  border-radius: 0;
  box-shadow: 0 0 0 3px var(--acento-cap, var(--amarillo)), 0 0 0 5px var(--fondo);
}


/* ─────────── el motor de escena ───────────
   .esc lee el avance del capítulo (--p, de 0 a 1, lo escribe el JS) y lo
   remapea a su propio tramo con --a (inicio) y --r (1 / duración).
   Sin JS, --p no existe: vale 1 y todo queda en su estado FINAL. Es el JS
   el que devuelve las cosas al inicio, nunca al revés. */
.esc {
  --t: clamp(0, (var(--p, 1) - var(--a, 0)) * var(--r, 1), 1);
  /* --e es --t con easeOutCubic, escrito en calc(). El scroll es lineal; la
     RESPUESTA no tiene por qué serlo. Sin curva, cada efecto se detiene en
     seco en el instante en que --t llega a 1 y nada asienta: con la curva el
     elemento llega rápido y SE POSA, y la última parte del recorrido pasa a
     ser un margen en el que ya está donde tiene que estar — que es justo lo
     que hace que un capítulo pineado no se sienta «a medias».
     Comprobado en el motor: t=.25 → .578 · t=.5 → .875 · t=.75 → .984.
     --t se conserva para lo que deba seguir al dedo palmo a palmo (el tachón
     del insulto, la señal de «baja»). */
  --e: clamp(0, calc(1 - (1 - var(--t)) * (1 - var(--t)) * (1 - var(--t))), 1);
  /* --e2 va un poco por detrás de --e: sirve para lo que tiene que ocurrir
     DESPUÉS dentro del mismo tramo (la tela entra cuando el contorno ya se
     dibujó, la costura después de la tela). Un segundo tiempo sin gastar otro
     elemento .esc ni otro tramo. */
  --e2: clamp(0, calc((var(--t) - .45) * 1.82), 1);
  /* y un tercero, para el remate de una secuencia de tres tiempos: el
     contorno, la tela, la costura. Solo lo usa LA VUELTA. */
  --e3: clamp(0, calc((var(--t) - .70) * 3.34), 1);
}


/* ───────────────────── riel + sticky (leyes 1 y 2) ───────────────────── */

.cap {
  position: relative;
  height: calc(var(--riel, 2) * var(--riel-esc) * 100svh);   /* el riel */
}

/* EL ANCLA NO CAE AL ARRANQUE DEL RIEL.
   Un href="#cap" aterriza en el offsetTop de la sección, y ahí --p vale 0: o
   sea, en el estado en que lo escenificado del capítulo TODAVÍA NO OCURRIÓ.
   Medido antes de esto: llegando por el menú, «La Vuelta» daba la pieza nueva
   y la etiqueta en opacidad 0, «Clóset Adentro» los tres veredictos en .16 y
   «Ronda» las bolsas en .14. Un menú que lleva a una pantalla incompleta es
   peor que no tener menú.
   Se entra al 45% del recorrido, que es donde la escena ya se leyó y todavía
   queda pantalla por delante. El recorrido de un capítulo es (riel - 1)
   pantallas; el margen va en NEGATIVO porque el ancla debe adelantarse.
   Los 52px del final despejan la barra fija (44px + aire). */
.cap[id] {
  scroll-margin-top: calc(52px - 45 * (var(--riel, 2) * var(--riel-esc) - 1) * 1svh);
}
/* con los rieles colapsados no hay recorrido que adelantar */
@media (prefers-reduced-motion: reduce), (max-height: 620px) {
  .cap[id] { scroll-margin-top: 52px; }
}

.cap__pin {
  position: sticky;                  /* el sticky: NUNCA más alto que la pantalla */
  top: 0;
  height: 100svh;
  /* overflow:hidden es necesario (el riel de prendas se sale a propósito),
     y es justamente lo que esconde un desborde de contenido. Por eso la
     puerta de publicación no es solo `piloto medir`: es también la sonda
     que compara el contenido de cada pin contra su caja útil. */
  overflow: hidden;
  display: grid;
  /* minmax(0, 1fr) y no `auto`: una columna `auto` se dimensiona por el
     MAX-CONTENT de sus hijos, y en cuanto un hijo tiene contenido más ancho
     que la pantalla —el trío de LA VUELTA, que en vertical se recorre— la
     columna entera crecía por encima del pin y el `overflow:hidden` se comía
     el borde derecho de TODO el capítulo: el rótulo, el aviso de ilustración
     y el CTA salían cortados. `overflow-x:auto` en el hijo pone su mínimo
     automático en 0, pero NO su max-content, que es lo que sizea la pista.
     Se pilló mirando la captura de vuelta-precio a 390. */
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: center;
  /* el techo solo tiene que despejar la barra fija (44px). Bajarlo de 68 a
     58 devolvió los 14px que a 360×640 le faltaban a dos capítulos. */
  padding: max(58px, 8svh) var(--e-margen) max(20px, 4svh);
  background: var(--fondo);
  color: var(--texto);
}

/* el cierre no frena y no se pinea: acá el visitante ya decidió */
.cap--cierre { height: auto; }


/* ── El pulso: de oscuro a brillante, capítulo a capítulo (regla Operaria,
      también regla 4 de la paleta). La gama de piel entera, de --piel-10 a
      --piel-01, más los dos únicos fríos del sistema exactamente donde el
      canon los pide: --espejo-hondo para AGUA y --espejo-alto para EL
      ESPEJO. Cada capítulo declara además su acento, que es el --linea-*
      de su línea de negocio: así --hilo queda racionado a UN elemento por
      pantalla, como manda la regla 3 de la paleta.                      ── */
/* LA RAMPA · regla 4 de la paleta, literal: «todo pulso va de oscuro a
   brillante: negro → azul → coral → amarillo». Cada capítulo lleva además
   el acento de su línea, elegido contra la tabla de contrastes del canon.
   Las ocho primeras van con .en-negro (fondo oscuro, texto amarillo); de
   CLÓSET ADENTRO en adelante manda el modo claro, con tinta negra.        */

/* ── negro: el protagonista ── */
#portada        { --fondo: var(--negro);      --acento-cap: var(--amarillo); }
/* EL CORAL, RACIONADO. Aparecía en siete sitios: la nav, «Matea» del hero, el
   tachón de este capítulo, las bolsas de RONDA, la esencia de EL OJO, la línea
   de LA VUELTA y la puerta del isotipo. Cuando el visitante llega al retrato
   —una chaqueta de patchwork que ES coral, naranja y rojo— el color ya no le
   dice nada. El tachón pasa a amarillo y el coral se guarda para donde
   significa: la costura de LA VUELTA y la puerta del isotipo. Un color en
   siete sitios es decoración; en dos, es un signo. */
#nombre         { --fondo: var(--negro);      --acento-cap: var(--amarillo); }
#retrato        { --fondo: var(--negro);      --acento-cap: var(--amarillo); }
#ojo            { --fondo: var(--negro-02);   --acento-cap: var(--amarillo); }
#ronda          { --fondo: var(--negro-03);   --acento-cap: var(--coral); }
#agua           { --fondo: var(--negro-04);   --acento-cap: var(--amarillo); }

/* ── azul: el perchero. Por canon, no por gusto: «el perchero del póster
      ES azul». Sobre el azul pleno el tenue de .en-negro cae a 3,1:1, así que
      los rótulos suben un escalón (medido, no supuesto).                 ── */
#perchero       { --fondo: var(--azul);       --acento-cap: var(--amarillo);
                  /* La tabla de contrastes de la paleta cubre amarillo, negro
                     y hueso; el AZUL como campo de página no está. Calculado
                     entero: sobre #2452CA el amarillo da 5,25 nominal pero
                     4,12–4,41 DE TRAZO (Bodoni 18,4 / Archivo 16,2), o sea
                     bajo el piso de 4,5 para cuerpo. El hueso da 5,94 / 4,59.
                     El titular se queda amarillo —es texto grande, piso 3, y
                     es lo que le da el color al capítulo—; el cuerpo pasa a
                     hueso. Esta tabla debería bajar a paleta.css §9 o el
                     próximo que pinte un capítulo repite el error a ojo. */
                  --texto: var(--hueso);
                  --texto-suave: var(--hueso);
                  --texto-tenue: var(--hueso); }
#perchero h2 { color: var(--amarillo); }
#perchero .entrada { font-weight: var(--peso-medio); }

/* ── coral: la mano que entra al clóset. Fondo claro-medio, así que acá
      se sale de .en-negro y vuelve la tinta negra. --texto-tenue se sube a
      --texto-suave porque sobre coral el tenue cae a 3,2:1.            ── */
/* SOBRE CORAL ESCRIBE UNA SOLA TINTA. El otro hueco de la tabla, calculado:
     --negro 7,20 ✓  ·  --texto-suave 4,85 nominal pero 3,88 DE TRAZO ✗
     --azul-hondo 4,26 ✗ · --hueso 2,52 ✗ · --amarillo 2,22 ✗ · --coral-hondo 2,11 ✗
   En todo el sistema hay exactamente un color que escribe sobre coral. No es
   un defecto: es la consecuencia de meter el coral —que en el póster es
   línea— en el rol de campo. Pero obliga a una regla: **sobre coral la
   jerarquía se hace con MASA (tamaño, peso, versalitas), nunca con tinte**,
   que es la conclusión a la que la propia hoja ya había llegado para el tercer
   veredicto. Acá fallaba el claim de asesoría, que es un claim de marca. */
#adentro, #adentro-precio {
  --fondo: var(--coral); --acento-cap: var(--negro);
  --texto-suave: var(--negro);
  --texto-tenue: var(--negro);
}
/* «Ya tienes la ropa. Te falta el ojo.» es la línea que manda en el capítulo y
   se veía MÁS APAGADA que el párrafo de abajo: la jerarquía estaba invertida.
   Medido con el arreglo: 7,20 nominal / 6,20 de trazo (era 4,85 / 3,88). */
#adentro .frase { font-weight: var(--peso-medio); }

/* ── amarillo: el papel de la marca, el extremo brillante del pulso ── */
#espejo         { --fondo: var(--amarillo);   --acento-cap: var(--azul); }
#demo-cap       { --fondo: var(--amarillo);   --acento-cap: var(--azul); }
#vuelta         { --fondo: var(--amarillo);   --acento-cap: var(--coral-hondo); }
#vuelta-precio  { --fondo: var(--amarillo);   --acento-cap: var(--coral-hondo); }
#dedia          { --fondo: var(--amarillo);   --acento-cap: var(--azul-hondo); }
/* AGUA se movió al final, entre DE DÍA y el cierre: es el único capítulo que
   dice «todavía no existe» y estaba en plena bajada comercial, justo antes
   de las cinco líneas que se venden (lo levantó Vera y tiene razón). Acá
   queda con la parte comunitaria, que es su público.
   Va en --hueso, no en el azul que tenía: --hueso es lo único que la paleta
   reserva para lectura larga, y este capítulo es el más sobrio de todos. No
   rompe el pulso porque no es un escalón nuevo: es una banda de lectura
   DENTRO del tramo amarillo, el extremo brillante. Su acento sigue siendo
   su color de línea, --azul-hondo (= --linea-agua). */
#horizonte      { --fondo: var(--hueso);      --acento-cap: var(--azul-hondo); }
/* la bajada del claim usa --acento; sobre amarillo el que se lee es el azul */
#cierre         { --fondo: var(--amarillo);   --acento-cap: var(--negro); }

/* ═══════════════════ EL MOLDE: TRES TIPOS DE CAPÍTULO ═══════════════════
   Medida que originó esto: la ocupación del contenido dentro de la caja útil
   de cada pin, a 1440×900, capítulo por capítulo —

     portada .69 · nombre .58 · retrato 1.0 · ojo .60 · ronda .45 · agua .61
     perchero .61 · adentro .50 · adentro-precio .53 · espejo .56 · demo .50
     vuelta .71 · vuelta-precio .56 · dedia .64 · horizonte .34

   Media 0,58: el 42% de cada pantalla era vacío ESTRUCTURAL —sobraba porque
   el bloque iba centrado en una caja de 100svh que nadie le pidió medir—, y
   los dieciséis capítulos pesaban exactamente lo mismo. No había tensión ni
   descanso porque todo era descanso: la misma caja, la misma centratura y el
   mismo aire, dieciséis veces.

   El pin NO es el problema; el pin UNIFORME sí. Tres tipos declarados:

     PLENO  portada · retrato · cierre
            el contenido llega al canto. Un póster no se cuelga: se pega.
     GOLPE  nombre · ojo · agua · horizonte
            una idea y aire alrededor. Acá el vacío SÍ trabaja, porque es la
            excepción y no el default.
     BANDA  ronda · perchero · adentro-precio · espejo · dedia
            pasan. Riel corto (1,30–1,35 pantallas contra 1,9–2,2 de los
            otros) y composición asimétrica en vez de centrada.

   Lo que NO se hizo, y por qué: la auditoría de craft proponía DESPINEAR los
   capítulos banda. Se descartó — despinear mata el efecto ligado al scroll de
   ese capítulo, y ahí viven las bolsas de RONDA, los veredictos de CLÓSET
   ADENTRO y toda la secuencia de LA VUELTA, que es el momento alto de la
   página. Además la doctrina del oficio es que todo capítulo con algo que
   decir frena. Las dos velocidades se consiguieron con el LARGO del riel, que
   no cuesta nada y no rompe ninguna ley. Total: 26,5 → 25,1 pantallas.
   ═══════════════════════════════════════════════════════════════════════ */

/* PLENO · el contenido llega al canto */
#portada .cap__pin, #retrato .cap__pin { padding: 0; }
/* la portada conserva su margen lateral porque es texto, pero pierde la caja
   de 58px arriba que la dejaba descentrada hacia abajo (medido en la captura:
   el bloque quedaba 33px por debajo del eje). La barra fija no la tapa: no
   aparece hasta pasado el 85% de la primera pantalla. */
#portada .portada { padding-inline: var(--e-margen); }

/* GOLPE · una idea, y el aire es deliberado */
#ojo .cap__pin, #horizonte .cap__pin { padding-block: max(72px, 12svh) max(28px, 6svh); }

/* BANDA · en ESCRITORIO se descentran: el bloque se apoya arriba y a un
   tercio del ancho, no en el eje. Tres capítulos seguidos con el bloque en el
   centro exacto es lo que hacía que se leyeran como el mismo.
   En VERTICAL no: se probó con `align-content: start` a todos los anchos y en
   la captura de EL ESPEJO a 390 dejaba 257px de amarillo vacío al pie, que no
   se lee como aire sino como pantalla a medio llenar. En un teléfono la
   asimetría no tiene con qué contrastar —no hay ancho— así que el bloque se
   queda centrado y la diferencia de velocidad la hace el riel. */
@media (min-width: 900px) {
  #ronda .cap__pin, #perchero .cap__pin,
  #adentro-precio .cap__pin, #espejo .cap__pin, #dedia .cap__pin {
    align-content: start;
    justify-items: start;
    padding-block: max(84px, 14svh) max(20px, 4svh);
    padding-inline: clamp(var(--e-margen), 8vw, 9rem) var(--e-margen);
  }
  #espejo .centro, #adentro-precio .centro { margin-inline: 0; }
}


/* velo tenue arriba y abajo: el corte entre capítulos se lee deliberado
   y no como un tajo. Casi imperceptible en los capítulos claros. */
.cap__pin::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--negro) 26%, transparent), transparent 15%,
    transparent 85%, color-mix(in srgb, var(--negro) 26%, transparent));
  opacity: .6;
}
.cap:not(.en-negro) .cap__pin::after { opacity: .1; }
/* En el retrato NO. El velo se pinta sobre TODO el capítulo, foto incluida, y
   sobre un retrato a sol pleno apaga el pelo, la parte alta de la chaqueta y
   los pantalones verdes. Este capítulo es una sola cosa y esa cosa es una
   persona: nada se le pone encima. */
#retrato .cap__pin::after { display: none; }


/* ───────────── tipografía · dos voces, ninguna más ─────────────
   Display (Bodoni Moda): títulos, claim, la línea suelta bajo un título,
   la firma del autor. Texto (Archivo): prosa, listas, cifras y —en
   mayúsculas con tracking abierto— todo lo que en otra landing sería
   mono. */

/* EL PESO ES LO QUE MÁS CAMBIA DE TODA ESTA HOJA, y son tres números.
   La paleta se muestreó de un cartel de tintas planas y masa; la tipografía
   que la acompañaba era una didona de contraste extremo puesta en 400, o sea
   con astas de un pelo. En pantalla —y sobre todo en amarillo, donde los
   remates finos se evaporan— eso lee Vogue: una marca preciosa que no es
   esta. Bodoni Moda va de 400 a 900 y se estaba usando el 12% de la fuente
   que YA se descarga: subir el peso no cuesta ni un byte.
   No se cambia de familia y no hace falta: medido, a tamaño display Bodoni es
   la MEJOR tipografía de la página (pierde 11–15% de contraste de trazo a
   54px, contra 20–25% de Archivo a 16px). Su `opsz` variable está trabajando.
   Y ojo: NADIE agregue `font-variation-settings` «para ayudar» —eso apaga
   `font-optical-sizing: auto` y empeora justo lo que se quiere arreglar. */
.cap h2 {
  font-family: var(--fuente-display);
  font-weight: 750;
  font-size: var(--t-h1-pin);            /* la ÚNICA escala de h2 de la página */
  line-height: var(--alto-apretado);
  letter-spacing: var(--track-titulo);
  margin: .08em 0 .38em;
  text-wrap: balance;   /* «Hasta lo / roto.» era un corte feo, no una línea */
}

h3 {
  font-family: var(--fuente-display);
  /* 600 y no 400: un h3 mide 20px, que es donde una didona pierde más trazo */
  font-weight: 600;
  margin: 0;
  letter-spacing: var(--track-titulo);
}

p { margin: 0 0 var(--e-4); }

/* el rol que en otras landings hace el mono */
.rotulo {
  font-family: var(--fuente-etiqueta);
  font-size: var(--t-mini);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin: 0 0 var(--e-2);
}

/* .entrada y .remate son PÁRRAFOS, no títulos. Heredaban --alto-titulo (1,14),
   que es leading de titular: correcto para una línea, apelmazado para tres —y
   peor en Bodoni, cuyas mayúsculas altas y descendentes largas ya se comen el
   interlínea—. Medido a 390px corren dos y tres líneas en seis capítulos. */
.entrada {
  font-family: var(--fuente-display);
  font-size: clamp(1.15rem, min(4.7vw, 3.4svh), 1.65rem);
  line-height: 1.34;
  margin-bottom: var(--e-4);
  text-wrap: balance;
}
.entrada--centro { max-width: 24ch; margin-left: auto; margin-right: auto; }

.remate {
  font-family: var(--fuente-display);
  font-size: clamp(1.05rem, min(4vw, 2.9svh), 1.35rem);
  line-height: 1.34;
}

/* Ni `.tachado` ni ningún inline-block puede quedar separado de la puntuación
   que lo sigue: el navegador parte ahí y el punto amanece solo al principio de
   la línea siguiente. */
.sin-corte { white-space: nowrap; }
.remate--centro { text-align: center; max-width: 26ch; margin: 0 auto var(--e-4); }

.lista { margin: 0 0 var(--e-4); padding: 0; list-style: none; }
.lista li { position: relative; padding-left: 1.15em; margin-bottom: var(--e-1); }
.lista li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: .62em; height: 1px; background: currentColor; opacity: .5;
}

strong { font-weight: var(--peso-medio); }


/* ───────────────────── barra fina ───────────────────── */

.barra {
  position: fixed; inset: 0 0 auto;
  z-index: var(--z-fijo);
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-2) var(--e-margen);
  /* SIN `backdrop-filter`, y el argumento no es de milisegundos.
     Detrás de esta barra pasan quince capítulos de TINTA PLANA, y sobre tinta
     plana un fondo sólido con alfa da exactamente la misma separación que un
     difuminado. La única pantalla de dieciséis donde el blur hacía algo era el
     retrato, que es la única foto de la página. Un efecto que trabaja en una
     pantalla y en las otras quince recompone una capa por frame para no
     producir ninguna diferencia visible no se defiende.
     Lo que sí midió el A/B (390×844, CPU×4, tres corridas): la tarea total del
     recorrido baja entre 11 y 40 ms. Y ese número es un PISO, no un veredicto
     —headless no rasteriza por GPU, así que lo caro del blur, el recompuesto
     de la capa de atrás, este aparato ni lo ve—. En un teléfono cuesta eso y
     algo más, nunca menos. Un número sin su límite es una certeza falsa.
     El alfa sube de 88% a 94% porque ahora el fondo hace solo el trabajo de
     separación sobre la foto del retrato. */
  background: color-mix(in srgb, var(--negro) 94%, transparent);
  border-bottom: 1px solid var(--borde-oscuro);
  color: var(--amarillo);
  transform: translateY(-102%);
  /* 260 y no 520: esto es navegación, no escena. Medio segundo para que
     aparezca una barra fija se siente como que el sitio va lento. */
  transition: transform var(--dur-medio) var(--ease);
}
.barra.is-vista { transform: none; }

/* EL ISOTIPO · trazados copiados literalmente de identidad/iso/isotipo-currentcolor.svg.
   Va inline y no como <img> porque así hereda el color del contexto y la luz
   de la puerta sale de --iso-luz. No se redibuja nunca: si cambia el archivo
   de identidad, se vuelven a copiar estos paths. */
/* La puerta NO se declara acá: --iso-luz la define paleta.css (= --coral) y
   es la intersección del isotipo, o sea el «hecho de dos». Declararla local
   fue un parche de cuando la variable no existía, y tapaba el arreglo de la
   fuente. Si hay que cambiar ese color, se cambia en la paleta. */
.iso { display: block; width: 1em; height: 1em; flex: 0 0 auto; }

.barra__marca {
  display: flex; align-items: center; gap: var(--e-2);
  font-family: var(--fuente-display);
  font-size: 15px;
  text-decoration: none; margin-right: auto; white-space: nowrap;
}
.barra__marca .iso { font-size: 22px; }
.barra__marca span span { color: var(--coral); }

.barra__nav { display: none; gap: var(--e-5); }
.barra__nav a,
.barra__cta {
  font-family: var(--fuente-etiqueta);
  font-size: var(--t-mini);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
/* --texto-suave acá vale #E6DDB4 porque el <header> lleva `en-negro`. Antes
   no la llevaba: vive fuera de <main>, heredaba el valor de modo claro
   (#2A2C3C) y lo pintaba sobre negro → 1,4:1 medido, los cinco ítems de la
   única navegación de la página eran manchas azuladas. */
.barra__nav a {
  color: var(--texto-suave);
  position: relative;
  padding-block: 4px;
  transition: color var(--dur-medio) var(--ease);
}
/* LA NAV DICE DÓNDE ESTÁS. Seis anclas y veinticinco pantallas: sin esto el
   menú es una lista de destinos y nunca un mapa. El dato ya lo calcula el
   motor de escena cuadro a cuadro; acá solo se dibuja. */
.barra__nav a[aria-current="true"] { color: var(--amarillo); }
.barra__nav a[aria-current="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--amarillo);
}

.barra__cta {
  padding: var(--e-2) var(--e-3);
  /* cantos vivos: ver la nota de los radios en el bloque de .cta */
  border-radius: 0;
  background: var(--amarillo);
  color: var(--negro);
  transition: transform var(--dur-rapido) var(--ease);
}
.barra__cta:active { transform: scale(.97); }

@media (min-width: 900px) { .barra__nav { display: flex; } }


/* ───────────────────── llamados a la acción ───────────────────── */

/* LOS RADIOS BAJAN A CERO, y no es gusto: lo dice la propia paleta —«el
   póster es de cartel: cantos vivos y formas macizas»— y acto seguido los CTA,
   la CTA de la barra y los tres veredictos eran píldoras de 999px, que es la
   forma más genérica que existe en la web de 2026. Medido, la página tenía
   CINCO radios conviviendo: 999, 12, 6, 3 y 0. Un rectángulo amarillo macizo
   sobre negro, sin radio y sin sombra, es infinitamente más de esta marca que
   una píldora con --sombra-3. El único radio que sobrevive es el arco del
   isotipo, que es la forma de la marca. */
.cta {
  display: inline-block;
  font-family: var(--fuente-etiqueta);
  font-size: var(--t-mini);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--e-4) var(--e-6);
  border-radius: 0;
  background: var(--acento);
  color: var(--acento-contraste);
  /* box-shadow SALE de la transición: no es propiedad de compositor y cada
     frame repinta el elemento de conversión de la página. La sombra se queda
     fija; lo que se mueve es solo `transform`. */
  box-shadow: var(--sombra-2);
  transition: transform var(--dur-rapido) var(--ease);
}
/* EL TOQUE ACUSA RECIBO. Esta página es mobile-first por encargo («las
   clientas miran el teléfono paradas frente al clóset») y no tenía UN SOLO
   :active en 1.277 líneas de CSS. Entre el dedo y la primera señal no había
   nada, ni siquiera en el botón de WhatsApp. 140ms es --dur-rapido, que
   estaba declarada en la paleta y no la usaba nadie. */
.cta:active { transform: scale(.97); }
/* El hover, con puerta. En táctil el navegador dispara :hover al tocar y lo
   deja PEGADO hasta el siguiente toque en otro sitio: el CTA se quedaba
   levantado 2px después de que la clienta volvía de WhatsApp. */
@media (hover: hover) and (pointer: fine) {
  .cta:hover { transform: translateY(-2px); }
}
.cta--claro { background: var(--amarillo); color: var(--negro); }
.cta--grande { padding: var(--e-5) var(--e-7); font-size: var(--t-pie); }

.cta-linea { font-size: var(--t-cuerpo); margin-bottom: 0; }
/* 31 × 20 px medidos: menos de la mitad del objetivo táctil de 44. Y son la
   conversión de seis capítulos («agenda tu retiro aquí», «pide tu puesto
   aquí»). El área crece sin mover la línea —el margen negativo compensa el
   padding— y el filete se dibuja con fondo para que siga pegado al texto y no
   al borde del área nueva. */
.cta-linea a {
  color: inherit;
  text-decoration: none;
  font-weight: var(--peso-medio);
  display: inline-block;
  padding: 11px 8px;
  margin: -11px -8px;
  border-bottom: 0;
  background: linear-gradient(var(--acento-cap), var(--acento-cap)) no-repeat
              8px calc(100% - 9px) / calc(100% - 16px) 2px;
  transition: color var(--dur-medio) var(--ease), opacity var(--dur-rapido) var(--ease);
}
.cta-linea a:active { opacity: .6; }
@media (hover: hover) and (pointer: fine) {
  .cta-linea a:hover { color: var(--acento-cap); }
}


/* ───────── revelados · el estado por defecto es el seguro ─────────
   Sin la clase .js (la pone el JS en el <html>) NADA se esconde. */
/* 24px en 520ms, no 20px en 900. 20px en 900ms son 22px/s: velocidad de
   deriva, y se lee gomoso. Más recorrido y menos tiempo se lee más nítido. */
html.js [data-rev] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-lento) var(--ease-entra) var(--d, 0s),
              transform var(--dur-lento) var(--ease-entra) var(--d, 0s);
}
html.js [data-rev].is-in { opacity: 1; transform: none; }

/* la foto de Yoel llega y SE QUEDA: nada ligado al scroll. Una cara no es una
   textura, y una autoridad que se mueve mientras la miras deja de leerse como
   autoridad. 3% es un asentamiento; más sería un zoom. Y nunca un blur: sobre
   una foto a pantalla completa es lo más caro que se le puede pedir a un
   teléfono. */
html.js #retrato .hueco--lleno[data-rev] { transform: scale(1.03); }
html.js #retrato .hueco--lleno[data-rev].is-in { transform: none; }


/* ───────────────────── composiciones ───────────────────── */

.centro { max-width: 34rem; margin: 0 auto; text-align: center; width: 100%; }
.centro--ancho { max-width: var(--ancho-pieza); }
/* prosa: se lee mejor alineada a la izquierda, aunque el bloque vaya centrado */
.centro--texto { max-width: 38rem; text-align: left; }
/* Excepción declarada: LA VUELTA es una composición simétrica (dos prendas
   que convergen en una), así que su columna de texto va centrada.
   Antes esto apuntaba a `#vuelta .cap__pin` y NO hacía nada: `.centro--texto`
   declara text-align:left en el propio hijo, y una declaración directa le gana
   siempre a un valor heredado, aunque el ancestro tenga un id. Se apunta al
   elemento que declara, no al que hereda. */
#vuelta .centro { text-align: center; }

.col2 {
  display: grid; gap: clamp(1rem, 4vw, 3rem);
  align-items: center; max-width: 64rem; margin: 0 auto; width: 100%;
}
.col2__texto { max-width: var(--ancho-angosto); }

@media (min-width: 900px) {
  .col2 { grid-template-columns: 1.15fr .85fr; }
  .col2--inv > :first-child { order: 2; }
}


/* ───────────────────── 1 · portada ───────────────────── */

.portada { max-width: 46rem; text-align: center; }

.marca {
  font-family: var(--fuente-display);
  font-weight: 750;
  font-size: var(--t-titan-pin);
  line-height: var(--alto-apretado);
  /* el titán cierra un poco más que --track-titan (-.03em): a peso 750 las
     astas engordan y el nombre pedía volver a apretarse para leerse macizo */
  letter-spacing: -.045em;
  margin: .14em 0 .28em;
  display: flex; flex-direction: column; align-items: center;
}

/* ══════════════ LA LETRA PRINCIPAL — el arreglo de la queja ══════════════
   «La letra principal es ilegible» (Francisco). Tenía razón, y NO era Bodoni
   ni el par de color: era esta línea, que estaba acá y ya no está —

       opacity: calc(.4 + var(--t) * .6);

   --t lo escribe el scroll. A scroll 0, --t es 0 y la opacidad es 0,40. Y
   scroll 0 no es un fotograma de paso: es el estado en que la página ABRE, y
   no sale de ahí hasta que el visitante recorre 258px del riel. Medido a
   390×844 en el primer pintado:

       «La Negra»  #F8E65A al 40% sobre negro → #655E2C → 3,12:1
       «Matea»     #EA7A4F al 40% sobre negro → #5F3328 → 1,94:1  ✗

   1,94:1 es el marrón oscuro que se veía. Con la opacidad en 1 los MISMOS dos
   colores dan 16,02:1 y 7,20:1: el par de color nunca estuvo mal.
   No sirve subirle el piso: para que el coral llegue apenas a 3:1 hay que
   partir en 0,60, y ahí el nombre de la marca se sigue viendo sucio. **No hay
   valor de opacidad que sea a la vez un efecto y una tipografía legible.**

   El gesto se queda, y es el DESPLAZAMIENTO: las dos mitades nacen separadas
   y se juntan, que es «hecho de dos». A plena tinta se lee mejor, porque se
   ve que son dos bloques y no una mancha. El recorrido sube de 7vw a 11vw
   —a 7vw eran 27px en teléfono, o sea no se leía como gesto sino como «esto
   está a medio cargar»— y va con --e para que llegue y se pose en vez de
   frenar en seco.
   ═══════════════════════════════════════════════════════════════════════ */
.marca__a, .marca__b { display: block; }
.marca__a { transform: translateX(calc((1 - var(--e)) * -11vw)); }
.marca__b { transform: translateX(calc((1 - var(--e)) *  11vw)); color: var(--coral); }

/* EL CLAIM · composición canónica del brandbook, copiada tal cual.
   Todo el bloque escala desde UN solo font-size: la bajada y su aire salen
   de él en em. Nunca fijar el tamaño de la bajada a mano. */
.claim {
  font-family: var(--fuente-display);
  font-weight: 600;                      /* era --peso-medio (500): ver la nota del peso */
  font-size: var(--t-claim-pin);
  line-height: var(--claim-alto);
  letter-spacing: var(--track-titulo);
  color: var(--texto);
  margin: 0 auto var(--e-5);
  max-width: 15ch;
  text-wrap: balance;
}
.claim .bajada {
  display: block;
  /* La razón .42 se respeta, y se le pone SUELO. A 390px la primera línea
     mide 33,5px y la bajada caía a 14,1: medido, es la mayor pérdida de trazo
     de toda la página (nominal 7,20 → 4,70 de trazo, −35%), y no por ser
     Bodoni sino porque 14px es demasiado chico para una didona en CURSIVA.
     La propia paleta ya lo había anticipado con su excepción de --claim-razon.
     16 sobre 33,5 sigue siendo 0,48: manda la primera línea, que es el chiste. */
  font-size: max(16px, calc(1em * var(--claim-razon)));
  font-style: italic;
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-normal);
  line-height: 1.15;
  margin-top: var(--claim-aire);
  color: var(--acento);
}
/* «El color pleno aguanta como masa; para texto chico va siempre el
   aclarado» — paleta §3, y --coral-claro existe exactamente para esto y no se
   estaba usando. Medido con el arreglo puesto, en el hero: 10,56 nominal /
   7,29 de trazo, contra 4,70 de antes. */
.en-negro .claim .bajada { color: var(--coral-claro); }
/* en el cierre el campo es amarillo: ahí el que escribe es el azul hondo
   (9,5:1), no --acento (--azul: 5,25 nominal y ~3,7 de trazo en cursiva) */
#cierre .claim .bajada { color: var(--azul-hondo); }
/* El remate llega tarde a propósito: la primera línea ya está cuando la
   bajada entra. Solo con JS (sin él, las dos están desde el principio) y
   solo en el hero: en el cierre el visitante ya la leyó una vez. */
/* .55s de espera y 420ms de fundido, no .8s + 900ms. El chiste depende del
   tiempo entre las dos líneas y ese tiempo está bien elegido; lo que sobraba
   era el fundido: 1,7s en total es más de lo que dura la pausa de alguien que
   lo dice en voz alta. */
html.js .portada .claim .bajada { animation: remate 420ms var(--ease-entra) .55s both; }
@keyframes remate { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
/* el CTA del hero entra DESPUÉS del remate: hasta ahora la bajada tenía su
   entrada y el botón ya estaba puesto, o sea la coreografía quedaba a medias */
html.js .portada .cta--claro { animation: remate 420ms var(--ease-entra) .95s both; }

/* NO es el claim: son la frase de asesoría y la de DE DÍA. Clase propia
   para que `.claim` quede reservada a la composición de arriba. */
.frase {
  font-family: var(--fuente-display);
  font-size: clamp(1.08rem, min(4.2vw, 3svh), 1.5rem);
  line-height: var(--alto-titulo);
  color: var(--texto-suave);
  text-wrap: balance;
}

.portada__pie {
  max-width: 34ch; margin: 0 auto var(--e-5);
  color: var(--texto-suave); font-size: var(--t-cuerpo);
}

.baja {
  position: absolute; left: 50%; bottom: max(.75rem, 2.6svh);
  transform: translateX(-50%);
  font-family: var(--fuente-etiqueta);
  font-size: var(--t-micro); font-weight: var(--peso-fuerte);
  letter-spacing: var(--track-ancho); text-transform: uppercase;
  color: var(--texto-tenue);
  opacity: calc(1 - var(--t));
}
/* el texto va por CSS: es decoración pura y no debe contarse como
   contenido de la página (el piloto mide «ocultos» sobre nodos de texto,
   y un adorno en opacidad 0 haría fallar una puerta que sí importa) */
.baja::before { content: "baja"; }
.baja::after {
  content: ""; display: block; width: 1px; height: 20px; margin: var(--e-2) auto 0;
  background: currentColor; opacity: .5;
}
/* La única invitación a scrollear de la página estaba completamente quieta:
   solo se apagaba cuando YA habías scrolleado. Es material de la banda «se ve
   una vez», así que un flotado mínimo se gana su sitio. 4px y 2,4s: por
   encima de 6px se convierte en un adorno que compite con el claim. */
html.js .baja::after { animation: respira 2.4s var(--ease) infinite; }
@keyframes respira {
  0%, 100% { transform: translateY(0);   opacity: .5; }
  50%      { transform: translateY(4px); opacity: .9; }
}


/* ───────────────────── 2 · el nombre ─────────────────────
   El tachón del insulto se retira con el scroll: la palabra deja de ser
   de quien la tiraba. Un efecto por capítulo, y que signifique algo. */

.tachado { position: relative; display: inline-block; white-space: nowrap; }
.tachado__linea {
  position: absolute; left: -.06em; right: -.06em; top: 52%;
  height: 3px; background: var(--acento-cap);   /* el único --hilo de este capítulo */
  transform-origin: right center;
  transform: scaleX(calc(1 - var(--t)));
  border-radius: var(--r-xs);
}


/* ───────────────────── 3 · el retrato ─────────────────────
   Capítulo de una sola cosa. El hueco toma el alto que sobra: por
   construcción no puede desbordar el pin. */

#retrato .cap__pin { align-content: stretch; justify-items: stretch; }
.retrato {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--e-4);
  width: 100%; max-width: 34rem; margin: 0 auto;
  padding: max(58px, 8svh) var(--e-margen) max(20px, 4svh);
}
.retrato__pie { text-align: center; }
.retrato__pie p { margin: 0; }
.retrato__n { font-family: var(--fuente-display); font-weight: 750; font-size: var(--t-h3); }
/* Una FRASE no va en el registro de etiqueta. --t-micro (11px) en versalitas
   con 0,16em de tracking es para rótulos de una a tres palabras, y acá tenía
   encima «Mi mamá es Yoly, mi papá Elvis. Me hicieron el nombre juntando los
   dos.» — que es, además, la frase más personal de la página. De pie, en un
   teléfono, nadie la leía. Lo mismo con la línea de firma del cierre. */
.retrato__s, .firma-cierre__s {
  font-family: var(--fuente-texto);
  font-size: var(--t-pie);
  font-weight: var(--peso-normal);
  letter-spacing: .01em;
  text-transform: none;
  color: var(--texto-suave);
}

/* ══════════ EL RETRATO ROMPE LA SIMETRÍA, Y ES EL ÚNICO QUE PUEDE ══════════
   A 1440, `max-width: 34rem` centrado dejaba 544px de foto con ~900px de
   negro alrededor: la única cara de la marca, colgada en medio de una pared.
   Un póster no se cuelga, se pega. En escritorio la foto va A SANGRE por el
   borde izquierdo —52% del ancho, 100% del alto del pin— y «Yoel» y «Tengo el
   ojo. Cobro por él.» se componen grandes en el negro que queda a la derecha.
   Es una pantalla, y es la que decide si esta marca tiene cara.
   En vertical NO se toca: ahí la foto ya ocupa el ancho entero y el pie va
   debajo, que es la única composición que cabe. */
@media (min-width: 900px) {
  .retrato {
    grid-template-rows: none;
    grid-template-columns: 52fr 48fr;
    align-items: center;
    max-width: none; padding: 0;
    gap: 0;
  }
  /* `100svh` no descontaba el techo del pin —los 58-72px que despejan la
     barra fija— así que la caja medía 900 dentro de una útil de 828 y el
     capítulo se cortaba 72px en escritorio (medido a 1440×900 y 1920×1080).
     Atada al 100% de la caja útil da el mismo «a sangre» sin desbordar, y
     además evita que la barra quede encima de la cara de Yoel: con
     `contain` y una foto de 0,755 en una caja de 0,83, la imagen ajusta por
     ALTO, o sea llegaría al canto superior justo donde va la barra. */
  .retrato .hueco--lleno { height: 100%; }
  /* a sangre: la foto entra ENTERA (`contain`, ver la nota de abajo) pero su
     caja llega al canto izquierdo y al alto completo del capítulo */
  .retrato__pie {
    text-align: left;
    padding: var(--e-margen) clamp(var(--e-margen), 5vw, 4rem);
  }
  .retrato__n {
    font-size: clamp(2.4rem, min(6vw, 11svh), 5rem);
    line-height: var(--alto-apretado);
    letter-spacing: -.03em;
    margin-bottom: var(--e-3) !important;
  }
  .retrato__s { max-width: 28ch; }
  .retrato__r { font-size: clamp(1.3rem, min(2.6vw, 4.4svh), 2rem); max-width: 14ch; }
}
.retrato__r {
  font-family: var(--fuente-display);
  font-size: var(--t-guia); color: var(--destello);
  margin-top: var(--e-2) !important;
}


/* ───────────────────── huecos de foto ─────────────────────
   No hay material real todavía. Esto NO es un placeholder roto: es un
   bloque tonal de la gama, con encuadre marcado, que declara qué foto va
   y en qué proporción. Inventario completo: README.
   El max-height es lo que impide que una foto haga desbordar un pin: la
   proporción declarada es la INTENCIÓN de encuadre, y la imagen real
   entrará con object-fit: cover. */

.hueco {
  margin: 0;
  position: relative;
  display: grid; place-items: center;
  width: 100%;
  max-height: clamp(140px, 28svh, 400px);
  border: 1px solid var(--borde);
  background: linear-gradient(152deg,
    color-mix(in srgb, currentColor 10%, transparent),
    color-mix(in srgb, currentColor 2%, transparent) 46%,
    color-mix(in srgb, currentColor 14%, transparent));
  border-radius: var(--r-sm);
  overflow: hidden;
}
.en-negro .hueco { border-color: var(--borde-oscuro); }
.hueco--45 { aspect-ratio: 4 / 5; }
.hueco--32 { aspect-ratio: 3 / 2; }
.hueco--hilo { border-color: var(--coral-hondo); }

/* ═══════ ESTAS REGLAS ESTÁN DESPIERTAS ═══════
   Hasta v14 este bloque decía «REGLAS DORMIDAS · hoy no hay una sola imagen en
   la página». Ya no es verdad: entró el retrato de Yoel y entraron las seis
   ilustraciones de línea. Un comentario que miente en una hoja tan comentada
   como esta cuesta caro, porque el siguiente que edite le va a creer.
   Lo que cambió de fondo: las ilustraciones ya NO son `<img>` sino SVG
   incrustados, así que todo lo que decía `:has(img)` tuvo que ampliarse a
   `:has(:is(img, svg))` o el pie perdía su velo y las esquinas de encuadre
   reaparecían encima del dibujo. Es la trampa de «CSS que sobrevive a su DOM»
   al revés: el DOM cambió y el selector se quedó nombrando la etiqueta vieja.
   ═══════════════════════════════════════════════════════════════════════ */

/* El pie que declara que una imagen no es material real.
   El TEXTO es de Vera y es el canónico, sirve para los siete huecos:

       «Ilustración. Todavía no hay foto real de esto.»

   Corta, honesta, sin disculpa y sin prometer fecha. Lo que NO va:
   «imagen referencial», «foto meramente ilustrativa» ni nada con olor a
   letra chica — esta marca declara, no se cubre.
   Va por GRUPO y DEBAJO del grupo, nunca dentro del <figure>: ahí heredaría
   el figcaption absoluto y saldría en mayúsculas encima de la foto (lo
   pilló Iris). Y no se recorta para ganar espacio: si un capítulo no cabe,
   cede otra cosa. */
.rotulo-ilustracion {
  font-family: var(--fuente-texto);
  font-size: var(--t-pie);
  letter-spacing: .02em;
  /* --texto-suave, NO --texto-tenue: un aviso de honestidad que hay que
     buscar con lupa deja de ser honesto (Vera). No se baja de acá. */
  color: var(--texto-suave);
  line-height: 1.3;
  margin: var(--e-2) 0 var(--e-3);
  text-wrap: balance;
}

/* el retrato llena el alto que le deja su capítulo */
.hueco--lleno { aspect-ratio: auto; height: 100%; min-height: 0; max-height: none; }

/* Cuando llegue la foto real: se mete un <img> dentro del <figure>, se borra
   el figcaption, y esta regla la deja encuadrada sin tocar nada más.
   width+height al 100% con object-fit:cover, y sin height de atributo suelto
   —que actúa como CSS de baja prioridad y reserva un boquete—. */
.hueco img,
.hueco > svg.ilus {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* `object-fit` no aplica a un SVG inline: lo que lo encuadra es su propio
   `preserveAspectRatio="xMidYMin slice"`, que viene en el archivo de Iris y
   hace exactamente de `object-fit: cover`. Se anota acá porque quien vea
   `object-fit` en la regla de arriba va a creer que también rige para el SVG,
   y no. */
.hueco > svg.ilus { object-fit: initial; }
/* EL RETRATO ES LA EXCEPCIÓN A `cover`, y es una decisión de trato, no de estilo.
   `cover` llena la caja recortando lo que sobra. Medido en la página: en una
   ventana baja tipo 820×720 la caja queda en 1,09 y solo se ve el 69% del alto
   de la foto — y la zona que no se puede perder (del pelo al ruedo de la
   chaqueta) ocupa el 69,5%. O sea `cover` ahí le corta la cabeza. Es la cara de
   una persona real: no se recorta por estética, y la chaqueta es contenido
   —es de patchwork, es la marca puesta— no fondo.
   Con `contain` la foto entra entera siempre. Las bandas que deja son
   invisibles: este capítulo es negro y el hueco también lo es acá.
   NO se fija la proporción de la foto en el CSS a propósito: sería un número
   mágico atado a ESTA foto, y el día que llegue otra se rompería en silencio.
   `contain` se adapta a cualquiera.

   El marco y el bloque tonal del hueco SÍ se van cuando entra la foto: con
   `contain` la caja es más grande que la imagen, así que un borde visible haría
   leer las bandas como un error de maquetación en vez de como un retrato sobre
   negro. El fondo se pone `transparent` —no `var(--negro)`— para que herede el
   del capítulo y calce exacto pase lo que pase con la paleta.
   La regla lleva `.en-negro` delante a propósito: sin eso la gana
   `.en-negro .hueco`, que tiene más especificidad, y el borde reaparece. */
.en-negro .hueco--lleno:has(img),
.hueco--lleno:has(img) {
  background: transparent;
  border: 0;
  border-radius: 0;
}
.hueco--lleno img { object-fit: contain; }

.hueco:has(:is(img, svg)) .hueco__marca,
.hueco:has(:is(img, svg))::before,
.hueco:has(:is(img, svg))::after { display: none; }

/* Con foto adentro, el filete y la esquina redonda del hueco se van. Un hilo
   amarillo alrededor de una foto llena de color lee a marco de stock, y la
   marca declara cantos vivos. */
.hueco:has(img) { border: 0; border-radius: 0; }

/* LA LÁMINA NO ES UN AGUJERO. Las seis ilustraciones traen su propio campo
   negro porque el coral no escribe sobre amarillo (2,2:1) — eso es decisión
   tomada y no se discute. Lo que la decisión no tuvo a la vista es el número a
   escala de CAPÍTULO: ese campo da 7,2:1 contra el coral de CLÓSET ADENTRO,
   pero **16,02:1 contra el amarillo** de LA VUELTA y DE DÍA, que es el
   contraste máximo de la paleta. En vuelta-precio son tres en fila y se leían
   como tres agujeros negros flotando en el amarillo.
   No se cambia el color: se le da a la lámina un marco y aire propio para que
   se lea como una lámina PUESTA ENCIMA, que es lo que es. */
.cap:not(.en-negro) .hueco:has(svg.ilus) {
  border: 0;
  box-shadow: 0 0 0 5px var(--fondo), 0 0 0 6px var(--borde-fuerte);
  border-radius: 0;
}

.hueco__marca {
  width: clamp(30px, 8%, 48px); aspect-ratio: 1;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  opacity: .38;
}
.hueco__marca::after {
  content: ""; width: 26%; aspect-ratio: 1; border-radius: var(--r-pill);
  background: currentColor;
}
.hueco figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--e-2) var(--e-2);
  font-family: var(--fuente-etiqueta);
  font-size: var(--t-micro); font-weight: var(--peso-fuerte);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-tenue); text-align: center;
}
/* Con foto adentro, el pie deja de caer sobre un bloque tonal y cae sobre una
   imagen: ahí --texto-tenue se pierde. Se vio en el trío de La Vuelta, donde
   «Ahora es esto» envuelve a dos líneas y la primera aterrizaba encima de la
   chaqueta, ilegible. Con foto el pie se gana su propio suelo: el velo que ya
   existe en la paleta justo para esto (--velo-foto).
   Los pies que solo declaraban proporción («· 4:5») se borran al entrar la
   foto; los que dicen algo —«Era esto», «Y esto», «Ahora es esto»— se quedan,
   y son los que necesitan este suelo. */
.hueco:has(:is(img, svg)) figcaption {
  color: var(--hueso);
  background: var(--velo-foto);
  padding-top: var(--e-6);
}
/* esquinas marcadas: se lee como encuadre, no como error */
.hueco::before, .hueco::after {
  content: ""; position: absolute; width: 13px; height: 13px;
  border: 1px solid currentColor; opacity: .35;
}
.hueco::before { top: 9px; left: 9px; border-right: 0; border-bottom: 0; }
.hueco::after  { bottom: 9px; right: 9px; border-left: 0; border-top: 0; }


/* ═══════════════════════════════════════════════════════════════════════
   LA LÍNEA SE DIBUJA CON EL SCROLL
   ───────────────────────────────────────────────────────────────────────
   Esta es LA técnica de esta página, no un efecto más. El mundo de esta marca
   es línea coral sobre negro: lo que tiene que pasar cuando alguien baja es
   que esa línea se trace. Una landing con vídeos de stock y parallax genérico
   sería inmersiva de cualquier marca; esto solo puede ser de esta.

   Funciona porque Iris entregó los SVG con un contrato explícito (está escrito
   en el README de assets/ilustraciones/):

     · cada trazado lleva `class="trazo"` y **`pathLength="1"`**. Eso normaliza
       el largo de TODOS los trazados a 1, así una sola regla los dibuja a
       todos **sin medir ninguno**. Sin `pathLength` habría que recorrer cada
       path con `getTotalLength()` en JS y guardarlo — o sea JS por dibujo,
       en vez de dos líneas de CSS;
     · las capas vienen separadas en fondo / medio / frente, que es lo que
       hace posible el parallax de abajo;
     · las telas van en su propio grupo, para entrarlas DESPUÉS del contorno.

   Y funciona porque las seis entraron INLINE. Como `<img>` esto es
   imposible: un SVG cargado por <img> es un documento aparte, el CSS de la
   página no lo alcanza y ni siquiera ve sus variables (comprobado forzando
   --coral:#00FF00 sobre :root y volviendo a muestrear la imagen en un canvas:
   la lista de colores salía byte a byte idéntica).
   Los seis se incrustan con `assets/ilustraciones/incrusta.py`, que además
   resuelve la colisión de ids —los seis archivos declaran `rayado`, `cuadros`
   y compañía, y juntos en un documento `url(#rayado)` resolvía al primero.

   DEGRADACIÓN: `--e` sale de `--t`, y `--t` sale de `var(--p, 1)`. Sin JS
   --p no existe, vale 1, y las seis nacen DIBUJADAS ENTERAS. El JS es el que
   las devuelve al principio, nunca al revés.
   ═══════════════════════════════════════════════════════════════════════ */

.ilus { display: block; }


/* ═══════════════════════════════════════════════════════════════════════
   FONDOS A SANGRE — seis capítulos con ambiente propio
   ───────────────────────────────────────────────────────────────────────
   Iris entregó seis láminas compuestas como CAMPO y no como sujeto: siguen
   más allá del recorte por los cuatro lados, van en tres capas de
   profundidad y llevan el mismo contrato de trazo que las otras seis. Acá se
   cablean detrás del contenido del pin.

   LA DECISIÓN QUE HUBO QUE TOMAR, y por qué esta y no la del README de la
   carpeta: las láminas traen un `<rect class="campo">` NEGRO de lienzo
   completo, y la nota de Iris las pone a opacidad .45. Eso está medido y es
   correcto **para una lámina suelta**. Puesto sobre la página, un velo negro
   al 45% encima de EL ESPEJO, LA VUELTA y DE DÍA —los tres capítulos
   amarillos, o sea el extremo brillante— apaga justo el tramo que la regla 4
   de la paleta manda que sea el más luminoso, y el pulso deja de subir. El
   pulso oscuro→brillante es ley de Operaria, así que manda.

   La salida: **se apaga el campo y se retiñe la línea por capítulo.** Cada
   fondo dibuja con el color que SÍ se lee sobre su propio papel, no sobre un
   negro importado. Es además lo que dice la paleta —«el coral dibuja, no
   escribe», y sobre amarillo el que dibuja es --coral-hondo—. Como los seis
   entran inline, basta con redefinir --coral dentro del fondo: los `var()`
   de los trazos y de los patrones lo siguen solos.
   Verificado después con `sonda-pulso.mjs`: la rampa sigue subiendo.
   ═══════════════════════════════════════════════════════════════════════ */

.fondo {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Las láminas van ancladas ARRIBA (`xMidYMin slice`), así que el canto donde
     empieza el dibujo cae dentro de la pantalla y se lee como una costura de
     maquetación cruzando el capítulo entero — se vio en las capturas de EL
     PERCHERO y EL ESPEJO a 390. Con la máscara el ambiente ENTRA desde el
     borde de arriba en vez de empezar de golpe, y de paso el corte entre
     capítulos se lee deliberado. Vale para los seis sin caso particular. */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 92%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 22%, #000 92%, transparent);
}
.fondo .ilus--fondo { width: 100%; height: 100%; }
/* el campo negro de la lámina no viaja a la página: ver la nota de arriba */
.fondo .campo { display: none; }
/* El contenido del capítulo va por encima. `.cap__pin::after` (el velo de los
   cantos) se queda entremedio, que es donde corresponde.

   SIN `position: relative`, y esto no es un detalle. La primera versión de
   esta regla lo traía, y como `.cap__pin > :not(.fondo)` pesa (0,2,0) contra
   los (0,1,0) de `.baja`, **le cambiaba el `position: absolute` por
   `relative`**: la señal de «baja» dejaba de estar clavada al pie del pin,
   pasaba a ser un item más del grid detrás del CTA, y su `left: 50%` —que en
   absoluto la centraba y en relativo la corre media pantalla— la mandaba
   encima del botón «Escríbeme y vemos tu clóset», cortada por el canto
   derecho. Se vio en una captura a 390; ninguna sonda lo iba a ver, porque no
   es un desborde ni un corte de pin: es un elemento bien medido en el lugar
   equivocado.
   No hace falta posicionar nada: **`z-index` sí aplica a un grid item aunque
   no esté posicionado**, y `.baja`, que es absoluta, lo toma igual. Es la
   trampa de especificidad silenciosa del catálogo, cometida por mí y en su
   variante más cara: una propiedad que nadie escribió para ese elemento. */
.cap__pin > :not(.fondo) { z-index: 1; }

/* Cada capítulo dibuja con lo que se lee sobre SU papel. Los números son los
   de la tabla de la paleta §9, y la opacidad la pone el ambiente: un fondo
   que compite con el texto dejó de ser fondo. */
#ronda    .fondo { --coral: var(--coral); opacity: .5; }        /* negro: el coral dibuja */
#perchero .fondo { --coral: var(--amarillo); opacity: .22; }    /* azul: 5,25:1 */
#adentro  .fondo { --coral: var(--negro); opacity: .17; }       /* coral: la tinta, 7,2:1 */
#espejo   .fondo { --coral: var(--azul-hondo); opacity: .16; }  /* amarillo: 9,5:1 */

#dedia    .fondo { --coral: var(--coral-hondo); opacity: .17; }
/* LA VUELTA es la excepción declarada de Iris: acá el fondo ES el argumento
   —dos telas y, donde se tocan, el coral— así que se lo deja más presente. Va
   con --coral-hondo, que es el único coral que se lee sobre amarillo (4,7:1)
   y es además --linea-vuelta, el color de la costura. */
#vuelta   .fondo { --coral: var(--coral-hondo); opacity: .17; }

/* el trazo del fondo se dibuja con el capítulo, igual que todo lo demás */
.fondo .trazo { stroke-dashoffset: calc(1 - var(--p, 1)); }
.fondo .capa--fondo  { transform: translateY(calc((var(--p, .5) - .5) * -46px)); }
.fondo .capa--medio  { transform: translateY(calc((var(--p, .5) - .5) * -24px)); }
.fondo .capa--frente { transform: translateY(calc((var(--p, .5) - .5) *  14px)); }

/* 1 · EL CONTORNO se traza */
.ilus .trazo {
  stroke-dasharray: 1;                       /* = el trazado completo */
  stroke-dashoffset: calc(1 - var(--e, 1));  /* 1 = sin dibujar · 0 = entero */
}

/* 2 · LA TELA entra después, cuando el contorno ya está */
.ilus .tela { opacity: var(--e2, 1); }

/* 3 · el parallax de capas. Va sobre --p (el avance crudo del capítulo) y no
   sobre --e, para que siga moviéndose durante TODO el capítulo en vez de
   congelarse cuando el dibujo termina. El recorrido está en unidades de
   usuario del lienzo (800×1000 / 900×500), así que 30 son ~3%: se siente como
   profundidad y no como que el dibujo se desarma. */
.ilus .capa--fondo  { transform: translateY(calc((var(--p, .5) - .5) * -30px)); }
.ilus .capa--medio  { transform: translateY(calc((var(--p, .5) - .5) * -16px)); }
.ilus .capa--frente { transform: translateY(calc((var(--p, .5) - .5) *  10px)); }

/* ── LA VUELTA · los tres tiempos ──
   Las tres láminas comparten sistema de coordenadas y la tercera reusa el
   trazado y el transform de la primera IDÉNTICOS AL DÍGITO. Así que en
   `vuelta-pieza` no hay que mover nada: basta con ordenar en el tiempo lo que
   ya está dibujado encima. El contorno se traza, entra la tela rayada —la que
   ya venía de «Era esto»—, después entra la del vestido por la mitad derecha,
   y al final baja la costura. Eso es «Hecho de dos» ocurriendo ante los ojos.
   Si alguien toca el encuadre de una de las tres, se tocan las tres. */
[data-ilus="vuelta-pieza"] .tela--cuadros { opacity: var(--e3, 1); }
[data-ilus="vuelta-pieza"] .costura {
  stroke-dashoffset: calc(1 - var(--e3, 1));
}


/* ───────────────────── 4 · el ojo ───────────────────── */

.dos-tiempos span { display: block; }
.dos-tiempos span:last-child { color: var(--coral); }

.pilares {
  display: grid; gap: var(--e-3);
  margin: clamp(1rem, 3.4svh, 2.5rem) 0;
  text-align: left;
}
@media (min-width: 900px) { .pilares { grid-template-columns: repeat(3, 1fr); gap: var(--e-6); } }

.pilar { border-top: 1px solid var(--borde-oscuro); padding-top: var(--e-2); }
/* `.pilar__n` (los «01 / 02 / 03») se fue del HTML y su regla se va con él:
   una regla sin DOM es la mitad de la trampa de «CSS que sobrevive a su DOM».
   El filete superior ya separa las columnas y Ojo / Mezcla / Casa se
   distinguen solos — son mucho mejores que sus números. */
.pilar h3 { font-size: var(--t-h4); margin: .05em 0 .15em; }
.pilar p { font-size: var(--t-pie); color: var(--texto-suave); margin: 0; }

/* EL PULSO SE VE, EN VEZ DE ESTAR SOLO CALCULADO.
   La rampa negro → azul → coral → amarillo está resuelta por luminancia y
   documentada, y aun así al mirar la página se rompía: las seis primeras
   pantallas son --negro → --negro-02 → -03 → -04, o sea luminancias 15 a 35,
   que a ojo NO EXISTEN. Seis pantallas que parecen la misma, y son justo las
   seis donde se decide si alguien sigue bajando.
   El arreglo no es subir el fondo, que ya está al límite: es repartir el
   amarillo de forma CRECIENTE dentro del tramo oscuro. Acá, en EL OJO, la
   esencia de la marca deja de ser una línea coral y pasa a ser un bloque
   amarillo macizo, invertido. Así, cuando EL ESPEJO llega en amarillo pleno,
   se siente GANADO en vez de simplemente ocurrido. */
.esencia {
  font-family: var(--fuente-display);
  font-weight: 750;
  font-size: clamp(1.5rem, min(6.4vw, 4.6svh), 2.6rem);
  letter-spacing: -.03em;
  background: var(--amarillo);
  color: var(--negro);
  display: block;
  width: 100%;
  padding: clamp(.5rem, 2svh, 1.1rem) var(--e-4);
  margin: 0;
}


/* ───────────────────── prendas dibujadas ───────────────────── */

.pz { display: block; width: 100%; aspect-ratio: 200 / 260; overflow: visible; }
/* el filete de detalle de cada prenda, también desde la paleta */
.pz--oscura { --linea: color-mix(in srgb, var(--amarillo) 40%, transparent); }
.pz--clara  { --linea: color-mix(in srgb, var(--negro) 34%, transparent); }


/* ───────────────────── 5 · ronda ───────────────────── */

.bolsas { display: flex; align-items: flex-end; justify-content: center; gap: clamp(.4rem, 2vw, 1.25rem); }
.bolsa {
  display: block; width: clamp(58px, 21vw, 140px);
  color: var(--coral-hondo);
  /* con --e en vez de --t: la bolsa llega y SE POSA. Y el piso sube de .14 a
     .35 porque el menú aterriza acá y a .14 el capítulo abría vacío. */
  opacity: calc(.35 + var(--e) * .65);
  transform: translateY(calc((1 - var(--e)) * 24px)) scale(calc(.92 + var(--e) * .08));
}
.bolsa:nth-child(2) { color: var(--coral); }
.bolsa:nth-child(3) { color: var(--coral-claro); }


/* ───────────────────── 6 · el certificado ─────────────────────
   Cifras en Archivo con tabular-nums: la columna cuadra sin traer una
   tercera familia (regla de la paleta). */

.certificado {
  font-family: var(--fuente-texto);
  font-variant-numeric: tabular-nums;
  text-align: left;
  max-width: 27rem; width: 100%;
  margin: 0 auto;
  padding: var(--e-4) var(--e-4) var(--e-3);
  border: 1px solid var(--borde-oscuro);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--negro) 34%, transparent);
  font-size: var(--t-pie);
  line-height: 1.45;
}
.certificado__cab {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3);
  font-family: var(--fuente-etiqueta);
  font-size: var(--t-micro); font-weight: var(--peso-fuerte);
  letter-spacing: var(--track-etiqueta); text-transform: uppercase;
  margin-bottom: var(--e-3); color: var(--texto-suave);
}
.certificado__ej {
  border: 1px solid var(--acento-cap); color: var(--acento-cap);
  border-radius: var(--r-xs);
  padding: 1px 6px; letter-spacing: var(--track-etiqueta); white-space: nowrap;
}
.certificado__linea { display: flex; justify-content: space-between; gap: var(--e-4); margin: 0 0 2px; }
.certificado__linea b { font-weight: var(--peso-fuerte); white-space: nowrap; }
.certificado hr { border: 0; border-top: 1px dashed var(--borde-oscuro); margin: var(--e-2) 0; }
.certificado__pie {
  /* --t-mini y no --t-micro: son 49,7 caracteres de frase entera, no un
     rótulo de dos palabras */
  margin: var(--e-3) 0 0; font-size: var(--t-mini);
  color: var(--texto-suave); letter-spacing: .02em;
}


/* ───────────────────── 7 · agua · el horizonte ───────────────────── */

.horizonte__aviso {
  font-size: var(--t-pie);
  border-left: 2px solid var(--acento-cap);
  padding-left: var(--e-4);
  color: var(--texto-suave);
  margin-bottom: 0;
}


/* ───────────────────── 8 · el perchero ───────────────────── */

.perchero { display: grid; gap: clamp(.75rem, 3svh, 2.25rem); width: 100%; max-width: 64rem; margin: 0 auto; }
.perchero__texto { max-width: var(--ancho-angosto); }
/* el riel llega al canto derecho del capítulo y sigue. Un póster llega hasta
   el borde del papel; una tarjeta, no. En escritorio el capítulo va descentrado
   (tipo BANDA) y el riel es lo que lo cierra por la derecha. */
@media (min-width: 900px) {
  #perchero .riel-prendas {
    margin-right: calc(clamp(var(--e-margen), 8vw, 9rem) * -1 - var(--e-margen));
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
            mask-image: linear-gradient(90deg, #000 82%, transparent);
  }
}

.precios-linea {
  font-family: var(--fuente-etiqueta);
  font-size: var(--t-pie); font-weight: var(--peso-medio);
  letter-spacing: .03em; font-variant-numeric: tabular-nums;
  color: var(--texto-suave);
}
.precios-linea b { font-weight: var(--peso-fuerte); color: var(--texto); }

/* el riel horizontal se desplaza con el scroll: el perchero se recorre */
.riel-prendas {
  overflow: hidden;
  margin: 0 calc(var(--e-margen) * -1); padding: 0 var(--e-margen);
  /* sin esto, la prenda del canto queda cortada a cuchillo y se lee como un
     bug; con el desvanecido se lee como un riel que sigue más allá */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.riel-prendas__fila {
  display: flex; gap: clamp(.6rem, 2.4vw, 1.6rem); width: max-content;
  /* --t y no --e a propósito: el perchero se RECORRE, y un recorrido sigue al
     dedo palmo a palmo. Acá una curva de llegada sería mentira. */
  transform: translateX(calc(var(--t) * -46%));
  align-items: flex-end;
}
/* en vertical el riel quedaba con prendas de 62px flotando en medio de la
   pantalla: se veía como una guarda, no como un perchero. Con más presencia
   el capítulo se sostiene, y sigue sobrando alto de pin (medido). */
.colgada { display: block; width: clamp(84px, 22vw, 124px); flex: 0 0 auto; position: relative; }
.colgada::before {
  content: ""; position: absolute; left: 0; right: 0; top: 4%;
  border-top: 1px solid var(--borde);
}


/* ───────────────────── 9 · clóset adentro ───────────────────── */

.veredictos {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--e-2); margin: clamp(.6rem, 2.2svh, 1.25rem) 0;
}
.veredicto {
  font-family: var(--fuente-etiqueta);
  font-size: var(--t-mini); font-weight: var(--peso-fuerte);
  letter-spacing: var(--track-etiqueta); text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 0;   /* cantos vivos */
  padding: var(--e-2) var(--e-4);
  /* El suelo sube de .16 a .75. Cuando el capítulo se clava --t es 0, y a .16
     los tres veredictos entraban a 1,37:1 medido: en la captura son fantasmas,
     y «Se queda / Se va / Se transforma» es el argumento del servicio ancla.
     Calculado el suelo que hace falta sobre coral: .75 da 5,12:1; a .55 daba
     3,29. La entrada la siguen cargando la rotación y la escala, que ya
     estaban. Mismo error de forma que la marca del hero: el fotograma inicial
     de un efecto ligado al scroll es un estado de reposo, no un instante. */
  opacity: calc(.75 + var(--e) * .25);
  transform: rotate(calc((1 - var(--e)) * -4deg)) scale(calc(.94 + var(--e) * .06));
}
.veredicto:nth-child(2) { transform: rotate(calc((1 - var(--e)) * 4deg)) scale(calc(.94 + var(--e) * .06)); }
/* «Se transforma» es el veredicto que abre LA VUELTA y tiene que distinguirse.
   Sobre coral no hay un color que lo destaque y además contraste (el amarillo
   da 2,2:1 y el coral no escribe sobre sí mismo), así que se distingue por
   MASA y no por color: relleno en la tinta del capítulo. */
.veredicto:nth-child(3) {
  border-color: var(--acento-cap);
  background: var(--acento-cap);
  color: var(--fondo);
}

.antes-despues, .trio { display: grid; gap: var(--e-2); width: 100%; max-width: 100%; }
.antes-despues { grid-template-columns: 1fr 1fr; margin-top: clamp(.5rem, 2svh, 1.25rem); }
.trio { grid-template-columns: repeat(3, 1fr); margin: 0 0 var(--e-4); }
/* Dentro de una fila los huecos van más bajos (son apoyo, no protagonistas)
   y, sobre todo, van con PROPORCIÓN REAL: con `max-height` sobre un ancho
   de columna quedaban apaisados aunque el pie dijera 4:5, y eso engaña a
   quien tenga que entregar la foto. Con alto definido y ancho automático,
   la caja mide exactamente lo que declara. */
/* ───────────────────── ilustraciones de línea ─────────────────────
   Van INLINE, no como <img>: cero peticiones y el color sale de la paleta,
   por lo mismo que el sprite de prendas. Los trazados son de Iris y se
   copian literales de identidad/direccion-visual/lineas/ — solo se
   sustituyen los hexadecimales por las variables. Lienzo 900×500.
   Se acotan por ALTURA, como todo lo que va dentro de un pin: a ancho de
   columna pedían 190-302px de alto y cortaban sus capítulos. */
/* Acá vivían `.ilu`, `#perchero .ilu` y `#espejo .ilu--recorte`: las láminas
   de arcos que estuvieron inline en v12–v13. Salieron del HTML y sus reglas
   salen con ellas —CSS que sobrevive a su DOM es exactamente la trampa que
   este archivo documenta dos veces—. Lo que ocupa hoy ese rol son las seis
   ilustraciones de línea (`.ilus`, más arriba), que además se dibujan.
   La versión con arcos queda entera en `respaldo/index-v7-antes-de-sacar-arcos.html`
   y en `assets/landing-v13.css`. */

.antes-despues, .trio { justify-items: center; }
.antes-despues .hueco, .trio .hueco {
  max-height: none; width: auto; max-width: 100%;
}
.antes-despues .hueco { height: clamp(120px, 24svh, 300px); }
/* El trío reparte el ancho entre TRES columnas, así que su caja se queda sin
   ancho antes que ninguna otra. Con el alto pedido solo por `svh`, en teléfono
   alto y angosto la altura pedía más ancho del que la columna podía dar y
   `max-width:100%` lo recortaba: la caja DECÍA 4:5 y MEDÍA 2:3.
     390×844 → 0,654 · 414×896 → 0,659 · 430×932 → 0,660
   No es solo estético: hoy estos huecos son el brief de las fotos que le vamos
   a pedir a Yoel, y una caja que miente sobre su proporción engaña justo a
   quien tiene que entregarlas.
   El `min()` con vw ata la altura al ancho disponible: a 4:5 la caja necesita
   1,25 × el ancho de columna, y la columna mide ~0,285 del viewport. De ahí el
   35vw. En escritorio no cambia nada —manda el svh— porque sobre 900px la fila
   ya se encoge a su contenido. */
/* El trío se quedó con el capítulo ENTERO —los precios de LA VUELTA se
   mudaron al capítulo anterior— así que puede ocupar de verdad la pantalla:
   es el remate de la página y hasta ahora medía 144px de ancho en escritorio. */
.trio .hueco { height: clamp(140px, min(56svh, 24vw), 420px); }
/* En escritorio la fila ocupaba el ancho entero del capítulo y cada foto se
   centraba dentro de SU columna: el antes y el después terminaban a 800px uno
   del otro, y dos clósets tan separados no se comparan, se leen como dos fotos
   sueltas. La fila se encoge a su contenido y se centra entera. En vertical no
   cambia nada: ahí las columnas ya son angostas y las fotos van juntas. */
@media (min-width: 900px) {
  .antes-despues, .trio { width: fit-content; margin-inline: auto; gap: var(--e-4); }
}
/* EL TRÍO SE RECORRE EN VERTICAL, no se reparte. `repeat(3, 1fr)` no cambiaba
   en teléfono y dejaba cada lámina en 109 × 137 px medidos: la textura de
   rayado (paso de 9 sobre un lienzo de 800) baja de 2px reales y se ve como
   grano, no como tela — y el trío entero existe para que se vea que la pieza
   nueva mezcla las DOS telas de origen. Con scroll-snap cada lámina se para
   sola y se lee la secuencia.
   El margen negativo + padding es el patrón de sangrado; hay que volver a
   medir desborde horizontal después de tocarlo, que es la forma más común de
   introducirlo (medido después: 0 a 320, 360, 390, 430 y 1440). */
/* ── EL TRÍO EN VERTICAL: DOS ARRIBA, EL RESULTADO ABAJO Y MÁS GRANDE ──
   Tres columnas no cambiaban en teléfono y dejaban cada lámina en 109 × 137 px
   medidos: la textura de rayado (paso de 9 sobre un lienzo de 800) baja de 2px
   reales y se ve como grano, no como tela — y el trío entero existe para que
   se vea que la pieza nueva mezcla las DOS telas de origen.
   Se probó antes con una tira que se recorre de lado (`overflow-x:auto` +
   scroll-snap) y en la captura se vio el problema: **la tercera lámina, que es
   el remate de toda la página, quedaba fuera de pantalla** y solo aparecía si
   a alguien se le ocurría deslizar. El momento alto no puede depender de un
   gesto que nadie pidió.
   Dos arriba y el resultado abajo ocupando el ancho entero dice «dos → uno»
   mejor que una fila de tres, cabe sin recortar nada y hace que la pieza nueva
   sea la más grande de las tres, que es lo que corresponde. */
@media (max-width: 899px) {
  .trio { grid-template-columns: 1fr 1fr; }
  .trio .hueco { height: clamp(140px, min(30svh, 46vw), 240px); }
  .trio .hueco:last-child {
    grid-column: 1 / -1;
    height: clamp(180px, min(40svh, 64vw), 320px);
  }
}


/* ───────────────────── 10 · las tarifas ─────────────────────
   En vertical la tarjeta se compacta en dos columnas (nombre a la
   izquierda, precio a la derecha): tres tarjetas apiladas «de manual»
   medían 450px y hacían desbordar el pin. */

.tarifas { display: grid; gap: 6px; margin: clamp(.6rem, 2.2svh, 1.5rem) 0; text-align: left; width: 100%; }
@media (min-width: 900px) { .tarifas { grid-template-columns: repeat(3, 1fr); gap: var(--e-4); } }

.tarifa {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--e-4);
  align-items: baseline;
  border: 1px solid var(--borde);
  border-radius: 0;
  padding: var(--e-2) var(--e-3);
  background: var(--superficie-calida);
}
/* QUE LA JERARQUÍA LA HAGA LA MASA, COMO EN EL PÓSTER, y no un box-shadow.
   Un borde `rgba(3,4,14,.22)` sobre amarillo se ve como un fantasma. */
.tarifa--destacada {
  border-color: var(--negro);
  background: var(--negro);
  color: var(--amarillo);
  box-shadow: none;
}
.tarifa--destacada .tarifa__t { color: #B9B18E; }
.tarifa--destacada > p:last-child { color: #E6DDB4; }

/* ── LA VUELTA no lleva tarjetas: lleva una lista de precios ──
   `#adentro-precio` y `#vuelta-precio` eran literalmente el mismo componente
   —tres tarjetas de igual ancho— a nueve pantallas de distancia: el patrón de
   pricing más de catálogo que hay, usado dos veces en la misma página. Y LA
   VUELTA es «caso a caso», así que la tabla de torres además miente sobre lo
   que se está comprando. Tres líneas con filete entre ellas: el nombre a la
   izquierda, el rango a la derecha en display grande. */
#vuelta .tarifas { display: block; }
#vuelta .tarifa {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--e-4);
  align-items: baseline;
  border: 0; border-top: 1px solid var(--negro);
  border-radius: 0;
  background: none;
  padding: var(--e-3) 0;
}
#vuelta .tarifa:last-child { border-bottom: 1px solid var(--negro); }
#vuelta .tarifa h3 { font-size: var(--t-h4); }
#vuelta .tarifa__p {
  font-family: var(--fuente-display);
  font-size: clamp(1.15rem, min(3.4vw, 3.4svh), 1.9rem);
  font-weight: 750;
  letter-spacing: -.02em;
}
@media (min-width: 900px) {
  #vuelta .tarifas { max-width: 46rem; margin-inline: auto; }
  #vuelta .tarifa { padding: var(--e-4) 0; }
}
.tarifa h3 { grid-column: 1; grid-row: 1; font-size: var(--t-cuerpo); }
.tarifa__t {
  grid-column: 1;
  font-family: var(--fuente-etiqueta); font-size: var(--t-micro);
  font-weight: var(--peso-fuerte); letter-spacing: var(--track-etiqueta);
  text-transform: uppercase; color: var(--texto-tenue); margin: 0;
}
.tarifa__p {
  grid-column: 2; grid-row: 1; justify-self: end;
  font-size: var(--t-h4); font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums; white-space: nowrap; margin: 0;
}
.tarifa > p:last-child {
  grid-column: 1 / -1;
  font-size: var(--t-pie); color: var(--texto-suave);
  line-height: 1.35;
  margin: var(--e-1) 0 0;
}

@media (min-width: 900px) {
  .tarifas { gap: var(--e-4); }
  .tarifa { display: block; padding: var(--e-4); }
  .tarifa h3 { font-size: var(--t-h4); }
  .tarifa__t { margin: .2em 0 .3em; }
  /* justify-self NO muere al pasar de grid a block: CSS Box Alignment lo
     aplica también a cajas de bloque normales, y una caja con justify-self
     distinto de normal pasa a shrink-to-fit. Medido: el precio quedaba de
     172px pegado al canto derecho de una tarjeta de 383. Hay que resetearlo
     a mano, no basta con cambiar el display del padre. */
  .tarifa__p { margin: 0 0 var(--e-2); justify-self: normal; }
}


/* ───────────────────── 12 · el espejo · la demo ─────────────────────
   El capítulo frío del sistema junto con AGUA: --espejo es, literalmente,
   «el vidrio, el dato, la pantalla». */

.demo-envoltorio { width: 100%; max-width: 46rem; margin: 0 auto; text-align: center; }

/* «--espejo-alto: superficie de UI del clóset digital», dice la paleta. El
   frío de EL ESPEJO vive acá, en la tarjeta, no en el fondo de la página:
   como fondo rompía el pulso (era más oscuro que el capítulo anterior). */
/* EL PANEL ES NEGRO, y esa es la decisión que más rinde del capítulo.
   Antes era amarillo (tarjeta) sobre hueso (panel) sobre amarillo (página):
   tres amarillos apilados y cero contraste, en el único capítulo cuyo producto
   es una PANTALLA. Con el panel en negro, la demo del clóset digital es lo
   único oscuro de todo el tramo brillante, y se lee de inmediato que eso es un
   teléfono — que es justo lo que hay que vender. EL ESPEJO es además el único
   ingreso recurrente del negocio y su demo es lo único que se toca en la
   página. */
.demo {
  border: 1px solid var(--amarillo);
  border-radius: 0;
  padding: var(--e-3);
  background: var(--negro);
  color: var(--amarillo);
  box-shadow: none;
  text-align: center;
}
.demo .demo__rot, .demo .demo__pie { color: #E6DDB4; }
.demo__rot, .demo__pie {
  font-family: var(--fuente-etiqueta);
  font-size: var(--t-micro); font-weight: var(--peso-fuerte);
  letter-spacing: var(--track-etiqueta); text-transform: uppercase;
  color: var(--texto-tenue); text-align: center;
}
.demo__rot { margin: 0 0 var(--e-2); }
.demo__pie {
  margin: var(--e-3) 0 0;
  font-size: var(--t-mini);        /* frase entera, no rótulo */
  text-transform: none; letter-spacing: .02em; font-weight: var(--peso-normal);
}
.demo__rot span { opacity: .5; }

.demo__fila { display: grid; gap: var(--e-2); grid-template-columns: repeat(3, 1fr); }
@media (min-width: 900px) { .demo__fila--abajo { grid-template-columns: repeat(6, 1fr); } }

.tarj {
  display: block; width: 100%;
  border: 1px solid rgba(248, 230, 90, .22);
  border-radius: 0;
  background: var(--amarillo);
  padding: var(--e-2) var(--e-1) var(--e-1);
  color: inherit; font: inherit;
  text-align: center;
  /* 200ms, no 520. El estándar da 150–250ms para un cambio de selección, y
     medio segundo en algo que se toca se siente gomoso. Y `filter` SALE de la
     transición: no es propiedad de compositor, así que cada frame repintaba
     las seis tarjetas — el A/B midió un 25% del coste del recorrido completo
     de la página, el mayor ahorro de un solo cambio. */
  transition: opacity 200ms var(--ease),
              transform 200ms var(--ease),
              border-color 200ms var(--ease);
}
button.tarj { cursor: pointer; -webkit-appearance: none; appearance: none; }
/* la respuesta al dedo. Un apagado no se agranda al tocarlo: baja desde su
   propio .94. */
button.tarj:active { transform: scale(.96); }
button.tarj--no:active { transform: scale(.91); }
/* la fila de abajo cambia como quien pasa la mano por el perchero, de
   izquierda a derecha: 40ms entre tarjeta y tarjeta, 200 de cascada total.
   Un cambio de estado se convierte en una decisión que alguien está tomando. */
.demo__fila--abajo .tarj:nth-child(2) { transition-delay: 40ms; }
.demo__fila--abajo .tarj:nth-child(3) { transition-delay: 80ms; }
.demo__fila--abajo .tarj:nth-child(4) { transition-delay: 120ms; }
.demo__fila--abajo .tarj:nth-child(5) { transition-delay: 160ms; }
.demo__fila--abajo .tarj:nth-child(6) { transition-delay: 200ms; }
/* alto definido + ancho automático: el dibujo no puede crecer y reventar
   el pin, y la fila mide siempre lo mismo */
.tarj .pz {
  height: clamp(46px, 8.4svh, 116px);
  width: auto; margin-inline: auto;
}
.tarj > span {
  display: block;
  font-family: var(--fuente-etiqueta);
  font-size: var(--t-micro); font-weight: var(--peso-fuerte);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-tenue); margin-top: var(--e-1);
}
.tarj--sel { border-color: var(--acento-cap); box-shadow: 0 0 0 1px var(--acento-cap) inset; }
.tarj--sel > span { color: var(--acento-cap); }

/* «Ninguno más. Porque yo lo dije»: los que no van no se ocultan, se
   APAGAN — la clienta ve que existen y que él los descartó.
   Dos cosas cambiaron. `filter: grayscale(1)` desaturaba a GRIS LITERAL, y la
   regla 5 de la paleta es «nada de gris neutro»: acá los neutros llevan el
   azul del negro. Y .13 de opacidad daba 1,21:1 medido — a ese nivel no se
   ven, que es lo contrario de lo que dice el copy que tienen debajo. A .28 se
   siguen leyendo como descartados y la silueta aparece. (Sigue sin cumplir
   4,5, y está bien que así sea: es un estado inactivo, no texto que haya que
   leer.) */
.tarj--no { opacity: .28; filter: none; transform: scale(.94); }
.tarj--si { opacity: 1; }


/* ───────────────────── 13 · la vuelta ───────────────────── */

/* ═══════════ «DOS PRENDAS QUE SE JUNTAN» AHORA SE JUNTAN ═══════════
   Es la esencia declarada de la marca —«la marca no fabrica: combina»— y este
   capítulo la pone en palabras justo debajo: «Dos prendas que ya existían. Una
   pieza que no existía.»
   Lo que se veía en el estado final (--p:1) era **tres prendas en fila**. La
   aritmética explica por qué: `.fusion` es un grid `1fr auto 1fr` con el «+»
   en la columna del medio, y las de origen viajaban 34% **de su propio ancho**
   —unos 40px en teléfono—, muy lejos del centro, que es donde aparecía la
   tercera. O sea que la tercera se metía ENTRE las dos en vez de salir de
   ellas, y encima era la misma silueta de abrigo que uno de sus padres.
   La imagen desmentía al copy que tenía debajo. Con el nivel de cuidado que
   tiene el resto de esta página, era la única cosa que se contradecía a sí
   misma. Y era también el estado que veían quien navega sin JS y quien pidió
   reduced-motion.

   Ahora hace las tres cosas que no hacía ninguna: las dos CONVERGEN hasta
   cruzarse (115% las lleva a solaparse en el centro), la tercera EMERGE del
   cruce —solo cuando las dos ya se tocan, --a:.46 en el HTML— y el «+» se
   apaga temprano, cuando ya cumplió. Y nada nace de scale(0): nada nace de la
   nada. */
.fusion {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; justify-items: center;
  gap: clamp(.25rem, 2vw, 1.1rem);
  max-width: 30rem; margin: clamp(.4rem, 1.6svh, 1rem) auto 0;
  position: relative;
}
.fusion__o { display: block; width: clamp(64px, 19vw, 118px); }
/* encogen al acercarse: dos cosas que entran en una tercera ocupan menos.
   La opacidad NO baja de .35 — las de origen se tienen que seguir viendo al
   lado de la pieza nueva, que es la marca contándose sola. */
.fusion__o--a {
  transform: translateX(calc(var(--e) * 115%)) rotate(calc(var(--e) * 5deg))
             scale(calc(1 - var(--e) * .14));
  opacity: calc(1 - var(--e) * .65);
}
.fusion__o--b {
  transform: translateX(calc(var(--e) * -115%)) rotate(calc(var(--e) * -5deg))
             scale(calc(1 - var(--e) * .14));
  opacity: calc(1 - var(--e) * .65);
}
.fusion__mas {
  font-family: var(--fuente-display);
  font-size: clamp(1.1rem, 4.6vw, 1.8rem);
  color: var(--texto-tenue);
  opacity: calc(1 - var(--t) * 2.4);
}
.fusion__mas::before { content: "+"; }   /* decoración, no contenido */
.fusion__r {
  position: absolute; left: 50%; top: 50%;
  width: clamp(76px, 23vw, 138px);
  transform: translate(-50%, -50%) scale(calc(.88 + var(--e) * .12));
  opacity: var(--e);
}

/* la etiqueta cosida: --hilo, el color de la intersección. El único de
   este capítulo, y es exactamente su --linea-vuelta. */
.etiqueta {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  border: 1px solid var(--coral-hondo); color: var(--coral-hondo);
  padding: var(--e-2) var(--e-4); border-radius: 0;
  margin: clamp(.5rem, 1.8svh, 1.1rem) auto clamp(.6rem, 1.8svh, 1.2rem);
  opacity: var(--e);
  transform: translateY(calc((1 - var(--e)) * 12px));
}
.etiqueta__n {
  font-family: var(--fuente-etiqueta); font-size: var(--t-pie);
  font-weight: var(--peso-fuerte); letter-spacing: var(--track-ancho);
  font-variant-numeric: tabular-nums;
}
.etiqueta__f { font-family: var(--fuente-display); font-size: var(--t-mini); font-style: italic; }


/* ───────────────────── 15 · de día ───────────────────── */

.comparador {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2);
  margin: clamp(.6rem, 2.4svh, 1.5rem) auto; max-width: 34rem; width: 100%;
}
.comparador__lado {
  border: 1px solid var(--borde); border-radius: var(--r-sm);
  padding: var(--e-3); display: grid; gap: 2px; align-content: start; text-align: left;
}
.comparador__lado--mio {
  border-color: var(--acento-cap);
  background: color-mix(in srgb, var(--azul) 12%, transparent);
}
.comparador__rot {
  font-family: var(--fuente-etiqueta); font-size: var(--t-micro);
  font-weight: var(--peso-fuerte); letter-spacing: var(--track-etiqueta);
  text-transform: uppercase; color: var(--texto-tenue);
}
.comparador__cifra {
  /* en vertical la columna mide ~145px y «$25.000 – $40.000» a --t-h4 se
     partía en dos con el tachado a medias */
  font-size: var(--t-cuerpo); font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 900px) { .comparador__cifra { font-size: var(--t-h4); } }
.comparador__cifra--tachada { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--texto-tenue); }
.comparador__nota { font-size: var(--t-pie); color: var(--texto-suave); line-height: 1.3; }

#dedia .hueco {
  margin: 0 auto var(--e-4);
  max-height: none; width: auto; max-width: 100%;
  /* 3:2 de verdad, no una banda. El tope por svh es lo que hace que DE DÍA
     quepa en 360×640, que es la pantalla más apretada que se mide. */
  height: clamp(80px, 12svh, 280px);   /* con la ilustración puesta, 17svh pasaba 22px a 360×640 */
}
#dedia p:not(.rotulo):not(.cta-linea) { font-size: var(--t-pie); }


/* ───────────────────── 16 · cierre ───────────────────── */

.cierre {
  background: var(--fondo); color: var(--texto);
  text-align: center;
  padding: clamp(3.5rem, 14svh, 7.5rem) var(--e-margen) clamp(2rem, 6svh, 3.5rem);
}
.claim--cierre { margin-bottom: var(--e-5); }
.cierre .cta { background: var(--negro); color: var(--amarillo); }
.cierre__nota { font-size: var(--t-pie); color: var(--texto-suave); margin: var(--e-5) 0 0; }

.firma-cierre { margin: clamp(2rem, 6svh, 3.5rem) 0 0; display: grid; gap: var(--e-1); justify-items: center; }
.iso--firma { font-size: 34px; color: var(--negro); margin-bottom: var(--e-2); }
.firma-cierre__m { font-family: var(--fuente-display); font-weight: 750; font-size: var(--t-h3); }
/* La línea de firma de la marca —«Yoly + Elvis. Dos cosas que ya existían.»—
   es una FRASE, no un rótulo: fuera del registro de etiqueta (11px, versalitas,
   0,16em de tracking), que es para una a tres palabras. Ver la nota gemela en
   .retrato__s. Esta regla vive acá y no allá porque, al estar más abajo en el
   archivo, la de allá se la comía por orden. */
.firma-cierre__s {
  font-family: var(--fuente-texto);
  font-size: var(--t-pie);
  font-weight: var(--peso-normal);
  letter-spacing: .01em;
  text-transform: none;
  color: var(--texto-suave);
}


/* ───────────────────── pie ───────────────────── */

/* EL AVISO DE LOS DATOS QUE FALTAN.
   Vive escondido y solo aparece cuando alguien llega a él por un ancla
   (`:target`), que es lo que pasa al apretar cualquiera de los ocho CTA
   mientras el WhatsApp y el Instagram sigan pendientes. Así la página no
   lleva una advertencia puesta encima todo el rato, pero tampoco puede
   mentirle a nadie: un clic honesto explica por qué no pasa nada.
   Cuando lleguen los datos, este bloque se borra junto con los ocho
   data-pendiente. La puerta (`bin/puerta.sh`) no deja publicar antes. */
.falta {
  display: none;
  background: var(--negro); color: var(--amarillo);
  border-top: 3px solid var(--coral);
  padding: var(--e-5) var(--e-margen);
  text-align: center;
}
.falta:target { display: block; }
.falta p { margin: 0 auto; max-width: 46ch; font-size: var(--t-pie); line-height: 1.5; }

.pie {
  background: var(--negro); color: var(--texto-suave);
  text-align: center;
  padding: var(--e-5) var(--e-margen) var(--e-6);
}
.pie p {
  margin: 0;
  font-family: var(--fuente-etiqueta); font-size: var(--t-micro);
  font-weight: var(--peso-fuerte); letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
}
/* `border-bottom` pegado cortaba las descendentes de «Diseñado». Un subrayado
   de verdad, con offset, hace lo mismo y respeta la letra. Y el área táctil
   sube a 44: medía 184 × 14 px. */
.pie a {
  display: inline-block;
  padding: 12px 6px; margin: -12px -6px;
  text-decoration: underline;
  text-underline-offset: .22em;
  text-decoration-thickness: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .pie a:hover { color: var(--amarillo); }
}


/* ───────────────────── degradaciones que no se negocian ─────────────────────
   DOS disparadores, una sola degradación:

     · prefers-reduced-motion — el visitante pidió que nada se mueva.
     · max-height: 620px      — la pantalla no da para pinear. Medido: bajo
       ~630px los capítulos se cortan (a 320×568 se cortaban cinco). La ley
       del oficio es «un capítulo que no cabe no se pinea: fluye», y vale
       igual para un teléfono viejo que para un portátil con un panel abajo.

   En ambos casos: los rieles colapsan a height:auto, nada se pinea, se
   levanta el overflow:hidden —así ya no hay nada que pueda cortar— y todo
   efecto queda en su ESTADO FINAL legible (--p:1 → --t:1). El contenido no
   depende de ninguna de las dos cosas: sin pin se lee entero, en orden. */

@media (prefers-reduced-motion: reduce), (max-height: 620px) {
  html { scroll-behavior: auto; }

  .cap { height: auto !important; --p: 1; }
  .cap__pin {
    position: static;
    height: auto; min-height: 0;
    overflow: visible;
    padding-block: clamp(3.5rem, 12vh, 6.5rem);
  }
  .esc { --t: 1; }

  html.js [data-rev] { opacity: 1 !important; transform: none !important; transition: none !important; }
  /* sin animación, la bajada del claim simplemente está */
  html.js .portada .claim .bajada,
  html.js .portada .cta--claro,
  html.js .baja::after { animation: none !important; }

  .marca__a, .marca__b, .bolsa, .veredicto, .etiqueta,
  .fusion__o--a, .fusion__o--b, .fusion__r,
  .riel-prendas__fila, .cta, .barra { transition: none !important; }
  /* la demo CONSERVA el fundido: seis tarjetas cambiando de golpe cuando la
     clienta toca otra chaqueta es MÁS agresivo que una opacidad suave, y una
     transición de opacidad es justo de lo que el estándar pide conservar.
     Movimiento reducido es menos movimiento, no cero. */
  .tarj { transition: opacity 200ms linear !important; transition-delay: 0s !important; }

  .marca__a, .marca__b { transform: none; opacity: 1; }
  .riel-prendas__fila { transform: none; }
  /* Sin movimiento, la fusión se cuenta con el estado que ya es legible: las
     dos de origen cruzadas y apagadas, la nueva encima. `transform: none`
     dejaba las de origen separadas, o sea el mismo estado que desmentía al
     copy — y era lo que veía justamente quien pidió no ver movimiento. */
  .fusion__o--a { transform: translateX(80%) scale(.86); opacity: .35; }
  .fusion__o--b { transform: translateX(-80%) scale(.86); opacity: .35; }
  .fusion__mas  { opacity: 0; }
  /* EL TACHÓN DEL INSULTO SE QUEDA PUESTO. `scaleX(calc(1 - var(--t)))` con
     --t en 1 da scaleX(0): el tachón NUNCA EXISTÍA para quien pidió
     reduced-motion ni para quien navega sin JS, y es el único recurso visual
     del capítulo que sostiene el nombre de la marca — se leía «me gritaban la
     Negra Matea. Era un insulto» sin ninguna marca de que aquello fue un
     insulto. Retirarlo era la animación; la palabra tachada es el dato. */
  .tachado__linea { transform: scaleX(1); }
  /* las doce ilustraciones, dibujadas enteras y quietas */
  .ilus .trazo, .fondo .trazo { stroke-dashoffset: 0; }
  .fondo .capa--fondo, .fondo .capa--medio, .fondo .capa--frente { transform: none; }
  .ilus .tela { opacity: 1; }
  .ilus .capa--fondo, .ilus .capa--medio, .ilus .capa--frente { transform: none; }
  .baja { display: none; }
  .retrato { grid-template-rows: auto auto; }
  /* Con `max-height` el alto quedaba topado y el ancho lo ponía el
     contenedor: a 1440×580 daba una caja de 544×348, o sea 1,56 — apaisada,
     bajo un pie que promete «vertical 4:5». Manejándola por ALTO, el ancho
     sale solo y la proporción es exacta. El tope de 105vw es para que en un
     teléfono angosto el ancho que pide no supere el contenedor. */
  .hueco--lleno {
    aspect-ratio: 4 / 5;
    height: clamp(200px, min(60vh, 105vw), 520px);
    width: auto; max-width: 100%; margin-inline: auto;
  }
}