/* ============================================================
   FUNDACIÓN BANÚS · DON JUAN TENORIO 2026 (evento)
   Solo maquetación de esta página. Ni un color ni un cuerpo se
   definen aquí: todo sale de los tokens del sistema.

   No hay componente nuevo. La cabecera es la del 2.º Open de Aloha
   (rótulo + cartel entero y enmarcado: el cartel es vertical y lleva
   los textos incrustados, así que no se recorta a un hero apaisado);
   la ficha de datos es .dotacion; los actos, el reparto y el equipo
   artístico son el .reparto del Festival de Ópera —colofón de
   programa de mano—, y el cierre repite el de ambas páginas.
   ============================================================ */

/* ============================================================
   HERO · RÓTULO + CARTEL
   Mismos valores que .golf-hero.
   ============================================================ */
.tenorio-hero {
  background: var(--fb-negro-calido);
  border-bottom: var(--linea) solid var(--borde);
}

.tenorio-hero__contenido {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  padding-block: var(--space-2xl) var(--space-xl);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  column-gap: var(--space-2xl);
  row-gap: var(--space-xl);
  align-items: center;
}

.tenorio-hero .eyebrow { color: var(--fb-blanco-roto); opacity: 0.85; }

.tenorio-hero__titulo {
  font-family: var(--font-display);
  font-weight: var(--fw-thin);
  font-size: clamp(2.5rem, 8vw, 6rem);
  line-height: var(--lh-apretado);
  letter-spacing: var(--track-hero);
  text-transform: uppercase;
  color: var(--fb-blanco-roto);
  margin: var(--space-md) 0 0;
}

.tenorio-hero__subtitulo {
  font-family: var(--font-editorial);
  font-weight: var(--fw-regular);
  font-size: var(--text-display);
  line-height: var(--lh-titulo);
  color: var(--acento-display);
  margin: var(--space-sm) 0 0;
}

.tenorio-hero__sede {
  font-size: var(--text-menor);
  font-weight: var(--fw-lectura);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fb-blanco-roto);
  opacity: 0.78;
  margin: var(--space-lg) 0 0;
}

/* El cartel, entero y enmarcado. Filete fino del sistema, sin sombra. */
.tenorio-hero__cartel {
  margin: 0;
  border: var(--linea) solid var(--borde);
  background: var(--surface-panel);
  overflow: hidden;
}

.tenorio-hero__cartel img {
  display: block;
  width: 100%;
  height: auto;
}

/* Pie del hero: categoría y línea de patrocinio bajo el rótulo; la
   llamada a entradas, en su propia línea. */
.tenorio-hero__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: var(--linea) solid var(--borde);
}

.tenorio-hero__cuando {
  font-size: var(--text-cuerpo);
  font-weight: var(--fw-lectura);
  color: var(--fb-blanco-roto);
  margin: 0;
}

.tenorio-hero__accion { margin: var(--space-lg) 0 0; }

/* ============================================================
   PRESENTACIÓN + FICHA DE DATOS
   Entradilla y texto a la izquierda, datos duros a la derecha: el
   mismo reparto asimétrico del Festival y del Open de Aloha.
   ============================================================ */
.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); }

/* ============================================================
   LA OBRA · DOS PARTES (superficie arena)
   Una columna por parte; dentro, los actos como pares «Acto · título»
   con el mismo .reparto del programa.
   ============================================================ */
.obra__entradilla { margin-top: var(--space-lg); }

.partes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-2xl);
  margin-top: var(--space-2xl);
  align-items: start;
}

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

/* REGLA DE FICHAS EN FILA: el lema de la segunda parte es más largo y
   puede pasar a dos líneas. Las dos partes comparten las filas de la
   rejilla (subgrid), así los actos de ambas columnas arrancan siempre
   a la misma altura sin reservar un hueco fijo. */
.parte {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
}

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

.parte .reparto { margin-top: var(--space-sm); }

/* ============================================================
   REPARTO Y EQUIPO
   .reparto es el del Festival de Ópera, tal cual: pares separados por
   reglas finas, papel en tenue y nombre en pleno.
   ============================================================ */
.reparto {
  margin: var(--space-lg) 0 0;
  padding: 0;
  display: grid;
  font-size: var(--text-menor);
}

.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);
}

.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;
}

/* A dos columnas, leyendo de arriba abajo (es «por orden de
   intervención»): la rejilla fluye por columnas y las filas son
   compartidas, así un nombre que envuelve en una columna no descuadra
   la otra. --filas lo fija cada lista en el HTML (la mitad de sus
   pares). La primera fila de cada columna va sin filete. */
.reparto--dos {
  margin-top: var(--space-2xl);
  grid-auto-flow: column;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(var(--filas), auto);
  column-gap: var(--space-2xl);
}

.reparto--dos .reparto__papel { border-top: var(--linea) solid var(--borde); }
.reparto--dos .reparto__papel:first-child,
.reparto--dos .reparto__papel--cabeza { border-top: 0; }

.reparto__coro {
  font-size: var(--text-menor);
  color: var(--texto-tenue);
  margin: var(--space-lg) 0 0;
}

.equipo__entradilla { margin-top: var(--space-lg); }

/* ============================================================
   CIERRE · ENTRADAS
   Sobre negro, sin caja, como los cierres del Festival y del Open.
   ============================================================ */
.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;
}

.entradas__acciones {
  margin-top: var(--space-2xl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  align-items: center;
}

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

/* Instituciones: la línea fina que 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
   Idéntica a .dotacion de las bases, el Festival y el Open; se define
   aquí para que la página no dependa de otra hoja.
   ============================================================ */
.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);
}

.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);
  /* Public Sans siempre en 200: la voz de lectura del sistema. */
  font-weight: var(--fw-lectura);
  font-size: var(--text-lead);
  line-height: 1.3;
  color: var(--texto);
  text-align: right;
}

.dotacion__dato--menor dd {
  font-size: var(--text-cuerpo);
  color: var(--texto-tenue);
}

/* ============================================================
   TABLETA Y MÓVIL
   ============================================================ */
@media (max-width: 900px) {
  .tenorio-hero__contenido {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-xl);
  }
  .tenorio-hero__cartel {
    max-width: 300px;
    justify-self: start;
  }

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

@media (max-width: 760px) {
  .partes { grid-template-columns: minmax(0, 1fr); }
  .partes { row-gap: var(--space-xl); }

  /* Reparto y equipo, en una sola lista corrida. */
  .reparto--dos {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  .reparto--dos .reparto__papel--cabeza {
    border-top: var(--linea) solid var(--borde);
  }
}

@media (max-width: 640px) {
  .dotacion__dato {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3xs);
  }
  .dotacion dd { text-align: left; }
}