/* ══ alcántaro.visuals · sistema ══
   Escala de cortes, una sola para todo el sitio:
     hasta 767   teléfono
     768 a 1023  tablet
     desde 1024  escritorio
   Antes había siete cortes sueltos (560, 640, 700, 860, 880, 899, 900) que se
   activaban por separado, así que a 890 px convivían grillas de escritorio con
   catálogo de teléfono y nav de escritorio. Un componente nuevo se engancha a
   esta escala; no se inventa un corte propio.
   Deriva de docs/SISTEMA_VISUAL_v1-0.html con las dos correcciones del CLAUDE.md:
   el tag de sistema es «creatividad estratégica», y un solo acento por bloque. */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --negro:#0A0A0A; --verde:#132219; --verde-2:#1A2E20; --blanco:#FFFFFF;
  --lime:#DCFF3D; --ink:#FAFAF6; --on-light:#0E0E0C;
  /* Los grises se habían calibrado contra el negro, donde pasaban, pero sobre
     los verdes y sobre el blanco quedaban por debajo del mínimo legible. No hay
     un gris que sirva para los dos lados: sobre verde-2 hace falta #929186 o más
     claro, sobre blanco #78776E o más oscuro. Por eso el fondo claro tiene el
     suyo. */
  --mut:#929186; --mut-2:#87867C; --mut-claro:#78776E;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.17); --line-d:rgba(10,10,10,.12);
  --r:16px; --r-pill:999px;
  --disp:'Supreme','Poppins',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --gut:clamp(16px,4.5vw,64px); --maxw:1440px; --gap:clamp(72px,9vw,150px);
  --nav-h:64px;
  --ease-in-out:cubic-bezier(.77,0,.175,1);
}
html{-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
html,body{overscroll-behavior:none}
body{background:var(--negro);color:var(--ink);font-family:var(--disp);line-height:1.5;overflow-x:hidden}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
img{display:block;max-width:100%}
a{color:inherit}
a,button,[role="button"]{touch-action:manipulation}
.btn,.nav .cta,.nav .burger,.menu a{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

/* ── átomos ── */
.lbl{font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:var(--mut);font-weight:500}
.li{color:var(--lime)}
summary .li{display:inline-block}
summary{touch-action:manipulation}
.eyebrow{display:flex;align-items:baseline;gap:13px;margin-bottom:clamp(24px,3vw,40px)}
.eyebrow .n{font-family:var(--mono);font-size:11px;color:var(--mut-2);letter-spacing:.08em}
.btn{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:500;padding:19px 30px;border-radius:var(--r-pill);text-decoration:none;border:1px solid transparent;
  will-change:transform}
.btn.lime{background:var(--lime);color:#10130A}
.btn.out{border-color:var(--line-2);color:var(--ink)}
.sec{padding:var(--gap) 0;position:relative}
/* Sobre el verde más claro el gris terciario no llega al mínimo legible, así que
   ahí sube al secundario. El token se redefine en el fondo y no en cada elemento:
   lo que se agregue después adentro de esta sección ya nace bien. */
.sec-verde-2{background:var(--verde-2);--mut-2:var(--mut)}
.mono-xl{font-weight:400;font-size:clamp(46px,9.4vw,140px);line-height:.93;letter-spacing:-.03em}
.mono-l{font-weight:400;font-size:clamp(34px,6.2vw,92px);line-height:.98;letter-spacing:-.02em}
.mono-m{font-weight:400;font-size:clamp(25px,3.9vw,58px);line-height:1.04;letter-spacing:-.02em}
p.body{font-size:clamp(15px,1.4vw,18px);line-height:1.62;color:var(--mut);max-width:58ch}
p.body b{color:var(--ink);font-weight:500}
.ln{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.ln>span{display:block;will-change:transform}

/* ── cursor propio · «motion clues» ── */
.cur{position:fixed;top:0;left:0;width:12px;height:12px;border-radius:50%;background:var(--lime);
  pointer-events:none;z-index:9999;mix-blend-mode:difference;opacity:0;will-change:transform}
@media(hover:none){.cur{display:none}}

/* ── navegación flotante · tendencia «floating navigation» ── */
.nav{position:fixed;top:clamp(12px,2vw,22px);left:50%;transform:translateX(-50%);z-index:955;
  display:flex;align-items:center;gap:clamp(14px,2vw,30px);
  padding:11px 12px 11px 22px;border-radius:var(--r-pill);
  background:rgba(14,14,12,.62);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line-2);will-change:transform,opacity;max-width:calc(100vw - 2*var(--gut));
  width:max-content}   /* con left:50% el ancho automático no pasaba de media ventana: debajo de ~1330px la nav se apretaba y el nombre pisaba «Inicio» */
.nav .marca{font-weight:700;font-size:15px;letter-spacing:-.025em;text-decoration:none;white-space:nowrap}
.nav .marca .dot{color:var(--lime)}
.nav .enlaces{display:flex;gap:clamp(12px,1.6vw,24px)}
.nav .enlaces a{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);text-decoration:none;transition:color .25s;white-space:nowrap;position:relative}
.nav .enlaces a[aria-current]{color:var(--ink)}
@media(hover:hover) and (pointer:fine){.nav .enlaces a:hover{color:var(--ink)}}
.nav .enlaces a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:var(--lime)}
.nav .cta{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--lime);color:#10130A;padding:10px 17px;border-radius:var(--r-pill);text-decoration:none;white-space:nowrap}
.nav .burger{display:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);
  background:none;cursor:pointer;color:var(--ink);align-items:center;justify-content:center;flex-direction:column;gap:4px}
.nav .burger i{display:block;width:15px;height:1.5px;background:currentColor;
  transition:transform .25s var(--ease-in-out)}
.nav .burger.abierto i:first-child{transform:translateY(2.75px) rotate(45deg)}
.nav .burger.abierto i:last-child{transform:translateY(-2.75px) rotate(-45deg)}
@media(max-width:1023px){
  .nav{left:var(--gut);right:var(--gut);width:auto;transform:none;justify-content:space-between;padding:10px 10px 10px 18px}
  .nav .enlaces{display:none}
  .nav .burger{display:flex}
}
/* En un teléfono el nombre y el burger ya llenan la barra. Desde tablet entra
   también la acción principal, que antes se escondía detrás del burger en todo
   el rango por debajo de 860. */
@media(max-width:767px){.nav .cta{display:none}}

/* ── el área que se toca llega a 44 px, el dibujo no cambia ──
   El burger mide 38 y es el único acceso a la navegación en un teléfono; los
   enlaces del pie, 11 px de alto de texto. Agrandar el círculo o el tipo movería
   la composición, así que lo que crece es el blanco de golpe: un pseudo-elemento
   centrado de 44 px que no se ve y sí se toca. */
.nav .burger{position:relative}
.nav .marca{position:relative}
.pie a{position:relative;display:inline-block}
.dato-link{position:relative;display:inline-block}
.nav .burger::after,.nav .marca::after,.pie a::after,.dato-link::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  min-width:44px;min-height:44px;width:100%;height:100%}

/* ── menú a pantalla completa ── */
.menu{position:fixed;inset:0;z-index:950;background:var(--verde);display:flex;flex-direction:column;
  justify-content:center;padding:var(--gut);clip-path:inset(0 0 100% 0);visibility:hidden}
.menu.abierto{visibility:visible}
.menu a{display:block;font-weight:400;font-size:clamp(34px,10vw,72px);letter-spacing:-.02em;line-height:1.08;
  text-decoration:none;padding:6px 0 calc(6px + .16em);margin-bottom:-.16em;overflow:hidden}   /* el aire de abajo deja entera la jota de «Trabajo»; mismo arreglo que .ln */
.menu a span{display:block;will-change:transform}
.menu .pie-m{margin-top:clamp(26px,5vw,50px);font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#8f9a91}

/* ── cortina de transición entre páginas ── */
.cortina{position:fixed;inset:0;z-index:980;background:var(--lime);transform:scaleY(0);transform-origin:bottom;
  pointer-events:none;display:flex;align-items:center;justify-content:center}
.cortina .mk{font-weight:700;font-size:clamp(60px,14vw,180px);line-height:1;letter-spacing:-.05em;color:#10130A;opacity:0}

/* ── cinta infinita ── */
.cinta{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(16px,2vw,26px) 0}
.cinta .rail{display:flex;gap:clamp(24px,3vw,48px);width:max-content;will-change:transform}
.cinta span{font-family:var(--mono);font-size:clamp(11px,1.2vw,14px);letter-spacing:.18em;text-transform:uppercase;color:var(--mut-2);white-space:nowrap}
.cinta span em{font-style:normal;color:var(--lime)}

/* ── lista de clientes con imagen que sigue al cursor ── */
.lista{border-top:1px solid var(--line)}
.lista a{display:grid;grid-template-columns:44px 1fr auto;gap:clamp(14px,2.4vw,34px);align-items:baseline;
  padding:clamp(22px,2.8vw,36px) 0;border-bottom:1px solid var(--line);text-decoration:none;
  transition:padding-left .4s cubic-bezier(.2,.7,.2,1)}
.lista .n{font-family:var(--mono);font-size:11px;color:var(--mut-2);letter-spacing:.08em}
.lista h3{font-weight:400;font-size:clamp(24px,4vw,54px);letter-spacing:-.02em;line-height:1;transition:color .3s}
@media(hover:hover) and (pointer:fine){
  .lista a:hover{padding-left:clamp(10px,1.6vw,26px)}
  .lista a:hover h3{color:var(--lime)}
}
.lista .rubro{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.sigue{position:fixed;top:0;left:0;width:clamp(200px,20vw,300px);aspect-ratio:3/4;border-radius:var(--r);
  overflow:hidden;pointer-events:none;z-index:800;opacity:0;will-change:transform;transform-origin:center}
.sigue img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.sigue img.vis{opacity:1}
@media(hover:none){.sigue{display:none}}

/* ── galería editorial ── */
.dgal{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.3vw,18px);margin-top:clamp(40px,6vw,88px)}
.dfig{position:relative;overflow:hidden;border-radius:var(--r);background:#14140f;clip-path:inset(100% 0% 0% 0%)}
.dfig img{position:absolute;left:0;top:-9%;width:100%;height:118%;object-fit:cover;will-change:transform}
.dfig::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(10,10,10,.62),rgba(10,10,10,0) 42%)}
.dfig figcaption{position:absolute;left:14px;bottom:11px;z-index:2;font-family:var(--mono);
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(250,250,246,.7)}
.g1{grid-column:1/8;aspect-ratio:1/1}
.g2{grid-column:8/13;aspect-ratio:4/5;margin-top:13%}
.g3{grid-column:1/5;aspect-ratio:3/4;margin-top:9%}
.g4{grid-column:5/11;aspect-ratio:3/2}
.g5{grid-column:11/13;aspect-ratio:2/3;margin-top:24%}
.g6{grid-column:3/10;aspect-ratio:16/9;margin-top:7%}
/* composición vertical · seis retratos en tres columnas, la del medio más baja */
.v1,.v2,.v3,.v4,.v5,.v6{grid-column:span 4;aspect-ratio:2/3}
.v2,.v5{margin-top:22%}
.v3,.v6{margin-top:8%}
/* composición horizontal · una a sangre de la grilla, dos a la par, y otra vez */
.h1,.h4{grid-column:1/-1;aspect-ratio:16/9}
.h4{grid-column:2/12;margin-top:6%}
.h2,.h5{grid-column:1/7;aspect-ratio:3/2}
.h3,.h6{grid-column:7/13;aspect-ratio:3/2;margin-top:12%}
@media(max-width:1023px){
  .dgal{grid-template-columns:1fr;gap:12px}
  .g1,.g2,.g3,.g4,.g5,.g6,.v1,.v2,.v3,.v4,.v5,.v6,.h1,.h2,.h3,.h4,.h5,.h6{grid-column:1/-1;margin-top:0}
  .g1{aspect-ratio:1/1}.g2,.g3,.g5{aspect-ratio:4/5}.g4,.g6{aspect-ratio:3/2}
  .v1,.v2,.v3,.v4,.v5,.v6{aspect-ratio:4/5}.h1,.h2,.h3,.h4,.h5,.h6{aspect-ratio:3/2}
}

/* ── el resaltador · un solo momento por página ── */
.hl{position:relative;display:inline-block}
.hl .bar{position:absolute;left:-.06em;right:-.06em;top:.08em;bottom:.04em;background:var(--lime);
  transform:scaleX(0);transform-origin:left center;border-radius:4px;z-index:0}
.hl .tx{position:relative;z-index:1;color:var(--lime)}

/* ── el número que cuenta ── */
.cifra{font-weight:700;font-size:clamp(66px,13vw,190px);line-height:.86;letter-spacing:-.05em;color:var(--lime)}
.cifra small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mut);font-weight:500;margin-top:16px}

/* ── línea que se dibuja ── */
.linea{width:100%;height:1px;background:var(--line-2);transform:scaleX(0);transform-origin:left center}

/* ── el hero en un teléfono ──
   En desktop el texto ocupa la mitad izquierda y la foto la derecha. En 375 px
   esa misma regla daba una columna de texto de 203 px contra una foto que
   empezaba en 202: el párrafo quedaba escrito encima de la imagen. Acá la foto
   pasa a sangre y el texto se apoya arriba, que es lo que el hero ya hacía al
   clavarse; el velo sube desde abajo, donde va el texto, y deja la cara limpia
   arriba. No toca la foto: es una capa de composición, no un grade. */
.hero .velo{display:none}
@media(max-width:1023px){
  .hero .hero-media{inset:0!important;border-radius:0!important}
  .hero .velo{display:block;position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to top,
      rgba(10,10,10,.93) 0%, rgba(10,10,10,.86) 30%,
      rgba(10,10,10,.52) 58%, rgba(10,10,10,.12) 82%, rgba(10,10,10,0) 100%)}
  .hero .hero-txt{max-width:100%!important}
}

/* ── isla de cierre ── */
.banda-w{padding:clamp(56px,8vw,120px) clamp(14px,1.8vw,26px) clamp(14px,1.8vw,26px)}
/* aire generoso arriba para que la isla flote, marco ajustado en los otros tres lados */
.banda{margin:0 auto;background:var(--lime);color:#10130A;
  min-height:clamp(300px,42vw,560px);display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;padding:clamp(30px,4vw,64px) clamp(28px,3.6vw,64px);border-radius:0;
  will-change:transform;overflow:hidden;text-decoration:none;max-width:none}
.banda .mk{font-weight:700;font-size:clamp(80px,16vw,240px);line-height:.8;letter-spacing:-.05em}
.banda .sig{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-align:right;line-height:1.8;opacity:.72}
/* En un teléfono la isla mantenía el alto mínimo de 300 px con todo el contenido
   apoyado arriba, así que quedaban unos 200 px de lime vacío abajo. Sigue siendo
   una caja grande —es el cierre de la página—, pero el contenido la ocupa: el
   ícono arriba, la firma abajo. */
@media(max-width:767px){
  .banda{flex-direction:column;align-items:flex-start;justify-content:space-between;
    min-height:clamp(260px,64vw,560px)}
  .banda .sig{text-align:left}
}
.pie{background:var(--negro);padding:clamp(20px,2.4vw,30px) 0 clamp(26px,3vw,40px)}
.pie .row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.pie .l{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--mut-2);text-transform:uppercase}
.pie a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--mut);text-decoration:none;text-transform:uppercase;margin-left:20px}
@media(hover:hover) and (pointer:fine){.pie a:hover{color:var(--ink)}}

/* ── formulario ── */
.form{display:flex;flex-direction:column;gap:13px}
.f{display:flex;flex-direction:column;gap:7px}
.f label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8f9a91}
.f input,.f select,.f textarea{background:rgba(0,0,0,.28);border:1px solid var(--line-2);border-radius:11px;
  padding:13px 15px;color:var(--ink);font-family:var(--disp);font-size:15px;width:100%;
  transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease}
.f textarea{min-height:88px;resize:vertical}
@media(pointer:coarse){.f input,.f select,.f textarea{font-size:16px}}   /* <16px hace zoom automático en iOS al enfocar */
.f select{appearance:none}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--lime);background:rgba(220,255,61,.05)}
.f input:focus-visible,.f select:focus-visible,.f textarea:focus-visible{box-shadow:0 0 0 3px rgba(220,255,61,.22)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
@media(max-width:767px){.f2{grid-template-columns:1fr}}
.form .btn{margin-top:7px;border:0;cursor:pointer;align-self:flex-start;font-family:var(--mono)}
.form .btn[disabled]{opacity:.55;cursor:default}
.aviso{min-height:1.2em;margin-top:4px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;line-height:1.7;color:#8f9a91}
.aviso.mal{color:#ff9d8a}
.gracias{border:1px solid var(--line-2);border-radius:var(--r);padding:30px 28px}
.gracias h3{font-size:22px;font-weight:400;letter-spacing:-.02em;margin-bottom:10px}
.gracias p{font-size:15px;line-height:1.62;color:#8f9a91}

@media(prefers-reduced-motion:reduce){
  .ln>span,[data-an],.dfig{opacity:1!important;transform:none!important;clip-path:none!important}
  .hl .bar{transform:scaleX(1)!important}.hl .tx{color:#10130A!important}
  .cur,.sigue{display:none}
  .cinta .rail{animation:none}
  .nav .burger i{transition:none}
  .menu.abierto{clip-path:inset(0 0 0% 0)!important}
  .menu a span{transform:none!important}
}

/* ══════════ COMPONENTES NUEVOS ══════════ */

/* ── cursor con texto · «ver», «arrastrar», «abrir» ── */
.cur{display:flex;align-items:center;justify-content:center;width:12px;height:12px;transition:background .25s}
.cur b{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#10130A;
  opacity:0;white-space:nowrap;font-weight:500;transform:scale(.4)}
.cur.texto{width:78px;height:78px;mix-blend-mode:normal}
.cur.texto b{opacity:1;transform:scale(1)}

/* ── catálogo horizontal con arrastre ── */
.cat{overflow:hidden;position:relative}
.cat-view{margin-top:clamp(30px,4vw,56px);cursor:grab}
.cat-view.arrastrando{cursor:grabbing}
.cat-track{display:flex;gap:14px;padding:0 var(--gut) 0;width:max-content;will-change:transform}
.cat-card{flex:0 0 clamp(250px,30vw,380px);border:1px solid var(--line);border-radius:var(--r);
  background:#0E0E0C;padding:26px 26px 30px;display:flex;flex-direction:column;gap:14px;
  min-height:clamp(280px,32vw,400px);justify-content:space-between;user-select:none}
.cat-card .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--mut-2)}
.cat-card h3{font-weight:400;font-size:clamp(21px,2.3vw,30px);letter-spacing:-.02em;line-height:1.06}
.cat-card p{font-size:14px;line-height:1.58;color:var(--mut)}
.cat-card .ent{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--lime)}
.cat-barra{height:2px;background:var(--line);margin:clamp(24px,3vw,40px) var(--gut) 0;position:relative}
.cat-barra i{position:absolute;left:0;top:0;bottom:0;background:var(--lime);width:0;display:block}
/* En escritorio el catálogo avanza clavado con el scroll de la página. En un
   teléfono ese mecanismo le saca al dedo el scroll que espera, así que acá el
   eje horizontal es scroll nativo con encastre: se arrastra, frena en cada
   tarjeta y no pelea con el scroll vertical. La barra de progreso sigue viva,
   atada al desplazamiento real. La tarjeta no llega a ocupar el ancho entero a
   propósito: el borde de la siguiente es lo que avisa que hay más. */
@media(max-width:1023px){
  .cat-view{cursor:auto;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
  .cat-view::-webkit-scrollbar{display:none}
  .cat-track{width:max-content;padding:4px var(--gut)}
  .cat-card{flex:0 0 min(78vw,340px);scroll-snap-align:center;min-height:clamp(250px,58vw,320px)}
}

/* ── pila pegajosa del método ── */
.stack{margin-top:clamp(30px,4vw,54px)}
.card-s{position:sticky;background:var(--blanco);border-top:1px solid var(--line-d);
  padding:clamp(26px,3.4vw,44px) 0;display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start;will-change:transform}
.card-s p{grid-column:2;font-size:clamp(15px,1.5vw,18px);line-height:1.6;color:#5d5c54;max-width:56ch;margin-top:9px}
@media(min-width:1024px){.card-s{grid-template-columns:44px 300px 1fr;gap:32px;align-items:baseline}
  .card-s p{grid-column:auto;margin-top:0}}
.card-s .num{width:30px;height:30px;border-radius:9px;background:var(--lime);color:#10130A;
  font-family:var(--mono);font-size:12px;display:flex;align-items:center;justify-content:center}
.card-s h3{font-size:clamp(20px,2.2vw,28px);font-weight:400;letter-spacing:-.02em}
.claro{background:var(--blanco);color:var(--on-light)}
/* En fondo claro no hay margen para dos niveles de gris que cumplan, así que la
   jerarquía la hacen el tamaño y el peso, no el color. */
.claro .eyebrow .n{color:var(--mut-claro)} .claro .lbl{color:var(--mut-claro)}
.cond{margin-top:clamp(30px,4vw,48px);font-family:var(--mono);font-size:11px;letter-spacing:.07em;color:var(--mut-claro);
  display:flex;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line-d);padding-top:24px}

/* ── los cuatro pasos del método, con la flecha que se dibuja y una imagen ── */
.paso{position:relative;display:grid;grid-template-columns:44px 1fr auto;gap:18px;align-items:center;
  padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--line)}
.paso-num{width:30px;height:30px;border-radius:9px;background:var(--lime);color:#10130A;font-family:var(--mono);
  font-size:12px;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.paso-txt h3{font-size:clamp(20px,2.2vw,28px);font-weight:400;letter-spacing:-.02em;margin-bottom:10px}
.paso-img{width:clamp(64px,7vw,92px);aspect-ratio:4/5;border-radius:10px;overflow:hidden;flex:0 0 auto;background:#14140f}
.paso-img img{width:100%;height:100%;object-fit:cover}
@media(max-width:767px){
  .paso{grid-template-columns:44px 1fr;grid-template-areas:"num txt" "img img"}
  .paso-num{grid-area:num}
  .paso-txt{grid-area:txt}
  .paso-img{grid-area:img;width:100%;aspect-ratio:21/9;margin-top:14px}
}

/* ── número de sección pegajoso ── */
.sec-n{position:sticky;top:calc(var(--nav-h) + 40px);float:left;width:clamp(48px,5vw,80px);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--mut-2);z-index:2}
@media(max-width:1023px){.sec-n{display:none}}

/* ── texto atado al scroll: se ilumina palabra por palabra ── */
.scrub{font-weight:400;font-size:clamp(23px,3.4vw,50px);line-height:1.22;letter-spacing:-.02em;max-width:22ch}
.scrub w{display:inline-block;color:var(--mut-2);transition:color .18s linear}
.scrub w.on{color:var(--ink)}
.scrub .li w.on{color:var(--lime)}   /* el acento va en el contenedor, no en cada palabra */

/* ── bandas de foto entre líneas del titular · de New Form ── */
.bandas{display:flex;flex-direction:column;gap:clamp(6px,.9vw,14px)}
.bandas .fila{display:flex;align-items:center;gap:clamp(12px,1.6vw,26px)}
.bandas .txt{font-weight:400;font-size:clamp(30px,7vw,104px);line-height:.98;letter-spacing:-.03em;white-space:nowrap}
.bandas .tira{flex:1;height:clamp(40px,6.2vw,92px);border-radius:8px;overflow:hidden;background:#14140f;
  min-width:60px;clip-path:inset(0 100% 0 0)}
.bandas .tira img{width:100%;height:100%;object-fit:cover}
/* En un teléfono las tiras estaban apagadas y el titular quedaba en cuatro
   palabras sueltas: se perdía justo el efecto que hace la sección. Vuelven, más
   bajas y más angostas, con el texto ajustado para que la línea entre entera.
   La animación de apertura ya servía en cualquier ancho; lo único que sobraba
   era el display:none. */
@media(max-width:767px){
  .bandas{gap:10px}
  .bandas .fila{gap:11px}
  .bandas .txt{white-space:nowrap;font-size:clamp(25px,7.4vw,44px)}
  .bandas .tira{height:clamp(30px,8vw,46px);min-width:38px;border-radius:6px}
}

/* ── visor a pantalla completa ── */
.visor{position:fixed;inset:0;z-index:960;background:rgba(10,10,10,.96);display:none;
  align-items:center;justify-content:center;padding:clamp(16px,4vw,54px)}
.visor.abierto{display:flex}
.visor img,.visor video{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r)}
.visor [hidden]{display:none}
.visor .cerrar{position:absolute;top:clamp(16px,3vw,32px);right:clamp(16px,3vw,32px);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);
  background:none;border:1px solid var(--line-2);border-radius:var(--r-pill);padding:12px 20px;cursor:pointer}
.visor .seguir{position:absolute;left:50%;bottom:clamp(20px,4vw,40px);transform:translateX(-50%);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  background:var(--lime);color:#10130A;border-radius:var(--r-pill);padding:13px 24px}
.visor .seguir[hidden]{display:none}
.dfig{cursor:zoom-in;touch-action:manipulation;-webkit-touch-callout:none}

@media(prefers-reduced-motion:reduce){
  .scrub w{color:var(--ink)!important}
  .bandas .tira{clip-path:none!important}
}

/* ══════════ VENN · EL SISTEMA INTEGRADO ══════════
   Tres círculos que convergen con el scroll. De newformcap.com, pero diciendo
   lo que el Master File dice en texto: estrategia, dirección creativa y pauta
   funcionando como un solo organismo. */
.venn{height:100svh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.venn-lienzo{position:relative;width:min(84vw,680px);aspect-ratio:1/1}
.venn-c{position:absolute;top:50%;left:50%;width:58%;aspect-ratio:1/1;border-radius:50%;
  display:flex;align-items:center;justify-content:center;text-align:center;
  will-change:transform;mix-blend-mode:screen;
  /* contorno lime tenue y relleno translúcido: donde se cruzan, se ilumina */
  background:rgba(220,255,61,.085);border:1px solid rgba(220,255,61,.42);
  box-shadow:inset 0 0 60px rgba(220,255,61,.06)}
.venn-c span{font-weight:500;font-family:var(--mono);font-size:clamp(10px,1.1vw,13px);
  letter-spacing:.14em;text-transform:uppercase;line-height:1.5;max-width:9ch;
  color:var(--ink);mix-blend-mode:normal}
.venn-c.b{background:rgba(220,255,61,.075)}
.venn-c.c{background:rgba(220,255,61,.095)}
.venn-centro{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:10px;pointer-events:none;opacity:0;z-index:5}
.venn-centro b{font-weight:400;font-size:clamp(24px,3.8vw,52px);letter-spacing:-.02em;line-height:1.04;color:var(--lime);text-shadow:0 0 40px rgba(10,10,10,.8)}
.venn-centro small{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.venn-tit{position:absolute;top:clamp(80px,12vh,140px);left:0;right:0;text-align:center;padding:0 var(--gut);z-index:6}
.venn-pie{position:absolute;bottom:clamp(30px,6vh,70px);left:0;right:0;text-align:center;padding:0 var(--gut);z-index:6;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut-2)}

/* ══ garabatos que se dibujan · motion cues ══ */
.trazo{position:absolute;pointer-events:none;overflow:visible}
.trazo path,.trazo line,.trazo circle{fill:none;stroke:var(--lime);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.trazo.fino path{stroke-width:1.2;stroke:var(--line-2)}

/* ══ barrido de forma entre secciones · de newformcap ══ */
.barrido{position:relative;height:clamp(90px,14vw,190px);overflow:hidden}
.barrido i{position:absolute;inset:-2px;display:block;
  clip-path:polygon(0 0, 100% 0, 100% 0, 0 0)}

/* ══ chevrones que flanquean un titular ══ */
.chev{display:inline-block;color:var(--lime);font-weight:700;opacity:0;transform:translateX(-14px)}
.chev.der{transform:translateX(14px)}

/* ══ el ícono de marca, en sus cuatro lugares ══ */
.nav .marca{display:flex;align-items:center;gap:9px;flex-shrink:0}
.nav .marca img{width:clamp(18px,1.8vw,22px);height:auto}
.cortina .mk{width:clamp(90px,14vw,190px);height:auto;opacity:0}
.banda .mk{width:clamp(110px,18vw,270px);height:auto}


/* ══ statement con diagonal barriendo · de telescope.fyi ══ */
.diag{position:relative;overflow:hidden;padding:clamp(90px,14vw,190px) 0;isolation:isolate}
.diag .forma{position:absolute;inset:0;background:var(--lime);z-index:-1;
  clip-path:polygon(0 100%, 100% 100%, 100% 100%, 0 100%)}
.diag .linea1,.diag .linea2{font-weight:400;font-size:clamp(46px,13vw,180px);line-height:.9;
  letter-spacing:-.03em;position:relative;transition:color .3s}
.diag .linea2{text-align:right}
.diag .pie-d{margin-top:clamp(26px,3.4vw,44px);font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mut);position:relative}
.diag.sobre .linea1,.diag.sobre .linea2,.diag.sobre .pie-d{color:#10130A}

/* ── ficha de una marca · qué se hizo, rubro, cuándo ── */
.ficha{display:grid;grid-template-columns:1fr;gap:18px;margin-top:clamp(30px,4vw,54px);
  padding-top:clamp(20px,2.4vw,30px);border-top:1px solid var(--line)}
.ficha .lbl{margin-bottom:8px}
.ficha p{font-size:clamp(15px,1.3vw,18px);line-height:1.4}
@media(min-width:768px){.ficha{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px)}}

/* ── piezas de pauta · grilla de 3 que no recorta el texto de la pieza ── */
.piezas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.3vw,18px);margin-top:clamp(36px,5vw,70px)}
.pieza{margin:0;cursor:zoom-in}
.pieza img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:var(--r);background:#14140f}
.pieza figcaption,.vid figcaption{margin-top:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
@media(max-width:767px){.piezas{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── videos verticales · se cargan recién al darles play ── */
.videos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.3vw,18px);margin-top:clamp(36px,5vw,70px)}
.vid{margin:0}
.vid video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:var(--r);background:#14140f;display:block}
@media(max-width:1023px){.videos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:767px){.videos{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── campañas · cada una con su idea y sus piezas, en el orden en que salieron ── */
.camps{display:flex;flex-direction:column;gap:clamp(64px,8vw,120px);margin-top:clamp(44px,6vw,90px)}
.camp-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;padding-bottom:clamp(16px,2vw,24px);border-bottom:1px solid var(--line)}
.camp-cab .n{font-family:var(--mono);font-size:11px;color:var(--mut-2);letter-spacing:.08em}
.camp-cab h3{font-weight:400;font-size:clamp(26px,3.4vw,46px);letter-spacing:-.02em;line-height:1}
.camp-cab .conc{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.camp-piezas{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(8px,1vw,14px);margin-top:clamp(22px,2.6vw,34px)}
.cp{position:relative;margin:0;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:#14140f;cursor:zoom-in}
.cp img{width:100%;height:100%;object-fit:cover;display:block}
.cp.estatica img{object-fit:contain}
.cp .play{position:absolute;left:10px;bottom:10px;width:30px;height:30px;border-radius:50%;background:rgba(10,10,10,.6);
  display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:10px;padding-left:2px;pointer-events:none}
/* en tablet y teléfono las piezas de una campaña son una tira que se desliza, a sangre del gutter */
@media(max-width:1023px){
  .camp-piezas{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:28%;overflow-x:auto;
    scroll-snap-type:x mandatory;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scroll-padding-inline:var(--gut);scrollbar-width:none}
  .camp-piezas::-webkit-scrollbar{display:none}
  .cp{scroll-snap-align:start}
}
@media(max-width:767px){.camp-piezas{grid-auto-columns:42%}}

/* ── muro de piezas · formatos mezclados, cada una en su proporción ── */
.muro{columns:4;column-gap:clamp(10px,1.3vw,18px);margin-top:clamp(36px,5vw,70px)}
.mu{break-inside:avoid;margin:0 0 clamp(14px,1.6vw,22px);cursor:zoom-in}
.mu img{width:100%;height:auto;display:block;border-radius:12px;background:#14140f}
.mu-v{position:relative;aspect-ratio:9/16;border-radius:12px;overflow:hidden}
.mu-v img{height:100%;object-fit:cover;border-radius:0}
.mu-v .play{position:absolute;left:10px;bottom:10px;width:30px;height:30px;border-radius:50%;background:rgba(10,10,10,.6);
  display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:10px;padding-left:2px;pointer-events:none}
.mu figcaption{margin-top:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
@media(max-width:1023px){.muro{columns:3}}
@media(max-width:767px){.muro{columns:2}}