/*
 * 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%;
  /* El encuadre lo deciden `.montaje` y `.retrato-alto`, que pone la plantilla según el
     reparto del concierto. Aquí solo queda el valor por defecto para una foto sin clasificar:
     llenar la caja, que es lo que espera el diseño de la tarjeta. */
  object-fit: cover;
}

/* MONTAJE de varios retratos (los conciertos a varias manos, que compone
   `tools/componer-retratos.mjs`). Desde el 26-ago-2026 son COLUMNAS VERTICALES A SANGRE, y
   por eso pasa de `contain` a `cover`: antes eran retratos apilados con relleno negro a los
   lados, y `contain` era la única forma de no cortarlos.

   Lo que hace que ahora `cover` no corte: al componer, cada cara se coloca al 44 % del alto
   de su columna, y el recorte apaisado de la tarjeta conserva la banda central (del 21 % al
   79 %). Es decir, el encuadre está resuelto en la imagen, no aquí.

   RETRATO SUELTO: llena la caja con encuadre alto. Esto es solo el RESPALDO: desde el
   26-ago-2026 cada foto lleva su `object-position` en línea, calculado detectando la cara
   (`tools/focos.mjs`), y eso gana a esta regla. Aquí se queda para las fotos donde no se
   detecta ninguna cara —un escenario, un logotipo, un retrato de perfil— y donde por tanto
   no hay nada mejor que una media razonable.

   Las dos reglas sirven para la portada y para la temporada: el problema es el mismo. */
.montaje { object-fit: cover; }
.retrato-alto { object-fit: cover; object-position: 50% 20%; }

/* 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: 22px 0 4px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* `stretch` y no `flex-end`: las celdas tienen que medir todas lo mismo de alto para que
     la fila de sellos quede a la misma altura en las tres. */
  align-items: stretch;
  gap: 26px 44px;
  border-top: 1px solid var(--black);
  font-family: Trajanpro, serif;
  font-size: 17px;
  line-height: 1.3;
  text-align: center;
}

/* Cada colaborador: su NOMBRE arriba y el sello debajo.
   El nombre se queda aunque haya logotipo, y no es redundancia: son sellos de instituciones
   españolas y el público de esta web es de Miami. Un símbolo que nadie reconoce no informa;
   el nombre sí, y el logotipo da la formalidad que pide un acuerdo institucional.

   Cada celda es una rejilla de dos filas —nombre y sello— y el nombre se lleva el espacio
   sobrante. Eso es lo que ALINEA los tres sellos en una misma línea aunque un nombre ocupe
   dos renglones y otro uno: con una columna flexible bastaría con que un nombre creciera
   para que su sello se descolgara. */
.ev-colaboradores li {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: start;
  gap: 16px;
  max-width: 260px;
}

/* Los tres sellos, en una caja IDÉNTICA y centrados dentro de ella. Sus proporciones no se
   parecen en nada —el del festival cordobés es una tira vertical y el del Ayuntamiento una
   banda apaisada—, así que igualar la caja y dejar que cada uno se ajuste dentro con
   `contain` es lo único que los deja del mismo tamaño sin deformar ninguno. */
.ev-logo {
  display: block;
  width: 100%;
  height: 56px;
  object-fit: contain;
  object-position: center bottom;
}

.ev-colaborador-nombre { display: block; }

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

/* El botón extra de la ficha —hoy, la cena con los artistas—. Es el mismo botón que el de
   entradas, y a propósito: es una llamada a la acción y tiene que parecerlo. Lo que cambia es
   que puede partir en dos líneas, porque su texto lo escribe el cliente y puede ser largo, y
   con el `nowrap` del de entradas se saldría del cartel en un móvil. */
.fc-boton-extra { white-space: normal; text-align: center; }

/* El CTA dentro de una sección extra de la ficha (24-sep-2026). El botón es el
   mismo `.fc-boton-extra` del cartel, pero aquí va suelto en el cuerpo de texto y necesita
   su propio margen en vez del que le daba `.fc-accion`. `inline-flex` y no `block`: en
   escritorio no ocupa el ancho entero de la columna, que se ve raro en un botón de texto
   corto dentro de un párrafo. */
.fc-seccion-cta { margin: 20px 0 0; }
.fc-seccion-cta .fc-boton-extra { display: inline-flex; }

.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. */
/* El negro de debajo es el mismo de la barra: la foto arranca por DEBAJO de ella (ver
   `--fc-barra-fija`) y este fondo tapa la franja que queda detrás, que la barra cubre
   entera. Sin él asomaría el color de la página. */
.fc-cartel-foto { position: relative; min-height: 340px; background: #000; }
.fc-cartel-foto img {
  position: absolute;
  /*
   * La barra de navegación es FIJA, negra y opaca, y mide 110 px de 768 px para arriba.
   * La foto sangraba hasta el borde superior de la página, así que sus 110 primeros
   * píxeles quedaban DEBAJO de la barra —existían, se descargaban y no se veían—. En un
   * retrato alto eso es justo la franja donde está la cara: pasó con el montaje de Córdoba
   * en Miami, donde el de arriba salía decapitado en escritorio y bien en móvil.
   *
   * Por debajo de 768 px el cartel se apila y la foto ya no empieza en el borde de la
   * página (medido: arranca sobre los 630-700 px), así que ahí no se descuenta nada.
   */
   * NO se pone `width: 100%; height: 100%` junto al `inset`, y esta línea es el arreglo de
   * un fallo que llegó a producción: con las dos cosas a la vez, `height: 100%` gana al
   * `bottom` del `inset` y la foto mide el alto ENTERO del contenedor empezando 110 px más
   * abajo, así que sobra por debajo exactamente esos 110 px y se derrama sobre la sección
   * siguiente. El `inset` ya define la caja de un elemento absoluto: con eso basta.
   */
   * Y va con las cuatro propiedades sueltas, no con el atajo `inset`: una `var()` dentro de
   * un atajo se sustituye tarde, y si algo no cuadra el atajo entero se cae a sus valores
   * iniciales sin avisar. Aquí pasó —salía `top: 0`— y cuesta verlo, porque el CSS servido
   * es el correcto y el navegador no da ningún error.
   */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
}

/*
 * LA FOTO DEL CARTEL, POR DEBAJO DE LA BARRA.
 *
 * La barra de navegación es fija, negra, opaca y mide 110 px de 768 px arriba, que es donde
 * la foto del cartel llega hasta el borde superior de la página. Sus 110 primeros píxeles
 * quedaban debajo de la barra —existían, se descargaban y no se veían—, y en un retrato eso
 * es justo la franja de la cara: el de arriba de Córdoba en Miami salía decapitado en
 * escritorio y bien en móvil, que es lo que delató a la barra.
 *
 * Va con el 110 escrito y dentro de una media query, en vez de con una propiedad propia.
 * Se intentó con `--fc-barra-fija` y NO funcionó: el `calc()` del alto la leía bien y el
 * `top` la ignoraba, quedando la foto arriba y una franja negra abajo. No merece la pena
 * pelearse con eso —dos números literales en un sitio se leen igual de bien.
 *
 * El 110 no es `--fc-barra` (141 px): eso es el hueco de diseño que se reserva para el
 * TEXTO, más holgado. Mezclarlos recortaría 31 px de foto sin motivo.
 *
 * Por debajo de 768 px el cartel se apila y la foto ya no empieza en el borde de la página
 * —medido: arranca sobre los 630-700 px—, así que ahí no se descuenta nada.
 */
@media screen and (min-width: 768px) {
  .fc-cartel-foto img {
    top: 110px;
    /* El alto, explícito. Con `bottom: 0` y alto automático el navegador usa el tamaño
       natural de la imagen y la ancla por abajo; con `height: 100%` la desborda por debajo
       justo esos 110 px y se derrama sobre la sección siguiente. Las dos se probaron. */
    height: calc(100% - 110px);
  }
}

/* ── 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 {
  /*
   * El color, explícito y heredado del contenedor. Sin esta línea el título salía
   * INVISIBLE —oro pálido sobre oro pálido, exactamente el mismo rgb(243, 229, 177)—, y
   * así estuvo en producción desde que se publicó la página el 22-ago-2026.
   *
   * `.leg` ya pone `color: var(--black)`, pero la hoja capturada declara
   * `h1 { color: var(--pale-goldenrod) }`, y una regla sobre el elemento gana siempre a
   * lo que herede del padre. Vale para cualquier `h1` nuestro que caiga sobre fondo
   * claro: si algún día se añade otro, hay que dárselo también.
   */
  color: inherit;
  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 {
  /* Mismo caso que `.leg-titulo`, y por la misma razón: es un `h1`, y la hoja capturada
     declara `h1 { color: var(--pale-goldenrod) }`, que gana a lo que herede del padre.
     Sin esto el título salía oro pálido sobre oro pálido, invisible. Lo cazó la
     comprobación de texto confundido con el fondo de `tools/verificar-responsive.mjs`,
     no una revisión a ojo: las dos veces el texto estaba ahí, solo que no se veía. */
  color: inherit;
  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; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   EL PANEL DEL MENÚ, DENTRO DE LA CAPA DE WEBFLOW          (arreglo del 23-ago-2026)
   ══════════════════════════════════════════════════════════════════════════════════ */

/*
 * `animaciones.js` abre el menú como lo abría el widget de Webflow: crea una
 * `.w-nav-overlay` y mete el panel `.nav-menu` dentro. Pero esa capa la deja la hoja
 * capturada en 0×0 y con `overflow: hidden` —el tamaño se lo daba el JS de Webflow, que
 * aquí ya no cargamos—, así que cualquier hijo que dependa de ella para colocarse se
 * recorta ENTERO.
 *
 * La hoja capturada declara `.nav-menu { position: fixed }` en dos sitios sueltos y nada
 * más: `@media (min-width: 1440px)` y `@media (max-width: 479px)`. Ahí el panel se sale
 * de la capa y se ve. En TODO el rango de en medio se quedaba con el `position: absolute`
 * que trae `[data-nav-menu-open]`, contenido por una capa de 0×0: entre 480 y 1439 px el
 * menú se abría de verdad —clase, atributo y capa puestos, y hasta la animación corría—
 * pero no se veía nada. Como la barra lleva `data-collapse="all"`, MENU es la ÚNICA
 * navegación a cualquier ancho: en ese rango no había forma de llegar a ninguna página.
 *
 * Se fija el panel en todos los anchos, que es lo que ya hacían los dos extremos. El
 * ancho y el alto los sigue poniendo la hoja capturada (80 %, o 100 % por debajo de
 * 768 px), así que a 390 y a 1440 px el panel mide y se coloca exactamente igual que
 * antes. Va aquí y no en `animaciones.js` porque es colocación: un estilo en línea
 * tendría que repetir a mano los anchos de cada punto de corte, y volvería a
 * desincronizarse en cuanto se recapture.
 *
 * El selector solo alcanza al panel ABIERTO y dentro de la capa, así que cerrado no
 * cambia nada, y su especificidad (0,3,0) gana a las reglas sueltas de la hoja capturada
 * sin depender del orden de carga.
 */
.w-nav-overlay [data-nav-menu-open].nav-menu {
  position: fixed;

  /*
   * Y scroll propio. El panel mide `height: 100vh` y hereda `overflow: visible` de
   * `[data-nav-menu-open]`, de modo que lo que no cabe se sale y no se alcanza. Con la
   * ventana baja —apaisado de móvil, 844×390 y 932×430— sobran cientos de píxeles y la
   * fila de iconos sociales se quedaba fuera. No se notaba porque hasta ahora el panel
   * ni siquiera llegaba a abrirse en esos anchos.
   *
   * En horizontal `hidden` a propósito: arreglar el desbordamiento vertical no debe
   * sacar además una barra horizontal. Y `contain` para que al llegar al final del panel
   * no siga desplazándose la página de debajo.
   */
  overflow: hidden auto;
  overscroll-behavior: contain;
}

/*
 * Y CLOSE tiene que seguir ahí al desplazar. `.close-button` es `position: absolute` con
 * `inset: 0 0 auto auto`, así que en cuanto el panel pasa a ser un contenedor con scroll
 * se va con el contenido: bajando a por los iconos sociales en apaisado, el botón de
 * cerrar desaparecía por arriba.
 *
 * Se ancla a la ventana. No cambia de sitio ni un píxel: el panel está `fixed` con
 * `right: 0` y `height: 100vh`, o sea que su esquina superior derecha ES la de la
 * ventana, y los márgenes que lo separan del borde (63/40/20 px según el corte) siguen
 * saliendo de la hoja capturada.
 *
 * Da igual que el bloque contenedor acabe siendo el panel —mientras dura el
 * deslizamiento el panel lleva `transform`, y eso lo convierte en contenedor de los
 * `fixed` de dentro— o la ventana, cuando no hay animación porque se pide menos
 * movimiento: las dos esquinas coinciden, así que el botón cae en el mismo punto y
 * acompaña al panel mientras entra.
 */
.w-nav-overlay [data-nav-menu-open].nav-menu .close-button {
  position: fixed;
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   QUE NADA SE SALGA DE LA PANTALLA                          (arreglo del 23-ago-2026)
   ══════════════════════════════════════════════════════════════════════════════════ */

/*
 * Veinticinco de las 118 páginas se salían por la derecha en alguno de los anchos que se
 * comprueban (320, 390, 480, 600, 768, 834, 992, 1024, 1280 y 1440). Todo era herencia de
 * Webflow: anchos fijos en píxeles, rejillas de `1fr` sin suelo y cuerpos de titular
 * pensados para una pantalla de escritorio.
 *
 * Va aquí y no en la hoja capturada porque aquella se regenera al recapturar. Son
 * anulaciones: misma especificidad y orden de carga posterior, salvo donde se indica.
 */

/* ── los titulares de noticia ──
 *
 * Las 16 páginas de `/news` y `/news-reviews` traen `<br>` y `&nbsp;` CABLEADOS en el
 * contenido capturado: «The Miami International&nbsp;Piano» es una sola palabra de 592 px
 * a 50 px de cuerpo, y no hay forma de partirla desde aquí sin tocar el HTML, que no es
 * nuestro. Lo que sí se puede es que el cuerpo quepa.
 *
 * De 768 px para arriba el titular vive en media página —`.news-title` es una columna al
 * 50 %—, así que el sitio disponible se ENCOGE justo cuando la ventana crece: a 768 px la
 * caja mide 344 px y el titular pedía 592. De ahí que haya dos pendientes distintas.
 *
 * Los coeficientes salen de medir las 16 páginas en los diez anchos y quedarse con el
 * peor caso: el titular necesita como mucho el 8,45 % del ancho de su caja, y la caja es
 * `100vw - 40` en una columna y `50vw - 40` en dos. Las cifras van un 5 % por debajo de lo
 * medido para dejar sitio a la barra de desplazamiento, que `vw` cuenta y `clientWidth`
 * no. Por encima de 1280 px el titular ya cabía y no se toca.
 */
.heading-news { overflow-wrap: break-word; }

@media screen and (max-width: 479px) {
  /* Aquí manda la variante `.mobile`, que es la que la hoja capturada deja a la vista. */
  .heading-news { font-size: min(40px, calc(10.2vw - 4.4px)); }
}

@media screen and (min-width: 480px) and (max-width: 767px) {
  .heading-news { font-size: min(50px, calc(8vw - 3.4px)); }
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .heading-news { font-size: min(50px, calc(4vw - 3.4px)); }
  /* `.smoler` lleva su propio cuerpo (0,2,0) y no le llega la regla de arriba. */
  .heading-news.smoler { font-size: min(40px, calc(5.1vw - 4.4px)); }
}

/* ── las URL desnudas ──
 *
 * Cuatro noticias pegan la dirección entera dentro del texto —«https://www.miamipiano…»,
 * 48 caracteres sin un solo sitio por donde partir—. `anywhere` en vez de `break-word`
 * porque además de partir la línea rebaja el ancho MÍNIMO del bloque, que es lo que
 * arrastraba a la columna entera.
 */
.w-richtext, .section-paper p { overflow-wrap: break-word; }
.w-richtext a, .section-paper a { overflow-wrap: anywhere; }

/* ── el vídeo de /berlin ──
 * `min-width: 450px` sobre un vídeo que ya pedía `width: 100%`: por debajo de 450 px de
 * ventana el suelo gana y el bloque se sale. */
.background-video-4 { min-width: 0; }

/* ── la portada ──
 *
 * `.text-under-home` traía `width: 315.099px` —un valor arrastrado del editor— y las tres
 * columnas de «01 Artists / 02 Program / 03 History» no podían bajar de ahí. Como
 * `.bloque-fests` es a su vez elemento flexible de `.section-know-us`, su `min-width:auto`
 * subía ese suelo hasta 1.188 px y lo sacaba por los dos lados: +98 px a 992 y +82 a 1024.
 *
 * El máximo conserva la medida exacta de 1.280 px para arriba, que es donde la columna da
 * de sí; por debajo, el texto se reparte en el ancho que haya.
 */
.text-under-home { width: auto; max-width: 315.099px; }
.column-tri, .bloque-fests { min-width: 0; }

/* Mismo caso en la banda coral de solidaridad: 450 px clavados en una caja de 400. */
.paragraph-black { width: auto; max-width: 450px; }

/* ── la rejilla de patronos ──
 * Las pistas son `1fr`, o sea `minmax(auto, 1fr)`, y ese `auto` es el ancho mínimo del
 * nombre más largo. Con el suelo a cero la rejilla vuelve a repartirse el ancho real y los
 * nombres parten si hace falta. */
.patron-block { min-width: 0; }
.patron-name { overflow-wrap: break-word; }

/* ── titulares con el cuerpo clavado en píxeles ──
 *
 * Tres sueltos, uno por página. El patrón es el mismo: el cuerpo heredado se conserva
 * como techo y por debajo pasa a depender del ancho, de modo que solo cambia donde no
 * cabía. En `/berlin` lo que no cabe no es el cuerpo sino los 40 px de separación entre
 * letras, que a 25 px de tipo son casi todo el ancho de la línea.
 */
@media screen and (max-width: 479px) {
  .heading-5 { font-size: min(55px, 14vw); }
  .home-profiles h1 { font-size: min(45px, 10.8vw); }
  .heading-33 { letter-spacing: min(40px, 11vw); }
}

@media screen and (min-width: 480px) and (max-width: 767px) {
  /* «Anniversary» a 70 px mide 487 px y la sección solo da 440. */
  .heading-plus { font-size: min(70px, 12.8vw); }
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   LO PRÁCTICO DE LA FICHA, CON EL NAVEGADOR AMPLIADO         (arreglo del 23-ago-2026)
   ══════════════════════════════════════════════════════════════════════════════════ */

/*
 * `minmax(15rem, 1fr)` parece inocuo y no lo es: `rem` crece con el tipo de letra del
 * navegador. Con el zoom al 200 % —el root a 32 px— esos 15rem son 480 px de suelo, y en
 * un teléfono de 350 px la pista arrastra la columna entera y saca 110 px de página en
 * las 34 fichas de concierto.
 *
 * El patrón correcto ya estaba dos bloques más arriba, en `.ev-tarjetas`: `min(100%, …)`
 * hace que el suelo nunca pase del ancho disponible, así que a una columna la pista cabe
 * siempre. Es el único `minmax()` de este fichero que le faltaba; los otros tres
 * —`.ev-tarjetas`, `.leg-indice` y `.e404-salidas`— ya lo llevan.
 */
.fc-practica {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   CUERPOS MÍNIMOS EN MÓVIL                                   (arreglo del 23-ago-2026)
   ══════════════════════════════════════════════════════════════════════════════════ */

/*
 * Las plantillas nuestras bajaban a 10 px —los rótulos de `.fc-practica`—, y el texto más
 * pequeño del sitio resultaba ser nuestro, no heredado. Dos suelos, por lo que hace cada
 * cosa: 14 px para lo que se lee de corrido, 13 px para los rótulos en versalitas con
 * separación entre letras, que a igualdad de cuerpo se leen mejor porque las capitales
 * son más altas y van más aireadas.
 *
 * Solo en móvil: de 768 px para arriba las mismas piezas se ven a distancia de escritorio
 * y el cartel de la ficha está ajustado para esos cuerpos.
 */
@media screen and (max-width: 767px) {
  /* Rótulos en versalitas. `.fc-precio`, `.fc-mes` y `.fc-cita cite` no venían señalados,
     pero son la misma familia visual que `.fc-encima` y `.fc-pais`: subir tres de cinco
     rompería el juego. */
  .fc-practica dt,
  .fc-parte-rotulo,
  .fc-encima,
  .fc-pais,
  .fc-precio,
  .fc-mes,
  .fc-cita cite,
  .fc-indice a,
  .hom-serie,
  .leg-fecha,
  .ev-tarjeta-rotulo,
  .ev-tarjeta-enlace,
  .ev-creditos-titulo { font-size: 13px; }

  /* Texto que se lee seguido: dirección, botones, pies de foto y cierres. */
  .fc-donde-dir,
  .ev-foto figcaption,
  .fc-boton,
  .fc-pronto,
  .nt-paso,
  .ev-cierre { font-size: 14px; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   OBJETIVOS TÁCTILES                                         (arreglo del 23-ago-2026)
   ══════════════════════════════════════════════════════════════════════════════════ */

/*
 * 44×44 px y 8 px de separación. Donde el diseño no da para tanto se dice en el informe
 * en vez de forzarlo.
 *
 * El criterio para llegar a los 44 px: si el elemento ya tiene aire propio —relleno o
 * hueco de rejilla—, un `min-height` con el texto centrado; si el alto lo dibuja algo
 * —un filete, un subrayado—, se cambia ese algo de sitio antes que estirar la caja.
 */

/* Los índices de la ficha y de la página legal, y las salidas del 404: la altura la da un
   suelo, y la separación pasa a ser hueco de verdad. Antes iban pegados, filete con
   filete, y el dedo no acertaba a distinguir dos renglones de 42 px. */
.fc-indice { display: flex; flex-direction: column; gap: 8px; }
.fc-indice a { display: flex; align-items: center; min-height: 44px; }

.leg-indice { gap: 8px 32px; }
.leg-indice a { display: flex; align-items: center; min-height: 44px; }

.e404-salidas { gap: 8px 32px; }

/* El botón del cartel y su gemelo apagado: 42,6 px con el cuerpo ya subido, a dos de la
   raya. `inline-flex` para que la píldora siga midiendo lo que mide el texto. */
.fc-boton, .fc-pronto {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* El enlace de la tarjeta de evento lleva su subrayado como `box-shadow` en el borde de
   abajo, así que el suelo lo separa dos píxeles del texto y nada más. */
.ev-tarjeta-enlace { min-height: 44px; }

/* ── la paginación de /latest-news ──
 *
 * Era el peor sitio del sitio: números de 32×30 px separados por 4. Ahora cada número es
 * una casilla cuadrada de 44 y la fila puede partirse, porque a 320 px siete casillas con
 * su hueco no caben en una línea y son mejores dos renglones que siete dianas diminutas.
 *
 * `.nt-numero` sin el `a` delante a propósito: la página actual no es un enlace sino un
 * `<span>`, y era justamente la que se quedaba pequeña.
 */
.nt-paginas { gap: 24px 28px; }
.nt-numeros { flex-wrap: wrap; justify-content: center; gap: 8px; }

.nt-numero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
}

/*
 * «Older» y «Newer» medían 24 px de alto porque el subrayado era el borde de la caja: al
 * estirarla a 44 el subrayado se habría ido diez píxeles por debajo del texto. Pasa a ser
 * subrayado de TEXTO, que va con las letras y no con la caja, y entonces la caja puede
 * crecer sin que se mueva ni un píxel de lo que se ve.
 */
.nt-paso {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-bottom: 0;
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: #f3e5b166;
}

.nt-paso:hover { text-decoration-color: var(--pale-goldenrod); }
.nt-paso.apagado { text-decoration-color: #0000; }

@media screen and (max-width: 479px) {
  .nt-paginas { gap: 24px 16px; }
}

/* Los enlaces dentro de un párrafo no pueden crecer sin separar las líneas… salvo que el
   relleno sea vertical: en un elemento en línea, el relleno de arriba y abajo agranda la
   zona sensible y NO cuenta para el alto de la línea. De 17-20 px a 30, sin mover nada. */
.leg-cuerpo a,
.ev-practico a,
.fc-evento a,
.link-on-text-black,
.w-richtext a { padding-top: 5px; padding-bottom: 5px; }

/* ── los heredados, que salen en las 118 páginas ── */

/*
 * La píldora de «tickets & concerts» medía 31 px de alto en móvil, y la barra no da para
 * moverla de sitio: el suelo con el texto centrado la deja en 44 sin tocar el ancho.
 *
 * `.div-block-49` es la caja que lleva la píldora y MENU, y ya era flexible: basta pedirle
 * hueco. A 480 px la píldora tocaba el logotipo (0,4 px), así que en esa banda la caja
 * acerca su margen derecho a los 20 px que usa la propia barra —a 40 sobraba borde—. Con
 * eso quedan 12 px al logotipo y 8 a MENU.
 *
 * MENU se queda como está salvo el ancho mínimo, que a 320 px se quedaba en 42,9. Es el
 * único cambio que le toca la caja al botón del menú.
 */
.menu-button.ticekts {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

.menu-button.w-nav-button { min-width: 44px; }
.div-block-49 { gap: 8px; }

@media screen and (min-width: 480px) and (max-width: 767px) {
  .div-block-49 { padding-right: 20px; }
}

/*
 * La casilla del boletín medía 13×13. El `<label>` envuelve a la casilla y al texto, así
 * que TODO él activa la casilla: dándole 44 px de alto, la diana real es el renglón
 * entero. La casilla en sí sube a 24, que es lo máximo que admite antes de parecer otra
 * cosa; los 44 los pone el rótulo.
 */
.w-checkbox { min-height: 44px; padding: 12px 0 12px 36px; }
.w-checkbox-input { width: 24px; height: 24px; margin: -2px 0 0 -36px; }

/* A dos y cuatro píxeles de la raya: el suelo los redondea. */
.submit-button, .button.concert-roster { min-height: 44px; }

/* ─────────────────────────────────────────────────────────────────────────────
   IMÁGENES QUE NO SE DEFORMAN  (26-ago-2026)

   Pablo, mirando la web en el móvil: «todas las imágenes se ven estiradas hacia
   arriba; en Webflow esto lo arreglábamos con cover en lugar de estirar a todo el
   contenedor». Medido con `tools/verificar-imagenes.mjs`: 88 casos en 8 grupos, y
   el peor de todos el LOGO DE LA BARRA, estirado un 36 % en todas las páginas.

   La causa es de manual en un clon de Webflow: el marcado le da a la imagen una caja
   con otra proporción que la suya, y sin `object-fit` el navegador ESTIRA el
   contenido, porque `fill` es el valor por defecto de CSS. En el editor de Webflow no
   se veía porque él pone `cover` por su cuenta.

   No se arregla todo con `cover`, y esa es la parte que importa:

     · Un LOGO con `cover` se RECORTA, que es peor que estirarlo. Los logos —el de la
       barra, el del pie, los de patrocinadores— van con `contain`: nunca deforma y
       nunca corta; como mucho deja aire.
     · Una FOTO decorativa que debe llenar su caja sí quiere `cover`.

   Por eso la red de seguridad es `contain` para todas, y `cover` se pide a mano solo
   donde la foto tiene que llenar. `object-fit` no hace nada cuando la caja ya tiene la
   proporción de la imagen (el caso de casi todas), así que esto solo toca a las rotas.
   ───────────────────────────────────────────────────────────────────────────── */

img {
  object-fit: contain;
}

/* Fotos que deben LLENAR su caja: aquí sí se recorta a propósito, centrado. */
.parallax-image,
.image-13,
.image-14 {
  object-fit: cover;
}

/* La galería de noticias no era `object-fit`: la imagen es hija de un contenedor flex
   que la estiraba a la altura de sus hermanas —medida a 5504 px de alto para una foto
   de 259—. Se arregla en la causa, dejándola con su altura natural, y no maquillando
   el resultado con un recorte. */
.gallery-news {
  height: auto;
  align-self: flex-start;
}

/* Los logos de patrocinadores tenían un problema debajo del estiramiento: el grid estira
   cada fila a la altura de su elemento más alto, así que un logo apaisado acababa en una
   caja de 491 px de alto. Con `contain` dejó de deformarse, pero la sección medía 1408 px
   de puro hueco negro. Se centran en su celda y se les pone un alto máximo sensato: la
   sección pasa a 415 px y los logos se leen. */
.sponsors-grid { align-items: center; }
.link-sponsors { height: auto; }
.link-sponsors img { width: 100%; height: auto; max-height: 84px; object-fit: contain; }


/* El enlace a la página de la serie desde su pestaña en /season (26-ago-2026). Aquí estuvo
   un día el texto entero de cada serie; hoy vive en `/series/<ruta>`, que es donde se le
   puede mandar a alguien. */
.serie-enlace { text-align: center; margin: 0 0 34px; }
/* El color, explícito: la hoja capturada no da estilo a un `<a>` suelto y el enlace salía
   en el azul del navegador sobre el crema de la pestaña (4-sep-2026). Es la misma trampa
   que ya mordió en las páginas de serie —ver `.ser a` más abajo—, y aquí encima se
   repetía en las cuatro pestañas. */
.serie-enlace a { color: var(--black); text-decoration: underline; text-underline-offset: 4px; }

/* El botón de la Plataforma Virtual en el menú (4-sep-2026). El estilo entero lo pone
   `.button-b-over-color.small` de la hoja capturada —borde y letra en negro sobre el crema
   del panel—; aquí solo se copian los dos cortes en los que el botón hermano, el de la
   Academia, cambia de cuerpo. Sin esto los dos botones se verían distintos en un móvil y en
   una pantalla grande, que son justo los sitios donde nadie mira. */
@media screen and (min-width: 1920px) {
  .button-b-over-color.small.vp-nav { padding: 15px 30px 16px; font-size: 22px; }
}

@media screen and (max-width: 479px) {
  .button-b-over-color.small.vp-nav { padding-top: 7px; padding-bottom: 7px; font-size: 15px; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   LA CONFIRMACIÓN DE ASISTENCIA      `/rsvp/…`, clases `.rsvp-*`        (4-sep-2026)
   ══════════════════════════════════════════════════════════════════════════════════ */

/* El fondo y el hueco de la barra los pone `body-3`, la misma clase que la ficha de
   concierto: esta página es su vecina y no tiene por qué inventarse un color. Lo que hay
   aquí es la maqueta; los campos, la casilla y el botón son los de Webflow —negro sobre
   transparente— y se dejan como están. */
.rsvp { padding: 0 5vw 110px; color: var(--black); }

.rsvp-caja { max-width: 1180px; margin: 0 auto; }

.rsvp-cabecera { padding: 46px 0 40px; text-align: center; }

.rsvp-encima {
  margin: 0 0 12px;
  font-family: Neuemontreal, sans-serif;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* El color, explícito: es un `h1` y la hoja capturada declara `h1 { color: pale-goldenrod }`,
   que sobre este crema es INVISIBLE. Es la cuarta página en la que muerde —privacy-policy,
   404 y las de serie fueron las otras tres—, así que ya no es un descuido: es una regla de
   la casa. Todo `h1` de plantilla nuestra dice su color. */
.rsvp-titulo {
  color: inherit;
  font-family: Trajanpro, serif;
  font-weight: 400;
  font-size: clamp(32px, 6vw, 64px);
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

.rsvp-entradilla {
  margin: 14px 0 0;
  font-size: 16px;
  letter-spacing: .04em;
}

/* Dos columnas, y la del formulario un poco más ancha: es donde se trabaja. Cae a una sola
   con `auto-fit` y `min(100%, …)`, la misma cuenta que en `.ser-cuerpo` y `.vp-caja`, para
   que con el zoom al 200 % no pida más ancho del que hay. */
.rsvp-cuerpo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: 44px 72px;
  align-items: start;
}

.rsvp-info { max-width: 46ch; }
.rsvp-about p { margin: 0 0 14px; font-size: 16px; line-height: 1.65; }
.rsvp-about p:last-child { margin-bottom: 0; }

/* Los datos de la gala, en dos columnas de rejilla: el rótulo en versalitas pequeñas y el
   dato al lado. Un `dl` y no una tabla porque eso es exactamente lo que son: parejas. */
.rsvp-datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 22px;
  margin: 28px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(0, 0, 0, .18);
}

.rsvp-datos dt {
  font-family: Neuemontreal, sans-serif;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .6;
  padding-top: 3px;
}

.rsvp-datos dd { margin: 0; font-size: 16px; line-height: 1.45; }

/* En 4:3, como en las páginas de serie: el retrato vertical de la ficha aquí no cabe, y el
   encuadre lo salva el punto focal que la plantilla escribe en línea. */
.rsvp-foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-top: 30px;
}

.rsvp-mas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 28px 0 0;
  font-size: 14px;
}

/* El color, otra vez explícito: sin esto los dos enlaces salen en el azul del navegador,
   que es lo que pasó en /season y en las páginas de serie. */
.rsvp-mas a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ── La cena con los artistas (18-sep-2026) ──
 *
 * El aviso de que la entrada del concierto va aparte. Es lo único que esta página añade a
 * la maqueta de la confirmación de Córdoba, y va con borde y no con fondo de color a
 * propósito: sobre el crema de la página, un bloque relleno competiría con el formulario
 * de al lado, y lo que hay que conseguir es que se LEA antes de rellenarlo, no que grite.
 * El borde es el negro de la casa, el mismo de los filetes del resto del sitio.
 */
.cena-aviso {
  margin: 28px 0 0;
  padding: 20px 22px;
  border: 1px solid var(--black);
  color: var(--black);
}
.cena-aviso-titulo {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cena-aviso-texto { margin: 0; font-size: 16px; line-height: 1.55; }
/* El botón de entradas es el mismo de la ficha de concierto (`.fc-boton`), que ya trae su
   forma y sus estados. Aquí sólo se le da aire y se le impide estirarse a todo el ancho. */
.cena-aviso-boton { margin-top: 16px; align-self: flex-start; }

.rsvp-h2 {
  color: inherit;
  font-family: Trajanpro, serif;
  font-weight: 400;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.1;
  margin: 0 0 14px;
}

.rsvp-lede { margin: 0 0 30px; font-size: 16px; line-height: 1.6; }

.rsvp-campo { display: block; margin: 0 0 24px; }

.rsvp-etiqueta {
  display: block;
  margin-bottom: 4px;
  font-family: Neuemontreal, sans-serif;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .72;
}

/* Los campos ya vienen con su línea de abajo de `.text-field-2`. Lo que falta es que ocupen
   el ancho y que el alto no lo fije Webflow: un `textarea` de 38 px no es un `textarea`. */
.rsvp-form .text-field-2 {
  width: 100%;
  height: auto;
  min-height: 44px;
  margin: 0;
  padding: 8px 0;
  background-color: #0000;
}

.rsvp-form .rsvp-area { min-height: 110px; resize: vertical; line-height: 1.5; }

/* El número, corto: un campo de ancho completo para escribir «2» invita a dudar de si se
   espera algo más. */
.rsvp-form .rsvp-numero { max-width: 7rem; }

.rsvp-ayuda {
  display: block;
  margin-top: 6px;
  font-family: Neuemontreal, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  opacity: .62;
}

/* La casilla: `.w-checkbox-input` de Webflow flota con `margin-left: -20px`, así que su
   envoltorio necesita ese hueco a la izquierda o la marca se sale de la caja. */
.rsvp-casilla {
  display: block;
  margin: 4px 0 0;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.5;
}

.rsvp-casilla .checkbox-label { font-size: 15px; }
.rsvp-casilla a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* El botón crece un poco respecto al del boletín: aquí es la única acción de la página. */
.rsvp-enviar { margin-top: 26px; padding: 14px 34px; font-size: 16px; }
.rsvp-enviar:hover { background-color: var(--black); color: var(--pale-goldenrod); }

/* Los dos avisos. El de éxito sustituye al formulario —lo esconde el guion— y el de fallo
   sale debajo SIN esconderlo, para que quien acaba de escribir no tenga que teclearlo otra
   vez. `.success-message` viene de la captura con su fondo; aquí manda el nuestro. */
.rsvp-gracias {
  background-color: #0000;
  border: 1px solid rgba(0, 0, 0, .3);
  padding: 26px 28px;
  text-align: left;
}

.rsvp-gracias-titulo {
  font-family: Trajanpro, serif;
  font-size: 22px;
  line-height: 1.2;
  margin-bottom: 8px;
}

.rsvp-gracias-texto { margin: 0; font-size: 15px; line-height: 1.6; }
.rsvp-fallo { font-size: 15px; line-height: 1.5; }

@media screen and (max-width: 767px) {
  .rsvp { padding: 0 6vw 80px; }
  .rsvp-cabecera { padding: 30px 0 30px; text-align: left; }
  .rsvp-datos { grid-template-columns: 1fr; gap: 2px 0; }
  .rsvp-datos dt { padding-top: 12px; }
}

/* ═════════════════════════════════════════════════════════════════════════════════════
   LA PLATAFORMA VIRTUAL EN LA PORTADA        `.vp`, sección `vp`      (4-sep-2026)
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* Sobre NEGRO, y no es decoración: la plataforma es negra, la foto que la anuncia es una
   sala a oscuras, y la sección cae justo entre el coral de «Bringing great music…» y el
   blanco del 25 aniversario. Un tercer bloque claro ahí no se distinguiría de sus vecinos,
   que es lo único que no puede pasarle a una llamada a la acción. */
.vp {
  background-color: var(--black);
  color: var(--pale-goldenrod);
  padding: 96px 5vw;
}

/* `auto-fit` con `min(100%, 26rem)` y no dos columnas fijas: es la misma trampa del zoom al
   200 % que ya se arregló en `.fc-practica` y en `.ser-cuerpo`. Con el zoom alto un `rem`
   son 32 px y una columna de 26 pediría 832, más de lo que hay; así cae sola a una columna
   en vez de desbordar. */
.vp-caja {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: 40px 64px;
  align-items: center;
}

.vp-figura { margin: 0; }

/* `height: auto` es OBLIGATORIO, igual que en `.ser-foto`: `retocarCarga` le escribe a la
   imagen sus `width`/`height` reales para que el navegador reserve el hueco, y esos
   atributos ganan al `aspect-ratio` si el CSS no dice nada del alto. */
.vp-foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1345 / 618;
  object-fit: cover;
}

/* El pie dice de qué es la foto. Va alineado a la izquierda y no centrado como manda la
   hoja capturada para cualquier `figcaption`. */
.vp-pie {
  margin: 12px 0 0;
  text-align: left;
  font-family: Neuemontreal, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .03em;
  opacity: .62;
}

.vp-encima {
  margin: 0 0 14px;
  font-family: Neuemontreal, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* El color, explícito. Aquí es un `h2` y no un `h1` a propósito —la portada ya va sobrada
   de `h1`, que es la herencia de Webflow—, y por eso no hereda el crema que la hoja
   capturada le da a `h1`: hay que dárselo. */
.vp-titulo {
  color: var(--pale-goldenrod);
  font-family: Trajanpro, serif;
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.05;
  margin: 0 0 18px;
  text-wrap: balance;
}

.vp-lema {
  max-width: 46ch;
  margin: 0 0 24px;
  font-size: 18px;
  line-height: 1.55;
}

.vp-lista {
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.vp-lista li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.5;
}

/* La raya de los reclamos. Va con `::before` y no con viñeta: una viñeta de lista arrastra
   el `padding-left: 40px` que la hoja capturada le pone a todo `ul`. */
.vp-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 12px;
  height: 1px;
  background-color: currentColor;
  opacity: .7;
}

/* El botón es el `.button` de la casa —borde y letra crema sobre negro, y al pasar por
   encima se rellena—, que es exactamente lo que ya hacen las tarjetas de concierto. */
.vp-boton { display: inline-block; }

@media screen and (max-width: 767px) {
  .vp { padding: 64px 6vw; }
  .vp-lema { font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   LAS PÁGINAS DE SERIE          `/series` y `/series/<ruta>`        (26-ago-2026)
   ══════════════════════════════════════════════════════════════════════════════════ */

.ser { padding: 0 5vw 90px; color: var(--black); }

.ser-cabecera { max-width: 1100px; margin: 0 auto; padding: 54px 0 30px; text-align: center; }

/* El rótulo de encima, en versalitas: dice de qué tipo de página se trata antes de que el
   titular diga cuál. Va a 13 px, el suelo de rótulo del sitio. */
.ser-encima {
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ser-titulo {
  /* El color, explícito. Sin él el titular sale INVISIBLE: es un `h1`, y la hoja capturada
     declara `h1 { color: var(--pale-goldenrod) }`, que gana a lo que herede del contenedor.
     Es el TERCER sitio donde muerde —ya pasó en /privacy-policy y en /404— y por eso la
     comprobación de «texto confundido con su fondo» corre en cada verificación. */
  color: inherit;
  font-family: Trajanpro, serif;
  font-weight: 400;
  /* Se adapta al ancho en vez de fijar cuerpos por corte: «Artists in Conversation» es más
     del doble de largo que «Discovery Series» y con un tamaño fijo uno de los dos sobra. */
  font-size: clamp(30px, 5.6vw, 62px);
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}

.ser-donde { margin: 12px 0 0; font-size: 14px; letter-spacing: .04em; }

/* Texto y fotos, en dos columnas. `minmax(min(100%, 22rem), …)` y no `22rem` a secas: con
   el zoom al 200 % un `rem` son 32 px y la columna pediría 704, más de lo que hay. Es la
   misma trampa que se arregló en `.fc-practica` el 23-ago. */
.ser-cuerpo {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 40px 56px;
  align-items: start;
}

.ser-texto { max-width: 62ch; }
.ser-lema {
  font-family: Trajanpro, serif;
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 27px);
  line-height: 1.25;
  margin: 0 0 18px;
}
.ser-texto p { margin: 0 0 14px; font-size: 16px; line-height: 1.65; }
.ser-texto p:last-child { margin-bottom: 0; }

/* Una sola foto, en 4:3. El recorte lo centra el punto focal que pone la plantilla en línea,
   así que la cara no se pierde; y precisamente por eso cada serie lleva una foto ELEGIDA
   —una sala, un ambiente— en vez de heredar el retrato del primer concierto: en un retrato
   vertical, un 4:3 deja un primerísimo plano por mucho que el encuadre acierte. */
.ser-foto {
  display: block;
  width: 100%;
  /* `height: auto` es OBLIGATORIO aquí, no un adorno: la plantilla emite los atributos
     `width`/`height` reales de la foto —para que el navegador reserve el hueco— y esos
     atributos ganan a `aspect-ratio` si el CSS no dice nada del alto. Sin esta línea la
     imagen salía a 1.833 px de alto, su tamaño natural, y la proporción se ignoraba. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Los enlaces de estas páginas, en el negro del texto. Sin esto salen en el azul del
   navegador: la hoja capturada no da estilo a un `<a>` suelto.

   MENOS LOS BOTONES, y esa excepción no es cosmética: `.button` es un `<a>`, vive dentro
   de las tarjetas de concierto —que son negras— y trae su propio color crema. Al heredar
   el negro de `.ser` se quedaba en negro sobre negro: el botón salía como un óvalo con
   borde y sin texto dentro, y así estuvo publicado desde el 26-ago hasta el 4-sep-2026.
   Nadie lo vio porque en /season la misma tarjeta se ve bien; solo se rompía aquí. */
.ser a:not(.button),
.ser-indice a { color: inherit; }

/* «Concerts in this series». Va con su propia clase y no con `.heading-black`, que es el
   titular grande de página (65 px) y aquí compite con el nombre de la serie de arriba. */
.ser-h2 {
  font-family: Trajanpro, serif;
  font-weight: 400;
  font-size: min(50px, calc(7.6vw - 2px));
  line-height: 1.1;
  text-align: center;
  margin: 0 0 46px;
}

.ser-conciertos { margin-top: 70px; }

/* El nombre del concierto, que aquí sí puede partir. La tarjeta es la misma que en /season,
   pero allí vive dentro de una pestaña con su propio relleno y aquí va más ancha: medido,
   «Two-Piano Extravaganza — Season Gala» se salía 29 px a 320 px de ancho. El guion largo
   no es un punto de corte, así que hay que permitirlo explícitamente. */
.ser-conciertos .heading-small,
.ser-resumen .heading-small { overflow-wrap: anywhere; }
.ser-vacio { max-width: 62ch; margin: 60px auto 0; text-align: center; line-height: 1.6; }
.ser-vacio a,
.ser-volver a { text-decoration: underline; text-underline-offset: 4px; }
.ser-volver { margin: 60px 0 0; text-align: center; font-size: 14px; }

/* ── El directorio, `/series` ── */

/* El nombre de la serie dentro de su ficha. `.heading-5` viene de la hoja capturada a 55 px
   fijos, y ahí cabían los nombres de 2021 —«Concerto Night»—; «Classical Sundays at Five» y
   «Artists in Conversation» no: medido, se salían hasta 137 px a 480. Cuerpo dependiente del
   ancho, y que pueda partir, porque la ficha ocupa la mitad de la pantalla. */
.section-series .heading-5 {
  font-size: min(55px, calc(7.4vw - 2px));
  line-height: 1.08;
  overflow-wrap: anywhere;
}

/* La mitad derecha de cada ficha es la foto, con el mismo velo oscuro del original. La
   imagen va en el atributo `style` y no en la hoja porque sale del primer concierto de la
   serie: la capturada traía una fija, de 2021. */
.ser-ficha-foto { display: block; background-position: 0 0, 50%; background-size: auto, cover; }


/* Los párrafos de MIPF Profiles que no caben en la fila (26-ago-2026). `section.cols-profiles`
   es un flex con `nowrap`: cada <p> de más es una COLUMNA más, y con tres añadidos el texto se
   salía 57 px de la pantalla a 390 px. Viven fuera, en un bloque de lectura normal. */
.perfiles-mas { max-width: 62ch; margin: 0 auto 48px; padding: 0 20px; }
.perfiles-mas p { margin: 0 0 14px; line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   LOS BOTONES, CON EL TEXTO CENTRADO                                    (26-ago-2026)
   ══════════════════════════════════════════════════════════════════════════════════ */

/*
 * Medido: el relleno de arriba y de abajo ya era simétrico en los ocho tipos de botón del
 * sitio. Lo que fallaba era el ALINEADO: seis de ellos heredaban `text-align: start` de la
 * hoja capturada, así que en cuanto el texto no llenaba el ancho —«DISCOVER OUR SEASON»,
 * «tickets & concerts», «SEE DIRECTOR'S WELCOMING MESSAGE»— se pegaba a la izquierda
 * dentro de su píldora y el botón se veía descuadrado.
 *
 * `inline-flex` con centrado en los dos ejes y no sólo `text-align: center`: así el texto
 * queda centrado también en VERTICAL, que es lo que se pide, sin depender de que el
 * interlineado cuadre con el relleno. Los que ya estaban bien no cambian.
 */
.w-button,
.button,
.menu-button,
.button-b-over-color,
.submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ═════════════════════════════════════════════════════════════════════════════════════
   LA ENCUESTA DE PÚBLICO           `/survey`, clases `.enc-*`           (30-sep-2026)
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* Sobre el crema de `body-3`, como la confirmación de Córdoba, de la que hereda campos,
   casilla y botón (`.rsvp-*`). Lo propio es la cabecera con foto, el aviso del regalo y
   la forma de las preguntas: opciones que se pulsan enteras —en un móvil, un círculo de
   13 px no es una zona de toque— y la escala de 1 a 5 en rejilla. */
.enc { color: var(--black); padding-bottom: 110px; }

/* `body-3` reserva el sitio de la barra con `padding-top` y eso dejaba una franja crema entre
   la barra y la foto (Pablo, 30-sep). Como en `.ev-cabecera`: margen negativo del mismo valor
   —cambia por anchura, de ahí `--enc-barra`— y la foto sube por debajo de la barra, que es
   opaca. El texto va abajo (`flex-end`), así que no hay que devolverle ese aire. */
.enc-cabecera {
  --enc-barra: 141px;
  position: relative; min-height: calc(440px + var(--enc-barra)); display: flex; align-items: flex-end; color: #fff;
  margin-top: calc(var(--enc-barra) * -1);
}
.enc-cabecera-foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
}
/* El velo, de abajo arriba: el texto va abajo y es lo único que tiene que leerse. */
.enc-cabecera::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.78) 100%);
}
.enc-cabecera-texto { position: relative; z-index: 1; max-width: 1180px; width: 100%; margin: 0 auto; padding: 120px 5vw 48px; }
.enc-encima {
  margin: 0 0 12px; font-family: Neuemontreal, sans-serif; font-size: 13px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--pale-goldenrod);
}
/* El color explícito, regla de la casa: la hoja capturada pinta los `h1` en pale-goldenrod. */
.enc-titulo {
  color: #fff; font-family: Trajanpro, serif; font-weight: 400;
  font-size: clamp(34px, 6vw, 68px); line-height: 1.04; margin: 0; text-wrap: balance;
}
.enc-entradilla { margin: 16px 0 0; max-width: 60ch; font-size: 17px; line-height: 1.6; }

.enc-caja {
  max-width: 1180px; margin: 0 auto; padding: 0 5vw;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 23rem); gap: 44px 64px; align-items: start;
}

/* El regalo, en la columna estrecha y PEGADO arriba al bajar: es la razón por la que
   mucha gente abre la página, y tiene que seguir a la vista mientras contesta. */
.enc-regalo {
  grid-column: 2; grid-row: 1; position: sticky; top: 110px; margin-top: 50px;
  background: var(--black); color: #fff; z-index: 2;
}
/* El pianista va abajo a la izquierda: en la franja apaisada del tablet, que no se lo coma el recorte. */
.enc-regalo-foto { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 35% 70%; }
.enc-regalo-texto { padding: 24px 26px 28px; }
.enc-regalo-texto p { margin: 0 0 12px; font-size: 15px; line-height: 1.55; }
.enc-regalo-encima {
  font-family: Neuemontreal, sans-serif; font-size: 11px !important; letter-spacing: .2em;
  text-transform: uppercase; color: var(--pale-goldenrod);
}
.enc-regalo-titulo {
  color: #fff; font-family: Trajanpro, serif; font-weight: 400;
  font-size: 25px; line-height: 1.15; margin: 0 0 12px;
}
.enc-regalo-datos { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); }
.enc-regalo-datos strong { font-weight: 500; color: var(--pale-goldenrod); }
.enc-regalo-mas { opacity: .8; }
.enc-regalo-enlace { color: #fff; text-decoration: underline; text-underline-offset: 4px; font-size: 14px; }

.enc-formulario { grid-column: 1; grid-row: 1; padding-top: 50px; }
.enc-form { margin: 0; }

.enc-seccion { border: 0; margin: 0 0 18px; padding: 0 0 26px; border-bottom: 1px solid rgba(0,0,0,.14); min-width: 0; }
.enc-seccion-titulo {
  float: left; width: 100%; padding: 0; margin: 0 0 22px;
  color: inherit; font-family: Trajanpro, serif; font-weight: 400;
  font-size: clamp(24px, 3.2vw, 32px); line-height: 1.1;
}
.enc-seccion-titulo + * { clear: both; }

.enc-pregunta { display: block; margin: 0 0 28px; padding: 0; border-left: 3px solid transparent; transition: border-color .2s, padding .2s; }
.enc-enunciado { display: block; margin: 0 0 10px; font-size: 17px; line-height: 1.45; font-weight: 500; }
.enc-obligatoria { color: var(--indian-red, #b75c67); }
.enc-ayuda { display: block; margin: -4px 0 10px; font-family: Neuemontreal, sans-serif; font-size: 13px; opacity: .62; }

/* Lo que falta, en rojo de la casa y con un filete a la izquierda que se ve de lejos. */
.enc-falta { border-left-color: var(--indian-red, #b75c67); padding-left: 14px; }
.enc-falta .enc-enunciado, .enc-falta.w-checkbox { color: var(--indian-red, #b75c67); }
.enc-aviso-faltan { margin: 18px 0 0; color: var(--indian-red, #b75c67); font-size: 15px; }

.enc-opciones { display: grid; gap: 8px; }
.enc-opciones-largas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.enc-opcion {
  display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 11px 14px;
  border: 1px solid rgba(0,0,0,.18); cursor: pointer; font-size: 15px; line-height: 1.4;
  transition: background-color .15s, border-color .15s;
}
.enc-opcion:hover { border-color: var(--black); }
.enc-opcion input { margin: 3px 0 0; flex: none; width: 16px; height: 16px; accent-color: var(--black); }
.enc-opcion:has(input:checked) { background: var(--black); color: var(--pale-goldenrod); border-color: var(--black); }
.enc-opcion:has(input:focus-visible) { outline: 2px solid var(--black); outline-offset: 2px; }

.enc-otro { display: block; margin-top: 12px; }
.enc-etiqueta { display: block; font-family: Neuemontreal, sans-serif; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .72; }

.enc-form .text-field-2 { width: 100%; height: auto; min-height: 44px; margin: 0; padding: 8px 0; background-color: #0000; font-size: 16px; }
.enc-form .enc-area { min-height: 110px; resize: vertical; line-height: 1.5; }

/* La escala: rótulo y cinco casillas por fila. En pantalla estrecha el rótulo pasa arriba y
   las cinco se quedan en fila debajo: siempre se ve que es una escala, no una lista. */
.enc-escala { display: grid; grid-template-columns: minmax(0, 1fr) repeat(5, 48px); align-items: center; row-gap: 6px; }
.enc-escala-cab { text-align: center; font-family: Neuemontreal, sans-serif; font-size: 12px; opacity: .6; }
.enc-escala-fila { display: contents; }
.enc-escala-rotulo { padding: 10px 12px 10px 0; font-size: 15px; line-height: 1.35; border-top: 1px solid rgba(0,0,0,.1); }
.enc-escala-celda { display: flex; justify-content: center; align-items: center; height: 44px; margin: 0; border-top: 1px solid rgba(0,0,0,.1); cursor: pointer; }
.enc-escala-celda input { position: absolute; opacity: 0; pointer-events: none; }
.enc-escala-num {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.3); font-size: 14px;
}
.enc-escala-celda:hover .enc-escala-num { border-color: var(--black); }
.enc-escala-celda input:checked + .enc-escala-num { background: var(--black); color: var(--pale-goldenrod); border-color: var(--black); }
.enc-escala-celda input:focus-visible + .enc-escala-num { outline: 2px solid var(--black); outline-offset: 2px; }

.enc-seccion-entradas { border-bottom: 0; }
.enc-lede { margin: 0 0 22px; font-size: 16px; line-height: 1.6; }
.enc-nota { margin: 6px 0 14px; font-size: 14px; line-height: 1.5; opacity: .7; }
.enc-casilla { margin-top: 0; }
.enc-enviar { margin-top: 24px; }

.enc-gracias { margin-top: 20px; }
.enc-plazo { margin: 14px 0 0; font-family: Neuemontreal, sans-serif; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--pale-goldenrod); }
.enc-regalo-plazo { font-weight: 500; color: var(--pale-goldenrod); }
/* Cerrada (a partir del 8-oct a las 23:59 de Miami): fuera el formulario, el regalo y el plazo,
   y en su sitio el aviso. La clase la pone el build si ya pasó la fecha, o el guion de la página. */
.enc-cerrada { display: none; grid-column: 1 / -1; max-width: 40rem; padding: 56px 0 10px; }
.enc-cerrada-titulo { font-family: Trajanpro, serif; font-weight: 400; font-size: clamp(28px, 4vw, 42px); line-height: 1.1; color: var(--black); margin: 0 0 16px; }
.enc-cerrada p { font-size: 17px; line-height: 1.6; margin: 0 0 14px; }
.enc-cerrada .enc-regalo-enlace { color: var(--black); }
.enc--cerrada .enc-cerrada { display: block; }
.enc--cerrada .enc-formulario, .enc--cerrada .enc-regalo, .enc--cerrada .enc-plazo { display: none; }
.enc-gracias-otra { margin: 14px 0 0; font-size: 15px; }
.enc-gracias-otra a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }

@media screen and (max-width: 991px) {
  .enc-cabecera { --enc-barra: 132px; }
  .enc-caja { grid-template-columns: minmax(0, 1fr); }
  .enc-regalo { grid-column: 1; grid-row: 1; position: static; margin-top: 36px; }
  .enc-formulario { grid-row: 2; padding-top: 10px; }
  .enc-regalo-foto { aspect-ratio: 16 / 7; }
}
@media screen and (max-width: 767px) {
  .enc-cabecera { --enc-barra: 141px; min-height: calc(380px + var(--enc-barra)); }
  .enc-cabecera-texto { padding: 90px 6vw 34px; }
  .enc-caja { padding: 0 6vw; }
  .enc-escala { grid-template-columns: repeat(5, 1fr); }
  .enc-escala-cab:first-child { display: none; }
  .enc-escala-rotulo { grid-column: 1 / -1; padding: 12px 0 2px; }
  .enc-escala-celda { border-top: 0; }
}
@media screen and (max-width: 479px) {
  .enc-cabecera { --enc-barra: 117px; }
}