/*
 * Saira para el texto y Jura para las cifras de display (D-018, que resuelve la
 * condición de licencia que D-007 dejaba abierta sobre Blender Pro y Archi).
 *
 * Las dos son fuentes variables con licencia SIL OFL, autoalojadas: un único
 * archivo por subconjunto cubre toda la gama de pesos, así que no hace falta un
 * @font-face por peso. El subconjunto `latin-ext` solo se descarga si aparece
 * en la página un carácter que lo necesite, de modo que una edición en español
 * pide únicamente `latin`.
 */
@font-face {
  font-family: "Saira";
  src: url("/Fonts/saira-latin.woff2?v=20260805-24") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Saira";
  src: url("/Fonts/saira-latin-ext.woff2?v=20260805-24") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Jura";
  src: url("/Fonts/jura-latin.woff2?v=20260805-24") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Jura";
  src: url("/Fonts/jura-latin-ext.woff2?v=20260805-24") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --lime: #eeff01;
  --magenta: #ec008c;
  --ink: #201d20;
  --paper: #f6f2ea;
  --line: rgba(32, 29, 32, 0.18);
  --shadow: 0 28px 64px rgba(32, 29, 32, 0.16);
  --pad: clamp(1.2rem, 4vw, 5.5rem);
  color: var(--ink);
  background: var(--lime);
  font-family: "Saira", Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--lime); }
body, button, a { font-family: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
/*
 * I-026. `height: auto` no es decorativo: es la contrapartida obligatoria de
 * los atributos `width` y `height` que I-023 añadió al marcado para reservar
 * el hueco de cada imagen. Esos atributos llegan a la cascada como pistas de
 * presentación, y una altura en píxeles —aunque venga del atributo— gana a
 * `aspect-ratio`, que solo interviene cuando la otra dimensión es `auto`.
 * Sin esta línea, cada imagen se dibujaba con el alto exacto de su archivo y
 * el ancho de su contenedor: el hero se estiraba a 1025 px de alto dentro de
 * un hueco de 385 px y `overflow: hidden` se comía el resto.
 *
 * Quien declare un alto propio (`.detail-gallery img`) lo sigue haciendo: su
 * selector es más específico que este.
 */
img { display: block; max-width: 100%; height: auto; }

/*
 * I-016. El atributo `hidden` del HTML solo aporta `display: none` desde la
 * hoja de estilos del navegador, así que cualquier regla propia que declare
 * `display` lo anula y el elemento se sigue viendo pese a estar marcado como
 * oculto. Pasó con `.hero-video-close` (I-013) y volvió a pasar con
 * `.button-video` y `.hero-stamp` en las ediciones sin vídeo, porque aquella
 * vez se corrigió el componente en lugar del patrón.
 *
 * Esta regla lo resuelve para todo el sitio. El `!important` es necesario:
 * sin él, cualquier selector posterior de la misma especificidad volvería a
 * ganarle. Se justifica porque `hidden` no expresa una preferencia de estilo
 * sino una afirmación sobre el estado del documento.
 */
[hidden] { display: none !important; }

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 5.8rem;
  padding: 1rem var(--pad);
  border-bottom: 1px solid var(--line);
  background: rgba(238, 255, 1, 0.9);
  backdrop-filter: blur(18px);
}

.brand { display: inline-flex; align-items: baseline; gap: .7rem; }
/*
 * El logotipo es un asset, no texto compuesto con una fuente (punto 4.2 del
 * protocolo, I-017). Se dimensiona por altura y el ancho lo deduce el viewBox,
 * de modo que sus proporciones no puedan alterarse desde la hoja de estilos.
 * Las alturas equivalen a la mancha que ocupaba el texto anterior.
 */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.brand-mark { display: block; width: auto; height: clamp(2rem, 3.2vw, 3.28rem); }
.brand-name { font-size: .9rem; letter-spacing: .02em; }
/*
 * Las cinco entradas del menú se tratan igual, todas en peso de lectura.
 *
 * «Prensa» heredó de «Información» un recuadro de llamada a la acción —clase
 * `nav-cta`, con borde y relleno propios—, que la dirección retiró: prensa es
 * una entrada más, no el destino principal del sitio. Se probó a compensar esa
 * pérdida poniendo la cabecera en negrita, y la dirección lo descartó: «queda
 * demasiado fuerte». Con el logotipo al lado, el menú en 700 pesaba más que la
 * propia marca. La cabecera no necesita jerarquía interna; le basta el
 * espaciado y el subrayado magenta al pasar por encima.
 */
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 2.8rem); font-size: .95rem; }
.site-nav a { position: relative; padding: .6rem 0; }
.site-nav a::after { position: absolute; right: 0; bottom: .2rem; left: 0; height: 2px; background: var(--magenta); content: ""; transform: scaleX(0); transform-origin: right; transition: transform .25s ease; }
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.menu-toggle { display: none; border: 0; background: transparent; font-size: .95rem; cursor: pointer; }

.section-pad { padding: clamp(4.5rem, 9vw, 10rem) var(--pad); }
.hero { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(2rem, 7vw, 8rem); min-height: calc(100vh - 5.8rem); overflow: hidden; }
.hero::before { position: absolute; z-index: -1; top: 18%; left: 40%; width: 36vw; height: 36vw; border-radius: 50%; background: rgba(255, 255, 255, .17); content: ""; filter: blur(4px); }
.hero-copy { max-width: 37rem; }
.eyebrow { margin: 0 0 1.4rem; color: var(--magenta); font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }

/*
 * La edición deja de ser una ceja pequeña y se convierte en la primera pieza
 * tipográfica de la portada. Con JavaScript, los propios puntos son el rótulo:
 * el texto sólido permanece oculto, aunque sigue en el DOM para medir la forma
 * y como fallback sin JavaScript o con movimiento reducido. La línea inferior
 * funciona como una notación de movimiento, no como un recuadro; mantiene la
 * composición abierta y conecta ambos cuerpos.
 */
.edition-choreography {
  position: relative;
  isolation: isolate;
  width: min(100%, 35rem);
  height: clamp(7rem, 10vw, 8.8rem);
  margin: 0 0 clamp(1.25rem, 2.4vw, 2rem);
}
.edition-choreography::before,
.edition-choreography::after {
  position: absolute;
  z-index: 3;
  bottom: .2rem;
  content: "";
  pointer-events: none;
}
.edition-choreography::before {
  right: 0;
  left: 0;
  height: 1px;
  background: rgba(32, 29, 32, .28);
  transform-origin: left;
}
.edition-choreography::after {
  left: 0;
  width: .46rem;
  height: .46rem;
  background: var(--magenta);
  transform: translateY(calc(50% - .5px)) rotate(45deg);
}
.edition-lockup {
  position: absolute;
  z-index: 1;
  inset: 0 0 .55rem;
  display: flex;
  align-items: flex-end;
  gap: clamp(.7rem, 1.8vw, 1.35rem);
}
.edition-ordinal {
  color: var(--magenta);
  font-family: Jura, sans-serif;
  font-size: clamp(6.1rem, 10.4vw, 9.3rem);
  font-weight: 300;
  letter-spacing: -.08em;
  line-height: .72;
}
.edition-word {
  margin-bottom: clamp(.48rem, .9vw, .75rem);
  color: var(--ink);
  font-size: clamp(1.45rem, 2.3vw, 2.05rem);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: .9;
  text-transform: uppercase;
}
.edition-particles {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.js .edition-choreography .edition-lockup {
  opacity: 0;
}
.edition-choreography.has-edition-particles::before {
  animation: edition-score-line 3.6s cubic-bezier(.16, 1, .3, 1) both;
}
.edition-choreography.has-edition-particles::after {
  animation: edition-score-cue 4s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes edition-score-line {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes edition-score-cue {
  0% { left: 0; opacity: 0; transform: translateY(calc(50% - .5px)) rotate(45deg) scale(.25); }
  38% { opacity: 1; }
  100% { left: calc(100% - .46rem); transform: translateY(calc(50% - .5px)) rotate(225deg) scale(1); }
}

h1, h2, h3, p { margin-top: 0; }
h1, h2 { margin-bottom: 1.5rem; font-weight: 500; letter-spacing: -.04em; }
/*
 * D-024. La escala de titulares baja alrededor de un 30 %. La anterior estaba
 * calculada para un titular corto de portada y no para lo que de verdad va en
 * un `h3` o en el `h1` de una ficha: el nombre de una compañía más el título
 * de la pieza. A 1280 px un nombre como «Colectivo Glovo» se comía la columna
 * entera. Los tres valores del `clamp` bajan a la vez para que el mínimo de
 * móvil siga siendo el que manda en pantallas estrechas.
 */
h1 { font-size: clamp(3rem, 6vw, 6.4rem); line-height: .86; }
h1 span, h2 em, h3 em { color: var(--magenta); font-style: normal; }
h1 em { display: block; color: var(--ink); font-style: normal; }
.hero-lede { max-width: 27rem; margin: 0 0 2rem; font-size: clamp(1.15rem, 1.5vw, 1.5rem); line-height: 1.35; }
.hero-meta { display: flex; flex-wrap: wrap; gap: .55rem 1.2rem; margin-bottom: 2.1rem; font-size: .86rem; font-weight: 500; text-transform: uppercase; }
.hero-meta span:first-child { color: var(--magenta); }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.8rem; min-width: 10rem; padding: .9rem 1rem; border: 1px solid var(--ink); font-size: .95rem; transition: transform .25s ease, background .25s ease, color .25s ease; }
.button:hover, .button:focus-visible { transform: translateY(-3px); }
.button-dark { background: var(--ink); color: var(--lime); }
.button-dark:hover, .button-dark:focus-visible { background: var(--magenta); color: white; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.button-video { background: transparent; color: var(--ink); }
.button-video:hover, .button-video:focus-visible { border-color: var(--magenta); background: var(--magenta); color: white; }
.button-light { background: var(--lime); color: var(--ink); }
.hero-art { position: relative; min-height: min(62vw, 45rem); }
.hero-photo-wrap { position: absolute; top: 0; right: 10%; width: min(80%, 39rem); transform: rotate(2deg); }
.hero-photo { width: 100%; aspect-ratio: 1.3; object-fit: cover; box-shadow: var(--shadow); filter: saturate(.9) contrast(1.02); }
/*
 * Capa del relevo entre fotografías (app.js la llena y la vacía en cada
 * cambio). `.hero-reveal` es la fotografía que entra recortada dentro del
 * logotipo y `.hero-reveal-full` la misma sin recortar, que remata el cambio.
 * `overflow: hidden` es lo que impide que las letras, al crecer, se salgan de
 * la tarjeta; el filtro es el mismo de `.hero-photo` para que el relevo no dé
 * un salto de color.
 */
.hero-photo-next { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-reveal, .hero-reveal-mask, .hero-reveal-full { position: absolute; inset: 0; }
.hero-reveal-mask, .hero-reveal-full {
  background-position: center;
  background-size: cover;
  filter: saturate(.9) contrast(1.02);
}
.hero-reveal-mask {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
/*
 * La sombra despega el logotipo de la fotografía que aún está detrás y es lo
 * que hace que se lea también sobre las fotos oscuras. Va sola y difuminada, a
 * propósito: un contorno de color duro deja una línea visible justo al final,
 * cuando las letras se están yendo y la fotografía completa todavía no las ha
 * tapado del todo.
 */
.hero-reveal { filter: drop-shadow(0 10px 24px rgba(32, 29, 32, .45)); }
.hero-reveal-full { opacity: 0; }
.hero-video-player { display: block; width: 100%; aspect-ratio: 1.3; border: 0; background: var(--ink); box-shadow: var(--shadow); }
.hero-photo-wrap.is-video .hero-photo, .hero-photo-wrap.is-video .hero-photo-next, .hero-photo-wrap.is-video .hero-stamp { display: none; }
.hero-video-close { position: absolute; z-index: 3; top: .75rem; right: .75rem; display: inline-flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border: 1px solid white; background: var(--ink); color: white; font-size: .75rem; cursor: pointer; }
.hero-video-close:hover, .hero-video-close:focus-visible { background: var(--magenta); }
.hero-stamp { position: absolute; right: -2.5rem; bottom: -2rem; display: grid; place-items: center; width: 7.4rem; height: 7.4rem; padding: 0; border: 0; border-radius: 50%; background: var(--magenta); color: white; font-family: inherit; cursor: pointer; transform: rotate(-10deg); transition: background .25s ease, transform .25s ease; }
.hero-stamp:hover, .hero-stamp:focus-visible { background: var(--ink); transform: rotate(-10deg) scale(1.04); }
.hero-stamp-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; line-height: 1; text-align: center; transform: rotate(10deg); }
.hero-stamp-number { font-size: 2.2rem; line-height: .85; }
.hero-stamp-label { font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }
.hero-stamp-play { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; margin-top: .3rem; border: 1px solid rgba(255, 255, 255, .85); border-radius: 50%; padding-left: .1rem; font-size: .55rem; line-height: 1; }
.asiento-card { position: absolute; z-index: 2; bottom: 2%; left: 0; width: min(50%, 20rem); margin: 0; padding: .7rem .7rem .9rem; background: var(--paper); box-shadow: var(--shadow); transform: rotate(-6deg); }
.asiento-card img { width: 100%; height: auto; object-fit: contain; }
.asiento-card figcaption { padding-top: .6rem; font-size: .72rem; text-transform: uppercase; }
.hero-scroll { position: absolute; bottom: 2rem; left: var(--pad); display: flex; gap: .7rem; color: var(--magenta); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }

.program, .show-detail { background: var(--lime); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 3rem; margin-bottom: 3.5rem; }
h2 { font-size: clamp(2.4rem, 4.6vw, 4.6rem); line-height: .88; }
.section-intro { max-width: 21rem; margin-bottom: .35rem; font-size: 1.15rem; line-height: 1.25; }
.day-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.day-tab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem 1rem; padding: 1.1rem 1.25rem; border: 0; background: transparent; font-size: clamp(1.2rem, 2.5vw, 2rem); text-align: left; cursor: pointer; transition: background .2s ease, color .2s ease; }
.day-tab + .day-tab { border-left: 1px solid var(--ink); }
.day-tab-date { color: var(--magenta); font-weight: 700; }
.day-tab small { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.day-tab-status { justify-self: end; padding: .4rem .55rem; border: 1px solid currentColor; color: var(--ink); font-size: .62rem; font-weight: 700; letter-spacing: .08em; line-height: 1; text-transform: uppercase; }
.day-tab:not(.is-active):hover { background: rgba(236, 0, 140, .08); }
.day-tab.is-active { background: var(--magenta); color: white; }
.day-tab.is-active .day-tab-date, .day-tab.is-active small { color: white; }
.day-tab.is-active .day-tab-status { border-color: white; background: white; color: var(--magenta); }
.day-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem 2rem; padding: 1.4rem 0 2.5rem; font-size: .85rem; text-transform: uppercase; }
.day-summary span:first-child { color: var(--magenta); font-weight: 700; }
.day-summary strong { font-size: 1.1rem; font-weight: 500; }
.program-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(4rem, 10vw, 11rem) 2.5rem; }
.show-card { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(10rem, .85fr); align-items: end; gap: 1.5rem; }
.show-card-offset { margin-top: 5rem; }
.show-image { position: relative; overflow: hidden; background: #ddd; }
.show-image img { width: 100%; aspect-ratio: .82; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.show-image:hover img, .show-image:focus-visible img { transform: scale(1.05); }
.image-arrow { position: absolute; right: .8rem; bottom: .8rem; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--lime); color: var(--ink); font-size: 1.2rem; }
.show-copy { align-self: end; }
.show-index { margin-bottom: 2rem; color: var(--magenta); font-size: .75rem; }
h3 { margin-bottom: 1.2rem; font-size: clamp(1.3rem, 2vw, 2.1rem); line-height: .95; font-weight: 700; letter-spacing: -.04em; }
.show-copy > p:not(.show-index) { max-width: 16rem; font-size: .95rem; line-height: 1.35; }
.show-network { display: grid; place-items: center; width: 6.5rem; margin: 1rem 0; padding: .5rem; background: white; }
.show-network img { display: block; width: 100%; height: auto; }
.text-link { display: inline-flex; align-items: center; gap: .7rem; border-bottom: 1px solid currentColor; padding: .35rem 0; font-size: .85rem; }
.text-link span { color: var(--magenta); }

.festival { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 10vw, 12rem); background: var(--magenta); color: white; }
.festival .eyebrow, .festival h2 em { color: var(--lime); }
.festival-aside { display: flex; flex-direction: column; justify-content: center; }
.giant-number { font-family: Jura, sans-serif; font-weight: 300; font-size: clamp(9rem, 23vw, 25rem); line-height: .7; letter-spacing: -.04em; }
.giant-label { margin-top: 1rem; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; }
.festival-copy { max-width: 44rem; align-self: center; }
.festival-body p { max-width: 37rem; font-size: clamp(1.08rem, 1.4vw, 1.25rem); line-height: 1.4; }
.festival-body p + p { margin-top: 1.5rem; }
.festival .text-link { margin-top: 1.5rem; }

.archive { background: var(--ink); color: var(--paper); }
.archive .eyebrow { color: var(--lime); }
.archive h2 em { color: var(--magenta); }
.archive .section-intro { color: rgba(246, 242, 234, .8); }
.archive-list { border-top: 1px solid rgba(246, 242, 234, .4); }
.archive-row { display: grid; grid-template-columns: 1fr 1.4fr 1fr auto; align-items: center; gap: 1.5rem; padding: 1.25rem 0; border-bottom: 1px solid rgba(246, 242, 234, .4); transition: color .25s ease, padding .25s ease; }
.archive-row:hover, .archive-row:focus-visible { padding-right: .8rem; padding-left: .8rem; color: var(--lime); }
.archive-year { font-family: Jura, sans-serif; font-weight: 300; font-size: clamp(2.6rem, 5vw, 5rem); line-height: .7; letter-spacing: -.03em; }
.archive-edition { font-size: 1.2rem; }
.archive-note { color: rgba(246, 242, 234, .7); font-size: .85rem; }
.archive-arrow { color: var(--magenta); font-size: 1.6rem; }

.show-detail { min-height: calc(100vh - 5.8rem); }
.detail-mode main > section:not(.show-detail) { display: none; }
.page-mode main > section:not(.static-page) { display: none; }

/*
 * 404 · un desvío coreográfico, no una pantalla técnica.
 *
 * Los dos cuatros y la fotografía forman una partitura de tres cuerpos. En
 * escritorio reaccionan al puntero con profundidades distintas; la lectura,
 * el enlace y el orden del documento no dependen de esa interacción.
 */
.not-found-mode { overflow-x: hidden; }
.not-found-mode .site-header { position: relative; background: var(--lime); backdrop-filter: none; }
.not-found-mode .site-nav,
.not-found-mode .menu-toggle,
.not-found-mode .site-footer { display: none; }
.not-found-mode main > section:not(.not-found) { display: none; }

.not-found {
  --drift-x: 0px;
  --drift-y: 0px;
  --counter-x: 0px;
  --counter-y: 0px;
  --pointer-x: 50%;
  --pointer-y: 45%;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(22rem, 1fr) auto auto;
  min-height: calc(100vh - 5.8rem);
  min-height: calc(100svh - 5.8rem);
  padding: clamp(1.4rem, 2.4vw, 2.8rem) var(--pad) 0;
  overflow: hidden;
  background: var(--lime);
}

.not-found::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle 18rem at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 100%);
  content: "";
  pointer-events: none;
  transition: background-position .12s linear;
}

.not-found-meta {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  border-top: 1px solid var(--ink);
  padding-top: .72rem;
  font-size: clamp(.66rem, .76vw, .78rem);
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.not-found-meta p { margin-bottom: 0; }

.not-found-score {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(10rem, 20vw, 22rem) minmax(0, 1fr);
  align-items: center;
  min-height: clamp(22rem, 54vh, 38rem);
  margin: clamp(-2.6rem, -3vw, -1rem) calc(var(--pad) * -.45) clamp(-3.8rem, -5vw, -1.8rem);
}

.not-found-digit {
  position: relative;
  font-family: "Jura", sans-serif;
  font-size: clamp(16rem, 36vw, 37rem);
  font-weight: 300;
  letter-spacing: -.16em;
  line-height: .62;
  text-align: center;
  transition: transform .18s ease-out;
  will-change: transform;
}

.not-found-digit-first {
  z-index: 1;
  color: var(--ink);
  transform: translate3d(var(--drift-x), var(--drift-y), 0) rotate(-2.5deg);
}

.not-found-digit-last {
  z-index: 3;
  color: var(--magenta);
  transform: translate3d(var(--counter-x), var(--counter-y), 0) rotate(2.5deg);
}

.not-found-portal {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: .62;
  margin: 0;
  border: clamp(.55rem, .9vw, .95rem) solid var(--ink);
  border-radius: 50%;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 1.2rem 1.2rem 0 var(--magenta);
  transform: translate3d(var(--counter-x), var(--drift-y), 0) rotate(-3deg);
  transition: transform .18s ease-out;
  will-change: transform;
}

.not-found-portal img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 51% 50%;
  filter: saturate(.84) contrast(1.08);
  transform: scale(1.14) translate3d(var(--drift-x), var(--counter-y), 0);
  transition: transform .2s ease-out;
  will-change: transform;
}

.not-found-portal-ring {
  position: absolute;
  inset: 5%;
  border: 1px solid rgba(238, 255, 1, .85);
  border-radius: inherit;
}

.not-found-scribble {
  position: absolute;
  z-index: 4;
  right: 7%;
  bottom: 16%;
  padding: .42rem .75rem;
  background: var(--ink);
  color: var(--lime);
  font-size: clamp(.62rem, .85vw, .82rem);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  transform: rotate(-7deg);
}

.not-found-message {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(15rem, .6fr);
  align-items: end;
  gap: clamp(2rem, 6vw, 7rem);
  padding-bottom: clamp(1.4rem, 2.5vw, 2.6rem);
}

.not-found-kicker {
  margin-bottom: .55rem;
  color: var(--magenta);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.not-found-message h1 {
  margin-bottom: 0;
  font-size: clamp(2.2rem, 5vw, 5.3rem);
  line-height: .84;
}

.not-found-message h1 em { color: var(--magenta); }
.not-found-return { max-width: 25rem; justify-self: end; }
.not-found-return p { max-width: 23rem; margin-bottom: 1.2rem; font-size: clamp(.92rem, 1.05vw, 1.05rem); line-height: 1.45; }
.not-found-return .button { width: 100%; }

.not-found-ticker {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  width: calc(100% + (2 * var(--pad)));
  height: 2.5rem;
  margin-left: calc(var(--pad) * -1);
  overflow: hidden;
  border-top: 1px solid var(--ink);
  background: var(--magenta);
  color: white;
  font-family: "Jura", sans-serif;
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: .18em;
  line-height: 2.5rem;
  white-space: nowrap;
}

.not-found-ticker div {
  flex: none;
  min-width: max-content;
  animation: not-found-ticker 18s linear infinite;
}

@keyframes not-found-ticker {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

/* Páginas institucionales migradas desde WordPress. */
.static-page { min-height: calc(100vh - 5.8rem); }
.page-heading { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.4rem); }
.page-heading h1 { font-size: clamp(2.2rem, 4.6vw, 4.4rem); line-height: .92; margin-bottom: 0; }
.page-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.page-copy { max-width: 42rem; font-size: clamp(1.02rem, 1.2vw, 1.2rem); line-height: 1.6; }
.page-copy p { margin-bottom: 1.3rem; }
.page-credits { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.page-credits p { margin-bottom: .4rem; font-size: .95rem; }
.page-aside { padding: 1.6rem 1.5rem; background: var(--paper); box-shadow: var(--shadow); }
.page-aside dl { margin: 0; }
.page-aside div { padding: .8rem 0; border-bottom: 1px solid var(--line); }
.page-aside div:last-child { border-bottom: 0; }
.page-aside dt { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; opacity: .65; }
.page-aside dd { margin: .25rem 0 0; font-size: 1.05rem; font-weight: 500; }
.page-documents { display: grid; gap: clamp(2rem, 4vw, 3rem); margin-top: 2.2rem; }
.page-documents-edition { display: grid; gap: .9rem; }
.page-documents-year { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; margin-bottom: 0; color: var(--magenta); font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.page-documents-year span { color: var(--ink); font-weight: 500; letter-spacing: .12em; opacity: .6; }
.page-document { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .3rem 1.4rem; padding: 1.1rem 1.3rem; border: 1px solid var(--ink); transition: background .25s ease, color .25s ease, transform .25s ease; }
.page-document:hover, .page-document:focus-visible { background: var(--ink); color: var(--lime); transform: translateY(-3px); }
.page-document-label { font-size: 1.15rem; font-weight: 500; }
.page-document-detail { grid-column: 1; font-size: .85rem; opacity: .7; }
.page-document-arrow { grid-column: 2; grid-row: 1 / span 2; font-size: 1.4rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; grid-column: 1 / -1; padding-top: 1.6rem; border-top: 1px solid rgba(246, 242, 234, .18); font-size: .88rem; }
.footer-links a { opacity: .78; transition: opacity .2s ease; }
.footer-links a:hover, .footer-links a:focus-visible { opacity: 1; text-decoration: underline; }
.detail-back { display: inline-block; margin-bottom: clamp(3rem, 7vw, 7rem); border-bottom: 1px solid currentColor; padding-bottom: .35rem; font-size: .85rem; }
.detail-heading { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(12rem, .3fr); align-items: end; gap: 2rem; }
.detail-heading h1 { max-width: 75rem; font-size: clamp(2.6rem, 5.6vw, 5.4rem); }
.detail-heading h1 em { color: var(--magenta); }
.detail-meta { justify-self: end; margin-bottom: 1.5rem; font-size: .9rem; line-height: 1.5; text-align: right; text-transform: uppercase; }
.detail-hero { width: 100%; max-height: 75vh; margin-top: 2rem; object-fit: cover; }
.detail-body { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(14rem, .55fr); gap: clamp(3rem, 9vw, 9rem); padding: clamp(3.5rem, 8vw, 8rem) 0; }
.detail-body-full { grid-template-columns: minmax(0, 1fr); }
.detail-copy { max-width: 48rem; }
.detail-copy p { font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.5; }
.detail-copy p + p { margin-top: 1.35rem; }
.detail-source { align-self: start; padding-top: .3rem; }
.detail-network { display: grid; place-items: center; width: 8rem; margin-bottom: 2rem; padding: .7rem; background: white; }
.detail-network img { display: block; width: 100%; height: auto; }
.detail-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.detail-gallery img { width: 100%; height: 100%; min-height: 22rem; object-fit: cover; }

.practical { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; background: var(--lime); }
.practical-access { max-width: 30rem; margin-top: clamp(1.6rem, 3vw, 2.4rem); font-size: clamp(.98rem, 1.05vw, 1.08rem); line-height: 1.6; }
.practical-access p { margin-bottom: .9rem; }
.practical-access p:last-child { margin-bottom: 0; }
.practical-details { align-self: end; }
.practical-details > div { display: flex; justify-content: space-between; gap: 1.5rem; padding: 1.2rem 0; border-top: 1px solid var(--line); }
.practical-details span { color: var(--magenta); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.practical-details strong { max-width: 15rem; font-weight: 500; text-align: right; }

.site-footer { display: grid; grid-template-columns: minmax(13rem, .7fr) minmax(0, 2fr) minmax(12rem, .7fr); gap: 3rem; padding: 3.2rem var(--pad) 1.5rem; background: var(--ink); color: var(--paper); }
.site-footer.footer-no-direction { grid-template-columns: minmax(13rem, .7fr) minmax(0, 2.65fr); }
.footer-brand { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: center; align-self: center; gap: .8rem; justify-self: center; text-align: center; }
.footer-brand .brand-mark { height: clamp(2.72rem, 4vw, 4rem); }
.footer-brand .brand-name { max-width: none; font-size: .72rem; line-height: 1; white-space: nowrap; text-align: center; text-transform: uppercase; }
.footer-partners { grid-column: 2; grid-row: 1 / span 2; }
.footer-partners-title { margin-bottom: 1rem; color: rgba(246, 242, 234, .65); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.footer-partner-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.partner-card { min-width: 0; margin: 0; }
.partner-logo-surface { display: grid; place-items: center; min-height: 8.5rem; padding: .9rem; background: white; }
.partner-logo-text { padding: 1.5rem; color: var(--ink); text-align: center; }
.partner-logo-text strong { max-width: 13rem; font-size: 1rem; font-weight: 500; line-height: 1.15; }
.partner-card img { width: auto; max-width: 100%; max-height: 5.8rem; object-fit: contain; }
.partner-card-city img { max-height: 7rem; }
.partner-card-network img { max-height: 6.4rem; }
.partner-card figcaption { margin-top: .65rem; color: rgba(246, 242, 234, .72); font-size: .68rem; letter-spacing: .06em; line-height: 1.25; text-transform: uppercase; }
.footer-direction { grid-column: 3; grid-row: 1 / span 2; justify-self: end; width: 100%; max-width: 12rem; margin-right: clamp(.5rem, 1.5vw, 1.5rem); }
.footer-direction-logo { display: block; width: fit-content; }
.footer-direction img { width: min(100%, 8.5rem); height: auto; aspect-ratio: 1; object-fit: contain; }
.footer-direction-logo:hover { opacity: .78; }
.footer-direction strong { display: block; margin-top: .8rem; font-size: 1rem; font-weight: 500; }
.footer-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid rgba(246, 242, 234, .25); color: rgba(246, 242, 234, .55); font-size: .72rem; }

:focus-visible { outline: 3px solid var(--magenta); outline-offset: 4px; }

@media (max-width: 820px) {
  .site-header { min-height: 4.7rem; }
  .site-header .brand-name { display: none; }
  .menu-toggle { display: block; }
  .site-nav { position: absolute; top: 100%; right: var(--pad); left: var(--pad); display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 1rem; border: 1px solid var(--ink); background: var(--paper); box-shadow: var(--shadow); }
  .menu-open .site-nav { display: flex; }
  .site-nav a { padding: .85rem .2rem; border-bottom: 1px solid var(--line); }
  .site-nav a:last-child { border-bottom: 0; }
  .not-found {
    grid-template-rows: auto minmax(18rem, 1fr) auto auto;
    min-height: calc(100vh - 4.7rem);
    min-height: calc(100svh - 4.7rem);
    padding-top: 1.2rem;
  }
  .not-found-score {
    grid-template-columns: minmax(0, 1fr) clamp(7.3rem, 24vw, 10rem) minmax(0, 1fr);
    min-height: clamp(18rem, 43vh, 26rem);
    margin-top: -1.5rem;
    margin-bottom: -1.8rem;
  }
  .not-found-digit { font-size: clamp(11rem, 40vw, 18rem); }
  .not-found-portal { box-shadow: .65rem .65rem 0 var(--magenta); }
  .not-found-message { grid-template-columns: minmax(0, 1.1fr) minmax(13rem, .9fr); gap: 2rem; }
  .not-found-message h1 { font-size: clamp(2.2rem, 7vw, 4rem); }
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 5rem; }
  .hero::before { top: 40%; left: 22%; width: 70vw; height: 70vw; }
  h1 { font-size: clamp(2.6rem, 11vw, 4.4rem); }
  /*
   * D-025 e I-027, que hablan de «el cartel» porque se escribieron antes de
   * que la dirección aclarase que esa imagen es el asiento de papel (D-027).
   * La geometría que describen es la misma; solo cambia cómo se llama.
   *
   * En escritorio el asiento cuelga por debajo de la fotografía y solo le pisa
   * la esquina, un 3 % de su alto. En una sola columna se le subía encima hasta
   * taparle el 73 %, que es justo donde está el público.
   *
   * La causa es que la foto, el asiento y el sello van en posición absoluta
   * dentro de `.hero-art`, así que quien decidía el solape era el alto de ese
   * contenedor: 31 rem fijos que no daban sitio para que el asiento colgara.
   * Subir ese alto tampoco servía. El de cada edición tiene su propia forma
   * —el de 2022 es vertical y el de 2026 casi cuadrado—, y anclando la tarjeta
   * al borde inferior del contenedor, cuanto más alto es más sube y más tapa:
   * con un alto fijo el solape iba del 21 % en 2026 al 45 % en 2022.
   *
   * Aquí los dos elementos vuelven al flujo normal, uno detrás de otro, y el
   * solape lo fija un margen negativo. Al ser un porcentaje se calcula sobre
   * el **ancho** del contenedor, no sobre el alto del asiento, de modo que sale
   * el mismo solape en las cinco ediciones y en cualquier ancho de pantalla.
   */
  .hero-art { min-height: 0; margin-top: 1rem; display: flex; flex-direction: column; align-items: flex-start; }
  .hero-photo-wrap { position: relative; right: auto; align-self: flex-end; width: 88%; }
  .asiento-card { position: relative; bottom: auto; left: auto; width: 42%; margin-top: -12%; }
  .hero-scroll { display: none; }
  .section-heading { display: block; }
  .section-intro { margin-top: 1.5rem; }
  .program-grid { grid-template-columns: 1fr; gap: 5rem; }
  .show-card-offset { margin-top: 0; }
  .show-card { grid-template-columns: minmax(0, 1.1fr) minmax(8rem, .9fr); }
  .detail-heading, .detail-body { grid-template-columns: 1fr; }
  .detail-meta { justify-self: start; text-align: left; }
  .detail-gallery { grid-template-columns: 1fr 1fr; }
  .festival, .practical { grid-template-columns: 1fr; gap: 3rem; }
  .giant-number { font-size: 12rem; }
  .archive-row { grid-template-columns: .75fr 1.2fr 1fr auto; gap: .8rem; }
  .archive-edition { font-size: 1rem; }
  .site-footer, .site-footer.footer-no-direction { grid-template-columns: 1fr; }
  .footer-brand, .footer-partners, .footer-direction { grid-column: auto; grid-row: auto; }
  .footer-direction { justify-self: start; }
  .footer-bottom { grid-column: auto; flex-direction: column; }
}

@media (max-width: 520px) {
  .section-pad { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .edition-choreography { height: 6.2rem; margin-bottom: 1.35rem; }
  .edition-lockup { gap: .7rem; }
  .edition-ordinal { font-size: clamp(5.1rem, 24vw, 6.1rem); }
  .edition-word { margin-bottom: .4rem; font-size: clamp(1.05rem, 5.2vw, 1.35rem); letter-spacing: .09em; }
  .not-found { grid-template-rows: auto minmax(15rem, 1fr) auto auto; padding-top: .9rem; }
  .not-found-meta p:last-child { display: none; }
  .not-found-score {
    grid-template-columns: minmax(0, 1fr) clamp(6.6rem, 27vw, 8rem) minmax(0, 1fr);
    min-height: clamp(15rem, 37vh, 20rem);
    margin: -.8rem calc(var(--pad) * -.65) -1rem;
  }
  .not-found-digit { font-size: clamp(9.8rem, 41vw, 12rem); }
  .not-found-scribble { right: 2%; bottom: 12%; font-size: .52rem; }
  .not-found-message { grid-template-columns: 1fr; align-items: start; gap: 1.15rem; padding-bottom: 1.2rem; }
  .not-found-message h1 { font-size: clamp(2.35rem, 11vw, 3.2rem); }
  .not-found-return { display: grid; grid-template-columns: 1fr; gap: .8rem; justify-self: stretch; max-width: none; }
  .not-found-return p { margin-bottom: 0; font-size: .88rem; }
  .not-found-return .button { min-width: 0; padding-top: .72rem; padding-bottom: .72rem; }
  .not-found-ticker { height: 2rem; font-size: .62rem; line-height: 2rem; }
  /* D-025. En móvil el asiento se queda en el mismo 44 % de siempre: a este
   * ancho su texto ya no se lee, hace de imagen, y encogerlo más no aporta. */
  .asiento-card { width: 44%; }
  .hero-stamp { right: -1rem; bottom: -1.5rem; width: 5.8rem; height: 5.8rem; }
  .hero-stamp-number { font-size: 1.7rem; }
  .hero-stamp-play { width: 1.25rem; height: 1.25rem; font-size: .5rem; }
  .day-tab { display: block; padding: 1rem; }
  .day-tab small { display: block; margin-top: .35rem; }
  .day-tab-status { display: inline-block; margin-top: .8rem; }
  .show-card { grid-template-columns: 1fr; }
  .show-copy { padding-left: 1rem; }
  .show-index { margin-bottom: .8rem; }
  .archive-row { grid-template-columns: .75fr 1fr auto; }
  .archive-note { display: none; }
  .practical-details > div { display: block; }
  .practical-details strong { display: block; margin-top: .4rem; text-align: left; }
  .footer-partner-grid { grid-template-columns: 1fr; }
  .detail-gallery { grid-template-columns: 1fr; }
  .detail-gallery img { min-height: 18rem; }
}

@media (max-width: 820px) {
  .page-body { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .not-found * { transition: none !important; }
  .not-found-ticker div { animation: none; }
  .edition-particles { display: none; }
  .edition-choreography::before,
  .edition-choreography::after { animation: none !important; }
  .js .edition-choreography .edition-lockup { opacity: 1 !important; filter: none !important; }
}