/* ═══════════════════════════════════════════════════════════════
   Archivo variable, self-hosteada. Subseteada a Latin: 643KB de TTF
   quedaron en 96KB de WOFF2, con los dos ejes intactos (wght 100-900,
   wdth 62-125). Sin request a un tercero, sin FOUT y sin que la visita
   de un recruiter pase por los servidores de Google.
   Al mover raiz.css a assets/, estas rutas pasan a ser 'fonts/...'.
   ═══════════════════════════════════════════════════════════════ */
@font-face{
  font-family:'Archivo';
  src:url('fonts/Archivo-var.woff2') format('woff2');
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Archivo';
  src:url('fonts/Archivo-Italic-var.woff2') format('woff2');
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:italic;
  font-display:swap;
}

/* ═══════════════════════════════════════════════════════════════
   raiz.css — sistema compartido por TODAS las paginas
   Gonzalo Fasce · concepto RAIZ / SUPERFICIE

   Dos capas de anotacion, y una regla que las gobierna:
     rojo  #FF4A1C  medidas   — solo existe en modo raiz
     acido #C8FF3D  criterio  — solo existe en modo raiz
   El sitio vivo es acromatico. Si ves color, estas viendo el borrador.

   La monoespaciada tampoco existe fuera del modo raiz.
   El eje de ancho de Archivo carga significado:
     extended (122-125%) para lo que afirma
     condensed (80-88%)  para lo que mide
   ═══════════════════════════════════════════════════════════════ */

:root{
  --void:#0C0C0B;
  --bone:#F0ECE3;
  --ash:#A8A49B;
  --dim:#6E6A61;
  --hair:#1F1F1C;
  --rule:#242421;      /* estructura: enmarca */
  --rule-inset:clamp(12px,1.7vw,26px); /* aire entre la linea y el filo del bloque */
  --rule-soft:#1A1A17; /* estructura secundaria */
  --surface:#131311;
  --red:#FF4A1C;
  --acid:#C8FF3D;
  --sans:'Archivo',Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --p:0;
  --gut:clamp(20px,4.5vw,64px);
  --measure:68ch;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--void);color:var(--bone);font-family:var(--sans);line-height:1.5;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:auto}
::selection{background:var(--acid);color:var(--void)}
/* El markup original trae <hr>. Sin estilar, el browser dibuja su borde
   inset por defecto: de ahi los dividers gruesos y grises. */
hr{border:0;height:1px;background:var(--rule);margin:clamp(40px,6vw,80px) 0}
.lbl{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}

/* ── NAV ─────────────────────────────────────────────────────── */
nav{position:fixed;top:0;left:0;right:0;z-index:250;height:56px;display:flex;align-items:center;
  justify-content:space-between;padding:0 var(--gut);font-size:10px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;background:var(--void)}
/* La nav es fija y el contenido pasa por debajo. El degradado vivia dentro de
   sus 56px, asi que una linea de texto se desvanecia por la mitad y el nombre
   de la nav aterrizaba encima de ella — visible en desktop, roto en mobile,
   donde el .statement es la tipografia mas grande de la pagina. Ahora la banda
   es opaca (la nav siempre se lee sobre fondo propio) y el desvanecido vive
   debajo, donde no hay texto de la nav con que chocar. */
nav::after{content:'';position:absolute;left:0;right:0;top:100%;height:26px;
  background:linear-gradient(var(--void),transparent);pointer-events:none}
nav a{color:var(--dim)}
nav a:hover{color:var(--bone)}
.nav-name{color:var(--bone)!important}
.nav-links{display:flex;gap:24px;align-items:center;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease}
/* visibility y no solo opacity: con opacity:0 los links siguen recibiendo foco
   por teclado, y un usuario de Tab entraria en una nav que todavia no existe. */
body.built .nav-links{opacity:1;visibility:visible;pointer-events:auto}

/* El boton lleva la misma firma que los marcadores del margen: punto acido a
   la derecha de la palabra RAIZ. Asi cada pin de la pagina ensena el boton sin
   explicarlo — son el mismo objeto a dos escalas. Y pesa mas que los links de
   la nav a proposito: no es navegacion, es un modo. */
.toggle{display:flex;align-items:center;gap:9px;
  border:1px solid var(--dim);background:none;color:var(--bone);cursor:pointer;
  padding:8px 13px;font:inherit;font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;transition:.16s ease}
.toggle::after{content:'';width:7px;height:7px;border-radius:50%;background:var(--acid);
  flex:none;transition:background .16s ease}
.toggle:hover{border-color:var(--bone);background:#17170F}
body.spec .toggle{background:var(--acid);border-color:var(--acid);color:var(--void)}
body.spec .toggle::after{background:var(--void)}
@keyframes tgPulse{
  0%   {border-color:var(--dim);  color:var(--ash);  box-shadow:0 0 0 0 rgba(200,255,61,0)}
  22%  {border-color:var(--acid); color:var(--acid); box-shadow:0 0 0 0 rgba(200,255,61,.5)}
  100% {border-color:var(--dim);  color:var(--ash);  box-shadow:0 0 0 16px rgba(200,255,61,0)}
}
.toggle.pulse{animation:tgPulse 1.4s cubic-bezier(.16,1,.3,1) 2}

/* Mientras la nav no existe, la capa roja la anota igual que al h1. */
.nav-ghost{position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);
  width:64px;height:29px;border:1px dashed var(--red);pointer-events:none;
  opacity:calc(1 - var(--p)*1.4)}

/* ── COMPILADO (solo home) ───────────────────────────────────── */
.compile{height:215vh;position:relative}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;cursor:pointer}
body.built .stage{cursor:auto}

.measure{position:absolute;inset:0;pointer-events:none;opacity:calc(1 - var(--p)*1.4)}
.vline{position:absolute;top:0;bottom:0;width:1px;background:#171715}
.tickbar{position:absolute;top:56px;left:var(--gut);right:var(--gut);height:1px;
  background:repeating-linear-gradient(to right,var(--red) 0 1px,transparent 1px 44px)}
.mk{position:absolute;font-family:var(--mono);font-size:9px;letter-spacing:.04em;color:var(--red)}

.ghost{position:absolute;left:var(--gut);top:36vh;width:min(70vw,940px);
  height:clamp(64px,9.6vw,116px);border:1px dashed var(--red);opacity:calc(1 - var(--p)*1.7)}
.ghost::before{content:attr(data-lbl);position:absolute;left:0;top:-17px;
  font-family:var(--mono);font-size:9px;letter-spacing:.04em;color:var(--red)}
.ghost2{position:absolute;left:var(--gut);top:calc(36vh + clamp(64px,9.6vw,116px) + 42px);
  width:min(44ch,58vw);height:82px;border:1px dashed var(--red);opacity:calc(1 - var(--p)*1.7)}
.ghost2::before{content:'p · lede / 18 / measure 44ch';position:absolute;left:0;top:-17px;
  font-family:var(--mono);font-size:9px;letter-spacing:.04em;color:var(--red)}

.hero{position:absolute;left:var(--gut);right:var(--gut);top:36vh}
.hero h1{font-size:clamp(42px,9.6vw,116px);font-weight:800;font-stretch:88%;line-height:.92;
  letter-spacing:-.045em;max-width:14ch;
  opacity:calc(var(--p)*2.6 - .2);clip-path:inset(0 calc(100% - var(--p)*145%) 0 0)}
.hero h1 em{font-style:normal;font-stretch:125%;letter-spacing:-.05em}
.hero p{margin-top:34px;max-width:44ch;font-size:clamp(15px,1.4vw,18px);line-height:1.58;color:var(--ash);
  opacity:calc(var(--p)*3 - 1.5);transform:translateY(calc((1 - var(--p))*14px))}
.hero .lbl{display:block;margin-top:26px;opacity:calc(var(--p)*4 - 2.7)}

.cue{position:absolute;left:var(--gut);bottom:28px;font-size:9.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red);opacity:calc(1 - var(--p)*2.3)}
.cue i{display:inline-block;font-style:normal;animation:bob 1.7s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ── ESTRUCTURA COMUN ────────────────────────────────────────────
   Las verticales grises no son las de la raiz. Las rojas MIDEN — doce
   columnas parejas, tintadas, y solo existen en el borrador. Estas
   ENMARCAN: son tres, permanentes, y caen sobre bordes reales de
   composicion (los dos margenes y el filo de la columna de texto).
   El contenido se apoya encima y las interrumpe, como sobre una hoja. */
.wrap{padding:0 var(--gut);position:relative;
  background-image:
    linear-gradient(var(--rule-soft),var(--rule-soft)),
    linear-gradient(var(--rule-soft),var(--rule-soft)),
    linear-gradient(var(--rule-soft),var(--rule-soft));
  background-size:1px 100%,1px 100%,1px 100%;
  background-repeat:no-repeat;
  background-position:
    calc(var(--gut) - var(--rule-inset)) 0,
    calc(var(--gut) + (100% - var(--gut)*2) * 0.5833 + var(--rule-inset)) 0,
    calc(100% - var(--gut) + var(--rule-inset) - 1px) 0}
.wrap > *{position:relative}
.head{display:flex;justify-content:space-between;align-items:baseline;
  padding:clamp(56px,9vw,116px) 0 26px}
.head h2{font-size:clamp(19px,2.1vw,25px);font-weight:700;font-stretch:92%;letter-spacing:-.02em}

/* ── HOME · filas de caso ────────────────────────────────────── */
.case{display:grid;grid-template-columns:minmax(0,40px) minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(20px,4vw,64px);align-items:start;padding:clamp(34px,5vw,60px) 0;
  border-top:1px solid var(--rule);transition:.25s ease}
.case:last-of-type{border-bottom:1px solid var(--rule)}
.case:hover{background:var(--surface)}
.case-idx{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--dim);padding-top:6px}
.case-tag{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
/* Bold extended: el mismo gesto que "raiz" en el hero (Archivo wdth 125).
   Al ensanchar, el mismo texto ocupa ~40% mas, por eso baja el cuerpo y se
   afloja el tracking. Los tres numeros a tocar, en orden:
   font-size, font-stretch, letter-spacing. */
.case .case-title{margin:14px 0 16px;font-size:clamp(25px,3.3vw,43px);font-weight:800;font-stretch:122%;
  line-height:1.0;letter-spacing:-.025em;max-width:19ch}
.case-desc{font-size:15px;line-height:1.62;color:var(--ash);max-width:54ch}
.case-go{margin-top:24px;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.case-fig{text-align:right}
.case-fig b{display:block;font-size:clamp(56px,9vw,132px);font-weight:800;font-stretch:80%;
  line-height:.82;letter-spacing:-.055em;color:var(--bone)}
.case-fig span{display:block;margin-top:14px;font-size:11.5px;line-height:1.55;color:var(--dim);
  max-width:24ch;margin-left:auto}

/* ── HOME · principios ───────────────────────────────────────── */
.leads{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule)}
.lead{padding:32px 28px 40px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.lead:nth-child(3n){border-right:none}
.lead-n{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--dim)}
.lead h3{margin:16px 0 12px;font-size:17.5px;font-weight:700;font-stretch:94%;letter-spacing:-.02em;line-height:1.18}
.lead p{font-size:14px;line-height:1.62;color:var(--ash)}

/* ── CIERRE + FOOTER ─────────────────────────────────────────── */
.close{padding:clamp(60px,10vw,140px) 0 clamp(50px,7vw,90px)}
.close h2{font-size:clamp(28px,4.6vw,60px);font-weight:800;font-stretch:86%;line-height:.98;
  letter-spacing:-.04em;max-width:22ch}
.close p{margin-top:26px;max-width:44ch;font-size:16px;line-height:1.6;color:var(--ash)}
.close a.mail{display:inline-block;margin-top:28px;font-size:clamp(18px,2.2vw,28px);font-weight:700;
  font-stretch:92%;letter-spacing:-.02em;border-bottom:2px solid var(--bone);padding-bottom:3px}
.close a.mail:hover{color:var(--ash);border-bottom-color:var(--ash)}
.close-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:40px}
.close-actions a{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--hair);padding:13px 18px;color:var(--ash);transition:.18s ease}
.close-actions a:hover{border-color:var(--bone);color:var(--bone)}

footer{padding:34px var(--gut) 56px;border-top:1px solid var(--rule);display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:16px;
  font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
footer a:hover{color:var(--bone)}
.f-links{display:flex;gap:20px}
/* El idioma vive al pie y no en la nav: arriba solo el nombre, el CV y el
   toggle. Un selector mas en la barra le quitaba disciplina justo donde el
   sitio la necesita. */
.lang-switch{display:flex;gap:8px;align-items:center}
.lang-switch b{color:var(--bone);font-weight:600}
.lang-switch .sep{color:var(--hair)}

/* ═══ PAGINAS DE CASO ════════════════════════════════════════════
   Sin compilado: el teatro de armado es la presentacion de la home
   y repetirlo en cada caso seria un peaje. Acá la nav ya esta puesta
   y el boton late una vez por sesion.
   ════════════════════════════════════════════════════════════════ */
/* El respiro bajo la nav cuelga del body y no de <main>: el About no tiene
   <main>, y :first-of-type sobre .wrap tampoco servia porque antes hay dos
   divs (la grilla y el hint). Sobre el body funciona en las cuatro paginas
   sin tocar el markup — la nav es fixed, asi que no se mueve. */
body.case-page{padding-top:clamp(90px,14vh,150px)}
.case-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:10px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:22px}
/* Con Archivo cargada de verdad, 84px a 122% de ancho mandaba el titulo mas
   largo a cinco lineas y se comia la apertura. Una extended ocupa cerca de un
   40% mas que la condensed con la que lo calcule a ciegas: baja el cuerpo y se
   ensancha la medida para compensar. */
h1.case-title{font-size:clamp(30px,4.4vw,60px);font-weight:800;font-stretch:120%;line-height:1.0;
  letter-spacing:-.03em;max-width:21ch}
.case-subtitle{margin-top:28px;max-width:52ch;font-size:clamp(16px,1.5vw,19.5px);line-height:1.58;color:var(--ash)}

/* Apertura: el argumento a la izquierda, la pieza a la derecha. La imagen
   se acota — a ancho completo se come el viewport y el caso empieza por una
   ilustracion en vez de por una idea. */
.case-intro{margin-top:clamp(40px,6vw,72px);display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);align-items:end}
/* La ilustracion de apertura va en negativo. Es coherente con la regla que
   ya gobierna el resto: las capturas son evidencia y no se tocan, las
   ilustraciones son concepto y pueden invertirse. El hue-rotate devuelve el
   azul a azul despues de invertir la luminancia.
   El filtro se aplica al elemento entero, borde incluido: el 1px de #2B2B26
   que habia aca salia invertido en #D4D4D9 y la ilustracion quedaba enmarcada
   en blanco. Sin borde, y el fondo de respaldo vive en el contenedor, que no
   esta filtrado — si estuviera en la imagen tambien se invertiria y
   parpadearia en blanco mientras carga. */
.case-intro-image{background:var(--void)}
.case-intro-image img{display:block;filter:invert(1) hue-rotate(180deg) contrast(.96)}
.case-intro-text p{max-width:var(--measure);font-size:16px;line-height:1.72;color:var(--ash);margin-bottom:20px}
@media (max-width:900px){.case-intro{grid-template-columns:1fr;gap:32px}
  .case-intro-image{order:-1}}

/* Los capitulos numerados: el numero es dato (condensed) y el titulo afirma
   (extended). Nada de "00 · SECCION" en mono — ese patron es el tell. */
.section{padding:clamp(52px,7vw,96px) 0;border-top:1px solid var(--rule)}
.section-label{display:flex;align-items:baseline;gap:18px;margin-bottom:30px}
.section-label .num{font-size:clamp(34px,4.4vw,58px);font-weight:800;font-stretch:80%;
  line-height:.8;letter-spacing:-.05em;color:#2E2E29;flex:none}
.section-label .dot{display:none}
.section-label .name{font-size:clamp(19px,2.3vw,28px);font-weight:800;font-stretch:110%;
  letter-spacing:-.025em;line-height:1.08;color:var(--bone);text-transform:none}
/* ── Coda ─────────────────────────────────────────────────────
   La demo no fue parte del encargo: apareció en paralelo. Numerarla
   como capitulo hacia que el caso cerrara dos veces — "El resultado"
   y despues otra cosa. Aca la senal es la ausencia: es el unico
   bloque sin numeral gigante, y un kicker dice por que esta. */
.section-label--extra .kicker{display:block;margin-bottom:10px;font-family:var(--mono);
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.section-label--extra .name{font-stretch:120%}

.section p,.block p,.chapter p{max-width:var(--measure);font-size:16px;line-height:1.72;
  color:var(--ash);margin-bottom:20px}
.section h3,.chapter h3{margin:38px 0 14px;font-size:19px;font-weight:700;font-stretch:96%;
  letter-spacing:-.02em;color:var(--bone)}
.section strong,.chapter strong{color:var(--bone);font-weight:600}
.section a.inline-link,.chapter a.inline-link{border-bottom:1px solid var(--dim)}
.section a.inline-link:hover{border-bottom-color:var(--bone);color:var(--bone)}

/* ── Ritmo editorial ──────────────────────────────────────────
   El caso dejaba de ser texto/imagen/separador/texto: cada capitulo
   es una grilla de 12 y cada pieza ocupa un tramo distinto. El texto
   vive siempre en la izquierda; las figuras alternan de ancho y de
   anclaje para que el scroll tenga cadencia y no una sola nota. */
.section{display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:clamp(14px,1.8vw,26px);align-content:start}
.section > *{grid-column:1/8}
/* La alineacion es el default; el desplazamiento es una decision marcada.
   Antes habia una alternancia por nth-of-type que corria una figura de cada
   dos: ritmo mecanico, que donde no corresponde no se lee como intencion
   sino como error de alineacion. */
.section .figure,.section .img-full{grid-column:1/11}
.section .figure--wide{grid-column:1/13}
/* Una figura "wide" tiene que llenar la caja de contenido. El techo generico
   de 76vh la achicaba de 1312 a 1214 y quedaba flotando adentro de su tramo.
   86vh le alcanza a una 16:9 a ancho completo y sigue entrando en pantalla. */
.section .figure--wide img{max-height:86vh}
/* Texto e imagen compartiendo fila. La grilla los acomoda sola: el bloque
   toma las columnas 1-6 y la figura entra en las 7-12 de la misma fila. */
.section .chapter--side{grid-column:1/7}
.section .figure--side{grid-column:7/13;align-self:start;margin-top:0}
.section .figure--side img{max-height:70vh}
@media (max-width:900px){.section .chapter--side,.section .figure--side{grid-column:auto}}
.section .statement{grid-column:1/9}
.section .metrics-strip{grid-column:1/13}
.section .figure--bleed{grid-column:1/13;
  margin-left:calc(var(--gut)*-1);margin-right:calc(var(--gut)*-1)}
.section .figure--bleed img{border-left:none;border-right:none;
  /* A sangre = lo mas ancha posible SIN dejar de entrar en pantalla.
     Sin techo llegaba a los dos bordes pero una infografia de 90x160 quedaba
     mas alta que la ventana y no se podia leer entera. Con techo y ancho auto,
     la que entra sangra de verdad y la que no se centra un poco mas angosta:
     el limite lo pone la imagen, no una excepcion escrita a mano. */
  width:auto;max-width:100%;max-height:92vh;margin:0 auto}
/* el epigrafe no sangra con la imagen: vuelve a la caja de texto */
.figure--bleed figcaption{padding:0 var(--gut)}

/* Las capturas son evidencia real: NO se invierten ni se tiñen.
   Y ninguna puede pedir scroll para verse entera: 76vh es el techo. */
.figure,.img-full,.pair{margin:clamp(22px,3vw,40px) 0}
.figure img,.img-full img,.pair img{
  border:1px solid #2B2B26;background:#fff;
  width:auto;max-width:100%;max-height:76vh}
.pair img{max-height:58vh}
figcaption{margin-top:14px;font-size:12.5px;line-height:1.6;color:var(--dim);max-width:60ch}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,22px)}
.pair-label{display:block;margin-top:10px}

/* ── KPIs del cierre del caso ────────────────────────────────── */
.metrics-strip{display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--hair);border:1px solid var(--hair);
  margin:clamp(40px,6vw,80px) 0}
.metric{background:var(--void);padding:28px 24px 32px}
.metric-value{display:block;font-size:clamp(38px,5vw,68px);font-weight:800;font-stretch:80%;
  line-height:.84;letter-spacing:-.05em;color:var(--bone)}
.metric-label{display:block;margin-top:14px;font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);line-height:1.5}

/* El pull-quote: lo unico que se dice en extended grande dentro de un caso.
   Va scopeado a `.section` porque `.section p` (0,1,1) le ganaba a `.statement`
   (0,1,0) y le imponia el interlineado del cuerpo: 44px con lh 1.72. */
.section .statement,.statement{max-width:24ch;margin:clamp(50px,7vw,96px) 0;
  font-size:clamp(24px,3.4vw,44px);font-weight:800;font-stretch:118%;
  line-height:1.04;letter-spacing:-.035em;color:#C9C5BC}
/* El enfasis es acromatico, como todo el sitio vivo: el color sigue
   significando una sola cosa, y es que estas en el borrador. */
.section .statement strong,.statement strong{color:var(--bone);font-weight:800}

/* La tabla de herramientas de Singular. La habia borrado en la limpieza junto
   con .case-table, que si estaba muerta: sin estilos quedaba como una tabla
   cruda del browser. Filas separadas por hairline, encabezado en versalitas. */
.tools-table{width:100%;border-collapse:collapse;margin:clamp(26px,3.4vw,40px) 0;font-size:14px}
.tools-table th{text-align:left;font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);padding:0 18px 11px 0;border-bottom:1px solid var(--rule)}
.tools-table td{padding:13px 18px 13px 0;border-bottom:1px solid var(--rule);
  color:var(--ash);vertical-align:top;line-height:1.55}
.tools-table tr td:first-child{font-weight:700;font-stretch:104%;color:var(--bone);width:1%;white-space:nowrap}
.tools-table tr:last-child td{border-bottom:none}

/* Enlace a la demo, dentro de un epigrafe. */
.demo-link{display:inline-block;margin-top:8px;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ash);
  border-bottom:1px solid var(--dim)}
.demo-link:hover{color:var(--bone);border-bottom-color:var(--bone)}

.pair-label{font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin-bottom:10px}

.case-nav{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:clamp(44px,6vw,80px) 0;border-top:1px solid var(--rule);
  font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ash)}
.case-nav a:hover{color:var(--bone)}

/* ═══ ABOUT ══════════════════════════════════════════════════════
   La unica pagina donde hay una foto. La home argumenta; esta cuenta.
   ════════════════════════════════════════════════════════════════ */
.about-intro{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(32px,5vw,80px);align-items:start;
  padding-bottom:clamp(50px,7vw,90px)}
.about-text h1{font-size:clamp(34px,5.6vw,72px);font-weight:800;font-stretch:122%;
  line-height:.98;letter-spacing:-.035em;max-width:14ch;margin-bottom:36px}
.about-text p{max-width:var(--measure);font-size:16px;line-height:1.72;color:var(--ash);margin-bottom:22px}
.about-text strong{color:var(--bone);font-weight:600}

.about-photo{border:1px solid #2B2B26;filter:grayscale(1) contrast(1.05)}
.about-meta dl{margin-top:26px;display:grid;grid-template-columns:auto 1fr;
  gap:10px 18px;font-size:12.5px;line-height:1.6}
.about-meta dt{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);padding-top:2px}
.about-meta dd{color:var(--ash)}
.about-meta dd a{border-bottom:1px solid var(--hair)}
.about-meta dd a:hover{color:var(--bone);border-bottom-color:var(--bone)}

.skills-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.skill-group{background:var(--void);padding:26px 24px 32px}
.skill-group-title{font-size:11px!important;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone)!important;margin-bottom:16px!important;
  line-height:1.4!important}
.skill-list{list-style:none}
.skill-list li{font-size:13.5px;line-height:1.5;color:var(--ash);padding:7px 0;
  border-bottom:1px solid var(--rule)}
.skill-list li:last-child{border-bottom:none}

@media (max-width:1000px){.skills-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.about-intro{grid-template-columns:1fr}
  .about-meta{order:-1;max-width:260px}}
@media (max-width:560px){.skills-grid{grid-template-columns:1fr}}

/* ═══ CV ═════════════════════════════════════════════════════════
   Formato Harvard: institucion a la izquierda, fechas a la derecha,
   sobre la misma linea de base. Sin cajas ni grillas con borde — el
   ritmo lo hacen la tipografia, el aire y una regla por capitulo.
   Se mantiene la regla de ancho: fechas condensed, cargos extended.
   ════════════════════════════════════════════════════════════════ */
.cv-page .section > *{grid-column:1/11}
.cv-page .section{border-top:none;padding:clamp(34px,4.4vw,56px) 0 0}

.cv-header{padding-bottom:clamp(28px,4vw,48px);border-bottom:1px solid var(--rule)}
.cv-name{font-size:clamp(36px,5.6vw,76px);font-weight:800;font-stretch:120%;
  line-height:.96;letter-spacing:-.035em}
.cv-title{margin-top:14px;font-size:clamp(15px,1.5vw,19px);font-weight:500;color:var(--ash)}
.cv-contact{margin-top:22px;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 11px;
  font-size:13px;color:var(--ash)}
.cv-contact .sep{color:var(--hair)}
.cv-contact a{border-bottom:1px solid var(--hair)}
.cv-contact a:hover{color:var(--bone);border-bottom-color:var(--bone)}

/* El rotulo del capitulo lleva la regla debajo, no encima: es lo que
   separa un curriculum de una pagina con secciones. */
/* Sin numeros: en un CV, Perfil / Experiencia / Educacion no son capitulos
   en un orden que importe — son secciones estandar. Numerarlas era el mismo
   sistema decorativo que sacamos de la home. En los casos se quedan, porque
   ahi el numero SI es el orden de lectura. */
.cv-page .section-label{align-items:baseline;margin-bottom:0;
  padding-bottom:12px;border-bottom:1px solid var(--rule)}
.cv-page .section-label .name{font-size:clamp(16px,1.8vw,21px);font-stretch:108%}
.cv-page .section > p{margin-top:20px;max-width:74ch}

.exp-entry,.edu-entry{padding:clamp(20px,2.4vw,28px) 0 0}
.exp-header,.edu-header{display:flex;justify-content:space-between;align-items:baseline;
  gap:24px;flex-wrap:wrap}
/* Especificidad: al pasar a <h3>, la regla generica `.section h3` (0,1,1) le
   ganaba a `.exp-company` (0,1,0) y les imponia el margen del cuerpo. */
.cv-page .exp-company,.cv-page .edu-institution{font-size:clamp(16px,1.7vw,20px);font-weight:800;font-stretch:112%;
  letter-spacing:-.015em;line-height:1.2;color:var(--bone)}
.exp-dates,.edu-dates{font-size:12.5px;font-weight:700;font-stretch:80%;letter-spacing:.03em;
  color:var(--dim);white-space:nowrap}
.exp-role,.edu-degree{margin-top:5px;font-size:14px;font-weight:500;color:var(--ash)}
.exp-items{list-style:none;margin-top:14px}
.exp-items li{position:relative;padding-left:18px;margin-bottom:9px;
  font-size:14.5px;line-height:1.6;color:var(--ash);max-width:76ch}
.exp-items li::before{content:'';position:absolute;left:0;top:10px;width:8px;height:1px;
  background:var(--dim)}
.exp-items li:last-child{margin-bottom:0}

/* Habilidades e idiomas: columnas de texto, sin recuadros. */
.cv-page .skills-grid{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,3vw,44px);background:none;border:none;margin-top:24px}
.cv-page .skill-group{background:none;padding:0}
.cv-page .skill-group-title{font-size:10.5px!important;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)!important;margin-bottom:10px!important;line-height:1.4!important}
.cv-page .skill-list li{font-size:13.5px;line-height:1.55;color:var(--ash);
  padding:3px 0;border-bottom:none}
.lang-list{display:flex;flex-wrap:wrap;gap:0 44px;margin-top:24px}
.lang-item{display:flex;align-items:baseline;gap:10px;padding:0}
.lang-item b{font-size:15px;font-weight:700;font-stretch:106%;color:var(--bone)}
.lang-item span{font-size:12.5px;color:var(--ash);letter-spacing:0;text-transform:none;font-weight:400}

@media (max-width:900px){
  .exp-header,.edu-header{gap:4px}
  .cv-page .skills-grid{grid-template-columns:repeat(2,1fr)}
  .lang-list{gap:0 28px}
}
@media (max-width:560px){.cv-page .skills-grid{grid-template-columns:1fr}}

/* Un CV tiene que poder imprimirse. En papel el negro no sirve:
   se invierte a tinta sobre blanco y se apaga todo lo que no es contenido. */
@media print{
  @page{size:A4;margin:15mm 14mm}
  :root{--void:#fff;--bone:#111;--ash:#333;--dim:#666;--rule:#d5d5d5;--hair:#dcdcdc;--surface:#fff}
  body.case-page{padding-top:0;background:#fff;color:#111}
  nav,.grid-ov,.spec-hint,.note,.pin,footer,.close{display:none!important}
  .wrap{background-image:none;padding:0}
  /* Lo que no se puede partir son los items, no los capitulos: con
     break-inside en la seccion entera, Experiencia saltaba completa. */
  .cv-page .section{padding:22px 0 0}
  .exp-entry,.edu-entry,.skill-group,.lang-item{break-inside:avoid}
  .cv-header{padding-bottom:18px}
  .cv-name{font-size:30px}
  .cv-title{margin-top:6px;font-size:13px}
  .cv-contact{margin-top:12px;font-size:11px}
  .cv-page .section-label{padding-bottom:8px}
  .cv-page .section-label .name{font-size:15px}
  .cv-page .section > p{margin-top:12px;font-size:12px;line-height:1.55}
  .exp-entry,.edu-entry{padding-top:15px}
  .exp-company,.edu-institution{font-size:15px}
  .exp-dates,.edu-dates{font-size:10.5px}
  .exp-role,.edu-degree{margin-top:3px;font-size:11.5px}
  .exp-items{margin-top:9px}
  .exp-items li{font-size:11px;line-height:1.45;margin-bottom:5px;padding-left:14px}
  .cv-page .skills-grid{margin-top:14px;gap:22px}
  .cv-page .skill-list li{font-size:10.5px;padding:2px 0}
  .lang-list{margin-top:14px}
  a{color:#111;text-decoration:none}
  .cv-contact dd a .arrow,.about-meta dd a .arrow,.cv-contact a .arrow{display:none}
}

/* ═══ MODO RAIZ ══════════════════════════════════════════════════
   Las notas NUNCA estan en el flujo: son absolutas y solo cambian de
   opacidad. Por eso el contenido del modo superficie no se mueve un
   pixel al switchear. La posicion vertical la calcula el JS.
   ════════════════════════════════════════════════════════════════ */
.note{position:absolute;z-index:120;right:var(--gut);width:min(420px,36vw);
  padding:14px 16px;background:#111110;border:1px solid #262622;
  border-left:2px solid var(--acid);
  font-family:var(--mono);font-size:11px;line-height:1.68;letter-spacing:-.01em;
  color:var(--acid);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;transform:translateY(-4px)}
.note::before{content:'';position:absolute;left:-30px;top:19px;width:28px;height:1px;
  background:var(--acid);opacity:.45}
.note::after{content:'';position:absolute;left:-33px;top:16.5px;width:5px;height:5px;
  border-radius:50%;background:var(--acid);opacity:.45}
body.spec .note{opacity:1;visibility:visible;transform:none}

/* Marcador de nota. En superficie, cada bloque anotado deja una marca
   discreta en el margen. No explica nada: senala que hay algo abajo y,
   al tocarlo, abre la raiz. Es la unica pieza que evita que la capa se
   pierda sin recurrir a un cartel. */
.pin{position:absolute;z-index:110;right:var(--gut);display:flex;align-items:center;gap:9px;
  background:none;border:0;cursor:pointer;padding:5px 0;color:var(--dim);
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  opacity:.5;transition:opacity .2s ease,color .2s ease}
.pin span{transition:color .2s ease}
.pin::after{content:'';width:7px;height:7px;border-radius:50%;background:var(--acid);flex:none}
.pin:hover{opacity:1;color:var(--acid)}
body.spec .pin{display:none}
.note b{color:#EAFFB0;font-weight:600}
.note--fix{border-left-style:dashed;padding-top:26px}
.note--fix::before,.note--fix::after{top:31px}
.note--fix i{position:absolute;top:9px;left:16px;font-style:normal;font-size:8.5px;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#7E9E28}
.note pre{margin-top:9px;font:inherit;color:#9ECF2E;white-space:pre-wrap}

.stage .note{pointer-events:auto}
.note--root{top:10vh;max-height:48vh;overflow:auto}
.note--h1{top:auto;bottom:9vh}
.note--root::before,.note--root::after,.note--h1::before,.note--h1::after{display:none}

body.spec [data-spec]{position:relative;outline:1px dashed rgba(255,74,28,.55);outline-offset:10px}
body.spec [data-spec]::after{content:attr(data-spec);position:absolute;top:-10px;left:-10px;
  transform:translateY(-100%);font-family:var(--mono);font-size:9px;letter-spacing:.03em;
  color:var(--void);background:var(--red);padding:3px 6px;white-space:nowrap;z-index:80}

.grid-ov{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:0;
  transition:opacity .22s ease;padding:0 var(--gut)}
body.spec .grid-ov{opacity:1}
.grid-ov div{height:100%;display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.grid-ov i{background:rgba(240,236,227,.03)}

.spec-hint{position:fixed;left:var(--gut);bottom:18px;z-index:260;font-family:var(--mono);
  font-size:10px;letter-spacing:.02em;color:var(--ash);opacity:0;transition:opacity .3s ease .4s;
  background:var(--surface);border:1px solid var(--hair);padding:7px 11px;pointer-events:none}
body.spec .spec-hint{opacity:1;animation:hintOut .4s ease 5s forwards}
@keyframes hintOut{to{opacity:0}}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width:1000px){.leads{grid-template-columns:repeat(2,1fr)}
  .lead:nth-child(3n){border-right:1px solid var(--hair)}
  .lead:nth-child(2n){border-right:none}}
@media (max-width:900px){
  .case{grid-template-columns:1fr;gap:20px}
  .case-idx{padding-top:0}
  .case-fig{text-align:left}
  .case-fig span{margin-left:0}
  .vline{display:none}
  .lead{border-right:none}
  .grid-ov{display:none}
  .ghost{width:calc(100% - var(--gut)*2);height:128px}
  .ghost2{top:calc(36vh + 128px + 34px);width:min(44ch,74vw);height:88px}
  .pair{grid-template-columns:1fr}
  .section{display:block}
  .tools-table{font-size:12.5px}
  .wrap{background-image:none}
  .figure img,.img-full img,.pair img{max-height:none;width:100%}
  .section-label{gap:12px}
  /* Se va la capa acida entera. Sin cartel de disculpa: el visitante de
     mobile no recibe una version recortada, recibe el sitio. */
  .note,.pin,.toggle,.mk--tg,.spec-hint{display:none}
}
@media (max-width:900px){.metrics-strip{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.leads{grid-template-columns:1fr}.lead{border-right:none}
  .metrics-strip{grid-template-columns:1fr}}
/* ── El gag se ve una vez ──────────────────────────────────────
   El compilado es un bloque de 215vh: el chiste se cuenta mientras
   lo atravesas. Pero una vez contado, esas dos pantallas y media
   pasan a ser un peaje — scrolleabas para arriba y volvia a empezar,
   volvias de un caso y otra vez. Visto el chiste, el bloque se
   plancha al alto de su contenido y el hero queda como un hero
   normal. Es el mismo estado que ya recibian mobile y
   reduced-motion, ahora tambien como estado final del desktop. */
body.gag-visto .compile{height:auto}
body.gag-visto .stage{position:relative;height:auto;padding:24vh 0 12vh;cursor:auto}
body.gag-visto .measure,body.gag-visto .ghost,body.gag-visto .ghost2,
body.gag-visto .cue,body.gag-visto .nav-ghost{display:none}
body.gag-visto .hero{position:relative;top:0}
body.gag-visto .hero h1,body.gag-visto .hero p,body.gag-visto .hero .lbl{
  opacity:1!important;clip-path:none!important;transform:none!important}

@media (prefers-reduced-motion:reduce){
  .compile{height:auto}
  .stage{position:relative;height:auto;padding:24vh 0 12vh;cursor:auto}
  .measure,.ghost,.ghost2,.cue,.nav-ghost{display:none}
  .hero{position:relative;top:0}
  .hero h1,.hero p,.hero .lbl{opacity:1!important;clip-path:none!important;transform:none!important}
  .nav-links{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
}