/* Biópera · estilos del sitio.
   Fondo negro de sala, títulos en Outfit fina, cuerpo en Instrument Sans y etiquetas en
   Silkscreen. Un solo acento de color, el amarillo, para las frases clave, el botón
   principal y el hover; el resto del color lo ponen las fotos. /booking invierte la
   paleta: el crema pasa a ser el fondo y el negro, el texto. */

:root {
  --negro: #000;
  --crema: #ECE9E2;
  --amarillo: #F2D64B;

  /* Paleta de la página: oscura por defecto, la clara la redefine .claro. */
  --fondo: #000;
  --texto: #ECE9E2;
  --cuerpo: #C9C5BC;
  --etiqueta: #9A968D;
  --linea: rgba(236, 233, 226, 0.2);
  --linea-suave: rgba(236, 233, 226, 0.12);
  --acento: #F2D64B;
  --hover: #F2D64B;
  --foco: #F2D64B;

  --margen: clamp(20px, 3.9vw, 56px);
  --aire: clamp(88px, 9.7vw, 140px);
  --hueco: clamp(32px, 5vw, 72px);
  --alto-header: 82px;
}

/* La paleta clara: mismo layout, fondo crema y texto negro. El amarillo de texto se
   oscurece lo mínimo para el contraste: 3:1 en títulos (#9D840B) y 4,5:1 en texto chico
   (#7B6809). El de relleno del botón principal no cambia. */
.claro {
  --fondo: #ECE9E2;
  --texto: #000;
  --cuerpo: #3A3935;
  --etiqueta: #5E5C56;
  --linea: rgba(0, 0, 0, 0.22);
  --linea-suave: rgba(0, 0, 0, 0.14);
  --acento: #9D840B;
  --hover: #7B6809;
  --foco: #000;
}

/* El menú es siempre oscuro, también sobre /booking. */
.oscuro {
  --fondo: #000;
  --texto: #ECE9E2;
  --cuerpo: #C9C5BC;
  --etiqueta: #9A968D;
  --linea: rgba(236, 233, 226, 0.2);
  --acento: #F2D64B;
  --hover: #F2D64B;
  --foco: #F2D64B;
}

html { scroll-padding-top: calc(var(--alto-header) + 24px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--fondo); color: var(--texto); font-family: "Instrument Sans", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; }
a { color: var(--texto); text-decoration: none; }
a:hover { color: var(--hover); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: 2px; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Titulares en Outfit, en peso fino. Cada uno declara su tamaño de escritorio en --t
   (sin unidad) y en el celular baja hasta la mitad más 6 px, siguiendo el ancho. */
.disp { font-family: "Outfit", "Avenir Next", "Trebuchet MS", sans-serif; font-weight: 300; letter-spacing: -0.02em; line-height: 1.08; --t: 43; font-size: clamp(calc(var(--t) * 0.5px + 6px), calc(var(--t) * 0.0694vw), calc(var(--t) * 1px)); margin: 0; overflow-wrap: break-word; text-wrap: balance; }
.disp em { font-style: normal; color: var(--acento); }

/* Los resaltados son por donde pasa la señal: quietos se leen limpios, y de a ratos se
   interfieren. Llegan a la pantalla escritos en monoespaciada, como un dato crudo, y al
   entrar en vista cada palabra se resuelve en la Outfit con un corte rojo-cian como el de
   los lentes 3D; después, cada tanto, uno de los resaltados a la vista vuelve un instante
   a la monoespaciada, y lo mismo al pasarle el cursor. Con movimiento reducido quedan
   limpios y quietos.
   Cada palabra tiene tres capas: el texto real en Outfit (.senal-o), que es el que ocupa
   lugar y por eso el renglón nunca se mueve; la monoespaciada (::before), y una copia en
   Outfit con el corrimiento de color para los cortes (::after). La monoespaciada es una
   caja con margen negativo, así que no suma ancho, y alineada a la línea de base de la
   palabra; el script le calcula el espaciado (--ls), el ancho (--wm) y el corrimiento
   (--dx) para que ocupe lo mismo que la palabra en Outfit. */
.senal-p { position: relative; display: inline-block; }
.senal-p::before { content: attr(data-t); display: inline-block; position: relative; left: var(--dx, 0px); width: var(--wm, 0px); margin-right: calc(-1 * var(--wm, 0px)); font-family: "Inconsolata", ui-monospace, monospace; font-weight: 400; font-size: 1.07em; line-height: 0.9; letter-spacing: var(--ls, 0px); white-space: nowrap; opacity: 0; pointer-events: none; }
.senal-p::after { content: attr(data-t); position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; pointer-events: none; text-shadow: -2px 0 rgba(255,61,177,0.85), 2px 0 rgba(55,229,255,0.85); }
.senal.espera .senal-o, .senal.pendiente .senal-o { opacity: 0; }
.senal.pendiente .senal-p::before { opacity: 1; }
.senal.resuelve .senal-o { animation: senal-o-resuelve 0.7s steps(1, end) both; animation-delay: calc(var(--i) * 70ms); }
.senal.resuelve .senal-p::before { animation: senal-m-resuelve 0.7s steps(1, end) both; animation-delay: calc(var(--i) * 70ms); }
.senal.resuelve .senal-p::after { animation: senal-c-resuelve 0.7s steps(1, end) both; animation-delay: calc(var(--i) * 70ms); }
.senal.latido .senal-o { animation: senal-o-latido 0.36s steps(1, end) both; animation-delay: calc(var(--i) * 40ms); }
.senal.latido .senal-p::before { animation: senal-m-latido 0.36s steps(1, end) both; animation-delay: calc(var(--i) * 40ms); }
.senal.latido .senal-p::after { animation: senal-c-latido 0.36s steps(1, end) both; animation-delay: calc(var(--i) * 40ms); }
/* Resolución: la monoespaciada se sostiene, se corta en franjas intercaladas con la
   Outfit desplazada en rojo-cian, y queda la Outfit limpia. */
@keyframes senal-o-resuelve { 0%, 60% { opacity: 0; } 61%, 100% { opacity: 1; } }
/* Los cortes llevan márgenes negativos en los bordes de afuera para no recortar tildes
   ni descendentes, que se salen un poco de la caja de cada capa. */
@keyframes senal-m-resuelve {
  0%, 30% { opacity: 1; transform: none; clip-path: none; }
  31% { opacity: 1; transform: translateX(-3px); clip-path: inset(-40% -10% 52% -10%); }
  42% { opacity: 1; transform: translateX(2px); clip-path: inset(58% -10% -40% -10%); }
  52% { opacity: 1; transform: translateX(-1px); clip-path: inset(-40% -10% 70% -10%); }
  61%, 100% { opacity: 0; transform: none; clip-path: none; }
}
@keyframes senal-c-resuelve {
  0%, 30% { opacity: 0; }
  31% { opacity: 1; transform: translateX(2px); clip-path: inset(48% -10% -40% -10%); }
  42% { opacity: 1; transform: translateX(-2px); clip-path: inset(-40% -10% 42% -10%); }
  52% { opacity: 1; transform: translateX(1px); clip-path: inset(30% -10% -40% -10%); }
  61%, 100% { opacity: 0; transform: none; clip-path: none; }
}
/* Latido: la palabra vuelve un instante a la monoespaciada, cortada con la Outfit. */
@keyframes senal-o-latido { 0%, 20% { opacity: 1; } 21%, 62% { opacity: 0; } 63%, 100% { opacity: 1; } }
@keyframes senal-m-latido {
  0%, 20% { opacity: 0; }
  21% { opacity: 1; transform: translateX(-2px); clip-path: inset(-40% -10% 55% -10%); }
  42% { opacity: 1; transform: translateX(2px); clip-path: inset(50% -10% -40% -10%); }
  63%, 100% { opacity: 0; transform: none; clip-path: none; }
}
@keyframes senal-c-latido {
  0%, 20% { opacity: 0; }
  21% { opacity: 1; transform: translateX(2px); clip-path: inset(45% -10% -40% -10%); }
  42% { opacity: 1; transform: translateX(-1px); clip-path: inset(-40% -10% 50% -10%); }
  63%, 100% { opacity: 0; transform: none; clip-path: none; }
}
@media (prefers-reduced-motion: reduce) {
  .senal .senal-o, .senal .senal-p::before, .senal .senal-p::after { animation: none !important; }
}

/* Etiquetas en tipografía bitmap: el guiño retro-pixel, chico y en gris para que no grite. */
.eyebrow { font-family: "Silkscreen", "Instrument Sans", monospace; font-size: 10px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--etiqueta); margin: 0; }
.body { font-size: clamp(17px, 1.25vw, 18px); line-height: 1.6; color: var(--cuerpo); margin: 0; }
.body strong { color: var(--texto); font-weight: 600; }
.body-grande { font-size: clamp(18px, 1.46vw, 21px); }
.body-chico { font-size: 16px; }
.body-mini { font-size: 15px; }
.texto-largo { max-width: 62ch; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1px solid var(--linea); border-color: color-mix(in srgb, var(--texto) 35%, transparent); font-size: 15px; font-weight: 500; letter-spacing: 0.01em; text-align: center; box-sizing: border-box; color: var(--texto); background: transparent; }
.btn:hover { border-color: var(--texto); }
.btn-solid { background: var(--amarillo); color: #000; border-color: var(--amarillo); }
/* El hover general pinta el texto de amarillo; sobre el botón amarillo se perdería. */
.btn-solid:hover { color: #000; background: var(--crema); border-color: var(--crema); }
.btn-chico { min-height: 46px; padding: 0 22px; font-size: 14px; }
/* Sobre fondo claro el relleno amarillo casi no se distingue del crema: lleva filete
   negro, y el hover lo invierte a negro en lugar de pasarlo al crema del fondo. */
.claro .btn-solid { border-color: #000; }
.claro .btn-solid:hover { background: #000; color: var(--amarillo); border-color: #000; }
.claro .btn:not(.btn-solid):not(.btn-negro):hover { background: #000; color: var(--crema); border-color: #000; }
/* El botón negro del bloque claro de la home: al pasar el cursor toma el amarillo. */
.btn-negro, .claro .btn-negro { background: #000; color: var(--crema); border-color: #000; }
.btn-negro:hover, .claro .btn-negro:hover { background: var(--amarillo); color: #000; border-color: #000; }
.botonera { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
/* La dirección a la vista, para quien no tiene un programa de correo. */
.correo-visible { font-size: 14px; color: var(--etiqueta); user-select: all; }
.enlace-subrayado { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }

/* Red de micelio de fondo, apenas visible, en el mismo crema de la página: la dibuja el
   script, deriva sola y se acerca al cursor. Empieza debajo del video. */
.net { position: absolute; left: 0; top: 0; width: 100%; height: 3400px; opacity: 0.2; pointer-events: none; overflow: hidden; z-index: 0; }
.net svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.net .hifa { stroke: var(--texto); stroke-opacity: 0.5; stroke-width: 0.7; }
.net .filamento { stroke: var(--texto); stroke-opacity: 0.3; stroke-width: 0.6; }
.net .nodo { fill: var(--texto); }

/* Grano de película sobre toda la página: una textura fija y tenue que unifica fotos de
   distinta calidad y le da a la pantalla algo de lo analógico que tiene la obra. Se funde
   en modo overlay, que no toca el negro puro: el grano vive en las fotos, el video y la
   letra, y el fondo queda negro. Sobre el fondo claro de /booking se vería: ahí no va. */
body::after { content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: 0.28; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>"); background-size: 200px 200px; }
body.claro::after { content: none; }

/* Aparición sutil: cada bloque entra desde un poco más abajo al llegar a pantalla. */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1); }
.reveal.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* Fotos: cada una en su marco, con el crédito encima, abajo a la izquierda. */
.foto { position: relative; overflow: hidden; border-radius: 4px; margin: 0; background: #0d0d0d; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.credit { position: absolute; left: 14px; bottom: 12px; right: 14px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(236,233,226,0.78); text-shadow: 0 0 6px rgba(0,0,0,0.9); pointer-events: none; }
.credit-derecha { left: auto; text-align: right; }
/* A sangre: la foto ocupa el ancho entero de la ventana, fuera de los márgenes. */
.sangre { position: relative; width: 100%; overflow: hidden; margin: 0 0 var(--aire); }
.sangre img { width: 100%; height: 100%; object-fit: cover; }
.sangre .credit { left: var(--margen); right: var(--margen); }

/* Filete de píxeles: la línea se hace de puntos, como una trama de pantalla. */
.rule { height: 2px; background-image: linear-gradient(90deg, color-mix(in srgb, var(--texto) 35%, transparent) 50%, transparent 50%); background-size: 6px 2px; }
/* Sombra anaglifa: el rojo-cian de los lentes 3D de la función, apenas insinuado. */
.anaglifo { text-shadow: -1.5px 0 rgba(255,61,177,0.5), 1.5px 0 rgba(55,229,255,0.5); }
/* El logotipo es el original de la obra, en blanco y tal como viene: sin sombra ni
   retoque. Sobre fondo claro se invierte a negro. */
.logo { display: block; width: auto; height: 50px; }
.claro .site-header .logo { filter: invert(1); }
/* En el menú y en el pie el logo va de fondo: una foto no se repite dentro de una página,
   y el archivo del logo tampoco. */
.logo-fondo { aspect-ratio: 1447 / 265; background: url("/img/logo-biopera.png") left center / contain no-repeat; }
/* Retícula: la grilla con círculos concéntricos y figuras básicas del logo, de fondo. */
.reticula { position: absolute; pointer-events: none; color: var(--texto); opacity: 0.16; }

/* ---------- Estructura ---------- */

main { position: relative; }
.seccion { position: relative; z-index: 1; box-sizing: border-box; max-width: 1440px; margin: 0 auto var(--aire); padding: 0 var(--margen); }
.columnas { display: grid; gap: var(--hueco); }
.c-5-7 { grid-template-columns: 5fr 7fr; }
.c-7-5 { grid-template-columns: 7fr 5fr; }
.c-4-8 { grid-template-columns: 4fr 8fr; }
.c-1-1, .c-mitades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.columnas > * { min-width: 0; }
.alinear-final { align-items: end; }
.alinear-centro { align-items: center; }
.apilado { display: flex; flex-direction: column; gap: 24px; }
.apilado-chico { display: flex; flex-direction: column; gap: 16px; }
.con-filete { padding-top: 20px; border-top: 1px solid var(--linea); }

.con-reticula { overflow: hidden; }

@media (max-width: 899px) {
  .c-5-7, .c-7-5, .c-4-8, .c-mitades { grid-template-columns: minmax(0, 1fr); }
  .c-mitades { row-gap: var(--aire); }
  .c-3 { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  /* En una columna, la foto que en escritorio va a la derecha pasa arriba del texto. */
  .foto-primero > .foto { order: -1; }
}
@media (max-width: 599px) {
  .c-1-1 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Header ---------- */

/* Fijo y translúcido: al bajar, toma un velo del color de la página para seguir ahí,
   medio fantasma, sin tapar el contenido. */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 40; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 32px var(--margen); transition: padding 0.3s, background-color 0.3s; }
.site-header.con-velo { padding-top: 16px; padding-bottom: 16px; background: color-mix(in srgb, var(--fondo) 62%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.site-header .logo-enlace { display: block; flex: none; }
.acciones { display: flex; align-items: center; gap: 20px; }
.idioma { display: flex; align-items: center; gap: 4px; font-size: 13px; letter-spacing: 0.12em; }
.idioma a, .idioma span { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; }
.idioma a { color: var(--etiqueta); }
.idioma a:hover { color: var(--hover); }
.idioma [aria-current] { color: var(--texto); }
.menu-boton { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--texto); font: inherit; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.menu-boton svg { stroke: currentColor; flex: none; }
.menu-boton:hover { color: var(--hover); }
html:not(.js) .menu-boton { display: none; }

@media (max-width: 767px) {
  :root { --alto-header: 60px; }
  .site-header { padding-top: 18px; padding-bottom: 18px; }
  .site-header.con-velo { padding-top: 12px; padding-bottom: 12px; }
  .logo { height: 32px; }
  .site-header .logo { height: 30px; }
  .acciones { gap: 8px; }
}
@media (max-width: 419px) {
  .site-header .logo { height: 26px; }
  .menu-boton .menu-boton-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .menu-boton { min-width: 44px; justify-content: center; }
}

/* ---------- Hero ---------- */

/* La primera pantalla ocupa la ventana entera. En iOS la altura chica de la ventana
   (svh) deja el título y los botones por encima de la barra del navegador. */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; margin-bottom: 40px; }
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 44%, rgba(0,0,0,0.66) 80%, #000 100%); }
.hero-texto { position: absolute; left: var(--margen); right: var(--margen); bottom: max(72px, calc(env(safe-area-inset-bottom) + 40px)); display: flex; flex-direction: column; gap: 20px; max-width: 800px; }
.hero-texto .body { font-size: 17px; max-width: 520px; color: #DAD6CD; }
.hero-texto .disp { font-size: clamp(33px, 3.2vw, 46px); }
@media (max-width: 767px) {
  .hero { min-height: 520px; }
  .hero-texto { bottom: max(40px, calc(env(safe-area-inset-bottom) + 28px)); gap: 16px; }
  .hero-texto .body { font-size: 16px; line-height: 1.5; }
  .hero-velo { background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0.15) 38%, rgba(0,0,0,0.78) 68%, #000 100%); }
}

/* ---------- Secciones de la home ---------- */

.foto-alta { height: 760px; }
.foto-media { height: 620px; }
.foto-musica { height: 700px; }
@media (max-width: 899px) {
  .foto-alta, .foto-media, .foto-musica { height: auto; aspect-ratio: 4 / 5; }
}

/* El relato: cuatro fotos en 2 × 2, sin texto; en el celular, una columna. */
.relato-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.relato-fotos .foto { aspect-ratio: 4 / 3; }
@media (max-width: 599px) { .relato-fotos { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

.foto-electrodo { aspect-ratio: 4 / 5; align-self: start; }

/* Por qué ninguna función es igual: centrado, entre filetes. */
.irrepetible { padding-top: clamp(56px, 6.7vw, 96px); padding-bottom: clamp(56px, 6.7vw, 96px); border-top: 1px solid var(--linea-suave); border-bottom: 1px solid var(--linea-suave); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 36px; margin-left: var(--margen); margin-right: var(--margen); padding-left: clamp(0px, 5.5vw, 80px); padding-right: clamp(0px, 5.5vw, 80px); }
@media (min-width: 1552px) { .irrepetible { margin-left: auto; margin-right: auto; max-width: calc(1440px - 2 * var(--margen)); } }
.irrepetible { margin-bottom: clamp(48px, 5vw, 72px); }
.irrepetible .c-1-1 { text-align: left; max-width: 1100px; gap: 48px; }
.irrepetible h2 { max-width: 1000px; }

/* La franja de corte: cerca de 3:1 en escritorio y 2:1 en el celular. */
.franja { aspect-ratio: 3 / 1; }
.franja img { object-position: center 40%; }
@media (max-width: 767px) { .franja { aspect-ratio: 2 / 1; } }

.lista-reune { display: flex; flex-direction: column; }
.lista-reune li { padding: 16px 0; border-top: 1px solid var(--linea-suave); list-style: none; }
.lista-reune li:last-child { border-bottom: 1px solid var(--linea-suave); }
.lista-reune { margin: 0; padding: 0; }
.diferenciales { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.diferenciales > div { padding-top: 16px; border-top: 1px solid var(--linea); }
.diferenciales .disp { margin-bottom: 6px; }
@media (max-width: 599px) { .diferenciales { grid-template-columns: minmax(0, 1fr); } }

.tarjeta-foto { height: 300px; }
.bio-foto { height: 320px; }
@media (max-width: 899px) { .tarjeta-foto, .bio-foto { height: auto; aspect-ratio: 4 / 3; } }
.bio-rol { font-size: 13px; letter-spacing: 0.04em; line-height: 1.5; color: var(--etiqueta); margin: 0; }
.bio-enlace { font-size: 13px; letter-spacing: 0.1em; align-self: flex-start; min-height: 24px; display: inline-flex; align-items: center; }

/* Fechas: la tarjeta de la próxima edición, o el estado sin fechas. */
.fechas { padding-top: clamp(56px, 6vw, 88px); padding-bottom: clamp(56px, 6vw, 88px); border-top: 1px solid var(--linea-suave); border-bottom: 1px solid var(--linea-suave); display: flex; flex-direction: column; gap: 24px; align-items: center; text-align: center; margin-left: var(--margen); margin-right: var(--margen); padding-left: 0; padding-right: 0; }
@media (min-width: 1552px) { .fechas { margin-left: auto; margin-right: auto; max-width: calc(1440px - 2 * var(--margen)); } }
.fechas > * { max-width: 100%; box-sizing: border-box; }
.fechas .body { max-width: 560px; }
.tarjeta-fecha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; text-align: left; width: min(920px, 100%); margin: 0; }
.tarjeta-fecha .disp { --t: 34; }
/* La fecha y los horarios se cortan entre sí, nunca por dentro: el «·» queda con la fecha. */
.sin-corte, .tarjeta-fecha time { white-space: nowrap; }
.tarjeta-datos { margin-top: 12px; }
@media (max-width: 767px) { .tarjeta-fecha { grid-template-columns: minmax(0, 1fr); } }

/* Prueba social: las cifras sobre la foto 9 del Planetario, a sangre. */
.recorrido { height: 720px; margin-bottom: var(--aire); }
.recorrido > img { position: absolute; inset: 0; opacity: 0.6; }
.recorrido-velo { position: absolute; inset: 0; background: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0.2) 60%, #000 100%); }
.recorrido-texto { position: absolute; inset: 0; box-sizing: border-box; max-width: 1440px; margin: 0 auto; padding: 0 var(--margen); display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.cifras { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px clamp(40px, 6.7vw, 96px); margin: 0; padding: 0; list-style: none; }
.cifras .disp { --t: 110; line-height: 1; display: block; }
.cifras .eyebrow { display: block; }
.cifra-pre { margin-bottom: 6px; }
@media (max-width: 767px) {
  .recorrido { height: auto; min-height: 640px; }
  .recorrido-texto { position: relative; padding-top: 96px; padding-bottom: 96px; }
  .cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
}

/* Prensa: tres notas con una foto de Biópera cada una. */
.encabezado-seccion { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 32px; }
.nota { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.nota .foto { aspect-ratio: 3 / 2; }
.nota blockquote { margin: 0; }
.nota .disp { --t: 26; line-height: 1.25; font-size: clamp(21px, 1.8vw, 26px); }
.nota-medio { margin-top: auto; }
.nota-medio a { display: inline-flex; min-height: 24px; align-items: center; color: var(--etiqueta); text-decoration: underline; text-underline-offset: 4px; }
.nota-medio a:hover { color: var(--hover); }

/* Preguntas frecuentes: acordeón nativo, cerrado al cargar. */
.faq-lista { display: flex; flex-direction: column; border-bottom: 1px solid var(--linea-suave); }
.faq-lista details { border-top: 1px solid var(--linea-suave); }
.faq-lista summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font-size: clamp(18px, 1.4vw, 20px); cursor: pointer; list-style: none; }
.faq-lista summary::-webkit-details-marker { display: none; }
.faq-lista summary::after { content: "+"; font-size: 26px; line-height: 1; color: var(--etiqueta); flex: none; }
.faq-lista details[open] summary::after { content: "\2212"; }
.faq-lista summary:hover { color: var(--hover); }
.faq-lista details .body { margin: 0 0 24px; max-width: 70ch; }

/* Merch: el texto y, debajo, la foto de cierre a todo el ancho. */
.merch { margin-bottom: 56px; }
.merch-texto { max-width: 720px; }
.cierre-merch { aspect-ratio: 2 / 1; }
.cierre-merch img { object-position: center 30%; }

/* Contacto y cierre: el bloque claro de la home. */
.cierre { box-sizing: border-box; padding: clamp(48px, 6.7vw, 96px) clamp(24px, 5.5vw, 80px); background: var(--fondo); color: var(--texto); border-radius: 4px; display: grid; grid-template-columns: 7fr 5fr; gap: var(--hueco); align-items: center; }
.cierre-aviso { font-size: 13px; line-height: 1.6; color: var(--etiqueta); margin: 0; }
@media (max-width: 899px) { .cierre { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Pie ---------- */

.pie { position: relative; z-index: 1; box-sizing: border-box; max-width: 1440px; margin: 0 auto; padding: 0 var(--margen) calc(56px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 32px; }
.pie-grilla { display: grid; grid-template-columns: 5fr 3fr 3fr; gap: 24px; font-size: 14px; color: var(--etiqueta); }
.pie-grilla > div { display: flex; flex-direction: column; gap: 8px; }
.pie-grilla p { margin: 0; }
.pie-grilla a { color: var(--etiqueta); display: inline-flex; min-height: 24px; align-items: center; align-self: flex-start; }
.pie-grilla a:hover { color: var(--hover); }
.pie .logo { height: 44px; align-self: flex-start; margin-bottom: 10px; }
.claro .pie .logo { filter: invert(1); }
.pie-creditos { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--etiqueta); margin: 0; }
.pie .idioma { margin-left: -8px; }
@media (max-width: 767px) {
  .pie-grilla { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* ---------- Botón flotante ---------- */

/* Fijo abajo a la derecha, respetando el área segura. Se oculta mientras el hero está a
   la vista, con el menú abierto y sobre los bloques que ya tienen su propio llamado
   (fechas, cierre, pie). Sin JavaScript no puede saber dónde está: no aparece. */
.flotante { position: fixed; right: max(var(--margen), env(safe-area-inset-right)); bottom: calc(max(24px, env(safe-area-inset-bottom)) + 8px); z-index: 30; box-shadow: 0 10px 30px rgba(0,0,0,0.45); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.3s, transform 0.3s, visibility 0s linear 0.3s; }
.flotante.visible { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s, transform 0.3s, visibility 0s; }
.flotante .corto { display: none; }
@media (max-width: 767px) {
  .flotante .largo { display: none; }
  .flotante .corto { display: inline; }
}
html:not(.js) .flotante { display: none; }
@media (prefers-reduced-motion: reduce) { .flotante, .flotante.visible { transition: none; transform: none; } }

/* ---------- Menú red ---------- */

/* Las secciones son nodos de una red de micelio unidos por hifas. En pantallas grandes la
   red deriva despacio por sí sola, se acerca al cursor y, al pasar por un nodo, la señal
   recorre sus hifas. En pantallas chicas las etiquetas quedan quietas, una debajo de la
   otra sobre la hifa, con el área táctil entera. */
.menu-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,0.94); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); color: var(--texto); overflow: hidden; }
.menu-overlay[hidden] { display: none; }
.menu-red { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.menu-overlay .hifa { stroke: #ECE9E2; stroke-opacity: 0.28; stroke-width: 1; transition: stroke-opacity 0.35s, stroke 0.35s; }
.menu-overlay .hifa.viva { stroke: #F2D64B; stroke-opacity: 1; stroke-width: 1.5; stroke-dasharray: 5 9; animation: senal 1s linear infinite; }
.menu-overlay .filamento { stroke: #ECE9E2; stroke-opacity: 0.18; stroke-width: 0.8; transition: stroke-opacity 0.35s, stroke 0.35s; }
.menu-overlay .filamento.viva { stroke: #F2D64B; stroke-opacity: 0.7; }
@keyframes senal { to { stroke-dashoffset: -28; } }
@media (prefers-reduced-motion: reduce) { .menu-overlay .hifa.viva { animation: none; } }
.menu-cabeza { position: absolute; top: 32px; left: var(--margen); right: var(--margen); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.menu-lista { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.menu-nodo { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 16px; min-height: 44px; cursor: pointer; transform: translate(-6px, -50%); }
.menu-nodo[data-lado="izq"] { flex-direction: row-reverse; transform: translate(calc(-100% + 6px), -50%); }
.menu-punto { width: 12px; height: 12px; border-radius: 999px; border: 1px solid #ECE9E2; background: #000; flex: none; box-sizing: border-box; transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s, border-color 0.3s; }
.menu-nodo:hover .menu-punto, .menu-nodo:focus-visible .menu-punto { background: #F2D64B; border-color: #F2D64B; transform: scale(1.5); box-shadow: 0 0 22px rgba(242,214,75,0.7); }
.menu-nodo.vecino .menu-punto { border-color: #F2D64B; box-shadow: 0 0 12px rgba(242,214,75,0.45); }
.menu-num { font-family: "Silkscreen", monospace; font-size: 10px; color: #8A867D; }
.menu-etiqueta { font-family: "Outfit", sans-serif; font-weight: 300; font-size: 28px; letter-spacing: -0.02em; white-space: nowrap; transition: color 0.3s; }
.menu-etiqueta em { font-style: normal; color: #F2D64B; }
.menu-nodo:hover .menu-etiqueta { color: #F2D64B; }
.menu-pie { position: absolute; bottom: calc(48px + env(safe-area-inset-bottom)); left: var(--margen); right: var(--margen); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 8px 24px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: #9A968D; }
.menu-pie a { color: #9A968D; display: inline-flex; min-height: 32px; align-items: center; }
.menu-pie a:hover { color: #F2D64B; }
.menu-pie .idioma { margin-left: -8px; }
.menu-pie .idioma [aria-current] { color: #ECE9E2; }

@media (max-width: 1023px), (max-height: 599px) {
  .menu-overlay { overflow-y: auto; }
  .menu-cabeza { top: 18px; }
  .menu-lista { position: relative; inset: auto; box-sizing: border-box; min-height: 100%; padding: calc(var(--alto-header) + 28px) var(--margen) calc(120px + env(safe-area-inset-bottom)) calc(var(--margen) + 28px); display: flex; flex-direction: column; justify-content: space-evenly; gap: 4px; }
  .menu-nodo, .menu-nodo[data-lado="izq"] { position: relative; left: auto !important; top: auto !important; transform: none; flex-direction: row; gap: 14px; min-height: 48px; }
  .menu-num { display: none; }
  .menu-etiqueta { font-size: clamp(22px, 6.4vw, 28px); white-space: normal; }
  .menu-pie { bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* ---------- /booking ---------- */

.booking-cabeza { padding-top: calc(var(--alto-header) + clamp(72px, 10vw, 150px)); }
.tabla { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; color: var(--cuerpo); }
.tabla th, .tabla td { text-align: left; vertical-align: top; padding: 18px 24px 18px 0; border-top: 1px solid var(--linea); }
.tabla tr:last-child th, .tabla tr:last-child td { border-bottom: 1px solid var(--linea); }
.tabla thead th { font-family: "Silkscreen", monospace; font-size: 10px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--etiqueta); padding-top: 0; border-top: 0; }
.tabla tbody th { color: var(--texto); font-weight: 500; }
.tabla-ficha tbody th { font-family: "Silkscreen", monospace; font-size: 10px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--etiqueta); width: 34%; padding-top: 22px; }
/* En el celular cada fila de la tabla se apila: la cabeza arriba y sus datos debajo. */
@media (max-width: 767px) {
  .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla, .tabla tbody, .tabla tr, .tabla th, .tabla td { display: block; width: auto; }
  .tabla tr { padding: 18px 0; border-top: 1px solid var(--linea); }
  .tabla tr:last-child { border-bottom: 1px solid var(--linea); }
  .tabla th, .tabla td, .tabla tr:last-child th, .tabla tr:last-child td { border: 0; padding: 0 0 6px; }
  .tabla td[data-rotulo]::before { content: attr(data-rotulo); display: block; margin: 8px 0 2px; font-family: "Silkscreen", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--etiqueta); }
  .tabla-ficha tbody th { width: auto; padding-top: 0; }
}
.cita-espacios { padding-top: clamp(56px, 6.7vw, 96px); padding-bottom: clamp(56px, 6.7vw, 96px); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); margin-left: var(--margen); margin-right: var(--margen); padding-left: clamp(0px, 5.5vw, 80px); padding-right: clamp(0px, 5.5vw, 80px); }
@media (min-width: 1552px) { .cita-espacios { margin-left: auto; margin-right: auto; max-width: calc(1440px - 2 * var(--margen)); } }
.cita-espacios blockquote { margin: 0; display: flex; flex-direction: column; gap: 24px; max-width: 1040px; }
.cita-espacios .disp { --t: 34; line-height: 1.2; }
.cita-espacios figcaption { margin-top: 32px; max-width: 640px; }
.foto-booking { aspect-ratio: 12 / 5; }
@media (max-width: 767px) { .foto-booking { aspect-ratio: 4 / 3; } }
.modelos { margin: 0; padding: 0; list-style: none; }
.modelos li { padding: 16px 0; border-top: 1px solid var(--linea); }
.modelos li:last-child { border-bottom: 1px solid var(--linea); }
.dossier { padding-top: clamp(48px, 6vw, 88px); border-top: 1px solid var(--texto); }

/* ---------- 404 ---------- */

.no-existe { min-height: 100vh; min-height: 100svh; box-sizing: border-box; max-width: 1440px; margin: 0 auto; padding: 40px var(--margen) 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 64px; }
.no-existe .columnas { align-items: start; }