/* ===========================================================
   SAM3 — hoja de estilos única.
   Todo el diseño está aquí: se toca este archivo y cambia
   en las 442 páginas.
   =========================================================== */

:root {
  /* --- Color -----------------------------------------------
     Sin color de acento: cualquier color compite con la obra.
     Los enlaces se distinguen por subrayado, no por color.    */
  --bg:         #F7F5F1;   /* hueso de catálogo. No blanco */
  --bg-alt:     #EFEBE4;   /* bloques diferenciados */

  /* Fondo sobre el que se apoya cualquier imagen de obra.
     Transparente por defecto: la foto ya trae su propio fondo
     real (mural, pared, objeto). En Works on paper se vuelve
     a poner blanco más abajo, porque ahí las obras están
     fotografiadas sobre papel y necesitan fundirse con él. */
  --bg-obra:    transparent;
  --ink:        #2E2B28;   /* texto. Nunca #000 */
  --ink-strong: #1A1A1A;
  --ink-soft:   #4A4744;
  --ink-mute:   #6E6A65;
  --rule:       #D8D3CA;

  /* --- Tipografía. La serifa SOLO para títulos de obra ----- */
  --font-sans:  'Karla', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --text-xs:      0.75rem;
  --text-sm:      0.875rem;
  --text-base:    1rem;      /* SUELO, no baja */
  --text-work:    1rem;
  --text-work-lg: 1.0625rem;
  --text-section: 1.375rem;

  --space-1: 0.25rem;   --space-6:  2rem;
  --space-2: 0.5rem;    --space-7:  3rem;
  --space-3: 0.75rem;   --space-8:  4rem;
  --space-4: 1rem;      --space-9:  6rem;
  --space-5: 1.5rem;    --space-10: 8rem;

  --w-text: 40rem;   /* 640px lectura, fijo: no crece en monitores grandes */
  --w-work: clamp(50rem, 65vw, 70rem);   /* 800px a 1120px según pantalla */

  --gap-grid: 1.25rem;
  --duration: 180ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --thumb-rest: 0.85;
}

/* --- Fuentes ------------------------------------------------
   Descarga Instrument Sans y Newsreader de Google Fonts, pon
   los .woff2 en /fonts y descomenta. Autoalojarlas es más
   rápido y no depende de terceros.

@font-face {
  font-family: 'Karla';
  src: url('/fonts/karla-v33-latin-regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('/fonts/karla-v33-latin-500.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/fonts/hanken-grotesk-v12-latin-regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/fonts/hanken-grotesk-v12-latin-500.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/fonts/hanken-grotesk-v12-latin-500italic.woff2') format('woff2');
  font-style: italic; font-weight: 500; font-display: swap;
}
------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, figure, dl, dd, ul, ol { margin: 0; padding: 0; }
ul { list-style: none; }
img { max-width: 100%; display: block; height: auto; }
html { -webkit-text-size-adjust: 100%; font-size: 112.5%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  color: var(--ink-strong);
  font-size: var(--text-section);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

p { max-width: var(--w-text); margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }

/* Navegación: subrayado SOLO al pasar por encima.
   Prosa: subrayado permanente, porque dentro de un párrafo hay
   que saber qué es enlace sin pasar el ratón. */
a {
  color: inherit; text-decoration: none; text-underline-offset: 3px;
  transition: text-decoration-thickness var(--duration) var(--ease);
}
a:hover, a:focus-visible { text-decoration: underline; }
p a, dd a { text-decoration: underline; }
p a:hover { text-decoration-thickness: 2px; }

/* El foco NUNCA se elimina: permite navegar con teclado */
:focus-visible { outline: 2px solid var(--ink-strong); outline-offset: 3px; }

/* Oculto a la vista, presente para Google y lectores de pantalla */
.oculto {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.saltar {
  position: absolute; left: -9999px; top: var(--space-4);
  background: var(--bg); padding: var(--space-3) var(--space-4); z-index: 100;
}
.saltar:focus { left: var(--space-4); }

/* ============ Estructura: 800px, centrado ============ */

.cabecera, .principal, .pie {
  max-width: var(--w-work);
  margin-left: auto; margin-right: auto;
  padding-left: var(--space-5); padding-right: var(--space-5);
}
.principal { padding-top: var(--space-6); }
.cabecera {
  position: sticky; top: 0; z-index: 100; background: var(--bg);
  border-bottom: 1px solid var(--rule);
  padding-top: var(--space-3); padding-bottom: var(--space-3);
  display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap;
}

.marca {
  display: inline-block; font-weight: 500; letter-spacing: 0.08em;
  color: var(--ink-strong);
}

.menu { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.menu a { font-size: var(--text-sm); color: var(--ink-soft); }
.menu a:hover { color: var(--ink-strong); text-underline-offset: 4px; }

/* Sección activa. Como el menú es un archivo compartido, se
   marca con una clase en el <body>: <body class="p-public"> */
.p-public .menu a[href="/public-space.html"],
.p-anim   .menu a[href="/animation.html"],
.p-papel  .menu a[href="/works-on-paper.html"],
.p-pub    .menu a[href="/published.html"],
.p-about  .menu a[href="/contact.html"],
.menu a.activo {
  font-weight: 500; color: var(--ink-strong);
  text-decoration: underline; text-underline-offset: 4px;
}

.pie {
  margin-top: var(--space-6);
  padding-top: var(--space-6); padding-bottom: var(--space-6);
  border-top: 1px solid var(--rule);
  font-size: var(--text-xs); color: var(--ink-mute);
}

/* ================== Cuadrícula ================== */

.rejilla {
  display: grid; gap: var(--gap-grid);
  grid-template-columns: repeat(2, 1fr); align-items: start;
}
@media (min-width: 40rem) { .rejilla { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 64rem) { .rejilla { grid-template-columns: repeat(8, 1fr); } }

/* Works on paper: miniaturas ~50% más grandes que el resto
   del sitio, con menos columnas en la misma rejilla. */
@media (min-width: 40rem) { .p-papel .rejilla { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .p-papel .rejilla { grid-template-columns: repeat(6, 1fr); } }

/* Celda cuadrada. La imagen se contiene entera dentro:
   NUNCA se recorta obra. El aire sobrante es del color del
   fondo y se lee como margen, no como hueco. */
.marco {
  display: block; position: relative;
  aspect-ratio: 1 / 1; background: var(--bg-obra);
}
.marco img {
  width: 100%; height: 100%; object-fit: contain;
  transition: opacity var(--duration) var(--ease);
}

/* Dos imágenes superpuestas: la de reposo y la de encima.
   Es el mismo cambio que hacía la web antigua con JavaScript,
   ahora en CSS: funciona sin scripts y no parpadea. */
.marco img { opacity: var(--thumb-rest); }
.marco::after {
  content: ''; position: absolute; inset: 0;
  background: #000; opacity: 0; pointer-events: none;
  transition: opacity var(--duration) var(--ease);
}
.rejilla a:hover .marco img,
.rejilla a:focus-visible .marco img,
.pieza a:hover .marco img,
.pieza a:focus-visible .marco img { opacity: 0; }
.rejilla a:hover .marco::after,
.rejilla a:focus-visible .marco::after,
.pieza a:hover .marco::after,
.pieza a:focus-visible .marco::after { opacity: 1; }

/* Si solo hay una imagen, se comporta como antes */
.marco img:only-child { opacity: var(--thumb-rest); }
.rejilla a:hover .marco img:only-child,
.rejilla a:focus-visible .marco img:only-child,
.pieza a:hover .marco img:only-child,
.pieza a:focus-visible .marco img:only-child { opacity: 1; }

.bloque + .bloque {
  margin-top: var(--space-8); padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
}
.rotulo {
  font-size: var(--text-xs); font-weight: 400; color: var(--ink-mute);
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: var(--space-5);
}

/* ==================== Portada ==================== */

.cita { max-width: none; margin-top: var(--space-4); margin-bottom: var(--space-6); }
.cabeza.con-cita { width: fit-content; }
.cita p { font-family: var(--font-sans); font-style: normal; font-size: var(--text-sm); line-height: 1.55; letter-spacing: -0.01em; }
.cita cite {
  display: block; font-family: var(--font-sans); font-style: normal;
  font-size: var(--text-xs); color: var(--ink-mute); margin-top: var(--space-2);
}

.destacada { display: block; margin-bottom: var(--space-7); }
.destacada img {
  max-width: var(--w-work); max-height: 80vh; width: auto;
  background: var(--bg-obra); margin-bottom: var(--space-4);
}

.seleccion {
  margin-top: var(--space-7); padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
}
.trio {
  display: grid; gap: var(--gap-grid);
  grid-template-columns: 1fr; align-items: end;
}
@media (min-width: 40rem) { .trio { grid-template-columns: repeat(3, 1fr); } }
.trio img { background: var(--bg-obra); margin-bottom: var(--space-3); }

/* ==== Título de obra: Hanken Grotesk, sin cursiva ==== */

.obra-titulo {
  display: block; font-family: var(--font-serif); font-style: italic;
  font-weight: 500; font-size: var(--text-work); color: var(--ink-strong);
  /* Homogeniza el formato: sea cual sea como se escriba el titulo en el
     HTML (MAYUSCULAS, Mixto, minusculas...), aqui siempre se ve igual:
     solo la primera letra en mayuscula. Asi no hay que corregir cada
     ficha a mano ni recordar una convencion al escribir un titulo nuevo. */
  text-transform: lowercase;
}
.obra-titulo::first-letter {
  text-transform: uppercase;
}
.obra-titulo--grande { font-size: var(--text-work-lg); }
.obra-meta { display: block; font-size: var(--text-sm); color: var(--ink-mute); }

/* ================== Ficha de obra ================== */

.ficha { max-width: var(--w-work); }

/* La obra cabe siempre en pantalla: 800px de ancho o el 80%
   del alto, lo que ocurra antes. Deja ver el título debajo. */
.principal-img {
  max-width: var(--w-work); max-height: 80vh; width: auto;
  object-fit: contain; background: var(--bg-obra);
  margin-bottom: var(--space-5);
}

/* Navegación tocando la imagen: mitad izquierda = anterior,
   mitad derecha = siguiente. Dos enlaces invisibles superpuestos,
   sin JavaScript. .marco-nav envuelve la imagen y ambas zonas. */
.marco-nav { position: relative; display: inline-block; }
.marco-nav .zona {
  position: absolute; top: 0; bottom: 0; width: 50%;
  outline-offset: -4px;
}
.marco-nav .zona-prev { left: 0; }
.marco-nav .zona-next { right: 0; }
.marco-nav .zona:hover { background: rgba(0, 0, 0, 0.03); }

/* Crédito de foto: pegado al margen derecho de la imagen,
   pequeño y discreto, para que no compita con el título. */
.credito-foto {
  max-width: none;
  text-align: right;
  font-size: var(--text-xs);
  color: var(--ink-mute);
  margin-top: var(--space-2);
}
/* .media se ajusta al ancho real de la imagen (no al de toda
   la columna), para que el crédito de foto quede pegado al
   borde derecho de la foto y no al borde de la página. */
.media { width: fit-content; }

.cabeza { margin-bottom: var(--space-6); }
@media (min-width: 48rem) {
  .cabeza.vertical {
    display: grid; grid-template-columns: 1fr minmax(0, 420px);
    gap: var(--space-6); align-items: start;
  }
  .cabeza.vertical .texto { order: -1; }
  .cabeza.vertical .principal-img { max-width: 100%; }
}

/* Excepción: obras muy panorámicas (ej. 50.jpg, 4983×999).
   Se prioriza el alto (80vh, igual que el resto de fichas) y
   el ancho se recorre con scroll horizontal nativo, en vez de
   encoger la imagen para que quepa entera y quede minúscula.
   Las zonas clicables Previous/Next sobre la imagen se
   desactivan aquí: al hacer scroll dejarían de coincidir con
   lo que se ve. El Previous/Next de texto de .pie-ficha sigue
   funcionando igual, sin cambios. */
.cabeza.panoramica .media {
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.cabeza.panoramica .marco-nav {
  display: block; width: 100%;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.cabeza.panoramica .principal-img {
  display: block; width: auto; height: 80vh;
  max-width: none; max-height: 80vh;
}
.cabeza.panoramica .zona { display: none; }

/* Cuando una ficha tiene varias fotos (bloque .mas), el título
   sube antes de la imagen principal — con una sola foto, el
   título debajo se ve bien, pero con varias queda raro
   encajado entre la primera y las siguientes. */
.cabeza.con-mas {
  display: flex;
  flex-direction: column;
}
.cabeza.con-mas .texto {
  order: -1;
}

/* Ficha técnica en una línea, separada por puntos medios.
   Los <dt> van ocultos: sin ellos «2006» sería una cifra
   suelta para un lector de pantalla. */
.datos {
  font-size: 0.7rem; color: var(--ink-soft);
  max-width: var(--w-text); margin-bottom: var(--space-6);
}
.datos dd { display: inline; margin: 0; }
.datos dd + dd::before { content: ' · '; color: var(--ink-mute); }

/* Obra sobre papel: ficha técnica en formato galería, un
   renglón por cada dato, en vez de la línea corrida con
   puntos medios que usa el resto de fichas del sitio.
   Fondo propio, como una tarjeta, para separarla del título. */
/* Works on paper: aquí sí hace falta el fondo blanco, porque
   las obras están fotografiadas sobre papel y se funden con
   su marco en vez de dejar ver un recorte irregular. */
.p-papel .ficha { --bg-obra: #FFFFFF; }

.p-papel .datos {
  display: inline-grid; gap: calc(var(--space-1) * 0.87);
  margin-top: var(--space-5);
  background: #fffdfa;
  padding: var(--space-4) var(--space-5);
}
.p-papel .datos dd { display: block; line-height: 1.4; }
.p-papel .datos dd + dd::before { content: none; }

.mas { display: grid; gap: var(--space-6); margin-top: var(--space-7); }
.mas img {
  max-width: var(--w-work); max-height: 80vh; width: auto;
  object-fit: contain; background: var(--bg-obra);
}
.mas figcaption {
  margin-top: var(--space-2); font-size: var(--text-sm); color: var(--ink-mute);
}

/* Navegación: un solo bloque con un único filete. Separada en
   dos secciones queda un hueco muerto en medio. */
.pie-ficha {
  margin-top: var(--space-6); padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
}
.paso {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-5); font-size: var(--text-sm);
}
.paso .lado { flex: 0 1 auto; }
.paso .lado--der { text-align: right; }
.paso .arriba {
  flex: 1 1 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.paso .arriba-etiqueta { color: var(--ink-mute); font-size: var(--text-sm); }
.paso .arriba-titulo {
  font-family: var(--font-serif); font-style: normal; font-weight: 500;
  font-size: var(--text-sm); color: var(--ink-strong);
}
.paso .arriba-titulo { text-transform: lowercase; }
.paso .arriba-titulo::first-letter { text-transform: uppercase; }
.paso .paso-titulo { display: inline-block; text-transform: lowercase; font-size: 0.7rem; }
.paso .paso-titulo::first-letter { text-transform: uppercase; }
.paso .clave { display: block; color: var(--ink-mute); font-size: var(--text-xs); }

/* Animation: mantiene el hover clasico de dos imagenes
   superpuestas (reposo + encima con boton de play), el mismo
   patron que tenia la web antigua. Aislado bajo .p-anim para
   que no interfiera con el resto del sitio, que usa una sola
   imagen con overlay ::after. */
.p-anim .marco .encima {
  position: absolute; inset: 0; opacity: 0;
}
.p-anim .marco .reposo { opacity: 1; }
.p-anim .pieza a:hover .marco .encima,
.p-anim .pieza a:focus-visible .marco .encima { opacity: 1; }
.p-anim .pieza a:hover .marco .reposo,
.p-anim .pieza a:focus-visible .marco .reposo { opacity: 1; }
.p-anim .marco::after { content: none; }

/* Publications: mismo hover clasico de dos imagenes que
   Animation, aislado bajo .p-pub. */
.p-pub .marco .encima {
  position: absolute; inset: 0; opacity: 0;
}
.p-pub .marco .reposo { opacity: 1; }
.p-pub .pieza a:hover .marco .encima,
.p-pub .pieza a:focus-visible .marco .encima { opacity: 1; }
.p-pub .pieza a:hover .marco .reposo,
.p-pub .pieza a:focus-visible .marco .reposo { opacity: 1; }
.p-pub .marco::after { content: none; }

/* Publications: miniatura del libro anterior/siguiente junto
   al texto, pegada al lado exterior de la página (Previous a
   la izquierda, Next a la derecha). El enlace entero sigue
   siendo clicable, imagen incluida. */
.p-pub .paso .lado a, .p-anim .paso .lado a {
  display: flex; align-items: center; gap: var(--space-3);
}
.p-pub .paso .lado--der a, .p-anim .paso .lado--der a { flex-direction: row-reverse; }
.p-pub .paso .miniatura-nav {
  width: 2.75rem; height: 2.75rem; object-fit: contain;
  background: var(--bg-obra); flex-shrink: 0;
}
.p-anim .paso .miniatura-nav {
  width: 3.44rem; height: 3.44rem; object-fit: contain;
  background: var(--bg-obra); flex-shrink: 0;
}

.salto { margin-top: var(--space-5); }
.salto ul { display: grid; gap: 10px; grid-template-columns: repeat(4, 1fr); }
@media (min-width: 40rem) { .salto ul { grid-template-columns: repeat(8, 1fr); } }
@media (min-width: 64rem) { .salto ul { grid-template-columns: repeat(12, 1fr); } }
.salto .actual .marco { outline: 1px solid var(--ink-strong); outline-offset: 2px; }
.salto .actual .marco img { opacity: 1; }

/* ======== Animación y publicaciones (rejilla con texto) ======== */

.lista-anim {
  display: grid; gap: var(--space-7) var(--gap-grid);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .lista-anim { grid-template-columns: repeat(3, 1fr); }
}
.pieza .marco { margin-bottom: var(--space-3); }
.pieza h2 { margin-bottom: var(--space-1); }
.pieza .obra-titulo {
  font-family: var(--font-sans); font-weight: 500; font-style: normal;
  font-size: var(--text-sm); text-transform: none;
}
.pieza .obra-meta { font-size: 0.7rem; line-height: 1.35; }
.pieza .obra-meta { margin-bottom: var(--space-3); }

/* Al pasar el cursor: sin subrayado, un fondo claro detrás
   del texto en vez de la línea bajo cada palabra. */
.pieza a:hover, .pieza a:focus-visible { text-decoration: none; }
.pieza h2, .pieza .obra-meta {
  transition: background-color var(--duration) var(--ease);
}
.pieza a:hover h2, .pieza a:hover .obra-meta,
.pieza a:focus-visible h2, .pieza a:focus-visible .obra-meta {
  background: var(--bg-obra);
}

/* Animation: gifs panorámicos (229×146) de baja resolución.
   Se limita al tamaño nativo, sin estirarlos de más. */
.p-anim .pieza { max-width: 229px; }
.p-anim .pieza .marco { aspect-ratio: 229 / 146; }

/* Publications: portadas de libro con proporciones distintas
   entre sí. object-fit: contain las centra dentro del cuadrado
   por defecto, separando visualmente la portada del título
   (que va pegado al margen izquierdo). Se ancla la imagen al
   lado izquierdo para que ambos queden alineados. */
.p-pub .pieza .marco img { object-position: left center; }

/* Proporción reservada: sin esto la página salta al cargar */
.marco-video {
  position: relative; aspect-ratio: 16 / 9;
  background: var(--bg-obra); margin-bottom: var(--space-4);
}
.marco-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video video { max-width: var(--w-work); max-height: 80vh; width: 100%; background: var(--bg-obra); }

/* ================ Obra sobre papel ================ */

.lista-papel { display: grid; gap: var(--space-7); }
.pieza-papel { display: grid; gap: var(--space-4); }
@media (min-width: 40rem) {
  .pieza-papel { grid-template-columns: 200px 1fr; gap: var(--space-5); align-items: start; }
}
.pieza-papel img { background: var(--bg-obra); }
.pieza-papel h2 { margin-bottom: var(--space-1); }

.grupos { display: grid; gap: var(--space-7); margin-top: var(--space-7); }
@media (min-width: 40rem) { .grupos { grid-template-columns: repeat(2, 1fr); } }
.grupos h2 { font-size: var(--text-base); font-weight: 500; margin: var(--space-3) 0 var(--space-1); }
.grupos .marco { max-width: 200px; }

/* ===================== About ===================== */

.bio { margin-top: var(--space-6); }
.bio img { background: var(--bg-obra); margin-bottom: var(--space-5); }
.seccion { margin-top: var(--space-8); }

.cv { font-size: var(--text-sm); }
.cv .fila {
  display: grid; grid-template-columns: 5rem 1fr;
  gap: var(--space-4); margin-bottom: var(--space-6);
}
.cv dt {
  color: var(--ink-mute); font-size: var(--text-xs);
  font-variant-numeric: tabular-nums; padding-top: 0.15em;
}
.cv dd { margin: 0; }
.cv .entrada { margin-bottom: var(--space-4); }
.cv .entrada:last-child { margin-bottom: 0; }
.cv .ttl { display: block; color: var(--ink-strong); }
.cv .sub { display: block; color: var(--ink-mute); }
@media (max-width: 34rem) { .cv .fila { grid-template-columns: 1fr; gap: var(--space-2); } }

/* ==================== Boletín ==================== */

.boletin { max-width: var(--w-text); margin-bottom: var(--space-7); }
.boletin h2 { font-size: var(--text-base); font-weight: 500; margin-bottom: var(--space-4); }
.boletin .linea { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.boletin input[type='email'] {
  flex: 0 1 10rem; font: inherit; font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 0;
}
.boletin input::placeholder { color: var(--ink-mute); opacity: 1; }
.boletin button {
  font: inherit; font-size: var(--text-sm);
  padding: var(--space-2) var(--space-5);
  background: var(--ink-strong); color: var(--bg);
  border: 1px solid var(--ink-strong); border-radius: 0; cursor: pointer;
}
.boletin button:hover { background: var(--ink); }

/* ===================== Contact ===================== */

.correo {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.boton-copiar {
  font: inherit; font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
  background: var(--ink-strong); color: var(--bg);
  border: 1px solid var(--ink-strong); border-radius: 0; cursor: pointer;
}
.boton-copiar:hover { background: var(--ink); }

/* ========= Movimiento reducido: sin animación ========= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  video[autoplay] { display: none; }
}