/* ═══════════════════════════════════════════════════════════════
   Bird Making Machine — estilos
   Un solo archivo. Si un color, una fuente o una curva no está en
   :root, no debería aparecer más abajo.
   ═══════════════════════════════════════════════════════════════ */

/* ─── FUENTES ────────────────────────────────────────────────────
   Las dos familias del brief, de Google Fonts, servidas desde el
   propio sitio: los mismos woff2 que entrega la API, subconjunto
   latin (alcanza para inglés y castellano, e incluye la ı U+0131
   del logotipo). Así no hay otro dominio antes del primer render y
   el logotipo no aparece en una fuente de reemplazo.

   Bricolage es variable (opsz 12–96, wght 200–800) y es un solo
   archivo. Se declara dos veces a propósito:
   · 800 con font-display: block. Es el peso del logotipo y los
     títulos: mejor un instante en blanco que el logotipo en Arial.
   · 200–700 con swap: el texto corrido se lee desde el principio.
   Licencias en assets/fonts/OFL-*.txt.
   ─────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("assets/fonts/bricolage-grotesque-v9-latin.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("assets/fonts/bricolage-grotesque-v9-latin.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono-v20-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono-v20-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─── TOKENS ─────────────────────────────────────────────────── */
:root {
  /* Los tres colores de la marca. No hay otros. */
  --ink:    #0B0B0B;   /* Tinta  · oklch(0.15 0 0) */
  --bone:   #F8F7F2;   /* Hueso  · oklch(0.975 0.006 90) */
  --canary: #F6D236;   /* Canario · oklch(0.87 0.165 95) — sólo acento */

  /* Grises de interfaz: hueso y tinta mezclados en OKLab.
     El número es el % de hueso. Contrastes medidos (WCAG 2). */
  --gray-70: #A8A7A4;  /* texto secundario sobre tinta · 8,2:1 */
  --gray-56: #848481;  /* etiquetas sobre tinta        · 5,3:1 */
  --gray-20: #323131;  /* filetes sobre tinta */
  --gray-06: #161616;  /* placas sobre tinta */
  --gray-30: #474746;  /* texto secundario sobre hueso · 8,7:1 */
  --gray-44: #676765;  /* etiquetas sobre hueso        · 5,3:1 */
  --gray-84: #CCCCC8;  /* filetes sobre hueso */

  --font-sans: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  --max: 1600px;
  --gutter: clamp(16px, 3.6vw, 56px);
  --gap: clamp(12px, 1.8vw, 28px);
  --section-y: clamp(72px, 10vw, 160px);
  --header-h: 64px;

  /* Movimiento: sólo transform y opacity, y nunca la curva `ease`. */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

/* Cada superficie define sus colores de texto y filete. El cuerpo es
   tinta; hueso aparece una sola vez, para cambiar el ritmo. */
body,
.tone-ink {
  --fg: var(--bone);
  --fg-2: var(--gray-70);
  --fg-3: var(--gray-56);
  --rule: var(--gray-20);
  --plate: var(--gray-06);
  --ground: var(--ink);
  background: var(--ink);
  color: var(--bone);
}
.tone-bone {
  --fg: var(--ink);
  --fg-2: var(--gray-30);
  --fg-3: var(--gray-44);
  --rule: var(--gray-84);
  --ground: var(--bone);
  background: var(--bone);
  color: var(--ink);
}

/* ─── BASE ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Las anclas no quedan debajo del encabezado fijo. */
  scroll-padding-top: calc(var(--header-h) + 12px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}
@media (min-width: 1024px) { body { font-size: 18px; } }

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }

::selection { background: var(--canary); color: var(--ink); }

/* Títulos: sin itálicas nunca. El énfasis es peso o canario. */
em, i, cite { font-style: normal; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ─── FOCO ───────────────────────────────────────────────────────
   Canario, visible al instante, nunca animado. Sobre tinta el
   anillo da 13,3:1. Sobre hueso el canario solo no llega a 3:1
   (1,4:1): ahí el canario va por dentro y un filete de tinta por
   fuera, que es el que separa del fondo.
   ─────────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--canary);
  outline-offset: 3px;
  transition: none;
}
.tone-bone :focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--canary);
}

/* ─── UTILIDADES ─────────────────────────────────────────────── */
.u-nowrap { white-space: nowrap; }

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

/* Etiquetas, créditos, herramientas y todo el Bureau. */
.mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.icon {
  display: inline-block;
  width: .9em; height: .9em;
  flex: none;
  vertical-align: -.08em;
}

/* Lo que falta está a la vista y se nota que falta. Cada uno está
   listado en PENDIENTES.md. */
.pending {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: max(12px, .5em);
  line-height: 1.3;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-2);
  border: 1px dashed currentColor;
  border-radius: 2px;
  padding: .3em .55em;
  vertical-align: middle;
  white-space: normal;
}
.mono .pending { font-size: inherit; padding: .1em .45em; }

.skip {
  position: absolute;
  top: 10px; left: var(--gutter);
  z-index: 100;
  padding: 12px 16px;
  background: var(--canary);
  color: var(--ink);
  text-decoration: none;
  transform: translateY(-160%);
}
.skip:focus-visible { transform: none; }

/* ─── MONOGRAMA ──────────────────────────────────────────────────
   Tal cual la especificación. Desde 32 px: abajo no se lee.
   opsz 96 fijo, como el logotipo: con el tamaño óptico automático,
   a 32 px las letras se ensanchan hasta tocar los bordes del cuadrado.
   ─────────────────────────────────────────────────────────────── */
.bmm {
  --s: 40px;
  width: var(--s); height: var(--s);
  display: grid; place-items: center;
  flex: none;
  background: var(--ink); color: var(--bone);
  font: 800 calc(var(--s) * 0.36)/1 "Bricolage Grotesque", sans-serif;
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.05em;
  border-radius: 3px;
  text-decoration: none;
}
.bmm--canary { background: var(--canary); color: var(--ink); }

/* ─── BOTÓN ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 16px 12px;
  border: 0; border-radius: 3px;
  background: var(--canary); color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover { background: var(--bone); }

/* ─── CINTAS ─────────────────────────────────────────────────────
   Bandas de texto en mono que corren de lado a lado: despacio y
   solas, y más rápido cuando se hace scroll (main.js). Se frenan con
   el mouse encima. Con «reducir movimiento», quietas (decisión de
   Julián del 10/10/2026).
   Sobre canario los tornillos van en tinta con la ranura canario;
   sobre hueso, canario con la ranura hueso (versiones del logotipo).
   ─────────────────────────────────────────────────────────────── */
.ticker {
  --screw: var(--ink);
  --ground: var(--canary);
  overflow: hidden;
  background: var(--canary);
  color: var(--ink);
  -webkit-user-select: none;
  user-select: none;
}
.ticker--bone {
  --screw: var(--canary);
  --ground: var(--bone);
  background: var(--bone);
}
.ticker__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.ticker__set {
  display: flex; align-items: center;
  flex: none;
  gap: 0 22px;
  padding: 11px 11px 10px;
  font-weight: 500;
  white-space: nowrap;
}
.ticker__screw { width: 14px; height: 14px; flex: none; }

/* ─── ENCABEZADO ─────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  border-bottom: 1px solid transparent;
}
/* El filete aparece recién cuando hay algo pasando por debajo. */
.site-header.is-scrolled { border-bottom-color: var(--gray-20); }

.site-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
}

.site-nav { margin-left: auto; }
.bmm + .btn { margin-left: auto; }   /* 404: sin anclas, el botón igual va a la derecha */
.site-nav ul { display: flex; gap: clamp(22px, 2.6vw, 40px); }
.site-nav a {
  position: relative;
  display: block;
  padding-block: 10px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
/* Subrayado canario: entra de izquierda a derecha con transform. */
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 3px;
  height: 2px;
  background: var(--canary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms var(--ease-out);
}
.site-nav a:hover::after,
.site-nav a:focus-visible::after { transform: scaleX(1); }

/* En celular: monograma y botón. Las anclas están a un scroll. */
@media (max-width: 639.98px) {
  .site-nav { display: none; }
  .site-header .btn { margin-left: auto; }
}

/* ─── APERTURA ───────────────────────────────────────────────── */
.opening {
  padding-block: clamp(28px, 6vw, 96px) 0;
}
.opening__grid {
  /* El cuerpo del logotipo se mide contra este ancho (unidades cqi),
     no contra la ventana: así nunca desborda, con o sin barra de
     scroll. Entre 88 y 160 px; sólo en pantallas de menos de 350 px
     baja de 88 (80 px a 320) para que «Machine» entre sin scroll
     horizontal. */
  container-type: inline-size;
  --fs: clamp(64px, calc(100cqi / 3.62), 160px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: clamp(24px, 3.6vw, 56px);
}
.opening__title { grid-column: 1 / -1; }
.opening__text { grid-column: 1 / -1; }
.opening__line {
  max-width: 24ch;
  font-weight: 500;
  font-size: clamp(21px, 1.1rem + 1.05vw, 34px);
  line-height: 1.16;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.opening__sub {
  max-width: 38ch;
  margin-top: 14px;
  color: var(--fg-2);
  line-height: 1.45;
  text-wrap: pretty;
}
/* Estado del sitio: discreto, sin tapar el portfolio ni bloquear enlaces. */
.site-status {
  max-width: 42ch;
  margin-top: 20px;
  padding-left: 12px;
  border-left: 2px solid var(--canary);
  color: var(--fg-2);
  font: 400 12px/1.5 var(--font-mono);
  text-wrap: pretty;
}
@media (min-width: 1200px) {
  .opening__title { grid-column: 1 / span 7; }
  /* El bloque apoya sobre la línea de base de «Machine». El renglón
     del logotipo mide .86em y su base queda a .76em: sobran .1em por
     debajo. La bajada (interlineado 1,45) tiene .395em entre su base
     y el borde. */
  .opening__text {
    grid-column: 8 / -1;
    align-self: end;
  }
  .opening__sub { margin-bottom: calc(var(--fs) * .1 - .395em); }
}

/* ─── LOGOTIPO ───────────────────────────────────────────────────
   Tres líneas, Bricolage 800, y los puntos de las íes son tornillos.
   Texto vivo: la i va sin punto (ı, U+0131) y el tornillo es un SVG
   encima. Valores calibrados contra el punto real de la i con
   line-height .86: si cambia el interlineado, hay que recalibrar.

   opsz 96 fijo: la calibración vale para el corte de 96 pt (el punto
   de la i queda a 0,1165em del borde izquierdo y 0,1175em del borde
   superior del renglón). Con el tamaño óptico automático, en cuerpos
   chicos la i se ensancha y el punto se corre hasta 0,05em.
   Medido el 25/09/2026 entre 28 y 160 px: desvío máximo 1,6 px.

   No se hace: ponerlo en una línea, deformarlo, cambiarle la fuente,
   rotar los tornillos distinto, sombras ni contornos, ni apoyarlo
   sobre una foto sin placa de tinta.
   ─────────────────────────────────────────────────────────────── */
.wordmark {
  display: grid; justify-items: start;
  font: 800 var(--fs, 64px)/0.86 "Bricolage Grotesque", sans-serif;
  font-variation-settings: "opsz" 96;   /* después de `font`, que lo resetea */
  letter-spacing: -0.045em;
  color: var(--bone);          /* sobre tinta */
  --screw: var(--canary);
  --ground: var(--ink);        /* color de la ranura = color del fondo */
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
}
.wordmark > span { white-space: nowrap; }
.wordmark .ii { position: relative; display: inline-block; line-height: 0.86; }
.wordmark .screw {
  position: absolute; left: 0.117em; top: 0.121em;
  width: 0.215em; height: 0.215em;
  transform: translate(-50%, -50%);
  overflow: visible;
}
/* El giro es del dibujo, no de la caja: la caja ya está trasladada. */
.wordmark .screw use {
  transform-box: view-box;
  transform-origin: 50% 50%;
}

/* Versiones de la especificación. */
.wordmark--on-canary { color: var(--ink); --screw: var(--ink); --ground: var(--canary); }
.wordmark--on-bone   { color: var(--ink); --screw: var(--canary); --ground: var(--bone); }

/* «Ajuste» al cargar: los tres tornillos giran una vez de −125° a
   −35°, 500 ms, 60 ms de desfase. Esperan a la fuente (main.js pone
   .is-set): un tornillo girando sobre una letra que todavía no está
   sería peor que ninguno. Si main.js no llega, a los 3 s aparecen
   quietos. */
@keyframes screw-set {
  from { transform: rotate(-90deg); }
  to   { transform: rotate(0deg); }
}
@keyframes screw-failsafe {
  to { visibility: visible; }
}
.js .wordmark:not(.is-set) .screw {
  visibility: hidden;
  animation: screw-failsafe 1ms 3s forwards;
}
.js .wordmark.is-set .screw use {
  animation: screw-set 500ms var(--ease-out) both;
}
.js .wordmark.is-set > span:nth-child(2) .screw use { animation-delay: 60ms; }
.js .wordmark.is-set > span:nth-child(3) .screw use { animation-delay: 120ms; }

/* ─── REEL ───────────────────────────────────────────────────────
   Fachada liviana: se ve el póster y el iframe se pide recién al
   hacer clic (main.js). Mientras no haya reel, una placa 16:9.
   ─────────────────────────────────────────────────────────────── */
/* A sangre, de borde a borde, como un plano de apertura. Con
   pantallas muy anchas se topa en el alto de la ventana. */
.reel {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: calc(100svh - var(--header-h));
  margin-top: clamp(40px, 5vw, 80px);
  background: var(--plate);
  overflow: hidden;
}
.reel__pending {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 16px;
  color: var(--fg-2);
  text-align: center;
}

/* Botón de fachada (cuando hay video): póster + rótulo. */
.facade {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
  padding: 0; border: 0;
  background: var(--ink);
  cursor: pointer;
}
.facade img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.facade__cue {
  position: absolute;
  left: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 16px 11px;
  border-radius: 3px;
  background: var(--canary);
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
}
.facade:hover .facade__cue { background: var(--bone); }
.facade:focus-visible { outline-offset: -6px; }
.reel iframe,
.player__frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* ─── TÍTULOS DE SECCIÓN ─────────────────────────────────────── */
.section-head {
  display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: space-between;
  gap: 12px 32px;
  margin-bottom: clamp(36px, 5.6vw, 88px);
}
.section-head .section-title { margin-bottom: 0; }
.section-note { color: var(--fg-3); }

.section-title {
  font-weight: 800;
  font-size: clamp(48px, 8.4vw, 128px);
  line-height: .9;
  letter-spacing: -.045em;
  text-wrap: balance;
  margin-bottom: clamp(36px, 5.6vw, 88px);
}

/* ─── WORK ───────────────────────────────────────────────────────
   Título gigante y mosaico a sangre: las piezas se tocan, separadas
   por calles finas de tinta. La primera ocupa dos tercios y dos filas;
   las demás se acomodan en pares desparejos (7/5 y 5/7). Si la última
   queda sola, va de lado a lado, más baja. Aguanta de 3 a 6 piezas
   sin tocar el CSS.
   La ficha va sobre el póster en una placa de tinta: nunca texto
   directo sobre la imagen. Con mouse, la placa muestra rótulo y
   título, y despliega la ficha al pasar o al tomar foco (main.js
   mide cuánto esconder). Sin mouse o sin JS, la ficha está entera.
   ─────────────────────────────────────────────────────────────── */
.work { padding-block: clamp(72px, 9vw, 144px) var(--section-y); }

.work__head {
  container-type: inline-size;
  display: flex; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between;
  gap: 8px 32px;
  margin-bottom: clamp(20px, 2.4vw, 36px);
}
/* «Work» de lado a lado del contenedor, como un cartel. */
.work__title {
  font-weight: 800;
  font-size: clamp(96px, 38cqi, 520px);
  font-variation-settings: "opsz" 96;
  line-height: .78;
  letter-spacing: -.06em;
  margin-left: -.04em;
}
.work__head .section-note { padding-bottom: .4em; }

.pieces {
  --street: clamp(4px, .5vw, 8px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--street);
  padding: var(--street);
  background: var(--ink);
}
.piece { grid-column: 1 / -1; min-width: 0; }

.piece__card {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column;
}

.piece__poster {
  position: relative;
  flex: 1 1 auto;
  aspect-ratio: 16 / 9;
  background: var(--plate);
  overflow: hidden;
}
.piece__poster img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
.piece__card:hover .piece__poster img,
.piece__card:focus-within .piece__poster img { transform: scale(1.04); }

/* Piezas por producir: bloques planos de color, con el tipo en grande. */
.piece--canary .piece__poster { background: var(--canary); color: var(--ink); }
.piece--bone   .piece__poster { background: var(--bone);   color: var(--ink); }
.piece__poster-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-start;
  gap: 14px;
  padding: clamp(16px, 2vw, 32px);
  font-weight: 800;
  font-size: clamp(40px, 7cqi, 112px);
  line-height: .86;
  letter-spacing: -.045em;
}
.piece__poster { container-type: inline-size; }
.piece--canary .pending,
.piece--bone .pending { color: var(--gray-30); font-size: 12px; letter-spacing: .06em; }

.piece__body {
  padding: 16px clamp(14px, 1.4vw, 22px) 18px;
  background: var(--ink);
}
/* Qué es la pieza (spec, original, oficial) va junto al título, nunca
   escondido en un pie general. */
.piece__label {
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--fg-3);
}
.piece__title {
  font-weight: 800;
  font-size: clamp(22px, 1.1rem + .9vw, 32px);
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.piece__more { padding-top: 12px; }
.piece__desc {
  max-width: 40ch;
  margin-bottom: 12px;
  color: var(--fg-2);
  text-wrap: pretty;
}
.piece__meta {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 4px;
  font-size: 12px;
}
.piece__meta > div { display: contents; }
.piece__meta dt { color: var(--fg-3); }
.piece__meta dd { color: var(--fg-2); }

/* Pieza con video: todo el recuadro abre el reproductor, pero el
   control real es el botón del título (nombre accesible = título). */
.piece__open {
  all: unset;
  cursor: pointer;
}
.piece__open::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
}
.piece__card:has(.piece__open:focus-visible) {
  outline: 3px solid var(--canary);
  outline-offset: -3px;
  z-index: 3;
}
.piece__open:focus-visible { outline: none; }
/* Arriba a la derecha: abajo a la izquierda los pósters llevan sus
   propios créditos («Una serie de…»). */
.piece__play {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 12px 8px;
  border-radius: 3px;
  background: var(--canary);
  color: var(--ink);
  font-weight: 500;
}

@media (min-width: 720px) {
  .piece:nth-child(n + 2) { grid-column: span 6; }
  .piece:nth-child(n + 2):last-child:nth-child(even) { grid-column: 1 / -1; }
  .piece:nth-child(n + 2):last-child:nth-child(even) .piece__poster { aspect-ratio: 21 / 9; }
}

/* Con mouse y desde tableta: la placa va encima del póster, abajo a
   la izquierda, y la ficha se despliega al pasar. */
@media (min-width: 720px) and (hover: hover) {
  .piece__body {
    position: absolute;
    left: 0; bottom: 0;
    z-index: 1;
    width: min(100%, 30rem);
    transform: translate3d(0, var(--tuck, 0px), 0);
    transition: transform 420ms var(--ease-out);
  }
  .piece__more {
    opacity: var(--tuck-o, 1);
    transition: opacity 300ms var(--ease-out);
  }
  .piece__card:hover .piece__body,
  .piece__card:focus-within .piece__body { transform: none; }
  .piece__card:hover .piece__more,
  .piece__card:focus-within .piece__more { opacity: 1; }
  .piece__poster { overflow: hidden; }
  .piece__card { overflow: hidden; }
}

@media (min-width: 1024px) {
  /* La principal: dos tercios de ancho y dos filas de alto. */
  .piece:first-child { grid-column: 1 / span 8; grid-row: span 2; }
  .piece:first-child .piece__poster { aspect-ratio: auto; min-height: 100%; }
  .piece:first-child .piece__title { font-size: clamp(32px, 1.2rem + 1.8vw, 52px); }
  .piece:first-child .piece__body { width: min(100%, 36rem); }
  .piece:nth-child(2),
  .piece:nth-child(3) { grid-column: 9 / -1; }

  /* De la cuarta en adelante, pares desparejos. */
  .piece:nth-child(4n)     { grid-column: 1 / span 7; }
  .piece:nth-child(4n + 1):not(:first-child) { grid-column: 8 / -1; }
  .piece:nth-child(4n + 2):not(:nth-child(2)) { grid-column: 1 / span 5; }
  .piece:nth-child(4n + 3):not(:nth-child(3)) { grid-column: 6 / -1; }
  /* Si la cuarta (o la sexta) queda sola, de lado a lado y más baja. */
  .piece:nth-child(4):last-child,
  .piece:nth-child(6):last-child { grid-column: 1 / -1; }
  .piece:nth-child(4):last-child .piece__poster,
  .piece:nth-child(6):last-child .piece__poster { aspect-ratio: 21 / 9; }
}

/* ─── ENTRADA AL HACER SCROLL ────────────────────────────────────
   Sólo las piezas, y sólo si main.js arrancó (.reveal-ready): sin
   JS, todo visible. Lo que ya está en pantalla al cargar no se anima.
   ─────────────────────────────────────────────────────────────── */
.reveal-ready .reveal {
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}
.reveal-ready .reveal:not(.is-in) {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}
@media (min-width: 1024px) {
  .reveal-ready .piece:nth-child(2),
  .reveal-ready .piece:nth-child(2n + 5) { transition-delay: 90ms; }
  .reveal-ready .piece:nth-child(3) { transition-delay: 180ms; }
}

/* ─── COMMISSIONS ──────────────────────────────────────────────
   Se entra por la necesidad y por lo que el cliente recibe. Filas de
   texto con filetes, sin íconos ni tarjetas.
   ─────────────────────────────────────────────────────────────── */
.commissions { padding-block: var(--section-y) clamp(56px, 7vw, 112px); }

.needs {
  display: flex; flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: clamp(28px, 3.4vw, 48px);
}
.needs__label { color: var(--fg-3); }
.needs__list { display: flex; flex-wrap: wrap; gap: 8px; }
.needs__list li {
  padding: 7px 11px 6px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--fg);
  white-space: nowrap;
}

.rows { border-top: 1px solid var(--rule); }
.row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 12px;
  padding-block: clamp(22px, 2.6vw, 40px);
  border-bottom: 1px solid var(--rule);
}
.row__name {
  grid-column: 1 / -1;
  font-weight: 800;
  font-size: clamp(28px, 1rem + 2.6vw, 56px);
  line-height: 1;
  letter-spacing: -.04em;
}
.row__body { grid-column: 1 / -1; }
.row__text {
  max-width: 40ch;
  font-weight: 500;
  font-size: clamp(18px, 1rem + .3vw, 21px);
  line-height: 1.35;
  text-wrap: pretty;
}
.row__scope {
  max-width: 56ch;
  margin-top: 10px;
  font-size: 12px;
  color: var(--fg-2);
}
.rows__note {
  max-width: 60ch;
  margin-top: 22px;
  color: var(--fg-2);
}
@media (min-width: 900px) {
  .row { align-items: center; }
  .row__name { grid-column: 1 / span 6; }
  .row__body { grid-column: 7 / -1; }
}
/* Con mouse: la fila se invierte a tinta y el nombre se corre un
   poco, como una ficha que sale del cajón. */
@media (hover: hover) {
  .row {
    position: relative;
    isolation: isolate;
  }
  .row::before {
    content: "";
    position: absolute;
    inset: -1px calc(-1 * var(--gutter));
    z-index: -1;
    background: var(--ink);
    transform: scaleY(0);
    transform-origin: bottom center;
    transition: transform 380ms var(--ease-out);
  }
  .row__name { transition: transform 380ms var(--ease-out), color 200ms; }
  .row__text, .row__scope { transition: color 200ms; }
  .row:hover::before { transform: none; }
  .row:hover .row__name { transform: translate3d(clamp(8px, 1.4vw, 24px), 0, 0); color: var(--bone); }
  .row:hover .row__text { color: var(--bone); }
  .row:hover .row__scope { color: var(--gray-70); }
}
.commissions { overflow-x: clip; }

/* ─── HOW WE WORK ─────────────────────────────────────────────── */
.method { padding-block: 0 var(--section-y); }
.method__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 28px;
}
.method__title {
  grid-column: 1 / -1;
  font-weight: 800;
  font-size: clamp(34px, 1rem + 3vw, 64px);
  line-height: .95;
  letter-spacing: -.04em;
}
.method__body { grid-column: 1 / -1; }
.method__lead {
  max-width: 26ch;
  font-weight: 500;
  font-size: clamp(21px, 1rem + 1vw, 30px);
  line-height: 1.2;
  letter-spacing: -.015em;
}
.steps { margin-top: 28px; border-top: 1px solid var(--rule); }
.steps li {
  display: grid;
  grid-template-columns: 2.2em minmax(0, 1fr);
  gap: 12px;
  padding-block: 16px;
  border-bottom: 1px solid var(--rule);
}
.steps__n { padding-top: .3em; color: var(--fg-3); }
.steps p { max-width: 52ch; color: var(--fg-2); text-wrap: pretty; }
.steps strong { font-weight: 600; color: var(--fg); }
.method .tools { margin-top: 24px; }
@media (min-width: 1024px) {
  .method__title { grid-column: 1 / span 5; }
  .method__body { grid-column: 7 / -1; }
}

/* ─── STUDIO ─────────────────────────────────────────────────────
   La trayectoria de quien dirige respalda; no encabeza. Va al final,
   con un rótulo en mono y los créditos exactos en tamaño de texto.
   ─────────────────────────────────────────────────────────────── */
.studio { padding-block: clamp(56px, 7vw, 112px) var(--section-y); }
.studio__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 18px;
}
.studio__title {
  grid-column: 1 / -1;
  font-weight: 500;
  color: var(--fg-3);
}
.studio__body { grid-column: 1 / -1; }
.studio__lead {
  max-width: 26ch;
  font-weight: 500;
  font-size: clamp(21px, 1rem + 1vw, 30px);
  line-height: 1.2;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.studio__text {
  max-width: 46ch;
  margin-top: 16px;
  color: var(--fg-2);
  text-wrap: pretty;
}
/* Las disciplinas que convergen: filas grandes con filete, sin íconos. */
.crafts { margin-top: 28px; border-top: 1px solid var(--rule); }
.crafts li {
  padding-block: 12px 14px;
  border-bottom: 1px solid var(--rule);
  font-weight: 800;
  font-size: clamp(26px, 1rem + 2.4vw, 52px);
  line-height: 1;
  letter-spacing: -.04em;
}
.tools {
  display: flex; flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 16px;
  color: var(--fg-2);
}
.link-out {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 28px;
  font-weight: 500;
  font-size: clamp(18px, 1rem + .3vw, 21px);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .22em;
}
.link-out:hover { color: var(--canary); }
/* Sobre hueso el canario no se lee como texto: va de fondo. */
.tone-bone .link-out:hover { color: var(--ink); background: var(--canary); text-decoration-color: var(--canary); }
.studio .link-out { text-decoration-color: var(--canary); }
@media (min-width: 1024px) {
  .studio__title { grid-column: 1 / span 3; padding-top: .55em; }
  .studio__body { grid-column: 4 / span 8; }
}

/* ─── BUREAU OF HALLUCINATIONS ───────────────────────────────────
   Una banda, no una sección. Todo en mono. El pájaro vive acá y en
   ningún otro lugar de la página.
   ─────────────────────────────────────────────────────────────── */
.bureau { border-block: 1px solid var(--rule); }
.bureau__inner {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 48px);
  padding-block: clamp(32px, 4.6vw, 64px);
}
.bird {
  flex: none;
  width: clamp(80px, 8vw, 120px);
  height: auto;
  color: var(--bone);
  overflow: visible;
}
.bureau__name {
  font-weight: 500;
  font-size: clamp(14px, .75rem + .5vw, 19px);
}
.bureau__abbr { color: var(--fg-3); margin-left: .3em; white-space: nowrap; }
.bureau__line {
  margin-top: 8px;
  font-size: clamp(12px, .7rem + .3vw, 15px);
  color: var(--fg-2);
}

/* La llave de cuerda da dos vueltas cuando la banda entra en
   pantalla, una sola vez. Girar sobre su eje vertical, en plano, es
   achatarse y volver. */
.bird__key {
  transform-box: view-box;
  transform-origin: 46.5px 40px;
}
@keyframes wind {
  0%   { transform: scaleX(1); }
  25%  { transform: scaleX(.12); }
  50%  { transform: scaleX(1); }
  75%  { transform: scaleX(.12); }
  100% { transform: scaleX(1); }
}
.bureau.is-in .bird__key { animation: wind 1200ms var(--ease-in-out) 200ms 1 both; }

/* ─── CONTACT ────────────────────────────────────────────────── */
.contact { padding-block: var(--section-y); }
.contact__title {
  font-weight: 800;
  font-size: clamp(60px, 12.6vw, 208px);
  line-height: .86;
  letter-spacing: -.045em;
  text-wrap: balance;
  margin-bottom: clamp(36px, 5.6vw, 88px);
}
.contact__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 40px;
}
.contact__main { grid-column: 1 / -1; }
.contact__hint { max-width: 34ch; color: var(--fg-2); text-wrap: pretty; }
.contact__mail {
  margin-top: 22px;
  font-weight: 500;
  font-size: clamp(24px, 1rem + 2vw, 44px);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.contact__mail a {
  text-decoration: underline;
  text-decoration-color: var(--canary);
  text-decoration-thickness: 3px;
  text-underline-offset: .16em;
}
.contact__mail a:hover { color: var(--canary); }
.contact__aside { grid-column: 1 / -1; }
.contact__place { color: var(--fg); }
.social { margin-top: 22px; border-top: 1px solid var(--rule); }
.social li {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 12px;
  padding-block: 12px;
  border-bottom: 1px solid var(--rule);
}
.social__net { min-width: 9ch; color: var(--fg); }
.social__handle { color: var(--fg-2); text-transform: none; }
/* 28/10/2026 (Claude): cada red es un link entero, ícono + nombre + usuario. */
.social__link {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 12px;
  color: inherit; text-decoration: none;
}
.social__icon { width: 18px; height: 18px; flex: none; fill: currentColor; }
.social__link:hover .social__net,
.social__link:hover .social__icon { color: var(--canary); }
@media (min-width: 900px) {
  .contact__main { grid-column: 1 / span 7; }
  .contact__aside { grid-column: 9 / -1; align-self: end; }
}

/* ─── PIE ────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--rule); }
.site-footer__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px 20px;
  padding-block: 22px;
  color: var(--fg-2);
}
.site-footer .bmm { --s: 32px; }
.site-footer__inner > p:last-child { margin-left: auto; }
.site-footer__link {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  white-space: nowrap;
}
.site-footer__link:hover { color: var(--canary); }

/* ─── STICKER ────────────────────────────────────────────────────
   Atajo a Contact, fijo abajo a la derecha. Canario, con un tornillo
   en el centro y el texto en círculo. Gira con el scroll (main.js),
   no solo. Se va cuando Contact entra en pantalla y en celular no
   aparece: ahí el encabezado ya tiene el botón.
   ─────────────────────────────────────────────────────────────── */
.sticker {
  --screw: var(--ink);
  --ground: var(--canary);
  position: fixed;
  right: clamp(16px, 2.4vw, 36px);
  bottom: clamp(16px, 2.4vw, 36px);
  z-index: 40;
  width: clamp(96px, 8vw, 124px);
  aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--canary);
  color: var(--ink);
  text-decoration: none;
  transition: transform 420ms var(--ease-out), opacity 300ms var(--ease-out);
}
.sticker:hover { transform: scale(1.06); }
.sticker.is-away {
  opacity: 0;
  transform: scale(.6);
  pointer-events: none;
}
.sticker__ring {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transform: rotate(var(--spin, 0deg));
}
.sticker__ring text {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  fill: currentColor;
}
.sticker__screw { width: 30%; height: 30%; }
.sticker:hover .sticker__screw use { transform: rotate(90deg); }
.sticker__screw use {
  transform-box: view-box;
  transform-origin: 50% 50%;
  transition: transform 500ms var(--ease-out);
}
@media (max-width: 639.98px) {
  .sticker { display: none; }
}

/* ─── REPRODUCTOR ────────────────────────────────────────────────
   <dialog> nativo: el fondo queda inerte, Esc cierra, y main.js
   devuelve el foco a la pieza. El iframe existe sólo mientras está
   abierto.
   ─────────────────────────────────────────────────────────────── */
.player {
  width: min(100% - 2 * var(--gutter), 1280px);
  max-width: none; max-height: none;
  padding: 0; border: 0;
  background: transparent;
  color: var(--bone);
  overflow: visible;
}
.player::backdrop { background: rgb(11 11 11 / .94); }
.player__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
}
.player__title { color: var(--bone); }
.player__close {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 0;
  border: 0; background: none;
  color: var(--bone);
  cursor: pointer;
}
.player__close:hover { color: var(--canary); }
.player__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - 120px);
  margin-inline: auto;
  background: var(--ink);
}
html:has(.player[open]) { overflow: hidden; }
@keyframes player-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: none; }
}
.player[open] { animation: player-in 320ms var(--ease-out); }

/* ─── 404 ────────────────────────────────────────────────────────
   El pájaro, una sola vez, y la llave da cuerda al cargar.
   ─────────────────────────────────────────────────────────────── */
.notfound {
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--header-h) - 77px);
}
.notfound__inner { padding-block: clamp(48px, 8vw, 120px); }
.notfound .bird {
  width: clamp(96px, 11vw, 150px);
  margin-bottom: clamp(20px, 3vw, 40px);
}
.notfound .bird__key { animation: wind 1200ms var(--ease-in-out) 500ms 1 both; }
.notfound__title {
  font-weight: 800;
  font-size: clamp(112px, 24vw, 320px);
  line-height: .82;
  letter-spacing: -.05em;
}
.notfound__line {
  margin-top: clamp(20px, 2.4vw, 32px);
  font-weight: 500;
  font-size: clamp(21px, 1.1rem + 1.05vw, 34px);
  line-height: 1.16;
  letter-spacing: -.015em;
}
.notfound .link-out { text-decoration-color: var(--canary); }

/* ─── PÁGINA DE UNA PIEZA (los-tigres.html) ──────────────────────
   Ficha de un cortometraje sobre tinta: título, póster vertical
   entero con la sinopsis fija al lado, ficha en mono, seis fotogramas
   que abren en el mismo <dialog> del reproductor, y créditos.
   ─────────────────────────────────────────────────────────────── */
.film { padding-block: clamp(36px, 5vw, 80px) var(--section-y); }
.film__label { color: var(--fg-3); margin-bottom: 14px; }
.film__title {
  font-weight: 800;
  font-size: clamp(56px, 10.5vw, 168px);
  font-variation-settings: "opsz" 96;
  line-height: .84;
  letter-spacing: -.05em;
  margin-left: -.03em;
  margin-bottom: clamp(28px, 4vw, 56px);
}
.film__open { display: grid; gap: clamp(24px, 3.2vw, 56px); }
.film__poster img {
  width: 100%; height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: var(--plate);
}
.film__poster figcaption { margin-top: 10px; color: var(--fg-3); }
.film__k { color: var(--fg-3); margin-bottom: 16px; }
.film__text p:not(.film__k) {
  max-width: 50ch;
  color: var(--fg-2);
  font-size: clamp(17px, 1rem + .3vw, 21px);
  line-height: 1.5;
  text-wrap: pretty;
}
.film__text p:not(.film__k) + p { margin-top: 1em; }
.film__text strong { font-weight: 600; color: var(--fg); }
@media (min-width: 900px) {
  .film__open { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .film__text { position: sticky; top: calc(var(--header-h) + 28px); }
}

.film__meta {
  margin-top: clamp(40px, 6vw, 80px);
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px 32px;
}
.film__meta > div { min-width: 0; }
.film__meta dt { color: var(--fg-3); font-size: 12px; }
.film__meta dd {
  margin-top: 6px;
  color: var(--fg);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}

.stills { margin-top: clamp(48px, 7vw, 104px); }
.stills__title { color: var(--fg-3); margin-bottom: 14px; }
.stills__grid {
  --street: clamp(4px, .5vw, 8px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--street);
}
.still {
  all: unset;
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--plate);
  overflow: hidden;
  cursor: zoom-in;
}
.still img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
.still:hover img,
.still:focus-visible img { transform: scale(1.04); }
.still:focus-visible { outline: 3px solid var(--canary); outline-offset: -3px; }
@media (max-width: 719.98px) { .stills__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* El visor de fotogramas usa el <dialog> del reproductor, con una imagen
   en lugar del iframe. */
.player__frame img { width: 100%; height: 100%; object-fit: contain; display: block; }

.credits {
  margin-top: clamp(48px, 7vw, 104px);
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.credits__title {
  font-weight: 800;
  font-size: clamp(24px, 1.2rem + 1vw, 34px);
  line-height: 1.05;
  letter-spacing: -.03em;
}
.credits__k { color: var(--fg-3); margin: 32px 0 10px; }
.credits__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  column-gap: 32px;
  border-top: 1px solid var(--rule);
}
.credits__list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.credits__list dt { color: var(--fg-3); }
.credits__list dd { color: var(--fg); }
.film .link-out { margin-top: clamp(40px, 5vw, 64px); text-decoration-color: var(--canary); }

/* ─── MENOS MOVIMIENTO ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .js .wordmark.is-set .screw use,
  .bureau.is-in .bird__key,
  .notfound .bird__key,
  .player[open] { animation: none; }
  .reveal-ready .reveal,
  .reveal-ready .reveal:not(.is-in) { opacity: 1; transform: none; transition: none; }
  .site-nav a::after { transition: none; }
  .piece__poster img, .still img { transition: none; }
  .piece__card:hover .piece__poster img,
  .piece__card:focus-within .piece__poster img,
  .still:hover img, .still:focus-visible img { transform: none; }
  .piece__body, .piece__more, .row::before, .row__name,
  .sticker, .sticker__screw use { transition: none; }
  .row:hover .row__name { transform: none; }
  .ticker__track, .sticker__ring { transform: none !important; }
}

/* ─── IMPRESIÓN ──────────────────────────────────────────────── */
@media print {
  .site-header { position: static; }
  .skip, .reel, .player, .ticker, .sticker { display: none; }
  .js .wordmark .screw { visibility: visible; }
  .reveal-ready .reveal:not(.is-in) { opacity: 1; transform: none; }
}