/* ==========================================================================
   CasaLa Teatro — hoja de estilo única
   Estética "Caravaggio": negro cálido, las fotos son la única luz.
   Móvil primero. Sin frameworks.
   ========================================================================== */

/* ------------------------------------------------------------- Fuentes --- */
/* TODAS autoalojadas: ni CDN ni peticiones a Google desde el navegador del
   visitante (las páginas de privacidad y cookies lo prometen). Licencia SIL.

   1. PLAYFAIR DISPLAY — la fuente elegida para los títulos (decisión de
      Fernando, 10/08/2026). Es la primera de la pila --serif; hasta hoy no
      se servía y todo caía a Georgia sin avisar. Archivo VARIABLE: un solo
      woff2 cubre los pesos 400-900.
   2. INSTRUMENT SERIF — solo la CURSIVA, para los titulares display. */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/playfair-display-latin.woff2') format('woff2');
  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: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/playfair-display-latin-ext.woff2') format('woff2');
  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: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-italic-latin.woff2') format('woff2');
  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: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');
  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 {
  /* Color */
  --negro:        #0c0908;   /* fondo general, negro cálido (no #000) */
  --negro-2:      #141010;   /* superficies elevadas */
  --negro-3:      #1d1716;   /* bordes y separadores */
  --hueso:        #f4ede4;   /* texto principal */
  --hueso-tenue:  #bcb0a4;   /* texto secundario */
  --hueso-debil:  #8b8078;   /* texto terciario, pies de foto */
  --acento:       #e04a33;   /* rojo-ámbar del LUT: titulares y detalles */
  --acento-boton: #c62d1f;   /* fondo de botón: contraste 5,5:1 con blanco */
  --acento-hover: #a92416;
  --oro:          #c9a227;   /* detalle fino: filetes, comillas */

  /* Tipografía */
  --serif: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  /* Solo para titulares grandes: es una fuente de cartel, no de lectura */
  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Ritmo vertical */
  --seccion: clamp(3.5rem, 9vw, 7rem);
  --ancho:   min(100% - 2.5rem, 68rem);
  --ancho-texto: min(100% - 2.5rem, 44rem);
}

/* --------------------------------------------------------------- Base --- */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--negro);
  color: var(--hueso);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0 0 .6em;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 2px;
}

.salta-al-contenido {
  position: absolute; left: -9999px;
  background: var(--hueso); color: var(--negro);
  padding: .75rem 1.25rem; z-index: 100; font-weight: 600;
}
.salta-al-contenido:focus { left: 1rem; top: 1rem; }

.contenedor { width: var(--ancho); margin-inline: auto; }
.contenedor-texto { width: var(--ancho-texto); margin-inline: auto; }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Rótulo pequeño que encabeza cada sección */
.rotulo {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--acento);
  margin: 0 0 1.1rem;
  display: flex; align-items: center; gap: .8rem;
}
.rotulo::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--negro-3), transparent);
}

/* ------------------------------------------------------------ Botones --- */

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  min-height: 3.25rem;
  padding: .85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.boton--comprar {
  background: var(--acento-boton);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset;
}
.boton--comprar:hover { background: var(--acento-hover); }
.boton--comprar:active { transform: translateY(1px); }
.boton--fantasma {
  background: transparent;
  color: var(--hueso);
  border-color: #3b302d;
}
.boton--fantasma:hover { border-color: var(--hueso-tenue); }
.boton--pequeno { min-height: 2.75rem; padding: .55rem 1.1rem; font-size: .95rem; }

/* -------------------------------------------- Aviso de idioma (1ª vez) --- */

.aviso-idioma {
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem 1.25rem;
  background: var(--negro-2);
  border-bottom: 1px solid var(--negro-3);
  font-size: .92rem;
}
.aviso-idioma[hidden] { display: none; }
.aviso-idioma p { margin: 0; color: var(--hueso-tenue); }
.aviso-idioma a { color: var(--hueso); font-weight: 600; }
.aviso-idioma button {
  margin-left: auto; background: none; border: 0;
  color: var(--hueso-debil); font-size: 1.4rem; line-height: 1;
  padding: .25rem .5rem; cursor: pointer;
}
.aviso-idioma button:hover { color: var(--hueso); }

/* ------------------------------------------------- Banda de marca --- */
/* No es fija: ocupa la parte de arriba, da presencia a la marca y se va
   al hacer scroll, dejando la navegación pegada arriba. */

.marca-banda {
  text-align: center;
  padding-block: clamp(1.75rem, 4.5vw, 3.25rem);
  border-bottom: 1px solid var(--negro-3);
}
.marca-banda a { text-decoration: none; color: inherit; display: inline-block; }
.logotipo {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 1.15rem + 3.5vw, 3.5rem);
  font-weight: 500;
  letter-spacing: .045em;
  line-height: 1;
  margin: 0;
}
.logotipo strong { color: var(--acento); font-weight: 500; }
.marca-banda__pie {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.75rem, 3vw, 1.4rem);
  margin: .95rem 0 0;
  font-family: var(--sans);
  font-size: clamp(.62rem, .55rem + .25vw, .74rem);
  font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--hueso-tenue);
}
.marca-banda__pie::before, .marca-banda__pie::after {
  content: ""; height: 1px; width: clamp(1.5rem, 9vw, 5rem);
  background: linear-gradient(90deg, transparent, var(--negro-3), transparent);
}

/* ---------------------------------------------------------- Cabecera --- */

.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(12, 9, 8, .82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--negro-3);
}
.cabecera__fila {
  position: relative;
  width: var(--ancho); margin-inline: auto;
  display: flex; align-items: center; gap: 1rem;
  min-height: 4rem;
}
.marca {
  font-family: var(--serif);
  font-size: 1.2rem; letter-spacing: .02em;
  text-decoration: none; color: var(--hueso);
  margin-right: auto; white-space: nowrap;
}
.marca strong { color: var(--acento); font-weight: 500; }
.marca span {
  display: block;
  font-family: var(--sans);
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--hueso-debil); margin-top: .15rem;
}
.cabecera .boton--comprar { display: none; }
@media (min-width: 46em) {
  .cabecera .boton--comprar { display: inline-flex; }
}

/* Marca compacta dentro de la barra fija (la grande está en la banda) */
.marca--compacta { font-size: 1.05rem; letter-spacing: .04em; }
.marca--compacta span { display: none; }
@media (min-width: 62em) { .marca--compacta span { display: block; } }

/* ------------------------------------------- Navegación de secciones --- */

.nav__boton {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 2.75rem; padding: .4rem .85rem;
  background: transparent; border: 1px solid #3b302d; border-radius: 2px;
  color: var(--hueso); font: inherit; font-size: .9rem; font-weight: 600;
  cursor: pointer;
}
.nav__boton:hover { border-color: var(--hueso-tenue); }
.nav__boton svg { width: 1.05em; height: 1.05em; }

.nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: .25rem;
}
.nav a {
  display: block;
  padding: .55rem .8rem;
  border-radius: 2px;
  font-size: .93rem; font-weight: 600;
  color: var(--hueso-tenue);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease, background-color .15s ease;
}
.nav a:hover { color: var(--hueso); background: var(--negro-3); }
/* Sección en la que está el visitante ahora mismo */
.nav a[aria-current] { color: var(--acento); }

/* Móvil y tableta: la navegación se despliega bajo la barra */
@media (max-width: 61.99em) {
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--negro-2);
    border-bottom: 1px solid var(--negro-3);
    box-shadow: 0 18px 40px rgba(0,0,0,.55);
  }
  .nav ul { flex-direction: column; gap: 0; padding: .4rem; }
  .nav a { padding: .85rem 1rem; font-size: 1rem; }
  .nav a[aria-current] { background: var(--negro-3); }
}

/* Escritorio: siempre visible en línea, y el botón desaparece */
@media (min-width: 62em) {
  .nav__boton { display: none; }
  .nav, .nav[hidden] { display: block; margin-right: auto; }
  .marca--compacta { margin-right: clamp(1rem, 3vw, 2.5rem); }
}

/* Selector de idioma */
.idiomas { position: relative; }
.idiomas__boton {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 2.75rem; padding: .4rem .8rem;
  background: transparent; border: 1px solid #3b302d; border-radius: 2px;
  color: var(--hueso); font: inherit; font-size: .9rem; font-weight: 600;
  cursor: pointer;
}
.idiomas__boton:hover { border-color: var(--hueso-tenue); }
.idiomas__boton svg { width: 1.05em; height: 1.05em; opacity: .8; }
.idiomas__lista {
  position: absolute; right: 0; top: calc(100% + .5rem);
  min-width: 13rem; padding: .4rem;
  background: var(--negro-2); border: 1px solid var(--negro-3);
  border-radius: 3px; box-shadow: 0 18px 40px rgba(0,0,0,.6);
  list-style: none; margin: 0;
}
.idiomas__lista[hidden] { display: none; }
.idiomas__lista a, .idiomas__lista li > span {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .6rem .7rem; border-radius: 2px;
  text-decoration: none; font-size: .95rem;
}
.idiomas__lista a:hover { background: var(--negro-3); }
.idiomas__lista [aria-current="true"] { color: var(--acento); font-weight: 600; }
.idiomas__lista li > span { color: var(--hueso-debil); cursor: default; }
.idiomas__lista li > span::after { content: "en preparación"; font-size: .72rem; letter-spacing: .04em; }
.idiomas__lista--en li > span::after { content: "coming soon"; }
.idiomas__lista--nl li > span::after { content: "binnenkort"; }

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

.hero { position: relative; isolation: isolate; }
.hero__foto {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: center 35%;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(12,9,8,.72) 0%, rgba(12,9,8,.30) 30%, rgba(12,9,8,.82) 78%, var(--negro) 100%),
    radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(12,9,8,.55) 100%);
}
.hero__interior {
  width: var(--ancho); margin-inline: auto;
  min-height: min(88svh, 44rem);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(4rem, 14vh, 8rem) 0 clamp(2rem, 5vh, 3.5rem);
}
.hero h1 {
  font-size: clamp(2.4rem, 8.2vw, 5rem);
  margin-bottom: .35em;
  max-width: 15ch;
  text-shadow: 0 2px 30px rgba(0,0,0,.55);
}
.hero__entradilla {
  font-size: clamp(1.05rem, 1rem + .6vw, 1.35rem);
  color: var(--hueso);
  max-width: 34ch;
  margin-bottom: 1.6rem;
  text-shadow: 0 1px 16px rgba(0,0,0,.6);
}

/* Datos críticos: qué, cuándo, cuánto, cuántos */
.datos {
  display: flex; flex-wrap: wrap; gap: .5rem;
  list-style: none; padding: 0; margin: 0 0 1.6rem;
}
.datos li {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .85rem;
  background: rgba(20,16,16,.72);
  border: 1px solid rgba(244,237,228,.14);
  border-radius: 2px;
  font-size: .93rem; font-weight: 500;
  backdrop-filter: blur(4px);
}
.datos b { font-weight: 700; }
.datos .punto { color: var(--acento); font-size: 1.2em; line-height: 0; }

.hero__acciones { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__nota {
  margin-top: 1.4rem; font-size: .9rem; color: var(--hueso-tenue);
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
}
.hero__nota b { color: var(--hueso); font-weight: 600; }

/* En móvil el hero comparte pantalla con la banda de marca, la cabecera y la
   barra de compra: se recorta para que el botón de comprar quede SIEMPRE
   visible sin hacer scroll, que es lo único que esta página tiene que lograr. */
@media (max-width: 45.99em) {
  /* La banda de marca se compacta: sigue dando presencia, ocupa la mitad */
  .marca-banda { padding-block: 1.1rem; }
  .logotipo { font-size: 1.7rem; }
  .marca-banda__pie { margin-top: .55rem; letter-spacing: .2em; }

  .hero__interior {
    min-height: min(58svh, 32rem);
    padding-top: 1rem;
    padding-bottom: 1.75rem;
  }
  .hero h1 { margin-bottom: .3em; }
  .hero__entradilla { margin-bottom: 1.1rem; }
  .datos { margin-bottom: 1.1rem; }
  .hero__nota { margin-top: 1rem; }
}

/* Móviles de pantalla corta: no cabe todo y el botón de comprar es lo que no
   puede caer bajo el pliegue. Se sacrifica la entradilla —lo esencial (28
   butacas, hora, precio) sigue en los datos— y se encoge la marca. */
@media (max-width: 45.99em) and (max-height: 720px) {
  .marca-banda { padding-block: .7rem; }
  .logotipo { font-size: 1.35rem; }
  .marca-banda__pie { display: none; }
  .hero h1 { font-size: 2rem; }
  .hero__entradilla { display: none; }
  .hero__interior { min-height: 0; }
}

/* --------------------------------- Titulares en Instrument Serif --- */
/* Se activa poniendo la clase en el <body> de la página. De momento solo la
   lleva "Qué dicen de nosotros", para probarla ahí antes de extenderla.
   OJO: solo tenemos descargada la CURSIVA de esta fuente, así que todo lo que
   la use tiene que ir en cursiva o el navegador caería a Georgia. */

.tipo-display h1,
.tipo-display .grupo-idioma__titulo {
  font-family: var(--display);
  font-style: italic;
  letter-spacing: -.012em;
}
/* Condensa más que Georgia: se compensa subiendo un punto los tamaños */
.tipo-display .grupo-idioma__titulo {
  font-size: clamp(1.55rem, 1.15rem + 1.6vw, 2.3rem);
}
.tipo-display .grupo-idioma__titulo small {
  font-style: normal;          /* el contador sigue en la sans, sin cursiva */
  letter-spacing: .16em;
}

/* Apertura de página interior: titular y texto a la izquierda, foto a la
   derecha fundiéndose con el negro de la página. La máscara de degradado
   difumina los cuatro bordes, así la imagen emerge de la oscuridad en vez de
   ser un rectángulo pegado encima. Si el navegador no soporta máscaras, la
   foto se ve entera y no pasa nada. */
.apertura {
  position: relative;
  isolation: isolate;
  overflow: hidden;              /* la foto sangra por el borde sin crear scroll */
  padding-block: clamp(3.5rem, 9vw, 7rem);
}

/* La foto ocupa la mitad derecha entera, de arriba abajo, y sangra hasta el
   borde de la pantalla: en esa franja el fondo de la página ES la foto. */
.apertura__foto {
  position: absolute; inset: 0; z-index: -1; margin: 0;
}
@media (min-width: 58em) {
  .apertura { min-height: clamp(26rem, 62svh, 36rem); display: flex; align-items: center; }
  .apertura__foto { left: 34%; }
}
.apertura__foto picture { display: block; width: 100%; height: 100%; }
.apertura__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* En escritorio la foto se alinea a la derecha: el lado izquierdo queda bajo
   el texto y bajo el velo, así que sacrificarlo no cuesta nada y a cambio se
   conserva entero lo que haya en el borde derecho del encuadre. */
@media (min-width: 58em) { .apertura__foto img { object-position: right center; } }

/* El fundido se hace con degradados hacia el negro de la página, no con
   máscaras: da el mismo resultado sobre fondo plano y funciona en todo. */
.apertura__foto::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, var(--negro) 0%, rgba(12,9,8,.92) 22%, rgba(12,9,8,.35) 58%, rgba(12,9,8,0) 85%),
    linear-gradient(to bottom, var(--negro) 0%, rgba(12,9,8,0) 20%, rgba(12,9,8,0) 80%, var(--negro) 100%);
}

/* En móvil la foto pasa a ser el fondo de todo el bloque, con un velo más
   denso para que el texto se lea sin esfuerzo. */
@media (max-width: 57.99em) {
  .apertura__foto::after {
    background:
      linear-gradient(rgba(12,9,8,.80), rgba(12,9,8,.86)),
      linear-gradient(to bottom, var(--negro) 0%, rgba(12,9,8,0) 22%, rgba(12,9,8,0) 78%, var(--negro) 100%);
  }
}

/* La apertura ya trae su propio aire abajo (el fundido de la foto), así que la
   sección siguiente no necesita el respiro completo. */
.apertura + .seccion { padding-top: clamp(1.75rem, 3.5vw, 3rem); }

/* La misma apertura, pero DENTRO de una sección — la usa la presentación de
   CasaLa en la portada (Fernando, 12/08/2026: la quería fundida con el fondo
   como en las fichas). La sección ya pone su propio relleno, así que aquí el
   bloque no pone el suyo o se sumarían los dos.
   En móvil sí deja algo de aire: allí la foto es el fondo de todo el bloque
   y sin margen el texto quedaría pegado al borde de la imagen. */
.apertura--en-seccion { padding-block: 0; }

/* EN MÓVIL LA FOTO NO ES FONDO: es una foto.
   El patrón de las fichas tapa la imagen con un velo negro al 80-86% para
   que el texto encima se lea — y ahí la foto casi desaparece. Fernando lo
   vio y lo dijo (12/08/2026): «tiene que verse bien en la versión móvil sin
   que las letras tapen por completo la foto». Así que aquí, en pantalla
   estrecha, la foto deja de ser fondo y pasa a ser una franja a sangre
   ENCIMA del texto: se ve entera, y el texto va debajo sobre negro limpio,
   que además se lee mejor. El fundido se conserva, pero solo por arriba y
   por abajo — sin velo. */
@media (max-width: 57.99em) {
  .apertura--en-seccion { padding-block: 0; }
  .apertura--en-seccion .apertura__foto {
    position: static; z-index: auto;
    /* El texto sube DENTRO de la foto (Fernando, 12/08/2026: «que la foto se
       funda por debajo con las letras, pero no mucho»). Solo 2rem: el tramo
       donde el degradado de abajo ya es casi negro puro, así que la foto no
       termina en un borde recto — se deshace en el texto— y las letras
       siguen sobre fondo oscuro. */
    margin-bottom: -2rem;
  }
  .apertura--en-seccion .apertura__foto img {
    height: auto;
    aspect-ratio: 4 / 5;   /* deja ver casi toda la foto: es vertical */
  }
  /* Arriba, un fundido corto. Abajo, uno LARGO: empieza a oscurecer en el
     66% y llega a negro al final, que es donde entran las letras. El tramo
     que se sacrifica es el de las butacas más cercanas, que van desenfocadas.
     Sin velo plano encima: la foto se ve. */
  .apertura--en-seccion .apertura__foto::after {
    background: linear-gradient(to bottom,
      var(--negro) 0%, rgba(12,9,8,0) 14%,
      rgba(12,9,8,0) 66%, rgba(12,9,8,.6) 85%, var(--negro) 100%);
  }
}
/* El dato que antes era pie de foto: al pasar la foto al fondo, un figcaption
   se habría quedado detrás del contenido, así que vive con el texto. */
.apertura__nota {
  margin-top: 1.5rem;
  font-size: .82rem;
  color: var(--hueso-debil);
}

.apertura__texto { max-width: 34rem; }
@media (min-width: 58em) { .apertura__texto { width: min(48%, 34rem); } }
/* Titular de apertura: en rojo, grande y con el interlineado apretado, para
   que tenga empuje y no parezca un encabezado más. */
.apertura__texto h1 {
  font-family: var(--display);
  color: var(--acento);
  font-style: italic;          /* aire de cartel de teatro antiguo */
  font-size: clamp(2.6rem, 1.5rem + 4.8vw, 4.8rem);
  line-height: .96;
  letter-spacing: -.015em;
  margin-bottom: .5em;
  max-width: 14ch;             /* condensa más que Georgia: cabe más por línea */
}
.apertura__texto p { color: var(--hueso-tenue); }
.apertura__texto p:first-of-type { color: var(--hueso); }

/* EXCEPCIÓN para la presentación de CasaLa en la portada. La regla de arriba
   enciende el primer párrafo y apaga los siguientes: en una apertura de dos
   frases eso es un matiz, pero aquí hay TRES párrafos seguidos y se leía
   como un texto que se va apagando. Fernando, 12/08/2026: «déjalo todo con
   la misma intensidad, menos el final, el cual puede ir más apagado».
   Así que los tres párrafos van al tono claro y solo la nota del pie se
   queda tenue — que es lo que es, un pie de foto, no cuerpo de texto.
   OJO a los dos :not(): el rótulo «CasaLa» y la nota son <p> también, y sin
   excluirlos esta regla les cambia el color (el rótulo va en rojo y la nota
   tiene que quedar más apagada que el cuerpo, no igual). */
.apertura--en-seccion .apertura__texto p:not(.apertura__nota):not(.rotulo) { color: var(--hueso); }
/* Y la nota, la más tenue de las tres intensidades. Necesita esta
   especificidad para ganarle a `.apertura__texto p`, que si no la deja en
   el mismo tono que el cuerpo. */
.apertura--en-seccion .apertura__texto .apertura__nota { color: var(--hueso-debil); }
/* El rótulo, en rojo como TODOS los rótulos del sitio. Hacía falta decirlo:
   aquí el rótulo es un <p> y es el primero del bloque, así que le caía
   encima `.apertura__texto p:first-of-type` y salía en hueso. Se veía blanco
   donde el resto de la web lo pone rojo — lo destapó medir los tonos al
   igualar los párrafos (12/08/2026). */
.apertura--en-seccion .apertura__texto .rotulo { color: var(--acento); }

/* Cabecera de página interior: la misma idea que el hero pero más baja, para
   que las páginas no compitan con la portada. La foto es la que da aire. */
.hero--pagina .hero__interior {
  min-height: min(52svh, 24rem);
  padding-top: clamp(3rem, 10vh, 5rem);
  padding-bottom: clamp(1.75rem, 4vh, 2.75rem);
}
.hero--pagina h1 {
  font-size: clamp(2rem, 1.4rem + 3vw, 3.6rem);
  max-width: 18ch;
  margin-bottom: 0;
}
.hero--pagina .hero__foto { object-position: center 45%; }
@media (max-width: 45.99em) {
  .hero--pagina .hero__interior { min-height: min(44svh, 19rem); padding-top: 2rem; }
}

/* ------------------------------------------------------------ Secciones */

.seccion { padding-block: var(--seccion); }
/* Para que la barra fija no tape el título al saltar desde la cabecera */
section[id] { scroll-margin-top: 4.5rem; }
.seccion--filete { border-top: 1px solid var(--negro-3); }
.seccion h2 { font-size: clamp(1.8rem, 1.3rem + 2.2vw, 3rem); }

/* Bloque de diferenciación: la frase de la casa */
.definicion { text-align: center; }
.definicion blockquote {
  margin: 0 auto 2.5rem;
  max-width: 22ch;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 1.1rem + 3.4vw, 3.1rem);
  line-height: 1.18;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.definicion blockquote em { font-style: normal; color: var(--acento); }
.definicion__pie { color: var(--hueso-tenue); max-width: 52ch; margin-inline: auto; }

.tres {
  display: grid; gap: 1.5rem; margin: 2.5rem 0 0;
  grid-template-columns: 1fr;
  text-align: left;
}
@media (min-width: 44em) { .tres { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.tres article {
  padding-top: 1.25rem;
  border-top: 1px solid var(--negro-3);
}
.tres h3 {
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--oro);
  margin-bottom: .7rem;
}
.tres p { color: var(--hueso-tenue); font-size: .97rem; margin: 0; }

.enlace-flecha {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: 2.5rem;
  color: var(--hueso); font-weight: 600; font-size: 1rem;
  text-decoration: none;
  border-bottom: 1px solid var(--acento); padding-bottom: .2rem;
}
.enlace-flecha:hover { color: var(--acento); }

/* Variante destacada. Nació para el enlace a la página de CasaLa desde la
   portada (Fernando, 13/08/2026): iba en hueso, del mismo color que el texto
   de al lado, medía 31 px de alto y vive dentro del bloque donde la foto
   sangra por encima — se le perdía y era difícil de acertar con el dedo.
   Tres cosas cambian, y las tres importan:
   1. Va en ROJO. Medido sobre el velo de esa apertura: 4,8:1, por encima del
      4,5:1 que pide la norma.
   2. Sube a 48 px de alto pulsable, la recomendación estándar del dedo.
   3. `position: relative; z-index: 1` — así NADA puede quedarle encima. La
      foto de esa sección va en absoluto y se le monta al texto; aunque hoy
      la foto pinta detrás, esto lo deja garantizado. */
.enlace-flecha--destacado {
  position: relative; z-index: 1;
  color: var(--acento);
  font-size: 1.05rem;
  padding: .55rem 0;
  border-bottom-width: 2px;
}
.enlace-flecha--destacado:hover,
.enlace-flecha--destacado:focus-visible {
  color: var(--hueso); border-bottom-color: var(--hueso);
}

/* --------------------------------------------------------------- Prensa */

.prensa__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.prensa__lista li { border-top: 1px solid var(--negro-3); }
.prensa__lista li:last-child { border-bottom: 1px solid var(--negro-3); }
.prensa__lista a {
  display: grid; gap: .3rem 1.5rem;
  padding: 1.35rem .25rem;
  text-decoration: none;
  grid-template-columns: 1fr;
  transition: background-color .18s ease;
}
.prensa__lista a:hover { background: var(--negro-2); }
@media (min-width: 46em) {
  .prensa__lista a { grid-template-columns: 14rem 1fr auto; align-items: baseline; }
}
.prensa__medio {
  font-weight: 700; font-size: .9rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--hueso);
}
.prensa__medio small {
  display: block; font-size: .74rem; letter-spacing: .06em;
  color: var(--hueso-debil); font-weight: 500; margin-top: .2rem;
}
.prensa__titular {
  font-family: var(--serif); font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem);
  color: var(--hueso-tenue); line-height: 1.35;
}
.prensa__titular::before { content: "\201C"; color: var(--oro); }
.prensa__titular::after  { content: "\201D"; color: var(--oro); }
/* Cuando lo que se muestra NO es una cita textual sino la descripción de lo
   que se ve en la pieza, van fuera las comillas: presentar un resumen
   nuestro entrecomillado sería atribuirle al medio algo que no dijo. */
.prensa__titular--llano::before,
.prensa__titular--llano::after { content: none; }
.prensa__lista a:hover .prensa__titular { color: var(--hueso); }
.prensa__ir { color: var(--hueso-debil); font-size: .85rem; white-space: nowrap; }

/* Página "Qué dicen de nosotros": las fuentes agrupadas por idioma.
   El agrupamiento ES el mensaje — demuestra alcance internacional. */
.grupo-idioma { margin-top: clamp(2.5rem, 6vw, 4rem); }
.grupo-idioma:first-of-type { margin-top: 0; }
.grupo-idioma__titulo {
  display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap;
  margin: 0 0 1.25rem;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  font-weight: 500;
  color: var(--acento);
}
.grupo-idioma__titulo small {
  font-family: var(--sans);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--hueso-debil);
}
.grupo-idioma__titulo::after {
  content: ""; flex: 1; min-width: 2rem; height: 1px;
  background: linear-gradient(90deg, var(--negro-3), transparent);
}
/* La clase --propio marca el idioma del visitante: no cambia el color (todos
   los títulos van en rojo) pero indica al generador cuál va primero. */

/* Foto entera a lo ancho, con pie. Rompe la lista larga y deja respirar.
   A diferencia de la banda de cabecera, aquí NO se recorta la imagen. */
.figura-ancha {
  margin: clamp(2.5rem, 6vw, 4rem) 0;
}
.figura-ancha img {
  width: 100%; height: auto; border-radius: 2px;
}
.figura-ancha figcaption {
  margin-top: .9rem;
  font-size: .9rem; color: var(--hueso-debil);
  max-width: 60ch;
}
.figura-ancha figcaption strong { color: var(--hueso-tenue); font-weight: 600; }

/* Piezas de las que tenemos el medio pero no un titular textual */
.tambien {
  margin-top: 1.5rem; font-size: .92rem; color: var(--hueso-tenue);
}
.tambien a { color: var(--hueso-tenue); }

/* ------------------------------------------------- Guías de viaje --- */
/* El argumento más fuerte de toda la página: para quien teme la trampa
   para turistas, estar en el Routard, el Rough Guides y la Lonely Planet
   pesa más que cualquier titular. Por eso las tres van destacadas y el
   resto en una lista compacta debajo. */

.guias {
  list-style: none; padding: 0; margin: 2.25rem 0 0;
  display: grid; gap: 1.25rem; grid-template-columns: 1fr;
}
@media (min-width: 46em) { .guias { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.guias li {
  background: var(--negro-2);
  border: 1px solid var(--negro-3);
  border-top: 2px solid var(--oro);
  border-radius: 2px;
  padding: 1.35rem 1.4rem;
  display: flex; flex-direction: column;
}
.guias__pais {
  font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--oro);
  margin-bottom: .6rem;
}
.guias__nombre {
  font-family: var(--serif); font-size: clamp(1.3rem, 1.1rem + .9vw, 1.65rem);
  line-height: 1.15; margin: 0 0 .5rem; color: var(--hueso);
}
.guias__ediciones {
  font-size: .88rem; color: var(--hueso-tenue); margin: 0 0 .7rem;
}
.guias__ediciones em { color: var(--hueso); font-style: italic; }
.guias__nota { font-size: .86rem; color: var(--hueso-debil); margin: auto 0 0; }

/* Las demás guías: lista compacta, sin la solemnidad de las tres grandes */
.guias-mas {
  list-style: none; padding: 0; margin: 1.75rem 0 0;
  display: grid; gap: 0;
}
.guias-mas li {
  padding: .95rem .25rem;
  border-top: 1px solid var(--negro-3);
  display: grid; gap: .15rem 1.5rem;
  grid-template-columns: 1fr;
}
.guias-mas li:last-child { border-bottom: 1px solid var(--negro-3); }
@media (min-width: 46em) { .guias-mas li { grid-template-columns: 18rem 1fr; align-items: baseline; } }
.guias-mas b {
  font-family: var(--serif); font-weight: 500; font-size: 1.05rem; color: var(--hueso);
}
.guias-mas span { font-size: .9rem; color: var(--hueso-tenue); }

/* ------------------------------------------------------- En pantalla --- */
/* Televisión y cine comparten el formato de la lista de prensa, pero el
   dato que importa no es el titular sino DÓNDE está el teatro dentro de la
   pieza: el minuto exacto. Eso es lo que hace comprobable la afirmación. */

.prensa__minuto {
  display: block; margin-top: .35rem;
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .04em; color: var(--oro);
}

.directorios {
  margin-top: 2.5rem; padding-top: 1.75rem;
  border-top: 1px solid var(--negro-3);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.5rem;
  font-size: .9rem; color: var(--hueso-debil);
}
.directorios strong {
  color: var(--hueso-tenue); font-weight: 600;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  width: 100%;
}
.directorios a { color: var(--hueso-tenue); text-decoration: none; border-bottom: 1px solid var(--negro-3); }
.directorios a:hover { color: var(--hueso); border-color: var(--hueso-debil); }

/* ------------------------------------------------------- Bloques media */

.media {
  display: grid; gap: clamp(1.75rem, 5vw, 3.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 52em) {
  .media { grid-template-columns: 1fr 1fr; }
  .media--invertido .media__figura { order: 2; }
}
.media__figura { margin: 0; position: relative; }
.media__figura img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 2px;
}
.media__figura figcaption {
  margin-top: .7rem; font-size: .82rem; color: var(--hueso-debil);
}
.media__texto p { color: var(--hueso-tenue); }
.media__texto p strong { color: var(--hueso); font-weight: 600; }

/* Cifras de identidad */
.cifras {
  display: grid; gap: 1.5rem; margin-top: 2.5rem;
  grid-template-columns: repeat(3, 1fr);
}
.cifras div { border-top: 1px solid var(--negro-3); padding-top: 1rem; }
.cifras dt {
  font-family: var(--serif); font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
  color: var(--acento); line-height: 1;
}
.cifras dd {
  margin: .5rem 0 0; font-size: .86rem; color: var(--hueso-tenue);
  letter-spacing: .02em;
}

/* ------------------------------------ Subsección dentro de una sección ---

   Decisión de Fernando (12/08/2026): en la portada, La Casa y Qué dicen de
   nosotros dejan de ser dos secciones y pasan a ser una sola — primero se
   presenta el teatro, después habla la prensa. La separación se hace con
   aire, NO con filete: un filete volvería a leerse como dos secciones.

   Conserva su propio ancla porque el nav sigue apuntando a #prensa, y el
   scroll-margin de section[id] no le alcanza al no ser un <section>. */
.subseccion { margin-top: clamp(2.25rem, 5vw, 3.5rem); }
.subseccion[id] { scroll-margin-top: 4.5rem; }
/* Dos salidas al final de un bloque (la historia larga y la prensa entera).
   Sin esto, dos .enlace-flecha seguidos arrastrarían 2.5rem cada uno. */
.enlaces-seccion {
  display: flex; flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-top: 2.5rem;
}
.enlaces-seccion .enlace-flecha { margin-top: 0; }

/* Rótulo que además es el enlace a su página entera.
   Fernando, 12/08/2026: «Qué dicen de nosotros» aparecía dos veces casi
   seguidas, como enlace suelto y como título de la subsección. Ahora el
   título HACE de enlace y el suelto desaparece.
   El área pulsable es solo el texto, no la línea degradada del ::after. */
/* Fernando, 13/08/2026: este rótulo-enlace tiene que verse tan enlace como
   el «Toda la historia de CasaLa →» de la primera mitad de la sección —
   subrayado siempre y del mismo tamaño. Antes iba a .74rem y con el
   subrayado TRANSPARENTE hasta el hover: en un ratón se adivinaba, con el
   dedo no se adivina nada.
   Se le baja el espaciado de letra (de .18em a .1em) porque a este cuerpo,
   en versales, no cabía en una línea en el móvil. */
.rotulo--enlace { font-size: 1.05rem; letter-spacing: .1em; }
.rotulo--enlace a {
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  color: inherit; text-decoration: none;
  border-bottom: 2px solid var(--acento);
  padding-bottom: .15rem;
  transition: color .18s ease, border-color .18s ease;
}
/* El texto del rótulo mide 16 px de alto: con el dedo es imposible acertar.
   Este pseudoelemento invisible agranda el área pulsable a ~45 px sin mover
   nada de sitio ni despegar el subrayado del texto. */
.rotulo--enlace a::before {
  content: ""; position: absolute; inset: -.9rem -.6rem;
}
.rotulo--enlace a:hover,
.rotulo--enlace a:focus-visible { color: var(--hueso); border-bottom-color: var(--acento); }
/* La flecha se separa un pelo al pasar por encima: avisa de que lleva fuera */
.rotulo--enlace a span { transition: transform .18s ease; }
.rotulo--enlace a:hover span { transform: translateX(.2em); }

/* Banda con la frase de la casa: una sola línea bajo el hero */
.banda-frase {
  text-align: center;
  padding-block: clamp(2.5rem, 6vw, 4.25rem);
  border-bottom: 1px solid var(--negro-3);
}
.banda-frase p {
  font-family: var(--serif);
  font-size: clamp(1.3rem, .95rem + 2.2vw, 2.35rem);
  line-height: 1.25;
  letter-spacing: -.012em;
  max-width: 26ch;
  margin-inline: auto;
  text-wrap: balance;
}
.banda-frase em { font-style: normal; color: var(--acento); }

/* ------------------------------------------------------------- Cartelera */

/* Todos los espectáculos con el mismo formato y la misma autoridad:
   foto a la izquierda, explicación y compra a la derecha. */
.espectaculos {
  display: grid; gap: 1.5rem;
  margin: 2.5rem 0 0; padding: 0; list-style: none;
}
.destacado {
  display: grid; gap: 0;
  background: var(--negro-2);
  border: 1px solid var(--negro-3);
  border-radius: 2px; overflow: hidden;
}
@media (min-width: 56em) { .destacado { grid-template-columns: 1.1fr 1fr; } }
.destacado__figura { margin: 0; min-height: 15rem; }
.destacado__figura img { width: 100%; height: 100%; min-height: 15rem; object-fit: cover; }
.destacado__texto {
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  display: flex; flex-direction: column; justify-content: center;
}
.destacado h3 {
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  margin-bottom: .5rem;
}
.destacado > .destacado__texto > p { color: var(--hueso-tenue); }
.insignia {
  display: inline-flex; align-items: center; gap: .45rem;
  align-self: flex-start;
  padding: .3rem .7rem; margin-bottom: 1rem;
  background: rgba(224, 74, 51, .14);
  border: 1px solid rgba(224, 74, 51, .45);
  border-radius: 2px;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--acento);
}
.destacado .datos { margin-bottom: 1.5rem; }
.destacado .datos li { background: rgba(12, 9, 8, .5); }

/* Aviso bajo el botón de compra cuando el checkout de Entradium NO existe en
   el idioma de la página. Se avisa antes de cobrar, no después. */
.nota-compra {
  margin: .7rem 0 0;
  font-size: .82rem;
  color: var(--hueso-debil);
}

/* La frase de la casa: solo dentro del bloque de flamenco, nunca como
   definición del teatro entero. */
.frase-casa {
  margin: 0 0 1.1rem;
  padding-left: 1rem;
  border-left: 2px solid var(--acento);
  font-family: var(--serif);
  font-size: clamp(1.1rem, .95rem + .7vw, 1.5rem);
  line-height: 1.3;
  color: var(--hueso);
}
.frase-casa em { font-style: normal; color: var(--acento); }

/* Primera sección de la página: sin hero encima, necesita respirar arriba */
.seccion--primera { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.seccion--primera h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem); }

.cartelera {
  display: grid; gap: 1.25rem; margin-top: 2.5rem; padding: 0; list-style: none;
  grid-template-columns: 1fr;
}
@media (min-width: 38em) { .cartelera { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60em) { .cartelera { grid-template-columns: repeat(3, 1fr); } }
.cartelera li {
  background: var(--negro-2);
  border: 1px solid var(--negro-3);
  border-radius: 2px; overflow: hidden;
  display: flex; flex-direction: column;
}
.cartelera img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.cartelera .ficha { padding: 1.1rem 1.15rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.cartelera h3 { font-size: 1.25rem; margin-bottom: .35rem; }
.cartelera .genero {
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--oro);
  margin-bottom: .6rem;
}
.cartelera p { font-size: .92rem; color: var(--hueso-tenue); margin-bottom: 1rem; }
.cartelera .ficha .boton { margin-top: auto; align-self: flex-start; }

/* --------------------------------------------------------------- Llegar */

.puertas { display: grid; gap: 1.25rem; margin-top: 2rem; grid-template-columns: 1fr; }
@media (min-width: 44em) { .puertas { grid-template-columns: repeat(2, 1fr); } }
.puertas article {
  background: var(--negro-2); border: 1px solid var(--negro-3);
  border-left: 2px solid var(--acento);
  padding: 1.25rem 1.35rem; border-radius: 2px;
}
.puertas h3 { font-family: var(--sans); font-size: 1rem; font-weight: 700; margin-bottom: .4rem; }
.puertas p { font-size: .94rem; color: var(--hueso-tenue); margin: 0; }

/* Variante con foto (página Localización): la foto arriba, el texto debajo.
   El filete rojo de la izquierda se mantiene: es la seña de estas tarjetas. */
.puertas--fotos article { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.puertas--fotos figure { margin: 0; }
.puertas--fotos figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.puertas--fotos .puertas__texto { padding: 1.25rem 1.35rem; }
.puertas--fotos .puertas__texto p + p { margin-top: .6rem; }

/* ------------------------------------------------- Página Localización --- */

/* La dirección, en grande, con la foto de la puerta al lado (Fernando,
   13/08/2026). Sustituye al bloque de las dos puertas.
   El h2 empata en especificidad con `.seccion h2` (0,1,1) y gana por orden:
   esta regla se declara después. Si alguien la mueve arriba, la dirección
   vuelve al tamaño normal de titular. */
.direccion {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  margin-top: 1rem;
}
@media (min-width: 46em) {
  .direccion { grid-template-columns: 1fr auto; align-items: center; }
}
.direccion__texto h2 {
  font-size: clamp(2.1rem, 1.1rem + 4.4vw, 3.8rem);
  line-height: 1.05;
  margin: 0;
}
.direccion__texto p {
  margin: .85rem 0 0;
  font-family: var(--sans); font-size: 1.05rem;
  color: var(--hueso-tenue);
}
/* ⚠ El ancho de la foto tiene que ser DEFINIDO, y va en la FIGURA, no en la
   imagen. La columna de la derecha es `auto`, o sea que se mide por su
   contenido: cualquier porcentaje de dentro (un `width:100%` en la imagen, o
   un `min(20rem, 100%)` aquí) se mide contra un ancho que aún no existe y se
   resuelve en CERO. Con `width: 20rem` la columna ya tiene de dónde agarrarse
   y el `max-width` la protege en las pantallas más estrechas. */
.direccion__foto { margin: 0; width: 20rem; max-width: 100%; }
.direccion__foto img {
  display: block; width: 100%; height: auto; border-radius: 2px;
}

/* El camino hasta la butaca: pasos numerados, en fila en escritorio.
   Retrato 3/4 a propósito: puertas y pasillos son verticales. */
.recorrido {
  list-style: none; padding: 0; margin: 2.5rem 0 0;
  display: grid; gap: 1.5rem;
  grid-template-columns: 1fr;
  counter-reset: paso;
}
@media (min-width: 38em) { .recorrido { grid-template-columns: repeat(2, 1fr); } }
/* `auto-fit` en vez de un número fijo de columnas: la rejilla calcula cuántas
   caben, TIRA LAS QUE SE QUEDAN VACÍAS y reparte el ancho entre las que hay.
   Antes eran cuatro columnas fijas y el recorrido pasó a tener tres pasos
   (Fernando quitó «La puerta» el 13/08/2026): los tres se quedaban pegados a
   la izquierda con un hueco muerto a la derecha. Ahora llenan la fila, y las
   fotos crecen de 251 a 344 px de paso. Si algún día vuelven a ser cuatro,
   se recolocan solas. */
@media (min-width: 60em) {
  .recorrido { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.75rem; }
}
.recorrido li { counter-increment: paso; }
.recorrido figure { margin: 0; }
.recorrido img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px;
}
.recorrido h3 {
  display: flex; align-items: baseline; gap: .6rem;
  font-family: var(--sans); font-size: .82rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  margin: .9rem 0 .35rem;
}
.recorrido h3::before {
  content: counter(paso, decimal-leading-zero);
  font-family: var(--serif); font-size: 1.15rem;
  color: var(--acento); letter-spacing: 0;
}
.recorrido p { font-size: .92rem; color: var(--hueso-tenue); margin: 0; }

/* Hueco de una foto que aún no existe: se ve el encargo, no un roto.
   Desaparece de la página en cuanto llegue la foto de verdad. */
.foto-pendiente {
  aspect-ratio: 3 / 4;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem; text-align: center;
  background: var(--negro-2);
  border: 1px dashed #3b302d; border-radius: 2px;
  font-size: .82rem; line-height: 1.5; color: var(--hueso-debil);
}
.foto-pendiente b {
  display: block; margin-bottom: .3rem;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--oro);
}
/* Variante apaisada: para los huecos que ocupan el ancho de la página
   (como la foto de en medio de Qué dicen de nosotros) */
.foto-pendiente--ancha { aspect-ratio: 16 / 6; }

/* Dato que falta, a la vista para quien revisa: nunca se rellena inventando */
.pendiente-dato {
  padding: .7rem .9rem;
  border: 1px dashed #3b302d; border-radius: 2px;
  font-size: .88rem; color: var(--hueso-debil);
}
.pendiente-dato::before {
  content: "Pendiente";
  display: block;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--oro);
  margin-bottom: .25rem;
}

/* Mapa de Google que carga al pulsar: ni una cookie de terceros antes del
   clic. Antes de cargar es una invitación; después, el iframe a pantalla
   del bloque entero. */
.mapa-consent {
  margin-top: 2.25rem;
  aspect-ratio: 16 / 9;
  display: grid; place-content: center; gap: 1rem;
  padding: 1.5rem; text-align: center;
  background: var(--negro-2);
  border: 1px solid var(--negro-3); border-radius: 2px;
}
@media (max-width: 45.99em) { .mapa-consent { aspect-ratio: 4 / 5; } }
.mapa-consent .nota-mapa {
  margin: 0 auto; max-width: 36ch;
  font-size: .82rem; color: var(--hueso-debil);
}
.mapa-consent--cargado { display: block; padding: 0; overflow: hidden; }
.mapa-consent--cargado iframe {
  display: block; width: 100%; height: 100%; border: 0;
  /* El mapa claro de Google deslumbra menos un punto atenuado sobre negro */
  filter: brightness(.92) contrast(1.02);
}
.mapa-enlace {
  margin-top: 1rem; font-size: .9rem; color: var(--hueso-tenue);
}
.mapa-enlace a { color: var(--hueso-tenue); }
.mapa-enlace a:hover { color: var(--hueso); }

/* ------------------------------------------------ Ficha de espectáculo --- */

/* La galería de la ficha: fotos grandes, de dos en dos. Sin recortes raros:
   todas las fotos de escenario son 3:2 y se respeta. */
.galeria {
  display: grid; gap: 1.25rem;
  margin: 2.5rem 0 0;
  grid-template-columns: 1fr;
}
@media (min-width: 44em) { .galeria { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
/* Variante de TRES fotos (Íntima Triana, 13/08/2026): en dos columnas la
   tercera se quedaba huérfana en una fila para ella sola. */
@media (min-width: 44em) { .galeria--tres { grid-template-columns: repeat(3, 1fr); } }
.galeria figure { margin: 0; }
.galeria img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 2px;
}
.galeria figcaption {
  margin-top: .6rem;
  font-size: .82rem; color: var(--hueso-debil);
}

/* Ver la foto en grande. El botón lo monta casala.js envolviendo la imagen:
   no ocupa sitio propio ni mueve nada, solo hace que la foto se pueda pulsar
   y se alcance con el tabulador. */
.galeria__lupa {
  display: block; width: 100%; padding: 0; border: 0;
  background: none; color: inherit; cursor: zoom-in;
  border-radius: 2px;
}
.galeria__lupa img { transition: opacity .2s ease; }
.galeria__lupa:hover img,
.galeria__lupa:focus-visible img { opacity: .8; }
.galeria__lupa:focus-visible {
  outline: 2px solid var(--acento); outline-offset: 3px;
}

/* Mientras el visor está abierto, la página de detrás no se mueve. */
.sin-scroll { overflow: hidden; }

.visor {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.25rem, 2vw, 1rem);
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 5, 4, .95);
}
/* Sin esto, el display:flex de arriba gana al atributo hidden y el visor
   se queda puesto para siempre. */
.visor[hidden] { display: none; }

.visor__marco {
  margin: 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
}
.visor__foto {
  display: block;
  max-width: 100%; max-height: 80vh;
  width: auto; height: auto;
  border-radius: 2px;
}
.visor__cuenta {
  margin: 0;
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .16em; color: var(--hueso-debil);
}

.visor__cerrar,
.visor__paso {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  padding: 0; border: 0; background: none; line-height: 1;
  color: var(--hueso); cursor: pointer;
}
.visor__cerrar { position: absolute; top: .75rem; right: 1rem; font-size: 2.1rem; }
.visor__paso { font-size: 2.6rem; }
.visor__cerrar:hover,
.visor__paso:hover { color: var(--acento); }
.visor__cerrar:focus-visible,
.visor__paso:focus-visible {
  outline: 2px solid var(--acento); outline-offset: 2px;
}
/* En pantalla estrecha manda la foto: se va a los bordes y las flechas se le
   montan encima, en vez de robarle ancho a los lados. Sin esto la foto salía
   MÁS PEQUEÑA en el visor que en la rejilla, que es justo lo contrario de lo
   que se pide al pulsarla. */
@media (max-width: 44em) {
  .visor { padding: 0; }
  .visor__marco { width: 100%; gap: 0; }
  .visor__foto { width: 100%; max-height: 74vh; border-radius: 0; }
  .visor__cuenta {
    position: absolute; left: 0; right: 0; bottom: 1.5rem;
    text-align: center;
  }
  .visor__paso {
    position: absolute; top: 50%; transform: translateY(-50%);
    font-size: 2.2rem; text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
  }
  .visor__paso[data-paso="-1"] { left: 0; }
  .visor__paso[data-paso="1"] { right: 0; }
  .visor__cerrar { top: .5rem; right: .5rem; text-shadow: 0 1px 8px rgba(0, 0, 0, .9); }
}

/* La apertura de la ficha lleva más carga que la de una página interior
   (frase de la casa, datos y botón): se le da algo más de sitio. */
.apertura--ficha .apertura__texto { max-width: 38rem; }
@media (min-width: 58em) { .apertura--ficha .apertura__texto { width: min(52%, 38rem); } }
.apertura--ficha .insignia { margin-bottom: 1.25rem; }
.apertura--ficha .datos { margin: 1.5rem 0 1.5rem; }
.apertura--ficha .frase-casa { margin-top: .25rem; }

/* El aviso que evita el disgusto: no se entra empezada la función */
.aviso-funcion {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding: 1.25rem 1.35rem;
  background: rgba(224, 74, 51, .07);
  border: 1px solid rgba(224, 74, 51, .35);
  border-left: 2px solid var(--acento);
  border-radius: 2px;
  max-width: 60ch;
}
.aviso-funcion p { margin: 0; font-size: .96rem; color: var(--hueso-tenue); }
.aviso-funcion b { color: var(--hueso); }

/* -------------------------------------------------- Páginas legales --- */
/* Son para leer, no para vender: columna estrecha, sin fotos y sin ruido.
   Pero empiezan por un resumen en castellano llano, porque una página legal
   que nadie entiende no informa a nadie — y en esta casa el resumen honesto
   es bueno: la web no pone cookies ni llama a ningún servidor ajeno. */

.legal { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.legal .contenedor-texto > h1 {
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);
  margin-bottom: .35em;
}
.legal__fecha {
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--hueso-debil); margin-bottom: 2.25rem;
}

/* El resumen en llano, arriba del todo */
.legal__resumen {
  margin: 0 0 2.5rem;
  padding: 1.35rem 1.5rem;
  background: var(--negro-2);
  border: 1px solid var(--negro-3);
  border-left: 2px solid var(--oro);
  border-radius: 2px;
}
.legal__resumen h2 {
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--oro);
  margin: 0 0 .7rem;
}
.legal__resumen p { color: var(--hueso); margin-bottom: .8rem; }
.legal__resumen p:last-child { margin-bottom: 0; }

.legal h2 {
  font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem);
  margin: 2.5rem 0 .8rem;
  color: var(--hueso);
}
.legal h3 {
  font-family: var(--sans); font-size: .95rem; font-weight: 700;
  margin: 1.75rem 0 .5rem;
}
.legal p, .legal li { color: var(--hueso-tenue); }
/* El resumen va MÁS claro que el cuerpo: es la parte que la gente lee de
   verdad. Va después de la regla de arriba a propósito — con la misma
   especificidad, gana la última, y antes perdía el contraste. */
.legal__resumen p { color: var(--hueso); }
.legal a { color: var(--hueso); text-decoration: underline; text-underline-offset: .2em; }
.legal a:hover { color: var(--acento); }
.legal ul { padding-left: 1.1rem; margin: 0 0 1.1em; }
.legal li { margin-bottom: .45rem; }
.legal strong { color: var(--hueso); font-weight: 600; }

/* Ficha de un dato concreto: quién es el titular, qué hace una cookie…
   .tabla-datos es el mismo dibujo fuera de las legales (lo usa la ficha de
   espectáculo para el bloque práctico): mismas reglas, otro nombre para no
   colgar una clase "legal" de una página que vende entradas. */
.legal__ficha, .tabla-datos {
  margin: 1.25rem 0 1.75rem; padding: 0;
  display: grid; gap: 0;
  border-top: 1px solid var(--negro-3);
}
.legal__ficha > div, .tabla-datos > div {
  display: grid; gap: .1rem 1.5rem; grid-template-columns: 1fr;
  padding: .8rem .25rem;
  border-bottom: 1px solid var(--negro-3);
}
@media (min-width: 40em) { .legal__ficha > div, .tabla-datos > div { grid-template-columns: 11rem 1fr; } }
.legal__ficha dt, .tabla-datos dt {
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--hueso-debil);
}
.legal__ficha dd, .tabla-datos dd { margin: 0; color: var(--hueso-tenue); }
.tabla-datos dd a { color: var(--hueso); }
.tabla-datos dd b { color: var(--hueso); font-weight: 600; }

/* Aviso de que el texto está sin revisar por un profesional. Se ve, porque
   ocultarlo sería justo lo contrario de lo que pretende una página legal. */
.legal__sin-revisar {
  margin-top: 3rem; padding: 1.1rem 1.25rem;
  border: 1px dashed #3b302d; border-radius: 2px;
  font-size: .88rem; color: var(--hueso-debil);
}
.legal__sin-revisar b {
  display: block; margin-bottom: .3rem;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--oro);
}

/* ------------------------------------------------- Preguntas frecuentes --- */
/* Acordeón nativo con <details>: sin JS, accesible de serie, y el estado
   abierto/cerrado lo pinta el navegador. El signo + pasa a – al abrir. */

.faq {
  margin-top: 2.5rem; max-width: 46rem;
  border-top: 1px solid var(--negro-3);
}
.faq details { border-bottom: 1px solid var(--negro-3); }
.faq summary {
  cursor: pointer;
  padding: 1.05rem .25rem;
  display: flex; gap: .9rem; align-items: baseline;
  font-weight: 600; font-size: 1.02rem; color: var(--hueso);
  list-style: none;
  transition: color .15s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+";
  font-family: var(--serif); font-size: 1.2em; line-height: 1;
  color: var(--acento); flex-shrink: 0;
}
.faq details[open] summary::before { content: "\2013"; }
.faq summary:hover { color: var(--acento); }
.faq details > p {
  margin: 0 0 1.3rem; padding-left: 1.8rem;
  color: var(--hueso-tenue); max-width: 60ch;
}

/* ------------------------------------------------------- Cronología --- */
/* La historia en fechas: el año en rojo serif, el hecho al lado. */

.cronologia {
  list-style: none; padding: 0; margin: 2rem 0 0;
  display: grid; gap: 0;
  max-width: 46rem;
}
.cronologia li {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: 1.25rem;
  align-items: baseline;
  padding: .85rem .25rem;
  border-top: 1px solid var(--negro-3);
}
.cronologia li:last-child { border-bottom: 1px solid var(--negro-3); }
.cronologia b {
  font-family: var(--serif); font-weight: 500;
  font-size: 1.3rem; color: var(--acento);
}
.cronologia span { color: var(--hueso-tenue); font-size: .97rem; }

/* ------------------------------------------------------------- Cierre --- */

.cierre { text-align: center; }
/* El titular del cierre va SIEMPRE en la cursiva de cartel — también en la
   portada, que es la única página sin la clase tipo-display y hasta el
   12/08/2026 se quedaba en Playfair. Lo pidió Fernando: «usamos la fuente
   seleccionada para que sea más bonito».
   Vive aquí abajo, y no arriba con las demás reglas de tipo-display, porque
   `.seccion h2` tiene la misma especificidad y se declara antes: desde este
   sitio gana por orden.
   ⚠ De Instrument Serif solo está descargada la CURSIVA: el font-style
   italic no es adorno. Sin él, el navegador cae a Georgia sin avisar. */
.cierre h2 {
  max-width: 18ch; margin-inline: auto;
  font-family: var(--display);
  font-style: italic;
  letter-spacing: -.012em;
  font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.5rem);
  line-height: 1.02;
}
.cierre p { color: var(--hueso-tenue); max-width: 44ch; margin: 0 auto 1.75rem; }
.cierre .hero__acciones { justify-content: center; }

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

.pie {
  border-top: 1px solid var(--negro-3);
  padding-block: 3.5rem;
  font-size: .92rem; color: var(--hueso-tenue);
}
/* Solo las páginas con barra de compra fija (clase en <body>) necesitan
   hueco extra abajo para que la barra no tape el pie. */
@media (max-width: 45.99em) {
  .con-barra .pie { padding-bottom: 8rem; }
}
.pie__rejilla { display: grid; gap: 2.25rem; grid-template-columns: 1fr; }
@media (min-width: 44em) { .pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr; } }
.pie h2 {
  font-family: var(--sans); font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--hueso-debil);
  margin-bottom: .9rem;
}
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.pie a { text-decoration: none; border-bottom: 1px solid transparent; }
.pie a:hover { border-color: var(--hueso-debil); }
.pie__legal {
  margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--negro-3);
  font-size: .82rem; color: var(--hueso-debil);
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
}

/* --------------------------------------------------- Barra fija móvil --- */

.barra-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: .9rem;
  padding: .7rem 1.25rem calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(12,9,8,.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--negro-3);
}
.barra-movil__precio { font-size: .85rem; line-height: 1.3; color: var(--hueso-tenue); }
.barra-movil__precio b { display: block; color: var(--hueso); font-size: 1rem; }
.barra-movil .boton { margin-left: auto; flex: 0 1 auto; }
@media (min-width: 46em) { .barra-movil { display: none; } }