/* ============================================================
   PERCEPTA LAB — sistema replicado 1:1 de drowningdot.com
   Fuente de verdad: base de datos/drowningdot/analisis.txt
   Tokens, ease, timing y estructura son del teardown.
   Color de marca, tipografía y contenido son de Percepta Lab.
   ============================================================ */

/* Display: Nohemi — geométrica redonda de la biblioteca de fuentes (006).
   Cumple el brief de la clienta (redonda / geométrica tipo Poppins-Montserrat)
   y tiene minúsculas reales + set completo de pesos. */
@font-face{font-family:'Nohemi';src:url(fonts/nohemi-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Nohemi';src:url(fonts/nohemi-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Nohemi';src:url(fonts/nohemi-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Nohemi';src:url(fonts/nohemi-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Cabinet Grotesk';src:url(fonts/cabinet-regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cabinet Grotesk';src:url(fonts/cabinet-medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Cabinet Grotesk';src:url(fonts/cabinet-bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Disket Mono';src:url(fonts/disket-mono-regular.ttf) format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Disket Mono';src:url(fonts/disket-mono-bold.ttf) format('truetype');font-weight:700;font-style:normal;font-display:swap}
/* Geist Mono (OFL) — solo para las texturas ASCII de portadas (mismo trazo delgado que contentarchitecture.dev) */
@font-face{font-family:'Geist Mono ASCII';src:url(fonts/geist-mono-regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* texto solo para Google y lectores de pantalla (p. ej. el H1 de la portada, que visualmente es el isologo) */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

:root{
  --ink:#0B0A0C;                 /* fondo base — casi negro, ligero tinte frío */
  --paper:#EDEAEF;               /* texto principal claro */
  --muted:#8B8790;               /* texto secundario sobre --ink */
  --muted-on-light:#635F68;      /* texto secundario sobre banda clara */
  --brand:#E400B9;                /* magenta de marca — gráficos Y texto (contraste ~4.6:1 sobre --ink) */
  --brand-soft:rgba(228,0,185,.14);
  --rule:rgba(237,234,239,.14);
  --rule-ink:rgba(11,10,12,.14);
  --dot:3px;
  --grain-scale:128px;
  --chrome:13px;
  --gap:26px;
  --band:clamp(72px,9vw,132px);
  --label-col:150px;
  --max:1480px;
  --isologo-w:clamp(460px,104vmin,1200px);
  --isologo-halo:drop-shadow(0 6px 34px rgba(0,0,0,.55)) drop-shadow(0 0 90px rgba(0,0,0,.35));
  --ease:cubic-bezier(.2,.7,.2,1);
  --rev-ease:cubic-bezier(.25,1,.5,1);   /* easeOutQuart — revelado de texto tipo neutomni */
  --font-display:'Nohemi',-apple-system,'Segoe UI',sans-serif;
  --font-body:'Cabinet Grotesk',-apple-system,sans-serif;
  --font-mono:'Disket Mono',monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.js [data-reveal]{opacity:0;transform:translateY(16px)}
html.js [data-reveal].shown{opacity:1;transform:none;transition:opacity .7s var(--rev-ease),transform .7s var(--rev-ease)}
html.js [data-stagger]>*{transform:translateY(20px);transition:transform .66s var(--rev-ease);transition-delay:calc(var(--i,0) * 70ms)}
html.js [data-stagger].shown>*{transform:none}
html.js [data-stagger-fade]>*{opacity:0;transform:translateY(20px);transition:opacity .66s var(--rev-ease),transform .66s var(--rev-ease);transition-delay:calc(var(--i,0) * 70ms)}
html.js [data-stagger-fade].shown>*{opacity:1;transform:none}

/* revelado de texto por líneas (js/site.js parte los títulos de texto plano) —
   fade + subida suave por línea, sin recorte (como neutomni: opacity 0, y:15) */
html.js [data-lines] .ln{display:block}
html.js [data-lines] .ln-in{display:inline-block;opacity:0;transform:translateY(.42em);
  transition:opacity .6s var(--rev-ease),transform .6s var(--rev-ease);
  transition-delay:calc(var(--li,0) * 95ms)}
html.js [data-lines].shown .ln-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js [data-lines] .ln-in{opacity:1;transform:none;transition:none}
}

/* red de seguridad: nada que entre animado desde un lado puede hacer que
   la página se mueva horizontalmente (clip, no hidden: no rompe sticky) */
html{overflow-x:clip}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--font-body);font-size:16px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--brand);color:var(--ink)}

.skip{position:absolute;left:-9999px;top:0;background:var(--paper);color:var(--ink);padding:10px 16px;z-index:999}
.skip:focus{left:16px;top:16px}

/* grano de película — steps(1), CSS puro, no JS */
.grain{position:fixed;inset:-30%;width:160%;height:160%;z-index:400;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:var(--grain-scale) var(--grain-scale);
  opacity:.42;mix-blend-mode:overlay;
  animation:grain-steps 1.1s steps(9) infinite;
}
@keyframes grain-steps{
  0%{transform:translate(0,0)}11%{transform:translate(-2%,2%)}22%{transform:translate(2%,-1%)}
  33%{transform:translate(-1%,-2%)}44%{transform:translate(2%,2%)}55%{transform:translate(-2%,1%)}
  66%{transform:translate(1%,-2%)}77%{transform:translate(-2%,-1%)}88%{transform:translate(1%,2%)}100%{transform:translate(0,0)}
}

/* ---------- INTRO — construcción áurea → espiral Fibonacci → isologo ---------- */
/* la disolución del negro la conduce intro.js frame a frame (easeInOut sobre
   el mismo timeline determinista); .is-out queda solo como red de seguridad
   para el cierre rápido de "Saltar intro" y reduced-motion. */
#intro{position:fixed;inset:0;z-index:999;overflow:hidden;
  background:var(--ink);
  opacity:1;
  contain:strict;will-change:opacity}
#intro.is-out{opacity:0;pointer-events:none;transition:opacity .25s ease}
#intro-fx{position:absolute;inset:0;width:100%;height:100%;display:block}
#intro-logo{position:absolute;left:50%;top:50%;
  width:var(--isologo-w);height:auto;
  transform:translate(-50%,-50%);
  filter:var(--isologo-halo);
  opacity:0;will-change:opacity,transform}
#intro-skip{position:absolute;right:20px;bottom:16px;z-index:2;
  font:400 11px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;
  color:#5c5c5c;background:none;border:0;cursor:pointer;padding:8px;transition:color .25s}
#intro-skip:hover{color:#c9c9c9}
@media (prefers-reduced-motion:reduce){#intro-skip{display:none}}

/* nav y tagline esperan a que termine la intro */
body.intro-active{overflow:hidden}
body.intro-active .nav{opacity:0;pointer-events:none}
body.intro-active .pleat .tagline,
body.intro-active .pleat .hero-cta{opacity:0}
/* durante la intro se apagan capas caras (blend full-screen + WebGL oculto) */
body.intro-active .grain{opacity:0}
.grain{transition:opacity .6s ease .2s}
.pleat .tagline{transition:opacity .8s ease .2s}

/* ---------- nav — solo en hero + al hacer scroll hacia arriba ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:300;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--gap);
  background:transparent;border-bottom:1px solid transparent;
  transition:transform .55s var(--ease),background .35s ease,border-color .35s ease,opacity .6s ease .1s;
  transform:translateY(0)}
/* fuera del hero, al reaparecer, gana fondo para leerse sobre el contenido */
.nav.is-solid{background:rgba(11,10,12,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--rule)}
/* oculto: se va hacia arriba */
.nav.is-hidden{transform:translateY(-102%)}
/* con el índice abierto, el nav va por encima del overlay */
.nav.nav--menu-open{z-index:360;background:transparent;border-bottom-color:transparent}

.nav-logo{display:flex;align-items:center;line-height:0;overflow:visible}
.nav-logo img{height:clamp(40px,4.4vw,54px);width:auto;display:block;
  transition:opacity .2s var(--ease),transform .3s var(--ease)}
.nav-logo:hover img{opacity:.78;transform:scale(1.06)}

.nav-toggle{display:inline-flex;align-items:center;gap:12px;
  background:none;border:0;cursor:pointer;padding:8px 0;color:var(--paper);
  font:500 var(--chrome)/1 var(--font-mono);text-transform:uppercase;letter-spacing:.14em;
  transition:color .2s var(--ease)}
.nav-toggle:hover{color:var(--brand)}
.nav-toggle-bars{position:relative;width:26px;height:9px;flex:0 0 auto}
.nav-toggle-bars i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;
  transition:transform .32s var(--ease),top .32s var(--ease),opacity .2s}
.nav-toggle-bars i:first-child{top:0}
.nav-toggle-bars i:last-child{top:7.5px}
.nav--menu-open .nav-toggle-bars i:first-child{top:4px;transform:rotate(45deg)}
.nav--menu-open .nav-toggle-bars i:last-child{top:4px;transform:rotate(-45deg)}

/* ---------- páginas internas (casos, The Dose): logo + botón Volver ----------
   Antes eran links sin estilo: el "← All work" casi no se veía. Ahora
   Volver es una píldora siempre visible arriba a la derecha (44px de alto,
   cómodo para el dedo) y la barra gana fondo al bajar (ver return.js). */
.mark{display:inline-flex;align-items:center;gap:9px;color:var(--paper);text-decoration:none;
  font:500 15px/1 var(--font-display);letter-spacing:-.01em}
.mark .dot{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px rgba(228,0,185,.7)}
.nav-back{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  border:1px solid rgba(237,234,239,.28);border-radius:999px;
  background:rgba(11,10,12,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--paper);text-decoration:none;
  font:500 var(--chrome)/1 var(--font-mono);text-transform:uppercase;letter-spacing:.12em;
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease)}
.nav-back-arrow{display:inline-block;margin-right:10px;font-family:var(--font-body);letter-spacing:0;
  transition:transform .3s var(--ease)}
.nav-back:hover,.nav-back:focus-visible{border-color:var(--brand);color:var(--brand);background:rgba(228,0,185,.08)}
.nav-back:hover .nav-back-arrow{transform:translateX(-4px)}
@media (max-width:560px){
  .nav-back-ctx{display:none}
  .nav-back{padding:0 16px}
}

/* ---------- nav-index — overlay minimalista, tipografía grande (estilo khanhnguyen) ---------- */
.nav-index{position:fixed;inset:0;z-index:350;background:var(--ink);
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease);
  display:flex;overflow-y:auto;overscroll-behavior:contain}
.nav-index::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 100% 0%,rgba(228,0,185,.12),transparent 55%)}
.nav-index.is-open{opacity:1;pointer-events:auto}
.nav-index-inner{position:relative;width:100%;max-width:var(--max);margin:0 auto;
  min-height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:clamp(110px,15vh,168px) var(--gap) clamp(24px,4vh,44px)}
@media (max-height:820px){.nav-index-inner{justify-content:flex-start}}

.nav-index-list{list-style:none;margin:0;padding:0}
.nav-index-list li{overflow:hidden;
  opacity:0;transform:translateY(30px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.nav-index.is-open .nav-index-list li{opacity:1;transform:none}
.nav-index.is-open .nav-index-list li:nth-child(1){transition-delay:.08s}
.nav-index.is-open .nav-index-list li:nth-child(2){transition-delay:.12s}
.nav-index.is-open .nav-index-list li:nth-child(3){transition-delay:.16s}
.nav-index.is-open .nav-index-list li:nth-child(4){transition-delay:.20s}
.nav-index.is-open .nav-index-list li:nth-child(5){transition-delay:.24s}
.nav-index.is-open .nav-index-list li:nth-child(6){transition-delay:.28s}
.nav-index.is-open .nav-index-list li:nth-child(7){transition-delay:.32s}

.nav-index-list a{display:flex;align-items:baseline;gap:clamp(14px,2vw,32px);
  padding:clamp(1px,.45vh,7px) 0;color:rgba(237,234,239,.34);
  transition:color .28s var(--ease)}
.nav-index-list a:hover,.nav-index-list a:focus-visible{color:var(--paper)}
.ni-num{flex:0 0 auto;font:400 clamp(12px,1.2vw,16px)/1 var(--font-mono);color:rgba(237,234,239,.28);
  transition:color .28s var(--ease)}
.nav-index-list a:hover .ni-num{color:var(--brand)}
.ni-name{font:400 clamp(28px,4.7vw,70px)/1.04 var(--font-display);letter-spacing:-0.01em;color:inherit}

.nav-index-social{margin-top:clamp(24px,4vh,52px);align-self:flex-start;
  display:flex;flex-wrap:wrap;gap:6px 26px;
  font:400 13px/1.4 var(--font-mono);color:rgba(237,234,239,.42);
  text-transform:uppercase;letter-spacing:.08em;
  opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.nav-index.is-open .nav-index-social{opacity:1;transform:none;transition-delay:.46s}
.nav-index-social a{transition:color .25s var(--ease)}
.nav-index-social a:hover{color:var(--brand)}

@media (max-width:820px){
  .nav-index-inner{justify-content:flex-start;padding-top:clamp(96px,14vh,140px)}
}
@media (prefers-reduced-motion:reduce){
  .nav-index-list li,.nav-index-social{opacity:1;transform:none;transition:none}
}

main{display:block}

/* ---------- HERO (Auralis WebGL + isologo) ---------- */
.pleat{position:relative;height:100vh;min-height:560px;overflow:hidden;background:var(--ink)}
.pleat canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#auralis-canvas{z-index:1}
.pleat .wordmark{position:absolute;inset:0;z-index:2;display:flex;
  align-items:center;justify-content:center;pointer-events:none}
.pleat .wordmark .isologo{
  width:var(--isologo-w);height:auto;
  filter:var(--isologo-halo)}
.pleat .tagline{position:absolute;left:var(--gap);bottom:calc(var(--gap) + 52px);z-index:2;
  max-width:520px;font:400 clamp(16px,1.7vw,20px)/1.4 var(--font-body);color:var(--muted)}
.pleat .hero-cta{position:absolute;left:var(--gap);bottom:calc(var(--gap) + 4px);z-index:2;
  display:inline-flex;align-items:center;gap:8px;padding:11px 18px;
  font:500 var(--chrome)/1 var(--font-mono);text-transform:uppercase;letter-spacing:.06em;
  color:var(--paper);border:1px solid var(--rule);border-radius:2px;
  transition:border-color .25s var(--ease),color .25s var(--ease),opacity .8s ease .2s}
.pleat .hero-cta:hover{border-color:var(--brand);color:var(--brand)}
@media (max-width:720px){
  .pleat .wordmark{align-items:center}
  :root{--isologo-w:min(94vw,560px)}
}

/* ---------- bandas genéricas ---------- */
.band{padding:var(--band) var(--gap);max-width:var(--max);margin:0 auto}
.band-head{display:flex;flex-direction:column;gap:14px;margin-bottom:calc(var(--band) * .55)}
.band-head h2{font:400 clamp(30px,3.7vw,54px)/1.06 var(--font-display);letter-spacing:0;margin:0;max-width:16ch}
.band-head p{font:400 17px/1.6 var(--font-body);color:var(--muted);max-width:46ch;margin:0}
.eyebrow{font:500 var(--chrome)/1 var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--brand)}

/* ---------- ABOUT — texto a la izquierda + ojo grande a la derecha ---------- */
#about{position:relative;overflow:clip}
/* atmósfera: halo magenta amplio detrás del ojo */
#about::after{content:"";position:absolute;z-index:0;pointer-events:none;
  right:-6%;top:50%;width:min(820px,58%);aspect-ratio:1;transform:translateY(-50%);
  background:radial-gradient(closest-side,rgba(228,0,185,.08),rgba(228,0,185,.025) 52%,transparent 78%)}
#about .about-grid{position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,1fr);
  gap:clamp(20px,4vw,64px);align-items:center}
#about .band-head{display:block;margin-bottom:0;text-align:left}
#about .eyebrow{display:block;margin-bottom:clamp(16px,2vw,26px)}
/* h2 vuelve al tamaño estándar de .band-head (el mismo que usan Process,
   Work, Dose, FAQ...) en vez de un tamaño propio -- se pidió "un tamaño
   que ya hayamos usado en la web" en vez de uno inflado a 60px. El ojo
   nuevo es más vertical (más angosto), así que sobra ancho: max-width
   sube para que el texto se extienda más horizontal, no más alto. */
#about .band-head h2{
  max-width:33ch;margin:0;text-wrap:balance;
  font:400 clamp(30px,3.7vw,54px)/1.06 var(--font-display);
  letter-spacing:-0.025em}
/* el .band-head de #about es display:block (no flex) -> el gap no aplica:
   la separación de los párrafos va por margin. Reusa el tamaño/color ya
   establecido en #process .band-head p (clamp 16-19px, --paper) en vez
   del cuerpo de texto default (17px, --muted) -- ese default se sentía
   demasiado chico junto al h2. */
#about .band-head p{margin:clamp(16px,1.8vw,24px) 0 0;max-width:64ch;
  font-size:clamp(16px,1.5vw,19px);color:var(--paper)}

/* ---- el ojo: grande, centrado en su columna, respirando ----
   ASCII art de verdad: js/eye-canvas.js dibuja cada carácter del arte
   (.eye-ascii-data, un <script type="text/plain"> inerte) como texto en
   magenta sobre <canvas>. El '@' del arte es el papel y no se pinta, así
   que el fondo queda libre y solo se ve el trazo -- sin máscara ni óvalo. */
.eye-wrap{justify-self:center;position:relative;overflow:hidden;
  width:clamp(300px,38vw,600px);
  height:clamp(420px,min(52vw,88vh),800px);
  animation:eyeBreathe 12s ease-in-out infinite}
.eye-canvas{position:absolute;left:0;top:0;display:block;
  width:100%;height:100%;user-select:none;pointer-events:none}
@keyframes eyeBreathe{
  0%,100%{transform:scale(1) translateY(0)}
  50%{transform:scale(1.04) translateY(-7px)}
}
@media (prefers-reduced-motion:reduce){.eye-wrap{animation:none}}
@media (max-width:820px){
  #about::after{right:auto;left:50%;top:auto;bottom:-4%;width:min(560px,110%);
    transform:translateX(-50%)}
  #about .about-grid{grid-template-columns:1fr;gap:clamp(26px,8vw,44px)}
  #about .band-head h2{max-width:none;font-size:clamp(28px,8.4vw,46px)}
  #about .band-head p{max-width:none}
  .eye-wrap{justify-self:center;
    width:clamp(220px,66vw,340px);height:clamp(294px,88.1vw,454px)}
}

/* ---------- WORK — grid tipográfico, 8 proyectos ---------- */
.work-row{display:block;padding:26px 0;border-top:1px solid var(--rule);opacity:.72;
  transition:opacity .26s var(--ease);position:relative}
.work-row:last-child{border-bottom:1px solid var(--rule)}
.work-row:hover,.work-row:focus-visible{opacity:1}
.work-row::before{content:"";position:absolute;inset:-4px -8px;z-index:-1;pointer-events:none;
  background-image:radial-gradient(var(--brand) 1.2px,transparent 1.2px);background-size:4px 4px;
  opacity:0;transition:opacity .3s var(--ease);animation-play-state:paused}
.work-row:hover::before{opacity:.16;animation:drift 3.4s linear infinite}
@keyframes drift{from{background-position:0 0}to{background-position:24px 24px}}
.work-row .row-inner{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px}
.work-row .name{font:400 clamp(30px,4.8vw,72px)/1.04 var(--font-display);letter-spacing:0;color:inherit}
.work-row .meta{text-align:right;font:400 var(--chrome)/1.4 var(--font-mono);color:inherit}
.work-row .meta .client{display:block;color:var(--muted)}
.work-row.is-link .name::after{content:" →";color:var(--brand);opacity:0;transition:opacity .2s var(--ease)}
.work-row.is-link:hover .name::after{opacity:1}

/* ---------- WORK — "THE ARCHIVE": expedientes en carpetas zigzag ----------
   Cada proyecto es una carpeta apilada; la pestaña sobresale a izq/der
   alternada (zigzag) y lleva el nombre del caso. Al pasar el cursor —o al
   centrarse en el viewport en táctil— la carpeta se abre y sale su "nota"
   con el preview del trabajo. Vibra tech/2000s: puntos, marcos HUD,
   tipografía mono, esquinas chaflán. Interacción en js/archive.js. */
#work{position:relative;overflow-x:clip} /* las carpetas entran en zigzag desde ±28px: sin clip, en móvil se salían de la pantalla antes de aparecer */
.archive{position:relative;z-index:1;margin-top:clamp(28px,4vw,56px)}

.arc-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--rule);
  font:500 var(--chrome)/1 var(--font-mono);text-transform:uppercase;letter-spacing:.14em}
.arc-head-k{color:var(--brand)}
.arc-head-t{color:var(--paper)}
.arc-head-n{margin-left:auto;color:var(--muted);letter-spacing:.1em}

.arc-group{margin-top:clamp(34px,5vw,60px)}
.arc-g-label{display:flex;align-items:baseline;gap:12px;margin-bottom:clamp(26px,3.4vw,44px);
  font:500 var(--chrome)/1 var(--font-mono);text-transform:uppercase;letter-spacing:.16em}
.arc-g-label span:first-child{color:var(--paper)}
.arc-g-n{color:var(--muted)}
.arc-group--personal .arc-g-label{position:relative;padding-bottom:12px}
.arc-group--personal .arc-g-label span:first-child,
.arc-group--personal .arc-g-n{color:var(--brand)}
.arc-group--personal .arc-g-label::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--brand),transparent 55%)}

.arc-stack{display:flex;flex-direction:column;padding-top:20px}

/* ---- carpeta: panel técnico oscuro — pestaña redondeada + cuerpo del
   MISMO fondo (grafito casi negro, borde magenta translúcido), apilados
   con solape (como carpetas reales en un cajón) y una foto asomando
   detrás de cada una. Reusa el lenguaje del Case Board (cb-note): sin
   color por marca — todas las carpetas son iguales. Sin silueta de
   clip-path: dos bloques que se superponen 2px = sin costura. */
.arc-stack .folder{margin-top:-14px}
.arc-stack .folder:first-child{margin-top:0}

.folder{position:relative;display:block;
  width:min(100%,78%);align-self:flex-start;
  --tabH:48px;--fold:12px;
  z-index:1;
  transition:opacity .5s var(--rev-ease),transform .5s var(--rev-ease)}
html.js .folder{opacity:0}
html.js .folder[data-side="l"]{transform:translateX(-28px)}
html.js .folder[data-side="r"]{transform:translateX(28px)}
html.js .folder.fd-in{opacity:1;transform:none}
html.js .folder--personal.fd-in{opacity:.88}
.folder.is-open{z-index:8}

.fd-card{position:relative;z-index:1;display:block;
  transform:rotate(-.5deg);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),filter .35s var(--ease);
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(228,0,185,.1))}
.folder[data-side="r"] .fd-card{transform:rotate(.5deg)}
.folder.is-open .fd-card{transform:translateY(-13px) rotate(0deg);
  filter:brightness(1.06) drop-shadow(0 28px 36px rgba(0,0,0,.65)) drop-shadow(0 0 26px rgba(228,0,185,.22))}
/* barrido de escaneo — una sola pasada al abrir, no en loop */
.fd-card::after{content:"";position:absolute;left:0;right:0;top:0;height:100%;z-index:5;
  background:linear-gradient(90deg,transparent,var(--brand),transparent) top/100% 2px no-repeat;
  opacity:0;pointer-events:none}
.folder.is-open .fd-card::after{animation:fdScan .85s cubic-bezier(.3,.7,.3,1) 1}
/* con transform (no con top): la línea baja sin recalcular posiciones */
@keyframes fdScan{
  0%{transform:translateY(0);opacity:0}
  8%{opacity:.9}
  85%{opacity:.45}
  100%{transform:translateY(100%);opacity:0}
}

/* pestaña — redondeada, se mete 2px en el cuerpo (mismo color = sin costura).
   Ancho = ancho del nombre del proyecto (fit-content), no un valor fijo: el
   texto manda, la pestaña se adapta a él — nunca al revés — así el nombre
   nunca se recorta con "...". max-width sólo como último recurso. */
.fd-tab{position:relative;z-index:2;display:flex;align-items:center;gap:11px;
  width:fit-content;max-width:94%;height:calc(var(--tabH) + 2px);margin-bottom:-2px;
  padding:0 clamp(16px,2vw,22px);box-sizing:border-box;
  background:#151319;border:1px solid rgba(228,0,185,.4);border-bottom:none;
  border-radius:11px 11px 0 0}
.folder[data-side="r"] .fd-tab{margin-left:auto;justify-content:flex-end}
.fd-code{font:400 11px/1 var(--font-mono);letter-spacing:.1em;color:var(--brand);flex:none}
.fd-name{font:normal 500 clamp(19px,2.5vw,29px)/1 var(--font-display);letter-spacing:-.01em;color:var(--paper);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* cuerpo — mismo tono; textura de papel + pliegue abajo */
.fd-body{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:clamp(54px,5.8vw,76px);overflow:hidden;
  padding:0 clamp(16px,2.2vw,28px) var(--fold);box-sizing:border-box;
  background:#151319;border:1px solid rgba(228,0,185,.4);border-top:none;
  border-radius:0 12px 12px 12px;transition:border-color .3s var(--ease);
  background-image:
    radial-gradient(120% 70% at 14% 0%,rgba(228,0,185,.1),transparent 60%),
    repeating-linear-gradient(4deg,rgba(237,234,239,.03) 0 1px,transparent 1px 3px)}
.folder[data-side="r"] .fd-body{border-radius:12px 0 12px 12px}
/* halftone de puntos magenta — el mismo lenguaje del Case Board (cb-note):
   panel oscuro "escaneado" al sistema, no papel de color */
.fd-body::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.16;background-image:radial-gradient(rgba(228,0,185,.8) 1px,transparent 1px);
  background-size:7px 7px}
.fd-body::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--fold);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.3));
  opacity:1;transition:opacity .3s var(--ease)}
/* abierta: sin pliegue en la costura — el lomo y la nota son el mismo
   panel continuando, no debe leerse una línea/hueco entre ambos */
.folder.is-open .fd-body::after{opacity:0}
.fd-meta{position:relative;z-index:1;font:500 var(--chrome)/1.3 var(--font-mono);
  letter-spacing:.05em;color:rgba(237,234,239,.56);text-transform:uppercase}
.fd-tag{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.fd-stamp{font:400 9px/1 var(--font-mono);letter-spacing:.18em;
  text-transform:uppercase;color:rgba(237,234,239,.3);white-space:nowrap}
.fd-hash{font:400 9px/1 var(--font-mono);letter-spacing:.1em;color:var(--brand);opacity:.7;white-space:nowrap}
.fd-hash::before{content:"◆ "}

/* nota / preview que sale al abrir — MISMA carpeta, no una caja aparte:
   .fd-note-box sigue siendo el mismo panel oscuro de la carpeta (la portada
   que se extiende hacia abajo) y el texto se trata como una anotación
   escrita a mano encima — itálica, con un subrayado garabateado bajo "Ver
   caso". */
/* revelado por grid-template-rows (0fr → 1fr) en vez de max-height: se
   ajusta exacto al alto real del contenido en cualquier breakpoint (nada
   de un tope en px que deja un tramo "muerto" al final de la animación,
   que es lo que hacía sentir el despliegue tosco/con tranco) y además es
   más barato de recalcular para el navegador que una altura animada. */
.fd-note{display:grid;grid-template-rows:0fr;overflow:hidden;
  transition:grid-template-rows .5s var(--ease)}
/* el padding y el borde verticales de .fd-note-box no se encogen solos
   con min-height:0 (el padding no es "altura") -- por eso antes se
   quedaba trabada a medio cerrar, en ~42px (justo sus 20+22px de
   padding). Se animan aparte, junto con la fila del grid, para que sí
   llegue a cero de verdad. El padding horizontal no participa: se deja
   fijo para que el ancho de la tarjeta no "respire" durante la animación. */
.fd-note-box{min-height:0;overflow:hidden;
  position:relative;display:flex;gap:clamp(16px,2.4vw,28px);align-items:flex-start;
  padding-inline:clamp(18px,2.6vw,30px);
  padding-block:0;
  border-inline:1px solid rgba(228,0,185,.4);border-block:0 solid rgba(228,0,185,.4);
  transition:padding-block .5s var(--ease),border-block-width .5s var(--ease);
  background:#151319;border-radius:0 0 12px 12px;
  background-image:
    radial-gradient(110% 60% at 85% 100%,rgba(228,0,185,.09),transparent 60%),
    repeating-linear-gradient(4deg,rgba(237,234,239,.026) 0 1px,transparent 1px 3px)}
.folder.is-open .fd-note-box{padding-block:20px 22px;border-block-width:0 1px}
/* corchetes HUD — la anotación leída como expediente escaneado */
.fd-note-box::before,.fd-note-box::after{content:"";position:absolute;width:12px;height:12px;
  border:1.4px solid var(--brand);opacity:.7;pointer-events:none}
.fd-note-box::before{left:7px;top:7px;border-right:0;border-bottom:0}
.fd-note-box::after{right:7px;top:7px;border-left:0;border-bottom:0}
.fd-thumb{flex:none;width:clamp(84px,10.5vw,124px);aspect-ratio:4/5;position:relative;overflow:hidden;
  background:var(--ink);box-shadow:0 8px 16px rgba(0,0,0,.5);border:1px solid rgba(228,0,185,.25);
  transform:rotate(-3deg);transition:transform .45s var(--ease)}
.fd-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.fd-thumb .fd-ascii{position:absolute;inset:0;width:100%;height:100%;display:block;
  background:var(--ink);transition:opacity .5s ease-out}
.fd-thumb:hover .fd-ascii{opacity:0}
.fd-thumb.fd-thumb--empty{display:flex;align-items:center;justify-content:center;padding:10px;
  text-align:center;background:var(--brand);
  font:400 12px/1.15 var(--font-display);color:var(--ink)}
/* cinta que "pega" la foto a la anotación */
.fd-thumb::before{content:"";position:absolute;left:50%;top:-7px;width:36px;height:15px;z-index:1;
  background:rgba(237,234,239,.5);transform:translateX(-50%) rotate(-3deg);
  box-shadow:0 1px 3px rgba(0,0,0,.3)}
.fd-note-txt{display:flex;flex-direction:column;gap:9px;padding-top:2px;min-width:0;
  transform:none}
.fd-note-k{font:400 10px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:rgba(237,234,239,.42)}
/* misma familia y estilo recto que el título de la marca (.fd-name), peso regular — pedido de la clienta */
.fd-note-t{font:normal 400 clamp(17px,1.9vw,23px)/1.4 var(--font-display);letter-spacing:-.005em;
  color:var(--paper);max-width:46ch}
.fd-note-cta{display:inline-block;width:fit-content;
  font:500 var(--chrome)/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--brand);
  padding-bottom:2px}
.fd-note-cta i{font-style:normal;display:inline-block;transition:transform .3s var(--ease)}

/* ---- estado abierto: la carpeta se levanta del cajón (transform en el
   bloque de .fd-card de arriba); el lomo pierde el redondeo de abajo para
   que la anotación se sienta la misma pieza de papel continuando. ---- */
.folder.is-open .fd-body{border-radius:0 12px 0 0;border-bottom-color:transparent}
.folder[data-side="r"].is-open .fd-body{border-radius:12px 0 0 0}
.folder.is-open .fd-note{grid-template-rows:1fr}
.folder.is-open .fd-note-cta i{transform:translateX(5px)}
.folder.is-open .fd-thumb{transform:rotate(0)}
/* atenuación: el panel ya es casi negro sobre fondo negro — con la
   opacidad baja original (pensada para el papel de color) se volvía
   invisible. Números más altos para que siga leyéndose apagada. */
.archive.is-hot .folder:not(.is-open){opacity:.6}
html.js .archive.is-hot .folder--personal:not(.is-open){opacity:.5}

@media (hover:hover) and (pointer:fine){ .folder{cursor:pointer} }

@media (max-width:900px){
  .folder{width:100%}
  .fd-stamp{display:none}
  .fd-note-box{flex-direction:column;gap:14px}
  .fd-thumb{width:clamp(96px,26vw,140px);transform:rotate(-2deg)}
}
/* táctil: se abren al tocarlas, con la MISMA animación que desktop (antes
   se aceleraba a .36s y se sentía brusca). Sin el recuadro gris que pone el
   navegador al tocar un link. .fd-instant = cerrar sin animación (al
   cambiar a otra carpeta, ver archive.js). */
@media (hover:none){
  .folder{-webkit-tap-highlight-color:transparent;cursor:pointer;will-change:transform}
  /* el drop-shadow doble de .fd-card envuelve la nota que se despliega:
     con él, el celular re-dibujaba la sombra difuminada de toda la carpeta
     en CADA cuadro de la animación (y animaba el filtro además) -> se
     sentía trabado. En táctil la sombra va con box-shadow en el lomo, que
     no cambia de tamaño al abrir, y el filtro no se toca. */
  .fd-card,.folder.is-open .fd-card{filter:none;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
  .fd-body{box-shadow:0 14px 24px rgba(0,0,0,.55),0 0 16px rgba(228,0,185,.1)}
  /* abierta: el lomo se continúa en la nota -> la sombra pasa a la nota
     (en el lomo caería encima de la nota) */
  .folder.is-open .fd-body{box-shadow:none}
  .folder.is-open .fd-note-box{box-shadow:0 18px 30px rgba(0,0,0,.6),0 0 22px rgba(228,0,185,.22)}
}
.folder.fd-instant,.folder.fd-instant *{transition:none!important;animation:none!important}
@media (max-width:560px){
  .folder{--tabH:40px}
  .fd-tab{padding:0 14px;gap:8px}
  .fd-body{padding:0 15px var(--fold)}
  .arc-head-n{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  html.js .folder{opacity:1;transform:none}
  html.js .folder--personal{opacity:.88}
  .folder,.fd-card,.fd-note,.fd-thumb{transition:none}
  .folder.is-open .fd-card::after{animation:none;opacity:0}
}

/* ---------- WHAT WE DO — grid compacto de celdas técnicas ----------
   Referencia de técnica: hydradb.com (paneles con hatch/grid, diagramas
   técnicos, tipografía mono, end-caps cuadrados). Color = magenta de marca.
   Cada panel alude a lo que dice el texto y tiene animación/interacción
   propia (js/services.js). Editorial y compacto: 2 columnas, divisores
   hairline, un panel bajo por servicio. */
/* bajada a lo ancho y más grande (pedido de la clienta) — también en Selected work */
#included .band-head p,#work .band-head p{max-width:none;
  font:400 clamp(18px,1.9vw,24px)/1.55 var(--font-body)}
.svc-grid{margin-top:clamp(40px,6vw,78px);
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.svc-cell{background:var(--ink);display:flex;flex-direction:column;
  padding:clamp(22px,2.6vw,36px)}
.svc-cell-head{display:flex;align-items:baseline;gap:14px}
.svc-cell-head .svc-n{font:500 12px/1 var(--font-mono);color:var(--brand);letter-spacing:.09em}
.svc-cell-head h3{margin:0;font:400 clamp(21px,2.3vw,31px)/1.05 var(--font-display);letter-spacing:-0.01em}
.svc-line{margin:12px 0 0;max-width:42ch;
  font:400 clamp(14px,1.15vw,15.5px)/1.55 var(--font-body);color:var(--muted)}

.svc-panel{position:relative;margin:clamp(18px,2.4vw,26px) 0 0;
  border:1px solid var(--rule);border-radius:2px;overflow:hidden;
  background:var(--ink);
  background-image:repeating-linear-gradient(-45deg,rgba(228,0,185,.085) 0 1px,transparent 1px 9px)}
.svc-canvas{display:block;width:100%;height:auto;aspect-ratio:20/9}
.svc-panel figcaption{position:absolute;left:12px;top:10px;z-index:2;pointer-events:none;
  font:400 10px/1 var(--font-mono);text-transform:uppercase;letter-spacing:.11em;color:var(--muted)}
.svc-panel::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 44px rgba(11,10,12,.6)}
/* end-caps cuadrados (guiño hydradb) */
.svc-panel::before{content:"";position:absolute;top:50%;left:-3.5px;z-index:3;
  width:6px;height:6px;background:var(--brand);transform:translateY(-50%)}
.svc-cell:nth-child(odd) .svc-panel{box-shadow:none}
.svc-cell:nth-child(even) .svc-panel::before{left:auto;right:-3.5px}

@media (max-width:760px){
  .svc-grid{grid-template-columns:1fr}
  .svc-canvas{aspect-ratio:16/9}
}

/* ---------- BRIDGE BANNER — arte ASCII a todo el encuadre + wordmark ---------- */
.bridge-banner{position:relative;margin:0 calc(var(--gap) * -1) 28px;overflow:hidden;background:var(--ink);
  display:flex;justify-content:center}
.bridge-art{flex:none;width:max-content;max-width:none;
  margin:clamp(18px,3vw,44px) 0 clamp(38px,7vw,92px);
  font:400 clamp(2.5px,.6vw,7.5px)/1.04 var(--font-mono);
  color:var(--paper);white-space:pre;user-select:none;pointer-events:none;
  text-shadow:0 0 8px rgba(237,234,239,.28),0 0 20px rgba(237,234,239,.12);
  -webkit-mask-image:radial-gradient(120% 120% at 50% 44%,#000 68%,rgba(0,0,0,.35) 90%,transparent 100%);
          mask-image:radial-gradient(120% 120% at 50% 44%,#000 68%,rgba(0,0,0,.35) 90%,transparent 100%)}
.bridge-banner::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(60% 70% at 50% 46%,rgba(11,10,12,.35),transparent 75%)}
/* BRIDGE — misma tipografía que "LET'S TALK" (Nohemi 400, tracking cerrado,
   caja); entra deslizándose desde la derecha al hacer scroll. Sin glow. */
.bridge-banner .bridge-word{position:absolute;left:50%;top:46%;z-index:2;margin:0;
  white-space:nowrap;pointer-events:none;
  font:400 clamp(64px,20vw,340px)/.86 var(--font-display);letter-spacing:-.025em;text-transform:uppercase;
  color:var(--brand);
  transform:translate(-50%,-50%) translateX(42vw);opacity:0;
  transition:transform 1.15s cubic-bezier(.16,1,.3,1),opacity .8s ease .05s}
html.js .bridge-banner.shown .bridge-word{transform:translate(-50%,-50%);opacity:1}
/* la bajada del método ahora vive en un band-head propio (protagonismo + legible) */
#process .band-head h2{max-width:20ch}
#faq .band-head h2{max-width:none} /* título de FAQ horizontal: una línea en pantallas grandes, dos en laptops */
#process .band-head p{max-width:56ch;font-size:clamp(16px,1.5vw,19px);color:var(--paper)}
#process .band-head p em{color:inherit;font-style:normal}
@media (max-width:720px){
  .bridge-art{font-size:clamp(1.6px,.9vw,3.4px);margin-bottom:clamp(28px,10vw,60px)}
}
@media (prefers-reduced-motion:reduce){
  .bridge-banner .bridge-word{transform:translate(-50%,-50%);opacity:1;transition:none}
}

/* ---------- PROCESS — BRIDGE como ruta GPS (scroll-scrubbed) ----------
   La lista de 6 pasos ahora es un mapa digital que se recorre: la cámara
   viaja de un waypoint al siguiente mientras el scroll avanza y cada punto
   despliega su carta con blur sobre el mapa. Canvas 2D en js/route.js. */
.route{position:relative;margin:clamp(14px,4vw,46px) calc(var(--gap) * -1) 0;
  height:520vh}
.route-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:var(--ink)}
.route-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* viñeta: funde los bordes del mapa y deja respirar al texto */
.route-sticky::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    radial-gradient(58% 74% at 22% 82%,rgba(11,10,12,.82),transparent 62%),
    linear-gradient(90deg,var(--ink),rgba(11,10,12,0) 15% 85%,var(--ink)),
    linear-gradient(0deg,rgba(11,10,12,.92),rgba(11,10,12,0) 36%),
    radial-gradient(130% 120% at 50% 44%,transparent 48%,rgba(11,10,12,.74))}

/* HUD — micro-tipografía mono con esquinas en corchete (guiño hydradb) */
.route-hud{position:absolute;inset:0;z-index:3;pointer-events:none}
.rh-corner{position:absolute;display:flex;flex-direction:column;gap:5px}
.rh-tl{left:clamp(18px,4vw,44px);top:clamp(74px,10vh,104px)}
.rh-tr{right:clamp(18px,4vw,44px);top:clamp(74px,10vh,104px);text-align:right}
.rh-lab{font:500 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rh-val{font:400 clamp(13px,1.4vw,16px)/1 var(--font-mono);letter-spacing:.06em;color:var(--paper)}
.rh-corner::before{content:"";position:absolute;width:9px;height:9px;top:-9px;
  border:1px solid var(--brand);border-bottom:0}
.rh-tl::before{left:-9px;border-right:0}
.rh-tr::before{right:-9px;border-left:0}
/* Carta de cada waypoint — blur + callout de instrumento */
.route-panels{position:absolute;z-index:4;
  left:clamp(18px,4vw,64px);bottom:clamp(96px,15vh,140px);width:min(452px,76vw)}
.route-panel{position:absolute;left:0;bottom:0;width:100%;
  padding:26px 28px 26px;border:1px solid var(--rule);
  background:rgba(11,10,12,.44);
  background-image:repeating-linear-gradient(-45deg,rgba(228,0,185,.06) 0 1px,transparent 1px 9px);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);
  opacity:0;transform:translateY(22px);clip-path:inset(0 100% 0 0);
  transition:opacity .45s var(--rev-ease),
    transform .6s cubic-bezier(.16,1,.3,1),
    clip-path .62s cubic-bezier(.16,1,.3,1)}
.route-panel.is-live{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
/* corchete magenta arriba-izquierda */
.route-panel::before{content:"";position:absolute;left:-1px;top:-1px;width:16px;height:16px;
  border:1px solid var(--brand);border-right:0;border-bottom:0}
/* número fantasma detrás del texto */
.route-panel::after{content:attr(data-n);position:absolute;right:16px;bottom:2px;z-index:0;
  font:400 clamp(64px,7.4vw,108px)/1 var(--font-display);letter-spacing:-.04em;
  color:rgba(228,0,185,.09);pointer-events:none}
.route-panel > *{position:relative;z-index:1}
.rp-coord{display:flex;align-items:center;gap:10px;
  font:400 10px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.rp-coord .rp-i{color:var(--brand);font-weight:700}
.rp-coord::after{content:"";width:6px;height:11px;background:var(--brand);
  animation:rpCaret 1.1s steps(1) infinite}
@keyframes rpCaret{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.rp-q{display:flex;align-items:center;gap:10px;margin:16px 0 8px;
  font:500 var(--chrome)/1 var(--font-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--brand)}
.rp-q::before{content:"";width:22px;height:1px;background:var(--brand)}
.route-panel h3{margin:0 0 12px;font:400 clamp(25px,3vw,40px)/1.04 var(--font-display);letter-spacing:-.015em}
.route-panel p{margin:0;font:400 clamp(14px,1.4vw,16.5px)/1.62 var(--font-body);color:#c0bcc5}

/* Barra de progreso con los 6 hitos */
.route-legend{position:absolute;z-index:4;pointer-events:auto;
  left:clamp(18px,4vw,64px);right:clamp(18px,4vw,64px);bottom:clamp(48px,8vh,72px);
  border-top:1px solid var(--rule);padding-top:14px}
.rl-track{list-style:none;margin:0;padding:0;display:flex;justify-content:space-between;gap:8px}
.rl-track li{flex:1 1 0;display:flex;flex-direction:column;gap:4px;cursor:pointer;
  opacity:.38;transition:opacity .3s var(--ease)}
.rl-track li.is-done{opacity:.66}
.rl-track li.is-live{opacity:1}
.rl-k{font:400 10px/1 var(--font-mono);letter-spacing:.06em;color:var(--brand)}
.rl-n{font:400 11px/1.2 var(--font-body);color:var(--paper);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rl-fill{display:block;height:1px;margin-top:12px;background:var(--brand);
  box-shadow:0 0 10px rgba(228,0,185,.6);width:0;transition:width .18s linear}

.route-cue{position:absolute;z-index:4;left:50%;transform:translateX(-50%);
  bottom:clamp(14px,3vh,22px);
  font:400 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  transition:opacity .5s ease;animation:routeCue 2.6s ease-in-out infinite}
@keyframes routeCue{0%,100%{opacity:.3}50%{opacity:.75}}

@media (max-width:760px){
  .route{height:430vh}
  .route-panels{left:12px;right:12px;width:auto;bottom:clamp(92px,15vh,124px)}
  .route-panel{padding:17px 17px 19px;background:rgba(11,10,12,.9);
    -webkit-backdrop-filter:blur(9px) saturate(1.1);backdrop-filter:blur(9px) saturate(1.1);
    transform:translateY(15px);clip-path:none}
  .route-panel.is-live{clip-path:none}
  .route-panel::before{width:13px;height:13px}
  .route-panel::after{font-size:clamp(50px,16vw,72px);right:12px;bottom:0;color:rgba(228,0,185,.08)}
  .rp-coord{font-size:9px;letter-spacing:.07em;gap:8px}
  .rp-coord::after{height:10px}
  .rp-q{margin:12px 0 7px}
  .rp-q::before{width:16px}
  .route-panel h3{font-size:clamp(20px,5.6vw,26px);margin:0 0 9px}
  .route-panel p{font-size:13.5px;line-height:1.58}
  .rh-tl{display:none}
  .rh-tr{top:clamp(62px,9vh,88px)}
  .rl-n{display:none}
  .rl-track{gap:6px}
  .rl-fill{margin-top:10px}
  .route-cue{display:none}
  .route-legend{left:12px;right:12px;bottom:clamp(28px,5.5vh,46px);padding-top:12px}
}
@media (max-width:400px){
  .route{height:400vh}
  .route-panel h3{font-size:21px}
}
@media (prefers-reduced-motion:reduce){
  .route-panel{transition:none}
  .route-cue{animation:none;opacity:.5}
}

/* ============================================================
   DOSE SCENES — seis construcciones matemáticas animadas (icosaedro,
   Lissajous, hipotrocoide, superficie reglada, Sierpiński, espiral
   áurea) ciclando solas a la izquierda; el texto de la derecha es
   fijo, no cambia con las escenas. Motor en js/dose-scenes.js.
   ============================================================ */
#dose{position:relative;background:var(--ink)}
.ds-panel{display:grid;grid-template-columns:1.15fr 1fr;gap:0;
  min-height:min(72vh,620px);
  border:1px solid var(--rule);border-radius:2px;overflow:hidden}

.ds-visual{position:relative;overflow:hidden;background:var(--ink);
  background-image:repeating-linear-gradient(-45deg,rgba(228,0,185,.06) 0 1px,transparent 1px 10px);
  border-right:1px solid var(--rule)}
.ds-cap{position:absolute;left:22px;top:20px;z-index:3;
  font:400 11px/1 var(--font-mono);text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.ds-cap b{color:var(--paper);font-weight:400}
.ds-count{position:absolute;right:22px;bottom:20px;z-index:3;
  font:400 11px/1 var(--font-mono);letter-spacing:.14em;color:var(--muted);font-variant-numeric:tabular-nums}
.ds-count b{color:var(--brand)}

.ds-scene-stack{position:absolute;inset:0}
.ds-scene-stack canvas{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;transform:scale(.22);transform-origin:50% 50%;
  transition:opacity .45s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.3,1.4,.4,1)}
.ds-scene-stack canvas.active{opacity:1;transform:scale(1)}
.ds-scene-stack canvas.leaving{opacity:0;transform:scale(.22);
  transition:opacity .32s ease,transform .38s cubic-bezier(.5,0,.75,0)}

.ds-pulse{position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;
  background:var(--paper);transform:translate(-50%,-50%) scale(0);opacity:0;
  pointer-events:none;z-index:4}
.ds-pulse.go{animation:dsPulse .62s cubic-bezier(.2,.8,.3,1)}
@keyframes dsPulse{
  0%{transform:translate(-50%,-50%) scale(0);opacity:0;box-shadow:0 0 0 0 rgba(228,0,185,.6)}
  22%{transform:translate(-50%,-50%) scale(1);opacity:1;box-shadow:0 0 0 0 rgba(228,0,185,.6)}
  100%{transform:translate(-50%,-50%) scale(1);opacity:0;box-shadow:0 0 0 46px rgba(228,0,185,0)}
}

.ds-badge{position:absolute;right:26px;top:26px;width:100px;height:100px;z-index:3}
.ds-badge svg{width:100%;height:100%}
.ds-badge-ring{animation:dsSpin 22s linear infinite;transform-origin:60px 60px}
.ds-badge text{font-family:var(--font-mono);font-size:7.2px;letter-spacing:.09em;fill:var(--muted)}
.ds-badge-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;pointer-events:none}
.ds-badge-center span{display:block;font:400 7.6px/1.15 var(--font-mono);letter-spacing:.04em;
  color:var(--paper);text-transform:uppercase;max-width:54px;transition:opacity .4s ease}
@keyframes dsSpin{to{transform:rotate(360deg)}}

.ds-content{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,4vw,64px)}
.ds-content h3{font:400 clamp(26px,2.8vw,40px)/1.1 var(--font-display);letter-spacing:0;
  margin:14px 0 18px;max-width:15ch}
.ds-content h3 .it{font-style:italic}
.ds-lede{font:400 clamp(15.5px,1.3vw,17px)/1.62 var(--font-body);color:var(--paper);
  max-width:44ch;margin:0 0 clamp(22px,3vw,32px)}
.ds-tag{display:block;padding-top:clamp(20px,2.6vw,28px);border-top:1px solid var(--rule);
  font:400 13px/1.6 var(--font-body);color:var(--muted);max-width:40ch}
.ds-tag b{color:var(--paper);font-weight:500}

.ds-nav{margin-top:clamp(26px,3.6vw,40px);display:flex;align-items:center;gap:14px}
.ds-dots{display:flex;gap:7px}
.ds-dot{width:26px;height:2px;background:var(--rule);border:0;padding:0;cursor:pointer;
  position:relative;border-radius:1px;overflow:hidden}
.ds-dot::after{content:'';position:absolute;top:0;bottom:0;left:0;width:0%;background:var(--brand)}
.ds-dot.done::after{width:100%;transition:none}
.ds-dot.current::after{width:0%;animation:dsFillbar var(--dur,5200ms) linear forwards}
.ds-dot:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
@keyframes dsFillbar{to{width:100%}}
.ds-scene-name{font:400 10px/1 var(--font-mono);text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);min-width:11ch}
.ds-scene-name b{color:var(--brand);font-weight:400}

@media(prefers-reduced-motion:reduce){
  .ds-badge-ring{animation:none}
  .ds-dot.current::after{animation:none;width:100%}
  .ds-scene-stack canvas{transition:opacity .3s ease}
  .ds-pulse.go{animation:none}
}

@media (max-width:991px){
  .ds-panel{min-height:auto}
  .ds-visual{min-height:380px}
}
@media (max-width:767px){
  .ds-panel{grid-template-columns:1fr}
  .ds-visual{border-right:0;border-bottom:1px solid var(--rule);
    min-height:0;height:auto;aspect-ratio:1/1;max-height:74vh}
  .ds-badge{width:76px;height:76px;right:16px;top:16px}
  .ds-badge text{font-size:6.6px}
  .ds-badge-center span{font-size:7px;max-width:40px}
  .ds-cap{left:16px;top:14px;max-width:60%;line-height:1.4}
  .ds-count{right:16px;bottom:16px}
  .ds-content{padding:clamp(26px,7vw,40px) var(--gap)}
  .ds-content h3{max-width:none}
  .ds-tag{max-width:none}
}
@media (max-width:420px){
  .ds-badge{width:64px;height:64px;right:14px;top:14px}
  .ds-badge text{font-size:6px}
  .ds-badge-center span{font-size:6.4px;max-width:34px}
  .ds-cap{font-size:10px;max-width:56%}
  .ds-scene-name{min-width:0}
}

/* ---------- THE DOSE — cabecera + rueda + preview + archivo + entrada ---------- */
#dose > .band{position:relative;z-index:1}
.dose-note{margin:0;max-width:46ch;
  font:400 clamp(15px,1.5vw,18px)/1.6 var(--font-body);color:var(--muted)}

/* preview de la landing */
.dose-tail{margin-top:clamp(8px,3vw,40px)}
.dose-tail-head{padding-bottom:6px;border-bottom:1px solid var(--rule)}
.dose-tail-head .eyebrow{display:block}

/* grid de entradas — tarjeta = portada ASCII + título (landing + archivo).
   Portada compacta (2/1) para que entren 4 tarjetas por pantalla. */
.dose-grid{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(16px,2vw,28px) clamp(20px,3vw,44px);margin-top:clamp(20px,2.5vw,32px)}
.dose-card{display:block;text-decoration:none;color:inherit}
.dose-card-media{position:relative;aspect-ratio:8/3;overflow:hidden;
  background:#0B0A0C;border:1px solid var(--rule);border-radius:2px;
  transition:border-color .3s var(--ease)}
.dose-card-media canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:0;transition:opacity .5s ease-out}
.dose-card-media canvas.is-drawn{opacity:1}
/* con foto: la foto real queda debajo y el ASCII se desvanece al pasar el cursor */
.dose-card-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.dose-card-media.has-photo .dose-card-photo{display:block}
.dose-card-media.has-photo canvas{background:#0B0A0C}
.dose-card:hover .dose-card-media.has-photo canvas{opacity:0}
@media (prefers-reduced-motion:reduce){.dose-card-media canvas,.fd-thumb .fd-ascii{transition:none}}
/* vista previa del panel: se repinta en cada cambio -- sin fundido para que no parpadee */
html.is-preview .dose-card-media canvas{transition:none}
.dose-card-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 60px rgba(11,10,12,.7)}
.dose-card-tag{position:absolute;left:10px;bottom:8px;z-index:2;
  font:400 9.5px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);mix-blend-mode:difference}
.dose-card-title{margin:10px 0 0;max-width:36ch;
  font:400 clamp(14px,1.5vw,18px)/1.24 var(--font-display);letter-spacing:-.005em;
  color:var(--paper);transition:color .25s var(--ease)}
.dose-card:hover .dose-card-media{border-color:var(--brand)}
.dose-card:hover .dose-card-title{color:var(--brand)}

.dose-more{display:flex;align-items:center;justify-content:center;gap:12px;
  margin-top:clamp(34px,5vw,60px);padding:22px;text-decoration:none;
  border:1px solid var(--rule);border-radius:2px;
  font:500 var(--chrome)/1 var(--font-mono);text-transform:uppercase;letter-spacing:.12em;
  color:var(--muted);transition:color .25s var(--ease),border-color .25s var(--ease),gap .25s var(--ease)}
.dose-more:hover{color:var(--paper);border-color:var(--brand);gap:18px}

@media (max-width:600px){.dose-grid{grid-template-columns:1fr}}

/* cabecera editorial de la sección (landing) — masthead tipo revista.
   .dose-masthead ES el grid (ya no hay un .dose-mast-grid anidado): la
   lista de temas ocupa una columna que abarca desde la fila del título
   hasta la del párrafo, así su borde superior queda a la misma altura
   que "Ideas worth questioning." -- no más abajo, a la altura del
   párrafo, como se sentía "flotando" antes. El eyebrow no entra en esa
   columna ("." la deja vacía en su fila) para que la lista arranque
   junto al título, no junto al eyebrow. */
.dose-masthead{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  grid-template-areas:"eyebrow ." "title topics" "lead topics";
  column-gap:clamp(30px,6vw,88px);
  row-gap:clamp(16px,2.4vw,32px);
  margin-bottom:clamp(20px,4vw,52px)}
.dose-masthead .eyebrow{grid-area:eyebrow}
/* el margin-top que antes traía el título (eyebrow→título) ahora lo da
   el row-gap de arriba -- así título y topics, que comparten fila,
   arrancan exactamente a la misma altura (align-self:start en ambos). */
.dose-mast-title{grid-area:title;position:relative;isolation:isolate;
  margin:0;max-width:none;letter-spacing:-.02em;color:var(--paper);align-self:start}
.dose-mast-txt{position:relative;z-index:1;display:block;
  font:400 clamp(46px,9vw,132px)/.96 var(--font-display)}
.dose-mast-txt .it{color:var(--brand)}
/* título→párrafo = row-gap (16-32) + este margin (22-46) = 38-78,
   igual que antes; topics no lleva margin-top, se queda pegado arriba. */
.dose-mast-lead{grid-area:lead;margin:clamp(22px,3.6vw,46px) 0 0;max-width:44ch;
  font:400 clamp(17px,1.85vw,22px)/1.6 var(--font-body);color:var(--paper)}
.dose-mast-topics{grid-area:topics;align-self:start;
  list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.dose-mast-topics li{display:flex;align-items:baseline;gap:16px;padding:13px 2px;
  border-bottom:1px solid var(--rule);
  font:400 clamp(15px,1.5vw,19px)/1.2 var(--font-display);color:var(--paper);
  transition:padding-left .28s var(--ease),color .28s var(--ease)}
.dose-mast-topics li:hover{padding-left:10px;color:var(--brand)}
.dose-mast-topics .n{flex:0 0 auto;font:500 11px/1 var(--font-mono);color:var(--brand);letter-spacing:.06em}
@media (max-width:820px){
  /* apilado simple: título y topics ya no comparten fila, así que
     título recupera su propio margin-top (antes lo daba el row-gap
     del layout de escritorio, pensado para la fila compartida). */
  .dose-masthead{grid-template-columns:1fr;
    grid-template-areas:"eyebrow" "title" "lead" "topics";
    row-gap:0}
  .dose-mast-title{margin-top:clamp(16px,2.4vw,32px)}
  .dose-mast-lead{max-width:none;margin-top:34px}
  .dose-mast-topics{margin-top:34px}
}

/* ---------- página dose/index.html — archivo ---------- */
.dose-page{padding:calc(96px + var(--gap)) var(--gap) var(--band);max-width:var(--max);margin:0 auto}
.dose-page-head{border-bottom:1px solid var(--rule);padding-bottom:clamp(28px,5vw,52px)}
.dose-page-head h1{margin:.1em 0 0;font:400 clamp(52px,11vw,150px)/.92 var(--font-display);letter-spacing:-.01em}
.dose-page-head p{margin:clamp(18px,2.4vw,28px) 0 0;max-width:60ch;
  font:400 clamp(16px,1.7vw,20px)/1.55 var(--font-body);color:var(--muted)}
.dose-filters{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(32px,5vw,56px) 0 0}
.dose-filter{font:400 11px/1 var(--font-mono);text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);background:transparent;border:1px solid var(--rule);
  padding:9px 13px;border-radius:2px;cursor:pointer;
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)}
.dose-filter:hover{color:var(--paper);border-color:var(--muted)}
.dose-filter.is-on{color:#0B0A0C;background:var(--brand);border-color:var(--brand)}
.dose-count{margin:20px 0 0;font:400 11px/1 var(--font-mono);text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted)}
.dose-page .dose-grid{margin-top:26px}
.dose-empty{padding:40px 4px;color:var(--muted);font:400 15px/1.6 var(--font-body)}

/* ---------- página dose/<slug>.html — entrada ---------- */
.dose-article{max-width:var(--max);margin:0 auto;padding:calc(96px + var(--gap)) var(--gap) 0}
.dose-art-head{border-bottom:1px solid var(--rule);padding-bottom:clamp(30px,5vw,56px)}
.dose-art-n{display:block;font:400 clamp(48px,10vw,150px)/.8 var(--font-display);letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1px var(--rule);-webkit-text-fill-color:transparent}
.dose-art-topics{display:flex;flex-wrap:wrap;gap:7px;margin:clamp(18px,3vw,30px) 0 0}
.dose-art-topics span{font:400 10px/1 var(--font-mono);text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);border:1px solid var(--rule);padding:6px 9px;border-radius:2px}
.dose-art-title{margin:.18em 0 0;font:400 clamp(34px,6.4vw,92px)/1.02 var(--font-display);letter-spacing:-.015em}
.dose-art-meta{display:flex;flex-wrap:wrap;gap:18px;margin-top:clamp(18px,2.6vw,28px);
  font:400 11px/1 var(--font-mono);text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}

/* menos aire muerto (pedido de la clienta): arranque más cerca del encabezado,
   interlineado y separaciones más compactas */
.dose-body{max-width:64ch;margin:clamp(32px,4.5vw,60px) 0 0}
.dose-body > * + *{margin-top:1.15em}
.dose-body p{margin:0;font:400 clamp(17px,1.9vw,21px)/1.6 var(--font-body);color:var(--paper)}
.dose-body p.lead{font:400 clamp(20px,2.6vw,30px)/1.42 var(--font-display);color:var(--paper);letter-spacing:-.005em}
/* el subtítulo pega con su párrafo, se separa del bloque anterior */
.dose-body h2 + *{margin-top:.55em}
.dose-body h2{margin:1.6em 0 0;font:400 clamp(24px,3.2vw,38px)/1.15 var(--font-display);color:var(--paper)}
.dose-body em{color:var(--brand);font-style:normal}
.dose-body strong{font-weight:600;color:var(--paper)}
.dose-body blockquote{margin:1.6em 0;padding-left:clamp(18px,3vw,34px);border-left:2px solid var(--brand)}
.dose-body blockquote p{font:400 clamp(21px,3vw,34px)/1.28 var(--font-display);color:var(--paper)}
.dose-body ul{margin:0;padding-left:1.2em}
.dose-body li{font:400 clamp(16px,1.8vw,20px)/1.65 var(--font-body);color:var(--paper);margin-top:.5em}

/* rail de imágenes a la derecha — aprovecha el espacio muerto junto al texto.
   Si <aside class="dose-media"> queda vacío, no ocupa (falls back a texto ancho). */
.dose-media{margin-top:clamp(36px,8vw,56px)}
.dose-media:empty{display:none}
.dose-fig{margin:0 0 clamp(20px,3vw,32px)}
.dose-fig img,.dose-fig-ph{display:block;width:100%;aspect-ratio:4 / 3;object-fit:cover;
  border:1px solid var(--rule);border-radius:3px}
.dose-fig-ph{background:var(--ink);
  background-image:repeating-linear-gradient(-45deg,rgba(228,0,185,.10) 0 1px,transparent 1px 9px)}
.dose-fig figcaption{margin-top:9px;font:400 11px/1.45 var(--font-mono);text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted)}
@media (min-width:1000px){
  /* texto y fotos se reparten todo el ancho: el texto llena su columna
     (sin la franja vacía que dejaba el tope de 64ch) y las fotos crecen */
  .dose-article{display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,clamp(340px,38%,520px));
    column-gap:clamp(32px,4vw,64px)}
  .dose-art-head{grid-column:1 / -1}
  .dose-body{grid-column:1;max-width:none}
  .dose-media{grid-column:2;margin-top:clamp(32px,4.5vw,60px);
    position:sticky;top:96px;align-self:start}
  /* las dos fotos siempre caben en pantalla mientras acompañan la lectura */
  .dose-fig img,.dose-fig-ph{max-height:calc((100vh - 96px - 110px) / 2)}
}

.dose-nav{max-width:var(--max);margin:clamp(60px,10vw,130px) auto 0;
  padding:0 var(--gap) var(--band);display:flex;flex-wrap:wrap;gap:14px}
.dose-nav-link{flex:1 1 260px;border:1px solid var(--rule);border-radius:3px;padding:24px;
  text-decoration:none;transition:border-color .25s var(--ease),background .25s var(--ease)}
.dose-nav-link:hover{border-color:var(--brand);background:rgba(228,0,185,.05)}
.dose-nav-k{display:block;font:400 11px/1 var(--font-mono);text-transform:uppercase;
  letter-spacing:.08em;color:var(--brand);margin-bottom:10px}
.dose-nav-t{display:block;font:400 clamp(18px,2.1vw,25px)/1.16 var(--font-display);color:var(--paper)}
.dose-nav-back{flex:1 1 100%;border:1px solid var(--rule);border-radius:3px;padding:18px 24px;
  text-align:center;text-decoration:none;transition:color .25s var(--ease),border-color .25s var(--ease);
  font:500 var(--chrome)/1 var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.dose-nav-back:hover{color:var(--paper);border-color:var(--muted)}


/* ---------- FAQ ---------- */
.faq-item{border-top:1px solid var(--rule);padding:22px 0}
.faq-item:last-child{border-bottom:1px solid var(--rule)}
.faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:baseline;gap:var(--gap);font:400 clamp(20px,2.25vw,27px)/1.3 var(--font-display)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--brand);font:400 20px/1 var(--font-body);flex:0 0 auto}
.faq-item[open] summary::after{content:"–"}
.faq-item .faq-q{display:block}
.faq-item .faq-n{font:500 12px/1 var(--font-mono);color:var(--brand);letter-spacing:.08em;
  margin-right:14px;vertical-align:2px}
/* respuesta: a todo el ancho de la sección y a mayor tamaño (no una
   columna angosta pegada a la izquierda) */
.faq-item .a{margin:16px 0 0;max-width:none;
  font:400 clamp(17px,1.7vw,21px)/1.6 var(--font-body);color:var(--muted)}
/* frase destacada: mismo tamaño y fuente que la respuesta, en blanco y negritas */
.faq-item .faq-note{margin:16px 0 0;max-width:none;
  font:700 clamp(17px,1.7vw,21px)/1.6 var(--font-body);color:var(--paper)}

/* ---------- CONTACT — la fila se llena de magenta desde el cursor y el
   texto (clonado en --ink dentro de la capa recortada) se mantiene legible
   en todo momento. JS pone --ri / --cx / --cy sobre [data-invert]. ---------- */
.contact-row{position:relative;overflow:hidden;isolation:isolate;display:flex;
  flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(28px,4vw,50px) var(--gap);
  border:1px solid var(--brand);border-radius:2px;background:var(--ink);
  text-decoration:none}
/* estados base (texto claro sobre fondo oscuro) */
.contact-row .cta-text{font:400 clamp(22px,3.2vw,38px)/1.2 var(--font-display);
  max-width:22ch;color:var(--paper)}
.contact-row .cta-link{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;
  font:500 var(--chrome)/1 var(--font-mono);text-transform:uppercase;letter-spacing:.06em;
  white-space:nowrap;padding:14px 24px;border:1px solid var(--brand);border-radius:2px;
  color:var(--paper);transition:gap .25s var(--ease)}
.contact-row:hover .cta-link{gap:16px}
/* capa que se revela: mismo layout, fondo magenta, contenido en --ink */
.cr-fill{position:absolute;inset:0;z-index:3;pointer-events:none;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(28px,4vw,50px) var(--gap);
  background:var(--brand);
  background-image:radial-gradient(rgba(11,10,12,.16) 32%,transparent 34%);background-size:6px 6px;
  clip-path:circle(var(--ri,0px) at var(--cx,50%) var(--cy,50%))}
.cr-fill .cta-text{color:var(--ink)}
.cr-fill .cta-link{border-color:var(--ink);background:var(--ink);color:var(--brand)}
@media (hover:none){.cr-fill{display:none}}

.contact-alt{margin-top:16px;font:400 13px/1.5 var(--font-body);color:var(--muted)}
.contact-alt a{color:var(--brand)}

/* ---------- CONTACT — cierre del sitio, a gran escala ---------- */
#contact{padding-top:calc(var(--band) * 1.3)}
.contact-head{margin-bottom:clamp(40px,6vw,80px);overflow-x:clip} /* la 2ª línea entra desde la derecha (translate .5em): sin clip se salía de la pantalla y la página se podía mover a los lados */
.contact-head .eyebrow{display:block;margin-bottom:clamp(18px,2.5vw,32px)}
.contact-head h2{max-width:none;
  font:400 clamp(46px,10vw,140px)/.94 var(--font-display);letter-spacing:-.025em}
/* escalonado: la 2ª línea entra desde la derecha */
.contact-h2 .ch-l1,.contact-h2 .ch-l2{display:block}
.contact-h2 .ch-l2{margin-left:clamp(28px,16vw,3ch)}
.contact-h2 .hl{color:var(--brand)}
.contact-h2 .ch-l1,.contact-h2 .ch-l2{opacity:0;transform:translateY(.42em)}
.contact-h2 .ch-l2{transform:translate(.5em,.42em)}
.contact-head.shown .contact-h2 .ch-l1,
.contact-head.shown .contact-h2 .ch-l2{opacity:1;transform:none;
  transition:opacity .6s var(--rev-ease),transform .6s var(--rev-ease)}
.contact-head.shown .contact-h2 .ch-l2{transition-delay:.11s}
.contact-head p{margin-top:clamp(24px,3.5vw,44px);max-width:42ch;
  font:400 clamp(17px,1.9vw,22px)/1.55 var(--font-body);color:var(--paper)}

/* ---------- FOOTER ledger ---------- */
.site-foot{padding:var(--band) var(--gap) 40px;max-width:var(--max);margin:0 auto}
.foot-ledger{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);padding-bottom:30px;
  border-bottom:1px solid var(--rule)}
.foot-ledger h4{margin:0 0 10px;font:400 var(--chrome)/1 var(--font-mono);color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em}
.foot-ledger p,.foot-ledger a{display:block;margin:0 0 4px;font:400 14px/1.5 var(--font-body)}
.foot-ledger a:hover{color:var(--brand)}
.foot-legal{display:flex;justify-content:space-between;gap:var(--gap);padding-top:18px;
  font:400 12px/1.4 var(--font-mono);color:var(--muted);flex-wrap:wrap}
@media (max-width:720px){.foot-ledger{grid-template-columns:1fr 1fr}}

/* ============================================================
   CASE STUDY — modelo real de la clienta ("THE ARCHIVE"):
   ledger (Industria · Servicios · Instagram) + 4 capítulos fijos —
   01 El reto · 02 Nuestro enfoque · 03 Desarrollamos · 04 Resultado.
   Tratamiento editorial: número fantasma enorme + label grande por
   capítulo, cuerpo a escala real, cada capítulo con su propio encuadre
   (reto = statement, enfoque = bloque a la derecha, desarrollamos =
   índice a 2 columnas, resultado = desenlace centrado). Next case
   reutiliza .work-row.
   ============================================================ */
.cs{max-width:var(--max);margin:0 auto;padding:0 var(--gap)}

/* ---- capítulos ---- */
/* Desplegables (pedido de la clienta: la lectura era larga). Cada capítulo
   es un renglón del índice — número en contorno + título + botón (+) — y
   el cuerpo se abre con el mismo gesto grid-rows 0fr→1fr que las carpetas. */
.cs{margin-bottom:clamp(60px,9vw,120px)}
.cs-ch{padding:0;border-top:1px solid var(--rule)}
.cs-ch:last-of-type{border-bottom:1px solid var(--rule)}
.cs-ch:first-of-type{margin-top:clamp(48px,8vw,96px)}
.cs-ch-h{margin:0;font:inherit}
.cs-ch-head{position:relative;display:flex;align-items:center;width:100%;
  padding:clamp(22px,3vw,40px) calc(clamp(44px,4.4vw,60px) + 20px) clamp(22px,3vw,40px) 0;background:none;border:0;color:inherit;font:inherit;
  text-align:left;cursor:pointer}
.cs-ch-head:focus-visible{outline:2px solid var(--brand);outline-offset:6px}
/* Cerrado: los cuatro capítulos forman una lista a la izquierda
   (margin-left:0) a tamaño de índice. Abierto: número y título viajan
   y crecen hasta su lugar original (izquierda; Resultado al centro). Todo
   con transiciones de margin/transform/font-size — el texto se desliza,
   no salta. */
.cs-ch{--mv:.85s cubic-bezier(.65,0,.2,1)}
.cs-ch-lbl{display:flex;align-items:center;gap:clamp(14px,2.2vw,32px);min-width:0;
  margin-left:0;transform:translateX(0);
  transition:margin-left var(--mv),transform var(--mv),gap var(--mv)}
.cs-ch-n{flex:0 0 auto;min-width:1.3em;font:400 clamp(44px,5.6vw,92px)/.78 var(--font-display);
  letter-spacing:-.03em;color:transparent;
  -webkit-text-stroke:1px var(--rule);-webkit-text-fill-color:transparent;
  transition:-webkit-text-stroke-color .4s var(--ease),font-size var(--mv)}
.cs-ch-t{margin:0;font:400 clamp(22px,2.6vw,40px)/1 var(--font-display);
  letter-spacing:-.01em;color:var(--paper);white-space:nowrap;
  transition:color .4s var(--ease),font-size var(--mv)}
.cs-ch.is-open .cs-ch-lbl{margin-left:0}
.cs-ch.is-open .cs-ch-n{font-size:clamp(60px,12vw,188px)}
.cs-ch.is-open .cs-ch-t{font-size:clamp(30px,5vw,70px)}
.cs-ch-ico{position:absolute;right:0;top:50%;margin-top:calc(clamp(44px,4.4vw,60px) / -2);width:clamp(44px,4.4vw,60px);aspect-ratio:1;
  border:1px solid var(--rule);border-radius:50%;
  transition:transform .6s var(--rev-ease),border-color .4s var(--ease),background-color .4s var(--ease)}
.cs-ch-ico::before,.cs-ch-ico::after{content:"";position:absolute;left:50%;top:50%;
  width:36%;height:1.5px;background:var(--paper);transform:translate(-50%,-50%)}
.cs-ch-ico::after{transform:translate(-50%,-50%) rotate(90deg)}
.cs-ch-head:hover .cs-ch-n,.cs-ch.is-open .cs-ch-n{-webkit-text-stroke-color:var(--brand)}
.cs-ch-head:hover .cs-ch-ico{border-color:var(--brand)}
.cs-ch.is-open .cs-ch-ico{transform:rotate(45deg);border-color:var(--brand);background:var(--brand)}
.cs-ch.is-open .cs-ch-ico::before,.cs-ch.is-open .cs-ch-ico::after{background:var(--ink)}
.cs-ch-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--rev-ease)}
.cs-ch-inner{min-height:0;overflow:hidden;opacity:0;transform:translateY(-10px);
  transition:opacity .45s var(--ease),transform .7s var(--rev-ease)}
.cs-ch-inner > *{margin-bottom:clamp(44px,7vw,96px)}
.cs-ch.is-open .cs-ch-panel{grid-template-rows:1fr}
.cs-ch.is-open .cs-ch-inner{opacity:1;transform:none;transition-delay:.12s}
@media (prefers-reduced-motion:reduce){
  .cs-ch-panel,.cs-ch-inner,.cs-ch-ico,.cs-ch-lbl,.cs-ch-n,.cs-ch-t{transition:none}
}
.cs-ch-body p{margin:0;color:var(--paper)}
.cs-ch-body p + p{margin-top:.9em}

/* Contenido de los capítulos: a todo el ancho y alineado a la izquierda,
   como párrafo normal (pedido de la clienta) -- antes cada uno iba en una
   columna angosta distinta: izquierda, derecha o centrada. */
/* 01 · El reto — statement en display */
.cs-ch--reto .cs-ch-body{max-width:none}
.cs-ch--reto .cs-ch-body p{font:400 clamp(20px,2.3vw,32px)/1.32 var(--font-display);letter-spacing:-.01em}
.cs-ch--reto .cs-ch-body p + p{margin-top:.7em;
  font:400 clamp(18px,2.1vw,25px)/1.4 var(--font-display);color:var(--muted)}

/* 02 · Nuestro enfoque — bloque de lectura */
.cs-ch--enfoque .cs-ch-body{max-width:none}
.cs-ch--enfoque .cs-ch-body p{font:400 clamp(18px,1.9vw,25px)/1.6 var(--font-body);color:var(--paper)}

/* 03 · Desarrollamos — índice numerado a 2 columnas */
.cs-dev{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,5vw,78px);
  border-bottom:1px solid var(--rule)}
.cs-dev li{display:flex;align-items:baseline;gap:16px;padding:19px 4px;
  border-top:1px solid var(--rule);
  font:400 clamp(17px,1.9vw,23px)/1.2 var(--font-display);color:var(--paper);
  transition:padding-left .3s var(--ease),color .3s var(--ease)}
.cs-dev li:hover{padding-left:14px;color:var(--brand)}
.cs-dev-n{flex:0 0 auto;font:500 12px/1 var(--font-mono);color:var(--brand);letter-spacing:.04em}

/* 04 · Resultado — el desenlace, en display */
.cs-result{margin:0;max-width:none;
  font:400 clamp(21px,2.6vw,36px)/1.28 var(--font-display);
  letter-spacing:-.012em;color:var(--paper)}
.cs-result::before{content:"";display:block;width:56px;height:2px;
  background:var(--brand);margin:0 0 clamp(20px,3vw,38px)}

@media (max-width:820px){
  .cs-ch-lbl{flex-direction:column;align-items:flex-start;gap:4px}
  .cs-ch-n{font-size:clamp(38px,11vw,64px)}
  .cs-ch.is-open .cs-ch-n{font-size:clamp(52px,19vw,104px)}
  .cs-dev{grid-template-columns:1fr}
}

/* Next case — reutiliza .work-row (mismo hover con drift de puntos) */
.cs-next{max-width:var(--max);margin:0 auto;
  padding:clamp(48px,8vw,110px) var(--gap) var(--band);border-top:1px solid var(--rule)}
.cs-next .eyebrow{display:block;margin-bottom:6px}
.cs-next .work-row .name{font-size:clamp(26px,3.9vw,48px)}

/* utilidades responsivas generales */
@media (max-width:900px){
  .step{grid-template-columns:1fr;gap:10px}
  .foot-ledger{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .work-row .row-inner{flex-direction:column;align-items:flex-start}
  .work-row .meta{text-align:left}
  .contact-row{flex-direction:column;align-items:flex-start}
}

/* ============================================================
   CASE BOARD — abre cada caso de estudio. Dos piezas:
   1) INTRO — la carpeta del caso (misma pieza que THE ARCHIVE en la
      home) + sus notas (el reto, servicios), en fila simple.
   2) WALL — el moodboard: cuadrícula de fotos del proyecto colgadas
      de un hilo magenta punteado, cada una con su corchete HUD.
   Tech/HUD — retícula de fondo, halftone, corchetes — nada de madera
   ni foto realista. Markup lo genera js/caseboard.js.
   ============================================================ */
.caseboard{position:relative;background:var(--ink);overflow:hidden;
  padding:clamp(120px,15vh,168px) var(--gap) clamp(48px,7vw,84px);
  background-image:
    linear-gradient(rgba(237,234,239,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(237,234,239,.045) 1px,transparent 1px);
  background-size:42px 42px}

.cb-head{max-width:var(--max);margin:0 auto clamp(40px,5.5vw,68px)}
.cb-eyebrow{font:500 var(--chrome)/1 var(--font-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--brand)}
.cb-title{margin:14px 0 0;font:400 clamp(38px,7vw,88px)/.98 var(--font-display);letter-spacing:-.01em;max-width:18ch}
.cb-pitch{margin:18px 0 0;max-width:60ch;font:400 clamp(16px,1.6vw,20px)/1.6 var(--font-body);color:var(--muted)}

/* ---- intro: carpeta + ficha del caso (industria / servicios /
   instagram), fila que envuelve. El reto ya no va aquí: tiene su
   capítulo 01 abajo. Sin posicionamiento absoluto ni medición por JS. ---- */
.cb-intro{position:relative;max-width:var(--max);margin:0 auto;
  display:flex;flex-wrap:wrap;gap:clamp(18px,2.4vw,28px);align-items:stretch}
.cb-folder{flex:1 1 clamp(220px,24vw,300px);max-width:340px}
html.js .cb-folder.folder{opacity:1;transform:none}
.cb-folder .fd-card{transition:transform .3s var(--ease),filter .3s var(--ease)}
.cb-folder:hover .fd-card,.cb-folder:focus-visible .fd-card{transform:translateY(-4px) rotate(0deg)}

/* notas — dossier digital: oscuras, borde magenta, halftone */
.cb-note{flex:2 1 260px;padding:clamp(18px,2vw,26px);border:1px solid rgba(228,0,185,.4);
  background:rgba(11,10,12,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  background-image:radial-gradient(rgba(228,0,185,.5) 1px,transparent 1px);background-size:6px 6px;
  transition:transform .3s var(--ease),border-color .3s var(--ease)}
.cb-note:hover{transform:translateY(-3px);border-color:var(--brand)}
.cb-note-k{display:block;font:500 var(--chrome)/1 var(--font-mono);text-transform:uppercase;
  letter-spacing:.14em;color:var(--brand);margin-bottom:10px}
.cb-note-t{margin:0;font:400 clamp(14px,1.3vw,16.5px)/1.6 var(--font-body);color:var(--paper);
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}

/* ficha del caso — dossier en negro: recuadro negro puro (más oscuro que
   el fondo de la página, así se lee como una pieza aparte), trama de
   puntos gris muy tenue, texto blanco y la información desglosada en
   filas separadas por líneas, como una hoja de expediente. */
.cb-note--ficha{display:flex;flex-direction:column;padding:clamp(20px,2.2vw,30px) clamp(20px,2.4vw,34px);
  background-color:#000;border:1px solid rgba(237,234,239,.2);
  background-image:radial-gradient(rgba(237,234,239,.085) 1px,transparent 1.25px);background-size:6px 6px;
  box-shadow:0 24px 60px rgba(0,0,0,.55)}
.cb-note--ficha:hover{border-color:rgba(237,234,239,.55)}
.cb-note--ficha .cb-note-k{display:flex;align-items:center;justify-content:space-between;gap:12px;
  color:var(--paper);margin-bottom:clamp(14px,1.6vw,20px)}
.cb-note--ficha .cb-note-k::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 12px rgba(228,0,185,.8)}
.cb-ficha{display:flex;flex-direction:column;border-top:1px solid rgba(237,234,239,.22)}
.cb-ficha-row{display:grid;grid-template-columns:clamp(96px,10vw,140px) 1fr;gap:clamp(14px,2vw,28px);
  align-items:baseline;padding:clamp(13px,1.4vw,17px) 0;border-bottom:1px solid rgba(237,234,239,.14)}
.cb-ficha-row:last-child{border-bottom:0;padding-bottom:0}
.cb-ficha-k{font:400 var(--chrome)/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:rgba(237,234,239,.55)}
.cb-ficha-v{font:400 clamp(15px,1.45vw,18px)/1.45 var(--font-body);color:var(--paper)}
.cb-ficha-row--ph .cb-ficha-v{color:rgba(237,234,239,.4);font-style:normal}
.cb-ficha-v a{color:var(--paper);text-decoration:none;border-bottom:1px solid rgba(237,234,239,.35);transition:color .2s,border-color .2s}
.cb-ficha-v a:hover{color:var(--brand);border-color:var(--brand)}
.cb-ficha-chips{display:flex;flex-wrap:wrap;gap:7px}
.cb-ficha-chips span{font:400 11px/1 var(--font-mono);text-transform:uppercase;letter-spacing:.07em;color:var(--paper);
  border:1px solid rgba(237,234,239,.3);padding:7px 11px;border-radius:2px}
@media (max-width:520px){
  .cb-ficha-row{grid-template-columns:1fr;gap:8px}
  .cb-ficha-chips span{font-size:10px;padding:6px 9px}
}

/* ---- wall: moodboard de evidencia — cuadrícula de fotos colgadas de un
   hilo punteado, cada una con su corchete HUD y su etiqueta ---- */
.cb-wall{position:relative;max-width:var(--max);margin:clamp(56px,7.5vw,92px) auto 0}
.cb-wall-head{display:flex;align-items:baseline;gap:14px;margin-bottom:clamp(34px,4.4vw,50px);
  font:500 var(--chrome)/1 var(--font-mono);text-transform:uppercase;letter-spacing:.14em}
.cb-wall-head span:first-child{color:var(--brand)}
.cb-wall-head span:last-child{margin-left:auto;color:var(--muted);letter-spacing:.1em}

/* hilo — una sola polilínea que hila las 6 fotos en orden (js/caseboard.js
   la mide y dibuja de verdad, no es una línea recta decorativa encima) */
.cb-wall-threads{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;
  overflow:visible;pointer-events:none}
.cb-wall-threads polyline{fill:none;stroke:var(--brand);stroke-width:1.4;
  stroke-dasharray:1 6;stroke-linecap:round;opacity:.6}

/* siempre son 6 fotos: columnas que dividen 6 exacto (6 / 3 / 2) para que
   el bloque quede centrado sin columnas vacías ni filas a medias
   (auto-fill dejaba una 7ª columna vacía a la derecha en escritorio) */
.cb-wall-grid{position:relative;z-index:1;display:grid;padding-top:28px;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(40px,4.4vw,58px) clamp(20px,2.6vw,30px)}

.cb-photo{position:relative;display:flex;flex-direction:column;gap:10px;margin:0;
  transform:translateY(var(--dy,0px)) rotate(var(--r,0deg));
  transition:transform .3s var(--ease),filter .3s var(--ease);
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.55))}
.cb-photo:nth-child(6n+1){--r:-1.6deg;--dy:0px}
.cb-photo:nth-child(6n+2){--r:1.3deg;--dy:22px}
.cb-photo:nth-child(6n+3){--r:-.6deg;--dy:-12px}
.cb-photo:nth-child(6n+4){--r:1.8deg;--dy:14px}
.cb-photo:nth-child(6n+5){--r:-1.1deg;--dy:-8px}
.cb-photo:nth-child(6n){--r:.9deg;--dy:20px}
.cb-photo:hover{transform:translateY(calc(var(--dy,0px) - 6px)) rotate(0deg);z-index:2;
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(228,0,185,.18))}
/* chinche — el punto exacto del que cuelga el hilo (js mide desde aquí) */
.cb-photo::after{content:"";position:absolute;left:50%;top:-5px;z-index:1;width:8px;height:8px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 0 3px rgba(21,19,25,.9),0 2px 6px rgba(0,0,0,.5);
  transform:translateX(-50%)}

.cb-photo-frame{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;
  border:1px solid rgba(228,0,185,.35);background:#151319}
.cb-photo-frame img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.2) contrast(1.05)}
.cb-photo-frame--empty{display:flex;align-items:center;justify-content:center;padding:14px;text-align:center;
  background-image:radial-gradient(rgba(228,0,185,.75) 1px,transparent 1px);background-size:7px 7px;background-color:#151319}
.cb-photo-frame--empty span{font:400 11px/1.3 var(--font-mono);letter-spacing:.08em;
  text-transform:uppercase;color:rgba(237,234,239,.38)}
.cb-photo-corner{position:absolute;width:11px;height:11px;border:1.4px solid var(--brand);opacity:.75;pointer-events:none}
.cb-photo-corner--tl{left:-1px;top:-1px;border-right:0;border-bottom:0}
.cb-photo-corner--br{right:-1px;bottom:-1px;border-left:0;border-top:0}
.cb-photo-cap{margin:0;font:400 10px/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;
  color:rgba(237,234,239,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width:1000px){
  .cb-wall-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  .cb-intro{flex-direction:column}
  .cb-folder{max-width:100%}
}
@media (max-width:520px){
  .caseboard{padding-top:clamp(100px,14vh,140px)}
  .cb-title{font-size:clamp(30px,9.5vw,44px)}
  .cb-wall-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .cb-note,.cb-folder .fd-card,.cb-photo{transition:none}
}

/* ============================================================
   MOODBOARD — abre cada caso de estudio. Collage de imágenes
   superpuestas, rotadas y a distinta escala (referencia: tablero
   de pins). Pieza central = la más grande = misma imagen que la
   lista de Trabajo en la home. Markup lo genera js/moodboard.js.
   FUERA DE USO desde que existe Case Board — se deja sin borrar
   por si algún día se reutiliza, no se carga en ninguna página.
   ============================================================ */
.moodboard{position:relative;isolation:isolate;overflow:clip;
  min-height:100svh;padding:calc(96px + var(--gap)) var(--gap) var(--band);
  display:flex;flex-direction:column;
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(228,0,185,.06),transparent 60%),
    var(--ink)}

.mb-head{position:relative;z-index:3;max-width:var(--max);width:100%;margin:0 auto}
.mb-head .eyebrow{display:block;margin-bottom:14px}
.mb-title{margin:0;font:400 clamp(48px,8.5vw,120px)/.94 var(--font-display);letter-spacing:0}
.mb-tagline{margin:14px 0 0;font:400 var(--chrome)/1.4 var(--font-mono);
  text-transform:uppercase;letter-spacing:.12em;color:var(--brand)}
.mb-pitch{margin:16px 0 0;max-width:46ch;
  font:400 clamp(16px,1.8vw,21px)/1.5 var(--font-body);color:var(--muted)}

.mb-stage{position:relative;flex:1 1 auto;
  width:min(1180px,94vw);margin:clamp(24px,4vw,52px) auto auto;
  aspect-ratio:16 / 9;min-height:min(58svh,520px)}

.mb-item{position:absolute;left:var(--cx);top:var(--cy);width:var(--w);
  aspect-ratio:var(--ar,1 / 1);margin:0;
  transform:translate(-50%,-50%) rotate(var(--r,0deg));
  z-index:var(--z,1);border:1px solid rgba(237,234,239,.16);border-radius:3px;
  background:#141216;overflow:hidden;
  box-shadow:0 26px 60px -26px rgba(0,0,0,.7),0 4px 14px -6px rgba(0,0,0,.5);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),opacity .6s var(--rev-ease)}
.mb-item img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.96)}
.mb-item:hover{transform:translate(-50%,-50%) rotate(0deg) scale(1.055);
  z-index:70;box-shadow:0 40px 90px -28px rgba(0,0,0,.8)}

.mb-hero{width:calc(var(--w) * 1);border-color:rgba(228,0,185,.45);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.85),0 0 0 1px rgba(228,0,185,.18),
    0 0 60px -10px rgba(228,0,185,.35)}
.mb-hero figcaption{position:absolute;left:10px;bottom:9px;z-index:2;
  font:400 11px/1 var(--font-mono);letter-spacing:.06em;color:var(--paper);
  text-shadow:0 1px 6px rgba(0,0,0,.8);pointer-events:none}

.mb-empty{display:flex;align-items:center;justify-content:center}
.mb-empty .mb-tag{font:400 clamp(20px,3vw,42px)/1 var(--font-mono);
  color:rgba(11,10,12,.35);mix-blend-mode:overlay;user-select:none}
.mb-hero.mb-empty{background:var(--brand);border-color:var(--brand)}
.mb-hero.mb-empty::after{content:attr(data-label);padding:0 14px;text-align:center;
  font:400 clamp(18px,2.4vw,30px)/1.15 var(--font-display);color:#0B0A0C}
.mb-hero.mb-empty figcaption{color:#0B0A0C;text-shadow:none}

.mb-swatch{position:absolute;left:var(--cx);top:var(--cy);z-index:var(--z,30);
  transform:translate(-50%,-50%) rotate(var(--r,0deg));
  display:flex;align-items:center;gap:9px;padding:8px 11px;
  background:var(--paper);border-radius:2px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.6);
  transition:transform .5s var(--ease),opacity .6s var(--rev-ease)}
.mb-swatch-chip{width:22px;height:22px;border-radius:1px;flex:0 0 auto;
  box-shadow:inset 0 0 0 1px rgba(11,10,12,.15)}
.mb-swatch-txt{display:flex;flex-direction:column;line-height:1.25}
.mb-swatch-hex{font:500 10px/1.2 var(--font-mono);color:#0B0A0C;letter-spacing:.04em}
.mb-swatch-rgb{font:400 8.5px/1.2 var(--font-mono);color:var(--muted-on-light);letter-spacing:.03em}

.mb-foot{position:relative;z-index:2;max-width:var(--max);width:100%;margin:0 auto}
.mb-foot .eyebrow{display:block;margin-bottom:6px}
.mb-foot p{margin:0;max-width:52ch;font:400 14px/1.6 var(--font-body);color:var(--muted)}
.mb-foot-soft{color:rgba(139,135,144,.6)}

.mb-cue{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font:400 var(--chrome)/1 var(--font-mono);text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted)}
.mb-cue i{width:1px;height:34px;background:linear-gradient(var(--muted),transparent);
  animation:mbCue 1.8s var(--ease) infinite}
@keyframes mbCue{0%{transform:scaleY(.2);transform-origin:top;opacity:0}
  40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);transform-origin:bottom;opacity:0}}

/* entrada escalonada */
.moodboard.mb-arm .mb-item,.moodboard.mb-arm .mb-swatch{opacity:0}
.moodboard.mb-arm .mb-item{transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(.86)}
.moodboard.mb-in .mb-item,.moodboard.mb-in .mb-swatch{opacity:1;
  transition-delay:calc(var(--i,0) * 42ms)}
.moodboard.mb-in .mb-item{transform:translate(-50%,-50%) rotate(var(--r,0deg))}

@media (max-width:820px){
  .mb-stage{width:96vw;aspect-ratio:3 / 4}
  .mb-item{width:calc(var(--w) * 1.5)}
  .mb-hero{width:calc(var(--w) * 1.6)}
  .mb-item:nth-of-type(n+12){display:none}
  .mb-swatch{transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(.9)}
}
@media (hover:none){
  .mb-item:hover{transform:translate(-50%,-50%) rotate(var(--r,0deg))}
}

/* ============================================================
   LET'S TALK — CTA a media página (después de Selected work).
   Patrón de hobro.digital reconstruido con nuestro stack: overline +
   palabra cinética partida en letras + arcos "( )" en eco al hover +
   hint "empezar →" + enlace magnético (js/talk.js).
   ============================================================ */
.talk{position:relative;isolation:isolate;overflow:clip;
  padding:clamp(96px,17vw,220px) var(--gap);
  display:flex;flex-direction:column;align-items:center;gap:clamp(22px,3.5vw,46px);
  text-align:center;background:var(--ink)}
.talk::before{content:"";position:absolute;left:50%;top:52%;z-index:-1;
  width:min(1100px,120%);aspect-ratio:2/1;transform:translate(-50%,-50%);
  background:radial-gradient(50% 60% at 50% 50%,rgba(228,0,185,.10),transparent 72%);pointer-events:none}

.talk-link{display:inline-flex;flex-direction:column;align-items:center;
  gap:clamp(16px,2.6vw,38px);text-decoration:none;color:var(--paper)}
/* en una sola línea horizontal (pedido de la clienta); en celular usa todo el ancho */
.talk-over{max-width:none;white-space:nowrap;
  font:400 clamp(14px,1.55vw,19px)/1.5 var(--font-body);color:var(--muted);
  opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--rev-ease),transform .7s var(--rev-ease)}
.talk.is-in .talk-over{opacity:1;transform:none}

.talk-main{display:flex;align-items:center;justify-content:center;
  gap:clamp(8px,1.8vw,34px)}

.talk-word{font:400 clamp(52px,15vw,232px)/.86 var(--font-display);
  letter-spacing:-.025em;text-transform:uppercase;white-space:nowrap;color:var(--paper)}
.talk-word .tl-c{display:inline-block;
  opacity:0;transform:translateY(.5em) rotate(3deg);
  transition:opacity .55s var(--rev-ease),transform .55s var(--rev-ease),color .3s var(--ease);
  transition-delay:calc(var(--i,0) * 28ms)}
.talk-word .tl-sp{width:.28em}
.talk.is-in .talk-word .tl-c{opacity:1;transform:none}
.talk-link:hover .talk-word .tl-c{color:var(--brand);transform:translateY(-.055em);
  transition-delay:calc(var(--i,0) * 12ms)}

.talk-arc{position:relative;flex:0 0 auto;display:block;
  width:clamp(16px,2.3vw,42px);height:clamp(88px,13vw,210px)}
.talk-arc svg{position:absolute;inset:0;width:100%;height:100%;display:block;
  fill:var(--paper);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.talk-arc svg:nth-child(1){opacity:1}
.talk-arc svg:nth-child(2),.talk-arc svg:nth-child(3){opacity:0}
.talk:not(.is-in) .talk-arc svg:nth-child(1){opacity:0;transform:scaleY(.4)}
/* eco al hover: los arcos 2 y 3 aparecen desplazados hacia afuera */
.talk-link:hover .talk-arc--l svg:nth-child(2){opacity:.5;transform:translateX(-42%)}
.talk-link:hover .talk-arc--l svg:nth-child(3){opacity:.22;transform:translateX(-92%);transition-delay:.05s}
.talk-link:hover .talk-arc--r svg:nth-child(2){opacity:.5;transform:translateX(42%)}
.talk-link:hover .talk-arc--r svg:nth-child(3){opacity:.22;transform:translateX(92%);transition-delay:.05s}
.talk-link:hover .talk-arc--l svg:nth-child(1){transform:translateX(-8%)}
.talk-link:hover .talk-arc--r svg:nth-child(1){transform:translateX(8%)}

.talk-hint{display:inline-flex;align-items:center;gap:8px;
  font:500 var(--chrome)/1 var(--font-mono);text-transform:uppercase;letter-spacing:.16em;
  color:var(--muted)}
.talk-hint-tap{display:none}
.talk-hint-ar{display:inline-block;color:var(--brand);
  transition:transform .3s var(--ease)}
.talk-link:hover ~ .talk-hint .talk-hint-ar{transform:translateX(7px)}
@media (prefers-reduced-motion:no-preference){
  .talk-hint-ar{animation:talkNudge 1.9s var(--ease) infinite}
}
@keyframes talkNudge{0%,60%,100%{transform:translateX(0)}80%{transform:translateX(5px)}}

@media (hover:none){
  .talk-hint-tap{display:inline}
  .talk-link:active .talk-word .tl-c{color:var(--brand)}
}

/* reduced motion global */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;
    transition-duration:.01ms!important;transition-delay:0s!important}
  .grain{animation:none}
  .moodboard.mb-arm .mb-item,.moodboard.mb-arm .mb-swatch{opacity:1}
  .moodboard.mb-arm .mb-item{transform:translate(-50%,-50%) rotate(var(--r,0deg))}
}

/* ============================================================
   MOBILE — misma calidad, mismo diseño, animaciones activas.
   Ajusta gutters, ritmo vertical y escala tipográfica para
   teléfonos (los canvas y animaciones ya corren en touch:
   hero.js, dose-scenes.js, services.js, pool.js, dose.js). El arte
   ASCII (BRIDGE + dos rostros) lo escala js/site.js para que
   siempre quepa. Aquí solo layout y tipografía.
   ============================================================ */
@media (max-width:640px){
  :root{
    --gap:16px;
    --band:clamp(52px,13vw,86px);
    --label-col:92px;
    --chrome:12px;
  }

  /* ---- hero ---- */
  .pleat{min-height:80svh}
  .pleat .tagline{max-width:none;right:var(--gap);
    bottom:calc(var(--gap) + 56px);font-size:14px;line-height:1.45}
  .pleat .hero-cta{padding:12px 16px}

  /* ---- bandas genéricas ---- */
  .band-head{gap:10px;margin-bottom:calc(var(--band) * .5)}
  .band-head h2{font-size:clamp(26px,7.6vw,40px);max-width:none}
  .band-head p{font-size:15.5px}

  /* ---- about ---- */
  #about .eyebrow{margin-bottom:16px}
  #about .band-head h2{font-size:clamp(25px,8vw,40px);line-height:1.06}

  /* grano desactivado en móvil: mix-blend-mode:overlay se renderiza
     distinto en Safari iOS y sobre las zonas oscuras grandes se ve como
     una capa gris con textura, no como grano. En desktop se mantiene. */
  .grain{display:none}

  /* ---- the method / BRIDGE ---- */
  #process .band-head p{font-size:15.5px}
  .bridge-banner{margin-bottom:18px}
  .step{padding:26px 0}
  .step .big-n{font-size:clamp(38px,13vw,58px)}
  .step .step-body h3{font-size:clamp(22px,6.6vw,30px)}
  .step .step-body p{font-size:15.5px}

  /* ---- what we do ---- */
  #included .band-head p,#work .band-head p{font-size:clamp(16px,4.6vw,18.5px);line-height:1.55}
  .svc-cell{padding:20px}
  .svc-cell-head{gap:10px}
  .svc-cell-head h3{font-size:clamp(20px,6.4vw,26px)}
  .svc-line{font-size:14.5px;max-width:none}
  .svc-canvas{aspect-ratio:4/3}

  /* ---- case study ---- */
  .cs-ch-head{padding:clamp(22px,6vw,34px) 0}
  .cs-ch-ico{width:42px}
  .cs-ch-head{padding-right:62px}
  .cs-ch-ico{margin-top:-21px}
  .cs-ch-t{font-size:clamp(20px,6vw,30px)}
  .cs-ch.is-open .cs-ch-n{font-size:clamp(46px,17vw,88px)}
  .cs-ch.is-open .cs-ch-t{font-size:clamp(26px,8vw,44px)}
  .cs-ch--reto .cs-ch-body{max-width:none}
  .cs-ch--reto .cs-ch-body p{font-size:clamp(21px,6.4vw,32px)}
  .cs-ch--reto .cs-ch-body p + p{font-size:clamp(16.5px,4.8vw,20px)}
  .cs-ch--enfoque .cs-ch-body{max-width:none}
  .cs-ch--enfoque .cs-ch-body p{font-size:clamp(16.5px,4.6vw,20px)}
  .cs-dev li{font-size:clamp(16px,5vw,20px);padding:16px 2px}
  .cs-result{font-size:clamp(22px,6.8vw,36px)}
  .cs-result::before{width:44px;margin-bottom:22px}

  /* ---- moodboard ---- */
  .moodboard{padding:calc(64px + var(--gap)) var(--gap) var(--band)}
  .mb-head .eyebrow{margin-bottom:10px}
  .mb-title{font-size:clamp(30px,10vw,52px)}
  .mb-tagline{font-size:11px}
  .mb-pitch{font-size:15px;max-width:none}
  .mb-stage{width:100%;aspect-ratio:1/1;margin-top:24px}
  .mb-item{width:calc(var(--w) * 1.75)}
  .mb-hero{width:calc(var(--w) * 2)}
  .mb-item:nth-of-type(n+9){display:none}
  .mb-swatch{transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(.78)}
  .mb-swatch-rgb{display:none}
  .mb-foot p{font-size:12.5px;max-width:none}
  .mb-cue{bottom:12px}

  /* ---- The Dose · masthead ---- */
  .dose-masthead{overflow:clip;margin-bottom:clamp(16px,4vw,36px)}
  .dose-mast-title{margin-top:14px}
  .dose-mast-txt{font-size:clamp(34px,11.5vw,58px)}
  .dose-mast-lead{margin-top:24px;font-size:15.5px}
  .dose-mast-topics{margin-top:24px}
  .dose-mast-topics li{font-size:clamp(15px,4.6vw,18px);padding:11px 2px}

  /* ---- The Dose · preview (grid de tarjetas) ---- */
  .dose-tail-head{padding-bottom:4px}
  .dose-grid{gap:20px 0;margin-top:20px}
  .dose-card-media{aspect-ratio:2/1}
  .dose-card-title{font-size:15.5px}
  .dose-more{padding:20px;letter-spacing:.1em}

  /* ---- The Dose · archivo ---- */
  .dose-page{padding:calc(64px + var(--gap)) var(--gap) var(--band)}
  .dose-page-head{padding-bottom:clamp(24px,7vw,44px)}
  .dose-page-head h1{font-size:clamp(38px,13vw,72px)}
  .dose-page-head p{font-size:15.5px}
  .dose-filters{gap:6px;margin-top:clamp(24px,7vw,44px)}
  .dose-filter{font-size:10px;padding:8px 10px}

  /* ---- The Dose · entrada ---- */
  .dose-article{padding:calc(64px + var(--gap)) var(--gap) 0}
  .dose-art-head{padding-bottom:clamp(26px,8vw,48px)}
  .dose-art-n{font-size:clamp(40px,13vw,66px)}
  .dose-art-title{font-size:clamp(29px,8.6vw,48px)}
  .dose-art-meta{gap:12px}
  .dose-body{max-width:none;margin-top:clamp(34px,10vw,60px)}
  .dose-body p{font-size:17px}
  .dose-body p.lead{font-size:clamp(19px,5.8vw,26px)}
  .dose-body h2{font-size:clamp(22px,6.4vw,30px)}
  .dose-body blockquote{margin:1.6em 0}
  .dose-body blockquote p{font-size:clamp(20px,6vw,28px)}
  .dose-nav{margin-top:clamp(48px,14vw,90px)}
  .dose-nav-link{flex-basis:100%}

  /* ---- faq ---- */
  .faq-item summary{font-size:clamp(18.5px,5.4vw,23px)}
  .faq-item .faq-n{margin-right:10px}
  .faq-item .a{max-width:none;font-size:16.5px}
  .faq-item .faq-note{max-width:none;font-size:16.5px}

  /* ---- contacto (el título escalonado va más abajo, junto a let's talk) ---- */
  .cr-fill,.contact-row{padding:24px}
  .contact-row .cta-text{font-size:clamp(21px,6.4vw,30px);max-width:none}
  .contact-alt{font-size:14px}

  /* ---- footer ---- */
  .foot-ledger{grid-template-columns:1fr;gap:26px}
  .foot-legal{flex-direction:column;gap:8px;text-align:left}

  /* ---- índice / menú ---- */
  .nav-index-inner{padding-left:var(--gap);padding-right:var(--gap)}
  .ni-name{font-size:clamp(30px,9vw,48px)}
  .nav-index-social{font-size:12px;gap:6px 18px}

  /* ---- let's talk ---- (LET'S TALK va en una sola línea: la escala
     no puede desbordar los ~86% del ancho con los arcos incluidos) */
  .talk{padding:clamp(72px,20vw,130px) var(--gap);gap:18px}
  .talk-word{font-size:clamp(62px,16vw,105px);letter-spacing:-.02em}
  .talk-arc{width:clamp(9px,2.6vw,15px);height:clamp(42px,15vw,86px)}
  .talk-main{gap:4px}
  .talk-over{font-size:14px;max-width:none;white-space:normal}

  /* ---- contacto: el título escalonado no debe desbordar ---- */
  .contact-head{overflow:clip}
  .contact-head h2{font-size:clamp(28px,9vw,46px);max-width:none;letter-spacing:-.02em}
  .contact-h2 .ch-l2{margin-left:clamp(16px,7vw,34px)}
  .contact-head p{font-size:16px;max-width:none}
}

@media (max-width:400px){
  :root{--gap:14px}
  .mb-item:nth-of-type(n+8){display:none}
  .dose-mast-txt{font-size:clamp(31px,12vw,48px)}
  .cs-ch.is-open .cs-ch-t{font-size:clamp(24px,8.4vw,38px)}
  .talk-word{font-size:clamp(50px,16vw,65px)}
  .contact-head h2{font-size:clamp(26px,8vw,34px)}
}