/* Módulo 369 · maqueta v3 (7-oct-2026) · retícula 3·6·9 con Studio Iron dominante
   Contrato: marketing/oficina/obras-web/maria-loreto-modulo369/spec-visual.md, versión 3.1 (los números entre
   paréntesis son sus ítems). Paleta medida de Studio Iron (1.1), tipografía de marca Jost + Noto Serif Display (1.2, 13-oct), movimiento
   de 1.7. Todo color, tamaño de letra, espaciado, duración y curva sale de los tokens de :root.
   Tramo 1 de la v3 (7-oct): tokens, roles, carga de imagen, cromo, piezas e Inicio. Las vistas que vienen de la
   2.1 conservan su composición (debajo de «tramo B») con los tokens nuevos hasta su tramo. */

/* ================================================================== 1 · tokens */
:root {
  /* 1.1 · color: Studio Iron es acromático; el color lo pone la fotografía (D6) */
  --blanco: #F3EFE9;           /* 10-oct · el crema de la referencia de María (no blanco); el nombre se mantiene */
  --tinta: #0A0A0A;
  --negro: #000000;
  --gris: #6B6B6B;
  --linea: #DCD6CC;
  --linea-campo: #CDC6BA;
  --superficie: #E9E4DC;
  --carga-1: #EDE8E0;
  --carga-2: #E2DCD2;
  --brillo: rgba(250, 248, 244, .7);
  --pie-texto-2: rgba(255, 255, 255, .7);
  --pie-linea: rgba(255, 255, 255, .4);
  --velo-desde: rgb(0 0 0 / .75);
  --velo-hasta: rgb(0 0 0 / 0);

  /* 1.2 · tipografía: dos familias, escala cerrada (1.2.31) */
  --serif: "Noto Serif Display", "Times New Roman", serif;   /* 13-oct · condensada (wdth 87,5), solo 400 y recta */
  --sans: "Jost", Futura, "Helvetica Neue", Arial, sans-serif;
  --letra-logo: "Josefin Sans", "Jost", Futura, sans-serif;   /* v4 · 15.3 · la de «MÓDULO 369», solo para la variante del nombre */
  --t-10: 10px; --t-11: 11px; --t-12: 12px; --t-13: 13px; --t-14: 14px; --t-15: 15px; --t-16: 16px;
  /* v4 · 15.4 (reunión del 27-oct: «letra más grande», que el texto quede más parejo con el título de arriba): la escala
     chica sube un paso pareja, de 10 a 16 cada una 1 px. Los títulos (20 en adelante) quedan donde estaban, así el texto
     se acerca a ellos sin romper la jerarquía. El nombre del token sigue siendo el paso de la v3: --t-13 mide 14 */
  --t-10: 11px; --t-11: 12px; --t-12: 13px; --t-13: 14px; --t-14: 15px; --t-15: 16px; --t-16: 17px;
  --t-20: 20px; --t-22: 22px; --t-24: 24px; --t-26: 26px; --t-28: 28px; --t-30: 30px; --t-36: 36px; --t-38: 38px; --t-48: 48px;
  --t-enunciado: 7vw;          /* 1.2.2 */
  --t-nombre: 5.6vw;           /* 1.2.3 */
  --t-evento: 10vw;            /* 1.2.4 */
  --t-contador: 200px;         /* 1.2.5 */
  --t-banda: var(--t-48);      /* 1.2.6 */
  --t-mayuscula: var(--t-36);  /* 1.2.7 */
  --t-cita: var(--t-36);       /* 1.2.9 · 13-oct: 36, el mismo paso que .t-recta */
  --t-recta: var(--t-36);      /* 1.2.10 */
  --t-pie-titular: 2.6vw;      /* 1.2.12 */
  --t-marca: var(--t-22);      /* 1.2.14 */
  --t-bajada: var(--t-15);     /* 1.2.20 */
  --t-fila: var(--t-13);       /* 1.2.30 */
  --t-titulo: var(--t-36);     /* vistas de la 2.1 (H1 en mayúscula), = 1.2.7 */
  --t-titular: 56px;           /* 13-oct · títulos de página en serif, caja normal */

  /* 1.3 · espaciado: módulo de 6 (sin cambio de la 2.1) */
  --e-1: 6px; --e-2: 12px; --e-3: 18px; --e-4: 24px; --e-6: 36px; --e-9: 54px; --e-16: 96px; --e-24: 144px;
  --cols: 9;
  --margen: 24px;              /* v5 · 10-nov, Ramón: «muy pegado al margen». Antes 12; ahora calza con el de la página de artista (--pa-margen) */
  --calle: 12px;
  --margen-texto: var(--e-4);
  --costura: 1px;
  --vacio-arriba: var(--e-9);
  --tactil: 44px;
  --alto-aviso: 28px;          /* 1.3 · barra de aviso */
  --alto-cabecera: 64px;       /* 1.3 · cabecera · v4 (15.1): de 32 a 64, la barra más alta para que la M mande */
  --logo-alto: 34px;           /* v4 · alto del logo en la cabecera (la variante A: la M mide esto) */
  /* v4 · el menú de la cabecera (aprobado por María) no sube con la escala de 15.4: sigue en 11 a todo ancho, también
     en la barra de 64 (corrección: desde 1280 pasaba a 12, y lo aprobado no se toca) */
  --t-menu: 11px;
  --pie-pad: var(--e-4);
  --pie-sep: var(--e-24);

  /* 1.7 · movimiento: valores medidos de Studio Iron */
  --m-0: 0ms; --m-150: 150ms; --m-200: 200ms; --m-300: 300ms; --m-400: 400ms; --m-500: 500ms;
  --retraso-revelado: 300ms;
  --m-brillo: 2100ms;
  --curva-mov: cubic-bezier(.4, 0, .2, 1);
  --curva-subrayado: cubic-bezier(.22, .61, .36, 1);
  --curva-paso: ease;
  --curva-imagen: ease-in-out;
  --curva-brillo: ease-in;

  color-scheme: light;
  font-synthesis: none;

  /* 2.3 · Artista a la Perrotin (spec-artista 0.3, 13-oct): medidas de armado de Perrotin, tal cual */
  --pa-margen: 24px;          /* contenedor de Perrotin: 24 a cada lado (16 a ≤ 620) */
  --pa-sec: 64px;             /* padding arriba y abajo de cada sección */
  --pa-titulo-raya: 16px;     /* título de sección → raya */
  --pa-raya-contenido: 32px;  /* raya → contenido */
  --pa-calle-expo: 24px;
  --pa-calle-prensa: 15px;    /* también textos seleccionados */
  --pa-calle-obras: 16px;     /* obras disponibles y ediciones */
  --pa-calle-medios: 48px;
  --pa-calle-galeria: 16px;
  --pa-calle-cabeza: 48px;    /* las tres columnas de la cabecera */
  --pa-velo-panel: rgb(0 0 0 / .5);
  --pa-velo-medios: rgb(0 0 0 / .15);
  /* 7.4 · 50 (corrección, ronda 1 de QA): la franja de Videos lleva, sobre el velo de Perrotin, un segundo velo para que
     el texto --blanco se lea sobre cualquier foto que suba María. Los dos juntos dejan la foto al 40 %: aun sobre un
     blanco puro, el texto queda en 5:1 (el chico pide 4,5 y los títulos 3). Con solo el .15 de Perrotin, el muro claro
     de C-S2 daba 1,36:1 */
  --pa-velo-lectura: rgb(0 0 0 / .53);
  --carga-oscura: #212121;    /* único color nuevo: relleno de carga sobre la banda negra (Perrotin #212121) */
  --m-250: 250ms; --m-600: 600ms; --m-1400: 1400ms;   /* (crítica) sin --m-330: el scroll de anclas no dura fijo (M5) */
  --curva-ancla: cubic-bezier(.42, 0, .58, 1);
}
@media (max-width: 620px) { :root { --pa-margen: 16px; --margen: 16px; } }

/* 6 · cortes: 9 columnas (≥ 1001), 6 (621 a 1000), 3 (≤ 620) */
@media (max-width: 1000px) {
  :root {
    --cols: 6; --t-enunciado: 9vw; --t-nombre: 17vw; --t-evento: 14vw; --t-contador: 140px; --t-banda: var(--t-36);
    --t-fila: var(--t-16); --alto-cabecera: 56px; --logo-alto: 28px; --t-marca: var(--t-26); --t-pie-titular: max(2.6vw, 24px); --t-titular: 44px;
  }
}
@media (max-width: 620px) {
  :root {
    --cols: 3; --t-enunciado: 12vw; --t-evento: 17vw; --t-contador: 72px; --t-banda: var(--t-26); --t-mayuscula: var(--t-26);
    --t-titulo: var(--t-26); --t-cita: var(--t-28); --t-recta: var(--t-30); --t-pie-titular: var(--t-24); --t-titular: 34px;
    --t-bajada: var(--t-14); --margen-texto: var(--e-3); --vacio-arriba: var(--e-6); --alto-aviso: 26px;
    --pie-sep: var(--e-9);
  }
}
/* con puntero grueso la cabecera de escritorio medía 44 (iPad horizontal); v4: con 64 ya pasa los 44 de toque */
/* 1.1.13 · más contraste */
@media (prefers-contrast: more) { :root { --gris: #3A3A3A; --linea: var(--tinta); --linea-campo: var(--tinta); } }

/* ================================================================== base */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--blanco);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-anchor: none;        /* 1.7.b: el hero acelerado cambia el alto de arriba; el navegador no debe compensar */
}
body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font: 400 var(--t-15)/1.55 var(--sans);
  font-synthesis: none;
  font-kerning: normal;
  hyphens: manual;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
::selection { background: var(--tinta); color: var(--blanco); }
a, button, summary, select, input, textarea { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; border-radius: 0; }
img { display: block; max-width: 100%; height: auto; border-radius: 0; }
p, h1, h2, h3, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
p { text-wrap: pretty; }
h1, h2, h3 { font-weight: 400; font-size: inherit; text-wrap: balance; }
em, i { font-style: normal; }   /* 13-oct · sin itálica: la serif va siempre recta */
strong { font-weight: 700; }
[hidden] { display: none !important; }

/* 5.12 · foco: contorno tinta de 2 px a 2 px, sin transición; en el pie, blanco */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
@media (prefers-contrast: more) { :focus-visible { outline-width: 3px; outline-offset: 3px; } }

.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; top: var(--e-2); left: var(--e-2);
  padding: var(--e-2) var(--e-3);
  font: 500 var(--t-11)/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--blanco); background-color: var(--tinta);
}
.saltar:not(:focus-visible) {
  width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ================================================================== 1.2 · roles tipográficos
   13-oct · sistema nuevo (diagnóstico pedido por Ramón): dos familias con papeles que no se cruzan, más el logo.
   · Noto Serif Display condensada, 400, recta y en caja normal: solo en grande (títulos, nombres, citas, enunciados,
     contador). Es la más parecida a la serif del diseño de Artistas de María (referentes/maria/).
   · Jost: en mayúscula espaciada para menú, rótulos, botones y nombres chicos, como el logo; en caja normal para el
     texto corrido y las fichas. 400 para leer, 500 para mayúsculas y controles.
   · El logo va en Josefin Sans como trazado (herramientas/logo_lockup.py). */
.t-enorme { font: 400 16.1vw/.8 var(--serif); letter-spacing: -.01em; white-space: nowrap; }
.t-enunciado {
  font: 400 var(--t-enunciado)/.95 var(--serif);
  letter-spacing: -.015em;
  text-align: center;
  text-wrap: balance;
}
.t-nombre { font: 400 var(--t-nombre)/.95 var(--serif); letter-spacing: -.02em; }
.t-evento { font: 400 var(--t-evento)/.85 var(--serif); letter-spacing: -.02em; }
.t-banda { font: 400 var(--t-banda)/1 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.t-mayuscula, .t-titulo, h1.t-titulo { font: 400 var(--t-titular)/1 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.t-italica, .t-titulo-it { font: 400 var(--t-30)/1.05 var(--serif); letter-spacing: -.005em; }
.t-cita { font: 400 var(--t-cita)/1.15 var(--serif); letter-spacing: -.005em; }
.t-recta { font: 400 var(--t-recta)/1.11 var(--serif); letter-spacing: -.005em; }
@media (max-width: 620px) { .t-recta { line-height: 1.2; } }
.t-pie-titular { font: 400 var(--t-pie-titular)/1.05 var(--serif); letter-spacing: -.01em; }
.t-menu { font: 500 var(--t-20)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.t-marca { font: 500 var(--t-13)/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; }
.t-rotulo { font: 500 var(--t-12)/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.t-pie-evento { font: 500 var(--t-12)/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.t-artista, .t-serif-13 { font: 500 var(--t-12)/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.t-autor { font: 500 var(--t-11)/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.t-boton-serif { font: 500 var(--t-11)/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.t-bajada { font: 400 var(--t-bajada)/1.55 var(--sans); }
.t-texto { font: 400 var(--t-15)/1.55 var(--sans); }
.t-dato { font: 400 var(--t-13)/1.5 var(--sans); }
.t-interfaz { font: 500 var(--t-13)/1 var(--sans); }
.t-tarjeta, .t-pie { font: 400 var(--t-13)/1.25 var(--sans); }
.t-descripcion { font: 400 var(--t-13)/1.5 var(--sans); }
.chico { font: 400 var(--t-12)/1.5 var(--sans); }
.etiqueta { font: 500 var(--t-11)/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.etiqueta-ancha { font: 500 var(--t-11)/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.t-detalle { font: 400 var(--t-11)/1.5 var(--sans); }
.gris { color: var(--gris); }
.num { font-variant-numeric: tabular-nums; }

/* avisos al tocar: chicos, grises, sin franja ni fondo (no están en pantalla en reposo) */
.nota-maqueta { font: 500 var(--t-12)/1.5 var(--sans); color: var(--gris); max-width: 611px; }
.nota-maqueta.al-tocar:not([hidden]) { animation: aparece var(--m-200) var(--curva-mov); }

/* ================================================================== 1.7.c / 1.7.d · imágenes */
/* la caja reserva el espacio con su proporción; .brillo: marcador gris con una banda de brillo que corre
   mientras carga y una capa que se va en 500 ms con 300 ms de retraso (800 ms en total); .funde: la foto entra
   con opacidad sobre --superficie; .primera: la lámina 1, sin fundido */
.lienzo {
  position: relative;
  display: block;
  width: min(100%, calc(var(--alto-max, 80svh) * var(--ar)));
  aspect-ratio: var(--ar);
  overflow: hidden;
}
.lienzo img { width: 100%; height: 100%; }
.lienzo.ancho-total { width: 100%; }
.lienzo.cubre img { object-fit: cover; }
.lienzo.entera img { object-fit: contain; object-position: 50% 100%; }
.lienzo.brillo { background-image: linear-gradient(90deg, var(--carga-1), var(--carga-2)); }
.lienzo.brillo::before, .lienzo.brillo::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.lienzo.brillo::before {
  z-index: 2;
  background-image: linear-gradient(270deg, transparent, var(--brillo), transparent);
  animation: brillo var(--m-brillo) var(--curva-brillo) infinite;
  transition: opacity var(--m-500) var(--curva-imagen);
}
.lienzo.brillo::after { z-index: 1; background-color: var(--carga-2); transition: opacity var(--m-500) var(--curva-imagen) var(--retraso-revelado); }
.lienzo.brillo.lista::before { opacity: 0; animation: none; }
.lienzo.brillo.lista::after { opacity: 0; }
.lienzo.brillo.lista { background-image: none; }
.lienzo.brillo.ya::before, .lienzo.brillo.ya::after { transition: none; }
@keyframes brillo { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.lienzo.funde { background-color: var(--superficie); }
.lienzo.funde img { opacity: 0; transition: opacity var(--m-500) var(--curva-imagen); }
.lienzo.funde.lista img { opacity: 1; }
.lienzo.funde.lista.entera, .lienzo.funde.lista:not(.cubre) { background-color: transparent; }
.lienzo.funde.ya img { transition: none; }
.lienzo.primera { background-color: var(--superficie); }

/* ================================================================== 1.7.f · subrayado que crece */
.subraya {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  padding-bottom: 2px;
  transition: background-size var(--m-400) var(--curva-subrayado);
}
@media (hover: hover) {
  a:hover .subraya, a.subraya:hover, button:hover .subraya { background-size: 100% 1px; }
}
a:focus-visible .subraya, button:focus-visible .subraya, a.subraya:focus-visible { background-size: 100% 1px; transition: none; }
[aria-current] > .subraya, [aria-pressed="true"] > .subraya, .abierto > .subraya, .actual > .subraya { background-size: 100% 1px; }
.flecha { display: inline-block; }

/* ================================================================== 2.0.12 · acciones */
.boton-fila {
  display: flex; justify-content: space-between; align-items: center; column-gap: var(--e-3);
  width: 100%; min-height: 48px;
  padding: var(--e-2) var(--e-3);
  font: 500 var(--t-11)/1 var(--sans);
  letter-spacing: .16em; text-transform: uppercase;   /* 13-oct · los botones van en mayúscula espaciada, como el resto */
  text-align: left;
  color: var(--tinta);
  background-color: var(--blanco);
  border: 1px solid var(--linea);
}
@media (hover: hover) { .boton-fila:hover { background-color: var(--tinta); color: var(--blanco); border-color: var(--tinta); } }
.boton-fila:focus-visible, .boton-fila:active { background-color: var(--tinta); color: var(--blanco); border-color: var(--tinta); }
.boton-fila[aria-disabled="true"] { color: var(--gris); background-color: var(--blanco); border-color: var(--linea); pointer-events: none; }
.boton-lleno {
  display: flex; justify-content: center; align-items: center; column-gap: var(--e-2);
  width: 100%; min-height: 48px;
  padding: var(--e-2) var(--e-3);
  font: 500 var(--t-11)/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--blanco); background-color: var(--negro); border: 1px solid var(--negro);
}
@media (hover: hover) { .boton-lleno:hover { background-color: var(--blanco); color: var(--negro); } }
.boton-lleno:active { background-color: var(--blanco); color: var(--negro); }
.boton-contorno {
  display: inline-flex; align-items: center; justify-content: center; column-gap: var(--e-2);
  min-height: 37px;
  padding: var(--e-2) var(--e-4);
  font: 500 var(--t-11)/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta); border: 1px solid var(--negro);
  transition: opacity var(--m-150) var(--curva-mov);
}
@media (max-width: 1000px), (pointer: coarse) { .boton-contorno { min-height: var(--tactil); } }
@media (hover: hover) { .boton-contorno:hover { opacity: .7; } }
.boton-contorno:active { opacity: .7; }
.accion-ancha {
  display: inline-flex; align-items: flex-end;
  min-height: var(--tactil); min-width: var(--tactil);
  font: 500 var(--t-11)/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta);
  transition: opacity var(--m-150) var(--curva-mov);
}
.accion-ancha > span { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
@media (hover: hover) { .accion-ancha:hover { opacity: .7; } }
.accion-ancha:active { opacity: .7; }

/* 2.0.7 / 5.8 · flecha cuadrada: 28 × 28 a la vista, 44 × 44 de área */
.flecha-cuadrada {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid var(--linea);
  background-color: var(--blanco);
  font: 500 var(--t-13)/1 var(--sans);
  color: var(--tinta);
  transition: border-color var(--m-200) var(--curva-mov);
}
.flecha-cuadrada::after { content: ""; position: absolute; inset: -9px; }
@media (hover: hover) { .flecha-cuadrada:not([aria-disabled="true"]):hover { border-color: var(--tinta); } }
.flecha-cuadrada[aria-disabled="true"] { opacity: .3; cursor: default; }
/* 5.9 · flecha de texto (carrusel del Inicio, galerías): «←» «→» con 44 de área */
.flecha-texto {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tactil); min-height: var(--tactil);
  font: 500 var(--t-12)/1 var(--sans);
  color: var(--tinta);
  transition: opacity var(--m-150) var(--curva-mov);
}
@media (hover: hover) { .flecha-texto:not([aria-disabled="true"]):hover { opacity: .6; } }
.flecha-texto[aria-disabled="true"] { opacity: .3; cursor: default; }

/* ================================================================== 5.11 · herramientas de la maqueta */
.herramienta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tactil); min-width: var(--tactil);
  padding-inline: var(--e-1);
  margin-block: calc((var(--tactil) - 1.5em) / -2);
  white-space: nowrap;
  font: 500 var(--t-12)/1.5 var(--sans);
  color: var(--gris);
  transition: opacity var(--m-200) var(--curva-mov);
}
.herramienta > span {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px;
}
.herramienta[aria-pressed="true"] { color: var(--tinta); }
.herramienta[aria-pressed="true"] > span { background-size: 100% 1px; }
@media (hover: hover) { .herramienta:hover { color: var(--tinta); } }
/* v4 · 15.1 y 15.3 · «Variantes»: Logo A · B · C y Nombre serif · logo, antes de las otras dos herramientas y separadas
   de ellas por una raya; los rótulos en tinta, las opciones como las herramientas (gris; la elegida, tinta y subrayada) */
.variantes { display: flex; align-items: center; column-gap: var(--e-3); margin-right: var(--e-2); padding-right: var(--e-2); border-right: 1px solid var(--linea); }
.grupo-var { display: inline-flex; align-items: center; }
.rot-variantes, .rot-var { color: var(--tinta); }
.grupo-var > .rot-var + .rot-var { margin-right: var(--e-1); }
.grupo-var .sep { color: var(--gris); }
.herramienta.op-var { min-width: 24px; }
@media (pointer: coarse) { .herramienta.op-var { min-width: var(--tactil); } }

/* ================================================================== 2.0.1 · barra de aviso (en el flujo, una línea) */
.aviso {
  display: flex; align-items: center; column-gap: var(--e-2);
  height: var(--alto-aviso);
  padding-inline: var(--margen);
  background-color: var(--blanco);
  border-bottom: 1px solid var(--linea);
  font: 500 var(--t-12)/1.5 var(--sans);
  color: var(--gris);
  white-space: nowrap;
  overflow: hidden;
}
.aviso .rotulo { color: var(--tinta); flex: none; }
.aviso .texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.aviso .enlace-aviso { color: var(--tinta); margin-left: var(--e-1); }
.aviso .corto { display: none; }
/* v4 · con el control de variantes, entre 1001 y 1279 el aviso usa sus textos cortos para quedar en una línea */
@media (min-width: 1001px) and (max-width: 1279px) { .aviso .largo { display: none; } .aviso .corto { display: inline; } }
.aviso .herramientas { display: flex; align-items: center; margin-right: calc(var(--e-1) * -1); flex: none; }
@media (max-width: 1000px) { .aviso .herramientas { display: none; } }
@media (max-width: 620px) {
  .aviso .largo { display: none; }
  .aviso .corto { display: inline; }
}

/* ================================================================== 2.0.2 · cabecera de tres zonas (en el flujo) */
.cabecera {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--alto-cabecera);
  padding-inline: var(--margen);
  background-color: var(--blanco);
}
.cab-izq, .cab-der { display: flex; align-items: center; column-gap: var(--e-4); min-width: 0; }
.cab-der { justify-content: flex-end; }
.cab-der .idiomas { display: flex; column-gap: var(--e-2); }
.cab-enlace {
  display: inline-flex; align-items: center;
  height: var(--alto-cabecera);
  font: 500 var(--t-menu)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta);
  white-space: nowrap;
}
@media (pointer: coarse) { .cab-enlace { min-width: var(--tactil); justify-content: center; } .cab-der .idiomas { column-gap: 0; } }
.cab-enlace:focus-visible { outline-offset: -2px; }
/* 13-oct · la cabecera queda fija arriba al bajar (pedido de Ramón). Fondo opaco y una raya fina cuando ya se despegó:
   nunca letras sueltas sobre las fotos (lo que a María le molestó de Escat). El panel de Artistas y el menú de pantalla
   se pegan justo debajo, para que se abran donde está la persona y no al principio de la página. --alto-fijo lo
   reescribe el JS con el alto real de la cabecera (con «Lo editas tú» crece). */
:root { --alto-fijo: var(--alto-cabecera); }
html { scroll-padding-top: var(--alto-fijo); }
.cabecera { position: sticky; top: 0; z-index: 40; box-shadow: 0 1px 0 transparent; transition: box-shadow var(--m-200) linear; }
body.despegada .cabecera { box-shadow: 0 1px 0 var(--linea); }
/* (corrección MOV2-09) la cabecera pegada está siempre a la vista, pero con el scroll-padding-top de html el navegador
   daba por tapado lo que hay en ella: al recibir el foco (Escape del menú, cambio de idioma, Mayús+Tab desde la página)
   la página subía 422 px a 390 (450 a 1440). Con el margen negativo, lo enfocable de la cabecera cuenta como visible */
.cabecera a, .cabecera button { scroll-margin-top: calc(-1 * var(--alto-fijo)); }
/* arriba de todo se abre en el flujo, como antes; ya despegada, encima de la página (sin correr el contenido) */
body.despegada .menu-pantalla { position: fixed; top: var(--alto-fijo); left: 0; right: 0; z-index: 39; }
body.despegada .menu-pantalla { height: max(420px, calc(100svh - var(--alto-fijo))); }
html:has(.menu-pantalla:not([hidden])) { overflow: hidden; }   /* con el menú abierto, la página de atrás no se mueve */
.cabecera > * { grid-row: 1; }
/* 10-oct · el logo de María: la M y «MÓDULO 369» en una línea (herramientas/logo_lockup.py). Va como máscara
   para que tome el color de la tinta. Las secciones pasan al centro; tienda, contacto e idioma siguen a la derecha. */
.marca-chica {
  grid-column: 1;
  justify-self: start;
  display: inline-flex; align-items: center;
  min-height: var(--alto-cabecera);
  color: var(--tinta);
}
.marca-chica .logo {
  display: block;
  height: var(--logo-alto);
  aspect-ratio: 555.5 / 100;
  background-color: currentColor;
  -webkit-mask: url("img/logo-modulo369-a.svg") no-repeat left center / contain;
  mask: url("img/logo-modulo369-a.svg") no-repeat left center / contain;
}
.marca-chica:focus-visible { outline-offset: 2px; }
.cab-izq { grid-column: 2; }
.cab-der { grid-column: 3; }
.btn-menu, .btn-idioma { display: none; }
/* v4 · 15.1 · tres variantes del logo para elegir con María (el control «Variantes» de la barra de aviso pone
   data-logo en <html>; sin él rige la A). Los logos salen de herramientas/logo_lockup.py:
   A · la M grande y «MÓDULO 369» chico al lado, apoyado en la base de la M (logo-modulo369-a.svg), a la izquierda.
   B · el mismo logo centrado en su propia fila y el menú debajo, como en la v3: secciones al centro, tienda,
       contacto e idioma a la derecha. A ≤ 1000, el logo al centro entre el idioma y el botón de dos rayas.
   C · la M arriba y MÓDULO / 369 debajo, el bloque apilado del logo original (logo-modulo369-c.svg), a la izquierda.
   La cabecera fija sigue igual en las tres: el JS mide su alto real y lo pasa a --alto-fijo. */
html[data-logo="b"] { --alto-cabecera: 104px; --fila-logo-b: 64px; }
html[data-logo="b"] .cabecera { grid-template-rows: var(--fila-logo-b) minmax(0, 1fr); }
html[data-logo="b"] .marca-chica { grid-column: 2; justify-self: center; min-height: var(--fila-logo-b); }
html[data-logo="b"] .cab-izq, html[data-logo="b"] .cab-der { grid-row: 2; align-self: start; }
html[data-logo="b"] .cab-enlace { height: calc(var(--alto-cabecera) - var(--fila-logo-b)); align-items: flex-start; padding-top: var(--e-1); }
html[data-logo="c"] { --alto-cabecera: 96px; --logo-alto: 70px; }
html[data-logo="c"] .marca-chica .logo {
  aspect-ratio: 197.7 / 163.8;
  -webkit-mask-image: url("img/logo-modulo369-c.svg");
  mask-image: url("img/logo-modulo369-c.svg");
}
/* v5 · 10-nov, María: «MÓDULO» y «369» alineados con la M (la tinta va de borde a borde de la M) y el logo más
   grande. Sale de herramientas/logo_lockup.py --apilado --mayus 0.15 --justificar modulo (369 centrado, 10-nov: Ramón prefiere no justificarlo). La M pasa de 43 a 67 px
   de alto y las mayúsculas de 7 a 10 px; la barra crece lo justo para que el logo no la toque */
html[data-logo="c"] { --alto-cabecera: 128px; --logo-alto: 104px; }
html[data-logo="c"] .marca-chica .logo {
  aspect-ratio: 100 / 156.2;
  -webkit-mask-image: url("img/logo-modulo369-c-alineado.svg?v=2");
  mask-image: url("img/logo-modulo369-c-alineado.svg?v=2");
}
@media (max-width: 1000px) {
  .cabecera { grid-template-columns: 1fr var(--tactil) var(--tactil); padding-inline: var(--margen) 0; }
  .btn-idioma { grid-column: 2; }
  .btn-menu { grid-column: 3; }
  .cab-izq, .cab-der { display: none; }
  .btn-menu, .btn-idioma {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--tactil); height: var(--tactil);
  }
  .btn-menu:focus-visible, .btn-idioma:focus-visible { outline-offset: -2px; }
  .btn-menu { position: relative; }
  .btn-menu .raya {
    position: absolute; left: var(--e-2);
    height: 2px; background-color: var(--tinta);
    transition: transform var(--m-300) var(--curva-mov);
  }
  .btn-menu .raya:first-child { top: 17.5px; width: 20px; }
  .btn-menu .raya:last-child { top: 24.5px; width: 16px; }
  .btn-menu[aria-expanded="true"] .raya:first-child { transform: translateY(3.5px) rotate(45deg); }
  .btn-menu[aria-expanded="true"] .raya:last-child { transform: translate(2px, -3.5px) rotate(-45deg) scaleX(1.25); }
  .btn-idioma { color: var(--tinta); font: 500 var(--t-11)/1.5 var(--sans); letter-spacing: .16em; }
  /* v4 · B: el idioma a la izquierda y el botón a la derecha, el logo al centro; C: el bloque apilado, más chico */
  html[data-logo="b"] { --alto-cabecera: 56px; }
  html[data-logo="b"] .cabecera { grid-template-columns: var(--tactil) minmax(0, 1fr) var(--tactil); grid-template-rows: none; padding-inline: 0; }
  html[data-logo="b"] .btn-idioma { grid-column: 1; }
  html[data-logo="b"] .marca-chica { min-height: var(--alto-cabecera); }
  html[data-logo="c"] { --alto-cabecera: 92px; --logo-alto: 72px; }   /* v5 · antes 76 / 54 */
}

/* ================================================================== 2.0.4 · menú de pantalla a ≤ 1000 (en el flujo) */
.menu-pantalla {
  display: none;
  flex-direction: column;
  height: max(420px, calc(100svh - var(--alto-aviso) - var(--alto-cabecera)));   /* v4 · la cabecera ya no mide 44 */
  background-color: var(--blanco);
  animation: entra-menu var(--m-300) var(--curva-mov);
}
@media (max-width: 1000px) { .menu-pantalla:not([hidden]) { display: flex; } }
body:has(.menu-pantalla:not([hidden])) { overflow-x: clip; }
.menu-cuerpo { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.menu-cuerpo.sub { justify-content: flex-start; }
.menu-items { display: flex; flex-direction: column; align-items: center; row-gap: var(--e-2); }
.menu-items a, .menu-items button {
  display: inline-flex; align-items: center; column-gap: var(--e-1);
  min-height: var(--tactil); margin-block: -4px;
  font: 500 var(--t-20)/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta);
}
.menu-idioma {
  display: flex; justify-content: space-between; align-items: center;
  height: var(--tactil);
  padding-inline: var(--margen);
  border-top: 1px solid var(--linea);
}
.menu-idioma .lado { display: flex; align-items: center; }
/* (corrección C5) 14 de relleno a cada lado: «ES» y «EN» ya quedaban con ≈ 14 de aire al centrarse en los 44 de
   ancho mínimo, pero «Lo editas tú» y «Retícula» pasan de 44 y quedaban pegadas al «·» («TÚ·RETÍCULA») y a 12 del
   borde derecho (contra 26 a la izquierda). Con el relleno, el mismo aire en los dos lados y los dos márgenes iguales */
.menu-idioma button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tactil); height: var(--tactil); padding-inline: 14px;
  font: 500 var(--t-11)/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--gris);
}
.menu-idioma button[aria-pressed="true"] { color: var(--tinta); }
.menu-idioma .sep { color: var(--gris); }
/* v4 · las variantes en el menú de pantalla: una fila sobre la del idioma; si no caben, cada grupo en su línea */
.menu-variantes { flex-wrap: wrap; height: auto; min-height: var(--tactil); }
.menu-variantes .rot-var { font: 500 var(--t-11)/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.menu-variantes .op-var { padding-inline: var(--e-1); }
.menu-variantes .grupo-var .rot-var + .rot-var { margin-right: var(--e-1); }

/* ================================================================== 2.0.13 · pie del sitio (negro, D14) */
.pie-sitio {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--calle);
  padding: var(--pie-pad);
  background-color: var(--negro);
  color: var(--blanco);
}
.pie-sitio :focus-visible { outline-color: var(--blanco); }
.pie-titular {
  grid-column: 1 / 6;
  font: 400 var(--t-pie-titular)/1.05 var(--serif);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.pie-escribir {
  grid-column: 7 / 10; align-self: start;
  display: flex; justify-content: space-between; align-items: center;
  min-height: var(--tactil);
  border-bottom: 1px solid var(--pie-linea);
  font: 500 var(--t-11)/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--blanco);
  transition: border-color var(--m-200) var(--curva-mov);
}
@media (hover: hover) { .pie-escribir:hover { border-color: var(--blanco); } }
.pie-escribir:focus-visible { border-color: var(--blanco); }
.pie-col { margin-top: var(--pie-sep); display: grid; align-content: start; }
.pie-col.uno { grid-column: 1 / 3; }
.pie-col.dos { grid-column: 3 / 5; }
.pie-col.tres { grid-column: 6 / 8; }
.pie-col .etiqueta { margin-bottom: var(--e-1); color: var(--pie-texto-2); }
.pie-col a, .pie-col .dato {
  display: flex; align-items: center;
  min-height: 28px;
  font: 400 var(--t-13)/1 var(--sans);
  color: var(--blanco);
  transition: color var(--m-150) var(--curva-mov);
}
.pie-col a { min-width: var(--tactil); }
.pie-col a:focus-visible { outline-offset: -2px; }
@media (hover: hover) { .pie-col a:hover { color: var(--pie-texto-2); } }
.pie-col a:active { color: var(--pie-texto-2); }
.pie-legal {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; column-gap: var(--e-4); flex-wrap: wrap;
  margin-top: var(--e-6);
  font: 400 var(--t-12)/1.5 var(--sans);
  color: var(--pie-texto-2);
}
/* v4 · 15.2 (reunión del 27-oct) · una M blanca en el pie, la misma de la cabecera (img/logo-modulo369-m.svg como
   máscara en --blanco). ≥ 1001: en la última columna, que estaba vacía, a la altura de las tres columnas de enlaces y
   con su base en la base de ellas; mide una columna, con tope de 128. ≤ 1000: sola en su fila, sobre la línea legal */
.pie-m {
  grid-column: 9; grid-row: 2; justify-self: end; align-self: end;
  width: min(100%, 128px); aspect-ratio: 1;
  background-color: var(--blanco);
  -webkit-mask: url("img/logo-modulo369-m.svg") no-repeat center / contain;
  mask: url("img/logo-modulo369-m.svg") no-repeat center / contain;
}
.pie-legal a { display: inline-flex; align-items: center; min-height: var(--tactil); margin-block: calc((var(--tactil) - 1.5em) / -2); }
@media (max-width: 1000px) {
  .pie-titular { grid-column: 1 / 5; }
  .pie-escribir { grid-column: 5 / 7; }
  .pie-col.uno { grid-column: 1 / 3; }
  .pie-col.dos { grid-column: 3 / 5; }
  .pie-col.tres { grid-column: 5 / 7; }
  .pie-col a, .pie-col .dato { min-height: var(--tactil); }
  .pie-m { grid-column: 1 / -1; grid-row: auto; justify-self: start; width: 72px; margin-top: var(--e-9); }
}
@media (pointer: coarse) { .pie-col a, .pie-col .dato { min-height: var(--tactil); } }
@media (max-width: 620px) {
  .pie-sitio { padding: var(--e-6) var(--e-2) var(--e-2); }
  .pie-titular { grid-column: 1 / -1; text-align: center; }
  .pie-escribir { grid-column: 1 / -1; margin-top: var(--e-6); }
  .pie-col.uno { grid-column: 1; justify-items: start; }
  .pie-col.dos { grid-column: 2; justify-items: center; text-align: center; }
  .pie-col.tres { grid-column: 3; justify-items: end; text-align: right; }
  .pie-legal { flex-direction: column; align-items: center; text-align: center; }
  .pie-m { justify-self: center; width: 56px; margin-top: var(--e-6); }
}

/* ================================================================== 2.0.5 / 2.0.6 · tarjeta de obra y de artista */
.tarjeta { display: block; color: var(--tinta); min-width: 0; }
.tarjeta .lienzo { width: 100%; }
/* 1.7.e · filo de 1 px en seco, sobre la imagen (la obra entera: sobre la caja) */
@media (hover: hover) { .tarjeta:hover .lienzo { outline: 1px solid var(--tinta); outline-offset: -1px; } }
.tarjeta:focus-visible { outline: 2px solid var(--tinta); outline-offset: -2px; }
.tarjeta .pie-tarjeta {
  display: flex; justify-content: space-between; align-items: baseline; column-gap: var(--e-2);
  margin-top: var(--e-1);
  padding-inline: var(--e-1);
}
.pie-tarjeta .titulo { font: 400 var(--t-13)/1.25 var(--sans); min-width: 0; text-wrap: balance; }
.pie-tarjeta .autor { font: 500 var(--t-11)/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-align: right; white-space: nowrap; }
.pie-tarjeta .autor.grande { font-size: var(--t-11); }
.pie-tarjeta .conteo-obras { color: var(--gris); white-space: nowrap; }
.tarjeta .estado-tarjeta { display: block; margin-top: var(--e-1); padding-inline: var(--e-1); color: var(--gris); }
@media (max-width: 620px) {
  .tarjeta .pie-tarjeta { flex-direction: column; align-items: center; row-gap: var(--e-1); text-align: center; }
  .pie-tarjeta .autor { text-align: center; white-space: normal; }
  .tarjeta .estado-tarjeta { text-align: center; }
}

/* ================================================================== 2.0.7 · tira (carrusel de tarjetas) */
.tira-titulo {
  display: flex; justify-content: space-between; align-items: center; column-gap: var(--e-2);
  padding-inline: var(--margen);
  min-height: 28px;
}
.tira-titulo .t-rotulo { color: var(--tinta); transition: opacity var(--m-200) var(--curva-mov); }
@media (hover: hover) { .tira-titulo a.t-rotulo:hover { opacity: .6; } }
.tira-titulo .flechas { display: flex; column-gap: var(--e-1); }
.tira-titulo .flechas[hidden] { display: none; }
@media (max-width: 1000px), (pointer: coarse) {
  .tira-titulo a.t-rotulo { position: relative; }
  .tira-titulo a.t-rotulo::after { content: ""; position: absolute; inset: -12px -6px -4px; }
  .tira-titulo .flechas { column-gap: 16px; }
}
/* 1.4.2 · vistas de Studio Iron: 4 desde 1220 (346 a 1440, calle 8), 3 de 920 a 1219, 2,6 de 521 a 919, 3 con costura hasta 520 */
.carril {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 8px) / 4);
  column-gap: 8px;
  margin-top: var(--e-2);
  padding: var(--e-1) var(--margen);
  scroll-padding-inline: var(--margen);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carril::-webkit-scrollbar { display: none; }
.carril > * { scroll-snap-align: start; }
.carril:focus-visible { outline-offset: -2px; }
@media (max-width: 1219px) { .carril { grid-auto-columns: calc((100% - 2 * 8px) / 3); } }
@media (max-width: 919px) { .carril { grid-auto-columns: calc((100% - 2 * 8px) / 2.6); } }
@media (max-width: 520px) {
  .carril {
    grid-auto-columns: calc((100% - 2 * var(--costura)) / 3);
    column-gap: var(--costura);
    padding-inline: 0;
    scroll-padding-inline: 0;
  }
}

/* 1.4.1c · fila de artistas del Inicio: 13-oct, la misma grilla y tarjeta de la página Artistas (2.2), con su título
   alineado al margen de la grilla */
.fila-artistas .tira-titulo { padding-inline: var(--k-margen); }
.fila-artistas .grilla-k { margin-top: var(--e-2); }

/* ================================================================== 2.0.8 · banda con su texto encima (D15) */
.banda { position: relative; }
.banda .lienzo { width: 100%; aspect-ratio: 16 / 9; }
@media (max-width: 620px) { .banda .lienzo { aspect-ratio: 4 / 5; } }
/* 1.1.10 · el velo medido de Studio Iron, solo debajo del texto: .velo-lado a ≥ 1001, .velo-pie a ≤ 1000 */
.banda .velo {
  position: absolute; inset-block: 0; left: 0; width: 55%;
  background-image: linear-gradient(to right, var(--velo-desde), var(--velo-hasta));
  pointer-events: none;
}
.banda-texto {
  position: absolute; left: calc(var(--margen) + var(--e-4)); top: var(--e-24);
  display: grid; justify-items: start;
  width: 380px; max-width: calc(100% - 2 * var(--margen-texto));
  color: var(--blanco);
}
.banda-texto .rotulo-dato { margin-bottom: var(--e-2); color: var(--blanco); }
.banda-texto .t-bajada { margin-top: var(--e-3); }
.banda-texto .enlace-banda { margin-top: var(--e-4); }
.banda-texto .accion-ancha { color: var(--blanco); }
@media (max-width: 1000px) {
  .banda .velo { inset: 0; width: auto; background-image: linear-gradient(to top, var(--velo-desde), var(--velo-hasta)); }
  .banda-texto {
    inset: 0; left: 0; top: 0; width: auto; max-width: none;
    justify-items: center; align-content: center; text-align: center;
    padding-inline: var(--margen-texto);
  }
  .banda-texto > * { max-width: 380px; }
}

/* ================================================================== 2.1 · Inicio */
/* 10-oct · portada a la Escat: tres fotos grandes que se turnan (fundido); el pie va debajo, nunca encima.
   ≥ 621: la foto llena lo que queda de la pantalla menos la línea del pie; ≤ 620: encuadre 3:4. */
.portada { position: relative; }
.escena {
  position: relative;
  height: max(420px, calc(100svh - var(--alto-aviso) - var(--alto-cabecera) - var(--tactil)));
  overflow: hidden;
  background-color: var(--superficie);
  touch-action: pan-y;
}
.cuadro {
  position: absolute; inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 1200ms var(--curva-imagen), visibility 0s linear 1200ms;
  visibility: hidden;
}
.cuadro.activo { opacity: 1; visibility: visible; z-index: 1; transition: opacity 1200ms var(--curva-imagen), visibility 0s; }
.cuadro .lienzo { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.cuadro .encuadre-angosto { display: none; }
@media (max-width: 620px) {
  .escena { height: auto; aspect-ratio: 3 / 4; }
  .cuadro .encuadre-ancho { display: none; }
  .cuadro .encuadre-angosto { display: block; }
}
@media (prefers-reduced-motion: reduce) { .cuadro, .cuadro.activo { transition: none; } }
.linea-lamina {
  display: flex; justify-content: space-between; align-items: center; column-gap: var(--e-2);
  min-height: var(--tactil);
  padding-inline: var(--margen);
  background-color: var(--blanco);
}
.linea-lamina .pie-lamina {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--e-3); row-gap: var(--e-1);
  min-height: var(--tactil); align-content: center;
  color: var(--tinta);
}
.linea-lamina .pie-lamina:focus-visible { outline-offset: -2px; }
.controles .pausa { min-height: var(--tactil); padding-inline: var(--e-2); color: var(--gris); }
@media (hover: hover) { .controles .pausa:hover { color: var(--tinta); } }
.controles .pausa[aria-pressed="true"] { color: var(--tinta); }
.controles .pausa:focus-visible { outline-offset: -2px; }
.controles { display: flex; align-items: center; flex: none; }
.controles .contador-lamina { min-width: 6.2em; text-align: center; white-space: nowrap; }

/* 5 · enunciado: H2 serif mayúscula enorme centrado, todo en tinta */
.enunciado {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--calle);
  padding: var(--e-9) var(--margen);
}
.enunciado h2 { grid-column: 2 / 9; }
.enunciado p { grid-column: 1 / -1; justify-self: center; max-width: 464px; margin-top: var(--e-4); text-align: center; }
@media (max-width: 1000px) { .enunciado h2 { grid-column: 1 / -1; } }
@media (max-width: 620px) { .enunciado { padding: var(--e-6) var(--margen-texto); column-gap: 0; } }

.inicio .banda { margin-top: var(--e-6); }
/* 8 · «Libro», casi escondida: sola en una fila de 48 px, al borde derecho de la última columna */
.fila-libro {
  display: flex; justify-content: flex-end; align-items: center;
  height: 48px;
  margin-top: var(--e-6);
  padding-inline: var(--margen);
}
.fila-libro a {
  display: inline-flex; align-items: center; justify-content: flex-end;
  min-height: var(--tactil); min-width: var(--tactil);
  font: 400 var(--t-12)/1.5 var(--sans);
  color: var(--gris);
}

/* 2.0.14 · cada vista termina a --e-16 del pie, salvo que su último bloque sea una imagen a sangre */
main { display: block; min-height: 50vh; padding-bottom: var(--e-16); }
body.toca-pie main { padding-bottom: 0; }
main:focus { outline: none; }
main h1:focus { outline: none; }
main h1:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* ================================================================== 9.3 · retícula (herramienta de maqueta) */
.reticula {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--calle);
  padding-inline: var(--margen);
  opacity: 0; visibility: hidden;
  transition: opacity var(--m-200) var(--curva-mov), visibility 0s linear var(--m-200);
  counter-reset: columna;
}
body.ver-reticula .reticula { opacity: 1; visibility: visible; transition-delay: 0s; }
.reticula > span {
  counter-increment: columna;
  background-image:
    linear-gradient(to right, var(--tinta) 0 1px, var(--blanco) 1px 2px, transparent 2px),
    linear-gradient(to left, var(--tinta) 0 1px, var(--blanco) 1px 2px, transparent 2px);
  padding: var(--e-1);
}
.reticula > span::before {
  content: counter(columna);
  display: inline-block;
  font: 500 var(--t-11)/1.5 var(--sans);
  color: var(--tinta);
  background-color: var(--blanco);
  padding-inline: var(--e-1);
}

/* ================================================================== 9.2 · «Lo editas tú» */
body.ver-edita [data-edita] { outline: 1px dashed var(--tinta); outline-offset: 4px; }
body.ver-edita [data-edita-fijo] { outline: 1px dotted var(--gris); outline-offset: 4px; }
body.ver-edita .pie-sitio [data-edita-fijo], body.ver-edita .pie-sitio[data-edita-fijo] { outline-color: var(--pie-texto-2); }
body.ver-edita [data-etiqueta]::before {
  content: attr(data-etiqueta);
  display: block;
  grid-column: 1 / -1;
  flex-basis: 100%;
  width: fit-content;
  max-width: 100%;
  margin-bottom: var(--e-1);
  padding: var(--e-1) var(--e-2);
  font: 500 var(--t-12)/1.5 var(--sans);
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  color: var(--blanco);
  background-color: var(--tinta);
  animation: aparece var(--m-200) var(--curva-mov);
}
body.ver-edita .pie-sitio [data-etiqueta]::before { color: var(--tinta); background-color: var(--blanco); }
@media (min-width: 1001px) {
  body.ver-edita .cabecera { height: auto; min-height: var(--alto-cabecera); padding-block: var(--e-1); }
  body.ver-edita .cab-izq { flex-wrap: wrap; row-gap: var(--e-1); }
}
@media (max-width: 1000px) { body.ver-edita [data-solo-ancho]::before { display: none; } }
@media (min-width: 1001px) { body.ver-edita [data-solo-movil]::before { display: none; } }

/* ================================================================== 1.7 · movimiento */
@keyframes aparece { from { opacity: 0; } }
@keyframes entra-menu { from { transform: translateX(-100%); } }
/* 1.7.2 · con movimiento reducido, todo instantáneo y sin banda de brillo */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-delay: 0s !important;
  }
  .lienzo.brillo::before { display: none; }
}

/* ================================================================== 2.16 · Créditos y notas */
.pagina-creditos .actualizado { margin-top: var(--e-2); font: 400 var(--t-14)/1.5 var(--sans); }
.pagina-creditos .lista-notas { list-style: disc; padding-left: 20px; }
.pagina-creditos .lista-notas li + li { margin-top: var(--e-1); }
.pagina-creditos .grupo-creditos { margin-top: var(--e-4); margin-bottom: var(--e-1); }
.pagina-creditos .lista-creditos li { padding-block: 2px; }
.pagina-creditos .lista-creditos a { color: var(--tinta); }
.linea-decidir { margin-top: var(--e-2); }

/* ================================================================== tramo B · grilla, cabecera de colección, opciones */
/* 1.4.1 · grilla de tarjetas (Studio Iron: colección): 3 por fila en la retícula de 12 (464 a 1440, 240 a 768);
   a ≤ 620, 2 por fila de borde a borde con la costura de 1 px; fila a fila --e-3; la última queda abierta */
.grilla-tarjetas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--calle);
  row-gap: var(--e-3);
  align-items: start;
  padding-inline: var(--margen);
}
@media (max-width: 620px) {
  .grilla-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--costura); padding-inline: var(--costura); }
}
/* cabecera de colección (Studio Iron: «ALL OBJECTS» centrado, sin migas) */
.cabeza-centrada {
  display: grid; justify-items: center; align-content: start;
  padding: var(--vacio-arriba) var(--margen) 0;
  text-align: center;
}
.cabeza-centrada > h1 { max-width: 500px; }
.conteo-obras { color: var(--gris); }
/* opciones de texto (filtros de Obras, Tienda): Archivo 500 13; la activa con el subrayado dibujado (1.7.f) */
.op-filtro, .op-vista {
  display: inline-flex; align-items: center; justify-content: center;
  font: 500 var(--t-13)/1 var(--sans);
  color: var(--tinta);
  white-space: nowrap;
}
.op-vista { font: 500 var(--t-12)/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.op-filtro:active, .op-vista:active { color: var(--gris); }
/* 13-oct · opción descartada: con lo ya elegido no hay ninguna obra (marcarDisponibles en app.js) */
.op-filtro:disabled, .celda-filtro:disabled { opacity: .3; cursor: default; pointer-events: none; }
.op-filtro:focus-visible, .op-vista:focus-visible { outline-offset: 2px; }
/* 4.26 · a ≤ 1000 y con puntero grueso, 44 × 44 */
@media (max-width: 1000px), (pointer: coarse) {
  .op-filtro, .op-vista { min-height: var(--tactil); min-width: var(--tactil); }
}
.vista-sel { display: flex; align-items: center; column-gap: var(--e-1); }
.vista-sel .sep { color: var(--gris); font: 400 var(--t-12)/1.4 var(--sans); }
/* enlace de texto ancho (navegación de la ficha): .etiqueta-ancha, hover gris (1.7.i) */
.enlace-ancho {
  display: inline-flex; align-items: center;
  min-height: var(--tactil);
  font: 500 var(--t-12)/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--tinta);
  transition: color var(--m-150) var(--curva-mov);
}
@media (hover: hover) { .enlace-ancho:hover { color: var(--gris); } }
.enlace-ancho:active { color: var(--gris); }
/* 4.18 · estado vacío: texto de Clara centrado y su enlace */
.vacio-centrado {
  display: grid; justify-items: center; row-gap: var(--e-4);
  max-width: 520px; margin-inline: auto; padding-inline: var(--margen-texto);
  text-align: center;
}

/* ================================================================== 2.0.11 · página de texto (Studio Iron: Shipping & Returns) */
.pagina-texto {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--calle);
  padding-inline: var(--margen);
}
/* c3-7 con tope de 704, centrada (x ≈ 368 a 1.072 a 1440) */
.columna-texto { grid-column: 3 / 8; justify-self: center; width: 100%; max-width: 704px; display: grid; row-gap: var(--e-6); align-content: start; }
.seccion-texto { display: grid; row-gap: var(--e-2); }
@media (max-width: 1000px) {
  .pagina-texto { display: block; padding-inline: var(--margen-texto); }
  .columna-texto { max-width: none; }
}

/* ================================================================== 2.4 · Obras (tramo B) */
/* ≥ 621 · conteo centrado a --e-2 del H1 y LISTA · MURO a la derecha de la última columna, en la misma línea */
.cabeza-obras .linea-conteo {
  justify-self: stretch;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  margin-top: var(--e-2);
}
.cabeza-obras .conteo-centro { grid-column: 2; display: flex; align-items: center; column-gap: var(--e-4); }
.cabeza-obras .linea-conteo > .vista-sel { grid-column: 3; justify-self: end; margin-block: calc((var(--tactil) - 1.4em) / -2); }
.cabeza-obras .accion-ancha.quitar { align-items: center; margin-block: calc((var(--tactil) - 1.4em) / -2); }
.cabeza-obras .filtros { justify-self: stretch; display: grid; justify-items: center; row-gap: var(--e-2); margin-top: var(--e-4); }
/* D21 · Artista en celdas de miniatura de una columna cada una, en una fila centrada (el menú Design) */
.filtro-artista { display: flex; justify-content: center; column-gap: var(--calle); width: 100%; margin-bottom: var(--e-2); }
.celda-filtro {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--calle)) / var(--cols));
  display: grid; row-gap: var(--e-1); align-content: start;
  min-width: 0;
  text-align: center;
  color: var(--tinta);
}
.celda-filtro .lienzo { width: 100%; }
.celda-filtro .t-pie { text-wrap: balance; }
/* activa: filo grafito fijo; hover: el mismo filo, instantáneo (1.7.g) */
.celda-filtro[aria-pressed="true"] .lienzo img { outline: 1px solid var(--tinta); outline-offset: -1px; }
@media (hover: hover) { .celda-filtro:hover .lienzo img { outline: 1px solid var(--tinta); outline-offset: -1px; } }
.celda-filtro:focus-visible { outline-offset: 2px; }
/* técnica, tamaño, disponibilidad: una línea centrada por grupo, rótulo gris y opciones a --e-3 */
.filtro-linea { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: var(--e-3); }
.rotulo-filtro { color: var(--gris); }
/* a 621-1000 y con puntero grueso, cada opción mide 44 de alto: las líneas se tocan (desvío 61) */
@media (max-width: 1000px), (pointer: coarse) { .cabeza-obras .filtros { row-gap: 0; } }
/* ≤ 620 · «Filtrar» plegado con LISTA · MURO al lado; abierto, los grupos apilados y la grilla baja */
.fila-filtrar { justify-self: stretch; display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--e-4); }
.filtrar { grid-area: 1 / 1 / 2 / 3; min-width: 0; }
.filtrar > summary {
  display: flex; justify-content: center; align-items: center; column-gap: var(--e-1);
  width: 50%; min-height: var(--tactil);
  list-style: none; cursor: pointer;
}
.filtrar > summary::-webkit-details-marker { display: none; }
.filtrar > summary:focus-visible { outline-offset: -2px; }
.filtrar .signo::after { content: "+"; }
.filtrar[open] .signo::after { content: "−"; }
.fila-filtrar > .vista-sel { grid-area: 1 / 2 / 2 / 3; justify-self: center; align-self: start; min-height: var(--tactil); }
.filtrar .filtros { display: grid; row-gap: var(--e-4); padding-top: var(--e-3); text-align: left; }
.filtrar[open] .filtros { animation: aparece var(--m-300) var(--curva-mov); }
@media (max-width: 620px) {
  .filtrar .filtro-artista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--calle); row-gap: var(--e-3); margin: 0; }
  .filtrar .filtro-linea { justify-content: flex-start; padding-inline: calc(var(--margen-texto) - var(--margen)); }
  .filtrar .rotulo-filtro { flex-basis: 100%; }
  .cabeza-obras .linea-conteo { display: flex; justify-content: center; align-items: center; column-gap: var(--e-4); flex-wrap: wrap; margin-top: var(--e-2); }
  .cabeza-obras .linea-conteo .accion-ancha.quitar { margin-block: 0; }
}
/* el resultado (Lista, Muro o vacío) a --e-16 de los filtros; a 390, a --e-9 (2.4) */
.obras-resultado { padding-top: var(--e-16); }
@media (max-width: 620px) { .obras-resultado { padding-top: var(--e-9); } }

/* 2.4.1 · LISTA (Studio Iron: /art): una obra por fila; la obra a todo el ancho de c1-5 y sin tope de alto, la
   cartela en 6 / 10 a --e-9 de su borde, quieta; entre obras 2 × --e-16 */
.lista-obras { display: grid; row-gap: calc(var(--e-16) * 2); padding-inline: var(--margen); }
.fila-lista { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--calle); align-items: start; }
.lista-obra { grid-column: 1 / 6; display: block; min-width: 0; }
.lista-obra .lienzo { width: 100%; }
.lista-cartela { grid-column: 6 / 10; min-width: 0; max-width: calc(464px + var(--e-9)); padding-left: var(--e-9); }
@media (hover: hover) { .lista-obra:hover .lienzo img { outline: 1px solid var(--tinta); outline-offset: -1px; } }
/* ≤ 1000 · la obra a sangre a su proporción; la cartela centrada debajo a --e-2; --e-16 entre obras */
@media (max-width: 1000px) {
  .lista-obras { row-gap: var(--e-16); padding-inline: 0; }
  .fila-lista { display: block; }
  .lista-cartela {
    display: grid; justify-items: center;
    max-width: none; padding: var(--e-2) var(--margen-texto) 0;
    text-align: center;
  }
}

/* cartela (Lista y Ficha): ARTISTA en serif 13 → --e-2 título en itálica de 26 → --e-6 datos sin rótulo a --e-1 */
.cartela-artista { display: inline-block; color: var(--tinta); }
/* 4.26 · el enlace a la artista (ficha) mide 44 de alto a ≤ 1000 y con puntero grueso, sin mover la cartela */
@media (max-width: 1000px), (pointer: coarse) {
  a.cartela-artista { display: inline-flex; align-items: center; min-height: var(--tactil); min-width: var(--tactil); margin-block: calc((var(--tactil) - 1.2em) / -2); }
}
.lista-cartela .t-titulo-it, .ficha-cartela .t-titulo-it { margin-top: var(--e-2); }
.cartela-datos { display: grid; row-gap: var(--e-1); margin-top: var(--e-6); }
.cartela-datos .medidas { font: 400 var(--t-12)/1.5 var(--sans); font-variant-numeric: tabular-nums; }
.cartela-ver { margin-top: var(--e-6); }
@media (max-width: 1000px) { .lista-cartela .cartela-datos { justify-items: center; } }

/* ================================================================== 2.5 · Ficha de obra (tramo B) */
/* ≥ 1001 · imágenes en c1-5 a --e-9 de la cabecera, apiladas a --e-2, a todo el ancho y sin tope de alto;
   cartela en 6 / 10 con padding-left --e-9 y 464 de texto (hueco con la imagen ≈ 67 px, Studio Iron 71,5) */
.ficha {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--calle);
  align-items: start;
  padding: var(--e-9) var(--margen) 0;
}
.ficha-imagenes { grid-column: 1 / 6; display: grid; row-gap: var(--e-2); min-width: 0; }
.ficha-img .lienzo { width: 100%; }
.rotulo-img { margin-top: var(--e-1); color: var(--gris); }
.ficha-cartela { grid-column: 6 / 10; min-width: 0; max-width: calc(464px + var(--e-9)); padding-left: var(--e-9); }
/* 1.6.3 · pegada a --e-4 solo con .pega (la pone el JS si cabe entera en la ventana); en su columna, nunca sobre una foto */
.ficha-cartela.pega { position: sticky; top: calc(var(--alto-fijo) + var(--e-4)); }
.cartela-accion { margin-top: var(--e-6); }
.cartela-consultar { margin-top: var(--e-2); }
.ficha-cartela .nota-maqueta.al-tocar { margin-top: var(--e-2); }
.estados-muestra { display: none; margin-top: var(--e-4); row-gap: var(--e-1); }
body.ver-edita .estados-muestra { display: grid; }
.estados-muestra .ver { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--e-2); }
.estados-muestra a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tactil); min-width: var(--tactil); }
.estados-muestra a[aria-current="page"] { color: var(--gris); }
/* «› Cómo se compra» (Studio Iron: › SHIPPING & RETURNS) */
.como-se-compra { margin-top: var(--e-4); }
.como-se-compra > summary { display: inline-flex; align-items: center; min-height: var(--tactil); list-style: none; cursor: pointer; }
.como-se-compra > summary::-webkit-details-marker { display: none; }
.como-se-compra > div { display: grid; row-gap: var(--e-2); padding-top: var(--e-1); }
.como-se-compra[open] > div { animation: aparece var(--m-300) var(--curva-mov); }
.cartela-desc { margin-top: var(--e-6); }
.cartela-desc .t-dato { line-height: 1.55; }
.nav-ficha { display: flex; justify-content: space-between; align-items: center; column-gap: var(--e-2); margin-top: var(--e-9); }
.nav-ficha .sep { color: var(--gris); }

/* ≤ 1000 · pista pegada a la cabecera (768: c1-6, alto ≤ 70svh; 390: a sangre, alto ≤ 80svh), segmentos a --e-2 y
   la cartela debajo a --e-4 (768: c1-4; 390: --margen-texto). Nada pegado */
@media (max-width: 1000px) {
  .ficha { display: block; padding: 0; }
  .ficha-imagenes { display: block; padding-inline: var(--margen); }
  .ficha-pista { --alto-max: 70svh; }
  .ficha-pista .diapo { display: flex; justify-content: center; align-items: flex-start; scroll-snap-align: start; min-width: 0; }
  .ficha-cartela {
    max-width: none; padding: 0;
    width: calc((100% - 2 * var(--margen) - 5 * var(--calle)) / 6 * 4 + 3 * var(--calle));
    margin: var(--e-4) var(--margen) 0;
  }
}
@media (max-width: 620px) {
  .ficha-imagenes { padding-inline: 0; }
  .ficha-pista { --alto-max: 80svh; }
  .segmentos { padding-inline: var(--margen); }
  .ficha-cartela { width: auto; margin: var(--e-4) 0 0; padding-inline: var(--margen-texto); }
  /* P28: sin «·» que pueda quedar al principio de una línea */
  .nav-ficha .sep { display: none; }
}
/* paginación por segmentos (Studio Iron): barra de 2 px arriba y su rótulo debajo; 44 de alto */
.segmentos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-1); margin-top: var(--e-2); }
.segmento {
  display: grid; row-gap: var(--e-1); align-content: start;
  min-height: var(--tactil);
  text-align: left;
  color: var(--gris);
  transition: color var(--m-150) var(--curva-mov);
}
.segmento .barra { display: block; height: 2px; background-color: var(--linea); transition: background-color var(--m-300) var(--curva-mov); }
.segmento[aria-pressed="true"] { color: var(--tinta); }
.segmento[aria-pressed="true"] .barra { background-color: var(--tinta); }
@media (hover: hover) { .segmento:hover { color: var(--tinta); } }

/* ================================================================== 2.13 · Tienda (tramo B) */
.opciones-tienda { display: flex; flex-wrap: wrap; justify-content: center; column-gap: var(--e-3); margin-top: var(--e-4); }
.cabeza-tienda .conteo-obras { margin-top: var(--e-2); }
.tienda-resultado { padding-top: var(--e-16); }
.pieza-tienda { min-width: 0; }
/* 2.13.1 · el botón contorno a --e-2 bajo el pie, fuera del enlace de la tarjeta; el aviso al tocar debajo */
.accion-tienda, .pieza-tienda > .nota-maqueta { margin-top: var(--e-2); padding-inline: var(--e-1); }
@media (max-width: 620px) {
  .accion-tienda, .pieza-tienda > .nota-maqueta { text-align: center; }
  .accion-tienda .boton-contorno { display: flex; width: 100%; padding-inline: var(--e-1); }
}
.compra-tienda { padding-top: var(--e-16); }
/* la caja es una foto 4:3 recortada a 4:5 (foto de objeto, 3.1.14): el recorte se corre hacia la caja, que está a la izquierda */
.caja-tienda img { object-position: 12% 50%; }

/* ================================================================== 2.0.10 · bloque partido (tramo C) */
/* Studio Iron: los bloques de los edits y el About de diseñador. A ≥ 1001, dos mitades a sangre sin calle (1.4.3);
   la columna de texto alineada arriba con --e-9, nunca centrada en vertical, y pegada a su costado solo con .pega
   (1.6.3, D10-3), que pone el JS si cabe entera; nunca encima de la imagen */
.partido { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.partido > .mitad-imagen, .partido > .mitad-texto { grid-row: 1; min-width: 0; }
.partido.img-izq > .mitad-imagen, .partido.img-der > .mitad-texto { grid-column: 1; }
.partido.img-izq > .mitad-texto, .partido.img-der > .mitad-imagen { grid-column: 2; }
.mitad-imagen .lienzo { width: 100%; }
.mitad-texto { align-self: start; padding: var(--e-9) var(--e-4); }
@media (min-width: 1001px) { .mitad-texto.pega { position: sticky; top: calc(var(--alto-fijo) + var(--e-9)); } }
/* ≤ 1000 · todo lo partido se apila (Studio Iron: «768 se comporta como 390»): imagen a sangre a su proporción y el
   texto centrado debajo a --e-4, con --margen-texto; --e-9 solo bajo el texto. Variante «texto arriba»: el texto
   primero (--e-9 arriba y abajo, es un bloque de texto puro) y la imagen al final, que toca lo que sigue */
@media (max-width: 1000px) {
  .partido { display: flex; flex-direction: column; }
  .mitad-texto { align-self: stretch; padding: var(--e-4) var(--margen-texto) var(--e-9); }
  .partido.texto-arriba > .mitad-texto { order: -1; padding-top: var(--e-9); }
}


/* ================================================================== tramo D · piezas de los edits */
/* Studio Iron: London Design Festival, Black Metal, /events, página de evento, About y Shipping & Returns */

/* 1.2.4 · contador: Plex Mono 200 · 140 · 72, solo en Encuentro */
.t-contador {
  font: 400 var(--t-contador)/.85 var(--sans);
  letter-spacing: -.06em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* 1.2.7b · título de cada par de encuentros del Libro */
.t-pie-evento { font: 500 var(--t-12)/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; }

/* 1.4.4 · foto a sangre (banda de Ediciones, caja y cierre de Encuentro): 16:9 a ≥ 621 y 4:5 a ≤ 620, nada encima */
.foto-sangre { display: block; }
.foto-sangre .lienzo { width: 100%; aspect-ratio: 16 / 9; }
@media (max-width: 620px) { .foto-sangre .lienzo { aspect-ratio: 4 / 5; } }
a.foto-sangre:focus-visible { outline-offset: -2px; }

/* franja de 4 fotos 3:4 sin calle, a sangre (Studio Iron: los dos edits); a ≤ 620, 2 × 2 de 195 × 260 */
.franja { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.franja-celda { display: block; min-width: 0; }
.franja-celda .lienzo { aspect-ratio: 3 / 4; }
.franja-celda:focus-visible { outline-offset: -2px; }
@media (max-width: 620px) { .franja { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 2.0.10 · bloque de edit: categoría → --e-2 título en itálica de 26 → --e-2 emisor → --e-6 descripción (320) →
   --e-6 acción. A ≥ 1001, la columna a --e-6 del borde de su imagen y alineada hacia ella (Studio Iron: 36 px; a la
   derecha con el texto a la derecha); a ≤ 1000, centrada debajo de la imagen (o arriba, en el último bloque) */
.col-edit { display: grid; justify-items: start; align-content: start; width: 100%; max-width: 320px; }
.col-edit.ancha { max-width: 464px; }
.col-edit > .t-titulo-it, .col-edit > .emisor { margin-top: var(--e-2); }
.col-edit > .edit-cuerpo { justify-self: stretch; display: grid; row-gap: var(--e-2); margin-top: var(--e-6); }
.col-edit > .edit-accion { margin-top: var(--e-6); }
.col-edit.ancha > .edit-accion { justify-self: stretch; }
.edit-accion .nota-maqueta.al-tocar { margin-top: var(--e-2); }
.desc-edit { line-height: 1.55; }
.col-edit .formulario { text-align: left; }
@media (min-width: 1001px) {
  .partido.edit > .mitad-texto { display: flex; padding: var(--e-9) var(--e-6); }
  .partido.edit.img-der > .mitad-texto { justify-content: flex-end; text-align: right; }
  .partido.edit.img-der .col-edit { justify-items: end; }
}
@media (max-width: 1000px) {
  .partido.edit > .mitad-texto { display: flex; justify-content: center; text-align: center; }
  .partido.edit .col-edit { justify-items: center; }
}
@media (max-width: 620px) { .col-edit, .col-edit.ancha { max-width: none; } }

/* 2.0.12 · fila de datos: .etiqueta, datos separados por «·» gris con --e-3 a cada lado; a ≤ 620 uno por línea */
.fila-datos { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: var(--e-3); }
.fila-datos .sep { color: var(--gris); }
.fila-datos .num { font: 400 var(--t-12)/1.4 var(--sans); letter-spacing: .12em; font-variant-numeric: tabular-nums; }
@media (max-width: 620px) {
  .fila-datos { flex-direction: column; align-items: center; row-gap: var(--e-1); }
  .fila-datos .sep { display: none; }
}

/* bajada de un H1 centrado (1.2.8b, 1.2.15: 520 centrada a ≥ 621; --margen-texto a ≤ 620) */
.bajada-centrada { max-width: 520px; margin-top: var(--e-4); }
.volver-centrado { margin-top: var(--e-4); }
@media (max-width: 620px) {
  .cabeza-texto-centrado { padding-inline: var(--margen-texto); }
  .bajada-centrada { max-width: none; }
}

/* 4.7 / 4.8 · campos de línea: texto 16, sin caja ni fondo, borde inferior gris; foco y error: 2 px grafito */
.formulario { display: grid; row-gap: var(--e-3); min-width: 0; align-content: start; }
.campo { display: grid; row-gap: var(--e-1); min-width: 0; align-content: start; }
.campo > label { color: var(--gris); }
.campo input, .campo textarea {
  display: block; width: 100%; min-width: 0;
  min-height: var(--tactil);
  padding: var(--e-2) 0;
  font: 400 var(--t-16)/1.5 var(--sans);
  color: var(--tinta);
  background-color: transparent;
  border: 0; border-bottom: 1px solid var(--gris); border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.campo textarea { min-height: calc(var(--tactil) * 2); resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo [aria-invalid="true"] { border-bottom: 2px solid var(--tinta); margin-bottom: -1px; }
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--tinta); outline-offset: 3px; }
.campo .ayuda { color: var(--gris); }
.formulario .error { color: var(--tinta); }
/* el campo de línea con su acción dentro, a la derecha (el pie de Studio Iron: «… SUBSCRIBE →») */
.linea-campo { display: flex; align-items: stretch; column-gap: var(--e-2); border-bottom: 1px solid var(--gris); }
.linea-campo input, .linea-campo input:focus { flex: 1; border-bottom: 0; margin-bottom: 0; }
.linea-campo:focus-within { border-bottom: 2px solid var(--tinta); margin-bottom: -1px; }
.linea-campo button {
  flex: none; display: inline-flex; align-items: center; column-gap: var(--e-1);
  min-height: var(--tactil); min-width: var(--tactil);
  color: var(--tinta);
  transition: color var(--m-150) var(--curva-mov);
}
@media (hover: hover) { .linea-campo button:hover { color: var(--gris); } }
.linea-campo button:active { color: var(--gris); }
/* 4.12 · chip de la obra cargada: Archivo 500 14 y «Quitar» en chico, borde 1 px grafito */
.chip {
  display: flex; align-items: center; justify-content: space-between; column-gap: var(--e-2);
  padding-left: var(--e-2);
  font: 400 var(--t-14)/1.3 var(--sans);
  border: 1px solid var(--tinta);
}
.chip-quitar { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: var(--tactil); min-width: var(--tactil); padding-inline: var(--e-2); }
.correo { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* 4.13 / 2.8 fila 8 · preguntas plegadas: borde superior --linea, resumen Archivo 500 14 de 48, «+» / «−» */
.plegable { border-top: 1px solid var(--linea); }
.plegable > summary {
  display: flex; justify-content: space-between; align-items: center; column-gap: var(--e-2);
  min-height: 48px;
  font: 500 var(--t-14)/1.4 var(--sans);
  cursor: pointer;
  list-style: none;
}
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary::after { content: "+"; flex: none; font: 500 var(--t-12)/1 var(--sans); }
.plegable[open] > summary::after { content: "−"; }
@media (hover: hover) { .plegable > summary:hover > span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } }
.plegable > .respuesta { padding-bottom: var(--e-2); }
.plegable[open] > .respuesta { animation: aparece var(--m-300) var(--curva-mov); }

/* ================================================================== 2.6 · Ediciones (Studio Iron: Black Metal) */
.franja-ediciones { margin-top: var(--e-16); }

/* ================================================================== 2.7 · Edición (la ficha de /art) */
.cartela-edicion .cartela-tipo { margin-top: var(--e-4); }
.cartela-edicion .cartela-emisor { margin-top: var(--e-2); }
.segmentos.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.edicion-pista .diapo { align-items: center; }

/* ================================================================== 2.8 · Encuentro (Studio Iron: London Design Festival) */
/* filas 1 y 2 · contador centrado en la ventana; el enlace vertical ocupa los últimos 44 px de la última columna */
.cabeza-encuentro {
  display: grid;
  grid-template-columns: var(--tactil) minmax(0, 1fr) var(--tactil);
  align-items: start;
  padding: var(--vacio-arriba) var(--margen) 0;
}
.contador-bloque { grid-column: 2; grid-row: 1; display: grid; justify-items: center; text-align: center; min-width: 0; }
.contador-bloque h1 { display: grid; justify-items: center; row-gap: var(--e-2); font: inherit; }
/* --e-2 medido desde la tinta: la «/» de Plex Mono baja .138em de la línea base y la caja de .85 solo deja .05em
   (medido en Chrome, 6-oct): se le suma .09 del contador (desvío 91) */
.contador-bloque .bajo-contador { margin-top: calc(var(--e-2) + var(--t-contador) * .09); }
.vertical {
  grid-column: 3; grid-row: 1;
  display: flex; justify-content: center; align-items: flex-start;
  width: var(--tactil); min-height: var(--tactil);
  margin-top: calc(var(--t-12) * 1.4 + var(--e-2));   /* arriba, alineado con el contador */
  color: var(--tinta);
  transition: color var(--m-150) var(--curva-mov);
}
.vertical-texto {
  writing-mode: vertical-rl;
  font: 500 var(--t-12)/1.4 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* 1.7.f en vertical: la línea crece de arriba abajo, en el sentido de la lectura */
.vertical .subraya { background-position: 0 0; background-size: 1px 0%; }
.vertical:focus-visible .subraya { background-size: 1px 100%; transition: none; }
@media (hover: hover) { .vertical:hover .subraya { background-size: 1px 100%; } }
.vertical:active { color: var(--gris); }
.foto-caja { margin-top: var(--e-9); }
/* fila 4 · Qué es: texto puro centrado de 520, --e-9 arriba y abajo; el enlace a --e-4 */
.texto-puro { display: grid; justify-items: center; row-gap: var(--e-4); padding: var(--e-9) var(--margen-texto); text-align: center; }
.texto-puro > .t-texto { max-width: 520px; }
/* filas 8 y 9 · preguntas (página de texto como bloque: --e-9 arriba y abajo) y la fila de acción a --e-6 */
.preguntas { padding-block: var(--e-9); }
.plegables { display: grid; }

/* ================================================================== 2.9 · Activar */
.pagina-activar, .pagina-contacto { padding-top: var(--vacio-arriba); }
.cabeza-texto { display: grid; justify-items: start; }
.cabeza-texto > h1 { margin-top: var(--e-4); }
.cabeza-texto > .nota-maqueta { margin-top: var(--e-2); }
.opcion-1 { margin-top: var(--e-9); }
/* la caja está a la izquierda de su foto 4:3: el recorte 1:1 se corre hacia ella (como en Tienda, desvío 72) */
.caja-cuadrada img { object-position: 0% 50%; }

/* ================================================================== 2.10 · Libro (Studio Iron: /events) */
.contador-libro { margin-top: var(--e-3); }
/* D19 · el mapa de 369 en 41 × 9, en c1-9; calle 3 · 2 · 1 px; casilla vacía con borde gris (3:1, M22) */
.mapa-bloque { display: grid; justify-items: center; row-gap: var(--e-2); margin-top: var(--e-9); padding-inline: var(--margen); }
.mapa-bloque .nota-maqueta { text-align: center; }
.mapa369 { width: 100%; display: grid; grid-template-columns: repeat(41, minmax(0, 1fr)); gap: 3px; }
@media (max-width: 1000px) { .mapa369 { gap: 2px; } }
@media (max-width: 620px) { .mapa369 { gap: 1px; } }
.casilla {
  aspect-ratio: 1; min-width: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gris);
  font: 500 var(--t-12)/1 var(--sans); letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--gris);
}
.casilla.activa { background-color: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
/* el número solo donde la casilla mide ≥ 28 px: desde 1.300 de ventana (2.10 fila 2) */
.casilla > span { display: none; }
@media (min-width: 1300px) { .casilla > span { display: block; } }
/* 1.7.q · casilla activa con puntero fino: se invierte */
a.casilla { transition: background-color var(--m-150) var(--curva-mov), color var(--m-150) var(--curva-mov); }
@media (hover: hover) { a.casilla:hover { background-color: var(--blanco); color: var(--tinta); } }
/* filas 4 y 5 · el 007 destacado a sangre y los otros seis en dos columnas de 684 × 456 (Studio Iron exacto) */
.activados-libro { margin-top: var(--e-16); }
.destacado-img, .par-img { display: block; }
.destacado-img .lienzo, .par-img .lienzo { aspect-ratio: 3 / 2; }
.destacado-texto { display: grid; justify-items: start; row-gap: var(--e-2); margin-top: var(--e-3); padding-inline: var(--margen); }
.destacado-texto .fila-datos { justify-content: flex-start; }
.pares { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); margin-top: var(--e-4); padding-inline: var(--e-4); }
.par { min-width: 0; }
.par .t-pie-evento { margin-top: var(--e-2); }
.par-lugar { margin-top: var(--e-1); }
/* 4.26 · los títulos enlazados miden 44 de alto a ≤ 1000 y con puntero grueso, sin mover el texto */
@media (max-width: 1000px), (pointer: coarse) {
  .destacado-texto h2 a, .par .t-pie-evento a { display: inline-flex; align-items: center; min-height: var(--tactil); margin-block: calc((var(--tactil) - 1lh) / -2); }
}
@media (max-width: 1000px) {
  .destacado-texto { justify-items: center; text-align: center; padding-inline: var(--margen-texto); }
  .destacado-texto .fila-datos { justify-content: center; }
  .pares { grid-template-columns: minmax(0, 1fr); padding-inline: 0; }
  .par { text-align: center; }
  .par .t-pie-evento, .par-lugar { padding-inline: var(--margen-texto); }
}

/* ================================================================== 2.11 · Encuentro activado (Studio Iron: página de evento) */
.cabeza-activado .datos-activado, .cabeza-activado .desc-activado { margin-top: var(--e-3); }
.foto-sangre.foto-activado { margin-top: var(--e-16); }
.foto-sangre.foto-activado .lienzo { aspect-ratio: 3 / 2; }
@media (max-width: 1000px) { .foto-sangre.foto-activado .lienzo { aspect-ratio: 5 / 4; } }
/* fila 4 · otros encuentros: fila de alto fijo con cada registro a su 4:3, sin recorte; la activa al centro */
.otros-encuentros { display: grid; margin-top: var(--e-9); }
.otros-encuentros > h2 { text-align: center; padding-inline: var(--margen-texto); }
.otros-pista {
  --alto-otro: 500px;
  --ancho-otro: calc(var(--alto-otro) * 4 / 3);
  display: flex; column-gap: var(--calle);
  margin-top: var(--e-4);
  padding-inline: calc((100% - var(--ancho-otro)) / 2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.otros-pista::-webkit-scrollbar { display: none; }
.otros-pista:focus-visible, .otro:focus-visible { outline-offset: -2px; }
.otro { flex: 0 0 var(--ancho-otro); min-width: 0; scroll-snap-align: center; }
.otro .lienzo { aspect-ratio: 4 / 3; }
@media (max-width: 1000px) { .otros-pista { --alto-otro: 360px; } }
@media (max-width: 620px) { .otros-pista { --ancho-otro: 280px; } }
.otros-controles { display: flex; justify-content: center; align-items: center; column-gap: var(--e-2); margin-top: var(--e-2); }
.otros-controles .num { white-space: nowrap; }
.flecha-texto {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tactil); min-height: var(--tactil);
  font: 500 var(--t-12)/1.4 var(--sans);
  color: var(--tinta);
  transition: color var(--m-150) var(--curva-mov);
}
.flecha-texto[aria-disabled="true"] { color: var(--gris); cursor: default; }
@media (hover: hover) { .flecha-texto:not([aria-disabled="true"]):hover { color: var(--gris); } }
.volver-centrado.volver-libro { margin-top: var(--e-9); text-align: center; }

/* ================================================================== 2.12 · Acerca (Studio Iron: /pages/about) */
/* a ≥ 1001: mitades a sangre pegadas a la cabecera; la columna con --e-9 a los lados (≈ 612) y arriba, justificada;
   a ≤ 1000: la imagen a sangre y el texto debajo a --e-6, alineado a la izquierda, que termina a --e-16 del pie */
.acerca-enunciado { margin-top: var(--e-4); }
.tres-palabras { display: grid; margin-top: var(--e-9); }
.col-acerca > .nota-maqueta { margin-top: var(--e-2); }
.col-acerca > .acerca-p, .acerca-sec { margin-top: var(--e-6); }
.acerca-sec { display: grid; row-gap: var(--e-2); }
.acerca-enlace { margin-top: var(--e-9); }
@media (min-width: 1001px) {
  .acerca-partido > .mitad-texto { padding: var(--e-9); }
  .col-acerca .justifica { text-align: justify; text-indent: 2.25em; }
}
@media (max-width: 1000px) { .acerca-partido > .mitad-texto { padding: var(--e-6) var(--margen-texto) var(--e-16); } }
@media (max-width: 620px) { .acerca-p { font-size: var(--t-16); line-height: 1.5; } }   /* 1.2.8: 16/1,5 en Acerca */

/* ================================================================== 2.14 · Contacto · 2.15 · 404 */
.no-existe { display: grid; justify-items: center; text-align: center; padding: var(--e-16) var(--margen-texto) 0; }
.no-ver { margin-top: var(--e-6); }
.no-inicio { margin-top: var(--e-4); }

/* ================================================================== v3 · tramo 2 · Artistas, Artista, Obras, Ficha y Tienda
   (spec 3.1: 2.0.9, 2.2, 2.3, 2.4, 2.5, 2.13, 1.7.n). Va al final y pisa lo que venía de la 2.1 para estas vistas. */

/* 1.7.n · al filtrar, la grilla baja a .4 en --m-200 y vuelve */
.obras-resultado, .tienda-resultado { transition: opacity var(--m-200) var(--curva-mov); }
.obras-resultado.filtrando, .tienda-resultado.filtrando { opacity: .4; }

/* 2.0.9 · bloque partido centrado: la columna al medio de su mitad y, con .pega (JS), pegada al centro de la ventana */
.partido.centrado > .mitad-texto { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: var(--e-9) var(--e-4); }
.partido.centrado > .mitad-texto.pega { position: static; }
.partido.centrado .col-pega { width: 100%; max-width: 520px; margin-inline: auto; display: grid; justify-items: center; text-align: center; }
@media (min-width: 1001px) { .partido.centrado > .mitad-texto.pega > .col-pega { position: sticky; } }
@media (max-width: 1000px) {
  .partido.centrado > .mitad-texto { padding: var(--e-4) var(--margen-texto) var(--e-9); }
  .partido.centrado.texto-arriba > .mitad-texto { padding-top: var(--e-9); }
}

/* ================================================================== 2.2 · Artistas a la Kurimanzutto (13-oct)
   Medido en kurimanzutto.com/es/artistas (la referencia de Artistas que eligió María): una obra por artista en 4:3,
   el nombre a 15 de la foto (20/26) y 45 hasta la fila siguiente. 1440: 4 columnas, 35 de margen y 23 de calle;
   ≤ 1199: 20 y 16; ≤ 800: 2 columnas con 36 de calle; ≤ 480: una columna. Tipografía y color, los del sitio. */
:root { --k-margen: var(--margen); --k-calle: 23px; }   /* v5 · el mismo margen que el logo (antes 35 y 20) */
@media (max-width: 1199px) { :root { --k-calle: 16px; } }
@media (max-width: 800px) { :root { --k-calle: 36px; } }
.artistas-k { padding-block: var(--e-9) var(--e-16); }
.grilla-k {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--k-calle); row-gap: 45px; align-items: start;
  padding-inline: var(--k-margen);
}
@media (max-width: 800px) { .grilla-k { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .grilla-k { grid-template-columns: minmax(0, 1fr); } }
.tarjeta-k { display: block; min-width: 0; color: var(--tinta); }
.tarjeta-k .lienzo { width: 100%; }
.nombre-k { display: block; margin-top: 15px; font: 400 var(--t-20)/26px var(--sans); }
/* v4 · 15.3 · variante «Nombre: logo»: el nombre en Josefin Sans como «MÓDULO 369» del logo, en mayúscula espaciada y
   cerca del peso 350 del trazado; más chico que el de Jost, porque la mayúscula espaciada ocupa casi el doble */
html[data-nombre="logo"] .nombre-k { font: 350 var(--t-16)/26px var(--letra-logo); letter-spacing: .3em; text-transform: uppercase; }
.tarjeta-k:focus-visible { outline-offset: 2px; }

/* 2.4 · Obras: los tres grupos de texto en una línea que se parte; Lista con la cartela de Studio Iron T08 */
.filtros-texto { display: flex; flex-wrap: wrap; justify-content: center; column-gap: var(--e-6); row-gap: var(--e-1); }
@media (max-width: 620px) { .filtrar .filtros-texto { display: grid; row-gap: var(--e-4); } }
.lista-cartela .t-italica { margin-top: var(--e-2); }
/* v4 · 15.4 · en Obras la letra sube un paso más que en el resto (tarjetas, pies, filtros, cartelas): la escala chica se
   corre de nuevo solo aquí; el título de la página no cambia */
.cabeza-obras, .obras-resultado { --t-10: 12px; --t-11: 13px; --t-12: 14px; --t-13: 15px; --t-14: 16px; --t-15: 17px; --t-16: 18px; }
/* con ese paso, entre 621 y 1000 el autor (mayúscula espaciada, sin partir) se comía el pie de la tarjeta y el título
   quedaba en dos o tres renglones: ahí el autor va debajo del título, como a ≤ 620 pero alineado a la izquierda */
@media (min-width: 621px) and (max-width: 1000px) {
  .obras-resultado .tarjeta .pie-tarjeta { flex-direction: column; align-items: flex-start; row-gap: var(--e-1); }
  .obras-resultado .pie-tarjeta .autor { text-align: left; }
}
/* v4 · 15.9 · filtros de Obras a todo el ancho (María: «la sección de búsqueda»). ≥ 621 dejan de ir centrados en el
   medio: son una franja de margen a margen, entre dos rayas, en la retícula. Cada grupo es una columna con su rótulo
   arriba y sus opciones debajo, de izquierda a derecha. ≥ 1001: Artista en 1-3 (una miniatura por columna, como antes),
   Técnica en 4-5, Tamaño en 6-7 y Disponibilidad en 8-9. 621 a 1000: Artista y Técnica arriba, Tamaño y
   Disponibilidad debajo, en 1-3 y 4-6. La lógica de los filtros (decisión 7) no cambia. ≤ 620 sigue el «Filtrar»
   plegado, que ya va a todo el ancho */
@media (min-width: 621px) {
  .cabeza-obras > .filtros {
    display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--calle); row-gap: var(--e-6);
    justify-items: stretch; align-items: start;
    margin-top: var(--e-6); padding-block: var(--e-4) var(--e-6);
    border-block: 1px solid var(--linea);
    text-align: left;
  }
  .cabeza-obras > .filtros .filtros-texto { display: contents; }
  .cabeza-obras > .filtros .filtro-artista {
    grid-column: 1 / 4;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--calle); row-gap: var(--e-2);
    margin: 0;
  }
  .cabeza-obras > .filtros .filtro-artista > .rotulo-filtro { grid-column: 1 / -1; }
  .cabeza-obras > .filtros .filtro-linea { justify-content: flex-start; column-gap: var(--e-4); row-gap: var(--e-1); }
  .cabeza-obras > .filtros .rotulo-filtro { flex-basis: 100%; margin-bottom: var(--e-1); }
  .cabeza-obras > .filtros .filtro-linea[aria-labelledby="g-tecnica"] { grid-column: 4 / 6; }
  .cabeza-obras > .filtros .filtro-linea[aria-labelledby="g-tam"] { grid-column: 6 / 8; }
  .cabeza-obras > .filtros .filtro-linea[aria-labelledby="g-estado"] { grid-column: 8 / 10; }
}
@media (min-width: 621px) and (max-width: 1000px), (min-width: 621px) and (pointer: coarse) {
  .cabeza-obras > .filtros .filtro-linea { row-gap: 0; }
  .cabeza-obras > .filtros .rotulo-filtro { margin-bottom: 0; }
}
@media (min-width: 621px) and (max-width: 1000px) {
  .cabeza-obras > .filtros .filtro-linea[aria-labelledby="g-tecnica"] { grid-column: 4 / 7; }
  .cabeza-obras > .filtros .filtro-linea[aria-labelledby="g-tam"] { grid-column: 1 / 4; }
  .cabeza-obras > .filtros .filtro-linea[aria-labelledby="g-estado"] { grid-column: 4 / 7; }
}
/* ≤ 620 · el rótulo nuevo de Artista, sobre sus tres miniaturas como los otros grupos */
@media (max-width: 620px) { .filtrar .filtro-artista > .rotulo-filtro { grid-column: 1 / -1; padding-inline: calc(var(--margen-texto) - var(--margen)); } }
.cartela-datos { row-gap: 0; }
.cartela-datos .medidas { font: inherit; font-variant-numeric: normal; }   /* 1.2.32: sans 13, cifras proporcionales */

/* 2.5 · Ficha: cartela de 6 (ARTISTA → --e-2 H1 → --e-4 datos → --e-6 botón-fila → --e-2 Consultar → --e-4 Cómo se compra) */
.ficha-cartela h1.t-italica { margin-top: var(--e-2); }
.ficha-cartela .cartela-datos { margin-top: var(--e-4); }
.ficha-img .rotulo-img { margin-top: var(--e-1); }
/* D24 · a ≤ 1000: la general a sangre pegada a la cabecera → la cartela → los detalles y la foto de espacio a sangre */
@media (max-width: 1000px) {
  .ficha:not(.edicion) { display: block; padding: 0; }
  .ficha:not(.edicion) .ficha-imagenes { display: block; padding: 0; }
  .ficha:not(.edicion) .ficha-cartela { width: auto; max-width: none; margin: var(--e-4) 0 0; padding: 0 var(--margen-texto); }
  .ficha-mas { display: grid; row-gap: var(--e-2); margin-top: var(--e-6); }
  .ficha-mas .rotulo-img { padding-inline: var(--margen-texto); }
}

/* 2.13 · Tienda: «Cómo se compra» en un bloque partido junto a la foto 2:3 */
.bloque-compra { margin-top: var(--e-9); }
.partido.centrado .col-compra { display: grid; row-gap: var(--e-4); justify-items: stretch; width: 100%; max-width: 464px; text-align: left; }
.seccion-compra { display: grid; row-gap: var(--e-1); }
details.seccion-compra { border-top: 1px solid var(--linea); }
details.seccion-compra > summary { display: flex; justify-content: space-between; align-items: center; min-height: 48px; list-style: none; cursor: pointer; }
details.seccion-compra > summary::-webkit-details-marker { display: none; }
details.seccion-compra .signo::after { content: "+"; font: 500 var(--t-16)/1 var(--sans); }
details.seccion-compra[open] .signo::after { content: "−"; }
details.seccion-compra[open] > p { padding-bottom: var(--e-3); animation: aparece var(--m-200) var(--curva-mov); }
@media (max-width: 620px) { .partido.centrado .col-compra { row-gap: 0; } .col-compra > .etiqueta-ancha, .col-compra > section.seccion-compra { margin-bottom: var(--e-4); } }

/* ================================================================== v3 · tramo 3 · Encuentro, Activar, Libro, encuentro activado,
   Ediciones, Edición, Acerca, Contacto, 404 y la capa (spec 3.1, 2.6 a 2.15 y 9.2) */

/* 2.0.9 · bloque partido centrado: rótulo → --e-2 título en itálica → --e-2 emisor → --e-4 texto (320) → --e-6 acción */
.bloque-c .col-pega > .t-italica, .bloque-c .col-pega > .emisor { margin-top: var(--e-2); }
.bloque-c .c-cuerpo { margin-top: var(--e-4); max-width: 320px; }
.bloque-c .c-accion { margin-top: var(--e-6); }
.enlace-img { display: block; }
.enlace-img:focus-visible { outline-offset: -2px; }

/* 2.8 · Encuentro: la sala a sangre con «Encuentro» encima (D15), estático, en --blanco; a ≤ 1000 sobre .velo-pie */
.apertura-encuentro { position: relative; }
.apertura-encuentro .lienzo { width: 100%; aspect-ratio: 3 / 2; }
.apertura-encuentro > h1 {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding-inline: var(--margen); text-align: center;
  color: var(--blanco); pointer-events: none;
}
.apertura-encuentro > .velo { display: none; }
@media (max-width: 1000px) {
  .apertura-encuentro .lienzo { aspect-ratio: 4 / 5; }
  .apertura-encuentro > .velo { display: block; position: absolute; inset: 0; background-image: linear-gradient(to top, var(--velo-desde), var(--velo-hasta)); pointer-events: none; }
}
.intro-encuentro { row-gap: var(--e-3); }
.intro-encuentro > p { max-width: 520px; }
.cabeza-encuentro { padding: var(--e-9) var(--margen); }
.contador-bloque { row-gap: var(--e-2); }
.t-contador { font: 400 var(--t-contador)/.85 var(--serif); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.vertical { margin-top: calc(var(--t-12) * 1.5 + var(--e-2)); }
.franja.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 620px) {
  .franja.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .franja.tres > :first-child { grid-column: 1 / -1; }
}
.col-preguntas { display: grid; width: 100%; max-width: 464px; text-align: left; }
.col-preguntas > .plegables { margin-top: var(--e-4); }
.col-preguntas > .fila-accion { margin-top: var(--e-6); }

/* 2.10 · Libro: primero la fotografía; el mapa más abajo, con la miniatura de su registro en las casillas activas */
.activados-libro { margin-top: var(--e-9); }
.mapa-bloque { margin-top: var(--e-16); row-gap: var(--e-4); }
.casilla.con-foto { padding: 0; border: 0; background: none; }
.casilla.con-foto > .lienzo { display: block; width: 100%; height: 100%; }
@media (hover: hover) { a.casilla.con-foto:hover { background: none; outline: 1px solid var(--tinta); outline-offset: 1px; } }

/* 2.11 · otros encuentros: alto fijo, cada foto a su ancho natural; a ≤ 620, caja de 280 × 210 */
.otros-encuentros > h2 { text-align: center; }
.otros-pista { padding-inline: var(--margen); scroll-snap-type: none; }
.otro { flex: 0 0 auto; height: var(--alto-otro); }
.otro .lienzo.natural { width: auto; height: 100%; aspect-ratio: var(--ar); }
@media (max-width: 620px) {
  .otro { height: 210px; }
  .otro .lienzo.natural { width: 280px; aspect-ratio: auto; }
  .otro .lienzo.natural img { object-fit: cover; }
}

/* 2.6 · Ediciones */
.cabeza-ediciones { padding-bottom: var(--vacio-arriba); }
.fila-edicion .lienzo { aspect-ratio: 3 / 4; }

/* 2.7 · Edición: descripción en dos líneas con «Leer más» */
.leer-mas { margin-top: var(--e-4); }
.recorta { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.leer-boton { display: inline-flex; align-items: center; color: var(--tinta); }
@media (max-width: 1000px), (pointer: coarse) { .leer-boton { min-height: var(--tactil); } }

/* 2.12 · Acerca: columna de 600 centrada en la ventana, titular a 36 alineado a la izquierda, párrafos justificados */
.partido.acerca-partido .col-pega { max-width: 600px; justify-items: start; text-align: left; }
.acerca-titular { font-size: var(--t-36); text-align: left; }
.col-acerca > .acerca-p + .acerca-p { margin-top: var(--e-3); }
@media (min-width: 1001px) {
  .partido.acerca-partido > .mitad-texto { padding-inline: var(--e-9); }
  .col-acerca .justifica { text-indent: 0; }
}
@media (max-width: 1000px) { .partido.acerca-partido > .mitad-texto { padding: var(--e-6) var(--margen-texto) var(--e-16); } }

/* 5.7 · campos sobre --superficie: etiqueta en sans 12 gris dentro de la caja, arriba; alto 54; texto 16 */
.campo { position: relative; row-gap: var(--e-1); }
.campo > .etiqueta-campo {
  position: absolute; top: var(--e-1); left: var(--e-2); right: var(--e-2);
  font: 400 var(--t-12)/1.5 var(--sans); color: var(--gris);
  pointer-events: none;
}
.campo input, .campo textarea {
  min-height: 54px;
  padding: 24px var(--e-2) var(--e-1);
  font: 400 var(--t-16)/1.4 var(--sans);
  background-color: var(--superficie);
  border-bottom: 1px solid var(--linea-campo);
}
.campo textarea { min-height: 108px; }
.campo input:focus, .campo textarea:focus { border-bottom: 1px solid var(--tinta); margin-bottom: 0; outline: 2px solid var(--tinta); outline-offset: 2px; }
.campo [aria-invalid="true"] { border-bottom: 2px solid var(--tinta); margin-bottom: -1px; }

/* 2.14 · Contacto: una sola sección; chip de la obra cargada (Studio Iron Enquire) y los datos como SUPPORT */
.pagina-contacto .formulario { margin-top: var(--e-6); }
.chip { align-items: center; justify-content: flex-start; column-gap: var(--e-3); padding: 0; border: 0; font: inherit; }
.chip-img { flex: none; width: 60px; height: 60px; background-color: var(--superficie); }
.chip-img .lienzo { width: 60px; height: 60px; }
.chip-texto { flex: 1; min-width: 0; display: grid; row-gap: var(--e-1); }
.chip-titulo { font: 400 var(--t-14)/1.3 var(--sans); }
.chip-quitar { font: 500 var(--t-12)/1.5 var(--sans); }
.datos-contacto { display: grid; row-gap: var(--e-4); margin-top: var(--e-9); }
.datos-contacto dt { margin-bottom: var(--e-1); }

/* 2.15 · 404: bloque centrado en la ventana; titular de 680 como mucho a ≥ 1001 */
.no-existe { min-height: 70svh; align-content: center; padding: var(--e-16) var(--margen-texto); }
.t-404 { font: 400 7.6vw/.95 var(--serif); letter-spacing: -.01em; text-wrap: balance; max-width: 680px; }
@media (max-width: 1000px) { .t-404 { font-size: 9vw; max-width: none; } }
@media (max-width: 620px) { .t-404 { font-size: 12vw; } }
.no-linea { margin-top: var(--e-3); font: 400 var(--t-14)/1.5 var(--sans); }
.no-enlaces { display: flex; flex-wrap: wrap; justify-content: center; column-gap: var(--e-6); margin-top: var(--e-6); }

/* 9.2 · «Lo editas tú»: toda foto marcada en su caja (no en el <img>), con su crédito corto */
.credito-capa { display: none; }
body.ver-edita .lienzo.con-credito { outline: 1px dashed var(--tinta); outline-offset: -1px; }
body.ver-edita .credito-capa {
  display: block; position: absolute; top: 0; left: 0; z-index: 2;
  max-width: 100%; padding: var(--e-1) var(--e-2);
  font: 500 var(--t-12)/1.5 var(--sans); letter-spacing: 0; text-transform: none; text-align: left;
  color: var(--blanco); background-color: var(--tinta);
}
/* M32 · centrado y sin velo, «Encuentro» quedaba en 10,8 % de píxeles legibles sobre la mesa clara de E-AP (vara: 90 %):
   a ≥ 1001 se alinea a c1 sobre .velo-lado, como pide 2.8 #1 (desvios v3, tramo 3) */
@media (min-width: 1001px) {
  .apertura-encuentro > h1 { justify-content: flex-start; padding-left: calc(var(--margen) + var(--e-4)); }
  .apertura-encuentro > .velo {
    display: block; position: absolute; inset-block: 0; left: 0; width: 55%;
    background-image: linear-gradient(to right, var(--velo-desde), var(--velo-hasta)); pointer-events: none;
  }
}

/* ================================================================== 2.3 · Artista a la Perrotin (13-oct)
   referentes/perrotin/spec-artista.md, con sus correcciones «(crítica)». Las medidas de armado de Perrotin van tal cual
   en los tokens --pa-* (en :root); la tipografía y el color se traducen a los del sitio (tablas 0.4 y 0.5): Noto Serif
   Display 400 recta en caja normal para lo grande, Jost 500 en mayúscula espaciada para rótulos y botones, Jost 400 para
   leer, sin itálica; crema, --superficie y la banda negra del pie. Los números R… son los roles de la tabla 0.4.
   Movimiento (tabla 2.0 de la spec): cada transición va en su regla marcada «M…», con sus duraciones y curvas medidas;
   lo que necesita medir antes de moverse (el FLIP del mosaico, M9/M10; el arrastre de los carriles, M17; el fundido de
   Videos, M14) lo dispara app.js con estas mismas reglas. Con movimiento reducido, todo en seco (regla global de 1.7). */

/* sin margen entre secciones: todo el aire es su padding (64 + 64 = 128 entre dos crema seguidas). La última sección
   (64) y el padding-bottom de main (96) dan los 160 de Perrotin hasta el pie */
.pa { position: relative; }
.pa-sec { padding: var(--pa-sec) var(--pa-margen); }
.sin-corte { white-space: nowrap; }   /* 3.2 · el rango de fechas solo se parte en el guion */
.pa :focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.pa-galeria :focus-visible, .pa-videos :focus-visible, .pa-panel :focus-visible { outline-color: var(--blanco); }   /* sobre negro */

/* R3 · títulos de sección y rótulos: .t-rotulo (Jost 500, 12/1,5, 0,16 em); 11 a ≤ 620 */
@media (max-width: 620px) { .pa .t-rotulo, .pa-panel .t-rotulo { font-size: var(--t-11); } }
/* R6 · píldora: borde 1 px, radio 16 (25 en Videos), sin paréntesis (crítica) */
.pa-pildora, .pa-video-pildora {
  display: inline-block; flex: none;
  border: 1px solid currentColor; border-radius: 16px; padding: 2px 6px 1px;
  font: 500 var(--t-11)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
}
/* R23 · enlace con flecha delante («→ VER LA OBRA») */
.pa-enlace { display: inline-block; font: 500 var(--t-12)/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta); white-space: nowrap; }
@media (max-width: 620px) { .pa-enlace { font-size: var(--t-11); } }
/* «›» de las filas, la barra y el visor: Jost 500 13, girado según el estado */
.pa-signo { display: inline-block; flex: none; font: 500 var(--t-13)/1 var(--sans); }

/* 1.0.1 · encabezado de sección: título | centro | flechas; raya 1 px a 16 del título y 32 hasta el contenido */
.pa-titulo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 32px; align-items: center;
  padding-bottom: var(--pa-titulo-raya);
  border-bottom: 1px solid var(--linea);
  margin-bottom: var(--pa-raya-contenido);
}
.pa-titulo > h2 { grid-column: 1; color: var(--tinta); }
/* el centro en flex (corrección E1/C2): en bloque armaba una caja de línea con el interlineado del cuerpo (23,25) y el
   encabezado de Ediciones medía 40,3 en vez de 35. En flex mide lo que su enlace, 18 (16,5 a ≤ 620), igual que el h2 */
.pa-titulo > .pa-centro { grid-column: 2; justify-self: center; display: flex; }
.pa-titulo > .pa-flechas { grid-column: 3; justify-self: end; display: flex; column-gap: 24px; }
.pa-titulo > .pa-flechas[hidden] { display: none; }
/* ≤ 620 no hay flechas: el título usa el ancho y el centro (Ediciones) pasa a la derecha. Desvío deliberado de 1.9
   (QA C2): centrado, «→ Ver todas las ediciones» (201 px) dejaba 46,5 para «EDICIONES», que no cabe */
@media (max-width: 620px) {
  .pa-titulo { grid-template-columns: minmax(0, 1fr) auto; }
  .pa-titulo > .pa-centro { justify-self: end; }
}
/* flechas sin borde ni hover; deshabilitada: .4 y not-allowed. Con puntero grueso o ≤ 1000, área de 44 sin mover la raya */
.pa-flecha { position: relative; display: inline-flex; align-items: center; justify-content: center; font: 500 var(--t-13)/1 var(--sans); color: inherit; }
.pa-flecha[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
/* 7.4 · 49: con 24 entre glifos de 13, cada flecha crece 12 hacia la otra y 19 hacia afuera: 44 × 44 sin pisarse */
@media (max-width: 1000px), (pointer: coarse) {
  .pa-flecha::after { content: ""; position: absolute; inset: -15px -12px -16px -19px; }
  .pa-flecha[data-sig]::after { inset: -15px -19px -16px -12px; }
}

/* 1.0.2 · carril: grilla quieta si todo cabe (--cols-g columnas) o carrusel con la fórmula de Swiper (--spv por vista);
   bajo 1280 el carrusel sale a sangre (--sangre = el margen) para que la ficha que asoma llegue al borde de la pantalla */
.pa-carril { --spv: 3; --cols-g: 3; --calle: 16px; --sangre: var(--pa-margen); min-width: 0; }
.pa-carril.es-grilla { display: grid; grid-template-columns: repeat(var(--cols-g), minmax(0, 1fr)); column-gap: var(--calle); align-items: start; }
/* (corrección MOV2-02) 4 px de holgura arriba y abajo, devueltos con margen negativo: el carril recorta en vertical
   (overflow-y: hidden) y el foco del sitio (2 px, a 2 px de la ficha) salía sin su línea de arriba */
.pa-carril.es-carril {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--spv) - 1) * var(--calle)) / var(--spv));
  column-gap: var(--calle); align-items: start;
  margin: -4px calc(-1 * var(--sangre));
  padding: 4px var(--sangre);
  scroll-padding-inline: var(--sangre);
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;                 /* M16 · una ficha por gesto */
  scrollbar-width: none;
}
.pa-carril.es-carril::-webkit-scrollbar { display: none; }
.pa-carril.es-carril > * { scroll-snap-align: start; scroll-snap-stop: always; }
.pa-carril.es-carril:focus-visible { outline-offset: -2px; }
/* (corrección ESC-R2-01 / MOV2-05) ≥ 1280, como Perrotin (movil.md §5: «bajo 1.280 el carrusel tiene overflow: visible»;
   desde 1280 lo recorta su contenedor): sin sangre. A sangre, con una calle distinta del margen (16 en obras, 15 en
   prensa y textos) la 4.ª ficha empezaba en 24 + 3 × (453,3 + 16) = 1432 y asomaba 8 px por el borde derecho; tras un
   paso, la 1.ª asomaba 8 por el izquierdo. Quedan solo los 4 px del foco (menos que cualquier calle): no asoma nada */
@media (min-width: 1280px) { .pa-carril.es-carril { --sangre: 4px; } }
/* M17 · mientras se arrastra con el mouse: sin snap (el carril sigue al puntero) y sin seleccionar texto */
.pa-carril.arrastra { scroll-snap-type: none; -webkit-user-select: none; user-select: none; }
.pa-carril > * { min-width: 0; cursor: pointer; }

/* ------------------------------------------------ 1.1 · cabecera de la artista */
/* ≥ 1001: tres columnas 423 · 450 · 423 a 1440; la imagen a su proporción, 50 px sobre el borde inferior de la ventana;
   la raya al 40 % del alto del bloque, por detrás de la imagen; nombre 32 y origen 36 sobre la raya */
.pa-cabeza {
  position: relative;
  display: grid; grid-template-columns: minmax(250px, 1fr) minmax(0, 450px) minmax(250px, 1fr); column-gap: var(--pa-calle-cabeza);
  padding: 20px var(--pa-margen) 40px;
}
.pa-cabeza::before { content: ""; position: absolute; left: var(--pa-margen); right: var(--pa-margen); bottom: 40%; height: 1px; background-color: var(--linea); }
.pa-retrato {
  grid-column: 2; grid-row: 1;
  display: flex; justify-content: center; min-width: 0;
  position: relative; z-index: 1;
  --alto-max: calc(100svh - var(--alto-aviso) - var(--alto-cabecera) - 70px);
}
/* R1 · el nombre: serif 400 en caja normal, dos líneas */
.pa-nombre {
  position: absolute; left: var(--pa-margen); bottom: 40%;
  max-width: calc((100% - 2 * var(--pa-margen) - 450px - 2 * var(--pa-calle-cabeza)) / 2);
  padding-bottom: 32px;
  font: 400 var(--t-48)/1 var(--serif); letter-spacing: -.01em;
  text-wrap: balance;
}
/* v4 · 15.3 · entre 1001 y ~1090 la columna (50% − 297) no llegaba a los 4,84 em de «Hernández» y el apellido se partía a
   mitad de palabra: la letra baja con la columna hasta que cabe (con 8 px de holgura para la barra de scroll), como la
   variante logo; desde ~1090 vuelve a 48 */
@media (min-width: 1001px) { .pa-nombre { font-size: min(var(--t-48), calc((50vw - 305px) / 4.9)); } }
/* v4 · 15.7 · el nombre es un enlace al statement: sin cambio de color ni subrayado, solo el puntero */
.pa-nombre-enlace { display: block; color: inherit; }
.pa-nombre-enlace > span { display: block; }
/* v4 · 15.3 · variante «Nombre: logo» (ver .nombre-k): a 1001 «HERNÁNDEZ» tiene que caber en los 203 de su columna */
html[data-nombre="logo"] .pa-nombre { font: 350 clamp(22px, 2.2vw, 32px)/1.3 var(--letra-logo); letter-spacing: .3em; text-transform: uppercase; }
/* R2 · línea de origen: Jost 500 mayúscula espaciada, gris, alineada a la derecha */
.pa-origen {
  position: absolute; right: var(--pa-margen); bottom: 40%;
  max-width: 200px; padding-bottom: 36px;
  font: 500 var(--t-12)/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--gris); text-align: right; text-wrap: balance;
}
/* ≤ 1000: la ficha de celular de Perrotin (también a 768): imagen → nombre (con su raya) → origen, a 48 */
@media (max-width: 1000px) {
  .pa-cabeza { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .pa-cabeza::before { display: none; }
  .pa-retrato { grid-column: 1; grid-row: 1; --alto-max: 60svh; }
  .pa-nombre { position: static; grid-row: 2; max-width: none; padding: 0; font-size: var(--t-36); line-height: 1.05; }
  html[data-nombre="logo"] .pa-nombre { font-size: 26px; line-height: 1.3; }
  .pa-nombre::after { content: ""; display: block; height: 1px; margin-block: 16px; background-color: var(--linea); }
  .pa-origen { position: static; grid-row: 3; justify-self: end; padding: 0; }
}
@media (max-width: 620px) {
  .pa-cabeza { padding: 36px 16px 40px; }
  .pa-origen { font-size: var(--t-11); line-height: 1.7; }
}

/* ------------------------------------------------ 1.2 · Exposiciones y proyectos */
.pa-expos .pa-carril { --calle: var(--pa-calle-expo); }
.pa-expo { display: block; color: var(--tinta); }
.pa-expo .lienzo { background-color: var(--superficie); }
.pa-expo-texto { display: block; padding: 16px 0; }
.pa-expo-fila { display: flex; justify-content: space-between; align-items: center; column-gap: 12px; }
/* R4 · tipo y lugar; R5 · fechas en gris */
.pa-tipo, .pa-lugar { font: 500 var(--t-13)/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.pa-fechas { font: 500 var(--t-12)/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }
/* R7 · título de la exposición: serif 400 en caja normal */
.pa-expo-titulo { display: block; margin: 8px 0; font: 400 var(--t-30)/1.05 var(--serif); letter-spacing: -.005em; }
.pa-expo-lugar { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; }
@media (max-width: 620px) {
  .pa-tipo, .pa-lugar { font-size: var(--t-11); line-height: 1.6; }
  .pa-fechas { font-size: var(--t-11); }
  .pa-pildora { font-size: var(--t-10); }
  .pa-expo-titulo { font-size: var(--t-22); line-height: 1.1; }
}

/* ------------------------------------------------ 1.3 · Biografía (banda --superficie) */
/* 1440: texto de 450 y foto de 450 (calle 128; quedan 492 vacíos, como Perrotin); 768: 306 + 64 + 350; 390: foto primero */
.pa-bio {
  display: grid; grid-template-columns: minmax(0, 1fr) 450px; column-gap: 128px; align-items: start;
  padding: var(--pa-sec) var(--pa-margen);
  background-color: var(--superficie);
}
.pa-bio-texto { grid-column: 1; grid-row: 1; max-width: 450px; min-width: 0; }
.pa-bio-foto { grid-column: 2; grid-row: 1; min-width: 0; }
/* R8 · bajada: .t-cita (serif 36/1,15; 28 a ≤ 620), 24 hasta la biografía */
.pa-bajada { margin-bottom: 24px; text-wrap: balance; }
/* R9 · biografía: Jost 400 15/1,55 (16/1,5 a ≤ 620); una línea en blanco entre párrafos; sangría solo en el primero */
.pa-biografia { font: 400 var(--t-15)/1.55 var(--sans); }
.pa-biografia p + p { margin-top: 1lh; }
.pa-biografia p:first-child { text-indent: 48px; }
/* filas del CV: 64 desde la biografía; 450 × 51 (47 a ≤ 620), 8 entre filas, sin hover; abren el panel */
.pa-cv { margin-top: 32px; padding-top: 32px; }
.pa-cv li + li { margin-top: 8px; }
/* R10 (crítica) · Jost 500 en caja normal, sin espaciado: es un control que despliega, como .plegable (14/1,4).
   (corrección ESC-R2-03) La spec pedía a la vez 14/1,4, padding 16 y filas de 51 (7.1 · 12), que no suman: con el
   interlineado de R10 (19,6) el padding baja a 15,2 (13,2 a ≤ 620) y la fila sigue midiendo 51 (47) */
.pa-fila-cv {
  display: flex; justify-content: space-between; align-items: center; column-gap: 16px;
  width: 100%; padding: 15.2px 0;
  border-bottom: 1px solid var(--linea);
  font: 500 var(--t-14)/1.4 var(--sans);
  text-align: left; color: var(--tinta);
}
/* v4 · 15.7 · la decisión 8 (el statement en la columna de la foto) queda reemplazada: sin foto, la columna queda vacía
   y el statement va en su sección, debajo de la galería */
@media (max-width: 1000px) { .pa-bio { grid-template-columns: minmax(0, 1fr) 350px; column-gap: 64px; } }
@media (max-width: 620px) {
  .pa-bio { grid-template-columns: minmax(0, 1fr); row-gap: 32px; padding: 32px 16px; }
  .pa-bio-texto { max-width: none; }
  /* foto primero */
  .pa-bio-foto { grid-column: 1; grid-row: 1; }
  .pa-bio-texto { grid-row: 2; }
  .pa-biografia { font-size: var(--t-16); line-height: 1.5; }
  .pa-fila-cv { padding-block: 13.2px; }
}

/* ------------------------------------------------ 1.4 · Galería de imágenes (banda negra) */
.pa-galeria { padding: var(--pa-sec) var(--pa-margen); background-color: var(--negro); color: var(--blanco); }
.pa-galeria-titulo { padding-bottom: 24px; border-bottom: 1px solid var(--pie-linea); margin-bottom: 16px; color: var(--blanco); }
/* filtros-radio: separación 32, alto 48, círculo de 16 a 12 del texto. R14 (crítica): Jost 500 en caja normal, como
   .op-filtro de Obras. (crítica) Se parten limpio si no caben (a 390, «Todo · Exposiciones · Obras» suma ≈ 375) */
.pa-filtros { display: flex; flex-wrap: wrap; column-gap: 32px; row-gap: 0; margin-bottom: 32px; }
.pa-filtro {
  display: inline-flex; align-items: center; column-gap: 12px;
  min-height: 48px; padding: 16px 16px 16px 0;
  font: 500 var(--t-13)/1 var(--sans); color: var(--blanco); white-space: nowrap;
}
.pa-circulo { flex: none; width: 16px; height: 16px; border: 1px solid currentColor; border-radius: 50%; }
.pa-filtro[aria-checked="true"] .pa-circulo { background-color: currentColor; box-shadow: inset 0 0 0 3px var(--negro); }
@media (max-width: 620px) { .pa-filtros { column-gap: 24px; } .pa-filtro { min-height: 51px; } }
/* mosaico: columnas de 336 (1440), 352 (768), 171 (390), calle 16; cada imagen a su proporción, colocada por JS */
.pa-mosaico { position: relative; --pa-calle-galeria: 16px; }
.pa-mosaico.sin-filtros { margin-top: 32px; }   /* sin filtros: 32 desde la raya (se junta con los 16 del título) */
.pa-tesela { position: absolute; top: 0; left: 0; display: block; width: calc((100% - 16px) / 2); }
.pa-tesela .lienzo.funde { background-color: var(--carga-oscura); }   /* relleno de carga sobre la banda negra */
.pa-tesela:focus-visible { outline-offset: -2px; }
/* M12 · hover: opacidad .9 en 200 ms ease; al salir vuelve con la transición del ítem (400 ms, --curva-mov), como
   Perrotin (.item { transition: .4s } y :hover { transition: opacity .2s }). Solo con puntero que pasa por encima */
@media (hover: hover) {
  .pa-tesela { transition: opacity var(--m-400) var(--curva-mov); }
  .pa-tesela:hover { opacity: .9; transition: opacity var(--m-200) ease; }
}
/* M9 · filtro (FLIP en paColocar): .sale se va hacia arriba desde su lugar viejo; .entra es el punto de partida de las
   que llegan desde abajo (app.js le quita la clase con la transición de 400 ms puesta) */
.pa-tesela.sale { opacity: 0; transform: scale(.8) translateY(-20px); transition: opacity var(--m-400) var(--curva-mov), transform var(--m-400) var(--curva-mov); pointer-events: none; }
.pa-tesela.entra { opacity: 0; transform: scale(.8) translateY(20px); }
/* «Ver todo»: solo con más de 15; botón de borde blanco; M13 hover; (crítica) deshabilitado .7 y el giro de 16 */
.pa-ver-todo-fila { display: flex; justify-content: center; margin-top: 48px; padding-top: 32px; }
.pa-ver-todo {
  display: inline-flex; align-items: center; column-gap: 12px;
  padding: 16px 32px; border: 1px solid var(--blanco);
  font: 500 var(--t-13)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--blanco);
  transition: background-color var(--m-300) ease, color var(--m-300) ease;
}
@media (hover: hover) { .pa-ver-todo:not(:disabled):hover { background-color: var(--blanco); color: var(--negro); } }
.pa-ver-todo:disabled { opacity: .7; cursor: not-allowed; }
.pa-giro { width: 16px; height: 16px; border: 2px solid var(--pie-texto-2); border-top-color: var(--blanco); border-radius: 50%; animation: pa-gira .8s linear infinite; }
@keyframes pa-gira { to { transform: rotate(360deg); } }
@media (max-width: 620px) { .pa-ver-todo { font-size: var(--t-11); padding: 18px 32px; } }

/* ------------------------------------------------ v4 · 15.7 · Statement: crema, a lo ancho, inmediatamente después de
   la galería. El texto en la serif de la bajada, un paso más grande: 48 (36 a ≤ 1000, 30 a ≤ 620) */
.pa-statement-texto { font: 400 var(--t-48)/1.12 var(--serif); letter-spacing: -.01em; text-wrap: pretty; }
@media (max-width: 1000px) { .pa-statement-texto { font-size: var(--t-36); line-height: 1.15; } }
@media (max-width: 620px) { .pa-statement-texto { font-size: var(--t-30); } }

/* ------------------------------------------------ 1.5 · Videos (v4 · 15.5: sin uso, ninguna página los pinta) */
.pa-videos { position: relative; height: 85svh; min-height: 600px; overflow: hidden; background-color: var(--negro); color: var(--blanco); }
.pa-videos-fondos { position: absolute; inset: 0; }
/* M14 · fundido cruzado del fondo en 600 ms */
.pa-video-fondo { position: absolute; inset: 0; opacity: 0; transition: opacity var(--m-600) ease; }
.pa-video-fondo.activo { opacity: 1; }
.pa-video-fondo .lienzo { width: 100%; height: 100%; aspect-ratio: auto; }
.pa-videos-franja {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 32px var(--pa-margen) 64px;
  background-color: var(--pa-velo-medios);
  background-image: linear-gradient(var(--pa-velo-lectura), var(--pa-velo-lectura));   /* 7.4 · 50: segundo velo (ver :root) */
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.pa-videos .pa-titulo { border-bottom: 0; padding-bottom: 0; margin-bottom: 32px; }
.pa-videos .pa-titulo > h2 { color: var(--blanco); }
.pa-videos .pa-carril { --calle: var(--pa-calle-medios); }
.pa-video { position: relative; display: block; padding-top: 32px; color: var(--blanco); }
/* raya de 2 px: .2 inactivo, 1 activo (M14, 300 ms) */
.pa-video::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background-color: var(--blanco); opacity: .2; transition: opacity var(--m-300) ease; }
.pa-video.activo::before { opacity: 1; }
.pa-video-mini { display: block; width: 40%; margin: 0 0 32px 60%; }
.pa-video-mini .lienzo { background-color: var(--carga-oscura); }
/* píldora y título juntos: .3 inactivos, 1 activo (M14, 300 ms) */
.pa-video-texto { display: block; opacity: .3; transition: opacity var(--m-300) ease; }
.pa-video.activo .pa-video-texto { opacity: 1; }
.pa-video-pildora { border-radius: 25px; padding: 4px 8px; margin-bottom: 24px; }
/* R15 · título de video: serif 400 en caja normal */
.pa-video-titulo { display: block; font: 400 var(--t-30)/1.05 var(--serif); letter-spacing: -.005em; text-wrap: balance; }
.pa-videos .nota-maqueta { position: absolute; left: var(--pa-margen); bottom: 24px; color: var(--blanco); }
@media (max-width: 620px) {
  .pa-video-mini { margin-left: 0; }
  .pa-video-titulo { font-size: var(--t-24); line-height: 1.1; }
  .pa-video-pildora { font-size: var(--t-10); }
}

/* ------------------------------------------------ 1.6 · Prensa seleccionada */
.pa-prensa .pa-carril { --calle: var(--pa-calle-prensa); }
.pa-articulo { display: block; color: var(--tinta); }
/* caja de 400 fija con la página escaneada entera y centrada */
.pa-articulo-caja { display: flex; align-items: center; justify-content: center; height: 400px; padding: 48px; background-color: var(--superficie); --alto-max: 304px; }
.pa-articulo-caja .lienzo.funde { background-color: transparent; }
.pa-articulo-texto { display: grid; margin-top: 32px; }
/* R16 · medio (dos líneas como mucho); R17 · fecha en gris */
.pa-medio {
  font: 500 var(--t-12)/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pa-fecha-prensa { font: 500 var(--t-13)/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }
@media (max-width: 620px) { .pa-medio { font-size: var(--t-11); } .pa-fecha-prensa { font-size: var(--t-11); line-height: 1.6; } }

/* ------------------------------------------------ 1.7 · Textos seleccionados: tarjeta negra .76, tope 450 */
.pa-textos .pa-carril { --calle: var(--pa-calle-prensa); }
.pa-texto {
  --base: 52px;   /* R18 (crítica): la base del bloque de texto de Perrotin; 26 bajo 768 */
  display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: .76; max-width: 450px;
  padding: 32px;
  background-color: var(--negro); color: var(--blanco);
  container-type: inline-size;
  transition: opacity var(--m-300) ease;   /* declarada sin hover, como Perrotin */
}
@media (max-width: 767px) { .pa-texto { --base: 26px; } }
.pa-texto-arriba { display: block; }
/* R18 · título: base × 1; × .8 si el contenido mide ≤ 400; × .7 si ≤ 300; × .6 si ≤ 250; piso --t-22 (D24) */
.pa-texto-titulo { display: block; font: 400 max(var(--t-22), var(--base))/1 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
@container (max-width: 400px) { .pa-texto-titulo { font-size: max(var(--t-22), calc(var(--base) * .8)); } }
@container (max-width: 300px) { .pa-texto-titulo { font-size: max(var(--t-22), calc(var(--base) * .7)); } }
@container (max-width: 250px) { .pa-texto-titulo { font-size: max(var(--t-22), calc(var(--base) * .6)); } }
/* R19 · autor, pegado bajo el título y 16 sobre lo que sigue */
.pa-texto-autor { display: block; margin-bottom: 16px; font: 500 var(--t-13)/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
/* R20 · extracto en dos líneas con «…» */
.pa-texto-extracto {
  margin-top: auto; padding-top: 48px;
  font: 400 var(--t-14)/1.5 var(--sans); hyphens: auto;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 620px) { .pa-texto-autor { font-size: var(--t-11); } }

/* ------------------------------------------------ 1.8 · Selección de obras disponibles */
.pa-disponibles .pa-carril { --calle: var(--pa-calle-obras); }
.pa-obra { display: block; color: var(--tinta); }
/* caja 13:20 con la obra entera apoyada abajo; sin fondo después de cargar */
.pa-obra-img { display: block; margin-top: 24px; }
.pa-obra-texto { display: block; padding: 8px 0; }
/* R21 · artista; R22 · título y año, recto, tres líneas a 1440 */
.pa-obra-artista { display: block; font: 500 var(--t-16)/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.pa-obra-titulo { display: block; min-height: 60px; font: 400 var(--t-16)/20px var(--sans); }
.pa-obra-pie { display: flex; justify-content: flex-end; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--linea); }
@media (max-width: 620px) {
  .pa-obra-artista { font-size: var(--t-14); }
  .pa-obra-titulo { font-size: var(--t-15); line-height: 18px; min-height: 54px; }
}

/* ------------------------------------------------ 1.9 · Ediciones */
.pa-ediciones .pa-carril { --calle: var(--pa-calle-obras); }
/* 7.4 · 49: el área de 44 va en un ::after centrado (como los enlaces del visor), no en un alto mínimo con márgenes
   negativos: así el enlace mide lo que su texto y comparte la línea base con «Ediciones» a 390 (corrección C2) */
.pa-ver-ediciones { position: relative; display: flex; align-items: center; color: var(--tinta); }
@media (max-width: 1000px), (pointer: coarse) {
  .pa-ver-ediciones::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--tactil); transform: translateY(-50%); }
}
/* ficha: foto cuadrada + datos en dos columnas de 336 a 1440 (sigue en dos a 768: Perrotin solo apila bajo 768) */
.pa-edicion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; color: var(--tinta); transition: opacity var(--m-200) ease; }
.pa-edicion-foto { display: block; padding: 16px; background-color: var(--superficie); }
.pa-edicion-foto .lienzo.entera img { object-position: 50% 50%; }
.pa-edicion-foto .lienzo.funde.lista { background-color: transparent; }
.pa-edicion-datos { display: block; padding: 0 16px 16px; min-width: 0; }
/* R29 · «ARTISTA - TÍTULO» y debajo tipo · páginas */
.pa-edicion-nombre { display: block; margin-bottom: 32px; font: 500 var(--t-13)/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-wrap: balance; }
.pa-edicion-tipo { display: block; font: 400 var(--t-13)/1.4 var(--sans); }
@media (max-width: 620px) {
  .pa-edicion { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .pa-edicion-foto { padding: 8px; }
  .pa-edicion-nombre { margin-bottom: 8px; font-size: var(--t-11); }
  .pa-edicion-tipo { font-size: var(--t-12); }
}

/* ------------------------------------------------ 1.10 · barra flotante (opaca, D8) */
.pa-control {
  position: fixed; bottom: 24px; left: 50%; z-index: 30;
  transform: translateX(-50%);
  width: min(450px, 100vw - 48px);
  background-color: var(--blanco); border: 1px solid var(--linea);
}
.pa-control-lista { display: grid; row-gap: 16px; justify-items: start; padding: 24px; border-bottom: 1px solid var(--linea); }
/* R28 · anclas en gris; la de la sección en pantalla en tinta con «— » delante (M3 hover, M4 activa). (crítica) Interlineado
   de Perrotin: 14 a ≥ 621 (con 7 anclas, lista de 242 y barra de 293) y 19 a ≤ 620 (342 × 329) */
.pa-ancla {
  font: 500 var(--t-13)/14px var(--sans); letter-spacing: .16em; text-transform: uppercase; text-align: left;
  color: var(--gris); transition: color var(--m-200) ease;
}
.pa-ancla[aria-current] { color: var(--tinta); }
.pa-ancla[aria-current]::before { content: "—"; margin-right: .5rem; }
@media (hover: hover) { .pa-ancla:hover { color: var(--tinta); } }
.pa-control-lista.en-seco .pa-ancla { transition: none; }   /* M4 · el cambio de sección activa es de golpe (app.js) */
/* 7.4 · 49: en pantallas táctiles cada ancla mide 44 de alto (--tactil) y todo el ancho de la lista, sin pisarse con la
   vecina. Perrotin deja 30 a 35; Ramón eligió lo recomendado (14-oct). Las anclas quedan a 44 de distancia en vez de 30/35
   y el relleno de la lista baja a 12 para que la primera línea siga casi donde estaba */
@media (max-width: 1000px), (pointer: coarse) {
  .pa-control-lista { row-gap: 0; padding-block: 12px; }
  .pa-ancla { position: relative; justify-self: stretch; display: flex; align-items: center; min-height: var(--tactil); }
  .pa-ancla::after { content: ""; position: absolute; inset: 0 -24px; }
}
.pa-control-fila { display: flex; align-items: stretch; }
.pa-control-boton {
  flex: 1; min-width: 0;
  display: flex; align-items: center; column-gap: 12px;
  padding: 15px 24px; border-right: 1px solid var(--linea);
  font: 500 var(--t-12)/18px var(--sans); letter-spacing: .16em; text-transform: uppercase; text-align: left;
}
.pa-control-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* M2 · «›» de 270° (plegada) a 90° (abierta) en 200 ms; la lista aparece de golpe */
.pa-control-boton .pa-signo { transform: rotate(270deg); transition: transform var(--m-200) ease; }
.pa-control-boton[aria-expanded="true"] .pa-signo { transform: rotate(90deg); }
.pa-control-contacto { display: flex; align-items: center; padding: 15px 24px; }
.pa-control-contacto .pa-enlace { font-size: var(--t-13); line-height: 18px; }
.pa-control :focus-visible { outline-offset: -2px; }
/* (crítica, medido a 390) plegada 342 × 51: nombre 14 de interlineado, «Contacto» 19 (la fila la fija el más alto: 15 + 19
   + 15 y el borde); abierta, anclas 12/19 (con 7 anclas, 342 × 329) */
@media (max-width: 620px) {
  .pa-control-boton { font-size: var(--t-11); line-height: 14px; }
  .pa-control-contacto .pa-enlace { font-size: var(--t-11); line-height: 19px; }
  .pa-ancla { font-size: var(--t-12); line-height: 19px; }
  /* v4 · con la letra de la 15.4, «MARÍA HERNÁNDEZ» se cortaba en «…» a 390 (142 de 126): relleno lateral de 16 */
  .pa-control-boton, .pa-control-contacto { padding-inline: 16px; }
}

/* ------------------------------------------------ 1.11 · panel lateral (currículum y textos) */
.pa-panel { position: fixed; inset: 0; z-index: 60; }
/* M7 / M8 · velo y cajón a la vez, 300 ms ease; .abriendo es el estado de partida (fuera, velo en 0) */
.pa-velo { position: absolute; inset: 0; background-color: var(--pa-velo-panel); opacity: 0; transition: opacity var(--m-300) ease; }
.pa-panel-caja {
  position: absolute; top: 0; right: 0; z-index: 1;
  display: flex; flex-direction: column;
  width: 600px; max-width: 90vw; height: 100dvh;
  background-color: var(--negro); color: var(--blanco);
  box-shadow: -2px 0 8px rgb(0 0 0 / .1);
  transform: translateX(100%);
  transition: transform var(--m-300) ease;
}
.pa-panel.abierto .pa-velo { opacity: 1; }
.pa-panel.abierto .pa-panel-caja { transform: none; }
.pa-panel-cabeza {
  flex: none; display: flex; justify-content: space-between; align-items: flex-start; column-gap: 24px;
  min-height: 82px; padding: 24px 32px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.pa-panel-rotulos { min-width: 0; }
/* R11 · título del panel: serif 36/1 (a ≤ 620, rótulo Jost); R32 · subtítulo (autor) sin separación */
.pa-panel-titulo { font: 400 var(--t-36)/1 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.pa-panel-titulo:focus { outline: none; }
.pa-panel-sub { font: 500 var(--t-13)/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
/* aspa dibujada: dos líneas de 16 × 1,5; caja de 32 × 34 a la vista y 44 de área */
.pa-aspa { position: relative; flex: none; width: 44px; height: 44px; margin: -5px -6px; color: var(--blanco); }
.pa-aspa::before, .pa-aspa::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 1.5px;
  background-color: currentColor; transform: translate(-50%, -50%) rotate(45deg);
}
.pa-aspa::after { transform: translate(-50%, -50%) rotate(-45deg); }
.pa-panel-cuerpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 32px; }
/* (corrección MOV2-01) el cuerpo del panel y la columna de imágenes del visor son paradas de Tab (con el foco atrapado
   en la capa, si no, lo que hace scroll quedaba fuera del teclado): su foco va por dentro, como el de los carriles */
.pa-panel-cuerpo:focus-visible, .visor-imagenes:focus-visible { outline-offset: -2px; }
/* R12 · CV: año en 500 con cifras tabulares, ítems en 400, 14/20; una línea en blanco entre años */
.pa-cv-anio { font: 500 var(--t-14)/20px var(--sans); font-variant-numeric: tabular-nums; }
.pa-cv-lista { font: 400 var(--t-14)/20px var(--sans); }
.pa-cv-grupo + .pa-cv-grupo { margin-top: 20px; }
/* «Exposiciones en Módulo 369» (crítica): año R13 en serif, filas con raya --pie-linea, título a la izquierda (70 %) */
.pa-panel-anio + .pa-panel-anio { margin-top: 24px; padding-top: 24px; }
.pa-anio-serif { margin-bottom: 24px; font: 400 var(--t-30)/1 var(--serif); }
.pa-fila-expo { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; column-gap: 24px; row-gap: 16px; padding: 16px 0; border-top: 1px solid var(--pie-linea); color: var(--blanco); }
.pa-fila-expo-titulo { max-width: 70%; font: 400 var(--t-22)/1.05 var(--serif); }
.pa-fila-expo-der { display: grid; row-gap: 5.6px; justify-items: end; margin-left: auto; text-align: right; }   /* partida, sigue a la derecha */
.pa-fila-expo-fechas, .pa-fila-expo-ciudad { font: 500 var(--t-12)/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.pa-fila-expo-fechas { color: var(--pie-texto-2); }
.pa-panel-texto { font: 400 var(--t-15)/1.55 var(--sans); }
.pa-panel-texto p + p { margin-top: 1lh; }
@media (max-width: 620px) {
  .pa-panel-caja { width: 100vw; max-width: none; }
  .pa-panel-cabeza { padding: 24px; }
  .pa-panel-titulo { font: 500 var(--t-12)/20px var(--sans); letter-spacing: .16em; text-transform: uppercase; }
  .pa-panel-sub { font-size: var(--t-11); }
  .pa-panel-cuerpo { padding: 24px; }
  .pa-anio-serif { font-size: var(--t-26); }
  /* (corrección C1) como el referente a 390 (movil/390-03b): título, fechas y ciudad apilados y a la izquierda, a la
     misma distancia (5,6) que fechas y ciudad entre sí. La columna a la derecha de la tabla de 1.11 es la de 1440 */
  .pa-fila-expo { flex-direction: column; align-items: flex-start; row-gap: 5.6px; }
  .pa-fila-expo-titulo { max-width: none; font: 500 var(--t-12)/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
  .pa-fila-expo-der { justify-items: start; margin-left: 0; text-align: left; }
  .pa-fila-expo-fechas, .pa-fila-expo-ciudad { font-size: var(--t-11); }
}
html.con-capa { overflow: hidden; }   /* 2.5 / 2.6.5 · con el panel o el visor abiertos, la página no se mueve */

/* ------------------------------------------------ 1.12 · visor: imágenes (1040) | información (400) a 1440 */
.visor {
  position: fixed; inset: 0; z-index: 70;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 25%);
  background-color: var(--blanco); color: var(--tinta);
  opacity: 0; transition: opacity var(--m-200) ease-in;      /* M19 · sale en 200 ms, ease-in */
}
.visor.abierto { opacity: 1; transition: opacity var(--m-250) ease-out; }   /* M18 · entra en 250 ms, ease-out */
/* M20 (visor) y M23 (obras disponibles) · esqueleto con brillo de 1,4 s ease-in-out hasta que la foto carga; la foto
   aparece en 300 ms ease, sin el retraso del sitio. Una foto que ya estaba (.ya) entra sin fundido, como en el sitio */
.visor, .pa-obra-img { --m-brillo: var(--m-1400); --curva-brillo: ease-in-out; }
.visor .lienzo.brillo:not(.ya)::before, .visor .lienzo.brillo:not(.ya)::after,
.pa-obra-img .lienzo.brillo:not(.ya)::before, .pa-obra-img .lienzo.brillo:not(.ya)::after { transition: opacity var(--m-300) ease; }
.visor-imagenes {
  grid-column: 1; grid-row: 1; min-width: 0; min-height: 0;
  display: grid; row-gap: 64px; align-content: start; justify-items: center;
  padding: 32px; overflow-y: auto; overscroll-behavior: contain;
  --alto-max: calc(100svh - 176px);
}
.visor-fig { display: grid; justify-items: center; width: 100%; }
.visor-fig .lienzo { margin-inline: auto; }
/* R27 · pie centrado: en la maqueta, solo el crédito de Unsplash (5.0) */
.visor-pie { margin-top: 16px; font: 400 var(--t-12)/1.4 var(--sans); text-align: center; }
/* R31 · texto de la obra entre la primera y la segunda imagen, a todo el ancho */
.visor-texto-obra { justify-self: stretch; font: 400 var(--t-20)/1.4 var(--sans); text-align: left; }
.visor-info {
  grid-column: 2; grid-row: 1; position: relative; min-width: 0;
  padding: 80px 32px 32px; overflow-y: auto;
  box-shadow: -4px 0 16px rgb(0 0 0 / .06);
}
/* cerrar: círculo de 40 con un aspa de 12 × 1. El botón mide 44 (7.4 · 49) con un borde transparente de 2; el fondo y la
   raya van dentro de él, así el círculo se ve igual y en el mismo lugar */
.visor-cerrar {
  position: absolute; top: 22px; right: 30px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid transparent; background-clip: padding-box;
  background-color: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea);
}
.visor-cerrar::before, .visor-cerrar::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1px;
  background-color: var(--tinta); transform: translate(-50%, -50%) rotate(45deg);
}
.visor-cerrar::after { transform: translate(-50%, -50%) rotate(-45deg); }
.visor-plegar { display: none; }
/* R24 · artista (serif a ≥ 1001); R25 · título (Jost 400 recto); R26 · datos, uno por línea a 4 */
.visor-artista { margin-bottom: 8px; font: 400 var(--t-30)/1.05 var(--serif); letter-spacing: -.005em; }
.visor-artista.con-aire { margin-bottom: 16px; }
.visor-titulo { margin-bottom: 16px; font: 400 var(--t-20)/1.2 var(--sans); }
.visor-titulo.corto { margin-bottom: 4px; }
.visor-lista { display: grid; row-gap: 4px; font: 400 var(--t-15)/20px var(--sans); }
.visor-enlaces { display: grid; justify-items: start; row-gap: 8px; margin-top: 24px; }
@media (max-width: 1000px), (pointer: coarse) {   /* 7.4 · 49: 44 de alto sin mover el texto */
  .visor-enlaces a { position: relative; }
  .visor-enlaces a::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--tactil); transform: translateY(-50%); }
}
/* R30 · medio de prensa; R17 · fecha, en tinta en el visor */
.visor-medio { font: 400 var(--t-20)/1.1 var(--sans); }
.visor-fecha { margin-top: 4px; font: 500 var(--t-13)/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
/* 2.10 · video (sitio): la miniatura 16:9 con un botón de reproducir circular de 80 */
.visor-video { position: relative; }
.visor-play { position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; background-color: var(--blanco); }
.visor-play::after { content: ""; position: absolute; top: 50%; left: 50%; margin: -10px 0 0 -6px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent var(--tinta); }
.visor .nota-maqueta { justify-self: center; text-align: center; }
/* ≤ 1000 (crítica, medido a 390): dos filas. Arriba la información (cerrar a la izquierda, «Información» plegable);
   debajo la columna de imágenes, que es la que hace scroll */
@media (max-width: 1000px) {
  .visor { display: flex; flex-direction: column; }
  .visor-info { order: -1; flex: none; padding: 0; overflow: visible; box-shadow: none; border-bottom: 1px solid var(--linea); background-color: var(--blanco); z-index: 10; }
  .visor-cerrar { position: relative; top: auto; right: auto; display: block; margin: 14px 22px 6px; }   /* el círculo: 16 / 24 / 8 */
  .visor-plegar {
    position: relative; display: flex; justify-content: space-between; align-items: center;
    width: 100%; min-height: 51px; padding: 16px 24px;
    font: 500 var(--t-12)/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-align: left;
  }
  .visor-plegar::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: -1px; height: 1px; background-color: var(--linea); }
  /* M21 · «›» a 270° abierto y 90° plegado; alto y opacidad del bloque en 300 ms */
  .visor-plegar .pa-signo { transform: rotate(270deg); transition: transform var(--m-300) ease; }
  .visor-plegar[aria-expanded="false"] .pa-signo { transform: rotate(90deg); }
  .visor-datos { max-height: 40svh; padding: 16px 24px; overflow-y: auto; transition: max-height var(--m-300) ease, opacity var(--m-300) ease, padding var(--m-300) ease; }
  .visor-info.plegado .visor-datos { max-height: 0; padding-block: 0; opacity: 0; overflow: hidden; }
  .visor-imagenes { flex: 1; padding: 24px; row-gap: 48px; --alto-max: calc(100svh - 146px); }
  .visor-artista { font: 500 var(--t-12)/20px var(--sans); letter-spacing: .16em; text-transform: uppercase; }
  .visor-titulo { font-size: var(--t-16); line-height: 1.3; }
}
@media (max-width: 620px) {
  .visor-texto-obra { font-size: var(--t-16); }
  .visor-medio { font-size: var(--t-16); line-height: 1.25; }
}

/* ================================================================== v4 · 15.8 · ficha de obra: datos, precio y zoom */
/* texto solo para lectores de pantalla (la leyenda «Marco» del selector) */
.solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* el precio debajo de los datos, en la misma letra de la cartela; el selector como dos opciones en una línea, sin caja */
.precio-obra { margin-top: var(--e-4); }
.precio-cifra { font-variant-numeric: tabular-nums; }
.ficha-cartela .precio-cifra { font: 400 var(--t-15)/1.5 var(--sans); }
.marco-opciones { display: flex; flex-wrap: wrap; column-gap: var(--e-4); margin: var(--e-1) 0 calc((var(--tactil) - 1.5em) / -2); padding: 0; border: 0; min-inline-size: 0; }
.marco-op { display: inline-flex; align-items: center; column-gap: var(--e-1); min-height: var(--tactil); font: 400 var(--t-13)/1.5 var(--sans); cursor: pointer; }
.marco-op input { width: 16px; height: 16px; margin: 0; accent-color: var(--tinta); cursor: pointer; }
.ficha-cartela .precio-obra + .cartela-accion { margin-top: var(--e-4); }
.visor .precio-obra { margin-top: 16px; }
.visor .precio-cifra { font: 400 var(--t-15)/20px var(--sans); }
.visor .marco-op { font-size: var(--t-15); }

/* «Ampliar» debajo de cada imagen (nada encima de ella): en la ficha, a la derecha y en la línea del rótulo; en el
   visor, centrado sobre el pie. Mide 44 de toque sin mover lo que tiene alrededor */
.ficha-img { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--e-2); align-items: start; }
.ficha-img > .lienzo { grid-column: 1 / -1; }
.ficha-img > .rotulo-img { grid-column: 1; grid-row: 2; }
.ficha-img > .ampliar { grid-column: 2; grid-row: 2; margin-top: var(--e-1); }
.ampliar {
  position: relative; display: inline-flex; align-items: center; column-gap: 6px;
  font: 500 var(--t-11)/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta);
}
.ampliar::after { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: var(--tactil); transform: translateY(-50%); }
.visor-fig > .ampliar { margin-top: 12px; }
.ficha-img .lienzo, .visor-fig .lienzo { cursor: zoom-in; }
@media (max-width: 1000px) {
  .ficha:not(.edicion) .ficha-img > .ampliar { margin-right: var(--margen-texto); }
}

/* la capa del zoom: a pantalla completa sobre todo (también sobre el visor), en el crema del sitio. La imagen entera
   cabe en el campo (arriba deja lugar al aspa y abajo a − y +); al acercarla se sale de él y se recorta en la capa */
html.con-zoom { overflow: hidden; }
.zoom {
  position: fixed; inset: 0; z-index: 90; overflow: hidden;
  background-color: var(--blanco); color: var(--tinta);
  opacity: 0; transition: opacity var(--m-200) ease-in;
  touch-action: none; overscroll-behavior: contain;
}
.zoom.abierta { opacity: 1; transition: opacity var(--m-250) ease-out; }
.zoom-campo { position: absolute; inset: 80px 24px; cursor: zoom-in; }
.zoom.acercada .zoom-campo { cursor: grab; }
.zoom.acercada .zoom-campo:active { cursor: grabbing; }
.zoom-img {
  position: absolute; top: 50%; left: 50%; max-width: none;
  transform-origin: 50% 50%; user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}
.zoom.anima .zoom-img { transition: transform var(--m-200) var(--curva-mov); }
/* el aspa, igual a la del visor (círculo de 40 en un botón de 44) */
.zoom-cerrar {
  position: absolute; top: 18px; right: 22px; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid transparent; background-clip: padding-box;
  background-color: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea);
}
.zoom-cerrar::before, .zoom-cerrar::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1px;
  background-color: var(--tinta); transform: translate(-50%, -50%) rotate(45deg);
}
.zoom-cerrar::after { transform: translate(-50%, -50%) rotate(-45deg); }
.zoom-controles { position: absolute; left: 50%; bottom: 18px; z-index: 1; display: flex; column-gap: var(--e-2); transform: translateX(-50%); }
.zoom-boton {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid transparent; background-clip: padding-box;
  background-color: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea);
  font: 400 var(--t-20)/1 var(--sans); color: var(--tinta);
}
.zoom-boton[aria-disabled="true"] { color: var(--gris); cursor: default; }
@media (hover: hover) {
  .zoom-boton:not([aria-disabled="true"]):hover, .zoom-cerrar:hover { box-shadow: inset 0 0 0 1px var(--tinta); }
}
@media (max-width: 620px) { .zoom-campo { inset: 72px 12px; } }
@media (prefers-reduced-motion: reduce) {
  .zoom, .zoom.abierta, .zoom.anima .zoom-img { transition: none; }
}

/* ================================================================== v5 · una sola letra (10-nov)
   Pedido de Ramón tras la referencia de María (collectio-collectio.com/pages/artistas): que todo el sitio siga un mismo
   estilo, como Collectio. Collectio usa Jost en títulos y nombres (400, mayúscula espaciada 0,1 em, ~28 px) y una
   sans redonda para el texto corrido; acá el texto corrido ya era Jost, así que «una sola» = Jost en todo.
   · Títulos de página y nombres: mayúscula espaciada 0,1 em, 400, más chicos que la serif (la mayúscula espaciada
     ocupa casi el doble).
   · Frases grandes (enunciados, statement, citas, títulos de obra, pie): Jost 400 en caja normal.
   Con data-letra="serif" (control «Letra» de la barra de aviso) rige lo de la v4, sin cambios. */
html[data-letra="una"] { --serif: var(--sans); --t-una-titulo: var(--t-28); }
@media (max-width: 620px) { html[data-letra="una"] { --t-una-titulo: var(--t-22); } }
html[data-letra="una"] :is(.t-mayuscula, .t-titulo, h1.t-titulo, .t-recta, .pa-panel-titulo, .t-404) {
  font: 400 var(--t-una-titulo)/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase;
}
html[data-letra="una"] .t-evento { font: 400 7vw/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
html[data-letra="una"] .t-enunciado { font-size: calc(var(--t-enunciado) * .46); line-height: 1.2; letter-spacing: 0; }
html[data-letra="una"] .acerca-titular { font-size: var(--t-28); line-height: 1.3; }
html[data-letra="una"] .t-banda { font: 400 var(--t-28)/1.25 var(--sans); }
html[data-letra="una"] .t-cita { font: 400 var(--t-24)/1.35 var(--sans); }
html[data-letra="una"] :is(.t-italica, .t-titulo-it, .pa-expo-titulo, .pa-video-titulo, .visor-artista, .pa-anio-serif) {
  font: 400 var(--t-22)/1.3 var(--sans); letter-spacing: .02em;
}
html[data-letra="una"] :is(.pa-texto-titulo, .pa-fila-expo-titulo) { font: 400 var(--t-20)/1.3 var(--sans); letter-spacing: .02em; }
html[data-letra="una"] :is(.t-pie-titular, .pie-titular) { font: 400 calc(var(--t-pie-titular) * .8)/1.3 var(--sans); letter-spacing: 0; }
html[data-letra="una"] .pa-statement-texto { font: 400 var(--t-30)/1.35 var(--sans); letter-spacing: 0; }
html[data-letra="una"] .t-contador { font-family: var(--sans); letter-spacing: 0; }
@media (max-width: 620px) {
  html[data-letra="una"] .t-banda { font-size: var(--t-22); }
  html[data-letra="una"] .t-cita { font-size: var(--t-20); }
  html[data-letra="una"] .pa-statement-texto { font-size: var(--t-22); }
  html[data-letra="una"] .t-evento { font-size: 10vw; }
}

/* v5 · la forma del texto de Collectio en la parte de artistas (pedido de María, 10-nov):
   · Artistas: el nombre bajo la foto, centrado, en mayúscula espaciada chica (Collectio: Jost 12 px, 0,1 em, a 12 px
     de la foto). La foto y la grilla no cambian.
   · Página de la artista: el nombre en una línea, mayúscula espaciada; la presentación es un solo párrafo breve en
     letra de leer (la bajada, cuando la hay, entra al mismo bloque con el mismo tamaño); sin sangría.
   · Tarjetas de obra: artista, título y precio, centrados, como las de Collectio. */
html[data-letra="una"] .nombre-k { margin-top: 12px; text-align: center; font: 400 var(--t-13)/1.5 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
html[data-letra="una"] .pa-nombre { font: 400 min(var(--t-30), 2.4vw)/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; text-wrap: balance; }
html[data-letra="una"] .pa-bajada { margin-bottom: 1lh; font: 400 var(--t-16)/1.6 var(--sans); letter-spacing: 0; text-wrap: pretty; }
html[data-letra="una"] .pa-biografia { font: 400 var(--t-16)/1.6 var(--sans); max-width: 62ch; }
html[data-letra="una"] .pa-biografia p:first-child { text-indent: 0; }
html[data-letra="una"] .pa-obra-texto { text-align: center; padding-top: 12px; }
html[data-letra="una"] .pa-obra-artista { font: 400 var(--t-12)/1.5 var(--sans); letter-spacing: .1em; }
html[data-letra="una"] .pa-obra-titulo { min-height: 0; margin-top: 4px; font: 400 var(--t-14)/1.5 var(--sans); letter-spacing: .05em; }
.pa-obra-precio { display: block; margin-top: 2px; font: 400 var(--t-13)/1.5 var(--sans); letter-spacing: .05em; color: var(--gris); font-variant-numeric: tabular-nums; }
html[data-letra="serif"] .pa-obra-precio { display: none; }
@media (max-width: 1000px) {
  html[data-letra="una"] .pa-nombre { font-size: var(--t-24); text-wrap: balance; }
}

/* v5 · 10-nov, Ramón:
   · el título de cada página no lleva recuadro. Es un h1 con tabindex="-1" que recibe el foco al cambiar de página
     (para lectores de pantalla); Safari le dibujaba el anillo de foco
   · Artistas: las fotos centradas (con tres artistas, la grilla de cuatro dejaba una columna vacía a la derecha)
   · Artistas: la animación de Collectio, un zoom lento de la foto al pasar el mouse (1,2 en 8 s, la curva de ellos),
     recortado por el marco; solo con mouse y si no se pidió menos movimiento
   · Obras: el filtro Artista va solo en letras (los estilos de .celda-filtro quedan sin uso) */
h1[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible { outline: none; }
.grilla-k { display: flex; flex-wrap: wrap; justify-content: center; }
.grilla-k > .tarjeta-k { flex: 0 0 calc((100% - 3 * var(--k-calle)) / 4); }
@media (max-width: 800px) { .grilla-k > .tarjeta-k { flex-basis: calc((100% - var(--k-calle)) / 2); } }
@media (max-width: 480px) { .grilla-k > .tarjeta-k { flex-basis: 100%; } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tarjeta-k .lienzo img, .tarjeta-k .lienzo.funde.ya img {
    transform-origin: center center;
    transition: opacity var(--m-500) var(--curva-imagen), scale 8s cubic-bezier(.25, .46, .45, .94);
  }
  .tarjeta-k:hover .lienzo img { scale: 1.2; }
}
@media (min-width: 621px) {
  .cabeza-obras > .filtros .filtro-linea[aria-labelledby="g-artista"] { grid-column: 1 / 4; }
}