/* BISO · home v3.2 (ocho secciones). Base visual: la home v2 (maqueta de Codex del 21/09 y componentes del sitio anterior)
   con las secciones de la v3: logos con cruces, pilares, trabajo destacado al estilo OFF+BRAND, la grilla con título
   (Estética, v3.2; antes Resultados) y contacto en dos tonos. Diseño: lanzamiento/web/diseno-home-v2.md (paleta, escala, retícula).
   La capa de movimiento vive aparte (public/motion/, ver lanzamiento/web/movimiento-home-v2.md). Contrato: v3/contrato-home.md. */

/* ───────── 1. Tokens ───────── */
:root{
  --night:#0a0d0b;--deep:#0d1710;--forest:#153521;--paper:#f1f3f1;--soft:#dce6dc;
  --ink:#141815;--text-2:#5a655b;--muted:#647067;--rule:#ced5cf;--rule-strong:#afc0ad;
  --white:#e9edea;--text-2-dark:#a9baaa;--muted-dark:#91a78d;--rule-dark:#334638;--tag-line:#415545;
  --line-dark:rgba(233,237,234,.22);--line-forest:rgba(183,217,191,.24);
  --green:#2e7d4f;--sage:#b7d9bf;--sage-2:#c0d4ba;
  --hover-light:#dce8dc;--hover-dark:#294b35;--focus-dark:#72ab79;--focus:var(--green);
  --field:#1c2b1f;--field-text:#e0ecda;--placeholder:#94a889;--field-line:#6f8c66;--safelight:#f0957a;
  --ease:cubic-bezier(.22,1,.36,1);--gutter:clamp(22px,4.4vw,76px);
  --fs-display:7.143vw;--fs-manifesto:clamp(44px,7vw,100px);
  --fs-cta:clamp(44px,6vw,84px);--fs-h2:clamp(36px,2.6vw + 26px,64px);--fs-h3-big:clamp(30px,2.4vw + 14px,48px);
  --fs-h3:clamp(24px,1.1vw + 14px,30px);--fs-figure:clamp(48px,6vw,96px);--fs-lead:clamp(16px,.25vw + 15px,19px);
  --fs-q:clamp(16px,.2vw + 15px,18px);--fs-body:15px;--fs-small:13px;--fs-micro:12px;--fs-label:11px;
  --col-gap:clamp(16px,2vw,24px);--split-gap:clamp(40px,7vw,100px);
  --section-y:clamp(72px,8vw,120px);--block-y:clamp(36px,4.5vw,64px);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' 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 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
[data-nav-theme="dark"],.nav--dark{--focus:var(--focus-dark)}
@media(max-width:800px){:root{--fs-display:10vw}}
@media(max-width:500px){:root{--fs-manifesto:clamp(36px,10.4vw,44px);--fs-label:10px}}

/* ───────── 2. Base ───────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
html.dialog-open{overflow:hidden}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;color:inherit}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex="0"]:focus-visible{outline:3px solid var(--focus);outline-offset:5px}
button::-moz-focus-inner{border:0}
::selection{background:#bed6b9;color:var(--night)}
[hidden]{display:none!important}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{font-weight:400;text-wrap:balance}
p{line-height:1.65;text-wrap:pretty}
svg{display:inline-block;vertical-align:middle}
fieldset{border:0;margin:0;padding:0;min-width:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;z-index:300;left:16px;top:-90px;background:var(--paper);padding:14px 20px;border-radius:30px;color:var(--ink)}
.skip:focus{top:16px}
.wrap{width:min(1360px,100%);padding-inline:var(--gutter);margin:auto}
.label{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.14em;font-weight:500;line-height:1.5;color:var(--muted)}
[data-nav-theme="dark"] .label{color:var(--muted-dark)}
.section-title{font-size:var(--fs-h2);letter-spacing:-.05em;line-height:1.05}
.label+h2,.label+h3{margin-top:20px}
/* Los dos símbolos del sitio: ● Contenido y △ Sistemas. Van aria-hidden; el texto de al lado dice qué es. */
.sym{display:inline-block;font-size:.9em;line-height:1;font-style:normal}

/* Botones y enlaces */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:48px;padding:14px 22px;border-radius:50px;border:1px solid transparent;font-size:var(--fs-small);font-weight:500;line-height:1.2;transition:background .25s,border-color .25s}
.btn-light{background:var(--paper);color:var(--night)}
.btn-light:hover{background:var(--hover-light)}
.btn-dark{background:var(--night);color:var(--paper)}
.btn-dark:hover{background:var(--hover-dark)}
.btn-outline{border-color:#ffffff58;background:#17221a38;color:var(--white)}
.btn-outline:hover{background:#273f3070;border-color:#ffffffa0}
.btn:active,.nav-link:active,.pill-link:active{transform:scale(.97);transition:transform .1s ease-out}
.btn.is-sending{cursor:progress}
.btn.is-sending .ico-arrow{display:none}
.text-link{display:inline-flex;gap:18px;align-items:center;padding:10px 0;border-bottom:1px solid currentColor;font-size:var(--fs-small);transition:opacity .2s}
.text-link:hover{opacity:.7}
.inline-link,.faq-lead a,.form-alt a,.faq-list a,.privacy-dialog a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.inline-link:hover,.faq-lead a:hover,.form-alt a:hover,.faq-list a:hover{text-decoration-thickness:2px}

/* Flecha única: el SVG fino. Abajo, arriba, atrás y afuera son la misma flecha rotada; en hover avanza 3 px. */
.ico-arrow{display:inline-block;flex:none;vertical-align:middle;width:13px;height:13px;transition:transform .25s var(--ease)}
.nav-dot .ico-arrow{width:11px;height:11px}
.ico-down{transform:rotate(90deg)}
.ico-up{transform:rotate(-90deg)}
.ico-back{transform:rotate(180deg)}
.ico-ext{transform:rotate(-45deg)}
.btn:hover .ico-arrow,.text-link:hover .ico-arrow,.pill-link:hover .ico-arrow{transform:translateX(3px)}
.btn:hover .ico-down,.text-link:hover .ico-down{transform:translateY(3px) rotate(90deg)}
.text-link:hover .ico-up{transform:translateY(-3px) rotate(-90deg)}

/* Grano de película: solo en las secciones oscuras de color liso. */
.grain{position:relative;isolation:isolate}
.grain::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--grain);background-size:160px;opacity:.07}
@media(prefers-contrast:more){.grain::after{display:none}}

/* Encabezado de sección: titular a la izquierda, bajada a la derecha (se apila hasta 800 px). */
.section-top{display:grid;grid-template-columns:7fr 5fr;align-items:end;gap:var(--split-gap);margin-bottom:var(--block-y)}
.section-aside{justify-self:end;font-size:var(--fs-body);line-height:1.7}
.section-top>div:only-child{grid-column:1/-1}

/* ───────── 3. Menú (vidrio, roll, claro/oscuro) ───────── */
.nav{position:fixed;inset-inline:0;top:0;z-index:90;display:block;padding:16px 16px 0;pointer-events:none}
.nav>*{pointer-events:auto}
.glass{background-image:linear-gradient(to bottom right,rgba(255,255,255,.40) 0%,rgba(255,255,255,.05) 50%,rgba(255,255,255,0) 100%);backdrop-filter:blur(21px);-webkit-backdrop-filter:blur(21px);border:1px solid rgba(255,255,255,.10);border-radius:4.25px;box-shadow:0 2px 2px 0 rgba(0,0,0,.10);overflow:hidden}
/* Pistas laterales iguales: el menú queda centrado sin importar el ancho del CTA. */
.navrow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;height:51px;padding-inline:30px;gap:20px}
.nav-brand{display:flex;align-items:center;justify-self:start;min-height:44px;min-width:44px}
.nav-logo{display:block;height:28px;width:auto;filter:brightness(0);transition:filter .4s var(--ease)}
.nav-menu{display:flex;align-items:center;justify-self:center;gap:27px}
.nav-menu a,.nav-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;color:#000;font-size:13px;font-weight:400;letter-spacing:-.26px;white-space:nowrap;transition:opacity .3s var(--ease)}
.nav-link:hover{opacity:.65}
.nav-actions{display:flex;align-items:center;justify-self:end;gap:19px}
.nav-link{gap:8px}
.nav-dot{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--green);color:#fff}
.nav--dark .nav-menu a,.nav--dark .nav-link{color:#fff}
.nav--dark .nav-logo{filter:brightness(0) invert(1)}
/* Roll del menú: la copia que entra hereda el color, sirve en claro y en oscuro. */
.nav-menu .roll{display:inline-flex;flex-direction:column;overflow:hidden;height:19px}
.nav-menu .roll span{display:block;height:17px;line-height:17px;transition:transform .3s cubic-bezier(0,0,.2,1)}
.nav-menu a:hover .roll span{transform:translateY(-19px)}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.glass{background:#f1ede7;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:rgba(0,0,0,.35)}.nav .nav-menu a,.nav .nav-link{color:#000}.nav .nav-logo{filter:brightness(0)}}

/* ───────── 4. Hero y logos ───────── */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:max(600px,100svh);background:var(--night);color:var(--white);overflow:hidden}
.hero-video,.hero-wash{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.hero-video{object-fit:cover;object-position:center}
.hero-wash{z-index:-1;background:
  linear-gradient(90deg,rgba(4,14,9,.82) 0%,rgba(4,14,9,.66) 60%,rgba(4,14,9,.32) 100%),
  linear-gradient(0deg,rgba(5,17,10,.90) 0%,transparent 45%,rgba(5,17,10,.25) 100%)}
.hero-inner{flex:1 0 auto;display:flex;flex-direction:column;justify-content:flex-end;padding-top:150px;padding-bottom:clamp(56px,11vh,120px)}
.hero .hero-eyebrow{display:flex;align-items:center;gap:13px;color:#d4e0d2;margin-bottom:28px;text-wrap:wrap}
.hero-eyebrow:before{content:"";flex:none;width:7px;height:7px;background:#b6d0a9;border-radius:50%;box-shadow:0 0 0 5px #b6d0a914}
/* v3.8: "CREAMOS / DISTINTO." al tamaño y con el interlineado del título de OFF+BRAND, sin tracking, en dos filas
   desfasadas. Las mayúsculas van por CSS: el texto sigue siendo "Creamos distinto." para lectores y buscadores.
   .hr es la fila (la mueve el scroll, motion.js hero) y .hr-in su contenido (la entrada CSS de la sección 15). */
.hero h1{font-size:var(--fs-display);letter-spacing:0;line-height:1;text-transform:uppercase}
.hero h1 .hr{display:block}
.hero h1 .hr-in{display:inline-block}
.hero h1 .hr-2{padding-left:16vw}
.hero h1 .soft{color:var(--sage-2)}
.hero-lead{max-width:34em;margin-top:24px;font-size:var(--fs-lead);line-height:1.5;color:#d4e0d2;text-wrap:balance}
.hero-buttons{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:36px}
/* v3.8, logos en su sección (después del manifiesto), como "Trusted by Leaders" de OFF+BRAND: etiqueta y píldora a la
   izquierda, grilla con cruces a la derecha. Cada celda dibuja la cruz de arriba a la izquierda y la de abajo a la derecha;
   la lista suma las dos esquinas que faltan (arriba a la derecha y abajo a la izquierda), sirve con cualquier cantidad de
   columnas. La píldora cambia por el nombre de la marca (home.js). */
.brands{background:var(--soft);padding-block:clamp(110px,16vh,180px)}
.brands-inner{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,10fr);gap:var(--col-gap);align-items:start}
.brands-title{margin:0}
.brands-pill{display:inline-flex;margin-top:12px;padding:4px 10px;border:1px solid rgba(20,24,21,.45);border-radius:6.5px;font-size:10px;text-transform:uppercase;letter-spacing:.14em;font-weight:500;line-height:1.5}
.brands-pill [data-brand-slot]{transition:color .3s var(--ease)}
.brands-pill .is-brand{color:var(--green)}
.brand-grid{--x:rgba(20,24,21,.5);position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.brand-grid li{position:relative;display:grid;place-items:center;height:clamp(76px,6.3vw,96px);padding-inline:14px;box-shadow:0 0 0 .5px rgba(20,24,21,.13)}
.brand-grid li::before,.brand-grid li::after,.brand-grid::before,.brand-grid::after{content:"";position:absolute;width:10px;height:10px;pointer-events:none;background:linear-gradient(var(--x),var(--x)) center/1px 100% no-repeat,linear-gradient(var(--x),var(--x)) center/100% 1px no-repeat}
.brand-grid li::before{left:-5px;top:-5px}
.brand-grid li::after{right:-5px;bottom:-5px}
.brand-grid::before{right:-5px;top:-5px}
.brand-grid::after{left:-5px;bottom:-5px}
.brand-grid img{display:block;width:auto;max-width:100%;height:24px;object-fit:contain;filter:brightness(0);opacity:.8;transition:opacity .35s var(--ease)}
.brand-grid img[alt="VALLE"]{height:36px}
.brand-grid img[alt="Real & Asociados"]{height:30px}
@media(hover:hover){.brand-grid li:hover img{opacity:1}}

/* ───────── 5. Manifiesto y pilares ───────── */
.manifesto{padding-block:var(--section-y)}
/* 22ch: "Concepto primero. Siempre." entra en un renglón a 768 y a 1440; a 501 va en dos. */
.manifesto-title{font-size:var(--fs-manifesto);line-height:1.02;letter-spacing:-.05em;max-width:22ch;color:var(--ink)}
.manifesto-title .accent{display:block;color:var(--green)}
.manifesto-body{display:grid;grid-template-columns:5fr 7fr;gap:var(--split-gap);margin-top:clamp(48px,6vw,88px);align-items:start}
.manifesto-copy{display:grid;gap:16px;max-width:46ch}
.manifesto-copy p{font-size:var(--fs-lead);line-height:1.6;color:var(--text-2)}
.seal{display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 14px;border:1px solid var(--green);border-radius:50px;font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.14em;font-weight:500;line-height:1.5;color:var(--ink)}
.seal-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(46,125,79,.12)}
/* Pilares: la línea y el punto como los pasos del proceso; --rule y --dot quedan para que movimiento los dibuje. */
.pillars{list-style:none;margin:clamp(56px,7vw,104px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.pillar{position:relative;padding-top:22px}
.pillar::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--rule-strong);transform:scaleX(var(--rule,1));transform-origin:left}
.pillar::after{content:"";position:absolute;top:-3px;left:0;width:7px;height:7px;border-radius:50%;background:var(--green);transform:scale(var(--dot,1))}
.pillar-n{display:block;font-size:var(--fs-label);letter-spacing:.14em;font-weight:500;line-height:1.5;color:var(--muted)}
.pillar-name{margin:28px 0 14px;font-size:var(--fs-h3-big);line-height:1.1;letter-spacing:-.045em;color:var(--ink)}
.pillar p{font-size:var(--fs-body);line-height:1.7;color:var(--text-2);max-width:36ch}
.manifesto-close{display:grid;grid-template-columns:5fr 7fr;gap:var(--split-gap);margin-top:clamp(48px,6vw,88px)}
.manifesto-close .manifesto-copy{grid-column:2}
.manifesto-copy .thesis{font-size:var(--fs-h3);line-height:1.3;letter-spacing:-.025em;color:var(--ink);max-width:36ch;text-wrap:balance}

/* ───────── 6. Trabajo destacado (OFF+BRAND) ─────────
   Columna izquierda fija (3 de 12 en su escala: 1fr contra 2.6fr) y dos columnas de miniaturas cuadradas. La columna izquierda
   de la grilla arranca --work-shift más abajo (propiedad translate, no transform: la capa de movimiento usa transform y no se
   pisan); movimiento lo lleva a 0 con el scroll. Fondo --soft sin posición: el orbe pasa detrás de las miniaturas. */
.feature{--work-shift:0px;--tile-pad:clamp(16px,2vw,28px);background:var(--soft);padding-block:var(--section-y) calc(var(--section-y) + var(--work-shift));overflow-x:clip}
.feature .label{color:var(--text-2)}
.feature-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);gap:clamp(32px,4vw,64px);align-items:start}
.feature-aside{position:sticky;top:110px}
.feature-title{font-size:var(--fs-h3-big);line-height:1.08;letter-spacing:-.045em;color:var(--ink)}
.feature-note{margin-top:20px;font-size:var(--fs-body);line-height:1.7;color:var(--text-2);max-width:30ch}
.pill-link{position:relative;display:inline-flex;align-items:center;gap:12px;margin-top:28px;min-height:46px;padding:12px 20px;border:1px solid var(--ink);border-radius:50px;font-size:var(--fs-small);font-weight:500;line-height:1.2;color:var(--ink);transition:background-color .3s var(--ease),color .3s var(--ease)}
.pill-link:hover{background:var(--ink);color:var(--paper)}
.pill-link sup{position:absolute;top:-2px;right:-20px;font-size:var(--fs-micro);font-weight:500;line-height:1;color:var(--ink)}
.work-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.work-tile:nth-child(odd){translate:0 var(--work-shift)}
.work-card{position:relative;display:block;width:100%;aspect-ratio:1;overflow:hidden;border:0;padding:0;border-radius:10px;background:#1b2520;color:#fff;text-align:left;font:inherit;isolation:isolate}
.work-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;scale:1.05;transition:scale .6s var(--ease)}
.work-media--top{object-position:50% 0}
/* El screencast del tren es texto claro: velo más alto para que el nombre no quede encima de otro texto. */
.work-card:has(.work-media--top)::after{background:linear-gradient(180deg,rgba(6,18,11,0) 30%,rgba(6,18,11,.82) 62%,#06120b 86%)}
.work-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(6,18,11,0) 42%,rgba(6,18,11,.5) 70%,rgba(6,18,11,.9) 100%)}
.work-info{position:absolute;z-index:1;left:var(--tile-pad);right:calc(var(--tile-pad) + 56px);bottom:var(--tile-pad)}
.work-name{display:block;font-size:clamp(18px,.8vw + 11px,24px);font-weight:500;line-height:1.1;letter-spacing:.01em;text-transform:uppercase;color:#fff}
/* La línea de servicios abre con grid-template-rows (0fr → 1fr): el nombre sube a medida que la línea aparece.
   Hasta 1100 px o sin hover se ve siempre. */
.work-line-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .6s var(--ease)}
.work-line{display:block;min-height:0;overflow:hidden;font-size:11px;font-weight:500;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:#d3eadb;transition:opacity .45s var(--ease)}
.work-line::before{content:"";display:block;height:10px}
.work-line .sym{color:var(--sage);margin-right:4px}
.work-cross{position:absolute;z-index:1;right:var(--tile-pad);bottom:var(--tile-pad);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(233,237,234,.4);background:rgba(6,18,11,.25);color:#fff;transition:background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease)}
.ico-cross{width:14px;height:14px;transition:none}
/* Cruz → flecha sin JS: el trazo vertical pasa a punta con la propiedad d (Chrome y Firefox; en Safari queda la cruz). */
.ico-cross path:last-child{d:path("M12 5L12 12L12 19");transition:d .6s var(--ease)}
.work-card:is(:hover,:focus-visible) .work-cross{background:var(--paper);border-color:var(--paper);color:var(--night)}
.work-card:is(:hover,:focus-visible) .ico-cross path:last-child{d:path("M13 6L19 12L13 18")}
@media(hover:hover){.work-card:hover .work-media{scale:1.1}}
@media(hover:hover) and (min-width:1101px){
  .work-line-wrap{grid-template-rows:0fr}
  .work-line{opacity:0}
  .work-card:is(:hover,:focus-visible) .work-line-wrap{grid-template-rows:1fr}
  .work-card:is(:hover,:focus-visible) .work-line{opacity:1}
}
@media(min-width:1101px){.feature{--work-shift:clamp(48px,6vw,112px)}}

/* ───────── 7. Estética: la grilla con título (v3.2) ─────────
   Sección 4, donde estaba Resultados. Acá, solo lo que se ve siempre: el fondo y el título. La hoja de contactos (escritorio
   en 3D, celular y tablet en 2D) la arma la capa de movimiento (motion.css, motion.js); sin ella queda el título solo. */
.grid-3d{background:var(--night);color:var(--white);padding-block:var(--section-y)}
.grid-3d-title{max-width:18ch;color:var(--white)}

/* Lista de resultados de las páginas de proyecto (lista de premios de OFF+BRAND; la home ya no la usa desde la v3.2).
   Filas con número, cifra, qué es y el detalle a la derecha, con líneas finas entre filas. Sin detalle, "qué es" ocupa las dos
   últimas columnas. La línea es un ::before con scaleX(var(--rule,1)): sin movimiento queda entera; movimiento la dibuja. */
.results{background:var(--night);color:var(--white);padding-block:var(--section-y)}
.fig-pre{font-size:.42em;position:relative;top:-1em;margin-right:.06em;letter-spacing:0}
.fig-post{font-size:.6em;margin-left:.04em;letter-spacing:0}
.results-list{list-style:none;margin:20px 0 0;padding:0}
.result-row{position:relative;display:grid;grid-template-columns:70px minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:baseline;padding-block:clamp(24px,2.8vw,40px)}
.result-row::before,.result-row:last-child::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--line-dark);transform:scaleX(var(--rule,1));transform-origin:left}
.result-row::before{top:0}
.result-row:last-child::after{bottom:0}
.result-n{font-size:var(--fs-label);letter-spacing:.14em;font-weight:500;color:var(--muted-dark)}
.result-fig{font-size:var(--fs-figure);line-height:.9;letter-spacing:-.05em;white-space:nowrap;font-variant-numeric:lining-nums tabular-nums;color:var(--white)}
.result-what{font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.03em;color:var(--white)}
.result-detail{justify-self:end;max-width:30ch;font-size:var(--fs-body);line-height:1.6;color:var(--text-2-dark);text-align:right}
@media(min-width:1101px){.result-what:last-child{grid-column:3/-1}}

/* ───────── 8. Servicios: titular y Capacidades ───────── */
.work{padding-block:var(--section-y)}
.work .section-aside p{max-width:40ch;color:var(--text-2)}
.block-head{margin-bottom:20px}
.work-note{margin-top:26px;color:var(--muted);font-size:var(--fs-micro);line-height:1.6}
/* Tarjetas 9:16 de Capacidades (pastilla = categoría, línea = qué incluye). Desde la v3.3 (66e) son piezas visuales, no
   botones: sin hover, sin foco, sin cruz y sin diálogo. */
.project{position:relative;background:#1b2520;color:var(--white);overflow:hidden;border-radius:18px}
.project-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.capability-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.project.capability{aspect-ratio:9/16;border-radius:18px}
.capability:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(6,18,11,.38) 0%,rgba(6,18,11,0) 20%,rgba(6,18,11,0) 46%,rgba(6,18,11,.6) 70%,rgba(6,18,11,.94) 100%)}
.capability-pill,.capability-info{position:absolute;z-index:1}
.capability-pill{left:16px;top:16px;font-size:10px;font-weight:500;line-height:1;text-transform:uppercase;letter-spacing:.14em;padding:8px 12px;border-radius:50px;border:1px solid rgba(183,217,191,.24);background:rgba(20,61,38,.62);color:#d3eadb;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.capability-info{left:20px;right:20px;bottom:22px}
.capability-title{display:block;font-size:clamp(22px,2.3vw,34px);letter-spacing:-.045em;line-height:1.02;color:#fff}
.capability-line{display:block;margin-top:12px;font-size:10px;font-weight:500;line-height:1.5;text-transform:uppercase;letter-spacing:.14em;color:var(--sage)}
/* Botón de sonido del video principal de las páginas de proyecto ([slug].astro, hoy Atómica); lo maneja home.js. */
.sound-toggle{position:absolute;z-index:2;right:14px;bottom:16px;display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid rgba(233,237,234,.3);background:rgba(6,18,11,.55);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .25s}
.sound-toggle:hover{background:rgba(6,18,11,.78)}
.sound-toggle svg{width:16px;height:16px}
.sound-toggle .ico-sound-on,.sound-toggle[aria-pressed="true"] .ico-sound-off{display:none}
.sound-toggle[aria-pressed="true"] .ico-sound-on{display:block}
/* El screencast del panel es texto claro: velo más fuerte abajo para que el título no quede encima de otro texto. */
.capability--sistemas:after{background:linear-gradient(180deg,rgba(6,18,11,.6) 0%,rgba(6,18,11,0) 18%,rgba(6,18,11,0) 40%,rgba(6,18,11,.88) 62%,#06120b 82%)}

/* ───────── 9. Lo que podés contratar e inversión ───────── */
.services{background:var(--night);color:var(--white);padding-block:var(--section-y)}
.services-top{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:var(--split-gap);margin-bottom:var(--block-y)}
.services-top h3{font-size:var(--fs-h3-big);line-height:1.1;letter-spacing:-.045em}
.offer-list{list-style:none;margin:0;padding:0}
.service-row{display:grid;grid-template-columns:70px 1.1fr 1fr;gap:34px;border-top:1px solid var(--rule-dark);padding-block:32px 34px;align-items:start}
.service-row:last-child{border-bottom:1px solid var(--rule-dark)}
.service-number{font-size:var(--fs-label);color:var(--muted-dark);padding-top:8px;line-height:1.5}
.service-title{font-size:var(--fs-h3);line-height:1.15;letter-spacing:-.035em}
.service-detail p{font-size:var(--fs-body);line-height:1.7;color:var(--text-2-dark);max-width:46ch}
.service-detail .text-link{margin-top:14px;color:var(--white)}
/* Hecho en casa, dentro de la fila 04 (06/10): etiqueta chica y una oración que nombra los dos sistemas. */
.service-detail .label{margin-top:22px;font-size:var(--fs-label);line-height:1.5}
.service-detail .label + p{margin-top:10px}
.pill-soon{display:inline-block;margin-left:12px;vertical-align:middle;font-size:var(--fs-label);line-height:1.2;text-transform:uppercase;letter-spacing:.14em;font-weight:500;padding:6px 10px;border-radius:20px;border:1px solid rgba(183,217,191,.4);color:var(--sage)}
/* Inversión: alineada con la columna del título de las filas (70px · 1.1fr · 1fr). Los rangos quedan en el formulario. */
.services-cta{margin-top:48px;margin-left:calc(70px + 34px)}

/* ───────── 10. Preguntas ─────────
   Sobre --soft (v3.1): sin Equipo en el medio, Preguntas y el CTA de Contacto (--paper) quedaban seguidos en el mismo fondo.
   La etiqueta va en --text-2, como en Trabajo: --muted no llega a 4.5:1 sobre --soft. */
.faq-section{background:var(--soft);padding-block:var(--section-y)}
.faq-section .label{color:var(--text-2)}
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--split-gap)}
.faq-lead{position:sticky;top:110px;align-self:start}
.faq-lead>p:last-child{margin-top:24px;font-size:var(--fs-body);color:var(--text-2);max-width:33ch}
.faq-lead a{color:var(--ink)}
.faq-list details{border-top:1px solid var(--rule-strong)}
.faq-list details:last-child{border-bottom:1px solid var(--rule-strong)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:70px;padding:21px 0;font-size:var(--fs-q);line-height:1.4;letter-spacing:-.015em;color:var(--ink);transition:color .2s}
.faq-list summary:hover{color:var(--green)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{content:"+";flex:none;font-size:22px;color:#65865c;font-weight:300}
.faq-list details[open] summary:after{content:"−"}
.faq-list details p{padding:0 34px 24px 0;font-size:var(--fs-body);line-height:1.7;color:var(--text-2);max-width:60ch}
.faq-list a{color:var(--ink)}

/* ───────── 11. Contacto: CTA, cómo sigue y formulario ───────── */
.cta{padding-block:var(--section-y)}
.cta-grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--split-gap);align-items:end}
.cta h2{font-size:var(--fs-cta);line-height:1.03;letter-spacing:-.05em;max-width:12ch}
.cta-copy{font-size:var(--fs-lead);line-height:1.6;color:var(--text-2);max-width:40ch}
.signature{margin-top:36px;font-size:var(--fs-body);color:var(--ink)}
.signature:before{content:"";display:block;width:32px;height:1px;background:var(--ink);margin-bottom:14px}
.contact{background:var(--deep);color:var(--white);padding-block:var(--section-y);color-scheme:dark}
.contact-grid{display:grid;grid-template-columns:5fr 7fr;gap:var(--split-gap)}
.contact-steps{position:sticky;top:110px;align-self:start}
.contact-h3{font-size:var(--fs-h3-big);line-height:1.1;letter-spacing:-.045em;color:var(--white);max-width:16ch}
/* Pasos: la línea y el punto de la v2 (motion.js los dibuja con --rule y --dot), en una columna, solo el nombre (v3.1). */
.process-grid{list-style:none;margin:36px 0 0;padding:0}
.process-grid li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;border-top:1px solid var(--line-forest);padding:20px 0 22px}
.process-grid li:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sage);position:absolute;top:-4px;left:0}
.contact .contact-steps .process-grid li::after{background:var(--line-forest)}
.step-n{grid-row:1/3;padding-top:5px;font-size:var(--fs-label);line-height:1.5;color:var(--muted-dark)}
.process-grid h4{font-size:var(--fs-h3);line-height:1.15;letter-spacing:-.035em}
.contact-lead{margin-bottom:36px}
.contact-copy{margin-top:20px;font-size:var(--fs-body);line-height:1.7;color:var(--text-2-dark);max-width:46ch}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:22px;min-width:0}
.form-label{display:block;font-size:var(--fs-small);font-weight:500;color:var(--white);margin-bottom:8px;line-height:1.4}
.optional{margin-left:8px;font-size:var(--fs-micro);font-weight:400;color:var(--muted-dark)}
.field input,.field select,.field textarea{display:block;width:100%;min-height:48px;padding:13px 14px;border:1px solid var(--field-line);border-radius:7px;background:var(--field);color:var(--field-text);font-size:14px;line-height:1.4;transition:border-color .2s}
.field input,.field select{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.field textarea{min-height:140px;resize:vertical;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--placeholder);opacity:1}
.field select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9baaa' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m6 13 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;background-size:13px}
.field select:has(option[value=""]:checked){color:var(--placeholder)}
.field option{background:var(--field);color:var(--field-text)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--muted-dark)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-color:var(--sage)}
.field [aria-invalid="true"],.field [aria-invalid="true"]:hover{border-color:var(--safelight);box-shadow:inset 0 0 0 1px var(--safelight)}
.field-help{margin-top:8px;font-size:var(--fs-micro);line-height:1.5;color:var(--text-2-dark)}
.field-error{margin-top:8px;font-size:var(--fs-micro);line-height:1.5;font-weight:500;color:var(--safelight)}
.field-error:empty{display:none}
.form-end{display:flex;justify-content:flex-start;align-items:center;gap:20px;margin-top:6px}
.form-end .btn{white-space:nowrap}
.form-privacy{font-size:var(--fs-micro);line-height:1.5;color:var(--text-2-dark);max-width:30ch}
.form-alt{margin-top:20px;font-size:var(--fs-small);color:var(--text-2-dark)}
.form-alt a{color:var(--white)}
.form-status{margin-top:20px;font-size:13px;line-height:1.7;max-width:50ch}
.form-status:empty{display:none}
.form-status:not(:empty){padding:15px;border:1px solid rgba(240,149,122,.5);border-radius:8px;background:rgba(240,149,122,.08);color:var(--white)}
.form-status a{text-decoration:underline;text-underline-offset:3px}
.form-success{border-top:1px solid var(--rule-dark);padding-top:24px;animation:fade-in .3s ease-out}
.form-success h3{font-size:var(--fs-h3-big);line-height:1.1;letter-spacing:-.045em;color:var(--sage)}
.form-success p{margin-top:16px;font-size:var(--fs-lead);line-height:1.6;color:var(--white);max-width:36ch}
@keyframes fade-in{from{opacity:0}}

/* ───────── 12. Franja de BISO Academy ─────────
   Compacta, entre el formulario (--deep) y el pie (--deep), sobre --forest + grano. Una fila desde 801 px: el texto a la
   izquierda y las novedades por email a la derecha, alineadas abajo. Reusa los campos del formulario de contacto. */
.academy{background:var(--forest);color:var(--white);padding-block:clamp(56px,6vw,96px);color-scheme:dark}
.academy .label{color:var(--text-2-dark)}
.academy-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--split-gap);align-items:end}
.academy-title{font-size:var(--fs-h3-big);line-height:1.1;letter-spacing:-.045em}
.academy-copy{margin-top:20px;font-size:var(--fs-body);line-height:1.7;color:var(--text-2-dark);max-width:44ch}
.academy-guide{margin-top:24px;color:var(--white);gap:14px;line-height:1.5;text-wrap:balance}
.academy-guide .ico-arrow{flex:none}
.academy-join{border-top:1px solid var(--line-forest);padding-top:24px}
.academy-form-lead{font-size:var(--fs-lead);line-height:1.6;color:var(--white);max-width:40ch;margin-bottom:24px;text-wrap:balance}
.academy .form-success{border-top:0;padding-top:0}

/* ───────── 13. Footer ───────── */
.footer{background:var(--deep);color:var(--text-2-dark);border-top:1px solid rgba(71,96,64,.43);padding-block:64px 40px}
.footer-sign{font-size:clamp(36px,5vw,72px);line-height:1.02;letter-spacing:-.05em;color:var(--white);text-wrap:balance}
.footer-sign .accent{color:var(--sage)}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--col-gap);margin-top:56px}
.footer-cols ul{list-style:none;margin:16px 0 0;padding:0}
.footer-cols ul,.footer-place{font-size:13px;line-height:2}
.footer-place{margin-top:16px}
.footer-cols a{display:inline-flex;align-items:center;gap:8px;transition:color .2s}
.footer-cols a:hover{color:var(--white)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:56px;border-top:1px solid var(--rule-dark);padding-top:20px}
.footer-bottom p{font-size:var(--fs-micro);color:var(--muted-dark)}
.wordmark{width:120px;height:auto;mix-blend-mode:screen}

/* ───────── 14. Diálogo de privacidad (el de proyecto salió en la v3.3, 66e: ya no lo abría nada) ───────── */
dialog{border:1px solid #677b634f;padding:0;border-radius:17px;background:var(--paper);color:var(--ink);max-width:calc(100vw - 32px);box-shadow:0 35px 130px #04150888}
dialog::backdrop{background:#08140ddd;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.dialog-close{border:1px solid #a6b69f;border-radius:25px;min-height:40px;padding:8px 16px;background:transparent;font-size:var(--fs-micro);color:var(--ink)}
.privacy-trigger{border:0;background:none;padding:0;text-decoration:underline;text-underline-offset:3px;font:inherit;color:inherit}
.privacy-dialog{padding:30px;max-width:min(520px,calc(100vw - 32px));line-height:1.7}
.privacy-dialog h2{font-size:28px;letter-spacing:-.035em;margin-bottom:19px}
.privacy-dialog p{font-size:14px;color:var(--text-2);margin-bottom:17px}
.privacy-dialog .dialog-close{margin-top:10px}
@media(prefers-reduced-transparency:reduce){dialog::backdrop{backdrop-filter:none;-webkit-backdrop-filter:none;background:#08140d}}

/* ───────── 15. Cursor y entrada del titular ─────────
   El cursor NO se oculta con reduced-motion (política del estudio). Mientras hay un diálogo abierto vuelve el del sistema.
   El anillo se mueve con la propiedad translate (home.js) para que la escala de sus estados (motion.css) no la pise. */
.cursor-ring{position:fixed;top:0;left:0;width:26px;height:26px;margin-left:-13px;margin-top:-13px;border:1px solid #fff;border-radius:50%;pointer-events:none;mix-blend-mode:difference;z-index:10000;will-change:transform}
.cursor-dot{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;filter:blur(4px);mix-blend-mode:screen;z-index:9999;will-change:transform}
body.cursor-light .cursor-dot{mix-blend-mode:multiply}
html:not(.dialog-open) body.cursor-on,html:not(.dialog-open) body.cursor-on *{cursor:none!important}
html.dialog-open .cursor-ring,html.dialog-open .cursor-dot{display:none}
/* Entrada del h1: cada palabra (.sw) es una máscara y cada letra (.sc) sube a cuadro desde abajo, con un retraso
   aleatorio por letra (--d, script en línea después del h1 en index.astro). */
.split-ready #hero-title .sw{display:inline-block;overflow:visible clip;padding-block:.1em;margin-block:-.1em;vertical-align:top}
.split-ready #hero-title .sc{display:inline-block;transform:translateY(115%);animation:charIn 1.1s var(--ease) var(--d,0ms) forwards}
@keyframes charIn{to{transform:none}}
/* v3.8: como OFF+BRAND, las letras caen con las filas corridas y después las filas se deslizan a su lugar (fill backwards:
   al terminar no queda transform de la animación y el scroll de motion.js mueve .hr sin pelearse). */
.split-ready #hero-title .hr-in{animation:rowIn 1s cubic-bezier(.45,0,.55,1) .9s backwards}
.split-ready #hero-title .hr-1 .hr-in{--rx:10.6vw}
.split-ready #hero-title .hr-2 .hr-in{--rx:-10.6vw;animation-delay:1s}
@keyframes rowIn{from{transform:translateX(var(--rx,0))}}
/* Las letras se van con el scroll (motion.js hero): la variable mueve translate, que no choca con el transform de charIn. */
#hero-title .sc{translate:0 calc(var(--out,0) * 1%)}
/* En pausa durante la carga; arrancan cuando la B empieza a volar (html.intro-out), como las letras de OFF+BRAND. */
html.intro-on:not(.intro-out) #hero-title .sc,html.intro-on:not(.intro-out) #hero-title .hr-in,html.intro-on:not(.intro-out) .hero-lead .hl>span{animation-play-state:paused}
/* Entrada de la bajada: cada renglón (.hl) es una máscara y su texto sube desde .7 s, con 80 ms entre renglones. */
.hero-lead .hl{display:block;overflow:visible clip;white-space:nowrap}
.hero-lead .hl>span{display:inline-block;vertical-align:top;transform:translateY(115%);animation:charIn 1.2s var(--ease) calc(700ms + var(--i,0) * 80ms) forwards}

/* ───────── 15b. Pantalla de carga (v3.8) ─────────
   Solo con html.intro-on (primera visita de la sesión, script del <head>). Fondo del verde del isotipo, que coincide con el
   de b-cromo.webp. La B plana va sobre la caja de la B cromada (17,2 % / 18 % / 64,4 % de la imagen de 600 px). */
.intro{display:none}
html.intro-on{overflow:hidden}
html.intro-on .intro{display:grid;place-items:center;position:fixed;inset:0;z-index:300;animation:introSafe .4s 5s forwards}
@keyframes introSafe{to{opacity:0;visibility:hidden}}
html.intro-on .nav-logo{opacity:0}
.intro-bg{position:absolute;inset:0;background:#243c2e}
.intro-mark{position:relative;width:min(440px,80vw);aspect-ratio:1}
.intro-mark img{position:absolute;display:block}
/* Máscara radial: el fondo de la imagen tiene viñeta y sin esto se ve el borde cuadrado. La B llega hasta el 40 % del radio. */
.intro-dim,.intro-fill{inset:0;width:100%;height:100%;-webkit-mask-image:radial-gradient(closest-side,#000 80%,transparent);mask-image:radial-gradient(closest-side,#000 80%,transparent)}
.intro-dim{opacity:.14}
.intro-fill{clip-path:inset(100% 0 0 0)}
.intro-flat{left:16.97%;top:18.01%;width:64.36%;height:auto;opacity:0;filter:brightness(0) invert(1);transform-origin:50% 50%}
.intro-orb{position:absolute;left:calc(81.3% + 6px);top:calc(82% - 38px);width:38px;height:38px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff 0%,rgba(255,255,255,0) 30%),radial-gradient(circle at 40% 36%,#f1f3f1 0%,#dce8dc 46%,#b7d9bf 86%,#9cc4a5 100%);
  box-shadow:0 10px 26px rgba(0,0,0,.28);animation:introPop .9s cubic-bezier(.34,1.56,.64,1) .2s backwards}
@keyframes introPop{from{transform:scale(0)}}
.intro-count{position:absolute;right:18.7%;top:calc(82% + 22px);display:flex;gap:14px;overflow:hidden;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#b7d9bf;font-variant-numeric:tabular-nums}
.intro-count span{display:inline-block;animation:introUp 1s cubic-bezier(.76,0,.24,1) .3s backwards}
.intro-count span+span{animation-delay:.4s}
@keyframes introUp{from{transform:translateY(110%)}}

/* ───────── 15c. Menú flotante y WhatsApp (v3.8, src/components/MenuFlotante.astro) ─────────
   Como el de OFF+BRAND: el panel crece desde la esquina del botón (clip-path), los enlaces caen escalonados y las rayas
   se vuelven X con rebote. Además cierra con Escape y devuelve el foco (home.js). Sin JS no hay botón de menú. */
.fab{position:fixed;right:19px;bottom:19px;z-index:95;display:flex;flex-direction:column;align-items:flex-end;gap:10px;transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.intro-on .fab{opacity:0;transform:translateY(40px);pointer-events:none}
html:not(.js) .fab-btn,html:not(.js) .fab-panel{display:none}
.fab-wa{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--green);color:#fff;box-shadow:0 6px 18px rgba(10,13,11,.22);transition:transform .4s var(--ease),opacity .3s var(--ease),background-color .3s var(--ease)}
.fab-wa:hover{transform:scale(1.06);background:#23964f}
.fab.is-open .fab-wa{opacity:0;transform:scale(.8);pointer-events:none}
.fab-btn{position:relative;width:46px;height:46px;padding:0;border-radius:9.5px;border:1px solid rgba(20,24,21,.16);background:var(--paper);color:var(--ink);cursor:pointer;box-shadow:0 6px 18px rgba(10,13,11,.16)}
.fab-btn span{position:absolute;left:50%;top:50%;width:20px;height:2px;margin:-1px 0 0 -10px;border-radius:2px;background:currentColor;transition:transform .4s cubic-bezier(.68,-.55,.265,1.55)}
.fab-btn span:nth-child(1){transform:translateY(-7px)}
.fab-btn span:nth-child(3){transform:translateY(7px)}
@media(hover:hover){
  .fab:not(.is-open) .fab-btn:hover span:nth-child(1){transform:translateY(-9px)}
  .fab:not(.is-open) .fab-btn:hover span:nth-child(3){transform:translateY(9px)}
}
.fab.is-open .fab-btn span:nth-child(1){transform:rotate(45deg)}
.fab.is-open .fab-btn span:nth-child(2){transform:scaleX(0)}
.fab.is-open .fab-btn span:nth-child(3){transform:rotate(-45deg)}
.fab-panel{position:absolute;right:0;bottom:0;width:248px;padding:24px 24px 72px;background:var(--paper);color:var(--ink);border:1px solid rgba(20,24,21,.16);border-radius:14px;box-shadow:0 18px 50px rgba(10,13,11,.22);
  clip-path:inset(calc(100% - 46px) 0 0 calc(100% - 46px) round 9.5px);visibility:hidden;transition:clip-path .4s var(--ease),visibility 0s .4s}
.fab.is-open .fab-panel{clip-path:inset(0 round 14px);visibility:visible;transition:clip-path .4s var(--ease),visibility 0s}
.fab-panel nav{opacity:0;transition:opacity .2s}
.fab.is-open .fab-panel nav{opacity:1;transition:opacity .8s}
.fab-links,.fab-sub,.fab-social{list-style:none;margin:0;padding:0}
.fab-links li{overflow:hidden}
.fab-links a{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:42px;font-size:15px;text-transform:uppercase;transform:translateY(-101%);transition:transform .2s ease-in}
.fab.is-open .fab-links a{transform:none;transition:transform .5s var(--ease) calc(.2s + var(--i,0) * .05s)}
.fab-links a::before,.fab-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(20,24,21,.16)}
.fab-links a::after{background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.fab-links a:hover::after,.fab-links a:focus-visible::after{transform:scaleX(1)}
.fab-arr{display:inline-flex;overflow:hidden}
.fab-links a:hover .fab-arr svg{animation:arrSwap .7s var(--ease)}
@keyframes arrSwap{50%{transform:translateX(130%)}50.01%{transform:translateX(-130%)}}
.fab-sub{display:flex;gap:18px;margin-top:24px}
.fab-sub a{display:inline-flex;align-items:center;gap:6px;min-height:32px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid rgba(20,24,21,.2)}
.fab-ext svg{width:10px;height:10px;transform:rotate(-45deg)}
.fab-social{display:flex;gap:8px;margin-top:16px;margin-left:-10px}
.fab-social a{display:grid;place-items:center;width:40px;height:40px;transition:opacity .3s var(--ease)}
.fab-social a:hover{opacity:.6}
.fab-sub,.fab-social{opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s}
.fab.is-open .fab-sub,.fab.is-open .fab-social{opacity:1;transform:none;transition:opacity .5s .4s,transform .5s var(--ease) .4s}

/* ───────── 16. Responsive ───────── */
@media(max-width:1100px){
  .brand-grid img{height:20px}
  .brand-grid img[alt="VALLE"]{height:30px}
  .brand-grid img[alt="Real & Asociados"]{height:26px}
  .manifesto-body,.manifesto-close{grid-template-columns:4fr 8fr}
  .feature-grid{grid-template-columns:1fr;gap:var(--block-y)}
  .feature-aside{position:static}
  .feature-title{font-size:var(--fs-h2);line-height:1.05;letter-spacing:-.05em}
  .result-row{grid-template-columns:50px minmax(0,1fr) minmax(0,1fr);row-gap:10px}
  .result-detail{grid-column:3;justify-self:start;text-align:left}
  .result-what{grid-column:2/4;grid-row:2}
  /* Carrusel con scroll-snap: a sangre hasta el borde, con el gutter como padding y aire para el foco. */
  .capability-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(72vw,320px);gap:14px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);margin:-8px calc(var(--gutter)*-1);padding:8px var(--gutter);scrollbar-width:none}
  .capability-grid::-webkit-scrollbar{display:none}
  .capability-wrap{scroll-snap-align:start}
  .project.capability{border-radius:14px}
  .capability-title{font-size:30px}
  .service-row{grid-template-columns:40px 1fr 1.05fr;gap:24px}
    .services-cta{margin-left:calc(40px + 24px)}
}
@media(max-width:800px){
  .fab{right:12px;bottom:12px}
  .fab-btn,.fab-wa{width:48px;height:48px}
  .fab-panel{width:min(264px,calc(100vw - 24px));clip-path:inset(calc(100% - 48px) 0 0 calc(100% - 48px) round 9.5px)}
  .fab-links a{font-size:16px}
  .split-ready #hero-title .hr-1 .hr-in{--rx:6vw}
  .split-ready #hero-title .hr-2 .hr-in{--rx:-6vw}
  .navrow{grid-template-columns:minmax(0,1fr) auto;padding-inline:18px;gap:16px}
  .nav-menu{display:none}
  .nav-actions{grid-column:2;gap:14px}
  .nav-link{font-size:12px}
  .nav-dot{display:none}
  .hero{min-height:100svh}
  .hero-inner{padding-top:96px}
  .hero-wash{background:
    linear-gradient(90deg,rgba(4,14,9,.80),rgba(4,14,9,.70)),
    linear-gradient(0deg,rgba(5,17,10,.92) 0%,transparent 50%)}
  .hero h1 .hr-2{padding-left:14vw}
  .brands-inner{grid-template-columns:1fr;gap:22px}
  .brand-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brand-grid li{height:84px}
  .section-top{grid-template-columns:1fr;gap:24px}
  .section-aside{justify-self:start}
  .br-desk{display:none}
  .manifesto-body{grid-template-columns:1fr;gap:24px;margin-top:32px}
  .pillars{grid-template-columns:1fr;gap:36px}
  .manifesto-close{grid-template-columns:1fr}
  .manifesto-close .manifesto-copy{grid-column:1}
  .result-row{grid-template-columns:30px minmax(0,1fr);gap:8px 14px}
  .result-what,.result-detail{grid-column:2;grid-row:auto}
  .result-detail{justify-self:start;text-align:left}
  .services-top{grid-template-columns:1fr;gap:24px}
  .service-row{grid-template-columns:25px 1fr;gap:18px}
  .service-detail{grid-column:2}
    .services-cta{margin-left:0}
  .faq{grid-template-columns:1fr;gap:40px}
  .faq-lead{position:static}
  .cta-grid{grid-template-columns:1fr;gap:28px;align-items:start}
  .contact-grid{grid-template-columns:1fr;gap:56px}
  .contact-steps{position:static}
  .contact-col{order:-1}
  .academy-grid{grid-template-columns:1fr;gap:40px}
  .footer-cols{grid-template-columns:1fr 1fr;row-gap:40px}
}
@media(max-width:600px){
  .work-grid{grid-template-columns:1fr;gap:16px}
}
@media(max-width:500px){
  .hero .hero-eyebrow{align-items:flex-start;letter-spacing:.1em}
  .hero-eyebrow:before{margin-top:.45em}
  .hero-buttons{flex-direction:column;margin-top:28px}
  .hero-buttons .btn{width:100%}
  .label{letter-spacing:.1em}
  .form-row{grid-template-columns:1fr;gap:0}
  .form-end{flex-direction:column;align-items:flex-start;gap:16px}
  .footer-cols{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .privacy-dialog{padding:25px}
  .privacy-dialog p{font-size:13px}
}

/* ───────── 17. Reducir movimiento ─────────
   Sin bloque propio: por decisión del estudio la home se mueve igual con "Reducir movimiento" (cursor, videos y revelados).
   La salida para medir es ?nomotion=1. Ver movimiento-home-v2.md, punto 6.6. */