/* ══ Supreme, servida por la web ══
   Hasta el 9/11/2026 la web pedía 'Supreme' sin cargarla: se veía en Supreme solo en la Mac de Mateo, que la
   tiene instalada, y en cualquier otro aparato, el iPhone incluido, salía en Poppins. Va el OTF tal cual (33 KB
   por peso), que todos los navegadores leen. Supreme es de Indian Type Foundry, licencia libre de Fontshare. */
@font-face{font-family:'Supreme';src:url('/assets/fuentes/Supreme-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Supreme';src:url('/assets/fuentes/Supreme-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Supreme';src:url('/assets/fuentes/Supreme-Bold.otf') format('opentype');font-weight:600 800;font-style:normal;font-display:swap}

/* ══ 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.
   La paleta, la tipografía y los bordes salen de docs/SISTEMA_VISUAL_v1-6.html.
   Desde el 7/11/2026 la web está en la paleta del v1.2 que el 19/10 quedó
   pendiente: negro cálido en lugar del #0A0A0A, crema como único fondo claro,
   blanco como única tinta clara y las fotos en esquina recta. */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --negro:#131009; --verde:#132219; --verde-2:#1A2E20; --blanco:#FFFFFF; --crema:#F3EFE6;
  --lime:#DCFF3D; --ink:#FFFFFF; --on-light:#131009;
  --vacio:#1C1911;   /* el fondo de una foto que todavía no cargó */
  /* 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:#77736A;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.17); --line-d:rgba(19,16,9,.16);
  --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}
/* El titular del hero se mide también por el alto: a 1280 × 800 iba a 120 px y
   los dos botones quedaban debajo del borde, así que se veían recién al bajar.
   Ahora el titular, la bajada y los botones entran en la primera pantalla.
   El 8/11/2026 el titular pasó a decir también «De eso me hago cargo» y el alto
   bajó de 9.6svh a 8svh: con 9.6 los botones caían 69 px debajo del borde a
   1280 × 800 y 30 px a 1024 × 768. Medido a 1280 × 800, 1440 × 900, 1024 × 768
   y 1536 × 864. */
.hero h1.mono-xl{font-size:clamp(46px,min(9.4vw,8svh),140px)}
.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(19,16,9,.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}
.dato-link{position:relative;display:inline-block}
.nav .burger::after,.nav .marca::after,.banda-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 ── */
/* La cortina es lima: dura menos de un segundo y es interfaz, no fondo de una sección, así que entra en la
   regla de un solo acento (decisión de Mateo, 9/11: la habían pasado a verde el 8/11 y le gustaba más en lima). */
/* Lo que base.js hace entrar arranca escondido desde el primer cuadro. Antes lo escondía el JS, que
   corre después de que la página ya se pintó: el titular aparecía, desaparecía y volvía a entrar. La
   clase «js» la pone la cabecera, y se saca sola si GSAP no carga, así nada queda escondido. */
@media (prefers-reduced-motion:no-preference){
  .js [data-an],.js [data-hero],.js .hero p,.js .hero .btn{opacity:0}
  .js [data-split]{visibility:hidden}
  .js .razones>*{opacity:0}
  .js .pasos .paso-txt{opacity:.28}
  .js .hero-media{clip-path:inset(100% 0% 0% 0%)}
  /* la página que llega desde otra del sitio encuentra la cortina cerrada */
  .llega .cortina{transform:scaleY(1);transform-origin:top}
  .llega .cortina .mk{opacity:1!important}
}
.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)}
/* En el teléfono el rubro va abajo del nombre: al lado, un rubro largo le comía el ancho y «La Costa Extrema»
   se partía en tres renglones (elegido por Mateo, 9/11). */
@media(max-width:767px){
  .lista a{grid-template-columns:30px 1fr;row-gap:10px}
  .lista .rubro{grid-column:2}
}
.sigue{position:fixed;top:0;left:0;width:clamp(200px,20vw,300px);aspect-ratio:3/4;border-radius:0;
  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)}
/* Lo que es imagen va recto (Sistema Visual, 04): las fotos no llevan radio. */
/* La foto entra entera, desde afuera, y se asienta en su lugar (base.js). Adentro
   de su marco queda quieta: el vaivén de la foto dentro del recuadro salió el
   8/11/2026, por pedido de Mateo. */
.dfig{position:relative;overflow:hidden;border-radius:0;background:var(--vacio)}
.dfig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dfig::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(19,16,9,.62),rgba(19,16,9,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%}
/* En las páginas de cada marca la foto que lleva su proporción propia (construir.py) no se estira al alto de
   la fila: sin esto la grilla la volvía a recortar. Las demás van en la medida de su lugar. */
.dgal.suelta{align-items:start}
/* 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%}
/* En la tablet vale la composición de la compu: hasta el 9/11 iba a una columna desde los 1023 px, con una
   foto por pantalla y páginas de 19.000 px. */
@media(max-width:767px){
  .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}
/* La foto del hero es imagen: va recta en todos los anchos. El radio que trae
   el markup se pisa acá hasta que el molde lo saque. */
.hero .hero-media{border-radius:0!important}
/* En teléfono y tablet la foto va a pantalla completa, como al principio, pero
   subida: la cabeza arranca justo debajo de la barra y la cara termina antes de
   la mitad de la pantalla. El texto va abajo, sobre la camisa y el velo, y nunca
   arranca antes de que termine la cara: si no entra, el hero crece y la foto
   queda donde está. Es la mezcla que eligió Mateo el 9/11: la foto entera de
   antes, sin el titular sobre la boca. */
@media(max-width:1023px){
  .hero{padding-top:49svh!important}
  .hero .hero-media{inset:0!important}
  /* La foto cubre siempre el hero entero: si el texto no entra y el hero crece (en el iPhone la
     pantalla útil es más baja con la barra del navegador abierta), la foto crece con él y no queda
     una franja verde entre la foto y la cinta (lo marcó Mateo el 9/11). */
  .hero .hero-media img{position:absolute;left:0;top:-9svh;height:calc(100% + 9svh)!important;object-position:50% 0}
  .hero h1.mono-xl{font-size:clamp(34px,9.6vw,64px)}
  .hero p{font-size:15px!important;line-height:1.55!important}
  .hero .velo{display:block;position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to top,
      rgba(19,16,9,1) 0%, rgba(19,16,9,.86) 22%,
      rgba(19,16,9,.4) 46%, rgba(19,16,9,0) 64%)}
  .hero .hero-txt{max-width:100%!important}
}
/* En el teléfono los dos botones van en un renglón: apilados empujaban el texto
   hacia arriba, sobre la cara. */
@media(max-width:767px){
  .hero .btn{padding:16px 15px}
}

/* ── el cierre: la isla y el pie en un solo bloque ──
   La isla es lima, con el ícono y la frase en el verde de la marca: lima con verde es la combinación
   principal del Sistema Visual, y el negro plano con lima no va (Mateo lo marcó el 9/11). Se lee como
   interfaz: toda la isla lleva a Contacto y termina recta, como la quiere Mateo. Así queda sin movimiento:
   quieta, al final de la página, con el pie debajo. */
.cierre{--cierre-arriba:clamp(12px,2vw,22px);--cierre-lado:clamp(14px,1.8vw,26px);
  padding:clamp(56px,8vw,120px) var(--cierre-lado) 0}
.banda{--tinta:#132219;background:var(--lime);color:var(--tinta);position:relative;isolation:isolate;
  min-height:clamp(300px,42vw,560px);display:flex;flex-direction:column;justify-content:flex-start;
  padding:clamp(30px,4vw,64px) clamp(28px,3.6vw,64px);border-radius:0;overflow:hidden}
/* el enlace estirado: toda la isla lleva a Contacto; lo de encima deja pasar el toque */
.banda-a{position:absolute;inset:0;z-index:0}
.banda .fila{position:relative;z-index:1;pointer-events:none;display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.banda .sig{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-align:right;line-height:1.8;opacity:.8}
.banda-pie{display:flex;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;align-items:center;
  padding:clamp(20px,2.4vw,30px) max(0px,calc(var(--gut) - var(--cierre-lado))) clamp(26px,3vw,40px)}
.banda-pie .l{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--mut-2);text-transform:uppercase}
.banda-pie a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--mut);text-decoration:none;
  text-transform:uppercase;position:relative;display:inline-block}
/* El aire va entre los enlaces y no antes del primero: cuando el pie se parte en
   dos renglones, «instagram» queda en el margen y no 20 px adentro. */
.banda-pie a+a{margin-left:20px}
@media(hover:hover) and (pointer:fine){.banda-pie a:hover{color:var(--ink)}}
@media(max-width:767px){
  .banda{min-height:clamp(260px,64vw,560px);justify-content:space-between}
  .banda .fila{flex-direction:column}
  .banda .sig{text-align:left}
}

/* Con movimiento, la isla es la barra de arriba estirada, como el pie de telescope.fyi (Mateo eligió copiar
   la mecánica el 9/11): queda fija detrás de la barra, con su mismo ancho en el teléfono, y base.js la
   recorta a la forma de la barra y la abre hacia abajo en el tramo final de la página. El bloque del cierre
   queda en la página como el aire del final, con el pie abajo, y mide una pantalla: la isla empieza a bajar
   cuando ese aire ocupa el 80 % de la pantalla (base.js), así lo último de la página se lee entero un momento
   y después pasa por debajo de la isla. Con menos aire, la isla alcanzaba la frase final del inicio antes de
   que terminara de entrar. */
.cierre-fijo .cierre{height:100svh;padding-top:0;
  display:flex;flex-direction:column;justify-content:flex-end}
.cierre-fijo .banda{position:fixed;z-index:940;top:var(--cierre-arriba);left:var(--cierre-lado);right:var(--cierre-lado);
  bottom:var(--pie-alto,96px);min-height:0;justify-content:flex-start;pointer-events:none;
  padding-top:calc(var(--nav-h) + clamp(24px,3vw,40px));will-change:clip-path}
/* La isla abierta llega hasta el pie (base.js mide su alto y lo deja en --pie-alto): hasta el 9/11 medía
   media pantalla y entre la isla y el pie quedaban unos 160 px de negro, que Mateo pidió achicar. Va atada
   abajo y no con un alto en svh, así en el iPhone sigue a la barra de Safari cuando se esconde. */
.cierre-fijo .banda.abierta{pointer-events:auto}
/* adentro, como la isla de antes: el ícono arriba, debajo de la barra, y la firma al pie o a la derecha */
@media(max-width:767px){.banda .fila{flex:1;justify-content:space-between}}
/* sin el cierre fijo (teléfono y tablet) la fila ocupa la isla, así la firma baja al pie de la isla */
.banda .fila{flex:1}
@media(min-width:768px){html:not(.cierre-fijo) .banda .sig{align-self:flex-end}}
/* El nombre grande al centro, como el de Telescope: es el nombre de la barra, que crece hasta acá (base.js).
   Solo con el cierre fijo, de la tablet para arriba; en el teléfono la isla es la de antes y no lo lleva.
   Con él en el centro, el ícono baja a la izquierda y la firma a la derecha, y los enlaces de la barra quedan
   al centro de la isla con «Hablemos» en la esquina (pedido de Mateo, 9/11). */
.banda .palabra,.banda-arriba{display:none}
/* En la compu, «Instagram» y «Contacto» suben del pie a la esquina de arriba a la izquierda de la isla, a la
   altura de la barra, donde Telescope lleva sus enlaces (elegido por Mateo, 9/11). En la tablet y el teléfono
   se quedan en el pie: ahí la barra ocupa todo el ancho y los taparía. */
@media(min-width:1024px){
  .cierre-fijo .banda-arriba{display:flex;align-items:center;gap:20px;position:absolute;z-index:2;top:-2px;
    left:clamp(28px,3.6vw,64px);height:var(--nav-h);opacity:0}
  .cierre-fijo .banda-arriba a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    text-decoration:none;color:rgba(19,34,25,.62);pointer-events:none}
  .cierre-fijo .banda.abierta .banda-arriba a{pointer-events:auto}
  .cierre-fijo .banda-pie>div:last-child{display:none}
}
@media(min-width:1024px) and (hover:hover) and (pointer:fine){.cierre-fijo .banda-arriba a:hover{color:var(--verde)}}
.cierre-fijo .banda .palabra{display:block;position:relative;z-index:1;pointer-events:none;margin:auto;
  font-weight:700;font-size:min(9.4vw,21svh);line-height:1;letter-spacing:-.025em;white-space:nowrap;will-change:transform}
.cierre-fijo .banda .fila{flex:0 0 auto;align-items:flex-end}
.cierre-fijo .banda .mk{width:clamp(64px,7vw,104px)}
.cierre-fijo .banda .sig{text-align:right}
@media(max-width:1023px){.cierre-fijo .banda{left:var(--gut);right:var(--gut)}}
/* La barra sobre el lima: el texto pasa al verde y la acción principal a verde con lima, mientras el
   menú esté cerrado (abierto, la barra va sobre el verde del menú). */
.nav .cta,.nav .burger{transition:background-color .25s,color .25s,border-color .25s}
.nav.sobre-lima:not(.con-menu){border-color:transparent}
.nav.sobre-lima:not(.con-menu) .enlaces a{color:rgba(19,34,25,.62)}
.nav.sobre-lima:not(.con-menu) .enlaces a[aria-current]{color:var(--verde)}
.nav.sobre-lima:not(.con-menu) .enlaces a[aria-current]::after{background:var(--verde)}
.nav.sobre-lima:not(.con-menu) .cta{background:var(--verde);color:var(--lime)}
.nav.sobre-lima:not(.con-menu) .burger{color:var(--verde);border-color:rgba(19,34,25,.35)}

/* ── 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:#18150E;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. */
/* Desde el 8/11/2026 el catálogo hace lo mismo en todos los anchos: la sección
   se clava y, al bajar, las tarjetas corren de costado (pedido de Mateo: el
   teléfono tiene que ser el mismo sitio que el escritorio). En una pantalla
   táctil el dedo baja la página como siempre y eso mueve el catálogo. */
@media(max-width:1023px){
  .cat-view{cursor:auto;touch-action:pan-y}
  .cat-card{flex:0 0 min(78vw,340px);min-height:clamp(250px,58vw,320px)}
}

/* ── pila pegajosa del método ── */
.stack{margin-top:clamp(30px,4vw,54px)}
/* Una tarjeta clavada no sale de la caja de su contenedor, y la última terminaba
   justo donde termina la caja: nunca llegaba a clavarse, tapaba a la anterior y
   las tres se juntaban al irse (Mateo, 9/11). Este aire, adentro de la pila, le
   da lugar para clavarse y deja las tres armadas un momento antes de irse.
   Padding no sirve: el lugar de lo clavado se mide sin él. */
@media (prefers-reduced-motion:no-preference){
  .js .stack::after{content:"";display:block;height:clamp(150px,22vh,220px)}
}
.card-s{position:sticky;background:var(--crema);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:#5C584E;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}
/* El fondo claro es el crema y su tinta, el negro cálido. El blanco no es fondo. */
.claro{background:var(--crema);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}

/* ── «Por qué creerlo» y los pasos de Método, elegidos por Mateo el 9/11 (base.js) ──
   Las razones llevan su número grande: Supreme en 700, como el número protagonista del Sistema Visual. */
.n-grande{display:block;overflow:hidden;line-height:.9;font-weight:700;letter-spacing:-.04em}
.n-grande i{display:block;font-style:normal}
.razones.con-numero .n-grande{font-size:clamp(54px,6.4vw,88px);margin-bottom:6px}
/* Los pasos son un recorrido: la línea pasa por el centro de los números, que se encienden en lima. */
.pasos.con-recorrido{position:relative}
.pasos .recorrido{position:absolute;left:14.5px;width:1px;background:var(--line-2);z-index:0;pointer-events:none}
.pasos .recorrido i{position:absolute;inset:0;background:var(--lime);transform:scaleY(0);transform-origin:top}
.pasos.con-recorrido .paso{border-bottom-color:transparent}
.pasos.con-recorrido .paso-num{transition:background-color .35s,color .35s}
.pasos.con-recorrido .paso-num.on{background:var(--lime);color:#132219}

/* ── 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:0;overflow:hidden;flex:0 0 auto;background:var(--vacio)}
.paso-img img{width:100%;height:100%;object-fit:cover}
/* La lista con nodos del kit (34): el nodo lima, el nombre y una foto chica
   recta, en todos los anchos. En el teléfono la foto se achica pero no se va
   abajo a 21:9, donde cortaba lo que mostraba. */
@media(max-width:767px){
  .paso{grid-template-columns:36px 1fr 60px;gap:14px;align-items:start}
  .paso-img{width:60px}
}

/* ── 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:0;overflow:hidden;background:var(--vacio);
  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}
}

/* ── visor a pantalla completa ── */
.visor{position:fixed;inset:0;z-index:960;background:rgba(19,16,9,.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:0}
.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}
  /* Sin movimiento el Venn queda armado: cada círculo en su lugar, cada rótulo
     en su gajo y el centro nombrado. */
  .venn-c.a{transform:translate(-75%,-64.4%)}
  .venn-c.b{transform:translate(-25%,-64.4%)}
  .venn-c.c{transform:translate(-50%,-21.1%)}
  .venn-rot,.venn-centro{opacity:1!important}
}

/* ══════════ VENN · EL SISTEMA INTEGRADO ══════════
   Como la pieza 9 del lanzamiento (plantilla 31 del kit, rehecha el 25/10/2026):
   los tres círculos con los centros a un radio de distancia, en triángulo, para
   que cada rótulo entre en su gajo y el centro respire. Antes los rótulos iban
   en mono, centrados en cada círculo y encima de los cruces. Desde el 9/11, una
   vez armado y leído, el Venn se funde en un solo círculo con el centro adentro
   (la animación de antes, que Mateo quiso de vuelta; el JS la lleva). El
   diagrama va arriba y el titular abajo, en columna, y el lienzo se mide también
   por el alto de la pantalla para que los dos entren sin tocarse.
   Geometría, en el diámetro del círculo (d = 58% del lienzo): centros en
   (−.25d, −.144d), (+.25d, −.144d) y (0, +.289d) desde el centro del lienzo. */
.venn{height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(20px,4vh,48px);padding:var(--nav-h) 0 clamp(20px,4vh,48px);position:relative;overflow:hidden}
.venn-lienzo{position:relative;width:min(84vw,720px,calc(100svh - 290px));aspect-ratio:1/1;flex:0 0 auto;container-type:inline-size}
.venn-c{position:absolute;top:50%;left:50%;width:58%;aspect-ratio:1/1;border-radius:50%;
  will-change:transform;mix-blend-mode:screen;
  /* contorno lima tenue y relleno translúcido: donde se cruzan, se ilumina */
  background:rgba(220,255,61,.085);border:1px solid rgba(220,255,61,.45)}
.venn-c.a{transform:translate(-75%,-64.4%)}
.venn-c.b{transform:translate(-25%,-64.4%);background:rgba(220,255,61,.075)}
.venn-c.c{transform:translate(-50%,-21.1%);background:rgba(220,255,61,.095)}
/* cada rótulo en su gajo, medido sobre la pieza 9: a .45 radios del centro de su círculo, hacia afuera */
.venn-rot{position:absolute;transform:translate(-50%,-50%);z-index:4;text-align:center;white-space:nowrap;
  font-weight:400;font-size:clamp(13px,4.25cqi,32px);line-height:1.12;letter-spacing:-.01em;color:var(--ink)}
.venn-rot.a{left:22.5%;top:34.2%}
.venn-rot.b{left:77.5%;top:34.2%}
.venn-rot.c{left:50%;top:81.9%}
.venn-centro{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;z-index:5;text-align:center}
.venn-centro b{font-weight:400;font-size:clamp(12px,3.9cqi,30px);letter-spacing:-.01em;line-height:1.12;color:var(--lime)}
.venn-tit{position:relative;width:100%;text-align:center;padding:0 var(--gut);z-index:6}
/* En el teléfono el titular va angosto, en cuatro líneas; en la compu, en dos. En
   cuatro líneas, a 1280 × 800 la última quedaba afuera de la pantalla y la
   sección la cortaba (lo vio Mateo el 9/11). */
.venn-tit h2{max-width:7.6em;margin:0 auto}
@media(min-width:1024px){.venn-tit h2{max-width:12.5em}}

/* ══ 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 ══
   El barrido y el Venn son una sola superficie: los dos llevan el verde tonal
   medido sobre el alto de los dos juntos, el barrido con la parte de arriba y el
   Venn con la de abajo, así el degradé sigue sin costura (Mateo, 9/11). El JS lo
   hace subir desde el Venn; sin movimiento queda entero. */
:root{--barrido-h:clamp(90px,14vw,190px)}
.barrido{position:relative;height:var(--barrido-h);overflow:hidden}
.barrido i{position:absolute;inset:-2px;display:block}
.barrido i.sec-verde-tonal{background-size:100% calc(var(--barrido-h) + 100svh);background-position:center top}
/* el Venn se clava y GSAP lo envuelve, así que no se puede pedir que venga pegado al barrido */
.venn.sec-verde-tonal{background-size:100% calc(var(--barrido-h) + 100svh);background-position:center bottom}
@media (prefers-reduced-motion:no-preference){
  .js .barrido i{clip-path:polygon(0 100%, 100% 100%, 100% 100%, 0 100%)}
}

/* ══ 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:radial-gradient(130% 95% at 85% -5%,#2E5039 0%,#223D2B 30%,#18291E 62%,#122019 100%);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}
/* Hasta el 8/11 la forma era lima y el texto pasaba a oscuro a mitad de camino, cuando todavía estaba sobre
   el negro y casi no se leía. En verde el texto queda en blanco todo el recorrido. */

/* ── 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:0;background:var(--vacio)}
.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:0;background:var(--vacio);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:0;overflow:hidden;background:var(--vacio);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(19,16,9,.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:0;background:var(--vacio)}
.mu-v{position:relative;aspect-ratio:9/16;border-radius:0;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(19,16,9,.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)}
/* El muro de cada marca va en filas y no en columnas: en columnas, Safari cambiaba de lugar las piezas mientras
   entraban (Mateo lo vio en Disa, 9/11). Cada pieza sigue entera, en su proporción, y en el orden de la lista. */
.muro.filas{columns:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px) clamp(10px,1.3vw,18px);align-items:start}
.muro.filas .mu{margin:0}
@media(max-width:1023px){.muro.filas{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:767px){.muro.filas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1023px){.muro{columns:3}}
@media(max-width:767px){.muro{columns:2}}

/* ══════════ VERDE TONAL Y DIAGRAMAS DE LOS CARRUSELES (8/11/2026) ══════════ */

/* El fondo principal del sistema (02, «Fondos»): verde sobre verde, con la luz
   desde la esquina de arriba a la derecha y un ruido mínimo para que no se vean
   escalones. Va en las secciones que llevan el acento en lima, que es donde el
   sistema pone la lima: «por sección», decisión de Mateo del 8/11. */
.sec-verde-tonal{position:relative;isolation:isolate;
  background:radial-gradient(130% 95% at 85% -5%,#2E5039 0%,#223D2B 30%,#18291E 62%,#122019 100%);--mut-2:var(--mut)}
.sec-verde-tonal::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Texto a la izquierda y el diagrama a la derecha en escritorio; en teléfono y
   tablet el diagrama va debajo del texto. */
@media(min-width:1024px){
  .diagrama-grid{grid-template-columns:minmax(0,1fr) minmax(300px,440px)!important;align-items:center}
}

/* Los íconos de los pasos, de línea como la grilla de los carruseles (la 14,
   lámina 5): un grosor, una familia, en blanco y sin caja. */
.paso-ico{background:none!important;aspect-ratio:auto!important;width:clamp(40px,4vw,52px)!important;color:var(--ink);overflow:visible}
.paso-ico svg{display:block;width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
@media(max-width:767px){.paso-ico{width:40px!important}}

/* Las capas de los carruseles (la 10, lámina 3): discos acostados, el de arriba
   lleno. Sobre negro va lleno de blanco; sobre verde, de lima. */
.capas-d{margin:0;width:100%;max-width:440px;justify-self:center}
.capas-d svg{display:block;width:100%;height:auto;overflow:visible}
.capas-d ellipse{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1.3}
.capas-d ellipse.llena{fill:var(--ink);stroke:none}
.sec-verde-tonal .capas-d ellipse.llena{fill:var(--lime)}
.capas-d text{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.16em;fill:var(--ink);dominant-baseline:middle}
.capas-d .flecha{fill:none;stroke:rgba(255,255,255,.42);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}

/* El recorrido con nodos (la 14, lámina 2, y el Sistema Visual 05): una línea
   punteada que une los pasos, cada uno en una píldora. */
.recorrido-d{list-style:none;position:relative;display:grid;gap:clamp(14px,1.8vw,22px);padding-left:30px;justify-self:start}
.recorrido-d::before{content:"";position:absolute;left:6px;top:22px;bottom:22px;border-left:1.3px dashed rgba(255,255,255,.4)}
.recorrido-d li{position:relative;justify-self:start;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;padding:13px 20px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:rgba(19,16,9,.28)}
.recorrido-d li::before{content:"";position:absolute;left:-30px;top:50%;width:13px;height:13px;margin-top:-6.5px;border-radius:50%;
  border:1.3px solid rgba(255,255,255,.6);background:var(--verde)}
.recorrido-d li:last-child{background:var(--ink);color:var(--negro);border-color:var(--ink)}
.recorrido-d li:last-child::before{background:var(--ink);border-color:var(--ink)}

/* Qué decidís en cada canal, en la grilla de los carruseles: renglones con
   filete, el rótulo en mono y una marca por canal. La lima, solo en «pauta». */
.control-d{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;width:100%;max-width:440px}
.control-d .fila{display:grid;grid-template-columns:1fr 84px 84px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line-2)}
.control-d .fila.cab{color:var(--mut);padding-top:0}
.control-d .fila.cab .li{color:var(--lime)}
.control-d .fila>span:not(:first-child),.control-d .fila>i{justify-self:center}
.control-d i{display:block;width:13px;height:13px;border-radius:50%;border:1.3px solid rgba(255,255,255,.55)}
.control-d i.si{background:var(--ink);border-color:var(--ink)}
@media(max-width:767px){.control-d .fila{grid-template-columns:1fr 70px 56px}}
/* En el teléfono el diagrama se achica con la pantalla y los rótulos quedaban en
   8 px: se agrandan en las unidades del dibujo para que lleguen a 12. */
@media(max-width:767px){.capas-d text{font-size:18px}}

/* ══ «por sección» en todo el sitio (decisión de Mateo, 8/11/2026) ══
   La lima va donde el fondo es verde (o crema). En el negro cálido el acento
   pasa al blanco: con negro no va lima. */
.cinta .li{color:var(--mut-2)}
details summary .li{color:var(--ink)}
.lbl.tinta{color:var(--ink)}
@media(hover:hover) and (pointer:fine){.lista a:hover h3{color:var(--ink)}.lista a:hover .rubro{color:var(--ink)}}
/* los nodos de los pasos de Método van sobre negro: en blanco (en crema siguen en lima) */
.paso-num{background:var(--ink);color:var(--negro)}
/* el catálogo va sobre el verde tonal, en vidrio, y su único acento es la barra de avance */
.cat-card,.vidrio{background:rgba(255,255,255,.045);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:var(--line-2)}
.cat-card .ent{color:var(--mut)}
/* en teléfono y tablet el velo del hero funde la foto con el verde de abajo */
@media(max-width:1023px){
  .hero .velo{background:linear-gradient(to top,
    rgba(18,32,25,1) 0%, rgba(18,32,25,.86) 22%, rgba(18,32,25,.4) 46%, rgba(18,32,25,0) 64%)}
}

/* ── composición vertical en 3:4 · las galerías de Domo (8/11/2026) ──
   Las quince fotos que eligió Mateo son verticales. En 2:3 se les cortaban los
   costados al producto, así que la celda va en 3:4: tres columnas, la del medio
   más baja, y en teléfono y tablet dos columnas. */
.dgal.vert .dfig{grid-column:span 4;aspect-ratio:3/4;margin-top:0}
.dgal.vert .dfig:nth-child(3n+2){margin-top:22%}
.dgal.vert .dfig:nth-child(3n){margin-top:8%}
@media(max-width:1023px){
  .dgal.vert{grid-template-columns:1fr 1fr}
  .dgal.vert .dfig{grid-column:auto;aspect-ratio:3/4;margin-top:0!important}
  .dgal.vert .dfig:nth-child(2n){margin-top:12%!important}
}

/* ══ «qué pienso», en Estudio: una sola escena con las cinco creencias (base.js) ══
   Mateo eligió el círculo el 9/11 y después pidió unir las tres formas que había visto, para que tuviera ritmo
   y no quedara partido: la escena se clava y se recorre de corrido, cada creencia se abre con un círculo de su
   color sobre la anterior (con los aros lima de la firma, los mismos en cada cambio), y se alternan la frase
   gigante que cruza, la que se lee palabra por palabra y la que crece con el círculo. Sin movimiento (o sin
   JS), las cinco quedan una debajo de la otra, cada una con su color. */
.creencia{position:relative;min-height:100svh;overflow:hidden;display:flex;align-items:center;padding:calc(var(--nav-h) + 24px) 0 40px}
.creencia.f-verde{background:radial-gradient(130% 95% at 85% -5%,#2E5039 0%,#223D2B 30%,#18291E 62%,#122019 100%)}
.creencia.f-crema{background:var(--crema)}
.creencia.f-negro{background:var(--negro)}
.creencia[data-fondo=verde],.creencia[data-fondo=negro]{--tinta:var(--ink);--apagado:rgba(255,255,255,.2);--suave:#c9c8bf;--raya:var(--line-2)}
.creencia[data-fondo=crema]{--tinta:var(--on-light);--apagado:rgba(19,16,9,.18);--suave:#5C584E;--raya:var(--line-d)}
.creencia-in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
  display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,36px);align-items:end}
@media(min-width:1024px){.creencia-in{grid-template-columns:1.7fr 1fr;gap:clamp(40px,5vw,80px)}}
.creencia-n{display:inline-flex;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  background:var(--lime);color:#132219;border-radius:999px;padding:6px 11px;margin-bottom:clamp(16px,2vw,26px)}
.creencia-frase{font-weight:400;font-size:clamp(40px,7.4vw,124px);line-height:1;letter-spacing:-.035em;color:var(--tinta);max-width:13ch}
.creencia-frase w{display:inline-block}
.creencia-lado{display:grid;gap:18px}
.creencia-linea{height:1px;background:var(--raya);transform-origin:left center}
.creencia-bajada{font-size:clamp(15px,1.4vw,18px);line-height:1.6;color:var(--suave);max-width:40ch}
.creencia .control-d{margin-top:6px}
.creencia-gigante,.pienso-aro{display:none}
/* la escena: las cinco apiladas en una pantalla que se clava */
.pienso{position:relative;background:var(--negro)}
.pienso.en-escena{height:100svh;overflow:hidden}
.pienso.en-escena .creencia{position:absolute;inset:0;min-height:0}
.pienso.en-escena .pienso-aro{display:block;position:absolute;left:50%;top:55%;width:60vmin;height:60vmin;margin:-30vmin 0 0 -30vmin;
  z-index:20;pointer-events:none;opacity:0}
.pienso-aro circle{fill:none;stroke:var(--lime);stroke-width:.6}
.pienso.en-escena .creencia-gigante{display:block;position:absolute;left:0;top:50%;transform:translateY(-58%);z-index:3;white-space:nowrap;
  font-weight:400;font-size:clamp(96px,19vw,300px);line-height:1;letter-spacing:-.04em;color:var(--tinta);will-change:transform;pointer-events:none}

/* ══ el titular del hero: dos tonos y la entrada por palabras (base.js) ══
   «De eso me encargo yo.» va en el gris apagado, la frase en dos tonos del Sistema Visual: la primera
   oración es el problema y la segunda, la respuesta (elegido por Mateo el 9/11). Cada palabra entra desde su
   máscara; el margen de abajo deja lugar a los descendentes para que la máscara no los corte. */
.hero h1 .apagado{color:#929186}
.pm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.pm>span{display:inline-block;transform-origin:0% 100%}