/* ============================================================
   jorgebuffa.com — única hoja de estilos del sitio
   © 2026 Jorge Buffa. Todos los derechos reservados.
   Diseño: Claude Design (artboards aprobados) · Conversión: Claude Code
   Generado por scripts/aplicar-parches-diseno.py sobre docs/diseno-exportado/export-v3/entrega: no editar a mano.
   ============================================================ */
/* ============================================================
   jorgebuffa.com — hoja única del sitio
   Valores transcriptos de los artboards aprobados:
   Inicio.dc.html · Trabajos v2.dc.html · Trabajo v2.dc.html
   Curriculum.dc.html · Iconos.dc.html
   Mobile-first (diseño 390) → 768 → 1100 → 1440.
   Sin reglas de importacion, sin recursos de terceros, sin estilos inline.
   ============================================================ */

/* ---------- 1. Fuentes propias ---------- */

@font-face { font-family: "Doto"; src: url("../fuentes/doto-variable.woff2") format("woff2"); font-weight: 800 900; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fuentes/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fuentes/plex-mono-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- 2. Tokens ---------- */

:root {
  --color-bg: #efefeb;
  --color-surface: #f6f6f3;
  --color-ink: #141414;
  --color-lienzo: #deddd7;
  --color-ink-suave: rgba(20, 20, 20, 0.62);
  --color-hairline: rgba(20, 20, 20, 0.18);
  --color-inverso: #f2f1ec;
  --color-velo: rgba(20, 20, 20, 0.96);
  --opacidad-muted: 0.62;
  --reticula: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect x='7' y='7' width='1' height='1' fill='%23141414' fill-opacity='.34'/%3E%3C/svg%3E");

  --fuente-display: "Doto", ui-monospace, monospace;
  --fuente-texto: "IBM Plex Mono", ui-monospace, monospace;

  --t-meta: 9px;
  --t-overline: 10px;
  --t-dato: 11px;
  --t-cuerpo: 13px;
  --t-destacado: 19px;
  --tr-overline: 0.22em;
  --tr-meta: 0.18em;
  --tr-dato: 0.12em;
  --tr-display: 0.02em;

  --e-1: 8px;  --e-2: 16px; --e-3: 24px; --e-4: 32px; --e-5: 40px;
  --e-6: 48px; --e-7: 56px; --e-8: 64px; --e-9: 72px; --e-10: 80px;
  --e-12: 96px; --e-15: 120px;

  --radio: 0;
  --sombra: none;

  --topbar-alto: 72px;
  --topbar-alto-grande: 128px;
  --topbar-alto-compacta: 56px;
  --tactil: 44px;

  --dur-tema: 0.5s;
  --dur-media: 0.4s;
  --dur-menu: 1.1s;
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #121211;
    --color-surface: #1b1b19;
    --color-ink: #e8e7e1;
    --color-lienzo: #0a0a09;
    --color-ink-suave: rgba(232, 231, 225, 0.68);
    --color-hairline: rgba(232, 231, 225, 0.18);
    --color-velo: rgba(10, 10, 9, 0.97);
    --opacidad-muted: 0.68;
    --reticula: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect x='7' y='7' width='1' height='1' fill='%23E8E7E1' fill-opacity='.34'/%3E%3C/svg%3E");
  }
}

/* El conmutador del artboard sobrescribe el sistema (JS pone data-tema). */
[data-tema="claro"] {
  --color-bg: #efefeb; --color-surface: #f6f6f3; --color-ink: #141414; --color-lienzo: #deddd7;
  --color-ink-suave: rgba(20, 20, 20, 0.62); --color-hairline: rgba(20, 20, 20, 0.18);
  --color-velo: rgba(20, 20, 20, 0.96); --opacidad-muted: 0.62;
  --reticula: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect x='7' y='7' width='1' height='1' fill='%23141414' fill-opacity='.34'/%3E%3C/svg%3E");
}
[data-tema="oscuro"] {
  --color-bg: #121211; --color-surface: #1b1b19; --color-ink: #e8e7e1; --color-lienzo: #0a0a09;
  --color-ink-suave: rgba(232, 231, 225, 0.68); --color-hairline: rgba(232, 231, 225, 0.18);
  --color-velo: rgba(10, 10, 9, 0.97); --opacidad-muted: 0.68;
  --reticula: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect x='7' y='7' width='1' height='1' fill='%23E8E7E1' fill-opacity='.34'/%3E%3C/svg%3E");
}
[data-reticula="off"] { --reticula: none; }

/* ---------- 3. Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  position: relative;
  isolation: isolate;   /* para que el z-index -1 de la retícula quede dentro del body */
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--fuente-texto);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dur-tema) ease, color var(--dur-tema) ease;
}
body::before {
  content: "";
  position: absolute;   /* acompaña al scroll; body es el contexto (position: relative) */
  inset: 0;
  z-index: -1;          /* debajo de todo el contenido, encima del color de fondo */
  pointer-events: none;
  background-image: var(--reticula);
}
body.sin-scroll { overflow: hidden; }

h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; } /* el <picture> del helper imagen() no genera caja: el <img> sigue siendo hijo directo para el layout */

/* Barra de scroll invisible en todo el sitio (el scroll sigue funcionando). Decisión de Giorgio. */
html, body, * { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { display: none; width: 0; height: 0; }
a { color: var(--color-ink); text-decoration: none; }
a:hover { color: var(--color-ink); }
button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
canvas { display: block; }

:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; }

.sprite-iconos { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- 4. Utilidades ---------- */

.solo-lectores {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.overline {
  font-size: var(--t-overline); font-weight: 700;
  letter-spacing: var(--tr-overline); text-transform: uppercase;
}
.meta {
  font-size: var(--t-meta); font-weight: 700;
  letter-spacing: var(--tr-meta); text-transform: uppercase;
  color: var(--color-ink-suave);
}
.icono { display: block; flex: none; width: 16px; height: 16px; fill: currentColor; }
.icono--grande { width: 24px; height: 24px; }
.icono--chico { width: 12px; height: 12px; }

/* ---------- 5. Cromo: hamburguesa, controles, menú ---------- */

.chrome {
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
}
.chrome > * { pointer-events: auto; }

.hamburguesa {
  position: absolute;
  left: var(--e-3);
  top: var(--e-2);
  width: 42px;
  height: 42px;
  display: block;
}
.hamburguesa__barra {
  position: absolute;
  left: 0;
  width: 42px;
  height: 6px;
  background: currentColor;
  transition: transform var(--dur-tema) var(--curva);
  display: block;
}
.hamburguesa__barra--uno { top: 12px; }
.hamburguesa__barra--dos { top: 24px; }
.hamburguesa[aria-expanded="true"] .hamburguesa__barra--uno { transform: translateY(6px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] .hamburguesa__barra--dos { transform: translateY(-6px) rotate(-45deg); }

.hamburguesa__texto {
  cursor: pointer;
  position: absolute;
  left: 76px;
  top: 22px;
  height: 16px;
  line-height: 16px;
  font-size: var(--t-overline);
  font-weight: 700;
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  opacity: var(--opacidad-muted);
  display: none;
}

.controles {
  position: absolute;
  right: var(--e-3);
  top: var(--e-3);
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: var(--t-overline);
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
}
.controles__grupo { display: flex; align-items: center; gap: 10px; }
.controles__separador { opacity: var(--opacidad-muted); }
.controles__idioma { font-weight: 700; opacity: var(--opacidad-muted); }
.controles__idioma[aria-current="true"] { opacity: 1; }
.controles__idioma:hover { opacity: 1; }
.controles__boton {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  font-weight: 700;
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
}
.controles__boton--reticula { opacity: 1; }
.controles__boton--reticula[aria-pressed="false"] { opacity: var(--opacidad-muted); }
.controles__marca {
  width: var(--e-1);
  height: var(--e-1);
  display: block;
  border: 1px solid currentColor;
}
.controles__marca--solida { background: currentColor; border: 0; }

/* Menú a página completa. Sin JS: lista al final del documento. */
.menu {
  border-top: 1px solid var(--color-hairline);
  background-color: var(--color-bg);
}
.menu__lista { display: flex; flex-direction: column; }
.menu__enlace {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: var(--e-2) var(--e-3);
  border-bottom: 1px solid var(--color-hairline);
  font-family: var(--fuente-display);
  font-weight: 900;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
}

.js .menu {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 6;
  height: 0;
  overflow: hidden;
  border-top: 0;
  background-image: var(--reticula);
  display: none;
}
.js .menu[data-abierto="true"] { display: block; }
.js .menu__lista {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh; /* dvh: alto visible real en iOS */
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.js .menu__enlace {
  min-height: var(--tactil);
  padding: 0;
  border-bottom: 0;
}
.menu__banda {
  position: fixed;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 7;
  pointer-events: none;
  display: none;
  background-image:
    repeating-linear-gradient(90deg, var(--color-ink) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(90deg, var(--color-ink) 0 4px, transparent 4px 20px);
  background-repeat: repeat-x;
}
.menu__linea {
  position: fixed;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 7;
  pointer-events: none;
  display: none;
  background: var(--color-ink);
}
.js .menu[data-abierto="true"] ~ .menu__banda,
.js .menu[data-abierto="true"] ~ .menu__linea { display: block; }

/* ---------- 6. Topbar (páginas internas) ---------- */

.topbar {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 8;
  height: var(--topbar-alto);
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-hairline);
  transition: height var(--dur-media) var(--curva);
}
.topbar--compacta { height: var(--topbar-alto-compacta); }
.topbar--compacta ~ .chrome .hamburguesa { transform: scale(0.68); transform-origin: left top; }

/* ---------- 7. Inicio ---------- */

.inicio {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh; /* dvh: alto visible real en iOS */
  padding: var(--e-3) var(--e-3) 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.inicio__titulo {
  margin-top: var(--e-7);
  font-family: var(--fuente-display);
  font-weight: 900;
  font-size: 40px;
  line-height: 1;
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
  position: relative;
  z-index: 3;
}
.inicio__intro {
  margin-top: var(--e-2);
  font-size: 12px;
  line-height: 1.8;
  position: relative;
  z-index: 3;
}
.inicio__nav { display: none; }
.inicio__retrato {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  /* Caja fluida con la proporción de la foto (1448×1086): la imagen se ve ENTERA en
     cualquier ancho, apoyada abajo y centrada. Decisión de Giorgio: nunca recortar.
     Tope de alto para que la cabeza nunca suba hasta el texto. */
  width: min(1100px, 100%);
  aspect-ratio: 1448 / 1086;
  max-height: calc(100vh - 20rem);
  max-height: calc(100dvh - 20rem); /* dvh: alto visible real en iOS */
  overflow: hidden;
  z-index: 1;
  cursor: crosshair;
}
.inicio__lienzo { width: 100%; height: 100%; }
.inicio__retrato-imagen { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.js .inicio__retrato-imagen { display: none; }
.inicio__datos,
.inicio__scroll { display: none; }

/* ---------- 8. Trabajos (índice con visor) ---------- */

.trabajos { display: flex; flex-direction: column; padding-top: var(--topbar-alto); }

.visor {
  position: sticky;
  top: var(--topbar-alto);
  z-index: 5;
  width: 100%;
  height: 380px;
  background-color: var(--color-bg);
  overflow: hidden;
  cursor: pointer;
}
.visor__lienzo { width: 100%; height: 100%; }
.visor__imagen { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.js .visor__imagen { display: none; }
.visor__velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    to top,
    rgba(10, 10, 9, 0.9) 0%,
    rgba(10, 10, 9, 0.9) 42%,
    rgba(10, 10, 9, 0.44) 60%,
    transparent 82%
  );
}
.visor__pie {
  position: absolute;
  left: var(--e-3);
  right: var(--e-3);
  bottom: var(--e-3);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  color: var(--color-inverso);
}
.visor__hint,
.visor__meta {
  font-size: var(--t-overline);
  font-weight: 700;
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
}
.visor__hint { opacity: 0.7; }
.visor__titulo {
  font-family: var(--fuente-display);
  font-weight: 900;
  font-size: 40px;
  line-height: 0.95;
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
}

.filtros {
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
  background-color: var(--color-bg);
}
.filtros__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  font-size: var(--t-overline);
  font-weight: 700;
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
}
.filtros__activo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
}
.filtros__activo-valor {
  display: inline-flex;
  align-items: center;
  min-height: var(--tactil);
  padding: 0 var(--e-2);
  border: 1px solid var(--color-hairline);
}
.filtros__cuenta { color: var(--color-ink-suave); }
.filtros__disparador {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tactil);
  font-size: var(--t-overline);
  font-weight: 700;
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
}
.filtros__opciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
  padding: 20px var(--e-3);
  border-top: 1px solid var(--color-hairline);
  background-color: var(--color-surface);
}
.js .filtros__opciones { display: none; }
.js .filtros__opciones[data-abierto="true"] { display: flex; }
.filtros__opcion {
  display: inline-flex;
  align-items: center;
  min-height: var(--tactil);
  padding: 0 14px;
  border: 1px solid var(--color-hairline);
  font-size: var(--t-overline);
  font-weight: 700;
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
}
.filtros__opcion:hover { border-color: var(--color-ink); }
.filtros__opcion[aria-pressed="true"] {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-bg);
}
.filtros__opcion[aria-disabled="true"] { color: var(--color-ink-suave); cursor: not-allowed; }

.indice { display: flex; flex-direction: column; }
.trabajo-fila {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "titulo indice" "categoria anio";
  align-items: baseline;
  gap: 6px var(--e-2);
  padding: 20px var(--e-3);
  border-bottom: 1px solid var(--color-hairline);
}
.trabajo-fila__cuerpo { display: contents; }
.trabajo-fila__titulo { grid-area: titulo; }
.trabajo-fila__categoria { grid-area: categoria; }
.trabajo-fila__indice { grid-area: indice; justify-self: end; }
.trabajo-fila__anio { grid-area: anio; justify-self: end; }
.trabajo-fila:hover,
.trabajo-fila[aria-current="true"] { background-color: var(--color-surface); }
.trabajo-fila__indice {
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: var(--tr-meta);
  color: var(--color-ink-suave);
}
.trabajo-fila__titulo {
  font-family: var(--fuente-display);
  font-weight: 900;
  font-size: 26px;
  line-height: 1;
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
}
.trabajo-fila__categoria,
.trabajo-fila__anio {
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--color-ink-suave);
}
.trabajo-fila__flecha { display: none; }
.trabajo-fila[hidden] { display: none; }

/* ---------- 9. Ficha de trabajo ---------- */

.trabajo { padding-top: var(--topbar-alto); }

.portada {
  position: relative;
  width: 100%;
  height: 420px;
  background-color: var(--color-bg);
  overflow: hidden;
  cursor: pointer;
}
.portada__lienzo { width: 100%; height: 100%; }
.portada__imagen { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.js .portada__imagen { display: none; }
.portada__pie {
  position: absolute;
  left: var(--e-3);
  right: var(--e-3);
  bottom: var(--e-3);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  color: var(--color-inverso);
}
.portada__meta {
  font-size: var(--t-overline);
  font-weight: 700;
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  opacity: 0.82;
}
.portada__titulo {
  font-family: var(--fuente-display);
  font-weight: 900;
  font-size: 44px;
  line-height: 0.95;
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
}

.franja-video {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--tactil);
  padding: 18px var(--e-3);
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
  font-size: var(--t-overline);
  font-weight: 700;
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
}
.franja-video:hover { background-color: var(--color-surface); }
.franja-video__titulo { display: none; color: var(--color-ink-suave); }

.ficha { display: flex; flex-direction: column; }
.ficha__campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px var(--e-3);
  border-bottom: 1px solid var(--color-hairline);
}
.ficha__etiqueta {
  font-size: var(--t-overline);
  font-weight: 700;
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  color: var(--color-ink-suave);
}
.ficha__valor { font-size: 12px; line-height: 1.8; letter-spacing: 0.06em; }
.ficha__anio {
  font-family: var(--fuente-display);
  font-weight: 900;
  font-size: 32px;
  line-height: 1;
  letter-spacing: var(--tr-display);
}

.stack { display: flex; flex-wrap: wrap; gap: 6px; }
.stack__item {
  padding: 6px 10px;
  border: 1px solid var(--color-hairline);
  font-size: var(--t-overline);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  min-height: var(--tactil);
  padding: 14px var(--e-5) 14px var(--e-2);
  background: var(--color-ink);
  color: var(--color-bg);
  font-size: var(--t-overline);
  font-weight: 700;
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
}
.boton:hover { color: var(--color-bg); opacity: 0.86; }
.boton:active { opacity: 1; transform: translateY(1px); }
.boton[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.boton--linea {
  background: transparent;
  border: 1px solid var(--color-hairline);
  color: var(--color-ink);
  justify-content: center;
  padding: 14px var(--e-2);
}
.boton--linea:hover { color: var(--color-ink); border-color: var(--color-ink); opacity: 1; }

.prosa {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-3);
}
.prosa__destacado { font-size: 15px; line-height: 1.9; text-wrap: pretty; }
.prosa__parrafo { font-size: var(--t-cuerpo); line-height: 2.1; color: var(--color-ink-suave); text-wrap: pretty; }

.secciones { display: flex; flex-direction: column; border-top: 1px solid var(--color-hairline); }
.seccion-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--e-3);
  border-bottom: 1px solid var(--color-hairline);
}
.seccion-card__indice {
  font-family: var(--fuente-display);
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
  color: var(--color-ink-suave);
}
.seccion-card__titulo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
}
.seccion-card__texto { font-size: var(--t-dato); line-height: 1.9; color: var(--color-ink-suave); }

.capturas-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e-2);
  padding: var(--e-7) var(--e-3) var(--e-3);
}
.capturas { display: grid; grid-template-columns: 1fr; gap: var(--e-5); padding: 0 var(--e-3) var(--e-12); }
.captura { display: flex; flex-direction: column; gap: 10px; }
.captura__enlace { display: block; }
.captura__imagen {
  width: 100%;
  height: auto;
  border: 1px solid var(--color-ink);
  background-color: var(--color-surface);
}
.captura__pie { display: flex; justify-content: space-between; gap: var(--e-2); }

.paginacion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-3);
  border-top: 1px solid var(--color-hairline);
}
.paginacion__enlace { display: inline-flex; align-items: center; gap: var(--e-1); min-height: var(--tactil); }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  flex-direction: column;
  background-color: var(--color-velo);
  color: var(--color-inverso);
}
.lightbox[data-abierto="true"] { display: flex; }
.lightbox__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  padding: 20px var(--e-3);
}
.lightbox__cerrar,
.lightbox__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-1);
  min-width: var(--tactil);
  min-height: var(--tactil);
  color: var(--color-inverso);
  font-size: var(--t-overline);
  font-weight: 700;
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
}
.lightbox__nav:hover,
.lightbox__cerrar:hover { color: var(--color-inverso); opacity: 0.7; }
.lightbox__figura { flex: 1; display: grid; place-items: center; min-height: 0; padding: 0 var(--e-3); }
.lightbox__imagen { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lightbox__pie {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-7);
  padding: var(--e-3) var(--e-3) var(--e-4);
}

/* ---------- 10. Curriculum ---------- */

.cv { padding-top: var(--topbar-alto); }
.cv__grilla { display: flex; flex-direction: column; gap: var(--e-4); padding: var(--e-3) var(--e-3) var(--e-12); }
.cv__aside { display: flex; flex-direction: column; gap: var(--e-2); }
.cv__anio {
  font-family: var(--fuente-display);
  font-weight: 900;
  font-size: 64px;
  line-height: 1;
  letter-spacing: var(--tr-display);
}
.cv__nota { font-size: var(--t-dato); letter-spacing: var(--tr-dato); line-height: 1.8; color: var(--color-ink-suave); }
.cv__acciones { display: flex; flex-direction: column; gap: 12px; }
.cv__datos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--e-3);
  font-size: var(--t-overline);
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  line-height: 16px;
  color: var(--color-ink-suave);
}
.cv__cuerpo { display: flex; flex-direction: column; }
.cv__titulo {
  font-family: var(--fuente-display);
  font-weight: 900;
  font-size: 44px;
  line-height: 1;
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
}
.cv-bloque {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: var(--e-4) 0;
  border-top: 1px solid var(--color-hairline);
}
.cv-bloque--perfil { border-top: 0; padding-top: var(--e-1); gap: var(--e-3); }
.cv-bloque__cabecera {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-1);
  font-size: var(--t-overline);
  font-weight: 700;
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
}
.cv-bloque__periodo { color: var(--color-ink-suave); }
.cv-bloque__puesto {
  font-family: var(--fuente-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: var(--tr-display);
}
.cv-bloque__texto { max-width: 760px; font-size: var(--t-cuerpo); line-height: 2.3; }
.cv-bloque__chips { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.cv-bloque__chip {
  padding: 10px 14px;
  border: 1px solid var(--color-hairline);
  font-size: var(--t-overline);
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
}
.cv-bloque__chip--premio { background: var(--color-ink); color: var(--color-bg); border-color: var(--color-ink); }
.cv-propios { display: grid; grid-template-columns: 1fr; gap: var(--e-4); }
.cv-propio { display: flex; flex-direction: column; gap: 12px; }
.cv-propio__nombre {
  font-family: var(--fuente-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  letter-spacing: var(--tr-display);
}
.cv-propio__url { font-size: var(--t-dato); letter-spacing: var(--tr-dato); color: var(--color-ink-suave); }
.cv-propio__texto { font-size: var(--t-cuerpo); line-height: 2.2; }
.cv-listas {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--color-hairline);
  font-size: var(--t-dato);
  letter-spacing: var(--tr-dato);
  line-height: 2.2;
}
.cv-listas__titulo {
  font-size: var(--t-overline);
  font-weight: 700;
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  color: var(--color-ink-suave);
  margin-bottom: 12px;
}

/* ---------- 10 bis. Acerca (Acerca.dc.html) ---------- */

.acerca { display: flex; flex-direction: column; padding-top: var(--topbar-alto); }
.acerca__texto {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-3) var(--e-6);
}
.acerca__titulo {
  padding: var(--e-3) var(--e-3) var(--e-2);
  font-family: var(--fuente-display);
  font-weight: 900;
  font-size: 40px;
  line-height: 1;
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
}
.acerca__rol {
  font-size: var(--t-overline);
  font-weight: 700;
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  color: var(--color-ink-suave);
}
.acerca__destacado { font-size: 15px; line-height: 1.9; text-wrap: pretty; }
.acerca__parrafo { font-size: 12px; line-height: 2.1; text-wrap: pretty; }
.acerca__bloque {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: var(--e-4);
  border-top: 1px solid var(--color-hairline);
}
.acerca__listas { display: grid; grid-template-columns: 1fr; gap: var(--e-4); }
.acerca__lista { font-size: var(--t-dato); letter-spacing: var(--tr-dato); line-height: 2.2; }
.acerca__pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-2);
  padding-top: var(--e-4);
  border-top: 1px solid var(--color-hairline);
  font-size: var(--t-overline);
  font-weight: 700;
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
}
.acerca__retrato {
  position: relative;
  width: 100%;
  height: 440px;
  overflow: hidden;
  background-color: var(--color-bg);
}
.acerca__lienzo { width: 100%; height: 100%; }
.acerca__retrato-imagen { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.js .acerca__retrato-imagen { display: none; }

/* Chips del stack: en negativo, se reescriben al pasar el mouse */
.stack--negativo .stack__item {
  padding: 10px 14px;
  border: 0;
  background: var(--color-ink);
  color: var(--color-bg);
  letter-spacing: var(--tr-overline);
}

/* ---------- 11. Contacto, pie, 404 ---------- */

.contacto {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-12) var(--e-3);
  min-height: 70vh;
  justify-content: center;
}
.contacto__titulo {
  font-family: var(--fuente-display);
  font-weight: 900;
  font-size: 44px;
  line-height: 1;
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
}
.contacto__mail {
  font-family: var(--fuente-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: var(--tr-display);
  word-break: break-all;
}
.contacto__mail:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.contacto__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  padding-top: var(--e-4);
  border-top: 1px solid var(--color-hairline);
  font-size: var(--t-overline);
  font-weight: 700;
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
}

.pie {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-8) var(--e-3) var(--e-8);
  border-top: 1px solid var(--color-hairline);
}
.pie__mail {
  font-family: var(--fuente-display);
  font-weight: 900;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
  word-break: break-all;
}
.pie__linea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  padding-top: var(--e-3);
  border-top: 1px solid var(--color-hairline);
}
.pie__enlace { display: inline-flex; align-items: center; gap: var(--e-1); min-height: var(--tactil); color: var(--color-ink-suave); }
.pie__enlace:hover { color: var(--color-ink); }

.error {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-12) var(--e-3);
  min-height: 70vh;
  justify-content: center;
}
.error__codigo {
  font-family: var(--fuente-display);
  font-weight: 900;
  font-size: 96px;
  line-height: 1;
  letter-spacing: var(--tr-display);
}

/* ---------- 12. Barrido de escaneo (entrada) ---------- */

.barrido {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 50;
  pointer-events: none;
  background-color: var(--color-bg);
  background-image: var(--reticula);
}
.barrido__banda {
  position: fixed;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 51;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, var(--color-ink) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(90deg, var(--color-ink) 0 4px, transparent 4px 20px);
  background-repeat: repeat-x;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .barrido, .barrido__banda { display: none !important; }
}

/* ---------- 13. Tablet ---------- */

@media (min-width: 48em) {
  .inicio,
  .prosa,
  .contacto,
  .pie,
  .error,
  .capturas,
  .capturas-cabecera,
  .filtros__barra,
  .filtros__opciones,
  .trabajo-fila,
  .franja-video,
  .ficha__campo,
  .paginacion,
  .cv__grilla { padding-left: var(--e-6); padding-right: var(--e-6); }

  .contacto__titulo,
  .cv__titulo { font-size: 72px; }
  .error__codigo { font-size: 120px; }
  .contacto__mail { font-size: 44px; }
  .pie__mail { font-size: 32px; }
  .franja-video__titulo { display: block; margin-left: auto; }
  .ficha { display: grid; grid-template-columns: repeat(2, 1fr); }
  .secciones { display: grid; grid-template-columns: repeat(2, 1fr); }
  .capturas { grid-template-columns: repeat(2, 1fr); gap: var(--e-7) var(--e-5); }
  .captura--ancha { grid-column: span 2; }
  .cv-propios { grid-template-columns: 1fr 1fr; }
  .cv-listas { grid-template-columns: 1fr 1fr; }
  .visor { height: 46vh; }
  .portada { height: 52vh; }
}

/* ---------- 14. Desktop: valores exactos del artboard 1440 ---------- */

@media (min-width: 60em) {
  .hamburguesa { left: var(--e-10); top: var(--e-5); width: 56px; height: 56px; }
  .hamburguesa__barra { width: 56px; height: 8px; }
  .hamburguesa__barra--uno { top: 16px; }
  .hamburguesa__barra--dos { top: 32px; }
  .hamburguesa[aria-expanded="true"] .hamburguesa__barra--uno { transform: translateY(8px) rotate(45deg); }
  .hamburguesa[aria-expanded="true"] .hamburguesa__barra--dos { transform: translateY(-8px) rotate(-45deg); }
  .hamburguesa__texto { display: block; left: 152px; top: 60px; }
  .controles { right: var(--e-10); top: var(--e-5); gap: var(--e-3); }

  .topbar { height: var(--topbar-alto-grande); }
  .topbar--compacta { height: var(--topbar-alto); }
  .topbar--compacta ~ .chrome .hamburguesa { transform: scale(0.6); top: 19px; }
  .topbar--compacta ~ .chrome .hamburguesa__texto,
  .topbar--compacta ~ .chrome .controles { top: 28px; }

  .js .menu__enlace { font-size: 104px; line-height: 1.06; }
  .js .menu__lista { gap: var(--e-2); }

  /* Inicio */
  .inicio {
    height: 100vh;
    height: 100dvh; /* dvh: alto visible real en iOS */
    min-height: 720px;
    padding: 0 var(--e-10);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .inicio__presentacion { width: 400px; display: flex; flex-direction: column; gap: var(--e-5); z-index: 4; }
  .inicio__titulo { margin-top: 0; font-size: 80px; }
  .inicio__intro { margin-top: 0; max-width: 376px; font-size: var(--t-cuerpo); line-height: 2.3; }
  .inicio__nav {
    display: flex;
    width: 320px;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--e-3);
    font-family: var(--fuente-display);
    font-weight: 800;
    font-size: 44px;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    z-index: 3;
  }
  .inicio__retrato { width: min(1100px, 100%); max-height: calc(100vh - var(--topbar-alto-grande) - var(--e-4)); }   /* v3 renombró el token: --topbar-alto-grande */
  .inicio__retrato { width: min(1100px, 100%); max-height: calc(100dvh - var(--topbar-alto-grande) - var(--e-4)); }   /* v3 renombró el token: --topbar-alto-grande */ /* dvh: alto visible real en iOS */
  .inicio__datos {
    position: absolute;
    left: var(--e-10);
    bottom: var(--e-5);
    display: flex;
    gap: var(--e-4);
    font-size: var(--t-overline);
    letter-spacing: var(--tr-overline);
    text-transform: uppercase;
    line-height: 16px;
    color: var(--color-ink-suave);
    z-index: 4;
  }
  .inicio__scroll {
    position: absolute;
    right: var(--e-10);
    bottom: var(--e-5);
    display: block;
    font-size: var(--t-overline);
    letter-spacing: var(--tr-overline);
    text-transform: uppercase;
    line-height: 16px;
    color: var(--color-ink-suave);
    z-index: 4;
  }

  /* Trabajos: visor fijo 720 + índice */
  .trabajos {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    padding-top: var(--topbar-alto-grande);
  }
  .visor {
    position: sticky;
    top: var(--topbar-alto-grande);
    height: calc(100vh - var(--topbar-alto-grande));
    height: calc(100dvh - var(--topbar-alto-grande)); /* dvh: alto visible real en iOS */
    border-right: 1px solid var(--color-hairline);
    transition: top var(--dur-media) var(--curva), height var(--dur-media) var(--curva);
  }
  .topbar--compacta ~ main .trabajos .visor { top: var(--topbar-alto); height: calc(100vh - var(--topbar-alto)); }
  .topbar--compacta ~ main .trabajos .visor { top: var(--topbar-alto); height: calc(100dvh - var(--topbar-alto)); } /* dvh: alto visible real en iOS */
  .visor__pie { left: var(--e-6); right: var(--e-6); bottom: var(--e-5); gap: 12px; }
  .visor__titulo { font-size: 64px; line-height: 0.94; }
  .trabajos__columna { display: flex; flex-direction: column; }
  .trabajos__pie { grid-column: 1 / -1; }

  .filtros {
    position: sticky;
    top: var(--topbar-alto-grande);
    z-index: 4;
    border-top: 0;
    transition: top var(--dur-media) var(--curva);
  }
  .topbar--compacta ~ main .trabajos .filtros { top: var(--topbar-alto); }
  .filtros__barra { height: 56px; padding: 0 var(--e-6); }
  .filtros__activo-valor { min-height: 0; padding: var(--e-1) 12px; }

  .trabajo-fila {
    grid-template-columns: 48px 1fr 96px 24px;
    grid-template-areas: "indice cuerpo anio flecha";
    align-items: center;
    gap: 20px;
    height: 88px;
    padding: 0 var(--e-6);
  }
  .trabajo-fila__cuerpo { display: flex; flex-direction: column; gap: 6px; grid-area: cuerpo; }
  .trabajo-fila__indice { grid-area: indice; justify-self: start; font-size: var(--t-overline); }
  .trabajo-fila__anio { grid-area: anio; justify-self: start; }
  .trabajo-fila__flecha { grid-area: flecha; }
  .trabajo-fila__titulo { font-size: 32px; }
  .trabajo-fila__flecha { display: block; justify-self: end; color: var(--color-ink-suave); }
  .trabajo-fila:hover .trabajo-fila__flecha,
  .trabajo-fila[aria-current="true"] .trabajo-fila__flecha { color: var(--color-ink); }

  /* Ficha */
  .trabajo { padding-top: var(--topbar-alto-grande); }
  .portada { height: 680px; }
  .portada__pie { left: var(--e-10); bottom: var(--e-7); gap: var(--e-2); }
  .portada__titulo { font-size: 112px; line-height: 0.92; }
  .franja-video { padding: 20px var(--e-10); }
  .ficha { grid-template-columns: repeat(5, 1fr); }
  .ficha__campo {
    gap: 10px;
    padding: 28px var(--e-3);
    border-bottom: 0;
    border-right: 1px solid var(--color-hairline);
  }
  .ficha__campo:first-child { padding-left: var(--e-10); }
  .ficha__campo:last-child { padding-right: var(--e-10); border-right: 0; }
  .ficha__anio { font-size: 40px; }
  .prosa {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e-8);
    padding: var(--e-8) var(--e-10) var(--e-7);
    align-items: start;
  }
  .prosa__destacado { font-size: var(--t-destacado); line-height: 1.9; }
  .secciones { grid-template-columns: repeat(4, 1fr); }
  .seccion-card { min-height: 184px; border-right: 1px solid var(--color-hairline); }
  .seccion-card:nth-child(4n) { border-right: 0; }
  .capturas-cabecera { padding: var(--e-7) var(--e-10) var(--e-3); }
  .capturas { padding: 0 var(--e-10) var(--e-12); gap: var(--e-7) var(--e-5); }
  .paginacion { padding: var(--e-4) var(--e-10) var(--e-8); }
  .lightbox__figura { padding: 0 var(--e-5) var(--e-6); gap: var(--e-5); }
  .lightbox__barra { padding: var(--e-4) var(--e-5); }

  /* Acerca: texto que scrollea + retrato fijo */
  .acerca {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "titulo retrato" "texto retrato";
    align-items: start;
    padding-top: var(--topbar-alto-grande);
  }
  .acerca__titulo { grid-area: titulo; font-size: 88px; padding: var(--e-7) clamp(56px, 8vw, 160px) 0; }
  .acerca__texto { grid-area: texto; padding: var(--e-3) clamp(56px, 8vw, 160px) var(--e-12); }
  .acerca__retrato { grid-area: retrato; }
  .acerca__destacado { font-size: var(--t-destacado); }
  .acerca__parrafo { font-size: var(--t-cuerpo); line-height: 2.3; }
  .acerca__listas { grid-template-columns: 1fr 1fr; }
  .acerca__retrato {
    position: sticky;
    top: var(--topbar-alto-grande);
    height: calc(100vh - var(--topbar-alto-grande));
    height: calc(100dvh - var(--topbar-alto-grande)); /* dvh: alto visible real en iOS */
    border-left: 1px solid var(--color-hairline);
    transition: top var(--dur-media) var(--curva), height var(--dur-media) var(--curva);
  }
  .topbar--compacta ~ main .acerca .acerca__retrato { top: var(--topbar-alto); height: calc(100vh - var(--topbar-alto)); }
  .topbar--compacta ~ main .acerca .acerca__retrato { top: var(--topbar-alto); height: calc(100dvh - var(--topbar-alto)); } /* dvh: alto visible real en iOS */

  /* Curriculum */
  .cv { padding-top: var(--topbar-alto-grande); }
  .cv__grilla {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--e-8);
    padding: 0 var(--e-10) var(--e-15);
    align-items: start;
  }
  .cv__aside {
    position: sticky;
    top: calc(var(--topbar-alto-grande) + var(--e-1));
    align-self: start;
    height: calc(100vh - var(--topbar-alto-grande) - var(--e-6));
    height: calc(100dvh - var(--topbar-alto-grande) - var(--e-6)); /* dvh: alto visible real en iOS */
    justify-content: space-between;
    padding: var(--e-1) 0 var(--e-6);
  }
  .cv__anio { font-size: 112px; }
  .cv__titulo { font-size: 88px; }
  .cv-bloque__puesto { font-size: 36px; }
  .cv-bloque { padding: var(--e-6) 0; }
  .cv-bloque--perfil { padding-top: var(--e-1); }

  .contacto,
  .error { padding: var(--e-10) var(--e-8); min-height: 700px; }
  .pie { padding: var(--e-12) var(--e-10) var(--e-9); }
  .pie__mail { font-size: 56px; }
}

@media (min-width: 90em) {
  /* .inicio y .trabajos a todo el ancho (decisión de Giorgio); el resto con tope de 1440 */
  .trabajo,
  .cv,
  .contacto,
  .error,
  .pie { margin-inline: auto; max-width: 1440px; }
}

@media print {
  .topbar, .chrome, .menu, .menu__banda, .menu__linea, .filtros, .barrido, .barrido__banda, .lightbox { display: none !important; }
  .cv__acciones { display: none !important; } /* los botones Descargar/Imprimir no van en el PDF */
  body::before { display: none; }
}


/* ============================================================
   Lightbox como en el canvas aprobado (la entrega lo transcribió con las
   flechas abajo y sin marco). Parche de producción, 2026-09-03.
   ============================================================ */
.lightbox__barra { position: relative; z-index: 2; padding: 20px var(--e-3); }
.lightbox__titulo { margin-right: auto; }
.lightbox__titulo--pie { display: none; margin: 0; }
.lightbox__cuenta { margin: 0 var(--e-3) 0 0; opacity: 0.7; }
.lightbox__figura { padding: 0 var(--e-3); }
.lightbox__imagen {
  /* marco claro alrededor de la captura, como en el artboard */
  padding: 8px;
  background: var(--color-inverso);
  border: 1px solid var(--color-tinta);
  box-sizing: border-box;
}
.lightbox__pie {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: block;
  padding: 0;
  height: auto;
}
.lightbox__nav {
  pointer-events: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px; height: 56px; min-width: 0;
}
.lightbox__nav .icono--grande { width: 40px; height: 40px; }
.lightbox__nav--anterior { left: var(--e-3); }
.lightbox__nav--siguiente { right: var(--e-3); }
@media (max-width: 47.99em) {
  /* móvil: contador a la izquierda y Cerrar a la derecha arriba; título y flechas abajo */
  .lightbox__barra .lightbox__titulo { display: none; }
  .lightbox__cuenta { margin-right: auto; opacity: 1; }
  .lightbox__figura { padding: var(--e-6) var(--e-3); }
  .lightbox__pie { inset: auto 0 0 0; display: flex; flex-direction: column; align-items: center; gap: var(--e-2); padding: 0 var(--e-3) var(--e-4); }
  .lightbox__titulo--pie { display: block; text-align: center; }
  .lightbox__nav { position: static; transform: none; }
  .lightbox__pie::after { content: ""; display: block; }
  .lightbox__nav--anterior, .lightbox__nav--siguiente { display: inline-flex; }
  .lightbox__pie > .lightbox__nav { margin-top: 0; }
}
@media (max-width: 47.99em) {
  .lightbox__pie { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .lightbox__titulo--pie { flex-basis: 100%; }
}


/* Retícula de puntos solo en escritorio: en móvil dificulta la lectura (Giorgio, 2026-09-03).
   Se apaga el fondo y se oculta el conmutador Grid por debajo de 768px. */
@media (max-width: 47.99em) {
  body::before { display: none !important; }
  .controles__boton--reticula { display: none !important; }
}


/* iPad apaisado (960–1099px): el layout de escritorio con la tipografía y la caja de texto de la
   home más chicas, para que no se monten sobre el retrato (Giorgio, 2026-09-03). */
@media (min-width: 60em) and (max-width: 68.74em) {
  .inicio__presentacion { width: 300px; gap: var(--e-4); }
  .inicio__titulo { font-size: 56px; }
  .inicio__intro { max-width: 280px; font-size: 11px; line-height: 2.1; }
  .inicio__nav a { font-size: 22px; }
}


/* Móvil: el retrato va en el flujo, justo debajo de la presentación, en vez de anclado al
   fondo de la pantalla (quedaba un hueco enorme entre el texto y la foto). Giorgio, 2026-09-03. */
@media (max-width: 59.99em) {
  .inicio__retrato {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    margin: var(--e-4) auto 0;
    max-height: none;
    /* llena todo el alto que queda bajo el texto (Giorgio: "que llegue abajo, no importa
       que se recorten los costados"); el motor escala por alto en móvil */
    flex: 1 1 0;
    width: 100%;
    aspect-ratio: auto;
    min-height: 240px;
  }
  /* altura definida (no solo min-height): sin esto el canvas con height:100% no tiene
     contra qué medirse dentro del flex y queda en 150px (Safari iOS) */
  .inicio { height: 100vh; height: 100dvh; min-height: 0; }
  .inicio__lienzo, .inicio__retrato-imagen { position: absolute; inset: 0; width: 100%; height: 100%; }
  .inicio__retrato-imagen { object-fit: cover; object-position: bottom center; }
}


/* ============================================================
   Prosa del caso: la entrega dejaba los párrafos dentro de un <div> sin gap (el gap está en
   .prosa, que es el contenedor de afuera) y con el color de texto secundario al 62 %: los
   párrafos quedaban pegados y lavados. Giorgio, 2026-09-03.
   ============================================================ */
.prosa > div { display: flex; flex-direction: column; gap: var(--e-3); }
.prosa__parrafo {
  color: var(--color-ink);      /* es el texto principal de la ficha, no un secundario */
  max-width: 62ch;              /* medida de lectura: antes la línea llegaba a ~95 caracteres */
}
.prosa__destacado { max-width: 46ch; }
.seccion-card__texto { color: var(--color-ink); }
@media (min-width: 60em) {
  .prosa > div { gap: var(--e-4); }
}

/* ============================================================
   Video del recorrido. La entrega resuelve el video como una franja que enlaza a YouTube; los
   nueve videos del portafolio son grabaciones propias de los sitios corriendo, con póster
   elegido a mano, así que se reproducen dentro de la ficha. La franja queda como pie del
   video, con el mismo tratamiento tipográfico. Decisión de Giorgio, 2026-09-06.
   preload="none": el mp4 (1–14 MB) no se descarga hasta que le dan play; hasta entonces solo
   pesa el póster, que es una imagen más del sitio.
   ============================================================ */
.video { margin: var(--e-5) 0 0; }   /* pegado al borde de la portada se leía como parte del hero */
.video__medio { display: block; width: 100%; height: auto; background-color: var(--color-lienzo); }
.video .franja-video { gap: var(--e-2); background-color: var(--color-bg); color: var(--color-ink); }

/* Controles propios: los nativos son del sistema operativo y rompen la tipografía del sitio.
   Sin JS no existen y el <video> conserva controls (ver app/vistas/trabajo.php). */
.video__boton,
.video__barra,
.video__tiempo { display: none; }
.video--js .video__icono-fijo { display: none; }
.video--js .video__boton { display: inline-flex; }
.video--js .video__barra { display: block; }
.video--js .video__tiempo { display: block; }

.video__boton {
  align-items: center;
  justify-content: center;
  min-width: var(--tactil);
  min-height: var(--tactil);
  margin: calc(var(--tactil) / -4) 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.video__boton:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.video__icono--pausa { display: none; }
.video--reproduciendo .video__icono--play { display: none; }
.video--reproduciendo .video__icono--pausa { display: block; }
.video__boton--pantalla { margin-left: 0; }

/* La barra: una línea del sitio, no un control de sistema. */
.video__barra {
  flex: 1 1 60px;
  min-width: 60px;
  height: var(--tactil);
  margin: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.video__barra::-webkit-slider-runnable-track { height: 2px; background-color: var(--color-hairline); }
.video__barra::-moz-range-track { height: 2px; background-color: var(--color-hairline); }
.video__barra::-moz-range-progress { height: 2px; background-color: var(--color-ink); }
.video__barra::-webkit-slider-thumb {
  width: 10px; height: 10px; margin-top: -4px;
  background-color: var(--color-ink); border: 0; border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.video__barra::-moz-range-thumb { width: 10px; height: 10px; background-color: var(--color-ink); border: 0; border-radius: 0; }
.video__barra:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 4px; }
.video__tiempo { font-variant-numeric: tabular-nums; color: var(--color-ink-suave); white-space: nowrap; }
.video__etiqueta { white-space: nowrap; }
@media (max-width: 47.99em) {
  .video__etiqueta { display: none; }   /* en el celular la barra necesita todo el ancho */
}
@media (min-width: 60em) {
  .video { margin-top: var(--e-8); }
}

/* ============================================================
   Nota de contexto de la ficha (los trabajos publicitarios de tabacalera la llevan). Va antes
   de la bajada, en cuerpo chico: es una aclaración, no parte del caso.
   ============================================================ */
.prosa__nota {
  max-width: 62ch;
  margin: 0 0 var(--e-3);
  padding-left: var(--e-2);
  border-left: 2px solid var(--color-hairline);
  font-size: var(--t-dato);     /* --t-meta son 9px: eso es una etiqueta, no un texto para leer */
  line-height: 1.6;
  color: var(--color-ink-suave);
}


/* ============================================================
   Portada dentro del navegador de una app (WhatsApp, Instagram, Telegram).
   Esas barras no se retraen nunca, y dvh devuelve el alto SIN ellas: la portada quedaba más
   alta que lo que se ve, la página abría corrida —el título cortado arriba— y la foto
   terminaba detrás de la barra de abajo. svh es el alto visible CON las barras puestas, así
   que entra entera siempre; en Safari se ve igual, porque al cargar las dos medidas coinciden.
   Giorgio, 2026-09-07 (captura abriendo el sitio desde WhatsApp).
   ============================================================ */
@supports (height: 100svh) {
  .inicio { min-height: 100svh; }
  .inicio__retrato { max-height: calc(100svh - 20rem); }
  @media (min-width: 60em) {
    .inicio { height: 100svh; }
    .inicio__retrato { max-height: calc(100svh - var(--topbar-alto-grande) - var(--e-4)); }
  }
}