/* ==========================================================================
   Hoja de vida — Victor Díaz
   Sistema: cartel suizo + brutalismo suave. Monocromo con un acento verde.
   Para recolorear todo, cambia los tokens de :root (y los del tema oscuro).
   Tipografía: Anton (títulos, en mayúsculas; tiene un solo grosor, 400) + Inter Tight (texto) + Host Grotesk (etiquetas, cifras y fechas;
   en lugar de Montreux Grotesk, que es de pago: ver --font-label).
   Con Anton, el interlineado de los títulos no baja de 1.15: las tildes de las mayúsculas (Í, Á) subirían hasta la línea de arriba.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --bg: #F6F6F3;
  --surface: #FFFFFF;
  --surface-2: #ECECE7;
  --ink: #111113;
  --ink-2: #2E2E33;
  --muted: #55555E;
  --faint: #6B6B74;
  --line: #DFDFD8;
  --line-strong: #C6C6BE;
  --accent: #0D7148;
  --hover: #0D7148;  /* el verde de los hovers: igual en todas las páginas (los sellos no lo cambian) */
  --accent-hover: #095A39;
  --accent-soft: #DDF3E6;
  --on-accent: #FFFFFF;
  --ok: #15803D;
  --warn: #D97706;
  --warn-ink: #92400E;
  --warn-soft: #FEF3C7;
  --hard: var(--ink);
  --logo-mono: brightness(0);  /* logos de un solo color: negros en el tema claro… */

  --font-display: "Anton", Impact, "Arial Narrow", sans-serif;
  --font-body: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Etiquetas, números y fechas. Montreux Grotesk (ROHH, de pago) si se instala su @font-face; mientras, Host Grotesk. */
  --font-label: "Montreux Grotesk", "Host Grotesk", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-code: ui-monospace, "SFMono-Regular", Consolas, monospace;

  --container: 1560px;
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --indent: 0px;
  --radius: 2px;
  --nav-h: 64px;
  /* Movimiento: --ease para lo que dura menos de ~600 ms; --ease-expo para apariciones largas;
     --ease-in-out para lo que se dibuja o barre; --ease-exit solo para lo que se va. */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --ease-exit: cubic-bezier(.55, .055, .675, .19);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D0D0F; --surface: #151518; --surface-2: #1D1D21;
    --ink: #EDEDEF; --ink-2: #D0D0D6; --muted: #A3A3AD; --faint: #8C8C96;
    --line: #27272C; --line-strong: #3A3A41;
    --accent: #52E0A0; --accent-hover: #7DEBB9; --accent-soft: #0F2A1D; --on-accent: #0D0D0F; --hover: #52E0A0;
    --ok: #4ADE80; --warn: #FBBF24; --warn-ink: #FCD34D; --warn-soft: #2A2108; --hard: var(--accent);
    --logo-mono: brightness(0) invert(1);  /* …y blancos en el oscuro */
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0D0D0F; --surface: #151518; --surface-2: #1D1D21;
  --ink: #EDEDEF; --ink-2: #D0D0D6; --muted: #A3A3AD; --faint: #8C8C96;
  --line: #27272C; --line-strong: #3A3A41;
  --accent: #52E0A0; --accent-hover: #7DEBB9; --accent-soft: #0F2A1D; --on-accent: #0D0D0F; --hover: #52E0A0;
  --ok: #4ADE80; --warn: #FBBF24; --warn-ink: #FCD34D; --warn-soft: #2A2108; --hard: var(--accent);
  --logo-mono: brightness(0) invert(1);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 400; line-height: 1.15; letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
[role="list"] { list-style: none; }
dl, dd, figure { margin: 0; }
button { font: inherit; color: inherit; }
code { font-family: var(--font-code); font-size: .9em; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
main:focus { outline: none; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.print-only { display: none; }
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  padding: .75rem 1rem; background: var(--ink); color: var(--bg);
  font-weight: 600; text-decoration: none; border-radius: var(--radius);
}
.skip-link:focus { top: .75rem; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.i { width: 1.125em; height: 1.125em; flex: none; }
/* Logo subido de un solo color con fondo transparente (casilla «adaptarlo al tema» en el editor). */
.logo--mono { filter: var(--logo-mono); }

/* ---------- Botones y enlaces ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 46px; padding: .7rem 1.15rem;
  font: 600 .95rem/1 var(--font-body); text-decoration: none; white-space: nowrap;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--ink); border-radius: var(--radius);
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s, color .18s, border-color .18s;
}
.btn:hover { transform: translate(-3px, -3px); box-shadow: 3px 3px 0 var(--hover); }
.btn:active { transform: scale(.97); box-shadow: none; transition-duration: .1s; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--primary:hover { box-shadow: 3px 3px 0 var(--ink); }
.btn--ghost { background: transparent; border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--sm { min-height: 44px; padding: .55rem .95rem; font-size: .88rem; }

.text-link {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--accent); font-weight: 600; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .3s var(--ease);
}
.text-link:hover { background-size: 100% 1px; }
.text-link .i { transition: transform .25s var(--ease); }
.text-link:hover .i { transform: translate(2px, -2px); }

.badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .7rem; border-radius: var(--radius);
  font: 500 .72rem/1 var(--font-label); text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.badge__dot { width: 6px; height: 6px; background: currentColor; }
.badge--plain { color: var(--ink-2); background: transparent; border-color: var(--line-strong); }
.badge--ambar { color: var(--warn-ink); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.badge--ambar .badge__dot { background: var(--warn); }
.badge--gris { color: var(--ink-2); background: var(--surface-2); border-color: var(--line-strong); }
.badge--gris .badge__dot { background: var(--faint); }

.chips { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: .45rem; }
.chip {
  padding: .42rem .72rem; font-size: .875rem; line-height: 1.25;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}

/* ---------- Navegación ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav__inner { display: flex; align-items: center; gap: 1rem; height: var(--nav-h); }
.brand {
  display: inline-flex; align-items: center; gap: .7rem; margin-right: auto;
  font: 600 1rem/1 var(--font-body); letter-spacing: -.01em; text-decoration: none;
}
.brand__mark {
  position: relative; display: grid; place-items: center; width: 34px; height: 34px;
  background: var(--ink); color: var(--bg); border-radius: var(--radius);
  font: 500 .78rem/1 var(--font-label); letter-spacing: .02em;
}
.brand__mark::after { content: ""; position: absolute; right: -4px; bottom: -4px; width: 10px; height: 10px; background: var(--accent); }
.nav__menu-btn {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; margin-right: auto; padding: 0 .95rem 0 .8rem;
  font: 600 .92rem/1 var(--font-body); color: var(--ink); background: transparent;
  border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
  transition: border-color .2s, background-color .2s, transform .16s var(--ease);
}
.nav__menu-btn:hover { border-color: var(--ink); background: var(--surface); }
.nav__menu-btn:active { transform: scale(.96); }
.nav__menu-btn .i { width: 19px; height: 19px; }
/* El menú ocupa todo el ancho libre del encabezado y reparte los enlaces. */
.nav__links { display: none; flex: 1; min-width: 0; justify-content: space-between; gap: .25rem; margin: 0 clamp(.75rem, 2vw, 2rem) 0 -.6rem; }
.nav__links a {
  position: relative; display: inline-flex; align-items: baseline; gap: .45rem; padding: .6rem;
  font-size: .95rem; font-weight: 500; white-space: nowrap; color: var(--muted); text-decoration: none;
  border-radius: var(--radius); transition: color .2s, background-color .2s;
}
.nav__links a::after {
  content: ""; position: absolute; left: .6rem; right: .6rem; bottom: .3rem; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav__links a:hover { color: var(--ink); background: var(--surface-2); }
.nav__links a.is-active { color: var(--ink); }
.nav__links a.is-active::after { transform: scaleX(1); }
.nav__links a.is-active .nav__num { color: var(--accent); }
.nav__links .nav__num { display: none; }
.nav__num { font: 500 .68rem/1 var(--font-label); color: var(--faint); }
.nav__tools { display: flex; align-items: center; gap: .375rem; }
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  color: var(--ink-2); background: transparent; border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; text-decoration: none; transition: color .2s, border-color .2s, background-color .2s, transform .16s var(--ease);
}
.icon-btn:hover { color: var(--ink); border-color: var(--ink); background: var(--surface); }
.icon-btn:active { transform: scale(.94); }
.icon-btn[aria-current="page"] { color: var(--accent); border-color: var(--accent); }
.icon-btn .i { width: 19px; height: 19px; }
/* El ajedrez es un guiño: el peón en pixel art (una «i»), suelto al final, sin recuadro. Se ilumina al pasar
   o cuando estás en la partida. Con el menú recogido (celular y tableta) no va en el encabezado sino solo,
   al centro, al final del menú (.nav__panel-chess). */
.nav__chess {
  display: inline-grid; place-items: center; width: 32px; height: 44px; margin-left: .25rem;
  color: var(--muted); text-decoration: none; border-radius: var(--radius);
  transition: color .2s, transform .16s var(--ease);
}
.nav__pawn { display: block; flex: none; fill: currentColor; shape-rendering: crispEdges; }
.nav__chess:hover, .nav__chess[aria-current="page"] { color: var(--hover); }
.nav__chess:active { transform: scale(.92); }
.nav__chess:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-width: 999.98px) { .nav__chess { display: none; } }
.nav__social { display: none; }

.i-sun { display: none; }
:root[data-theme="dark"] .i-sun { display: block; }
:root[data-theme="dark"] .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .i-sun { display: block; }
  :root:not([data-theme="light"]) .i-moon { display: none; }
}
.i-close { display: none; }
[aria-expanded="true"] .i-close { display: block; }
[aria-expanded="true"] .i-open { display: none; }

.nav__panel { border-top: 1px solid var(--line); background: var(--bg); }
.nav__panel a {
  display: flex; justify-content: space-between; align-items: center; min-height: 56px;
  border-bottom: 1px solid var(--line); text-decoration: none;
  font: 400 1.5rem/1.1 var(--font-display); letter-spacing: .01em; text-transform: uppercase;
}
.nav__panel a:last-child { border-bottom: 0; }
.nav__panel a.is-active { color: var(--accent); }
/* Al final del menú, solo el peón, al centro y apagado: un guiño para quien lo encuentre. La caja es angosta
   (44px) para que no sea una fila más del menú. */
.nav__panel a.nav__panel-chess { justify-content: center; width: 44px; margin-inline: auto; color: var(--muted); }
.nav__panel a.nav__panel-chess:hover, .nav__panel a.nav__panel-chess[aria-current="page"] { color: var(--hover); }

@media (min-width: 560px) { .nav__social { display: inline-grid; } }
@media (min-width: 1000px) {
  .nav__links { display: flex; }
  .nav__menu-btn, .nav__panel { display: none !important; }
  .nav__social { display: none; }
}
@media (min-width: 1200px) { .nav__links .nav__num { display: inline; } }
@media (min-width: 1320px) { .nav__social { display: inline-grid; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: clip; border-bottom: 1px solid var(--line); }
.hero__bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--line-strong) 1px, transparent 1.3px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(75% 85% at 88% 8%, #000 0%, transparent 72%);
  mask-image: radial-gradient(75% 85% at 88% 8%, #000 0%, transparent 72%);
}
/* Los espacios verticales del inicio también miran el alto de la ventana: en una pantalla baja se encogen
   para que el rol, la intro y los botones entren en la primera vista junto al nombre. */
.hero__wrap { position: relative; container-type: inline-size; padding-block: min(clamp(3rem, 8vw, 6rem), 7svh) clamp(2.5rem, 6vw, 4.5rem); }
.hero__status {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-bottom: min(clamp(1.5rem, 4vw, 2.5rem), 3.5svh);
  font: 500 .78rem/1.2 var(--font-label); text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.pill {
  display: inline-flex; align-items: center; gap: .55rem; padding: .5rem .8rem;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.live-dot { position: relative; width: 8px; height: 8px; background: var(--ok); }
.live-dot::after { content: ""; position: absolute; inset: -4px; border: 2px solid var(--ok); opacity: 0; }
.pill--link { text-decoration: none; transition: border-color .2s, background-color .2s; }
.pill--link:hover { border-color: var(--ink); }
.pill--link .i { width: 14px; height: 14px; margin-left: -.15rem; color: var(--muted); }
.pill--ambar .live-dot { background: var(--warn); }
.pill--gris .live-dot { background: var(--faint); }
.pill--ambar .live-dot::after, .pill--gris .live-dot::after { display: none; }
.hero__loc { display: inline-flex; align-items: center; gap: .4rem; }
.hero__loc .i { width: 15px; height: 15px; }

/* El nombre llena el ancho, pero sus dos líneas (2 × 1.15 de alto) no pasan del alto que queda libre
   después de la barra, los espacios y el bloque de rol + intro + botones (~28rem). */
.hero__name {
  font-size: clamp(3rem, 13vw, 10rem);
  font-size: clamp(3rem, min(14.5cqi, (100svh - 28rem) / 2.3), 12rem);
  line-height: 1.15; letter-spacing: 0;
}
.hero__name > span, .hero__line-in { display: block; }
.hero__dot { color: var(--accent); }

.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.25rem, 4vw, 3rem);
  margin-top: min(clamp(2rem, 5vw, 3.5rem), 4svh); padding-top: min(clamp(1.75rem, 4vw, 2.5rem), 3.5svh);
  border-top: 2px solid var(--ink);
}
.hero__role { font: 500 clamp(1.3rem, 2.6vw, 1.85rem)/1.25 var(--font-body); letter-spacing: -.02em; max-width: 26ch; }
.hero__lede { margin-top: 1.25rem; max-width: 62ch; color: var(--muted); font-size: 1.0625rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
@media (min-width: 1000px) {
  .hero__main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); column-gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
  .hero__role { grid-row: 1 / span 2; font-size: clamp(1.6rem, 2.4vw, 2.3rem); }
  .hero__lede { grid-column: 2; margin-top: 0; }
  .hero__actions { grid-column: 2; margin-top: 1.75rem; }
}

/* Debajo del rol: la ficha (una tarjeta de presentación) y, a su lado, los proyectos destacados */
.hero__card { display: grid; gap: 2.5rem clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 1150px) {
  .hero__card { grid-template-columns: minmax(0, 47rem) minmax(0, 1fr); }
  .hero__feat .feats { grid-template-columns: minmax(0, 1fr); }
}

/* Ficha: nombre, rol, las filas y cómo contactarte. Su diseño depende de su propio ancho (container query):
   desde 38rem es una tarjeta de 1.75 : 1 con la foto a la izquierda y las filas en dos columnas. La imagen que
   se descarga (main.js) es una copia de 760 px de ancho, así que siempre sale con ese diseño. */
.ficha-wrap { container-type: inline-size; max-width: 47rem; }
.ficha {
  display: grid; grid-template-rows: auto 1fr auto; background: var(--surface);
  border: 1px solid var(--ink); border-radius: var(--radius); box-shadow: 5px 5px 0 var(--hard);
}
.ficha__bar {
  display: flex; justify-content: space-between; padding: .55rem 1rem;
  background: var(--ink); color: var(--bg);
  font: 500 .7rem/1.4 var(--font-label); text-transform: uppercase; letter-spacing: .1em;
}
.ficha__body {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "id" "list";
  align-content: start; gap: 1.1rem 1rem; padding: 1.1rem 1rem .4rem;
}
.ficha__body.has-photo { grid-template-columns: 4.5rem minmax(0, 1fr); grid-template-areas: "photo id" "list list"; align-items: center; }
.ficha__side { display: contents; }
.ficha__photo { grid-area: photo; width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--ink); border-radius: var(--radius); }
/* Colombia con el punto de Bogotá: debajo de la foto en la tarjeta ancha; en el celular, una fila más al final */
.ficha__map {
  grid-column: 1 / -1; display: flex; align-items: center; gap: .75rem; margin-top: -1.1rem; padding: .55rem 0;
  border-top: 1px dashed var(--line-strong);
}
.ficha__map-art { position: relative; display: block; flex: none; width: 3.25rem; }
.ficha__map-art svg { display: block; width: 100%; height: auto; overflow: visible; fill: var(--accent-soft); stroke: var(--accent); }
.ficha__pin { position: absolute; width: 6px; height: 6px; background: var(--accent); transform: translate(-50%, -50%); }
.ficha__pin::after { border-color: var(--accent); }
.ficha__place { font: 500 .64rem/1.45 var(--font-label); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.ficha__id { grid-area: id; min-width: 0; }
.ficha__name { font: 400 1.5rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
.ficha__role { margin-top: .3rem; font-size: .88rem; line-height: 1.35; color: var(--muted); }
/* Cada fila lleva su línea arriba; overflow: hidden oculta la de la primera fila (o de las dos, en columnas). */
.ficha__list { grid-area: list; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 1.25rem; overflow: hidden; }
/* Cada fila: ícono (o logo) a la izquierda, etiqueta arriba y valor debajo */
.ficha__row {
  position: relative; display: grid; align-content: center; gap: .1rem; min-height: 4.4rem; margin-top: -1px; padding: .55rem 0 .55rem 4rem;
  border-top: 1px dashed var(--line-strong); font-size: .86rem; line-height: 1.4;
}
.ficha__row dt { font: 500 .64rem/1.45 var(--font-label); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.ficha__ico {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem;
  color: var(--accent); background: var(--accent-soft); border-radius: var(--radius);
}
.ficha__ico .i { width: 22px; height: 22px; }
/* Logo propio: llena todo el cuadro (si no es cuadrado se recorta al centro) y lleva un recuadro */
.ficha__ico--img { overflow: hidden; background: none; border: 1px solid var(--ink); }
.ficha__ico--img img { width: 100%; height: 100%; object-fit: cover; }
.ficha__contact {
  display: flex; flex-wrap: wrap; gap: .15rem 1.25rem; padding: .65rem 1rem; border-top: 1px solid var(--line);
  font: 500 .68rem/1.45 var(--font-label); color: var(--muted);
}
.ficha__contact span { overflow-wrap: anywhere; }
@container (min-width: 38rem) {
  .ficha { aspect-ratio: 1.75; }
  /* El alto que sobra en la tarjeta se reparte entre las filas, en vez de quedar vacío abajo */
  .ficha__body { grid-template-rows: auto 1fr; padding: 1.25rem 1.25rem .5rem; column-gap: 1.5rem; }
  .ficha__list { align-self: stretch; grid-auto-rows: 1fr; }
  .ficha__body.has-photo { grid-template-columns: 7.5rem minmax(0, 1fr); grid-template-areas: "photo id" "photo list"; align-items: start; }
  /* La columna de la foto ocupa todo el alto: la foto arriba y Colombia abajo, al pie de la última fila */
  .ficha__side { grid-area: photo; display: grid; grid-template-rows: auto 1fr; align-self: stretch; gap: .75rem; }
  .ficha__photo { grid-area: auto; }
  .ficha__map { display: grid; justify-items: center; align-self: end; gap: .3rem; margin-top: 0; padding: 0 0 .55rem; border-top: 0; }
  .ficha__map-art { width: 6.4rem; }
  .ficha__pin { width: 8px; height: 8px; }
  .ficha__place { font-size: .6rem; text-align: center; }
  .ficha__name { font-size: 1.75rem; }
  .ficha__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha__contact { padding-inline: 1.25rem; }
}
.ficha__tools { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.ficha__tools [aria-busy="true"] { cursor: progress; opacity: .7; }

/* Al lado de la ficha: proyectos destacados y, debajo, los sellos */
.hero__side { display: grid; gap: 2.5rem; }
.hero__feat-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.hero__feat-label { font: 500 .68rem/1.4 var(--font-label); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.hero__feat-more { display: inline-flex; align-items: center; gap: .25rem; font: 500 .72rem/1.4 var(--font-label); color: var(--muted); text-decoration: none; transition: color .2s; }
.hero__feat-more:hover { color: var(--hover); }
.hero__feat-more .i { width: 12px; height: 12px; }
/* Cada fila lleva su línea arriba; el recorte de arriba oculta la de la primera fila. Solo arriba: a los lados y
   abajo queda margen para que la miniatura, al subir con el hover, no se corte. */
.feats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); column-gap: 2rem;
  margin-top: .6rem; clip-path: inset(0 -1rem -1rem);
}
.feats > li { margin-top: -1px; border-top: 1px dashed var(--line-strong); }
.feat {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  padding: .75rem 0; color: inherit; text-decoration: none;
}
.feat__thumb {
  display: grid; place-items: center; width: 4rem; height: 4rem; overflow: hidden;
  border: 1px solid var(--ink); border-radius: var(--radius); transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.feat__thumb img { width: 100%; height: 100%; object-fit: cover; }
.feat__thumb--mono { font: 400 1.4rem/1 var(--font-display); letter-spacing: .02em; }
.feat__text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.feat__title { font-size: 1rem; font-weight: 600; line-height: 1.3; text-decoration: underline 1px transparent; text-underline-offset: .15em; transition: text-decoration-color .2s; }
.feat__meta { font: 400 .68rem/1.4 var(--font-label); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.feat__arrow { width: 16px; height: 16px; color: var(--muted); transition: transform .2s var(--ease), color .2s; }
.feat:hover .feat__thumb { transform: translate(-2px, -2px); box-shadow: 2px 2px 0 var(--hover); }
.feat:hover .feat__title { text-decoration-color: currentColor; }
.feat:hover .feat__arrow { color: var(--hover); transform: translateX(3px); }

/* Sellos al lado de la ficha: el logo grande en su recuadro, el nombre y qué es */
.stamps { display: grid; grid-template-columns: repeat(3, minmax(0, 9.5rem)); gap: 1.25rem; margin-top: .9rem; }
.stamp { display: grid; align-content: start; gap: .2rem; color: inherit; text-decoration: none; }
.stamp__logo {
  display: grid; place-items: center; aspect-ratio: 1; margin-bottom: .55rem; overflow: hidden; background: var(--surface);
  border: 1px solid var(--ink); border-radius: var(--radius); transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.stamp__logo img { width: 100%; height: 100%; object-fit: cover; }
.stamp__logo--mono { font: 400 clamp(1.4rem, 3vw, 2.2rem)/1 var(--font-display); color: var(--bg); background: var(--ink); }
.stamp__name { font: 400 1.05rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
.stamp__rol { font-size: .78rem; line-height: 1.35; color: var(--muted); }
/* Al pasar, la sombra va en el color de la página (el verde; en la página de un sello, el de ese sello). */
.stamp:hover .stamp__logo { transform: translate(-3px, -3px); box-shadow: 3px 3px 0 var(--hover); }
.stamp:active .stamp__logo { transform: scale(.98); box-shadow: none; transition-duration: .1s; }

/* ---------- Secciones ---------- */
.section { padding-block: clamp(4rem, 9vw, 7rem); }
.section + .section { padding-top: 0; }
.sec-head {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem;
  margin-bottom: clamp(2rem, 4.5vw, 3.25rem); padding-top: 1.1rem; border-top: 2px solid var(--ink);
}
.sec-head__num { font: 500 .8rem/1 var(--font-label); color: var(--accent); }
.sec-head h2 { font-size: clamp(2.5rem, 6.4vw, 4.75rem); }
.sec-head__t { display: block; }
.sec-head__intro { margin-top: 1rem; max-width: 58ch; color: var(--muted); font-size: 1.0625rem; }
.sec-head__note { font: 500 .75rem/1.2 var(--font-label); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sec-head__note .text-link { text-transform: none; letter-spacing: 0; font-size: .85rem; }

@media (min-width: 760px) {
  :root { --indent: calc(4.5rem + 2rem); }
  .sec-head { grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: 2rem; align-items: start; }
  .sec-head__num, .sec-head__note { padding-top: .75rem; }
  .section__body { padding-left: var(--indent); }
}

/* ---------- Proyectos ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filter {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .5rem 1rem;
  font-size: .9rem; font-weight: 500; color: var(--ink);
  background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius);
  cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .16s var(--ease);
}
.filter:hover { border-color: var(--ink); }
.filter:active { transform: scale(.96); }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.filter__count { font: 500 .7rem/1 var(--font-label); opacity: .7; }

/* Sección Sellos (VARTS, </V>, Bacata Creative…): solo qué es cada uno. En el celular, uno debajo del otro con
   el logo al lado del texto; con espacio, todos en una fila de columnas iguales con el logo arriba. */
.sellos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 2.5rem clamp(1.5rem, 4vw, 3.5rem); }
.sello {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo text" "logo side";
  align-content: start; gap: 0 clamp(1.1rem, 2vw, 1.75rem); padding-top: 1.5rem; border-top: 1px solid var(--line);
}
@media (min-width: 640px) {
  .sello { grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "text" "side"; }
  .sello__logo { margin-bottom: 1.25rem; }
}
.sello__logo {
  grid-area: logo; display: block; width: clamp(72px, 8vw, 112px); aspect-ratio: 1; overflow: hidden;
  background: var(--surface); border: 1px solid var(--ink); border-radius: var(--radius);
}
.sello__logo img { width: 100%; height: 100%; object-fit: cover; }
.sello__logo--mono { display: grid; place-items: center; font: 400 clamp(1.6rem, 3vw, 2.6rem)/1 var(--font-display); color: var(--bg); background: var(--ink); }
.sello__text { grid-area: text; min-width: 0; }
.sello__rol { font: 500 .72rem/1.3 var(--font-label); text-transform: uppercase; letter-spacing: .07em; color: var(--accent); }
.sello__name { margin-top: .3rem; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.sello__desc { margin-top: .35rem; max-width: 62ch; color: var(--muted); font-size: .95rem; }
.sello__side { grid-area: side; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin-top: 1rem; }
/* Toda la tarjeta lleva a la página del sello: el enlace del nombre se estira sobre ella; los enlaces
   externos quedan encima. Al pasar, el logo se levanta con una sombra del color de la página. */
.sello { position: relative; }
.sello__link { color: inherit; text-decoration: none; }
.sello__link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.sello__link:focus-visible { outline: none; }
.sello__link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 6px; }
.sello__side a { position: relative; z-index: 1; }
.sello__logo { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.sello__more { display: inline-flex; align-items: center; gap: .4rem; font: 500 .75rem/1.3 var(--font-label); text-transform: uppercase; letter-spacing: .07em; color: var(--ink); }
.sello__more .i { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.sello:hover .sello__logo { transform: translate(-4px, -4px); box-shadow: 4px 4px 0 var(--hover); }
.sello:hover .sello__more { color: var(--hover); }
.sello:hover .sello__more .i { transform: translateX(3px); }
.sello:active .sello__logo { transform: scale(.98); box-shadow: none; transition-duration: .1s; }

.projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem); }
.project[hidden] { display: none; }
.project__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.project__media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--ink); border-radius: var(--radius);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.project__media picture { display: contents; }
.project__media img, .project__media .poster { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.project__media .poster--sq { display: none; }
.project__media.is-small img { object-fit: scale-down; }
.project__link:hover .project__media { transform: translate(-4px, -4px); box-shadow: 4px 4px 0 var(--hover); }
.project__link:hover .project__media img, .project__link:hover .project__media .poster { transform: scale(1.035); }
.project__body { display: flex; flex-direction: column; gap: .55rem; flex: 1; padding-top: 1.1rem; }
.project__meta { display: flex; flex-wrap: wrap; gap: .3rem .7rem; font: 500 .7rem/1.3 var(--font-label); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.project__meta span + span::before { content: "/"; margin-right: .7rem; color: var(--line-strong); }
.project__title { font-size: 1.6rem; text-decoration: underline 2px transparent; text-underline-offset: .15em; transition: text-decoration-color .2s; }
.project__link:hover .project__title { text-decoration-color: currentColor; }
.project__text { color: var(--muted); font-size: .95rem; }
.tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .15rem; }
.tag { padding: .28rem .5rem; font: 500 .7rem/1.2 var(--font-label); color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius); }
.project__cta { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: .6rem; font-size: .9rem; font-weight: 600; color: var(--accent); }
.project__cta .i { transition: transform .25s var(--ease); }
.project__link:hover .project__cta .i { transform: translateX(4px); }

/* En el celular (el mismo corte que MOBILE_MQ en templates.js): tarjetas pequeñas, dos por fila, con la portada
   cuadrada, el número, la categoría y el título; toda la tarjeta es el enlace. De cuatro en cuatro (main.js). */
@media (max-width: 639.98px) {
  .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem .875rem; }
  .project__media { aspect-ratio: 1; }
  .project__media .poster--wide { display: none; }
  .project__media .poster--sq { display: block; }
  .project__body { gap: .3rem; padding-top: .65rem; }
  .project__meta { gap: .15rem .45rem; font-size: .62rem; }
  .project__meta span + span::before { margin-right: .45rem; }
  .project__meta-more, .project__text, .project .tags, .project__cta { display: none; }
  .project__title { font-size: 1.1rem; overflow-wrap: anywhere; }
  .draft-flag { left: .4rem; top: .4rem; padding: .25rem .35rem; font-size: .56rem; }
}

/* Páginas de una lista de proyectos en el celular: 1 2 … 5. La actual, en tinta; los saltos, en tenue. */
.pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem; margin-top: 1.75rem; }
.pages[hidden] { display: none; }
.pages__btn {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .5rem;
  font: 500 .9rem/1 var(--font-label); font-variant-numeric: tabular-nums; color: var(--ink);
  background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius);
  cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .16s var(--ease);
}
.pages__btn:hover { border-color: var(--ink); }
.pages__btn:active { transform: scale(.96); }
.pages__btn[aria-current="page"] { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.pages__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pages__gap { min-width: 1.25rem; font: 500 .9rem/1 var(--font-label); color: var(--faint); text-align: center; }
[data-paged] > .is-off-page { display: none; }
/* Antes de que main.js arme las páginas, en el celular ya se ven solo las cuatro primeras (sin saltos al cargar). */
@media (max-width: 639.98px) { .js [data-paged]:not(.is-paged) > li:nth-child(n+5) { display: none; } }
[data-paged] { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
.draft-flag {
  position: absolute; left: .75rem; top: .75rem; padding: .35rem .55rem;
  background: #FDE047; color: #111113; font: 600 .68rem/1 var(--font-label); text-transform: uppercase; letter-spacing: .06em;
  border: 1px solid #111113;
}
.draft-inline { padding: .15rem .45rem; background: #FDE047; color: #111113; }

/* ---------- Investigación ---------- */
.research-list { display: grid; gap: 1.5rem; }
.research {
  display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden;
  background: var(--surface); border: 1px solid var(--ink); border-radius: var(--radius);
}
.research__main { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: clamp(1.5rem, 3.5vw, 2.5rem); }
.research__title { font-size: clamp(1.7rem, 3.2vw, 2.5rem); max-width: 24ch; }
.research__text { color: var(--muted); max-width: 62ch; }
.research__main .chips { margin-top: .25rem; }
.research__metric {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem;
  padding: clamp(1.5rem, 3.5vw, 2.5rem); color: var(--on-accent); background-color: var(--accent);
  background-image:
    linear-gradient(color-mix(in srgb, var(--on-accent) 14%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--on-accent) 14%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
}
.research__label { font: 500 .7rem/1 var(--font-label); text-transform: uppercase; letter-spacing: .1em; }
.research__num { font: 400 clamp(4.5rem, 11vw, 7.5rem)/.85 var(--font-display); letter-spacing: 0; }
.research__cap { max-width: 28ch; font-size: .95rem; line-height: 1.45; }
@media (min-width: 900px) { .research { grid-template-columns: minmax(0, 1.75fr) minmax(260px, 1fr); } }

/* ---------- GitHub ---------- */
.repos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.repo__link {
  display: flex; flex-direction: column; gap: .7rem; height: 100%; padding: 1.25rem;
  color: inherit; text-decoration: none; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .2s, transform .2s var(--ease), box-shadow .2s var(--ease);
}
.repo__link:hover { border-color: var(--ink); transform: translate(-3px, -3px); box-shadow: 3px 3px 0 var(--hover); }
.repo__name { display: flex; align-items: center; gap: .55rem; font: 500 .95rem/1.3 var(--font-label); overflow-wrap: anywhere; }
.repo__name .i { width: 17px; height: 17px; color: var(--muted); }
.repo__arrow { margin-left: auto; transition: transform .2s var(--ease); }
.repo__link:hover .repo__arrow { transform: translate(2px, -2px); color: var(--hover); }
.repo__desc { flex: 1; color: var(--muted); font-size: .92rem; }
.repo__meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font: 400 .74rem/1.4 var(--font-label); color: var(--muted); }
.repo__meta > span { display: inline-flex; align-items: center; gap: .35rem; }
.repo__meta .i { width: 14px; height: 14px; }
.lang-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }

/* ---------- Experiencia / Formación ---------- */
.rows { list-style: none; border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem 2rem; padding: 1.75rem 0; border-bottom: 1px solid var(--line); }
.row__period { font: 500 .78rem/1.6 var(--font-label); color: var(--muted); }
/* El periodo y, debajo, el logo de la institución (en el celular, uno al lado del otro sobre el título). */
.row__when { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: .9rem; }
.row__logo {
  flex: none; width: 84px; height: 84px; padding: 8px; object-fit: contain;
  background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--radius);
}
@media (min-width: 760px) {
  .row__when { flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: .85rem; }
  .row__logo { width: 120px; height: 120px; padding: 10px; }
}
.row__logo.logo--mono { background: transparent; }
.row__title { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
.row__subtitle { margin-top: .4rem; font-weight: 600; color: var(--accent); }
.row__text { margin-top: .75rem; max-width: 66ch; color: var(--muted); }
.row__list { margin-top: .75rem; padding-left: 1.1rem; color: var(--muted); }
.row__list li + li { margin-top: .3rem; }
.row__aside { align-self: start; }
@media (min-width: 760px) { .row { grid-template-columns: 10.5rem minmax(0, 1fr) auto; } }

/* ---------- Habilidades ---------- */
.skills { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 3rem; border-top: 1px solid var(--line); }
.skill { display: grid; gap: .85rem; padding: 1.4rem 0 1.5rem; border-bottom: 1px solid var(--line); }
.skill__name { display: flex; align-items: baseline; gap: .75rem; font: 600 1.05rem/1.25 var(--font-body); letter-spacing: 0; text-transform: none; }
.skill__idx { font: 500 .7rem/1 var(--font-label); color: var(--accent); }
@media (min-width: 900px) { .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Certificaciones ---------- */
/* Arriba, un panel con el logo del emisor en el color de su marca (--brand / --brand-ink, desde src/logos.js). */
.certs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 1.5rem; }
.cert {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--ink); border-radius: var(--radius); box-shadow: 5px 5px 0 var(--hard);
}
.cert__logo {
  position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden;
  color: var(--brand-ink, var(--bg)); background: var(--brand, var(--ink)); border-bottom: 1px solid var(--ink);
}
.cert__mark { position: relative; width: clamp(56px, 32%, 96px); height: auto; aspect-ratio: 1; }
.cert__mark--wide { width: clamp(84px, 48%, 150px); }
.cert__ghost {
  position: absolute; right: -16%; bottom: -36%; width: 76%; height: auto; aspect-ratio: 1;
  opacity: .14; transform: rotate(-12deg); transition: transform .5s var(--ease), opacity .5s;
}
.cert:hover .cert__ghost { opacity: .22; transform: rotate(-4deg) scale(1.08); }
.cert__num { position: absolute; top: .75rem; left: .85rem; font: 500 .7rem/1 var(--font-label); letter-spacing: .06em; opacity: .75; }
.cert__logo--mono .cert__mark { width: auto; aspect-ratio: auto; font: 400 clamp(2.8rem, 5vw, 3.6rem)/1 var(--font-display); letter-spacing: .02em; }
.cert__logo--mono .cert__ghost { width: auto; aspect-ratio: auto; font: 400 12rem/.8 var(--font-display); }
.cert__logo--img { color: #111113; background: #FFFFFF; }
.cert__img { width: auto; max-width: 64%; height: 52%; object-fit: contain; }
.cert__img.logo--mono { filter: brightness(0); } /* el panel es blanco en los dos temas */
.cert__body { display: flex; flex: 1; flex-direction: column; gap: .55rem; padding: 1.1rem 1.2rem 1.25rem; }
.cert__issuer { font: 500 .7rem/1.3 var(--font-label); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.cert__name { font-size: 1.5rem; }
.cert__id { font: 400 .74rem/1.4 var(--font-label); color: var(--muted); overflow-wrap: anywhere; }
.cert__links { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin-top: auto; padding-top: .3rem; font-size: .9rem; }
.cert__links .text-link { min-height: 32px; }
/* En el celular, dos por fila como los proyectos (y de cuatro en cuatro, con páginas): panel más bajo, nombre
   más chico, sin el ID (está en el certificado) y los enlaces uno bajo otro, con altura cómoda para el dedo. */
@media (max-width: 639.98px) {
  .certs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem .875rem; }
  .cert { box-shadow: 3px 3px 0 var(--hard); }
  .cert__logo { aspect-ratio: 4 / 3; }
  .cert__num { top: .5rem; left: .55rem; font-size: .62rem; }
  .cert__logo--mono .cert__mark { font-size: 1.9rem; }
  .cert__logo--mono .cert__ghost { font-size: 7rem; }
  .cert__body { gap: .3rem; padding: .7rem .75rem .35rem; }
  .cert__issuer { font-size: .6rem; }
  .cert__name { font-size: 1.05rem; overflow-wrap: anywhere; }
  .cert__id { display: none; }
  .cert__links { flex-direction: column; gap: 0; padding-top: .1rem; font-size: .8rem; }
  .cert__links .text-link { min-height: 0; padding-block: .65rem; background-origin: content-box; } /* el subrayado queda pegado al texto */
}

/* ---------- Idiomas ---------- */
.langs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1rem; }
.lang { padding: 1.4rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.lang__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; }
.lang__name { font-size: 1.65rem; }
.lang__level { font: 500 .8rem/1.3 var(--font-label); color: var(--accent); }
.cefr { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-top: 1.25rem; }
.cefr__seg { display: flex; flex-direction: column; gap: .45rem; font: 500 .66rem/1 var(--font-label); color: var(--faint); }
.cefr__seg::before { content: ""; height: 10px; background: var(--surface-2); border: 1px solid var(--line-strong); }
.cefr__seg.is-full, .cefr__seg.is-half { color: var(--ink); }
.cefr__seg.is-full::before { background: var(--ink); border-color: var(--ink); }
.lang__link { margin-top: 1.1rem; font-size: .9rem; }
.cefr__seg.is-half::before { background: repeating-linear-gradient(135deg, var(--ink) 0 2px, transparent 2px 5px); border-color: var(--ink); }

/* ---------- Contacto ---------- */
.contact { container-type: inline-size; }
.contact__msg { max-width: 40ch; font: 500 clamp(1.2rem, 2.3vw, 1.55rem)/1.35 var(--font-body); letter-spacing: -.015em; }
/* El correo llena el ancho de la sección: el tamaño sale del ancho disponible ÷ número de caracteres. */
.contact__mail {
  display: block; width: fit-content; max-width: 100%; margin-top: clamp(1rem, 3vw, 1.75rem); padding-bottom: .06em;
  font: 400 clamp(1.5rem, 6vw, 4rem)/1.1 var(--font-display); letter-spacing: .01em;
  font-size: clamp(1.1rem, 100cqi / (var(--len, 24) * .5), 8rem);
  color: var(--accent); text-decoration: none; overflow-wrap: break-word;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 .06em no-repeat;
  transition: background-size .4s var(--ease);
}
.contact__mail:hover { background-size: 100% .06em; }
.contact__mail-t { display: block; }
.contact__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.clinks {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); column-gap: 2rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem); list-style: none; border-top: 2px solid var(--ink);
}
.clink {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  min-height: 64px; padding: .9rem 0; border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
}
.clink > .i { width: 21px; height: 21px; }
.clink__text { display: flex; flex-direction: column; min-width: 0; }
.clink__label { font: 500 .68rem/1.4 var(--font-label); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.clink__val { font-weight: 600; overflow-wrap: anywhere; transition: color .2s; }
.clink__arrow { color: var(--muted); transition: transform .2s var(--ease), color .2s; }
a.clink:hover .clink__val, a.clink:hover .clink__arrow { color: var(--hover); }
a.clink:hover .clink__arrow { transform: translate(3px, -3px); }

/* ---------- Footer ---------- */
.footer { padding-block: 2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .875rem; }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; }
.footer__top { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: var(--ink); font-weight: 500; text-decoration: none; }
.footer__top:hover { color: var(--hover); }
.footer__top .i { transition: transform .25s var(--ease); }
.footer__top:hover .i { transform: translateY(-3px); }

/* ---------- Botón de edición (solo con sesión iniciada) ---------- */
.admin-fab {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 60;
  display: flex; align-items: center; gap: .25rem; padding: .3rem .3rem .3rem .85rem;
  color: var(--bg); background: var(--ink); border-radius: 999px; box-shadow: 0 8px 24px rgb(0 0 0 / .22);
}
.admin-fab__label { display: inline-flex; align-items: center; gap: .5rem; font: 500 .7rem/1 var(--font-label); text-transform: uppercase; letter-spacing: .07em; }
.admin-fab__btn {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: 0 .95rem; margin-left: .4rem;
  font-size: .88rem; font-weight: 600; text-decoration: none; color: var(--on-accent); background: var(--accent); border-radius: 999px;
}
.admin-fab__btn { transition: background-color .2s, transform .16s var(--ease); }
.admin-fab__btn:hover { background: var(--accent-hover); }
.admin-fab__btn:active { transform: scale(.96); }
.admin-fab__btn .i { width: 16px; height: 16px; }
@media (max-width: 479px) { .admin-fab__label { display: none; } .admin-fab { padding-left: .3rem; } .admin-fab__btn { margin-left: 0; } }

/* ---------- Página de proyecto ---------- */
.case { padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(4rem, 8vw, 6rem); }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; margin-bottom: clamp(.75rem, 2.5vw, 1.5rem); font: 500 .78rem/1.3 var(--font-label); color: var(--muted); }
.breadcrumb a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: var(--ink); text-decoration: none; }
.breadcrumb a:hover { color: var(--hover); }

/* Portada mediana a la izquierda y ficha del proyecto a la derecha, con «Sobre el proyecto» bajo la ficha.
   Debajo va la galería, a todo el ancho; sus piezas con texto y sus bloques de texto usan la rejilla 7/5. */
.case__stage { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "cover" "info" "about"; gap: 2.5rem; }
.case__cover { grid-area: cover; min-width: 0; max-width: 30rem; --piece-max: min(64vh, 30rem); }
.case__info { grid-area: info; }
.case__about { grid-area: about; }
.case__info, .case__about { max-width: 46rem; }
@media (min-width: 1000px) {
  .story, .ptext { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2.5rem, 4vw, 4.5rem); }
  .case__stage {
    grid-template-columns: minmax(0, clamp(20rem, 32vw, 30rem)) minmax(0, 1fr); column-gap: clamp(2.5rem, 5vw, 5rem);
    grid-template-areas: "cover info" "cover about"; grid-template-rows: auto 1fr; align-items: start;
  }
}

/* Marcos de la portada y de la galería. La imagen se ve entera y nunca más grande que su tamaño real
   (estirada se vería borrosa): si es pequeña, queda centrada sobre el fondo del marco y main.js le da
   más aire con .is-small. */
.case { --piece-max: min(82vh, 1400px); }
.piece__frame {
  position: relative; display: grid; place-items: center; overflow: hidden;
  color: inherit; background: var(--surface-2); border: 1px solid var(--ink); border-radius: var(--radius);
}
.piece__frame > img, .piece__frame > video { width: auto; height: auto; max-width: 100%; max-height: var(--piece-max); }
.piece__frame.is-small { padding: clamp(1.5rem, 5vw, 3.5rem); }
.piece__frame.is-fit > img { width: 100%; object-fit: contain; }
/* Con su tamaño real conocido (--w, --ar desde src/imagesize.js), la imagen reserva su espacio antes de cargar:
   el ancho de la columna, sin pasar de su ancho real ni del alto máximo. */
.piece__frame:not(.piece__frame--tile) > img[width] {
  width: min(100%, var(--w) * 1px, var(--piece-max) * var(--ar)); height: auto; max-height: none;
  aspect-ratio: var(--ar); object-fit: contain;
}
.piece__frame.is-fit:not(.piece__frame--tile) > img[width] { width: min(100%, var(--piece-max) * var(--ar)); }
.piece__frame--poster { aspect-ratio: 1; }
.piece__frame--poster .poster { width: 100%; height: 100%; }
.piece__frame--embed { aspect-ratio: 16 / 9; }
.piece__frame--embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
a.piece__frame { cursor: zoom-in; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
a.piece__frame:active { transform: scale(.985); box-shadow: none; transition-duration: .12s; }
.piece__zoom {
  position: absolute; top: .6rem; right: .6rem; display: grid; place-items: center; width: 36px; height: 36px;
  color: var(--ink); background: var(--surface); border: 1px solid var(--ink); border-radius: var(--radius);
  opacity: 0; transform: translateY(-4px); transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.piece__zoom .i { width: 16px; height: 16px; }
@media (hover: hover) {
  a.piece__frame:hover { transform: translate(-4px, -4px); box-shadow: 4px 4px 0 var(--hover); }
  a.piece__frame:hover .piece__zoom { opacity: 1; transform: none; }
}
@media (hover: none) { .piece__zoom { opacity: 1; transform: none; } }
a.piece__frame:focus-visible .piece__zoom { opacity: 1; transform: none; }
.piece__cap { display: flex; gap: .75rem; margin-top: .65rem; font: 400 .8125rem/1.45 var(--font-label); color: var(--muted); }
.piece__num { flex: none; font-weight: 500; color: var(--accent); }
/* El pie de foto (corto) y, debajo, la descripción de la pieza, en texto de lectura */
.piece__cap-text { display: grid; gap: .3rem; min-width: 0; }
.piece__desc { display: block; max-width: 62ch; font: 400 .92rem/1.6 var(--font-body); color: var(--ink-2); text-wrap: pretty; }
.piece__desc::first-letter { text-transform: uppercase; }

.case__kicker { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font: 500 .75rem/1.3 var(--font-label); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.case__num { color: var(--accent); }
.case__title { margin-top: 1rem; font-size: clamp(2.6rem, 4.6vw, 4.4rem); overflow-wrap: break-word; }
.case__lede { margin-top: 1.1rem; max-width: 44ch; font: 500 clamp(1.05rem, 1.5vw, 1.25rem)/1.45 var(--font-body); letter-spacing: -.01em; color: var(--ink-2); }
.case__meta { margin-top: 1.75rem; border-top: 2px solid var(--ink); }
.case__meta div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.case__meta dt { padding-top: .2rem; font: 500 .68rem/1.4 var(--font-label); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.case__meta dd { font-size: .95rem; font-weight: 500; }
.case__sellos { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.case__sello { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .3rem .6rem; color: inherit; text-decoration: none; }
.case__sello img, .case__sello-mono { flex: none; width: 28px; height: 28px; object-fit: cover; border: 1px solid var(--line-strong); border-radius: var(--radius); }
.case__sello-mono { display: grid; place-items: center; font: 400 .8rem/1 var(--font-display); color: var(--bg); background: var(--ink); }
.case__sello-name { text-decoration: underline 1px transparent; text-underline-offset: .2em; transition: text-decoration-color .2s; }
.case__sello:hover .case__sello-name { text-decoration-color: currentColor; }
.case__parte { font: 600 .68rem/1.3 var(--font-label); text-transform: uppercase; letter-spacing: .07em; color: var(--accent); }
.case__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.case__label { margin-bottom: 1rem; font: 500 .75rem/1.3 var(--font-label); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.prose p { max-width: 66ch; font-size: 1.075rem; line-height: 1.75; color: var(--ink-2); }
.prose p + p { margin-top: 1.1em; }
.dev-hint { margin-top: 1rem; padding: 1rem 1.25rem; font: 400 .82rem/1.6 var(--font-label); color: var(--ink-2); background: var(--accent-soft); border: 1px dashed var(--accent); }
.gallery > .dev-hint { margin-top: 0; }

/* Galería: las piezas en el orden del editor */
.gallery { margin-top: clamp(4rem, 9vw, 7rem); }
.gallery__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); padding-top: 1rem; border-top: 2px solid var(--ink);
}
.gallery__head .case__label { margin: 0; }
.gallery__count { font: 500 .72rem/1.3 var(--font-label); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.gallery__body { display: grid; gap: clamp(3.5rem, 8vw, 6rem); }

/* Imágenes seguidas sin texto: cuadrícula de marcos cuadrados, cada imagen entera (sin recortar) */
.pieces { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2vw, 1.5rem); }
.piece__frame--tile { aspect-ratio: 1; }
.piece__frame--tile > img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: scale-down; }
/* Una imagen sola: centrada y del ancho que tenga */
.piece--solo { justify-self: center; width: fit-content; max-width: 100%; }
.piece--solo[style] { width: min(100%, var(--w) * 1px + 2px, var(--piece-max) * var(--ar) + 2px); }

/* Pieza con título o texto: la imagen a la izquierda y su explicación al lado, fija mientras se recorre */
.story { display: grid; gap: 1.5rem; align-items: start; }
.story__text { display: grid; gap: .9rem; align-content: start; }
.story__num { font: 500 .75rem/1 var(--font-label); color: var(--accent); }
.story__title, .ptext__title { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
@media (min-width: 1000px) { .story__text { position: sticky; top: calc(var(--nav-h) + 2rem); } }
/* Bloque de solo texto: el título a la izquierda y el texto en la columna de la derecha */
.ptext { display: grid; gap: 1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
@media (min-width: 1000px) { .ptext { align-items: start; } }

/* Galería a pantalla completa (dialog). La imagen se ve entera y nunca más grande que su tamaño real. */
.lb {
  --lb-pad: clamp(.75rem, 3vw, 2.5rem);
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  color: var(--ink); background: var(--bg); border: 0; overscroll-behavior: contain; touch-action: pan-y pinch-zoom;
}
.lb[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lb::backdrop { background: transparent; }
html:has(.lb[open]) { overflow: hidden; }
.lb__bar, .lb__nav { display: flex; align-items: center; gap: 1rem; padding: .6rem var(--gutter); }
.lb__bar { border-bottom: 1px solid var(--line); }
.lb__nav { justify-content: center; padding-bottom: max(.6rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.lb.is-single .lb__nav { visibility: hidden; }
.lb__cap { flex: 1; min-width: 0; font: 400 .8125rem/1.4 var(--font-label); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb__count { min-width: 5rem; text-align: center; font: 500 .78rem/1 var(--font-label); font-variant-numeric: tabular-nums; color: var(--muted); }
.lb__stage { position: relative; min-height: 0; }
.lb__stage.is-loading .lb__img { visibility: hidden; }
.lb__stage.is-loading::after { content: "Cargando…"; position: absolute; inset: 0; display: grid; place-items: center; font: 400 .8rem/1 var(--font-label); color: var(--muted); }
.lb__img {
  position: absolute; inset: 0; margin: auto;
  max-width: calc(100% - 2 * var(--lb-pad)); max-height: calc(100% - 2 * var(--lb-pad));
  background: var(--surface-2); outline: 1px solid var(--line-strong);
}

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: clamp(3rem, 7vw, 5rem); padding-top: 1.25rem; border-top: 2px solid var(--ink); }
.pager a { display: flex; flex-direction: column; gap: .4rem; padding: .5rem 0; color: inherit; text-decoration: none; }
.pager__next { grid-column: 2; align-items: flex-end; text-align: right; }
.pager__dir { display: inline-flex; align-items: center; gap: .4rem; font: 500 .72rem/1 var(--font-label); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.pager__title { font: 400 clamp(1.3rem, 2.8vw, 2rem)/1.15 var(--font-display); letter-spacing: .01em; text-transform: uppercase; transition: color .2s; }
.pager a:hover .pager__title { color: var(--hover); }

/* ---------- Página de un sello ----------
   La cabecera es un campo del color del sello (--sello, con su tinta --sello-ink); el resto de la página
   ya viene teñido desde <head> (src/color.js). Sin color, toma el verde del sitio. */
.sello-hero {
  --hard: var(--sello-ink, var(--on-accent));
  background: var(--sello, var(--accent)); color: var(--sello-ink, var(--on-accent));
  border-bottom: 1px solid var(--ink);
}
.sello-hero > .container { padding-block: clamp(.75rem, 2.5vw, 1.5rem) clamp(2.5rem, 6vw, 4.5rem); }
.sello-hero .breadcrumb, .sello-hero .breadcrumb a { color: inherit; }
.sello-hero .breadcrumb a:hover { color: inherit; text-decoration: underline; text-underline-offset: .25em; }
.sello-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "text" "count";
  gap: 1.5rem; margin-top: clamp(.5rem, 2vw, 1.5rem);
}
@media (min-width: 760px) {
  .sello-hero__grid { grid-template-columns: clamp(11rem, 20vw, 17rem) minmax(0, 1fr); grid-template-areas: "logo text" "logo count"; gap: 1.25rem clamp(2rem, 4vw, 3.5rem); align-items: end; }
}
@media (min-width: 1150px) {
  .sello-hero__grid { grid-template-columns: clamp(11rem, 20vw, 17rem) minmax(0, 1fr) auto; grid-template-areas: "logo text count"; }
}
.sello-hero__logo {
  grid-area: logo; display: block; width: min(13rem, 56vw); aspect-ratio: 1; overflow: hidden;
  background: var(--surface); border: 1px solid var(--sello-ink, var(--ink)); border-radius: var(--radius);
  box-shadow: 8px 8px 0 var(--sello-ink, var(--ink));
}
@media (min-width: 760px) { .sello-hero__logo { width: 100%; } }
.sello-hero__logo img { width: 100%; height: 100%; object-fit: cover; }
.sello-hero__logo--mono { display: grid; place-items: center; font: 400 clamp(2.5rem, 7vw, 5rem)/1 var(--font-display); color: var(--sello, var(--accent)); background: var(--sello-ink, var(--on-accent)); }
.sello-hero__text { grid-area: text; min-width: 0; }
.sello-hero__kicker { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font: 500 .75rem/1.3 var(--font-label); text-transform: uppercase; letter-spacing: .07em; }
.sello-hero__name { margin-top: .6rem; font-size: clamp(3rem, 8.5vw, 8rem); overflow-wrap: anywhere; }
.sello-hero__desc { margin-top: 1rem; max-width: 52ch; font: 500 clamp(1.02rem, 1.4vw, 1.2rem)/1.5 var(--font-body); }
.sello-hero__desc p + p { margin-top: .6rem; }
.sello-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.sello-hero .btn { color: inherit; background: transparent; border-color: currentColor; }
.sello-hero .btn--primary { color: var(--sello, var(--accent)); background: var(--sello-ink, var(--on-accent)); border-color: var(--sello-ink, var(--on-accent)); }
.sello-hero .btn--primary:hover { box-shadow: 3px 3px 0 var(--sello-ink, var(--on-accent)); }
.sello-hero__count { grid-area: count; display: flex; align-items: baseline; gap: .6rem; }
@media (min-width: 1150px) { .sello-hero__count { flex-direction: column; align-items: flex-end; gap: .2rem; text-align: right; } }
.sello-hero__num { font: 400 clamp(3.5rem, 7vw, 6.5rem)/1 var(--font-display); }
.sello-hero__unit { font: 500 .75rem/1.3 var(--font-label); text-transform: uppercase; letter-spacing: .07em; }

.sello-work { padding-top: clamp(3rem, 7vw, 5rem); }
.sello-work__title {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem); padding-top: 1rem; border-top: 2px solid var(--ink);
  font-size: clamp(2rem, 4.8vw, 3.5rem); overflow-wrap: anywhere;
}
.project__parte { color: var(--accent); }
.sello-empty { max-width: 46rem; padding: 1.5rem; color: var(--muted); border: 1px dashed var(--line-strong); }
.sello-empty a { color: var(--accent); }
.sello-others { margin-top: clamp(3.5rem, 8vw, 6rem); padding-top: 1.25rem; padding-bottom: clamp(4rem, 8vw, 6rem); border-top: 1px solid var(--line); }
.sello-others .stamps { grid-template-columns: repeat(auto-fill, minmax(0, 9.5rem)); }

/* ---------- Ajedrez ----------
   Casillas en dos verdes del sitio; las piezas son las siluetas planas del juego de piezas (SVG, en
   ajedrez.js): las negras macizas y las blancas en blanco con contorno, que también llena las ranuras entre
   sus partes. Las marcas de jugada son cuadradas, como los puntos del sitio. */
.chess {
  --sq-light: #E9EEE6; --sq-dark: #7CA28A;
  --sq-last: rgb(230 205 60 / .5); --sq-sel: rgb(230 205 60 / .72);
  --sq-dot: rgb(17 17 19 / .32); --sq-check: rgb(214 40 40 / .62);
  /* Lo que se anota con el clic derecho: casillas en coral y flechas en naranja (se ven sobre los dos verdes,
     y no se confunden con el amarillo de la última jugada ni con el rojo del jaque). */
  --sq-mark: rgb(236 104 78 / .78); --arrow: #F39C2C;
  /* El tablero y sus dos barras caben en la pantalla, debajo del menú y de la ruta. */
  --board: max(17rem, min(44rem, calc(100svh - var(--nav-h) - 12.5rem)));
  padding-block: clamp(1rem, 3vw, 2rem) clamp(4rem, 8vw, 6rem);
}
:root[data-theme="dark"] .chess { --sq-light: #B6C3BA; --sq-dark: #4F7662; --sq-dot: rgb(13 13 15 / .45); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chess { --sq-light: #B6C3BA; --sq-dark: #4F7662; --sq-dot: rgb(13 13 15 / .45); }
}
/* En el celular: título, tablero, estado y controles, uno debajo del otro. Con espacio, el tablero a la
   izquierda y el resto en una columna (el estado siempre a la vista, debajo del título). */
.chess__layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "play" "status" "side"; gap: 1.5rem; }
@media (min-width: 1000px) {
  .chess__layout {
    grid-template-columns: var(--board) minmax(18rem, 25rem); grid-template-rows: auto auto 1fr;
    grid-template-areas: "play head" "play status" "play side"; gap: 1.5rem clamp(2.5rem, 5vw, 5rem); align-items: start;
  }
}
.chess__head { grid-area: head; }
.chess__kicker { font: 500 .75rem/1.3 var(--font-label); text-transform: uppercase; letter-spacing: .07em; color: var(--accent); }
.chess__title { margin-top: .6rem; font-size: clamp(2.6rem, 6vw, 4.4rem); }
.chess__play { grid-area: play; width: min(100%, var(--board)); min-width: 0; }
.chess__side { grid-area: side; display: grid; gap: 1.5rem; align-content: start; min-width: 0; }

.chess__bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2.6rem; }
.chess__who { display: inline-flex; align-items: center; gap: .55rem; font: 500 .72rem/1.2 var(--font-label); text-transform: uppercase; letter-spacing: .07em; }
.chess__who .live-dot { margin-left: .2rem; background: var(--accent); }
.chess__who .live-dot::after { border-color: var(--accent); }
.chess__chip { width: 11px; height: 11px; border: 1px solid var(--ink); }
.chess__chip--w { background: #FFFFFF; }
.chess__chip--b { background: #111113; }
.chess__taken { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
/* Las capturadas, en una bandeja del color de las casillas claras (las negras se ven también en el tema
   oscuro), en fila y a escala (cada una recortada a su ancho, --r = ancho / alto). */
.chess__pieces {
  display: inline-flex; align-items: flex-end; gap: 1px; min-width: 0; overflow: hidden; padding: .15rem .35rem;
  background: var(--sq-light); border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.pc-mini { flex: none; height: 1.9rem; width: calc(1.9rem * var(--r)); overflow: visible; }
.chess__lead { font: 500 .72rem/1 var(--font-label); color: var(--muted); }

.chess__stage { position: relative; }
.board {
  position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr));
  width: 100%; aspect-ratio: 1; container-type: inline-size; touch-action: none; user-select: none; -webkit-user-select: none;
  /* Cuadros de 2×2 casillas: arriba a la izquierda, clara (a8 y h1 lo son). */
  background: repeating-conic-gradient(var(--sq-dark) 0 25%, var(--sq-light) 0 50%) 0 0 / 25% 25%;
  border: 1px solid var(--ink); box-shadow: 6px 6px 0 var(--hard);
}
.sq {
  position: relative; display: block; min-width: 0; padding: 0; margin: 0; border: 0; border-radius: 0;
  background: transparent; color: inherit; font: inherit; cursor: default; -webkit-tap-highlight-color: transparent;
}
/* Cada casilla pinta su color (el degradado del tablero queda debajo, para cuando no hay JavaScript): así no
   aparecen las líneas finas que deja el degradado repetido cuando el tablero no mide un número exacto de px. */
.sq.is-light { background: var(--sq-light); }
.sq.is-dark { background: var(--sq-dark); }
.sq::before, .sq::after { content: ""; position: absolute; pointer-events: none; }
.sq::before { inset: 0; }
.sq.is-last::before { background: var(--sq-last); }
.sq.is-sel::before { background: var(--sq-sel); }
.sq.is-check::before { background: var(--sq-check); }
.sq.is-mark { background-image: linear-gradient(var(--sq-mark), var(--sq-mark)); }
/* Las flechas (ajedrez.js): una capa sobre las piezas, en unidades de casilla (viewBox 0 0 8 8), que no
   recibe el mouse. Cada flecha es un grupo con su opacidad: la punta y el trazo no se oscurecen al cruzarse. */
.board__arrows { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.board__arrows g { opacity: .82; }
.board__arrows polyline { fill: none; stroke: var(--arrow); stroke-width: .2; stroke-linejoin: miter; }
.board__arrows polygon { fill: var(--arrow); }
.board:not(.is-busy) .sq.is-mine { cursor: grab; }
.board:not(.is-busy) .sq.is-target { cursor: pointer; }
.sq.is-target::after { left: 50%; top: 50%; width: 26%; height: 26%; transform: translate(-50%, -50%); background: var(--sq-dot); transition: width .12s var(--ease), height .12s var(--ease); }
.sq.is-target.is-capture::after { width: auto; height: auto; inset: 5%; transform: none; background: none; border: max(3px, 1.1cqi) solid var(--sq-dot); }
.sq.is-target.is-hover::after, .sq.is-target:hover::after { width: 34%; height: 34%; }
.sq.is-target.is-capture.is-hover::after, .sq.is-target.is-capture:hover::after { inset: 2%; width: auto; height: auto; }
.sq:focus-visible { z-index: 2; outline: 3px solid var(--ink); outline-offset: -3px; }
.sq.is-moving { z-index: 3; }
.sq.is-dragging { z-index: 4; }
.sq.is-dragging .pc { filter: drop-shadow(0 6px 8px rgb(0 0 0 / .3)); }
.sq__rank, .sq__file { position: absolute; z-index: 1; font: 600 max(8px, 1.9cqi)/1 var(--font-label); pointer-events: none; }
.sq__rank { top: 5%; left: 7%; }
.sq__file { right: 7%; bottom: 5%; }
.sq.is-light .sq__rank, .sq.is-light .sq__file { color: #4F7662; }
.sq.is-dark .sq__rank, .sq.is-dark .sq__file { color: #F1F4EF; }

.pc { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* Las piezas son pixel art (ajedrez.js): cuadrículas de 13×13 con bordes nítidos, sin suavizar. Mismos
   colores en los dos temas: son objetos del tablero. Las blancas, con contorno por fuera (un cuarto de píxel). */
:is(.pc, .pc-mini) path { shape-rendering: crispEdges; }
.pc--w { fill: #FFFFFF; stroke: #111113; stroke-width: .5; stroke-linejoin: miter; paint-order: stroke; }
.pc--b { fill: #111113; }
.pc-mini.pc--w { stroke-width: .7; }

.chess__status {
  grid-area: status; display: flex; align-items: center; gap: .65rem; min-height: 3rem; padding: .7rem 1rem;
  font-weight: 600; background: var(--surface); border: 1px solid var(--ink);
}
.chess__status-dot { flex: none; position: relative; width: 8px; height: 8px; background: var(--accent); }
.chess__status[data-state="thinking"] .chess__status-dot { animation: blink 1s steps(2, jump-none) infinite; }
.chess__status[data-state="win"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.chess__status[data-state="win"] .chess__status-dot { background: currentColor; }
.chess__status[data-state="loss"] { color: var(--bg); background: var(--ink); }
.chess__status[data-state="loss"] .chess__status-dot, .chess__status[data-state="draw"] .chess__status-dot { background: var(--muted); }
@keyframes blink { 50% { opacity: .15; } }

.seg { min-width: 0; margin: 0; padding: 0; border: 0; }
.seg__legend { padding: 0; margin-bottom: .55rem; font: 500 .72rem/1.3 var(--font-label); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.seg__opts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid var(--ink); border-radius: var(--radius); }
.seg__opt { position: relative; }
.seg__opt input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg__opt span { display: grid; place-items: center; min-height: 44px; padding: .5rem .6rem; font-size: .92rem; font-weight: 500; text-align: center; transition: background-color .15s, color .15s; }
.seg__opt + .seg__opt span { border-left: 1px solid var(--ink); }
.seg__opt:hover input:not(:checked) + span { background: var(--surface-2); }
.seg__opt input:checked + span { color: var(--bg); background: var(--ink); }
.seg__opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; position: relative; z-index: 2; }
.seg__opt:active span { transform: scale(.97); }

.chess__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.chess__actions .btn[disabled] { opacity: .45; pointer-events: none; }
/* Sonido: el mismo botón prendido o apagado (aria-pressed); apagado, el parlante tachado y el texto tenue. */
.chess__sound { margin-left: auto; }
.chess__sound[aria-pressed="true"] .i--off, .chess__sound[aria-pressed="false"] .i--on { display: none; }
.chess__sound[aria-pressed="false"] { color: var(--muted); }
.chess__moves { padding-top: 1rem; border-top: 2px solid var(--ink); }
.chess__moves .case__label { margin-bottom: .6rem; }
.moves { max-height: 15rem; overflow-y: auto; list-style: none; font: 500 .88rem/1.5 var(--font-label); overscroll-behavior: contain; }
.moves li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; padding: .2rem .4rem; }
.moves li:nth-child(odd) { background: var(--surface-2); }
.moves li.is-last { background: var(--accent-soft); }
.moves__n { color: var(--faint); }
.moves__empty { color: var(--muted); font-size: .92rem; }
.chess__help { color: var(--muted); font-size: .85rem; line-height: 1.5; }

/* Coronación y fin de la partida: un cartel sobre el tablero. */
.chess__promo, .chess__end {
  position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 6%;
  background: color-mix(in srgb, var(--bg) 62%, transparent); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.chess__promo-card, .chess__end-card {
  display: grid; justify-items: center; gap: .9rem; width: min(100%, 26rem); padding: clamp(1rem, 4cqi, 1.75rem);
  text-align: center; background: var(--surface); border: 1px solid var(--ink); box-shadow: 6px 6px 0 var(--hard);
  scroll-margin: calc(var(--nav-h) + 1rem) 0 1rem; /* al traerlo a la vista, queda entero y no bajo la barra */
}
.chess__end-kicker { font: 500 .72rem/1.3 var(--font-label); text-transform: uppercase; letter-spacing: .07em; color: var(--accent); }
.chess__end-title { font: 400 clamp(2rem, 5vw, 3.2rem)/1.15 var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
.chess__end[data-state="win"] .chess__end-title { color: var(--accent); }
.chess__end-text { color: var(--muted); }
.chess__end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.chess__promo-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; width: 100%; }
.chess__promo-btn {
  position: relative; display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: .2rem; min-height: 44px; padding: .4rem .2rem .5rem;
  color: var(--ink); background: var(--sq-light); border: 1px solid var(--ink); border-radius: var(--radius); cursor: pointer;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.chess__promo-btn .pc { position: relative; inset: auto; width: clamp(2.75rem, 12cqi, 4.5rem); height: clamp(2.75rem, 12cqi, 4.5rem); }
.chess__promo-name { font: 500 .68rem/1.2 var(--font-label); text-transform: uppercase; letter-spacing: .05em; }
.chess__promo-btn:hover { transform: translate(-2px, -2px); box-shadow: 2px 2px 0 var(--hover); }
.chess__promo-btn:active { transform: scale(.97); box-shadow: none; }
@media screen and (prefers-reduced-motion: no-preference) {
  .chess__promo, .chess__end { animation: fade .2s var(--ease); }
  .chess__promo-card, .chess__end-card { animation: card-in .26s var(--ease); }
}
@keyframes card-in { from { opacity: 0; transform: scale(.96) translateY(6px); } }

/* ---------- 404 ---------- */
.notfound { padding-block: clamp(4rem, 12vw, 9rem); }
.notfound__code { font: 400 clamp(6rem, 22vw, 14rem)/.8 var(--font-display); letter-spacing: 0; color: var(--accent); }
.notfound__title { margin-top: 1.5rem; font-size: clamp(2rem, 4.6vw, 3.25rem); }
.notfound__text { margin: 1rem 0 2rem; max-width: 50ch; color: var(--muted); }

/* ---------- Movimiento ----------
   Todo lo que se oculta o se desplaza vive dentro de «screen and (prefers-reduced-motion: no-preference)»:
   sin JavaScript, al imprimir o con «reducir movimiento», la página se ve directamente en su estado final.
   · Carga: el nombre sube línea por línea, cae el punto, se dibuja la regla y entra el texto (~1.3 s).
   · Scroll: main.js marca con .is-pending lo que aún no se ve y lo pasa a .is-in una sola vez al entrar
     en pantalla. Cada [data-reveal="…"] tiene su propia coreografía; .is-in se retira al terminar para que
     los hover recuperen sus transiciones normales.
   · Las máscaras usan clip-path con márgenes negativos: dejan ver las tildes (Í, Ó) sin mover el diseño. */

/* Cifras que giran como un contador mecánico. main.js envuelve cada dígito de [data-roll] en .roll__col:
   el dígito real queda en el texto (transparente: se puede copiar y lo leen los lectores de pantalla) y
   encima gira una tira 0–9 hecha con ::after. --lh es el interlineado del número; cada dígito de la tira
   deja .6em de aire para que no asome el vecino. */
.research__num { --lh: .85em; }
.roll__col { position: relative; display: inline-block; clip-path: inset(-.1em -.06em); -webkit-text-fill-color: transparent; }
.roll__col::after {
  content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"; white-space: pre;
  position: absolute; top: 0; left: 0; width: 100%; text-align: center;
  line-height: calc(var(--lh) + .6em); -webkit-text-fill-color: currentColor;
  transform: translateY(calc(-1 * (var(--d) * (var(--lh) + .6em) + .3em)));
}

@media screen and (prefers-reduced-motion: no-preference) {
  .live-dot::after { animation: ping 2.4s var(--ease) infinite; }

  /* Carga del encabezado */
  .hero__line { clip-path: inset(-.3em -.1em 0); }
  .hero__line-in { animation: rise-mask 1s var(--ease-expo) calc(120ms + var(--i, 0) * 110ms) both; }
  .hero__dot { display: inline-block; animation: drop-dot .55s var(--ease) 820ms both; }
  .hero__status { animation: fade .6s ease 60ms both; }
  .hero__grid { position: relative; border-top-color: transparent; }
  .hero__grid::before {
    content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 2px;
    background: var(--ink); transform-origin: left; animation: draw 1.1s var(--ease-in-out) 260ms both;
  }
  .hero__role, .hero__lede, .hero__actions { animation: rise .8s var(--ease-expo) both; }
  .hero__role { animation-delay: 420ms; }
  .hero__lede { animation-delay: 500ms; }
  .hero__actions { animation-delay: 580ms; }

  /* Página de proyecto: el texto entra en orden de lectura (la imagen llega volando desde la tarjeta) */
  .breadcrumb { animation: fade .5s ease both; }
  .case__info > *, .case__about { animation: rise .8s var(--ease-expo) both; }
  .case__info > :nth-child(2) { animation-delay: 70ms; }
  .case__info > :nth-child(3) { animation-delay: 140ms; }
  .case__info > :nth-child(4) { animation-delay: 210ms; }
  .case__info > :nth-child(5) { animation-delay: 280ms; }
  .case__about { animation-delay: 320ms; }
  .notfound__code { animation: rise 1s var(--ease-expo) both; }

  /* Scroll · lo genérico (ficha, filas, repositorios, certificaciones, idiomas): sube y aparece */
  .is-pending:is([data-reveal=""], [data-reveal="research"], [data-reveal="cert"], [data-reveal="lang"]) { opacity: 0; transform: translateY(28px); }
  .is-in:is([data-reveal=""], [data-reveal="research"], [data-reveal="cert"], [data-reveal="lang"]) {
    transition: opacity .7s var(--ease), transform .9s var(--ease-expo);
    transition-delay: calc(var(--i, 0) * 80ms);
  }

  /* Títulos de sección: se dibuja la regla y el título sube desde detrás de su línea */
  .sec-head:is(.is-pending, .is-in) { position: relative; border-top-color: transparent; }
  .sec-head:is(.is-pending, .is-in)::before {
    content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 2px;
    background: var(--ink); transform-origin: left;
  }
  .sec-head:is(.is-pending, .is-in) h2 { clip-path: inset(-.3em -.1em 0); }
  .sec-head.is-pending::before { transform: scaleX(0); }
  .sec-head.is-pending .sec-head__t { transform: translateY(120%); } /* 120 %: que no asomen las tildes */
  .sec-head.is-pending :is(.sec-head__num, .sec-head__note) { opacity: 0; }
  .sec-head.is-pending .sec-head__intro { opacity: 0; transform: translateY(12px); }
  .sec-head.is-in::before { transition: transform 1s var(--ease-in-out); }
  .sec-head.is-in .sec-head__t { transition: transform .95s var(--ease-expo) 120ms; }
  .sec-head.is-in .sec-head__num { transition: opacity .5s ease 380ms; }
  .sec-head.is-in .sec-head__intro { transition: opacity .7s var(--ease) 320ms, transform .9s var(--ease-expo) 320ms; }
  .sec-head.is-in .sec-head__note { transition: opacity .6s ease 460ms; }

  /* Proyectos: el marco sube, la imagen se abre dentro de él y luego entra el texto */
  .project.is-pending .project__media { opacity: 0; transform: translateY(32px); }
  .project.is-pending .project__media > :first-child { clip-path: inset(100% 0 0 0); transform: scale(1.15); }
  .project.is-pending .project__body { opacity: 0; transform: translateY(16px); }
  .project.is-in .project__media {
    transition: opacity .6s var(--ease), transform 1s var(--ease-expo);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .project.is-in .project__media > :first-child {
    clip-path: inset(0); /* clip-path no se interpola hacia «none» */
    transition: clip-path 1.1s var(--ease-in-out), transform 1.5s var(--ease-expo);
    transition-delay: calc(var(--i, 0) * 90ms + 120ms);
  }
  .project.is-in .project__body {
    transition: opacity .7s var(--ease), transform .9s var(--ease-expo);
    transition-delay: calc(var(--i, 0) * 90ms + 260ms);
  }

  /* Sellos: el logo se descubre de abajo arriba y luego entran el nombre y el contador */
  .sello.is-pending .sello__logo { clip-path: inset(100% 0 0 0); }
  .sello.is-pending :is(.sello__text, .sello__side) { opacity: 0; transform: translateY(14px); }
  .sello.is-in .sello__logo { clip-path: inset(0); transition: clip-path .9s var(--ease-in-out); }
  .sello.is-in .sello__text { transition: opacity .6s var(--ease) 160ms, transform .9s var(--ease-expo) 160ms; }
  .sello.is-in .sello__side { transition: opacity .6s var(--ease) 300ms, transform .9s var(--ease-expo) 300ms; }

  /* Galería: cada marco sube y su imagen se abre dentro de él; el texto de la pieza llega después */
  [data-reveal="piece"].is-pending { opacity: 0; transform: translateY(32px); }
  [data-reveal="piece"].is-pending .piece__frame > :is(img, video, iframe) { clip-path: inset(100% 0 0 0); transform: scale(1.08); }
  [data-reveal="piece"].is-pending :is(.story__text, .ptext > .prose) { opacity: 0; transform: translateY(16px); }
  [data-reveal="piece"].is-in { transition: opacity .6s var(--ease), transform 1s var(--ease-expo); transition-delay: calc(var(--i, 0) * 90ms); }
  [data-reveal="piece"].is-in .piece__frame > :is(img, video, iframe) {
    clip-path: inset(0);
    transition: clip-path 1.1s var(--ease-in-out), transform 1.5s var(--ease-expo);
    transition-delay: calc(var(--i, 0) * 90ms + 120ms);
  }
  [data-reveal="piece"].is-in :is(.story__text, .ptext > .prose) { transition: opacity .7s var(--ease) 280ms, transform .9s var(--ease-expo) 280ms; }

  /* Visor a pantalla completa: entra con un fundido y la imagen se asienta; sale más rápido de lo que entra */
  .lb { opacity: 0; transition: opacity .16s var(--ease-exit), display .16s allow-discrete, overlay .16s allow-discrete; }
  .lb[open] { opacity: 1; transition: opacity .22s var(--ease), display .22s allow-discrete, overlay .22s allow-discrete; }
  .lb[open] .lb__img { transition: transform .4s var(--ease-expo); }
  @starting-style {
    .lb[open] { opacity: 0; }
    .lb[open] .lb__img { transform: scale(.96); }
  }

  /* Investigación: el panel del resultado barre de izquierda a derecha y la cifra gira */
  .research.is-pending .research__metric { clip-path: inset(0 100% 0 0); }
  .research.is-in .research__metric { clip-path: inset(0); transition: clip-path 1.2s var(--ease-in-out) 250ms; }
  .research__num { --roll-delay: 500ms; }
  .roll:not(.is-rolled) .roll__col::after { transform: translateY(-.3em); }
  .roll.is-rolled .roll__col::after { transition: transform 1.1s var(--ease-expo) calc(var(--roll-delay, 0ms) + var(--i, 0) * 80ms + var(--c, 0) * 90ms); }

  /* Habilidades: el nombre del grupo y luego los chips, uno tras otro */
  .skill.is-pending .skill__name { opacity: 0; transform: translateY(12px); }
  .skill.is-pending .chip { opacity: 0; transform: translateY(10px); }
  .skill.is-in .skill__name {
    transition: opacity .6s var(--ease), transform .8s var(--ease-expo);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  .skill.is-in .chip {
    transition: opacity .45s var(--ease), transform .6s var(--ease-expo);
    transition-delay: calc(var(--i, 0) * 80ms + 140ms + min(var(--k, 0), 14) * 35ms);
  }

  /* Certificaciones: la marca de fondo gira hasta su sitio */
  .cert.is-pending .cert__ghost { opacity: 0; transform: rotate(-38deg) scale(.86); }
  .cert.is-in .cert__ghost {
    transition: opacity .9s ease, transform 1.4s var(--ease-expo);
    transition-delay: calc(var(--i, 0) * 80ms + 250ms);
  }

  /* Idiomas: la barra A1–C2 se llena segmento por segmento */
  .lang .cefr__seg::before { transform-origin: left; }
  .lang.is-pending .cefr__seg:is(.is-full, .is-half)::before { transform: scaleX(0); }
  .lang.is-in .cefr__seg:is(.is-full, .is-half)::before {
    transition: transform .55s var(--ease);
    transition-delay: calc(var(--i, 0) * 80ms + 300ms + var(--k, 0) * 90ms);
  }

  /* Contacto: el mensaje, el correo desde su máscara, los botones; luego la regla y los enlaces */
  .contact__lead:is(.is-pending, .is-in) .contact__mail { clip-path: inset(-.3em -.1em -.15em); }
  .contact__lead.is-pending .contact__msg { opacity: 0; transform: translateY(16px); }
  .contact__lead.is-pending .contact__mail-t { transform: translateY(140%); }
  .contact__lead.is-pending .contact__actions { opacity: 0; transform: translateY(12px); }
  .contact__lead.is-in .contact__msg { transition: opacity .7s var(--ease), transform .9s var(--ease-expo); }
  .contact__lead.is-in .contact__mail-t { transition: transform 1s var(--ease-expo) 140ms; }
  .contact__lead.is-in .contact__actions { transition: opacity .6s var(--ease) 420ms, transform .8s var(--ease-expo) 420ms; }

  .clinks:is(.is-pending, .is-in) { position: relative; border-top-color: transparent; }
  .clinks:is(.is-pending, .is-in)::before {
    content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 2px;
    background: var(--ink); transform-origin: left;
  }
  .clinks.is-pending::before { transform: scaleX(0); }
  .clinks.is-pending > li { opacity: 0; transform: translateY(14px); }
  .clinks.is-in::before { transition: transform 1s var(--ease-in-out); }
  .clinks.is-in > li { transition: opacity .6s var(--ease) 150ms, transform .8s var(--ease-expo) 150ms; }
  .clinks.is-in > li:nth-child(2) { transition-delay: 230ms; }
  .clinks.is-in > li:nth-child(3) { transition-delay: 310ms; }
  .clinks.is-in > li:nth-child(n + 4) { transition-delay: 390ms; }

  /* Menú del celular: los enlaces bajan en cascada al abrirlo */
  .nav__panel a { transition: opacity .3s var(--ease), transform .45s var(--ease-expo); transition-delay: calc(var(--i, 0) * 35ms); }
  @starting-style {
    .nav__panel a { opacity: 0; transform: translateY(-10px); }
  }
}

/* Ligado al scroll: barra de progreso bajo el menú y el nombre que se despide al salir de pantalla */
@supports (animation-timeline: scroll()) {
  @media screen and (prefers-reduced-motion: no-preference) {
    .nav::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
      background: var(--accent); transform-origin: left;
      animation: draw linear both; animation-timeline: scroll(root);
    }
    .hero__name { animation: name-leave linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  }
}

/* En pantallas táctiles el hover se queda «pegado» tras tocar: sin elevaciones, solo la respuesta al presionar */
@media (hover: none) {
  .btn:hover, .repo__link:hover, .feat:hover .feat__thumb, .stamp:hover .stamp__logo, .sello:hover .sello__logo, .project__link:hover .project__media, .chess__promo-btn:hover { transform: none; box-shadow: none; }
  .sello:hover .sello__more .i { transform: none; }
  .project__link:hover .project__media img, .project__link:hover .project__media .poster { transform: none; }
  .btn:active { transform: scale(.97); }
}

@keyframes ping { 0% { transform: scale(.6); opacity: .7; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
@keyframes rise-mask { from { transform: translateY(120%); } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes draw { from { transform: scaleX(0); } }
@keyframes drop-dot { from { opacity: 0; transform: translateY(-.6em); } }
@keyframes name-leave { to { opacity: .15; transform: translateY(-10%); } }

/* Entre páginas (navegadores con View Transitions): la página se funde y la portada del proyecto
   viaja desde la tarjeta hasta su página. El cambio de tema usa la misma técnica (ver main.js). */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
::view-transition-old(root) { animation: fade-out .18s var(--ease-exit) both; }
::view-transition-new(root) { animation: fade .32s var(--ease) both; }
::view-transition-group(*.picture) { animation-duration: .55s; animation-timing-function: var(--ease-in-out); }
::view-transition-old(*.picture), ::view-transition-new(*.picture) { height: 100%; object-fit: cover; }
.project__media, .case__cover, .feat__thumb, [data-sello-logo] { view-transition-class: picture; }
.theme-vt [data-vt], .theme-vt .feat__thumb, .theme-vt [data-sello-logo] { view-transition-name: none !important; }
/* Entre dos listas (dos sellos, la portada y un sello) las portadas no viajan: ver VT_SCOPE en templates.js. */
.vt-flat [data-vt], .vt-flat .feat__thumb { view-transition-name: none !important; }
html.theme-vt::view-transition-old(root), html.theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
@keyframes fade-out { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==========================================================================
   IMPRESIÓN — "Descargar CV" usa esto para generar el PDF (A4)
   ========================================================================== */
@media print {
  @page { size: A4; margin: 13mm 14mm 14mm; }
  :root, :root[data-theme], :root:not([data-theme="light"]) {
    --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #F2F2EF;
    --ink: #111113; --ink-2: #2E2E33; --muted: #4A4A52; --faint: #6B6B74;
    --line: #D9D9D2; --line-strong: #BDBDB5;
    --accent: #0D7148; --accent-soft: #FFFFFF; --on-accent: #111113; --hard: transparent; --logo-mono: brightness(0);
    --indent: 0px;
    color-scheme: light;
  }
  html { font-size: 9.5pt; scroll-behavior: auto; }
  body { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-only { display: block; }

  .nav, .skip-link, .hero__bg, .hero__status, .hero__actions, .hero__feat, .hero__sellos, .ficha__tools, .ficha__side, .ficha__id, .ficha__contact, .ficha__ico, .ficha__bar, .admin-fab, .cert__links, .lang__link,
  .filters, .project__media, .project__cta, .contact__actions, .footer, .dev-hint,
  .breadcrumb, .case__cover, .gallery, .lb, .pager, .sec-head__num, .sello__logo, .sello__side .text-link,
  .section--github, .section--contacto { display: none !important; }

  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .container { max-width: none; padding-inline: 0; }

  .hero { border-bottom: 0; }
  .hero__wrap { padding: 0 0 6pt; container-type: normal; }
  .hero__name { font-size: 28pt; line-height: 1; }
  .hero__name > span, .hero__line-in { display: inline; }
  .roll__col { -webkit-text-fill-color: currentColor; }
  .roll__col::after { display: none; }
  .hero__name > span + span::before { content: " "; }
  .print-contact { margin-top: 5pt; font: 500 8.5pt/1.4 var(--font-label); color: var(--muted); }
  .hero__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14pt; margin-top: 10pt; padding-top: 10pt; border-top-width: 1.5pt; }
  .hero__role { font-size: 12.5pt; }
  .hero__lede { margin-top: 6pt; font-size: 9.5pt; }
  .ficha { box-shadow: none; border-color: var(--line-strong); aspect-ratio: auto !important; }
  .ficha-wrap { max-width: none; container-type: normal; }
  .ficha__body { display: block; padding: 0 6pt; }
  .ficha__row { min-height: 0; padding: 4pt 0; font-size: 8.5pt; grid-template-columns: 7rem minmax(0, 1fr); gap: 8pt; align-content: start; }

  .section, .section + .section { padding: 12pt 0 0; }
  .sec-head { grid-template-columns: minmax(0, 1fr) auto; gap: 8pt; margin-bottom: 8pt; padding-top: 5pt; border-top-width: 1.5pt; break-after: avoid; }
  .sec-head__num, .sec-head__note { padding-top: 3pt; }
  .sec-head h2 { font-size: 16pt; }
  .sec-head__intro { margin-top: 3pt; font-size: 9pt; }
  .section__body { padding-left: 0; }

  .sellos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8pt 14pt; }
  .sello { display: block; padding-top: 4pt; break-inside: avoid; }
  .sello__name { font-size: 11.5pt; }
  .sello__rol, .sello__desc { font-size: 8.5pt; }
  .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8pt 14pt; }
  .project__body { padding-top: 0; gap: 2pt; }
  .project__title { font-size: 11pt; }
  .project__text { font-size: 9pt; }
  .tags { display: none; }

  .research { border-color: var(--line-strong); grid-template-columns: minmax(0, 1fr) 12rem; }
  .research__main { padding: 9pt; gap: 5pt; }
  .research__title { font-size: 12pt; }
  .research__metric { padding: 9pt; background: none; border-left: 1px solid var(--line-strong); color: var(--ink); }
  .research__num { font-size: 26pt; color: var(--accent); }
  .badge { background: none; }


  .row { grid-template-columns: 7.5rem minmax(0, 1fr) auto; padding: 7pt 0; gap: 2pt 12pt; }
  .row__title { font-size: 11pt; }
  .row__logo { width: 30px; height: 30px; padding: 2px; }
  .row__when { flex-direction: column; align-items: flex-start; gap: 4pt; }
  .sello-hero { background: none; color: var(--ink); border: 0; }
  .sello-hero__logo, .sello-hero__actions, .sello-others, .sello__more, .chess__side, .chess__bar { display: none !important; }
  .row__text { margin-top: 3pt; font-size: 9pt; }

  .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14pt; }
  .skill { grid-template-columns: 8rem minmax(0, 1fr); gap: 8pt; padding: 5pt 0; }
  .skill__name { font-size: 9pt; }
  .chip { padding: 1pt 4pt; font-size: 8.5pt; border-color: var(--line-strong); }

  .certs, .langs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6pt; }
  .cert, .lang { padding: 7pt; gap: 8pt; border-color: var(--line-strong); }
  .cert { display: grid; grid-template-columns: 30pt minmax(0, 1fr); align-items: center; box-shadow: none; }
  .cert__logo { aspect-ratio: 1; border: 0; }
  .cert__mark { width: 70%; }
  .cert__logo--mono .cert__mark { font-size: 9pt; }
  .cert__ghost, .cert__num { display: none; }
  .cert__body { padding: 0; gap: 2pt; }
  .cert__name { font-size: 10pt; }
  .lang__name { font-size: 11pt; }
  .cefr { margin-top: 6pt; }
  .cefr__seg::before { height: 6px; }


  .project, .research, .row, .skill, .cert, .lang, .ficha { break-inside: avoid; }
  a { text-decoration: none; }
}

/* Cifras de ancho fijo donde se leen en columna o cambian solas (antes las daba la mono). Va al final
   porque el atajo `font:` de cada regla devuelve font-variant-numeric a normal. */
.nav__num, .sec-head__num, .row__period, .skill__idx, .cert__num, .story__num, .filter__count,
.gallery__count, .chess__lead, .moves, .sq__rank, .sq__file, .lang__level, .cefr__seg { font-variant-numeric: tabular-nums; }