/* ==========================================================================
   Portafolio — Iván Santana Jacinto

   Lenguaje visual: NEO-BRUTALISMO EDITORIAL.

   La estructura es brutalista y la letra es de revista. Esa es toda la idea:
   el marco grita y el texto no.

   · Fondo papel. La página vive sobre crema, no sobre negro.
   · Contorno negro grueso (2 px) en el perímetro de cada pieza; dentro de la
     pieza, filete fino. Lo grueso delimita, lo fino organiza.
   · Esquinas redondeadas generosas: 18 px en paneles, píldora en controles.
   · Sombra dura, sin difuminar: la pieza proyecta un bloque, no un halo.
   · Display en serif de una sola gordura, caja mixta y cuerpo grande, con la
     cursiva como énfasis. El color plano queda para una sola frase por
     pantalla, no para todos los titulares.
   · Etiquetas y cifras en monoespaciada, numeración visible (№ 01).
   · Una banda negra a sangre (Resultados) que corta el recorrido.

   Capas:
   1. Tokens · 2. Base · 3. Piezas · 4. Cromo · 5. Hero · 6. Vitrina
   7. Secciones · 8. Contacto y pie · 9. Utilidades · 10. Responsive
   11. Accesibilidad e impresión
   ========================================================================== */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Papel y tinta */
  --ink:        #F2EBE0;   /* fondo de página (papel) */
  --ink-2:      #E8DFD1;   /* papel más tostado, para bandas */
  --surface:    #FBF7F0;   /* panel claro */
  --surface-2:  #EDE5D8;
  --text:       #14120F;
  --text-strong:#000000;
  --muted:      #55524B;

  /* El contorno es negro de verdad: es el material del estilo */
  --line:       #14120F;
  --line-strong:#000000;
  --hair:       rgba(20, 18, 15, .16);   /* filete suave para separadores */

  /* El verde de marca vive en dos versiones y no son intercambiables:
       --accent      es BLOQUE. Siempre lleva tinta negra encima.
       --accent-deep es TINTA. Para texto, trazo y barra fina sobre papel.
     El brillante sobre crema da 1.4:1, así que usarlo como color de letra
     equivale a no escribir nada. */
  --accent:     #00E5A8;
  --accent-deep:#00674E;
  --accent-ink: #000000;
  --accent-dim: #C7F9E9;
  --violet:     #B9A9FF;
  --amber:      #FF6B35;   /* naranja: el segundo bloque de color */

  --font-ui:      "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Una sola gordura: cualquier font-weight distinto de 400 en esta familia
     lo sintetiza el navegador y se nota. */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --bw: 2px;               /* grosor del contorno */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;

  /* Sombra dura: desplazamiento sin difuminar */
  --plate: 4px 4px 0 var(--line);
  --plate-lg: 7px 7px 0 var(--line);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --section-y: clamp(76px, 9vw, 140px);
  --header-h: 68px;
}

/* Tema oscuro: el papel se vuelve tinta y el contorno se aclara */
:root[data-theme="dark"] {
  --ink:        #0B0A09;
  --ink-2:      #131110;
  --surface:    #1A1815;
  --surface-2:  #221F1B;
  --text:       #F5F1EA;
  --text-strong:#FFFFFF;
  --muted:      #A39C90;

  --line:       #F5F1EA;
  --line-strong:#FFFFFF;
  --hair:       rgba(245, 241, 234, .18);

  --accent:     #00E5A8;
  --accent-deep:#00E5A8;   /* sobre tinta, el brillante ya es legible */
  --accent-ink: #04140F;
  --accent-dim: #0D3A2D;
  --violet:     #8B7BFF;
  --amber:      #FF6B35;
}

/* ── 2. Base ───────────────────────────────────────────────────────────── */
html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 14px);
}
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .4s var(--ease-out), color .4s var(--ease-out);
}

img, svg, canvas, video { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.005em; line-height: 1.02; margin: 0; }
p { margin: 0 0 1em; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
code, pre { font-family: var(--font-mono); font-size: .86em; }
::selection { background: var(--accent); color: var(--accent-ink); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--bw) solid var(--amber);
  outline-offset: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 400;
  transform: translateY(-200%);
  background: var(--accent); color: var(--accent-ink);
  border: var(--bw) solid var(--line); border-radius: 999px;
  padding: 11px 20px; font-family: var(--font-mono); font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  box-shadow: var(--plate);
  transition: transform .2s var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

.shell { width: 100%; max-width: 1340px; margin-inline: auto; padding-inline: clamp(16px, 3.4vw, 44px); }

.section { padding-block: var(--section-y); position: relative; }
.section--case { background: var(--ink); }
.section--flow { background: var(--ink-2); border-block: var(--bw) solid var(--line); }
.section--stack { overflow: clip; }
.section--path { background: var(--ink); }
.section--contact { background: var(--ink-2); border-top: var(--bw) solid var(--line); }

/* Banda negra a sangre: corta el recorrido como la página negra de una
   revista. En tema oscuro se invierte a papel. */
.section--evidence {
  --ink:        #14120F;
  --ink-2:      #1A1714;
  --surface:    #201C18;
  --surface-2:  #272320;
  --text:       #F7F3EC;
  --text-strong:#FFFFFF;
  --muted:      #ADA69A;
  --line:       #F7F3EC;
  --line-strong:#FFFFFF;
  --hair:       rgba(247, 243, 236, .2);
  --accent:     #00E5A8;
  --accent-deep:#00E5A8;
  --accent-ink: #04140F;
  --accent-dim: #0D3A2D;
  background: var(--ink); color: var(--text);
}
:root[data-theme="dark"] .section--evidence {
  --ink:        #F2EBE0;
  --ink-2:      #E8DFD1;
  --surface:    #FBF7F0;
  --surface-2:  #EDE5D8;
  --text:       #14120F;
  --text-strong:#000000;
  --muted:      #55524B;
  --line:       #14120F;
  --line-strong:#000000;
  --hair:       rgba(20, 18, 15, .16);
  --accent:     #00E5A8;
  --accent-deep:#00674E;
  --accent-ink: #000000;
  --accent-dim: #C7F9E9;
}

/* Rótulo de sección: número y un filete que atraviesa */
.section__head { max-width: 920px; margin-bottom: clamp(36px, 5vw, 68px); }
.section__kicker {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text); margin: 0 0 22px;
}
/* El filete se traza con el scroll: GSAP anima --rule de 0 a 1 y aquí solo
   se escala. Animar una variable en lugar del ancho evita el reflow. */
.section__kicker::after {
  content: ""; flex: 1; height: var(--bw); background: var(--line);
  transform: scaleX(var(--rule, 1)); transform-origin: left center;
}

.section__title {
  font-size: clamp(2.5rem, 6.6vw, 5.2rem);
  line-height: .98; margin: 0 0 20px;
}
/* El énfasis es la cursiva, no un bloque de color: el bloque se reserva para
   una sola frase en toda la pantalla. */
.section__title em { font-style: italic; }
.section__sub { color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.62; margin: 0; max-width: 58ch; }
.section__sub strong { color: var(--text); font-weight: 600; }
.h3 { font-size: 1.5rem; margin-bottom: 18px; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.6; }

/* ── 3. Piezas: panel, botón, píldora, etiqueta ───────────────────────── */

/* El panel es la unidad del estilo: contorno grueso, esquina redondeada y
   sombra dura. Casi todo en la página es un panel. */
.stack__group, .score, .scorer, .slide, .flow__diagram, .screen__frame,
.case__player, .slide__media, .mailto__link {
  background: var(--surface);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-lg);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 24px; border: var(--bw) solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--text);
  font-family: var(--font-mono); font-size: .78rem; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; box-shadow: var(--plate);
  transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out), background-color .15s;
}
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--ghost { background: transparent; }
.btn--sm { padding: 10px 16px; font-size: .7rem; box-shadow: 3px 3px 0 var(--line); }
.btn--lg { padding: 17px 30px; font-size: .82rem; }
/* Al pasar el puntero la pieza se hunde sobre su propia sombra */
/* El hover solo existe donde hay un puntero que se pueda quitar de encima. En
   táctil el estado se queda pegado tras el toque: el botón del menú se quedaba
   ámbar y los pills, hundidos sobre su sombra. */
@media (hover: hover) {
  .btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--line); }
}
@media (hover: hover) {
  .btn--sm:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--line); }
}
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--line); }

.link-quiet {
  color: var(--text); font-size: .9rem; text-decoration: none;
  border-bottom: var(--bw) solid var(--line); padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}
.link-quiet:hover { color: var(--amber); border-color: var(--amber); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em;
  color: var(--text); background: var(--surface);
  border: var(--bw) solid var(--line); border-radius: 999px;
  padding: 7px 16px; margin: 0; box-shadow: 3px 3px 0 var(--line);
}
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex: none; }

.badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .12em;
  padding: 5px 12px; border: var(--bw) solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--text);
}
.badge--live { background: var(--accent); color: var(--accent-ink); }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 190;
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  border: var(--bw) solid var(--line); border-radius: 999px; box-shadow: var(--plate);
  transition: transform .15s var(--ease-out), box-shadow .15s;
}
@media (hover: hover) {
  .to-top:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--line); }
}

/* ── 4. Cromo: arranque, cabecera, menú ───────────────────────────────── */
#boot {
  position: fixed; inset: 0; z-index: 300;
  background: var(--ink); display: grid; place-content: center;
  text-align: center; padding: 24px;
}
html:not(.js-boot) #boot { display: none; }
#boot.is-done { pointer-events: none; }
.boot__mark {
  font-family: var(--font-display); font-size: clamp(3.4rem, 10vw, 5.6rem); font-weight: 400;
  letter-spacing: 0; margin: 0 0 22px; color: var(--text-strong);
}
.boot__log { display: grid; gap: 7px; margin-bottom: 26px; min-height: 5.2em; }
.boot__log li {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .04em; color: var(--muted); opacity: 0;
}
.boot__log li::before { content: "› "; color: var(--amber); }
.boot__bar { width: min(240px, 60vw); height: var(--bw); margin-inline: auto; background: var(--hair); overflow: hidden; }
.boot__bar i { display: block; height: 100%; width: 0; background: var(--accent-deep); }

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 200;
  height: var(--header-h); display: flex; align-items: center;
  background: var(--ink);
  border-bottom: var(--bw) solid transparent;
  transition: border-color .25s, background-color .25s;
}
.site-header.is-stuck { border-bottom-color: var(--line); }
.site-header__inner { display: flex; align-items: center; gap: 18px; width: 100%; }

.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.brand__mark {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none;
  background: var(--accent); color: var(--accent-ink);
  border: var(--bw) solid var(--line); border-radius: 999px;
  font-family: var(--font-display); font-size: .82rem; font-weight: 700; letter-spacing: -.02em;
}
.brand__text { display: grid; line-height: 1.16; }
.brand__text strong { font-family: var(--font-display); font-weight: 400; font-size: 1.12rem; letter-spacing: 0; }
.brand__text small { font-family: var(--font-mono); font-size: .62rem; color: var(--muted); letter-spacing: .06em; }

/* Navegación: píldoras con contorno, como en las referencias */
.nav__list { display: flex; gap: 6px; }
.nav__list a {
  display: block; padding: 8px 14px; border-radius: 999px;
  border: var(--bw) solid transparent;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text); text-decoration: none;
  transition: border-color .18s, background-color .18s, color .18s;
}
.nav__list a:hover { border-color: var(--line); }
.nav__list a.is-current { background: var(--accent); color: var(--accent-ink); border-color: var(--line); }

.site-header__actions { display: flex; align-items: center; gap: 8px; }

.icon-btn {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: var(--bw) solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--text); cursor: pointer;
  transition: background-color .18s, color .18s;
}
@media (hover: hover) {
  .icon-btn:hover { background: var(--amber); color: #FFFFFF; }
}
#theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] #theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] #theme-toggle .icon-moon { display: none; }

/* `.icon-btn` centra con grid; al pasar a flex en columna, `place-items`
   solo aporta el eje transversal y las tres líneas quedaban pegadas al borde
   de arriba: 9 px de desvío, medidos. De ahí el justify-content explícito. */
.nav-burger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.nav-burger span { display: block; width: 16px; height: 2px; background: currentColor; transition: transform .25s var(--ease-out), opacity .2s; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.scroll-progress { position: absolute; inset: auto 0 calc(var(--bw) * -1); height: var(--bw); background: transparent; }
.scroll-progress i { display: block; height: 100%; width: 0; background: var(--amber); }

.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0; z-index: 199;
  background: var(--ink);
  padding: clamp(14px, 3vw, 26px) clamp(16px, 5vw, 44px) clamp(24px, 5vw, 36px);
  display: flex; flex-direction: column; gap: 16px;
  overflow-y: auto; overscroll-behavior: contain;
}
.mobile-nav nav { display: grid; align-content: start; gap: 10px; }
.mobile-nav nav a {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; text-decoration: none;
  border: var(--bw) solid var(--line); border-radius: 999px;
  background: var(--surface);
  font-family: var(--font-display); font-size: 1.35rem; letter-spacing: 0;
  box-shadow: 3px 3px 0 var(--line);
}
.mobile-nav nav a i { font-family: var(--font-mono); font-style: normal; font-size: .66rem; color: var(--amber); }
/* El bloque de acción se ancla abajo, al alcance del pulgar. El filete evita
   que el hueco de arriba parezca un descuido: lo convierte en margen. */
.mobile-nav__foot {
  margin-top: auto; padding-top: 22px; border-top: 1px solid var(--hair);
  display: grid; gap: 14px; justify-items: start;
}
.mobile-nav__foot .btn { width: 100%; }

/* ── 5. Hero ───────────────────────────────────────────────────────────── */
/* El hero es un panel: el papel de la página se ve alrededor y dentro va el
   video con la tipografía enorme encima. Es la composición de la referencia. */
.hero {
  position: relative;
  min-height: calc(100svh - var(--header-h) - 24px);
  margin: calc(var(--header-h) + 12px) 12px 12px;
  display: flex; flex-direction: column; justify-content: flex-end;
  border: var(--bw) solid var(--line); border-radius: var(--r-xl);
  overflow: clip; box-shadow: var(--plate-lg);
  background: #F2EBE0;
  padding-top: 28px;
  transform-origin: 50% 0%;
  will-change: transform;
}

.hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  background: #F2EBE0 url("../video/hero.webp") center/cover no-repeat;
}
/* La escena horizontal recortada a un teléfono dejaba a la vista el borde de
   un anillo y media mancha: se leía como suciedad detrás del texto. Hay una
   composición vertical propia, y el póster acompaña al video. */
@media (max-width: 820px) {
  .hero__bg { background-image: url("../video/hero-sm.webp"); }
}
/* Velo de papel, no de humo: el fondo del hero es crema y el titular es
   negro, así que lo que hay que subir es el crema, no bajar la luz. Más denso
   sobre la columna del texto y casi nulo al otro lado, donde va la pantalla
   enmarcada y conviene ver la escena. */
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(97deg, rgba(242, 235, 224, .92) 0%, rgba(242, 235, 224, .78) 42%, rgba(242, 235, 224, .3) 74%, rgba(242, 235, 224, .12) 100%),
    linear-gradient(180deg, rgba(242, 235, 224, .5) 0%, rgba(242, 235, 224, .1) 26%, rgba(242, 235, 224, .12) 62%, rgba(242, 235, 224, .62) 100%);
}

/* El panel es papel en los dos temas: en oscuro queda como una hoja
   iluminada sobre la tinta, que es justamente el efecto buscado. Por eso los
   tokens se fijan aquí en lugar de heredar. */
.hero__grid {
  --text: #14120F;
  --text-strong: #000000;
  --muted: #4B483F;
  --line: #14120F;
  --hair: rgba(20, 18, 15, .2);
  position: relative; z-index: 2; color: var(--text);
  margin-top: auto; padding-bottom: clamp(26px, 3.4vw, 44px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .86fr);
  gap: clamp(22px, 3.4vw, 52px); align-items: center;
}
.hero__copy { min-width: 0; }

.hero__title {
  /* Tope en 5rem: por encima, «diseño webs que» parte en dos líneas y el
     bloque de color queda descuadrado. */
  font-size: clamp(2.5rem, 6.2vw, 5rem);
  line-height: 1; letter-spacing: -.01em;
  margin: 0 0 clamp(16px, 2vw, 26px);
}
.hero__line { display: block; }
/* Segundo énfasis en cursiva con filete ámbar: el bloque de color ya lo gastó
   «cargan rápido», y dos bloques en un titular es uno de más.

   El filete es un fondo y no un borde justamente para poder trazarlo: se
   anima su background-size, que no provoca reflow. */
.hero__title em {
  font-style: italic;
  padding-bottom: .08em;
  background-image: linear-gradient(var(--amber), var(--amber));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: var(--rule-w, 100%) 3px;
}

/* Frase destacada en bloque de color: es la marca del estilo y garantiza el
   contraste sin depender de ninguna imagen.

   El bloque se pinta de izquierda a derecha al entrar, como un rotulador
   sobre el papel. El valor por reposo es 0 —bloque completo—, así que sin
   JavaScript o con movimiento reducido la frase ya está resaltada. */
.videotext {
  display: inline-block;
  background: var(--accent); color: #000000;
  padding: 0 .1em .03em; margin-inline: -.03em;
  clip-path: inset(0 var(--wipe, 0%) 0 0);
}

.hero__lede { max-width: 48ch; font-size: clamp(1rem, 1.35vw, 1.1rem); margin: 0; }
.hero__lede strong { font-weight: 600; }

.hero__proof { display: flex; flex-wrap: wrap; gap: clamp(14px, 2.4vw, 34px); margin: clamp(18px, 2.2vw, 26px) 0 0; }
.hero__proof li { display: grid; gap: 2px; }
.hero__proof b {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 2.9vw, 2.5rem);
  letter-spacing: -.01em; color: var(--text-strong); line-height: 1;
}
.hero__proof span { font-family: var(--font-mono); font-size: .66rem; color: var(--muted); max-width: 20ch; line-height: 1.4; }

.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: clamp(20px, 2.4vw, 28px); }

.hero__aside {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin: clamp(20px, 2.2vw, 28px) 0 0; font-family: var(--font-mono); font-size: .7rem; color: var(--muted);
}
/* El enlace del CV es el único elemento suelto del hero: sin caja propia se
   pegaba a los botones de arriba y al borde del panel. */
.hero__aside a {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--text); text-decoration: none;
  transition: color .2s, border-color .2s, background-color .2s;
}
.hero__aside a:hover { color: #FFFFFF; background: var(--amber); border-color: var(--amber); }

/* Pantalla enmarcada: el proyecto que está corriendo */
.screen { margin: 0; display: grid; gap: 12px; min-width: 0; }
.screen__frame {
  position: relative; display: block; overflow: hidden; text-decoration: none;
  aspect-ratio: 16 / 10; background: #0B0A09;
  box-shadow: var(--plate);
  transition: transform .18s var(--ease-out), box-shadow .18s;
}
@media (hover: hover) {
  .screen__frame:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--line); }
}
.screen__video {
  position: absolute; inset: 32px 0 0; width: 100%; height: calc(100% - 32px);
  object-fit: cover; object-position: center top;
}
.screen__chrome, .slide__chrome {
  position: absolute; inset: 0 0 auto; z-index: 2;
  display: flex; align-items: center; gap: 6px; height: 32px; padding-inline: 12px;
  background: #FBF7F0; color: #14120F;
  border-bottom: var(--bw) solid #14120F;
}
.screen__chrome i, .slide__chrome i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #14120F; flex: none; }
.screen__chrome b, .slide__chrome b {
  font-family: var(--font-mono); font-size: .64rem; font-weight: 400;
  margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.screen__open, .slide__open {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 8px 14px; border: var(--bw) solid #14120F; border-radius: 999px;
  background: var(--accent); color: #000000;
  opacity: 0; transform: translateY(6px);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.screen__frame:hover .screen__open, .screen__frame:focus-visible .screen__open,
.slide__media:hover .slide__open, .slide__media:focus-visible .slide__open { opacity: 1; transform: translateY(0); }

/* Reproductor: anterior / pausa / siguiente. Vocabulario que ya se conoce,
   en lugar de una fila de fichas numeradas que nadie sabía para qué servía. */
.player { display: grid; gap: 10px; min-width: 0; }
.player__now { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
/* La etiqueta va en bloque: el verde de marca sobre crema no llega a 4.5:1
   como color de texto, y en bloque con tinta negra pasa de sobra. */
.player__tag {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; flex: none;
  background: var(--accent); color: #000000;
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px;
}
.player__now strong {
  font-family: var(--font-display); font-weight: 400; font-size: 1.22rem;
  letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player__track { height: 9px; border: 1px solid var(--line); background: rgba(20, 18, 15, .07); overflow: hidden; }
.player__track i { display: block; height: 100%; width: 0; background: var(--accent-deep); transition: width .18s linear; }
.player__controls { display: flex; align-items: center; gap: 8px; }
.player__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 40px; height: 40px; padding: 0 13px; flex: none;
  border: var(--bw) solid var(--line); border-radius: 999px;
  background: transparent; color: var(--text); cursor: pointer;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  transition: background-color .18s, color .18s;
}
@media (hover: hover) {
  .player__btn:hover { background: var(--accent); color: #000000; }
}
.player__btn[disabled] { opacity: .4; cursor: not-allowed; }
.player__btn svg { fill: currentColor; }
.player__btn--play .icon-play { display: none; }
.player__btn--play[aria-pressed="true"] .icon-play { display: block; }
.player__btn--play[aria-pressed="true"] .icon-pause { display: none; }
.player__count { margin: 0 0 0 auto; font-family: var(--font-mono); font-size: .66rem; color: var(--muted); white-space: nowrap; }
.player__count b { color: var(--text); }

/* ── 6. Vitrina ────────────────────────────────────────────────────────── */
.showcase { padding-block: var(--section-y) 0; position: relative; }
.showcase__head { margin-bottom: clamp(30px, 4vw, 56px); }
.showcase__head .section__title { max-width: 22ch; }

.showcase__stage {
  position: relative;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-bottom: 72px;
}
.showcase__stage::-webkit-scrollbar { display: none; }
html.js-pinned .showcase__stage { overflow: clip; scroll-snap-type: none; display: grid; align-content: center; min-height: min(84svh, 780px); }

.showcase__track { display: flex; gap: clamp(14px, 1.8vw, 28px); padding-inline: clamp(16px, 3.4vw, 44px); width: max-content; }

.slide {
  flex: 0 0 min(86vw, 1040px);
  scroll-snap-align: center;
  display: grid; gap: clamp(14px, 1.6vw, 24px);
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: center; padding: clamp(12px, 1.2vw, 16px);
  box-shadow: var(--plate);
}

.slide__media { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; text-decoration: none; background: var(--ink-2); }
.slide__video, .case__video { position: absolute; inset: 32px 0 0; width: 100%; height: calc(100% - 32px); object-fit: cover; object-position: center top; }
.slide__media--offline { border-style: dashed; }
.slide__fallback {
  position: absolute; inset: 32px 0 0;
  background: linear-gradient(180deg, transparent 40%, rgba(11, 10, 9, .7)), url("../img/thumbs/03.svg") center/cover no-repeat, var(--surface-2);
}
.slide__note {
  position: absolute; inset: auto 12px 12px; z-index: 2;
  font-family: var(--font-mono); font-size: .64rem; line-height: 1.5;
  color: #FFFFFF; background: var(--amber);
  border: var(--bw) solid #14120F; border-radius: 999px; padding: 7px 14px; text-align: center;
}

.slide__body { display: grid; gap: 7px; align-content: start; padding: 6px clamp(6px, .8vw, 12px) 10px; }
.slide__no {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; margin: 0;
  color: var(--accent-ink); background: var(--accent);
  border: var(--bw) solid var(--line); border-radius: 999px; padding: 3px 11px; justify-self: start;
}
.slide__title { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.slide__client { font-family: var(--font-mono); font-size: .7rem; color: var(--muted); margin: 0; }
.slide__desc { font-size: .94rem; line-height: 1.62; color: var(--muted); margin: 7px 0 0; max-width: 58ch; }

/* Ficha de museo: soporte, enfoque y estado. Es lo que distingue esta vitrina
   de una rejilla de tarjetas más. */
.slide__label {
  display: grid; grid-template-columns: auto 1fr; gap: 0 16px;
  margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--hair);
}
.slide__label dt {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); padding-block: 4px;
}
.slide__label dd { margin: 0; font-family: var(--font-mono); font-size: .66rem; color: var(--text); padding-block: 4px; }

/* «Qué se hizo»: la ficha de museo da el resumen y esta lista da el detalle.
   Va dentro de la tarjeta y a la vista, sin desplegable: si hay que hacer clic
   para saber qué hizo alguien, no lo va a hacer nadie. */
.slide__hecho { margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--hair); }
.slide__hecho-t {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 8px;
}
.slide__hecho ul { display: grid; gap: 6px; }
.slide__hecho li {
  position: relative; padding-left: 16px;
  font-size: .84rem; line-height: 1.5; color: var(--text);
}
.slide__hecho li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 2px; background: var(--accent-deep);
}

.showcase__rail {
  position: absolute; inset: auto clamp(16px, 3.4vw, 44px) 24px;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: .68rem; color: var(--muted);
}
.showcase__where { letter-spacing: .16em; text-transform: uppercase; color: var(--text); }
.showcase__count b { color: var(--text); }
.showcase__bar { flex: 1; height: var(--bw); background: var(--hair); overflow: hidden; }
.showcase__bar i { display: block; height: 100%; width: 12.5%; background: var(--accent-deep); transition: width .3s var(--ease-out); }
.showcase__hint { letter-spacing: .14em; text-transform: uppercase; }

/* ── 7. Secciones ─────────────────────────────────────────────────────── */

/* Resultados: cifras enormes sobre la banda negra */
.evidence { display: grid; border-top: var(--bw) solid var(--line); }
.ev {
  display: grid; grid-template-columns: minmax(180px, 24%) 1fr;
  gap: clamp(16px, 3.4vw, 52px); align-items: baseline;
  padding-block: clamp(26px, 3.2vw, 44px); border-bottom: 1px solid var(--hair);
}
.ev:last-child { border-bottom: 0; }
.ev__num {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(3rem, 8.4vw, 6.6rem); line-height: .9; letter-spacing: -.02em;
  color: var(--text-strong); margin: 0;
}
.ev:first-child .ev__num { color: var(--accent); }
.ev__body h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); margin-bottom: 9px; }
.ev__body p { font-size: .95rem; line-height: 1.62; color: var(--muted); margin: 0; max-width: 58ch; }

/* Caso Relay */
.case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .86fr); gap: clamp(24px, 3.4vw, 48px); align-items: start; }
.case__player { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--ink-2); margin-bottom: 20px; box-shadow: var(--plate); }
.case__player:hover .slide__open { opacity: 1; transform: translateY(0); }

.scores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
.score { display: grid; gap: 10px; justify-items: center; text-align: center; text-decoration: none; padding: 18px 10px; transition: background-color .2s; }
@media (hover: hover) {
  a.score:hover { background: var(--accent-dim); }
}
.score__label { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); line-height: 1.4; }
.gauge {
  --val: 0;
  position: relative; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; border: var(--bw) solid var(--line);
  background: conic-gradient(var(--accent-deep) calc(var(--val) * 1%), var(--surface-2) 0);
}
/* El hueco central va por debajo de la cifra: como pseudoelemento final del
   DOM, sin z-index la taparía. */
.gauge::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--surface); z-index: 0; }
.gauge b { position: relative; z-index: 1; font-family: var(--font-mono); font-size: .92rem; color: var(--text); }

.check-list { display: grid; gap: 11px; }
.check-list li { position: relative; padding-left: 28px; font-size: .92rem; color: var(--muted); }
.check-list li strong { color: var(--text); font-weight: 600; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .34em;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: var(--bw) solid var(--line);
}
.case__links { margin: 22px 0 0; }

/* Simulador */
.scorer { position: sticky; top: calc(var(--header-h) + 18px); padding: clamp(18px, 2.2vw, 28px); box-shadow: var(--plate); }
.scorer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.scorer__title { font-size: 1.35rem; }
.scorer__hint { font-size: .8rem; color: var(--muted); margin: 6px 0 0; max-width: 34ch; }
.scorer__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.scorer__result { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 28px); margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--hair); }
.scorer__dial { position: relative; flex: none; }
.scorer__dial svg { transform: rotate(-90deg); }
.dial__track { fill: none; stroke: var(--hair); stroke-width: 10; }
.dial__value { fill: none; stroke: var(--accent-deep); stroke-width: 10; stroke-linecap: butt; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset .6s var(--ease-out); }
.scorer__number { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.scorer__number strong { font-family: var(--font-display); font-weight: 400; font-size: 2.4rem; font-variant-numeric: tabular-nums; color: var(--text-strong); line-height: 1; }
.scorer__number small { font-family: var(--font-mono); font-size: .58rem; color: var(--muted); text-transform: uppercase; letter-spacing: .14em; }
.scorer__routing { display: grid; gap: 11px; flex: 1; min-width: 0; }
.scorer__routing div { display: grid; gap: 2px; }
.scorer__routing dt { font-family: var(--font-mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.scorer__routing dd { margin: 0; font-size: .92rem; font-weight: 600; }
.scorer__routing dd#route-name { font-family: var(--font-display); font-size: 1.22rem; background: var(--accent); color: var(--accent-ink); justify-self: start; padding: 0 8px; }
.scorer__code { margin-top: 18px; }
.scorer__code summary { cursor: pointer; font-family: var(--font-mono); font-size: .72rem; color: var(--muted); }
.scorer__code summary:hover { color: var(--amber); }
.scorer__code pre {
  margin: 12px 0 0; padding: 14px 16px; background: var(--ink-2);
  border: var(--bw) solid var(--line); border-radius: var(--r-sm);
  max-height: 280px; overflow: auto; overscroll-behavior: contain;
  font-size: .7rem; line-height: 1.7; color: var(--muted);
}

.field { display: grid; gap: 6px; align-content: start; }
.field label { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; align-items: baseline; gap: 5px; }
.field label:has(output) { justify-content: space-between; gap: 10px; }
.field select, .field input {
  width: 100%; padding: 11px 12px;
  background: var(--ink); border: var(--bw) solid var(--line); border-radius: var(--r-sm); color: var(--text);
}
.field select {
  appearance: none; cursor: pointer; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.field output { font-family: var(--font-mono); color: var(--text); }
.field input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; padding: 0; border: 0; height: 26px; cursor: pointer; }
.field input[type="range"]::-webkit-slider-runnable-track { height: 10px; border: var(--bw) solid var(--line); background: linear-gradient(90deg, var(--accent) var(--fill, 20%), var(--surface-2) var(--fill, 20%)); }
.field input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: var(--accent); border: var(--bw) solid var(--line); }
.field input[type="range"]::-moz-range-track { height: 10px; border: var(--bw) solid var(--line); background: var(--surface-2); }
.field input[type="range"]::-moz-range-progress { height: 10px; background: var(--accent); }
.field input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: var(--bw) solid var(--line); }

.disclaimer {
  margin-top: clamp(28px, 3.4vw, 46px); padding: 16px 20px;
  border: var(--bw) dashed var(--line); border-radius: var(--r-md);
  font-size: .86rem; color: var(--muted);
}
.disclaimer strong { background: var(--amber); color: #FFFFFF; padding: 0 5px; }

/* Flujo */
.flow { position: relative; }
.flow__inner { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 44px); align-items: center; min-height: 56svh; }
.flow__diagram { padding: clamp(12px, 1.8vw, 22px); overflow-x: auto; box-shadow: var(--plate); }
.flow__diagram svg { min-width: 680px; width: 100%; height: auto; }
.flow__edges path { stroke: var(--line); stroke-opacity: .35; }
.flow__edge--retry { stroke: var(--amber); stroke-opacity: 1; }
.packet { fill: var(--accent-deep); opacity: 0; }
.fnode rect, .fnode circle { fill: var(--surface-2); stroke: var(--line); stroke-width: 2; transition: fill .3s; }
.fnode--guard rect { stroke-dasharray: 5 5; }
.fnode--out rect { fill: var(--violet); }
.fnode--router circle { fill: var(--accent); }
.fnode.is-active rect, .fnode.is-active circle { fill: var(--accent); }
.fnode__t { font-family: var(--font-display); font-size: 17px; font-weight: 400; fill: var(--text); text-anchor: middle; }
.fnode__t--router { font-size: 10px; fill: var(--accent-ink); }
.fnode__s { font-family: var(--font-mono); font-size: 10px; fill: var(--muted); text-anchor: middle; }
.fnode.is-active .fnode__t, .fnode.is-active .fnode__s { fill: var(--accent-ink); }
.flow__retry-label { text-anchor: middle; fill: var(--amber); font-size: 10px; }

.flow__steps { display: grid; gap: 6px; }
.flow__steps li {
  display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: baseline;
  padding: 12px 14px; border: var(--bw) solid transparent; border-radius: var(--r-md);
  font-size: .9rem; color: var(--muted);
  opacity: .4; transition: opacity .3s var(--ease-out), background-color .3s, border-color .3s, color .3s;
}
.flow__steps li b { font-family: var(--font-mono); font-size: .7rem; color: var(--muted); font-weight: 400; }
.flow__steps li.is-active { opacity: 1; background: var(--surface); border-color: var(--line); color: var(--text); box-shadow: 3px 3px 0 var(--line); }
.flow__steps li.is-active b { color: var(--amber); }

.tool-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(28px, 3.4vw, 48px); }
.tool-cloud span {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  padding: 8px 14px; border: var(--bw) solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--text);
  transition: background-color .18s, color .18s;
}
@media (hover: hover) {
  .tool-cloud span:hover { background: var(--accent); color: var(--accent-ink); }
}

/* Proceso: cinco pasos en columnas, cada uno bajo su filete.
   Sin panel ni sombra a propósito: la página ya tiene muchas piezas con marco,
   y esta sección es una lectura, no un objeto. Lo que la ordena es el filete de
   arriba y la cifra grande en serif. */
.proceso { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); }
.paso { padding-top: 16px; border-top: var(--bw) solid var(--line); }
.paso__no {
  font-family: var(--font-display); font-weight: 400; font-size: 2.6rem;
  line-height: 1; letter-spacing: -.01em; color: var(--text-strong); margin: 0 0 12px;
}
.paso:first-child .paso__no { color: var(--accent-deep); }
.paso__t { font-size: 1.22rem; margin-bottom: 8px; }
.paso__d { font-size: .9rem; line-height: 1.6; color: var(--muted); margin: 0; }

@media (max-width: 1100px) {
  .proceso { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; }
}
@media (max-width: 560px) {
  /* En una columna el filete por paso ordena mejor que cualquier tarjeta: la
     sección se lee como un índice. */
  .proceso { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .paso { display: grid; grid-template-columns: 52px 1fr; gap: 0 14px; align-items: baseline; padding-top: 14px; }
  .paso__no { font-size: 1.9rem; margin: 0; grid-row: span 2; }
  .paso__t { font-size: 1.12rem; margin-bottom: 4px; }
}

/* Marquesina */
/* `overflow: clip` en la propia marquesina, no en el body.
   Las filas miden `max-content` —varios miles de píxeles— y confiar en el
   `overflow-x: hidden` del body deja el gesto de arrastre lateral vivo en
   móvil: la página no se desplaza, pero se puede empujar de lado. Se recorta
   donde se produce el desborde. */
.marquee {
  display: grid; gap: 2px; margin-bottom: clamp(40px, 5vw, 76px);
  user-select: none; border-block: var(--bw) solid var(--line); padding-block: 8px;
  overflow: clip;
}
/* Ritmo de paseo, no de teletipo: a 40 s la fila cruzaba a ~37 px/s y con la
   inercia del scroll llegaba al triple. */
.marquee__row { display: flex; width: max-content; animation: marquee 68s linear infinite; }
.marquee__row--reverse { animation-direction: reverse; }
.marquee__row:nth-child(2) { animation-duration: 84s; }
.marquee__row:nth-child(3) { animation-duration: 75s; }
.marquee__set {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.9rem, 4.8vw, 3.8rem); letter-spacing: -.005em;
  white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.1px var(--line);
}
.marquee__row--reverse .marquee__set { color: var(--accent-deep); -webkit-text-stroke: 0; }
@keyframes marquee { from { transform: translate3d(0,0,0) } to { transform: translate3d(-50%,0,0) } }

/* Stack */
.stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.stack__group { padding: 24px 22px; box-shadow: var(--plate); }
.stack__group h3 { font-size: 1.3rem; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.skills { display: grid; gap: 13px; }
.skills li { display: grid; grid-template-columns: 1fr 92px 74px; gap: 12px; align-items: center; font-size: .86rem; }
.skills span { min-width: 0; }
.skills .bar { display: block; height: 10px; border: var(--bw) solid var(--line); background: var(--surface-2); overflow: hidden; position: relative; }
.skills .bar::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--lvl) * 1%);
  background: var(--accent-deep); transform-origin: left; transform: scaleX(var(--bar-scale, 1));
}
.skills b { font-family: var(--font-mono); font-size: .62rem; font-weight: 400; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; text-align: right; }

/* Trayectoria */
.timeline { display: grid; max-width: 920px; position: relative; padding-left: 30px; }
.timeline::before {
  content: ""; position: absolute; left: 6px; top: 14px; bottom: 14px; width: 1px;
  background: var(--line);
  transform: scaleY(var(--draw, 1)); transform-origin: top center;
}
.tl { position: relative; padding: 20px 0 34px 6px; }
.tl__dot { position: absolute; left: -30px; top: 26px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: var(--bw) solid var(--line); will-change: transform; }
.tl--edu .tl__dot { background: var(--violet); }
.tl__when {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent); border: var(--bw) solid var(--line);
  border-radius: 999px; padding: 3px 11px; margin: 0 0 12px; display: inline-block;
}
.tl--edu .tl__when { background: var(--violet); color: var(--text-strong); }
.tl__what { font-size: clamp(1.35rem, 2.2vw, 1.85rem); margin-bottom: 6px; }
.tl__where { font-family: var(--font-mono); font-size: .76rem; color: var(--muted); margin: 0 0 14px; }
.tl ul { display: grid; gap: 8px; }
.tl ul li { position: relative; padding-left: 18px; font-size: .92rem; line-height: 1.62; color: var(--muted); }
.tl ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: 9px; height: var(--bw); background: var(--amber); }
.tl ul li strong { color: var(--text); font-weight: 600; }

/* ── 8. Contacto y pie ────────────────────────────────────────────────── */
.contact__title { font-size: clamp(2.6rem, 7.4vw, 6rem); line-height: .98; margin: 0 0 22px; max-width: 20ch; }
.contact__sub { color: var(--muted); font-size: clamp(1.02rem, 1.4vw, 1.16rem); line-height: 1.62; max-width: 46ch; margin: 0 0 clamp(30px, 3.4vw, 46px); }

.mailto { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.mailto__link {
  flex: 1 1 420px; min-width: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.4vw, 30px);
  text-decoration: none; background: var(--accent); color: var(--accent-ink);
  box-shadow: var(--plate-lg);
  transition: transform .18s var(--ease-out), box-shadow .18s;
}
@media (hover: hover) {
  .mailto__link:hover { transform: translate(3px, 3px); box-shadow: 4px 4px 0 var(--line); }
}
.mailto__label { font-family: var(--font-display); font-weight: 400; letter-spacing: -.01em; font-size: clamp(1.15rem, 3vw, 2.3rem); overflow-wrap: anywhere; }
.mailto__arrow { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; border: var(--bw) solid var(--line); background: var(--surface); color: var(--text); }
.mailto__copy {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 20px; cursor: pointer; border-radius: 999px;
  background: var(--surface); border: var(--bw) solid var(--line); color: var(--text);
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: var(--plate);
  transition: transform .15s var(--ease-out), box-shadow .15s, background-color .18s;
}
@media (hover: hover) {
  .mailto__copy:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--line); }
}
.mailto__copy.is-done { background: var(--accent); color: var(--accent-ink); }
.mailto__status { flex: 1 1 100%; margin: 0; font-family: var(--font-mono); font-size: .74rem; color: var(--text); min-height: 1.3em; }

.contact__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: clamp(32px, 3.4vw, 50px); border-top: 1px solid var(--hair); padding-top: 24px; }
.contact__meta li { font-size: .9rem; color: var(--text); }
.contact__meta span { display: block; font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 5px; }
.contact__meta a { display: inline-block; padding-block: 2px; color: var(--text); text-decoration: none; border-bottom: var(--bw) solid var(--amber); }
.contact__meta a:hover { color: var(--amber); }

.site-footer { border-top: var(--bw) solid var(--line); padding-block: 36px; background: var(--ink); }
.site-footer__inner { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; }
.site-footer__name { font-family: var(--font-display); font-size: 1.28rem; margin: 0; }
.site-footer__role { font-family: var(--font-mono); font-size: .68rem; color: var(--muted); margin: 4px 0 0; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 8px; }
.site-footer__nav a {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text); text-decoration: none;
  border: var(--bw) solid var(--line); border-radius: 999px; padding: 6px 13px;
  transition: background-color .18s, color .18s;
}
.site-footer__nav a:hover { background: var(--accent); color: var(--accent-ink); }
.site-footer__meta { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em; color: var(--muted); margin: 0; }

/* ── 9. Utilidades y estados de animación ─────────────────────────────── */
html.js-motion [data-anim="fade-up"],
html.js-motion [data-anim="stagger-item"],
html.js-motion [data-anim="stagger"] > * { opacity: 0; }

/* Palanca global de movimiento (botón de pausa del reproductor).
   Es el mecanismo que pide WCAG 2.2.2 para el contenido que se anima solo. */
html[data-motion-paused="true"] *,
html[data-motion-paused="true"] *::before,
html[data-motion-paused="true"] *::after { animation-play-state: paused !important; }

/* ── 10. Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .nav { display: none; }
  .nav-burger { display: flex; }
  .flow__inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .flow__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* El diagrama mide 680 px: por debajo de 900 px quedaba en una caja con
   scroll horizontal donde solo se veían dos de siete nodos. Se cambia por un
   recorrido vertical que el scroll va encendiendo igual. */
@media (max-width: 900px) {
  .flow__diagram { display: none; }
  .flow__inner { min-height: 0; }
  .flow__steps { grid-template-columns: minmax(0, 1fr); position: relative; padding-left: 30px; gap: 8px; }
  .flow__steps::before { content: ""; position: absolute; left: 5px; top: 22px; bottom: 22px; width: var(--bw); background: var(--line); }
  .flow__steps li { position: relative; }
  .flow__steps li::before {
    content: ""; position: absolute; left: -30px; top: 18px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--surface); border: var(--bw) solid var(--line);
    transition: background-color .3s;
  }
  .flow__steps li.is-active::before { background: var(--accent); }
}

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 3vw, 26px); }
  /* En una columna el marco se comería la pantalla entera del visitante: en
     tableta llegaba a 465 px de alto solo el fotograma. Con tope se lee como
     una figura con márgenes, que es lo que es. */
  .screen { max-width: 560px; margin-inline: auto; width: 100%; }
  .hero__scrim {
    background: linear-gradient(180deg, rgba(242,235,224,.72) 0%, rgba(242,235,224,.82) 30%, rgba(242,235,224,.86) 70%, rgba(242,235,224,.74) 100%);
  }
  .case { grid-template-columns: minmax(0, 1fr); }
  .scorer { position: static; }
  .stack { grid-template-columns: minmax(0, 1fr); }
  .slide { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .scores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scorer__form { grid-template-columns: minmax(0, 1fr); }
  .scorer__result { flex-direction: column; align-items: flex-start; }
  .flow__steps { grid-template-columns: minmax(0, 1fr); }
}

/* Por debajo de 460 px la cabecera tenía cinco piezas y el botón de menú se
   salía del viewport. Se recorta lo prescindible en orden de importancia. */
@media (max-width: 460px) {
  .brand__text small { display: none; }
  .brand__text strong { white-space: nowrap; }
  .site-header__inner { gap: 10px; }
  .site-header__actions { gap: 6px; }
}
@media (max-width: 400px) {
  .site-header .btn--sm { padding-inline: 11px; font-size: .64rem; letter-spacing: .04em; }
}
@media (max-width: 340px) {
  .brand__text { display: none; }
}
@media (max-width: 300px) {
  .site-header .btn--sm { display: none; }
}

@media (max-width: 720px) {
  :root { --section-y: 64px; }
  .hero { margin: calc(var(--header-h) + 8px) 8px 8px; border-radius: var(--r-lg); min-height: calc(100svh - var(--header-h) - 16px); }
  .hero__title { font-size: clamp(1.9rem, 8.6vw, 2.9rem); }
  .hero__lede { font-size: .93rem; }
  /* Tres columnas iguales con filete arriba y abajo, como una tira de datos
     de revista. Con `flex-wrap` las tres cifras caían a distinta altura según
     lo que ocupaba cada rótulo y la fila parecía descuadrada. */
  .hero__proof {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px; align-items: start; margin-top: 20px;
    padding-block: 14px; border-block: 1px solid var(--hair);
  }
  .hero__proof b { font-size: 1.35rem; }
  .hero__proof span { font-size: .58rem; line-height: 1.45; max-width: none; }
  .hero__cta { gap: 10px; margin-top: 20px; }
  .hero__cta .btn { flex: 1 1 100%; }
  .hero__cta .btn--ghost { flex: 1 1 auto; }
  /* 12 px dejaba la píldora del CV pegada al botón de arriba, como si fuera
     parte del mismo grupo. */
  .hero__aside { gap: 6px 12px; margin-top: 26px; }
  .player__now strong { font-size: .92rem; }
  .player__btn { height: 38px; min-width: 38px; padding-inline: 11px; }
  .ev { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .skills li { grid-template-columns: 1fr 58px; }
  .skills b { display: none; }
  .timeline { padding-left: 24px; }
  .tl__dot { left: -24px; }
  .slide { flex-basis: 88vw; }
  .mailto__link { flex-basis: 100%; }
  .site-footer__inner { align-items: flex-start; }
}

/* Pantallas bajas: el hero se aprieta en vez de empujar el reproductor fuera */
@media (max-height: 780px) and (min-width: 981px) {
  .hero__title { font-size: clamp(1.9rem, 4.6vw, 3.6rem); }
  .hero__proof { margin-top: 14px; }
  .hero__proof b { font-size: 1.5rem; }
  .hero__cta { margin-top: 16px; }
}
@media (max-height: 720px) and (max-width: 720px) {
  .hero__title { font-size: clamp(1.7rem, 7.2vw, 2.3rem); }
  .hero__lede { font-size: .88rem; }
  .hero__proof { margin-top: 12px; }
  .hero__proof b { font-size: 1.1rem; }
  .hero__cta { margin-top: 14px; }
  .hero__cta .btn { flex: 1 1 auto; }
}

/* ── 11. Accesibilidad e impresión ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html.js-motion [data-anim] { opacity: 1 !important; transform: none !important; }
  #boot { display: none !important; }
  .marquee__row { animation: none; }
  .flow__steps li { opacity: 1; }
}

@media print {
  .site-header, .mobile-nav, .to-top, .player__controls, .marquee,
  .hero__bg, .hero__scrim, #boot, .scorer__code, .showcase__rail, .slide__open { display: none !important; }
  body { background: #fff; color: #000; }
  .hero { margin: 0; border: 0; box-shadow: none; min-height: 0; background: #fff; padding-top: 0; }
  .section, .showcase { padding-block: 20px; page-break-inside: avoid; }
  .showcase__stage { overflow: visible; }
  .showcase__track { display: grid; width: auto; gap: 16px; padding: 0; }
  .slide { flex-basis: auto; box-shadow: none; }
  .videotext { background: #000; color: #fff; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .72em; color: #555; }
}