/* ============================================================
   FUNDACIÓN BANÚS · FESTIVAL DE ÓPERA (evento)
   Solo maquetación de esta página. Ni un color ni un cuerpo se
   definen aquí: todo sale de los tokens del sistema. Por eso la
   página vive en superficie negra por defecto y la sección de la
   compañía cae a arena sin tocar ni un componente.

   La única pieza que este archivo suma al sistema es el hero
   fotográfico: la agenda ya presenta cada cita con su cartel, así
   que una página de festival de ópera pide imagen a pantalla
   completa. El resto —fichas de datos, botones, etiquetas de
   estado, listas— es el vocabulario que ya existe.
   ============================================================ */

/* ============================================================
   HERO FOTOGRÁFICO
   La escena de Nabucco a sangre completa, con el rótulo apoyado
   abajo a la izquierda —el mismo margen que el resto de la página—.
   El texto se lee blanco sobre la fotografía: como la imagen es
   oscura arriba y se ilumina en el centro, un velo en degradado que
   sube desde el pie garantiza el contraste sin apagar la escena.
   ============================================================ */
.festival-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(90vh, 780px);
  background: var(--fb-negro-calido);
  overflow: hidden;
}

.festival-hero__media {
  position: absolute;
  inset: 0;
  margin: 0;
}

/* object-position algo por encima del centro: deja fuera el suelo
   vacío del escenario y conserva las figuras y la escenografía. */
.festival-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
}

/* El velo: negro cálido que sube desde el pie —donde va el texto— y
   se disuelve antes de llegar a la mitad, para no ensuciar la
   escena. Un segundo velo lateral, muy tenue, asienta el arranque
   del rótulo por la izquierda. */
.festival-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      color-mix(in srgb, var(--fb-negro-calido) 92%, transparent) 0%,
      color-mix(in srgb, var(--fb-negro-calido) 72%, transparent) 26%,
      transparent 62%
    ),
    linear-gradient(
      to right,
      color-mix(in srgb, var(--fb-negro-calido) 55%, transparent) 0%,
      transparent 42%
    );
}

.festival-hero__contenido {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  padding-block: var(--space-2xl) var(--space-xl);
}

/* El texto del hero se fija a los colores oscuros: aunque la foto
   cambie de brillo, el blanco roto y el rosa Banús mandan aquí. */
.festival-hero .eyebrow { color: var(--fb-blanco-roto); opacity: 0.85; }

.festival-hero__titulo {
  font-family: var(--font-display);
  font-weight: var(--fw-thin);
  /* Un punto por debajo del rótulo hero de la home: aquí el título
     es más largo ("Festival Internacional de Ópera") y comparte
     espacio con la fotografía, así que no debe comerse la pantalla. */
  font-size: clamp(2rem, 5.5vw, 4.25rem);
  line-height: var(--lh-apretado);
  letter-spacing: var(--track-hero);
  text-transform: uppercase;
  color: var(--fb-blanco-roto);
  margin: var(--space-md) 0 0;
  max-width: 18ch;
}

.festival-hero__subtitulo {
  font-family: var(--font-editorial);
  font-weight: var(--fw-regular);
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  color: var(--fb-arena);
  margin: var(--space-sm) 0 0;
}

/* La sede y el mes, en clave de dato: versalitas finas separadas por
   un punto medio, como el pie del cartel. */
.festival-hero__sede {
  font-size: var(--text-menor);
  /* 300 y no 200 como el resto: esta línea es pequeña, en versalitas con
     tracking amplio y sobre la foto (opacidad 0.78), y a 200 quedaba
     demasiado frágil en escritorio. El light le da cuerpo sin engordarla. */
  font-weight: var(--fw-light);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fb-blanco-roto);
  opacity: 0.78;
  margin: var(--space-lg) 0 0;
}

/* Fila inferior: la etiqueta de estado, la línea de fecha/lugar y el
   botón de entradas, alineados al pie del hero. */
.festival-hero__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
  margin-top: var(--space-xl);
}

.festival-hero__cuando {
  font-size: var(--text-cuerpo);
  font-weight: var(--fw-extralight);
  color: var(--fb-blanco-roto);
}

.festival-hero__cuando b {
  font-weight: var(--fw-medium);
  color: var(--fb-blanco-roto);
}

/* El botón sólido sobre foto necesita su rosa pleno; ya lo trae de
   los tokens. Solo lo empujamos al extremo derecho cuando hay hueco. */
.festival-hero__pie .boton { margin-inline-start: auto; }

/* ============================================================
   INTRODUCCIÓN + FICHA DE DATOS
   La entradilla del festival a la izquierda, la ficha de datos
   duros a la derecha: mismo reparto asimétrico que "Quiénes somos".
   ============================================================ */
.intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  column-gap: var(--space-2xl);
  row-gap: var(--space-xl);
  align-items: start;
}

.intro__lead {
  font-family: var(--font-editorial);
  font-weight: var(--fw-regular);
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  line-height: var(--lh-lead);
  color: var(--texto);
  margin: 0;
  text-wrap: balance;
}

.intro__texto { margin: var(--space-lg) 0 0; }
.intro__texto .cuerpo + .cuerpo { margin-top: var(--space-sm); }

/* Ficha en clave de colofón: reglas finas y pares etiqueta-valor,
   el mismo idioma que la dotación de las bases. Se reutiliza la
   clase .dotacion del sistema (definida abajo, común a documentos). */

/* ============================================================
   EL PROGRAMA · LAS TRES FUNCIONES
   Cada noche es una banda a lo ancho: fotografía a un lado, ficha de
   la función al otro, alternando el lado en la segunda. La tercera
   —la gala de los tres tenores— no tiene foto de escena porque es un
   concierto: en su lugar va el programa lírico, y el hueco se lee
   deliberado, no roto.
   ============================================================ */
.programa {
  display: grid;
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
}

/* La fecha manda como cabecera de la función, a todo el ancho; debajo,
   la foto y el cuerpo comparten fila. Así la foto queda SIEMPRE bajo su
   fecha —nunca por delante— y, al apilarse en móvil, el orden es
   fecha → foto → texto. */
.funcion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "fecha  fecha"
    "figura cuerpo";
  column-gap: var(--space-xl);
  row-gap: var(--space-lg);
  /* Anclada arriba, no centrada: la foto arranca a la altura del título
     de su ópera, no flotando a media altura. */
  align-items: start;
}

.funcion__fecha  { grid-area: fecha; }
.funcion__figura { grid-area: figura; }
.funcion__cuerpo { grid-area: cuerpo; }

/* La segunda función invierte el lado de la foto: el ritmo lo marca la
   alternancia, no una línea divisoria. La fecha sigue a todo lo ancho. */
.funcion--invertida {
  grid-template-areas:
    "fecha  fecha"
    "cuerpo figura";
}

/* En el cuerpo, el título ya no cuelga de la fecha (que ahora vive
   arriba), así que arranca a ras del borde superior de la foto. */
.funcion__cuerpo .funcion__titulo { margin-top: 0; }

.funcion__figura {
  margin: 0;
  overflow: hidden;
  background: var(--surface-panel);
  border: var(--linea) solid var(--borde);
  aspect-ratio: 3 / 2;
}

.funcion__figura img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* La fecha manda —es una agenda—, en el acento de rótulo, igual que
   la numeración de las listas: cifra, no texto corrido. */
.funcion__fecha {
  font-size: var(--text-menor);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--acento-display);
}

.funcion__titulo {
  font-family: var(--font-editorial);
  font-weight: var(--fw-regular);
  font-size: var(--text-display);
  line-height: var(--lh-titulo);
  margin: var(--space-2xs) 0 0;
}

.funcion__compositor {
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  color: var(--texto-editorial);
  margin: var(--space-3xs) 0 0;
}

/* Formato y ambientación en versalitas finas, bajo el título: la
   ficha técnica sin gritar. */
.funcion__formato {
  font-size: var(--text-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin: var(--space-sm) 0 0;
}

.funcion__sinopsis {
  color: var(--texto-tenue);
  margin: var(--space-md) 0 0;
  max-width: var(--medida);
}

/* Reparto: pares personaje–intérprete separados por reglas finas.
   No es una lista de precios ni un cartel: es el colofón del
   programa de mano. */
.reparto {
  margin: var(--space-lg) 0 0;
  padding: 0;
  display: grid;
  font-size: var(--text-menor);
}

.reparto__titulo {
  grid-column: 1 / -1;
  font-size: var(--text-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin: var(--space-sm) 0 var(--space-2xs);
}

.reparto__papel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--space-md);
  align-items: baseline;
  padding-block: var(--space-2xs);
}

/* Filete entre papeles, no bajo el último: el primero cuelga del
   rótulo «Solistas invitados» sin línea, el último cierra sin filete. */
.reparto__papel + .reparto__papel {
  border-top: var(--linea) solid var(--borde);
}

.reparto__papel dt {
  color: var(--texto-tenue);
}

.reparto__papel dd {
  margin: 0;
  color: var(--texto);
  font-weight: var(--fw-medium);
  text-align: right;
}

.reparto__papel dd small {
  display: block;
  font-weight: var(--fw-regular);
  font-size: var(--text-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* Botón de compra por función: cierra la ficha de cada noche con su
   propia llamada, separado de la lista de reparto. Va compacto: es la
   acción de una tarjeta, no el CTA de cabecera. */
.funcion__compra { margin-top: var(--space-lg); align-self: start; }

/* ---------- Gala de los tres tenores ----------
   Sin foto de escena: el bloque ocupa el ancho completo y, en vez de
   una imagen, presenta el programa lírico en dos columnas. Va sobre
   superficie piedra para destacar como pieza distinta sin otro color. */
.funcion--gala {
  display: block;
  padding: clamp(1.75rem, 4vw, var(--space-2xl));
  border: var(--linea) solid var(--borde);
}

.funcion--gala .funcion__sinopsis { max-width: none; }

.programa-lirico {
  margin: var(--space-xl) 0 0;
  columns: 2 16rem;
  column-gap: var(--space-2xl);
  list-style: none;
  font-size: var(--text-menor);
}

.programa-lirico li {
  break-inside: avoid;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-md);
  align-items: baseline;
  padding-block: var(--space-2xs);
  border-bottom: var(--linea) solid var(--borde);
  color: var(--texto);
}

/* Sin filete bajo la última aria de cada columna: en dos columnas
   equilibradas de diez, son la quinta (pie de la columna izquierda) y
   la décima (pie de la derecha). La superior ya no lleva línea porque
   se retiró el borde del contenedor. */
.programa-lirico li:nth-child(5),
.programa-lirico li:last-child {
  border-bottom: 0;
}

.programa-lirico li span {
  font-size: var(--text-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--texto-tenue);
  text-align: right;
}

.programa-lirico__nota {
  margin: var(--space-md) 0 0;
  font-size: var(--text-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* ============================================================
   LA COMPAÑÍA (superficie arena)
   La sección más literaria de la página: la voz editorial (Bodoni)
   presenta a la Ópera Nacional de Moldavia, y el sans neutro cuenta
   los hechos —temporada, repertorio, giras—.
   ============================================================ */
.compania {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  column-gap: var(--space-2xl);
  row-gap: var(--space-xl);
  align-items: start;
  margin-top: var(--space-2xl);
}

.compania__lead {
  font-family: var(--font-editorial);
  font-weight: var(--fw-regular);
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  line-height: var(--lh-lead);
  color: var(--texto);
  margin: 0;
  text-wrap: balance;
}

.compania__relato .cuerpo + .cuerpo { margin-top: var(--space-sm); }

/* ============================================================
   EQUIPO ARTÍSTICO
   Créditos en clave de datos: cargo a la izquierda, nombre a la
   derecha, reglas finas. El mismo colofón que la sede de las bases.
   ============================================================ */
.creditos {
  margin: var(--space-2xl) 0 0;
  padding: 0;
  display: grid;
  /* Dos columnas fijas (ocho créditos, cuatro filas limpias): así la
     fila inferior es siempre la misma pareja y se le puede quitar el
     filete sin dejar un cabo suelto. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-2xl);
}

.creditos__dato {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--space-md);
  align-items: baseline;
  padding-block: var(--space-sm);
  border-bottom: var(--linea) solid var(--borde);
}

/* Sin filete bajo la última fila (las dos últimas celdas) ni sobre la
   primera: el bloque queda abierto por arriba y por abajo. */
.creditos__dato:nth-last-child(-n+2) {
  border-bottom: 0;
}

.creditos__dato dt {
  font-size: var(--text-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.creditos__dato dd {
  margin: 0;
  color: var(--texto);
  font-weight: var(--fw-medium);
  text-align: right;
}

/* ============================================================
   CIERRE · ENTRADAS
   La llamada final NO es una tabla de precios: las tres noches se
   presentan como un pequeño programa —fecha en versalita, título en
   Bodoni, autor y un enlace de compra por función—, sin panel ni caja,
   directamente sobre el negro. La llamada general va al pie.
   ============================================================ */
.entradas__lead {
  font-family: var(--font-editorial);
  font-weight: var(--fw-regular);
  font-size: clamp(1.375rem, 2.1vw, 1.875rem);
  line-height: var(--lh-lead);
  color: var(--texto-editorial);
  max-width: var(--medida);
  margin: var(--space-lg) 0 0;
  text-wrap: balance;
}

/* Las tres noches, una bajo otra, separadas por un filete fino solo
   entre ellas —ni arriba ni abajo—, como el colofón de un catálogo. */
.noches {
  list-style: none;
  margin: var(--space-2xl) 0 0;
  padding: 0;
}

/* El bloque de texto (fecha, título, autor) en una celda, y el enlace
   en la otra. Con align-items:end ambas cajas se alinean por su base,
   así el enlace queda al pie —a la altura del autor—, no centrado ni
   arriba. */
.noche {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-xl);
  align-items: end;
  padding-block: var(--space-lg);
}

.noche + .noche {
  border-top: var(--linea) solid var(--borde);
}

.noche__fecha {
  font-size: var(--text-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--acento-display);
  margin: 0;
}

.noche__titulo {
  font-family: var(--font-editorial);
  font-weight: var(--fw-regular);
  font-size: var(--text-titulo);
  line-height: var(--lh-titulo);
  margin: var(--space-3xs) 0 0;
}

.noche__autor {
  font-size: var(--text-menor);
  color: var(--texto-tenue);
  margin: var(--space-3xs) 0 0;
}

/* El enlace de compra, en clave editorial (flecha, no botón macizo):
   segunda columna, a la derecha. Su alineación vertical la fija el
   align-items:end de la fila. */
.noche__enlace {
  justify-self: end;
}

.entradas__cierre {
  margin-top: var(--space-2xl);
}

/* Organizadores: una línea fina de instituciones, separada por
   puntos medios. Cierra la página como el pie del cartel. */
.organizadores {
  margin: var(--space-2xl) 0 0;
  padding-top: var(--space-lg);
  border-top: var(--linea) solid var(--borde);
  font-size: var(--text-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--texto-tenue);
  line-height: 1.9;
}

/* ============================================================
   FICHA DE DATOS (común: intro y cierre)
   Reglas finas, pares etiqueta-valor, importes/datos en Public Sans
   light. Idéntica en espíritu a .dotacion de las bases; se define
   aquí para que la página no dependa de bases.css.
   ============================================================ */
.dotacion {
  margin: 0;
  padding: 0;
}

.dotacion__dato {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-md);
  align-items: baseline;
  padding-block: var(--space-sm);
}

/* Reglas solo ENTRE filas: ni línea arriba ni abajo del bloque. El
   filete lo pone cada fila sobre la anterior, así la primera no lo
   lleva y la última tampoco. */
.dotacion__dato + .dotacion__dato {
  border-top: var(--linea) solid var(--borde);
}

.dotacion dt {
  font-size: var(--text-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.dotacion dd {
  margin: 0;
  font-family: var(--font-texto);
  font-weight: var(--fw-light);
  font-size: var(--text-lead);
  line-height: 1.3;
  color: var(--texto);
  text-align: right;
}

/* Los datos que son texto y no cifra bajan un escalón, en atenuado. */
.dotacion__dato--menor dd {
  font-size: var(--text-cuerpo);
  color: var(--texto-tenue);
}

/* ============================================================
   TABLETA Y MÓVIL
   ============================================================ */
@media (max-width: 900px) {
  .festival-hero { min-height: min(88vh, 640px); }
  .festival-hero__pie .boton { margin-inline-start: 0; }

  .intro,
  .compania {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-lg);
  }

  /* Apilada en una columna: fecha, luego foto, luego texto. Se redefinen
     las áreas (también las de la invertida, que si no se quedan sin
     columna donde caer) en el orden de lectura. */
  .funcion,
  .funcion--invertida {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "fecha"
      "figura"
      "cuerpo";
    row-gap: var(--space-lg);
  }
}

@media (max-width: 640px) {
  .dotacion__dato,
  .reparto__papel,
  .programa-lirico li {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3xs);
  }

  .dotacion dd,
  .reparto__papel dd,
  .programa-lirico li span { text-align: left; }

  .reparto__papel dd small { display: inline; }

  /* Créditos en una sola columna: se deshace el par fijo y, con él, la
     lógica de «dos últimas celdas». Ahora solo la última fila (una
     sola celda) va sin filete; se restituye el de la penúltima. */
  .creditos {
    grid-template-columns: minmax(0, 1fr);
  }

  .creditos__dato {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3xs);
  }

  .creditos__dato dd { text-align: left; }

  .creditos__dato:nth-last-child(2) {
    border-bottom: var(--linea) solid var(--borde);
  }

  /* Una columna de programa lírico: en móvil dos no caben sin apretar
     los títulos de las arias. En una columna, la única fila sin filete
     es la última; se restituye el de la quinta aria. */
  .programa-lirico { columns: 1; }

  .programa-lirico li:nth-child(5) {
    border-bottom: var(--linea) solid var(--borde);
  }

  /* La noche se apila: el enlace de compra baja bajo el bloque de texto,
     alineado a la izquierda. */
  .noche {
    grid-template-columns: minmax(0, 1fr);
  }

  .noche__enlace {
    justify-self: start;
    margin-top: var(--space-sm);
  }
}