/*
 * Lo NUESTRO. Hasta aquí el sitio se pintaba solo con la hoja que publicaba Webflow
 * —para que la reconstrucción midiera igual que el original— y con `animaciones.css`,
 * que genera `tools/extraer-animaciones.mjs` y no se edita a mano.
 *
 * Este fichero es el tercero: los estilos que ya NO reproducen Webflow sino que
 * cambian el sitio a propósito. Va aparte y no dentro de la hoja de Webflow por dos
 * razones: aquella se regenera al recapturar y se llevaría los cambios por delante, y
 * teniéndolo separado se sabe de un vistazo qué es herencia y qué es decisión nuestra.
 *
 * Se apoya en las variables de color del sitio (`--pale-goldenrod`, `--dark-khaki`,
 * `--black`, `--light-coral`), que declara la hoja de Webflow en `:root`.
 */

/* ─────────────────────────────────────────── tarjeta de próximos, en la portada ── */

/*
 * Antes: el hueco de la foto era un `<img>` suelto que, cuando el concierto no tenía
 * imagen, se escondía con `w-dyn-bind-empty` y la tarjeta se quedaba sin nada arriba.
 * En la portada eso eran tres de cuatro tarjetas: un bloque negro con texto y ya.
 *
 * Ahora el hueco existe siempre y mide lo mismo (los 350 px que ya pedía
 * `.hom-upcoming`): con foto, la foto; sin foto, color liso. Encima va la etiqueta de
 * la serie, que es lo que dice de un vistazo a qué pertenece cada concierto.
 */
.hom-medio {
  position: relative;
  width: 100%;
  height: 350px;
  overflow: hidden;
}

.hom-medio .hom-upcoming {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sin foto: la caja se llena de color en vez de desaparecer. */
.hom-medio.sin-foto {
  background-color: var(--dark-khaki);
}

/*
 * La etiqueta de serie. Va abajo a la izquierda del hueco, que es donde no tapa una
 * cara: las fotos del festival son retratos y el rostro cae arriba.
 */
.hom-serie {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: calc(100% - 12px);
  padding: 7px 12px 6px;
  background-color: var(--black);
  color: var(--pale-goldenrod);
  font-family: Neuemontreal, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Sobre el color liso el negro pierde fuerza: se invierte. */
.hom-medio.sin-foto .hom-serie {
  background-color: var(--pale-goldenrod);
  color: var(--black);
}

@media screen and (max-width: 991px) {
  .hom-medio { height: 260px; }
}

@media screen and (max-width: 767px) {
  .hom-medio { height: 300px; }
}

/* ─────────────────────────────────────────────── ficha de concierto: que mida ── */

/*
 * Webflow fijaba las alturas a mano y en pantalla grande sobraba media pagina. Medido en
 * `/concerts/felipe-diez-2027` a 1440x900: 2.788 px de pagina para 802 caracteres de
 * biografia. La cabecera eran 1.100 px clavados —mas alta que la pantalla— y el cuerpo
 * 900 px porque `.col-program` pedia `min-height: 100vh`, con la columna del programa
 * ocupando 713 px para decir «PROGRAM» y nada mas.
 *
 * Aqui las alturas pasan a depender del contenido, con un suelo para que una ficha corta
 * no quede raquitica. Las clases son exclusivas de /concerts y /events —comprobado sobre
 * el sitio construido—, asi que esto no toca ni una pagina capturada.
 */
.head-concerts {
  height: auto;
  min-height: min(74vh, 720px);
}

.col-concierto,
.col-concierto.info,
.col-concierto.pic {
  height: auto;
  min-height: 0;
}

/* La columna de la foto necesita un suelo propio: si no, sin foto se queda en nada y la
   cabecera pierde su mitad. */
.col-concierto.pic { min-height: min(74vh, 720px); }
.col-concierto.info { padding-top: 64px; padding-bottom: 72px; }

.section-program-bio { align-items: stretch; }

.col-description.grrr.sesale,
.col-program {
  height: auto;
  min-height: 0;
}

.col-description.grrr.sesale { padding-top: 72px; padding-bottom: 72px; }
.col-program { padding-top: 72px; padding-bottom: 80px; }

/*
 * La medida de lectura. A 713 px y 16 px de cuerpo salen casi 90 caracteres por linea:
 * el ojo se pierde al volver. Se limita, y el texto se queda arrimado a la izquierda de
 * su columna, que es donde empieza a leerse.
 */
.col-program .rich-text-block-6 { max-width: 34em; }
.col-program .rich-text-block-6 p { line-height: 1.55; }
.col-program .rich-text-block-6 + .rich-text-block-6 { margin-top: 1.4em; }

/*
 * Sin programa no hay columna de programa. La ficha la pinta con `.col-program.full`
 * —clase que ya existia en la hoja de Webflow, sin usar— y el texto pasa a ocupar el
 * ancho entero con su medida de lectura centrada.
 */
.col-program.full { width: 100%; }
.col-program.full .rich-text-block-6 { margin-left: auto; margin-right: auto; }

@media screen and (max-width: 767px) {
  .head-concerts { min-height: 0; }
  .col-concierto.pic { min-height: 46vh; }
  .col-program .rich-text-block-6 { max-width: none; }
}


/* ──────────────────────────────────── pagina de evento: a lo ancho, a dos columnas ── */

/*
 * La cabecera. La barra de navegacion es `fixed` y ocupa 110 px, y `.head-concerts` traia
 * de Webflow 112 px de relleno arriba mas un margen: entre la barra negra y las columnas
 * quedaban 143 px de fondo amarillo que no eran de nadie. Aqui el bloque empieza justo
 * debajo de la barra —el margen queda DETRAS de ella, que es opaca— y el aire de arriba
 * pasa a la columna de texto, que si tiene color propio.
 */
.ev-cabecera {
  /* `body-3` reserva sitio para la barra con `padding-top`, y eso pinta el fondo de la
     pagina como una franja. Aqui se anula con un margen negativo del mismo valor —cambia
     por anchura, de ahi las tres— y el aire vuelve DENTRO de la columna de texto, que si
     tiene color propio. La foto sube hasta arriba y corre por debajo de la barra, que es
     opaca. */
  margin-top: -141px;
  padding-top: 0;
}

/* La columna de texto de la cabecera va centrada: es una portada —fecha, titular, quiénes
   firman y dónde—, no una ficha con datos que alinear. Centrada, el titular manda y el
   subtítulo largo se reparte a los dos lados en vez de colgar de un margen. */
.ev-cabecera .col-concierto.info {
  padding-top: 200px;
  text-align: center;
  align-items: center;
}

.ev-cabecera .col-concierto.info .heading-artists,
.ev-cabecera .col-concierto.info .text-country { text-wrap: balance; }

/* Los dos bloques que traían margen o alineación propios de la maqueta de Webflow y que
   con el centrado se quedaban descolgados. */
.ev-cabecera .col-concierto.info .div-block-10,
.ev-cabecera .col-concierto.info .div-block-43 {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.ev-cabecera .col-concierto.info .text-country { max-width: 34em; }

@media screen and (max-width: 991px) {
  .ev-cabecera { margin-top: -132px; }
  .ev-cabecera .col-concierto.info { padding-top: 190px; }
}

@media screen and (max-width: 767px) {
  .ev-cabecera { margin-top: -141px; }
  .ev-cabecera .col-concierto.info { padding-top: 60px; }
  /* En movil las columnas se apilan: la foto ya ocupa la franja de arriba, asi que el
     texto no necesita despejar la barra. */
  .ev-cabecera .col-concierto.pic { padding-top: 141px; }
}

@media screen and (max-width: 479px) {
  .ev-cabecera { margin-top: -117px; }
  .ev-cabecera .col-concierto.pic { padding-top: 117px; }
}

/*
 * El cuerpo. Antes era una columna central estrecha; la pagina es ancha y desaprovecharla
 * con el texto ya resumido era tirar el formato. Ahora el texto va a dos columnas de
 * verdad, y lo que no es texto corrido —cifras, indice, cita, creditos— ocupa todo el
 * ancho y marca el ritmo de la lectura.
 */
.ev-lectura {
  background-color: var(--pale-goldenrod);
  color: var(--black);
  padding: 72px 5vw 96px;
  font-family: Neuemontreal, sans-serif;
}

.ev-lectura > * { max-width: 1180px; margin-left: auto; margin-right: auto; }

/* La entradilla va al mismo cuerpo que el texto de abajo: no es un reclamo, es el primer
   parrafo, y en cuerpo grande hacia de titular segundo. Se le deja su medida de lectura. */
.ev-lede {
  font-size: 16px;
  line-height: 1.62;
  margin-bottom: 56px;
}
/* La medida va en los parrafos y no en el bloque: si la lleva el bloque, los margenes
   automaticos de `.ev-lectura > *` lo centran en la pagina y el texto deja de alinear
   con el resto de la columna. */
.ev-lede p { margin: 0 0 1em; max-width: 38rem; }

/* ── las cifras del dia ──
 *
 * No es una tabla de cuatro cajas iguales en fila: eso se lee como un adorno de plantilla.
 * Es una seccion con su nombre y su entrada —a la izquierda— y los numeros a la derecha,
 * en dos por dos. El texto explica que se cuenta; los numeros lo rematan.
 */
.ev-cifras {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 4vw;
  align-items: start;
  border-top: 2px solid var(--black);
  padding-top: 26px;
  margin-bottom: 72px;
}

.ev-cifras-intro p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  max-width: 26em;
}

.ev-figuras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 4%;
  row-gap: 28px;
}

.ev-figura {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 14px;
  border-top: 1px solid var(--black);
  padding-top: 12px;
}

.ev-figura b {
  font-family: Trajanpro, serif;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: .9;
  font-weight: 400;
}

.ev-figura span { font-size: 14px; line-height: 1.35; }

/* ── las fichas de concierto del evento ──
 *
 * Dos bloques iguales, uno por concierto, en el sitio que ocupaba la tabla de cifras.
 *
 * Van sobre campo NEGRO con el texto en oro, invirtiendo la pagina: dentro de una lectura
 * larga en dorado, este es el unico bloque que no se lee, se consulta —fechas, sala,
 * reparto— y el cambio de campo lo separa mejor que cualquier filete. Es ademas el par de
 * la casa: la barra y el pie ya son negro con oro.
 */
.ev-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 56px 4vw;
  margin-bottom: 72px;
  background-color: var(--black);
  color: var(--pale-goldenrod);
  padding: 56px 48px 52px;
}

.ev-tarjeta {
  border-top: 2px solid var(--pale-goldenrod);
  padding-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ev-tarjeta-rotulo {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ev-tarjeta-titulo {
  font-family: Trajanpro, serif;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.1;
  margin: 10px 0 0;
  color: var(--pale-goldenrod);
}

/* Lo secundario se aparta bajando la opacidad del oro, no cambiando de color: dos oros
   distintos sobre negro se leen como un error de marca. */
.ev-tarjeta-donde { margin-top: 8px; font-size: 14px; line-height: 1.4; opacity: .68; }

.ev-tarjeta-entrada { margin: 16px 0 0; font-size: 16px; line-height: 1.55; }

.ev-reparto { list-style: none; margin: 20px 0 0; padding: 0; width: 100%; }

.ev-reparto li {
  border-top: 1px solid #f3e5b140;
  padding: 10px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
}

.ev-reparto b {
  font-family: Trajanpro, serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ev-reparto span { font-size: 14px; line-height: 1.4; opacity: .72; }

/* El enlace va al final y pegado abajo, para que las dos fichas lo alineen aunque una
   tenga tres intérpretes y la otra dos. */
.ev-tarjeta-enlace {
  margin-top: auto;
  padding-top: 22px;
  color: var(--pale-goldenrod);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 0 var(--pale-goldenrod);
  transition: opacity .25s ease;
}

.ev-tarjeta-enlace:hover { opacity: .6; }

@media screen and (max-width: 767px) {
  .ev-tarjetas { padding: 36px 24px 32px; gap: 40px 24px; }
}

/* ── el texto, a dos columnas ── */
.ev-texto {
  column-count: 2;
  column-gap: 4vw;
  column-rule: 1px solid #1a1a1a26;
}

/* Una seccion no se parte entre columnas: se lee entera o pasa a la siguiente. */
.ev-seccion {
  break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 40px;
  scroll-margin-top: 130px;
}

.ev-titulo {
  font-family: Trajanpro, serif;
  font-size: 24px;
  line-height: 1.18;
  margin: 0 0 16px;
}

.ev-cuerpo { font-size: 16px; line-height: 1.62; }
.ev-cuerpo p { margin: 0 0 1em; }
.ev-cuerpo p:last-child { margin-bottom: 0; }

/* ── la cita, con la sala al lado ── */
.ev-cita {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 4vw;
  align-items: center;
  margin-top: 8px;
}

.ev-lema {
  /* La hoja de Webflow le pone a todo `blockquote` un `border-left: 5px solid #e2e2e2`.
     Ahi salia la franja gris pegada a la cita. Se anula: los filetes son los de arriba y
     abajo, que si son del diseno. */
  border-left: 0;
  margin: 0;
  padding: 36px 0 38px;
  border-top: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
  font-family: Trajanpro, serif;
  font-size: clamp(21px, 2.1vw, 28px);
  line-height: 1.28;
}

.ev-foto { margin: 0; }
.ev-foto img { display: block; width: 100%; height: auto; }
.ev-foto figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: .02em;
}

/* ── lo practico ── */
.ev-practico {
  margin-top: 64px;
  padding: 30px 32px 32px;
  background-color: var(--dark-khaki);
  border: 1px solid var(--black);
}

.ev-practico .ev-titulo { font-size: 21px; margin-bottom: 14px; }
.ev-practico ul { margin: 0 0 16px; padding-left: 1.15em; font-size: 16px; line-height: 1.55; }
.ev-practico li { margin-bottom: 8px; }
.ev-practico p { margin: 0; font-size: 16px; line-height: 1.55; }
.ev-practico a { color: var(--black); }

/* ── quien lo hace ── */
.ev-creditos { margin-top: 80px; }

/* La proporcion del original (2426x1365). Sin ella la imagen tardia no reserva sitio y
   la pagina pega un salto al cargarla. */
.ev-arte { display: block; width: 100%; height: auto; aspect-ratio: 2426 / 1365; }

.ev-creditos-titulo {
  margin-top: 36px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ev-creditos-titulo { text-align: center; }

.ev-colaboradores {
  list-style: none;
  margin: 14px 0 0;
  padding: 16px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 36px;
  border-top: 1px solid var(--black);
  font-family: Trajanpro, serif;
  font-size: 17px;
  line-height: 1.3;
  text-align: center;
}

.ev-cierre {
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid var(--black);
  font-size: 13px;
  line-height: 1.5;
  font-style: italic;
}

@media screen and (max-width: 767px) {
  .ev-lectura { padding: 48px 20px 72px; }
  .ev-texto { column-count: 1; }
  .ev-lede { font-size: 19px; margin-bottom: 40px; }
  .ev-cifras, .ev-cita { grid-template-columns: 1fr; gap: 26px; }
  .ev-practico { padding: 24px 20px 26px; }
}

/* ────────────────────────────── la banda de entradas, pegada al pie ── */

/*
 * `.footer` lleva `margin-top: 66px` de la hoja de Webflow, y entre la banda coral de
 * «buy tickets» y el pie negro quedaba una franja del fondo de la pagina. Se anula solo
 * cuando el pie va JUSTO detras de esa banda —que es donde canta—, no en todo el sitio.
 */
.buy-tickets-intersect + .footer { margin-top: 0; }

/* ───────────────────────────────────── paginacion del listado de noticias ── */

/*
 * Webflow no publicaba paginacion en esta web —la lista salia entera, 47 tarjetas— asi que
 * su hoja no trae ni una regla de `w-pagination`. Estos estilos son nuevos. Van sobre
 * `body-black`, de ahi que el texto sea claro.
 */
.nt-paginas {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 64px auto 96px;
  padding: 0 20px;
  font-family: Neuemontreal, sans-serif;
}

.nt-numeros {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.nt-numero {
  display: block;
  min-width: 38px;
  padding: 8px 10px;
  border: 1px solid #f3e5b166;
  color: var(--pale-goldenrod);
  font-size: 15px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.nt-numero:hover { border-color: var(--pale-goldenrod); }

.nt-numero.actual {
  background-color: var(--pale-goldenrod);
  border-color: var(--pale-goldenrod);
  color: var(--black);
}

.nt-paso {
  color: var(--pale-goldenrod);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid #f3e5b166;
  padding-bottom: 3px;
}

.nt-paso:hover { border-bottom-color: var(--pale-goldenrod); }

/* En la primera y en la ultima pagina, el paso que no lleva a ningun sitio se queda
   apagado y sin ser un enlace: un `<a>` sin `href` no recibe foco ni se puede pulsar. */
.nt-paso.apagado { opacity: .35; border-bottom-color: #0000; cursor: default; }

@media screen and (max-width: 479px) {
  .nt-paginas { gap: 14px; }
  .nt-numero { min-width: 32px; padding: 7px 6px; font-size: 14px; }
}

/* ═══════════════════════════════════ ficha de concierto · maqueta «cartel» ══ */

/*
 * Aprobada el 20-ago-2026. Sustituye a la maqueta de Webflow, que fijaba las alturas a
 * mano y dejaba media pagina vacia cuando faltaba el programa —que es el caso de 14 de
 * los 15 conciertos de la temporada.
 *
 * REGLA DE LA FICHA: un dato que no esta no deja hueco. La plantilla no pinta la seccion,
 * y estos estilos no reservan sitio para nada. Por eso casi no hay alturas fijas.
 *
 * La paleta y las tipografias son las de la casa: coral para el cartel, oro para el
 * cuerpo, Trajan para lo que se lee de lejos y Neue Montreal para lo que se lee de cerca.
 */

.fc-cartel {
  /* Lo que mide la barra fija en este ancho. `body-3` reserva ese hueco con relleno; el
     cartel lo anula con margen negativo para subir hasta debajo de la barra, y luego lo
     devuelve DENTRO de la columna de texto. La foto no lo devuelve: por eso sangra hasta
     el borde inferior de la barra en vez de quedar una franja coral encima. */
  --fc-barra: 141px;

  display: grid;
  grid-template-columns: 1fr 40%;
  min-height: calc(58vh + var(--fc-barra));
  background-color: var(--light-coral);
  color: var(--black);
  margin-top: calc(var(--fc-barra) * -1);
  font-family: Neuemontreal, sans-serif;
}

/* Sin imagen el cartel es de una sola columna: media caja vacia es peor que un cartel
   estrecho. */
.fc-cartel:not(:has(.fc-cartel-foto)) { grid-template-columns: 1fr; }

.fc-cartel-texto {
  padding: calc(var(--fc-barra) + 54px) 5vw 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  /* Contenedor de consulta: el nombre se dimensiona contra el ancho REAL de esta columna,
     no contra el de la ventana. Es lo que permite que el mismo cuerpo funcione con la
     columna al 60% y a pantalla completa cuando no hay foto. */
  container-type: inline-size;
}

.fc-encima {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.fc-fecha { display: flex; align-items: flex-end; gap: 20px; margin-top: 22px; }

.fc-dia {
  font-family: Trajanpro, serif;
  font-size: clamp(56px, 7vw, 96px);
  line-height: .8;
  letter-spacing: -.02em;
}

.fc-mes {
  display: flex;
  flex-direction: column;
  padding-bottom: 8px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.5;
}

.fc-nombre {
  font-family: Trajanpro, serif;
  font-weight: 400;

  /* El cuerpo lo decide el propio nombre. La plantilla escribe dos medidas: `--fc-ch`, las
     letras de la palabra más larga, y `--fc-total`, las del nombre entero. El primer
     término crece hasta que esa palabra roza el borde de la columna; el segundo frena
     cuando el nombre pasaría de tres líneas. Sin esto no hay un tamaño único posible:
     «Ilya Itin» y «Two-Piano Extravaganza — Season Gala» no caben igual.

     El 0.75 es el ancho de una letra en em, medido sobre las catorce fichas de la
     temporada y tomado por el peor caso: «Mehdi Ghazi» necesita 0.72 —M, G, H y Z son las
     capitales más anchas de Trajan— mientras que «Bibileishvili», que va casi todo en
     versalitas, se conforma con 0.52. Un promedio dejaría desbordar a la mitad. */
  font-size: max(
    30px,
    min(
      104px,
      calc(94cqw / (var(--fc-ch, 10) * 0.75)),
      calc(300cqw / (var(--fc-total, 16) * 0.75))
    )
  );

  /* Y las dos líneas se fuerzan aquí, estrechando la caja al 85% de lo que mide el nombre
     entero: por debajo del nombre completo —así nunca cabe en una línea— y por encima de
     su palabra más larga —así nunca se corta—. Se mide sobre el total y no sobre la
     palabra larga porque el ancho por letra varía tanto entre nombres que un ancho atado a
     la palabra deja a «Lika Bibileishvili», que es casi toda versalitas, en una sola
     línea. Sobre el total, la proporción se sostiene sea cual sea ese ancho. */
  max-width: calc(var(--fc-total, 16) * 0.44em);

  line-height: 1.02;
  margin: 22px 0 0;
  text-wrap: balance;
  /* Explicito: la hoja de Webflow pinta los `h1` de oro palido, que sobre el coral del
     cartel casi no se lee y ademas rompe con el resto del bloque, todo en negro. */
  color: var(--black);
}

/* El pais, bajo el nombre y con el mismo tratamiento que el antetitulo: son las dos
   etiquetas del cartel, y leerlas iguales las agrupa. */
.fc-pais {
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.fc-resumen { margin-top: 12px; font-size: 16px; line-height: 1.45; max-width: 26em; }

.fc-cartel-pie { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; }

/* El precio y el botón son una unidad: el precio encima, pegado. */
.fc-accion { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

.fc-precio {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* El reclamo de venta pendiente ocupa exactamente el hueco del botón —mismo cuerpo, mismo
   relleno, mismo radio— para que el cartel no se recomponga el día que entre el enlace. El
   trazo discontinuo y el gris son lo único que cambia, y son los que dicen que aquí no se
   pulsa todavía. */
.fc-pronto {
  display: inline-block;
  border: 1px dashed #00000059;
  border-radius: 50px;
  padding: 11px 26px;
  color: #0000009e;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.fc-boton {
  display: inline-block;
  border: 1px solid var(--black);
  border-radius: 50px;
  padding: 11px 26px;
  color: var(--black);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.fc-boton:hover { background-color: var(--black); color: var(--light-coral); }

.fc-donde { display: flex; flex-direction: column; gap: 5px; }
.fc-donde-linea { font-size: 16px; line-height: 1.35; }
/* La direccion, en cuerpo menor y bajo la linea de hora y sala. */
.fc-donde-dir { font-size: 12.5px; line-height: 1.4; color: #00000099; max-width: 26em; }

/* La foto ocupa la columna entera, barra incluida: los `--fc-barra` de arriba quedan
   tapados por la barra negra, que es justamente la sangre que se busca. Por eso el encuadre
   se sesga hacia arriba —los retratos llevan la cabeza en el tercio alto— y no al centro:
   centrado, la parte que se pierde bajo la barra seria la cara. */
.fc-cartel-foto { position: relative; min-height: 340px; }
.fc-cartel-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
}

/* ── el cuerpo ── */

.fc-cuerpo {
  display: grid;
  grid-template-columns: 22% 1fr;
  gap: 4vw;
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 5vw 88px;
  color: var(--black);
  font-family: Neuemontreal, sans-serif;
}

/* El fondo dorado y el hueco de la barra los pone `body-3`, la misma clase que usan
   /season y las paginas de evento. */

.fc-indice { position: sticky; top: 130px; align-self: start; }

.fc-indice a {
  position: relative;
  display: block;
  border-top: 1px solid var(--black);
  padding: 10px 0;
  color: var(--black);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  /* El desplazamiento del rótulo, acompasado con la raya que lo empuja. La curva sale
     rápida y frena al final, que es como se mueve algo que tiene peso. */
  transition: padding-left .3s cubic-bezier(.2, .7, .3, 1), color .3s ease;
}

.fc-indice a:first-child { border-top-width: 2px; }

/* La raya crece desde el margen y hace sitio al rótulo: el movimiento se lee como una
   causa —la raya entra, el texto cede— en vez de como un salto. */
.fc-indice a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1px;
  background-color: currentColor;
  transition: width .3s cubic-bezier(.2, .7, .3, 1);
}

.fc-indice a:hover,
.fc-indice a:focus-visible { padding-left: 24px; }

.fc-indice a:hover::before,
.fc-indice a:focus-visible::before { width: 16px; }

/* El salto a la sección, deslizado en vez de instantáneo. Va acotado a las fichas de
   concierto —`:has(.fc-cartel)`— porque el resto del sitio es material heredado de Webflow
   y no toca cambiarle el comportamiento de scroll por la puerta de atrás. El
   `scroll-margin-top` es lo que hace que la sección pare debajo de la barra y no detrás. */
@media (prefers-reduced-motion: no-preference) {
  :root:has(.fc-cartel) { scroll-behavior: smooth; }
}

/* Quien pide menos movimiento no recibe ninguno: ni el deslizamiento ni las transiciones
   del índice. */
@media (prefers-reduced-motion: reduce) {
  .fc-indice a,
  .fc-indice a::before { transition: none; }
}

.fc-seccion { scroll-margin-top: 130px; }
.fc-seccion + .fc-seccion { margin-top: 52px; }

.fc-titulo {
  font-family: Trajanpro, serif;
  font-weight: 400;
  font-size: clamp(21px, 2.2vw, 27px);
  line-height: 1.2;
  margin: 0 0 18px;
  border-top: 1px solid var(--black);
  padding-top: 16px;
}

.fc-texto { font-size: 16px; line-height: 1.62; max-width: 36em; }
.fc-texto p { margin: 0 0 1em; }
.fc-texto p:last-child { margin-bottom: 0; }
.fc-texto + .fc-texto { margin-top: 1.4em; }

.fc-cita {
  margin: 26px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid #00000033;
  border-left: 0;
  max-width: 34em;
  font-family: Trajanpro, serif;
  font-size: 19px;
  line-height: 1.35;
}

.fc-cita p { margin: 0; }
.fc-cita cite {
  display: block;
  margin-top: 10px;
  font-family: Neuemontreal, sans-serif;
  font-size: 12px;
  font-style: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ── el repertorio ──
 *
 * Ninguna de las diez referencias que se miraron trata el repertorio como texto corrido.
 * Aqui se le da la estructura de un programa de mano: el compositor destaca, la obra va
 * seguida y los movimientos se sangran. El contenido sigue llegando como texto rico desde
 * el CMS, asi que se estiliza por elemento y no por clase. */

.fc-parte + .fc-parte { margin-top: 28px; }

.fc-parte-rotulo {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #00000099;
  margin-bottom: 10px;
}

.fc-obras { font-size: 15px; line-height: 1.5; max-width: 36em; }

.fc-obras p {
  margin: 0;
  padding: 11px 0;
  border-top: 1px solid #00000022;
}

/* Un parrafo vacio del texto rico no pinta una raya de la nada. */
.fc-obras p:empty { display: none; }

/* El compositor: en la captura viene en `<strong>` al principio de cada obra. */
.fc-obras strong {
  display: block;
  font-family: Trajanpro, serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 3px;
}

/* Los movimientos y las indicaciones vienen en cursiva. */
.fc-obras em { font-style: normal; color: #000000AA; }

/* ── lo practico ── */

.fc-practica {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 32px;
  margin: 0;
}

.fc-practica > div { border-top: 1px solid #00000022; padding: 12px 0; }
.fc-practica dt {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #00000099;
  margin-bottom: 4px;
}
.fc-practica dd { margin: 0; font-size: 15px; line-height: 1.45; }

.fc-evento { margin: 18px 0 0; font-size: 14px; }
.fc-evento a { color: var(--black); }

/* En cada ancho basta con decirle al cartel lo que mide la barra ahi: el margen negativo,
   el relleno de la columna de texto y el alto minimo salen todos de esa cifra. Son las
   mismas que usa `.body-3` en la hoja heredada. */

@media screen and (max-width: 991px) {
  .fc-cartel { --fc-barra: 132px; }
  .fc-indice { top: 110px; }
}

@media screen and (max-width: 767px) {
  .fc-cartel { --fc-barra: 141px; grid-template-columns: 1fr; min-height: 0; }
  /* En una columna el aire de arriba sobra: el cartel ya no tiene que llenar la pantalla,
     y 54px bajo la barra dejaban el antetitulo flotando a media altura. */
  .fc-cartel-texto { padding: calc(var(--fc-barra) + 6px) 20px 34px; gap: 26px; }
  /* Apaisada no cabe un retrato: la mitad de las fotos de la temporada son verticales y a
     240px de alto se quedaban en un recorte de los hombros. Con proporcion en vez de alto
     fijo, la foto crece con el ancho del telefono. */
  .fc-cartel-foto { min-height: 0; aspect-ratio: 4 / 5; }
  .fc-cartel-foto img { object-position: 50% 18%; }
  .fc-cuerpo { grid-template-columns: 1fr; gap: 30px; padding: 44px 20px 64px; }
  .fc-indice { position: static; }
}

@media screen and (max-width: 479px) {
  .fc-cartel { --fc-barra: 117px; }
}

/* ═════════════════════════════════ los filtros de /season · árbol de series ══ */

/*
 * El problema que arregla: `ALL CONCERTS` llevaba fondo negro SIEMPRE y color de texto solo
 * cuando estaba activa, así que sin activar era negro sobre negro —invisible—. Y de paso,
 * las seis pestañas se pintaban iguales, cuando no lo son: una es el todo y las otras cinco
 * son cortes de ese todo.
 *
 * El sistema: un TRONCO y sus RAMAS. El tronco va solo en su línea, en Trajan y a mayor
 * cuerpo, sobre el campo negro de la casa; de él baja un vástago hasta un travesaño, y bajo
 * el travesaño se alinean las ramas, más pequeñas y en Neue Montreal. La jerarquía se lee
 * antes que las etiquetas: se ve que hay un nivel y luego otro.
 *
 * Todo se hace por CSS y con `order`, sin tocar el DOM: la maqueta de Webflow espera los
 * `.w-tab-link` como hijos directos del menú y anidarlos rompería el guion de pestañas.
 */

.tab-concert-series .tabs-menu:has(.all-concerts) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.tabs-menu:has(.all-concerts) .tab-link { margin: 0; order: 1; }

/* ── el tronco ── */

.tabs-menu:has(.all-concerts) .tab-link.all-concerts {
  order: -1;
  /* Ocupa la línea entera para forzar el salto; el negro no lo pinta él, lo pinta su hijo,
     que es lo que mantiene la píldora estrecha y centrada. */
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  background-color: #0000;
  border: 0;
  padding: 0;
}

.tabs-menu .tab-link.all-concerts > div {
  background-color: var(--black);
  /* El oro va siempre, activa o no: era justo lo que faltaba. El estado lo dice el
     travesaño de debajo, no el color del texto. */
  color: var(--pale-goldenrod);
  border-radius: 50px;
  padding: 13px 40px;
  font-family: Trajanpro, serif;
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: box-shadow .25s ease, background-color .25s ease;
}

.tabs-menu .tab-link.all-concerts:hover > div { background-color: #1f1f1f; }

/* Activa: un aro dorado alrededor de la píldora. Es la única marca de estado del tronco. */
.tabs-menu .tab-link.all-concerts.w--current > div {
  box-shadow: 0 0 0 1px var(--black), 0 0 0 3px var(--pale-goldenrod);
}

/* ── el vástago y el travesaño ──
   Una sola caja a todo lo ancho con dos rayas pintadas de fondo: la vertical baja del
   tronco y la horizontal abre las ramas. Van en `::before` con `order: 0`, entre el tronco
   y las ramas. */
.tab-concert-series .tabs-menu:has(.all-concerts)::before {
  content: "";
  order: 0;
  flex: 0 0 100%;
  height: 26px;
  background-image:
    linear-gradient(var(--black), var(--black)),
    linear-gradient(var(--black), var(--black));
  background-repeat: no-repeat;
  background-size: 1px 26px, min(620px, 76%) 1px;
  background-position: center top, center bottom;
  opacity: .45;
}

/* ── las ramas ── */

.tabs-menu:has(.all-concerts) .tab-link:not(.all-concerts) {
  padding: 8px 18px;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.tabs-menu:has(.all-concerts) .tab-link:not(.all-concerts) .text-block-8 {
  font-size: 13px;
  letter-spacing: .06em;
}

@media screen and (max-width: 767px) {
  .tab-concert-series .tabs-menu:has(.all-concerts)::before {
    height: 20px;
    background-size: 1px 20px, 88% 1px;
  }
  .tabs-menu .tab-link.all-concerts > div { padding: 11px 28px; }
}

/* ═════════════════════════════════════ política de privacidad y cookies ══ */

/*
 * La única página del sitio escrita por nosotros de cero. La maqueta es deliberadamente
 * sobria: una columna de lectura, sin cabecera con foto y sin adornos. Un documento legal
 * se lee de arriba abajo; todo lo que compita con esa lectura sobra.
 *
 * Usa el campo dorado de la casa y el negro del texto, con Trajan en los títulos y Neue
 * Montreal en el cuerpo, para que no parezca una página de otro sitio.
 */

.leg {
  max-width: 46rem;
  margin: 0 auto;
  padding: 56px 5vw 96px;
  color: var(--black);
  font-family: Neuemontreal, sans-serif;
}

.leg-cabecera { border-bottom: 2px solid var(--black); padding-bottom: 30px; }

.leg-titulo {
  font-family: Trajanpro, serif;
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}

/* La entradilla, en cuerpo mayor: dice de qué va la página y por qué es corta. */
.leg-lede { margin: 22px 0 0; font-size: 18px; line-height: 1.55; }

.leg-fecha {
  margin: 18px 0 0;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #00000099;
}

/* El índice: nueve secciones son demasiadas para ir buscando a ojo. En dos columnas
   cuando cabe, porque en una sola ocuparía media pantalla antes de empezar a leer. */
.leg-indice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0 32px;
  margin: 34px 0 8px;
}

.leg-indice a {
  display: block;
  border-top: 1px solid #00000022;
  padding: 9px 0;
  color: var(--black);
  font-size: 13px;
  line-height: 1.3;
  text-decoration: none;
  transition: padding-left .25s cubic-bezier(.2, .7, .3, 1);
}

.leg-indice a:hover,
.leg-indice a:focus-visible { padding-left: 8px; }

.leg-seccion { scroll-margin-top: 130px; margin-top: 46px; }

.leg-h2 {
  font-family: Trajanpro, serif;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.2;
  margin: 0 0 16px;
}

.leg-cuerpo { font-size: 16px; line-height: 1.65; }
.leg-cuerpo p { margin: 0 0 1em; }
.leg-cuerpo p:last-child { margin-bottom: 0; }
.leg-cuerpo ul { margin: 0 0 1em; padding-left: 1.2em; }
.leg-cuerpo li { margin-bottom: .5em; }
.leg-cuerpo a { color: var(--black); }

/* Los nombres de cookie van en monoespaciada: son cadenas literales que alguien puede
   querer buscar en su navegador, no prosa. */
.leg-cuerpo code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .92em;
  background-color: #0000000d;
  padding: 1px 5px;
  border-radius: 3px;
}

@media screen and (max-width: 767px) {
  .leg { padding: 36px 20px 64px; }
  .leg-lede { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════ la página de 404 ══ */

/*
 * La que había era la de la Plataforma Virtual, de una sección retirada: marca ajena,
 * botón de «log out» y cinco enlaces a `#`. Esta es de la casa y hace lo único que tiene
 * que hacer: decir qué ha pasado y ofrecer por dónde seguir.
 *
 * El número en grande es el mismo recurso que el día en la ficha de concierto —Trajan a
 * tamaño de cartel—, para que se reconozca como parte del mismo sitio.
 */
.e404 {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(56px, 12vh, 130px) 5vw clamp(72px, 14vh, 150px);
  color: var(--black);
  font-family: Neuemontreal, sans-serif;
  text-align: center;
}

.e404-codigo {
  font-family: Trajanpro, serif;
  font-size: clamp(64px, 12vw, 132px);
  line-height: .85;
  margin: 0;
  /* El número no es el mensaje: acompaña. De ahí el coral en vez del negro. */
  color: var(--light-coral);
}

.e404-titulo {
  font-family: Trajanpro, serif;
  font-weight: 400;
  font-size: clamp(26px, 3.8vw, 44px);
  line-height: 1.1;
  margin: 26px 0 0;
  text-wrap: balance;
}

.e404-texto {
  margin: 20px auto 0;
  max-width: 34em;
  font-size: 17px;
  line-height: 1.6;
}

/* Las salidas, como el índice de la ficha: filete arriba y el rótulo desplazándose al
   pasar por encima. Es el mismo gesto en todo el sitio. */
.e404-salidas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0 32px;
  margin-top: 44px;
  text-align: left;
}

.e404-salidas a {
  display: block;
  border-top: 1px solid var(--black);
  padding: 13px 0;
  color: var(--black);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: padding-left .28s cubic-bezier(.2, .7, .3, 1);
}

.e404-salidas a:hover,
.e404-salidas a:focus-visible { padding-left: 10px; }

@media (prefers-reduced-motion: reduce) {
  .e404-salidas a { transition: none; }
}