/* ===========================================================================
   NEGRA MATEA · landing
   v3 (24 ago 2026): las fotos ambientales pasan a la paleta v2 —ocre, teja,
   mezclilla turquesa, cal— por encargo de Yoel. El porqué está en
   bin/imagenes-v2/DIRECCION.md: el tricolor es la firma, y una firma necesita
   contraste con lo que la rodea. Las fotos viejas siguen en el repo.
   Fuente única de la paleta y la tipografía de la marca.

   Viene del handoff de Claude Design (4 ago 2026), aplanado a CSS plano:
   sin framework, sin build, sin CDN. Lo que se arregló al aplanar está
   marcado con  ← ARREGLO  para que no se vuelva a romper.
   =========================================================================== */

/* --- Instrument Serif, empaquetada (SIL OFL 1.1) --------------------------
   ← ARREGLO: el prototipo la pedía a Google Fonts. Local = sin dependencia
   de red y sin que cada clienta le deje una huella a Google.               */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/InstrumentSerif-Regular-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/InstrumentSerif-Regular-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('fonts/InstrumentSerif-Italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('fonts/InstrumentSerif-Italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* --- La paleta ------------------------------------------------------------ */
:root{
  --negro:#0B0B0B;
  --blanco:#FFFFFF;
  --hueso:#F1F0EE;
  --texto:#3a3a3a;
  --texto-2:#565656;
  /* ← ARREGLO: el prototipo usaba #8A8A8A para los kickers. Sobre blanco da
     3.45 de contraste y sobre hueso 3.03: reprueba AA (4.5) para texto chico,
     que es justo lo que son los kickers. Oscurecido lo justo para pasar sin
     que se note el cambio de gris. */
  --gris:#6A6A6A;
  --burdeo:#7B2E2E;
  --burdeo-hover:#561F1F;

  /* el tricolor — amarillo · azul · coral, SIEMPRE en ese orden */
  --amarillo:#F5E02A;
  --azul:#1B45D6;
  --coral:#F26B3F;

  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:ui-sans-serif,system-ui,-apple-system,'Helvetica Neue',sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  --ancho:1180px;
  --borde:48px;   /* margen lateral en desktop; se achica en móvil */
}

/* --- Base ----------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--blanco);color:var(--negro);
  font-family:var(--sans);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
h1,h2,p{margin:0}

a{color:var(--burdeo);text-decoration:none}
a:hover{color:var(--burdeo-hover)}

/* Foco visible: la landing se puede recorrer con teclado.
   ← ARREGLO: el prototipo no tenía un solo elemento enfocable. */
:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px}

.saltar{position:absolute;left:-9999px;top:0;background:var(--negro);color:#fff;
  padding:14px 20px;z-index:99;font:500 14px/1 var(--sans)}
.saltar:focus{left:0;color:#fff}

/* --- Tipografía de marca -------------------------------------------------- */
.kicker{
  font:500 12px/1.4 var(--mono);letter-spacing:.26em;text-transform:uppercase;
  color:var(--gris);margin:0;
}
.display{font-family:var(--serif);font-weight:400;line-height:1;letter-spacing:-.015em;margin:0}

/* Título de capítulo: UNA sola escala para todos.
   ← ARREGLO v2 (24 ago 2026): cada capítulo declaraba su propio clamp en un
   style inline —4.4vw, 5vw, 5.4vw, 6vw, 6.4vw— y a 1440 eso daba cinco tallas
   distintas (63/72/78/86/92px) para el mismo rol. La página se leía como cinco
   páginas. Medido con `piloto.mjs tipografia`, que es lo único que lo delata:
   a simple vista cada capítulo se ve bien, el problema solo existe entre uno y
   otro.
   Mide por vh además de vw (ley 1): en un portátil bajo, 5.2vw solo se comería
   la pantalla. */
.titulo-cap{
  font-size:clamp(34px,min(5.2vw,8.4vh),76px);
  line-height:1.04;
  margin-top:24px;
}
.cuerpo{font:400 clamp(18px,2.2vw,21px)/1.62 var(--sans);color:var(--texto);max-width:52ch}
.cuerpo + .cuerpo{margin-top:20px}

/* Envolturas */
.wrap{max-width:var(--ancho);margin:0 auto;padding-inline:var(--borde)}
/* ← ARREGLO v2: era clamp(72px,11vw,140px) — 280px de aire por sección desde
   1280px de ancho. `piloto.mjs valles` midió 1287px de nada repartidos en
   cuatro capítulos, y la captura lo confirmó: bajo la última línea de ESPEJO
   había una franja vacía del alto de media pantalla. Eso es lo que se siente
   como que la página «corre de largo».
   La sección sigue respirando; lo que se fue es el vacío. */
.seccion{padding-block:clamp(64px,8vw,104px)}
.seccion--blanca{background:var(--blanco)}
.seccion--negra{background:var(--negro);color:var(--blanco)}
.seccion--hueso{background:var(--hueso)}
.seccion--negra .kicker{color:rgba(255,255,255,.55)}
.seccion--negra .cuerpo{color:rgba(255,255,255,.78);max-width:46ch}

/* El tricolor: tres barras iguales, nunca manchas ni fondos. */
.tricolor{display:flex;gap:0}
.tricolor span{flex:1;height:5px}
.tricolor span:nth-child(1){background:var(--amarillo)}
.tricolor span:nth-child(2){background:var(--azul)}
.tricolor span:nth-child(3){background:var(--coral)}
.tricolor--corto{max-width:360px}
.tricolor--puntos{gap:10px}
.tricolor--puntos span{flex:none;width:26px;height:3px}
.tricolor--centro{justify-content:center;gap:10px}
.tricolor--centro span{flex:none;width:38px;height:4px}

.regla{width:120px;height:4px;background:var(--azul);margin-block:30px}

/* --- Botones -------------------------------------------------------------
   ← ARREGLO: en el prototipo eran <div> sin href, con un atributo
   `style-hover` inventado que ni su propio runtime implementaba. Acá son
   <a> de verdad, con hover y foco.                                        */
.btn{
  display:inline-block;padding:20px 32px;
  font:500 17px/1 var(--sans);cursor:pointer;border:1.5px solid transparent;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.btn--claro{background:var(--blanco);color:var(--negro)}
.btn--claro:hover{background:var(--amarillo);color:var(--negro)}
.btn--linea{border-color:rgba(255,255,255,.5);color:var(--blanco)}
.btn--linea:hover{border-color:var(--blanco);color:var(--blanco)}
.botones{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* --- Hero ----------------------------------------------------------------- */
.hero{position:relative;min-height:100svh;overflow:hidden;background:var(--negro)}
.hero__foto{
  position:absolute;inset:-6%;
  background:url('img/perchero-v2.webp') center/cover no-repeat;
  animation:nm-drift 20s ease-in-out infinite alternate;
}
.hero__velo{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,11,.74),rgba(11,11,11,.40) 45%,rgba(11,11,11,.88))}
.hero__dentro{
  position:relative;min-height:100svh;max-width:var(--ancho);margin:0 auto;
  padding:clamp(24px,4vw,44px) var(--borde) clamp(40px,6vw,56px);
  display:flex;flex-direction:column;justify-content:space-between;gap:48px;
}
.hero__barra{display:flex;justify-content:space-between;align-items:center;gap:16px}
.hero__marca{font:500 12px/1 var(--mono);letter-spacing:.3em;color:var(--blanco)}
.hero .kicker{color:rgba(255,255,255,.65)}
.hero__titulo{
  font-size:clamp(40px,7.4vw,112px);line-height:.98;color:var(--blanco);
  margin-top:clamp(18px,3vw,26px);max-width:15ch;
}
.hero__tricolor{margin-top:clamp(28px,4vw,40px);max-width:520px}
.hero .botones{margin-top:clamp(30px,4.5vw,44px)}

/* --- Marquesina ----------------------------------------------------------- */
.marquesina{background:var(--negro);padding-block:22px;overflow:hidden;white-space:nowrap}
.marquesina__cinta{
  display:inline-flex;gap:clamp(28px,5vw,56px);
  font:500 13px/1 var(--mono);letter-spacing:.26em;color:rgba(255,255,255,.6);
  animation:nm-march 34s linear infinite;
}
.marquesina__cinta i{font-style:normal}
.marquesina__cinta i:nth-of-type(3n+1){color:var(--amarillo)}
.marquesina__cinta i:nth-of-type(3n+2){color:var(--azul)}
.marquesina__cinta i:nth-of-type(3n+3){color:var(--coral)}

/* --- Rejillas de dos columnas --------------------------------------------- */
.duo{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(40px,6vw,80px);align-items:center}
.duo--nombre{grid-template-columns:1fr 1.15fr;gap:clamp(40px,6.5vw,90px)}
/* ← ARREGLO v2: heredaba `align-items:center` de .duo, y como el teléfono mide
   bastante más que su columna de texto, el centrado repartía el sobrante
   arriba Y abajo del texto. Alineados por arriba, las dos columnas arrancan
   juntas y el aire deja de estar en medio de la lectura. */
.duo--app{grid-template-columns:1fr .85fr;align-items:start}
.duo--vuelta{grid-template-columns:1.1fr 1fr;align-items:end}
.duo--circula{grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,60px);margin-top:40px}

.foto{overflow:hidden;position:relative}
.foto img{width:100%;height:100%;object-fit:cover}
.foto--alta{height:clamp(360px,52vw,640px)}
.foto--retrato{height:clamp(420px,60vw,700px)}
.foto--media{height:clamp(280px,40vw,420px)}
.foto--retrato img{object-position:center 20%}

/* La prenda transformada — el héroe de «la vuelta».
   ← ARREGLO v2 (ley 6): iba con `object-fit:contain` dentro de un cuadro
   apaisado, y `piloto.mjs encuadre` a 390×844 lo midió: una foto de 700×900
   metida en 350×280 usaba el 62% del cuadro; el resto era franja.
   La solución no es forzar `cover` sobre un cuadro que no le corresponde —eso
   le cortaría la prenda, que es justo lo que hay que mostrar— sino darle al
   cuadro la proporción de la foto. Con 7/9 el recorte es cero y el cuadro se
   llena entero. El alto manda y el ancho se deriva, así funciona igual en el
   teléfono y en el escritorio. */
.foto--pieza{
  display:block;height:clamp(360px,40vw,440px);aspect-ratio:7/9;width:auto;
  margin-inline:auto;object-fit:cover;object-position:50% 45%;
}

.marca-lateral{position:absolute;left:-26px;top:40px;width:6px;height:180px;background:var(--coral)}

.cifras{display:flex;gap:36px;margin-top:44px;flex-wrap:wrap}
.cifra__n{font-family:var(--serif);font-size:54px;line-height:1}
.cifra__q{font:500 12px/1.4 var(--mono);letter-spacing:.16em;color:var(--gris);margin-top:8px}

.pie-foto{font:500 13px/1.5 var(--mono);letter-spacing:.22em;color:var(--blanco);margin-top:22px}
.pie-foto--centro{text-align:center;color:rgba(255,255,255,.5);letter-spacing:.18em;font-size:12px}
/* ← ARREGLO v2: `.pie-foto` nace blanco porque hasta ahora solo vivía sobre
   negro. El rótulo nuevo del teléfono va sobre hueso, y en blanco habría sido
   texto invisible. Va DESPUÉS de --centro a propósito: misma especificidad,
   gana el último. */
.pie-foto--oscuro{color:var(--gris)}

.cita{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(34px,4.4vw,44px);line-height:1.15;
  margin-top:34px;color:var(--amarillo);
}

/* --- Las tres decisiones -------------------------------------------------- */
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:clamp(40px,6vw,70px)}
.tarjeta{padding-top:26px;border-top:6px solid var(--gris)}
.tarjeta:nth-child(1){border-top-color:var(--amarillo)}
.tarjeta:nth-child(2){border-top-color:var(--azul)}
.tarjeta:nth-child(3){border-top-color:var(--coral)}
.tarjeta__titulo{font-family:var(--serif);font-size:clamp(32px,3.6vw,40px);line-height:1.06;margin-top:16px}
.tarjeta__texto{font:400 18px/1.6 var(--sans);color:var(--texto-2);margin-top:14px}

/* --- Bloque ESPEJO -------------------------------------------------------- */
.bullets{display:flex;flex-direction:column;gap:18px;margin-top:36px}
.bullet{display:flex;gap:16px;align-items:flex-start}
.bullet__punto{width:14px;height:14px;margin-top:6px;flex:none}
.bullet:nth-child(1) .bullet__punto{background:var(--azul)}
.bullet:nth-child(2) .bullet__punto{background:var(--coral)}
.bullet:nth-child(3) .bullet__punto{background:var(--amarillo)}
.bullet__t{font:500 19px/1.3 var(--sans)}
.bullet__d{font:400 17px/1.5 var(--sans);color:var(--texto-2);margin-top:5px}

/* El teléfono: chasis dibujado en CSS, contenido real adentro. */
.telefono{
  position:relative;width:min(340px,86vw);aspect-ratio:340/718;
  background:#1c1a19;border-radius:46px;padding:12px;margin-inline:auto;
  box-shadow:0 40px 90px rgba(11,11,11,.28);
}
.telefono__isla{position:absolute;top:24px;left:50%;translate:-50% 0;
  width:112px;height:30px;border-radius:20px;background:#000;z-index:5}
.telefono__pantalla{
  position:relative;width:100%;height:100%;background:var(--blanco);
  border-radius:36px;overflow:hidden;padding:64px 22px 22px;
}
.telefono__kicker{font:500 10px/1 var(--mono);letter-spacing:.2em;color:var(--gris)}
.telefono__titulo{font-family:var(--serif);font-size:34px;line-height:1;margin-top:12px}
.telefono__regla{height:3px;background:var(--negro);margin-top:14px}
.looks{position:relative;flex:1;margin-top:16px;min-height:0}
.look{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px}
.look__ancla{flex:0 0 42%;background-color:var(--hueso);background-position:center;
  background-size:contain;background-repeat:no-repeat}
.look__resto{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px}
.look__resto div{background-color:var(--hueso);background-position:center;
  background-size:contain;background-repeat:no-repeat}
.telefono__pantalla{display:flex;flex-direction:column}

.look--1{animation:nm-look 9s steps(1,end) infinite}
.look--2{animation:nm-look2 9s steps(1,end) infinite}
.look--3{animation:nm-look3 9s steps(1,end) infinite}

/* --- Cierre --------------------------------------------------------------- */
/* ← ARREGLO v2: 150px arriba y 120px abajo dejaban el cierre con 0.39 pantallas
   de aire medidas. Y el cierre es el único capítulo que no debe frenar: acá el
   visitante ya decidió, y retenerlo es fricción. */
.cierre{position:relative;background:var(--negro);color:var(--blanco);overflow:hidden;
  padding-block:clamp(72px,9vw,110px) clamp(64px,8vw,96px)}
.cierre__foto{position:absolute;inset:0;opacity:.28;
  background:url('img/closet-despues-v2.webp') center/cover no-repeat;
  animation:nm-drift 24s ease-in-out infinite alternate}
.cierre__dentro{position:relative;text-align:center;max-width:var(--ancho);margin:0 auto;
  padding-inline:var(--borde)}
.cierre__titulo{margin:30px auto 0;max-width:22ch}   /* ← ARREGLO v2: la talla la pone .titulo-cap */
.cierre .cuerpo{color:rgba(255,255,255,.75);margin:26px auto 0;max-width:44ch}
.cierre .botones{justify-content:center;margin-top:44px}

.firma{font:500 12px/1.7 var(--mono);letter-spacing:.24em;color:rgba(255,255,255,.45);margin-top:48px}
.credito{margin-top:14px;font:400 12px/1.7 var(--sans);letter-spacing:.04em;color:rgba(255,255,255,.4)}
.credito a{color:rgba(255,255,255,.65);text-decoration:underline;text-underline-offset:3px}
.credito a:hover{color:var(--amarillo)}

/* --- Animaciones ---------------------------------------------------------- */
@keyframes nm-rise{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}
@keyframes nm-fade{from{opacity:0}to{opacity:1}}
@keyframes nm-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes nm-ken{from{transform:scale(1.14)}to{transform:scale(1)}}
@keyframes nm-drift{from{transform:translateY(-4%)}to{transform:translateY(4%)}}
@keyframes nm-march{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes nm-look{0%,26%{opacity:1}34%,100%{opacity:0}}
@keyframes nm-look2{0%,26%{opacity:0}34%,60%{opacity:1}68%,100%{opacity:0}}
@keyframes nm-look3{0%,60%{opacity:0}68%,92%{opacity:1}100%{opacity:0}}

/* Entrada del hero: sin scroll de por medio, va con delay puro. */
.ent-fade{animation:nm-fade 1.2s ease-out both}
.ent-fade-2{animation:nm-fade 1.4s ease-out .3s both}
.hero__titulo{animation:nm-rise 1.5s cubic-bezier(.16,1,.3,1) .1s both}
.hero__tricolor span:nth-child(1){transform-origin:left;animation:nm-grow .9s cubic-bezier(.16,1,.3,1) .8s both}
.hero__tricolor span:nth-child(2){transform-origin:left;animation:nm-grow .9s cubic-bezier(.16,1,.3,1) 1s both}
.hero__tricolor span:nth-child(3){transform-origin:left;animation:nm-grow .9s cubic-bezier(.16,1,.3,1) 1.2s both}
.hero .botones{animation:nm-rise 1.2s ease-out 1.3s both}

/* Entrada al hacer scroll.
   ← ARREGLO GRANDE: el prototipo usaba `animation-timeline: view()`, que hoy
   solo corre en Chromium. En Safari —el navegador de las clientas— esas
   secciones se quedaban en opacity:0, o sea INVISIBLES. Acá lo mueve un
   IntersectionObserver (landing.js), que corre en todos lados.
   Y si el JS no carga, `html:not(.js)` deja todo visible: nunca una página
   en blanco por culpa de una animación.                                    */
.js .revela{opacity:0;transform:translateY(46px)}
.js .revela.visible{transition:opacity .9s ease-out,transform .9s cubic-bezier(.16,1,.3,1);
  opacity:1;transform:none}
.js .revela.visible.tarda-1{transition-delay:.08s}
.js .revela.visible.tarda-2{transition-delay:.16s}

.js .aparece-foto img{transform:scale(1.14)}
.js .aparece-foto.visible img{transition:transform 1.6s ease-out;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .revela{opacity:1;transform:none}
  .js .aparece-foto img{transform:none}
}

/* --- Responsive ----------------------------------------------------------
   ← ARREGLO: el prototipo no tenía UNA sola media query. Todos los grids
   eran 1fr/1fr fijos con padding 48px constante. En un teléfono se rompía
   entero — y las clientas miran esto paradas frente al clóset.           */
@media (max-width:900px){
  :root{--borde:24px}
  .duo,.duo--nombre,.duo--app,.duo--vuelta,.duo--circula{grid-template-columns:1fr;gap:40px}
  .duo--app .telefono{order:2}
  .tres{grid-template-columns:1fr;gap:36px}
  .marca-lateral{left:0;top:-18px;width:100px;height:6px}
  .cifras{gap:28px}
}
@media (max-width:520px){
  :root{--borde:20px}
  .hero__titulo{font-size:clamp(34px,9.6vw,52px)}
  .btn{width:100%;text-align:center;padding:18px 24px}
  .botones{gap:10px}
  .marquesina__cinta{font-size:11px;letter-spacing:.2em}
  /* ← ARREGLO: el kicker del hero, a 12px con .26em de tracking, se salía de
     390px y el overflow-x:hidden lo cortaba en silencio. */
  .kicker{font-size:11px;letter-spacing:.16em}
  .hero__marca{font-size:11px;letter-spacing:.2em}
  .cifra__n{font-size:44px}
  .firma{letter-spacing:.16em;font-size:11px}
}

/* Pantallas anchas: las fotos a la par no se estiran de más. */
@media (min-width:1400px){
  :root{--borde:0px}
  .wrap,.cierre__dentro{padding-inline:24px}
}