/*-----------------------------------------------------------------------------------

    Tema: Festival Frecuencias - DJ Snake, Puebla 2026
    Base: Musicly (Topylo). Este archivo sobrescribe main.css, no lo reemplaza.

    01 - Paleta (re-mapeo de variables)
    02 - Tipografia
    03 - Hero
    04 - Cuenta regresiva y barra de datos
    05 - Guia del asistente
    06 - Programa
    07 - Instituciones
    08 - Ajustes finos

-----------------------------------------------------------------------------------*/

/* ------------------------------------------ */
/*  01 - Paleta                               */
/* ------------------------------------------ */
/* Guinda y amarillo provienen del cartel oficial y de la identidad del
   Gobierno de Mexico. Se usan como acento: el negro y el ambar de la
   fotografia siguen dominando la pagina. */
:root {
  --ff-guinda: #9F2241;
  --ff-guinda-light: #C42E55;
  --ff-amarillo: #EFC24A;
  --ff-amarillo-soft: #F6E3A8;
  --ff-verde: #235B4E;
  --ff-arena: #DDC9A3;

  /* Re-mapeo del tema base: los 7 gradientes de main.css se derivan de estos */
  --clr-theme-1: var(--ff-guinda);
  --clr-theme-2: var(--ff-verde);
  --clr-theme-3: var(--ff-amarillo);

  --clr-bg-1: var(--ff-amarillo);
  --clr-bg-3: var(--ff-amarillo);
  --clr-bg-9: var(--ff-amarillo-soft);

  --clr-text-6: var(--ff-amarillo);
  --clr-text-7: var(--ff-amarillo);
  --clr-text-10: var(--ff-guinda);
}

/* Sobre fondo negro el guinda puro pierde legibilidad como texto:
   el acento luminoso es el amarillo, el guinda queda para rellenos. */
.text-color-1,
.text-color-2 {
  color: var(--ff-amarillo);
}

/* ------------------------------------------ */
/*  02 - Tipografia                           */
/* ------------------------------------------ */
/* La manuscrita Oregano del template se sustituye por Prompt en versales:
   el registro informal no corresponde a un evento institucional. */
:root {
  --bd-ff-subtitle: 'Prompt', sans-serif;
}

/* El template pintaba el subtitulo con un degradado recortado sobre el texto.
   Con la paleta nueva ese degradado arranca en guinda, que sobre negro se
   queda en 2.5:1 de contraste. Se resuelve con amarillo solido. */
.section__subtitle {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 18px;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--ff-amarillo);
}

.ff-eyebrow {
  display: inline-block;
  font-family: var(--bd-ff-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ff-amarillo);
  border: 1px solid rgba(239, 194, 74, 0.4);
  border-radius: 40px;
  padding: 9px 22px;
  margin-bottom: 26px;
}

@media (max-width: 575px) {
  .ff-eyebrow {
    font-size: 10px;
    letter-spacing: 0.18em;
    padding: 8px 16px;
  }
}

/* ------------------------------------------ */
/*  03 - Hero                                 */
/* ------------------------------------------ */
.ff-hero {
  border-radius: 30px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  min-height: 780px;
  display: flex;
  align-items: center;
  background-color: #060606;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ff-hero {
    min-height: 680px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .ff-hero {
    min-height: 0;
    padding-top: 90px;
    padding-bottom: 70px;
    border-radius: 20px;
  }
}

.ff-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

/* El video cubre toda la caja. Su atributo poster cubre el hueco mientras
   carga, asi que no hace falta una imagen de fondo aparte. */
.ff-hero__media video {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Visible desde el principio: si se dejaba en opacity 0 a la espera de un
     evento de carga, cualquier navegador que no lo emitiera dejaba el video
     invisible para siempre. El fundido solo suaviza la entrada. */
  opacity: 1;
  transition: opacity 0.8s ease-out;
}

/* El video se descarta en pantallas chicas: pesa demasiado para datos moviles
   y el poster comunica lo mismo. */
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .ff-hero__media video {
    display: none;
  }
}

/* El velo va sobre ambas capas para que el texto se lea sin importar el
   fotograma que toque. Se mantiene ligero en la franja central: el material es
   de concierto nocturno y con mas carga el video dejaba de percibirse. La
   cuenta regresiva y la barra de datos llevan su propio fondo, asi que el peso
   se concentra arriba y abajo. */
.ff-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.34) 45%, rgba(0, 0, 0, 0.88) 100%);
}

/* Control de pausa del fondo (WCAG 2.2.2: el movimiento automatico debe poder
   detenerse). Muestra el icono contrario al estado actual. */
.ff-hero__video-toggle {
  position: absolute;
  z-index: 6;
  inset-block-end: 24px;
  inset-inline-end: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(10, 10, 10, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--clr-common-white);
  font-size: 13px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.ff-hero__video-toggle:hover {
  border-color: var(--ff-amarillo);
  color: var(--ff-amarillo);
}

.ff-hero__video-toggle[hidden] {
  display: none;
}

.ff-hero__video-toggle i {
  grid-area: 1 / 1;
}

.ff-hero__video-toggle .fa-play {
  display: none;
}

.ff-hero__video-toggle.is-paused .fa-pause {
  display: none;
}

.ff-hero__video-toggle.is-paused .fa-play {
  display: block;
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .ff-hero__video-toggle {
    inset-block-end: 14px;
    inset-inline-end: 14px;
  }
}

.ff-hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 80px 0;
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .ff-hero__inner {
    padding: 0;
  }
}

/* Titulo display. Conserva el background-clip del template pero con el
   degradado del cartel en lugar de la textura original. */
.ff-hero__display {
  font-family: var(--bd-ff-heading);
  font-weight: 700;
  font-size: 190px;
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 18px;
  display: inline-block;
  background: linear-gradient(96deg, var(--ff-amarillo) 0%, #FFFFFF 42%, var(--ff-amarillo) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ff-hero__display {
    font-size: 160px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ff-hero__display {
    font-size: 130px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ff-hero__display {
    font-size: 100px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .ff-hero__display {
    font-size: 74px;
  }
}

@media (max-width: 575px) {
  .ff-hero__display {
    font-size: 52px;
    margin-bottom: 12px;
  }
}

.ff-hero__subtitle {
  font-family: var(--bd-ff-heading);
  font-size: 30px;
  font-weight: 500;
  color: var(--clr-common-white);
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .ff-hero__subtitle {
    font-size: 20px;
  }
}

.ff-hero__lead {
  font-size: 17px;
  color: var(--clr-text-3);
  max-width: 620px;
  margin: 0 auto 45px;
}

/* Con el velo mas ligero, el texto puede coincidir con un fotograma claro:
   la sombra le garantiza un borde sin oscurecer el video. */
.ff-hero__subtitle,
.ff-hero__lead {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}

@media (max-width: 575px) {
  .ff-hero__lead {
    font-size: 15px;
    margin-bottom: 32px;
  }
}

.ff-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 40px;
}

/* ------------------------------------------ */
/*  04 - Cuenta regresiva y barra de datos    */
/* ------------------------------------------ */
.ff-countdown {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 40px;
}

.ff-countdown__unit {
  min-width: 118px;
  padding: 20px 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(10, 10, 10, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .ff-countdown__unit {
    min-width: 74px;
    padding: 14px 8px 11px;
  }
}

.ff-countdown__num {
  display: block;
  font-family: var(--bd-ff-heading);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  color: var(--clr-common-white);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .ff-countdown__num {
    font-size: 28px;
  }
}

.ff-countdown__label {
  display: block;
  font-family: var(--bd-ff-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ff-amarillo);
}

@media (max-width: 575px) {
  .ff-countdown__label {
    font-size: 9px;
    letter-spacing: 0.1em;
  }
}

/* Mensaje que sustituye al contador una vez ocurrido el evento */
.ff-countdown__over {
  font-family: var(--bd-ff-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--ff-amarillo);
}

.ff-factbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(10, 10, 10, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .ff-factbar {
    grid-template-columns: repeat(2, 1fr);
  }
}

.ff-factbar__item {
  padding: 24px 18px;
  border-inline-end: 1px solid rgba(255, 255, 255, 0.13);
  text-align: center;
}

.ff-factbar__item:last-child {
  border-inline-end: 0;
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .ff-factbar__item {
    padding: 18px 10px;
    border-block-end: 1px solid rgba(255, 255, 255, 0.13);
  }

  .ff-factbar__item:nth-child(2n) {
    border-inline-end: 0;
  }

  .ff-factbar__item:nth-last-child(-n+2) {
    border-block-end: 0;
  }
}

.ff-factbar__label {
  display: block;
  font-family: var(--bd-ff-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clr-text-4);
  margin-bottom: 8px;
}

.ff-factbar__value {
  display: block;
  font-family: var(--bd-ff-heading);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--clr-common-white);
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .ff-factbar__value {
    font-size: 15px;
  }
}

/* La entrada gratuita es el dato que mas importa comunicar */
.ff-factbar__item--free {
  background: var(--ff-guinda);
}

.ff-factbar__item--free .ff-factbar__label {
  color: rgba(255, 255, 255, 0.7);
}

/* ------------------------------------------ */
/*  04b - Arte del cartel                     */
/* ------------------------------------------ */
/* Recortes del cartel oficial (palmeras, mar, arquitectura poblana) usados como
   marca de agua. Van en un elemento propio y no en un pseudo-elemento porque
   varias secciones del template ya ocupan ::before y ::after con sus overlays.
   La opacidad es baja a proposito: son un guiño al cartel, no un fondo. */
.ff-art-host {
  position: relative;
  overflow: hidden;
}

/* El contenido debe quedar por encima de la marca de agua. */
.ff-art-host > .container {
  position: relative;
  z-index: 1;
}

.ff-art {
  position: absolute;
  z-index: 0;
  display: block;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}

/* Palmeras: apoyadas en el borde inferior, a lo ancho. */
.ff-art--palmeras {
  inset-inline: 0;
  inset-block-end: 0;
  height: 320px;
  background-image: url("../../img/frecuencias/art-palmeras.png");
  opacity: 0.1;
}

/* Mar: horizonte que cierra la seccion por abajo. */
.ff-art--mar {
  inset-inline: 0;
  inset-block-end: 0;
  height: 300px;
  background-image: url("../../img/frecuencias/art-mar.png");
  background-size: cover;
  background-position: center top;
  opacity: 0.12;
}

/* Arquitectura poblana: acento a la derecha, centrado verticalmente.
   El par inset-block:0 + margin-block:auto sobre una altura fija centra sin
   recurrir a transform, que crearia un contexto de apilamiento propio. */
.ff-art--edificio {
  inset-block: 0;
  margin-block: auto;
  inset-inline-end: 0;
  width: 760px;
  height: 340px;
  background-image: url("../../img/frecuencias/art-edificio.png");
  background-position: right center;
  opacity: 0.14;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ff-art--palmeras,
  .ff-art--mar {
    height: 220px;
  }

  .ff-art--edificio {
    width: 520px;
    height: 240px;
  }
}

/* En movil el arte compite con el texto y aporta poco: se retira. */
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .ff-art {
    display: none;
  }
}

/* ------------------------------------------ */
/*  05 - Guia del asistente                   */
/* ------------------------------------------ */
.ff-guide-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ff-guide-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .ff-guide-list {
    grid-template-columns: repeat(1, 1fr);
  }
}

.ff-guide-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border: 1px solid var(--clr-border-3);
  border-radius: 14px;
  background: var(--clr-bg-5);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.ff-guide-item:hover {
  transform: translateY(-4px);
}

.ff-guide-item__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 17px;
}

.ff-guide-item__text {
  font-family: var(--bd-ff-heading);
  font-size: 17px;
  font-weight: 500;
  color: var(--clr-common-white);
  line-height: 1.4;
  margin: 0;
}

/* Verde para lo permitido, guinda para lo prohibido, amarillo para consejos.
   El color es el que distingue los tres bloques de un vistazo. */
.ff-guide--allowed .ff-guide-item__icon {
  background: rgba(35, 91, 78, 0.2);
  color: #4FCFAE;
}

.ff-guide--allowed .ff-guide-item:hover {
  border-color: #4FCFAE;
}

.ff-guide--forbidden .ff-guide-item__icon {
  background: rgba(159, 34, 65, 0.22);
  color: #E8657F;
}

.ff-guide--forbidden .ff-guide-item:hover {
  border-color: var(--ff-guinda-light);
}

.ff-guide--advised .ff-guide-item__icon {
  background: rgba(239, 194, 74, 0.16);
  color: var(--ff-amarillo);
}

.ff-guide--advised .ff-guide-item:hover {
  border-color: var(--ff-amarillo);
}

.ff-guide-note {
  margin-top: 30px;
  padding: 18px 24px;
  border-inline-start: 3px solid var(--ff-amarillo);
  background: var(--clr-bg-5);
  border-radius: 0 10px 10px 0;
}

.ff-guide-note p {
  margin: 0;
  font-size: 15px;
  color: var(--clr-text-3);
}

/* ------------------------------------------ */
/*  06 - Programa                             */
/* ------------------------------------------ */
.ff-program {
  border: 1px solid var(--clr-border-3);
  border-radius: 18px;
  overflow: hidden;
}

.ff-program__item {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 26px 30px;
  border-block-end: 1px solid var(--clr-border-3);
}

.ff-program__item:last-child {
  border-block-end: 0;
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .ff-program__item {
    gap: 16px;
    padding: 20px 18px;
  }
}

/* La columna aloja rangos completos ("16:00-20:00"), no una hora suelta.
   tabular-nums mantiene los digitos en rejilla para que las cuatro filas
   queden alineadas, y nowrap impide que el rango se parta en dos lineas en
   los anchos intermedios. */
.ff-program__time {
  flex: 0 0 auto;
  min-width: 152px;
  white-space: nowrap;
  font-family: var(--bd-ff-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--ff-amarillo);
  font-variant-numeric: tabular-nums;
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .ff-program__time {
    min-width: 96px;
    font-size: 15px;
  }
}

/* Por debajo de 380px el rango y el titulo ya no conviven en una fila: la
   hora pasa arriba y el texto ocupa el ancho completo. */
@media (max-width: 379px) {
  .ff-program__item {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .ff-program__time {
    min-width: 0;
    font-size: 16px;
  }
}

.ff-program__title {
  font-size: 21px;
  font-weight: 600;
  color: var(--clr-common-white);
  margin: 0 0 4px;
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .ff-program__title {
    font-size: 17px;
  }
}

.ff-program__desc {
  font-size: 15px;
  color: var(--clr-text-4);
  margin: 0;
}

/* Acto estelar: unico renglon con relleno guinda */
.ff-program__item--headline {
  background: linear-gradient(90deg, rgba(159, 34, 65, 0.35) 0%, rgba(159, 34, 65, 0) 100%);
}

.ff-program__item--headline .ff-program__title {
  font-size: 26px;
}

/* Marcador visible para el line-up que aun no se confirma */
.ff-program__item--pending .ff-program__title,
.ff-program__item--pending .ff-program__time {
  color: var(--clr-text-4);
}

/* ------------------------------------------ */
/*  07 - Instituciones                        */
/* ------------------------------------------ */
/* Logotipos oficiales. Se usan las versiones a color, que por manual de
   identidad deben ir sobre fondo claro: por eso la tarjeta es blanca y no se
   invierten ni se tiñen. Federales en la primera fila, el bloque estatal
   ocupando el ancho completo debajo. */
.ff-logo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* En movil tres logos en linea quedarian ilegibles: se apilan. */
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .ff-logo-grid {
    grid-template-columns: 1fr;
  }
}

.ff-logo-card {
  display: grid;
  place-items: center;
  min-height: 152px;
  padding: 30px 26px;
  border-radius: 14px;
  background: var(--clr-common-white);
}

.ff-logo-card img {
  width: auto;
  max-width: 100%;
  height: auto;
}

/* Cada marca tiene una proporcion distinta (2.7:1, 3.8:1 y 6.2:1). Igualar la
   altura las dejaria con anchos muy dispares, asi que se ajusta una a una para
   que ocupen un ancho parecido y pesen lo mismo en la fila. */
.ff-logo-card--mexico img {
  max-height: 66px;
}

.ff-logo-card--cultura img {
  max-height: 56px;
}

/* El bloque estatal llega a 505x82 px: mostrarlo mas grande solo lo veria
   pixelado. Se limita hasta contar con una version vectorial. */
.ff-logo-card--puebla img {
  max-height: 42px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .ff-logo-card {
    min-height: 128px;
    padding: 24px 16px;
  }

  .ff-logo-card--mexico img {
    max-height: 52px;
  }

  .ff-logo-card--cultura img {
    max-height: 44px;
  }

  .ff-logo-card--puebla img {
    max-height: 32px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .ff-logo-card {
    min-height: 118px;
    padding: 24px 20px;
  }

  .ff-logo-card--mexico img {
    max-height: 58px;
  }

  .ff-logo-card--cultura img {
    max-height: 50px;
  }

  .ff-logo-card--puebla img {
    max-height: 38px;
  }
}

/* ------------------------------------------ */
/*  08 - Ajustes finos                        */
/* ------------------------------------------ */
/* Separacion entre filas de tarjetas. No se usa margin-bottom porque .ff-track
   tiene height:100% y se estira a la altura de la columna: el margen quedaria
   absorbido y las filas se tocarian. El gutter de Bootstrap si separa. */
.ff-track-row {
  --bs-gutter-y: 30px;
}

/* Los temas del set llevan numeracion, no caratula: el template mostraba
   fotos de banda que aqui no aplican. */
.ff-track {
  padding: 30px 28px;
  border: 1px solid var(--clr-border-3);
  border-radius: 16px;
  background: var(--clr-bg-5);
  transition: border-color 0.3s ease, background 0.3s ease;
  height: 100%;
}

.ff-track:hover {
  border-color: var(--ff-amarillo);
  background: var(--clr-bg-10);
}

.ff-track__num {
  display: block;
  font-family: var(--bd-ff-heading);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(239, 194, 74, 0.55);
  margin-bottom: 18px;
}

.ff-track__title {
  font-size: 22px;
  font-weight: 600;
  color: var(--clr-common-white);
  margin: 0 0 6px;
}

.ff-track__meta {
  font-size: 14px;
  color: var(--clr-text-4);
}

/* Las colaboraciones reutilizan la retícula de bandas, sin calificacion */
.ff-collab {
  padding: 28px 24px;
  border: 1px solid var(--clr-border-3);
  border-radius: 14px;
  background: var(--clr-bg-5);
  text-align: center;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.ff-collab:hover {
  border-color: var(--ff-guinda-light);
  transform: translateY(-4px);
}

.ff-collab__name {
  font-size: 19px;
  font-weight: 600;
  color: var(--clr-common-white);
  margin: 0 0 6px;
}

.ff-collab__track {
  font-size: 14px;
  color: var(--ff-amarillo);
}

/* Preguntas frecuentes sobre el acordeon de Bootstrap */
.ff-faq .accordion-item {
  background: var(--clr-bg-5);
  border: 1px solid var(--clr-border-3);
  border-radius: 14px;
  margin-bottom: 16px;
  overflow: hidden;
}

.ff-faq .accordion-button {
  background: transparent;
  color: var(--clr-common-white);
  font-family: var(--bd-ff-heading);
  font-size: 19px;
  font-weight: 500;
  padding: 24px 28px;
  box-shadow: none;
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .ff-faq .accordion-button {
    font-size: 16px;
    padding: 18px 20px;
  }
}

.ff-faq .accordion-button:not(.collapsed) {
  color: var(--ff-amarillo);
  background: transparent;
}

.ff-faq .accordion-button::after {
  filter: invert(1) grayscale(1);
  opacity: 0.6;
}

.ff-faq .accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}

.ff-faq .accordion-body {
  padding: 0 28px 26px;
  color: var(--clr-text-3);
  font-size: 16px;
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .ff-faq .accordion-body {
    padding: 0 20px 20px;
    font-size: 15px;
  }
}

/* El cartel oficial se muestra completo, sin recortes */
.ff-poster {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--clr-border-3);
  display: block;
  position: relative;
}

/* Boton de video sobre el cartel. Lleva fondo propio porque el cartel alterna
   zonas amarillas y oscuras: un boton solo de contorno blanco se perderia
   sobre la mitad clara. */
.ff-poster-play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  background: rgba(10, 10, 10, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.ff-poster-play:hover {
  background: var(--ff-guinda);
  border-color: var(--ff-guinda);
  color: var(--clr-common-white);
}

@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .ff-poster-play {
    width: 68px;
    height: 68px;
    line-height: 68px;
  }
}

.ff-poster a {
  display: block;
  position: relative;
}

.ff-poster img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease-out;
}

.ff-poster:hover img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .ff-poster img {
    transition: none;
  }

  .ff-poster:hover img {
    transform: none;
  }
}

/* Logotipo tipografico. Sustituye al logo del template mientras no exista
   la version oficial del festival en vectorial. */
.ff-logo {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.05;
  text-decoration: none;
}

.ff-logo__mark {
  font-family: var(--bd-ff-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ff-amarillo);
}

.ff-logo__name {
  font-family: var(--bd-ff-heading);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--clr-common-white);
}

@media (max-width: 575px) {
  .ff-logo__name {
    font-size: 21px;
  }
}

/* Modal del video. El clip del programa es vertical (formato 9:16), de ahi
   el ancho contenido: a pantalla completa se veria desproporcionado. */
.ff-video-modal {
  position: relative;
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
}

.ff-video-modal video {
  width: 100%;
  height: auto;
  max-height: 82vh;
  object-fit: contain;
  background: #000;
  display: block;
}

/* --- Ajustes a componentes heredados de main.css --- */

/* El hover original llevaba a amarillo con texto blanco: contraste
   insuficiente. Se mantiene en familia guinda. */
.ms-fill-btn:hover {
  background-color: var(--ff-guinda-light);
  color: var(--clr-common-white);
}

/* El verde institucional es demasiado oscuro para un icono sobre negro. */
.ms-border-btn i {
  color: var(--ff-amarillo);
}

/* El tab activo traia el degradado guinda-amarillo con texto blanco encima:
   sobre el extremo amarillo el texto se pierde. Guinda solido lo resuelve y
   deja la seleccion mas sobria. */
.ms-popular__tab .nav-tabs .nav-link.active,
.ms-popular__tab .nav-tabs .nav-link:hover {
  background: var(--ff-guinda);
  color: var(--clr-common-white);
  border-color: transparent;
}

/* .ms-border-btn se usa tambien como <button> para compartir. */
button.ms-border-btn {
  background: transparent;
  cursor: pointer;
  font-family: var(--bd-ff-body);
}

/* Los iconos de "Antes de venir" sustituyen a los SVG del template. */
.work__features-icon {
  display: flex;
  align-items: flex-start;
  padding-top: 4px;
}

.work__features-icon span i {
  font-size: 26px;
  color: var(--ff-amarillo);
}

/* La biografia ocupa el lugar del carrusel de testimonios: los parrafos ya no
   heredan el tamaño que main.css daba a las citas. */
.ms-tm-content p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--clr-text-3);
  margin-bottom: 18px;
}

.ms-tm-content .ff-guide-note {
  margin-top: 26px;
}

.ms-tm-content .ff-guide-note p {
  margin-bottom: 0;
  font-style: italic;
}

/* El retrato se estiraba: .m-img img (main.css) fija width sin height, asi que
   el atributo height="1800" del HTML sobrevivia como hint y alargaba la imagen.
   Con height:auto vuelve a su proporcion real (1440x1800). */
.ms-tm-img-main img {
  height: auto;
}

/* Mismo defecto en el collage de "Planea tu asistencia": .work__thumb img solo
   declara max-width, asi que el height del HTML seguia estirando las fotos.

   Ademas el template combinaba una foto grande con dos chicas de menor tamaño
   intrinseco; aqui las tres son 480x640, asi que la columna de la derecha
   quedaba mucho mas alta. La grande fija la altura del bloque y las dos de la
   derecha se reparten esa misma altura recortando por el centro. */
.work__thumb-inner {
  align-items: stretch;
}

/* Las dos columnas llevan proporcion propia para que sus alturas coincidan sin
   depender del alto intrinseco de cada foto:
     alto grande  = 1.6 * A * 4/3 = 2.1333 * A   (A = ancho de la columna chica)
     alto pequeña = A * 32/15     = 2.1333 * A
   Con la altura ya definida, las filas 1fr se resuelven y las fotos pueden
   llenarlas recortando por el centro en vez de deformarse. */
.work__thumb-inner > .work__thumb {
  flex: 1.6;
  aspect-ratio: 3 / 4;
}

.work__small-thumb {
  flex: 1;
  aspect-ratio: 15 / 32;
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.work__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El CTA pasa de tres columnas (texto, imagen, tiendas) a dos. */
.ms-cta-wrap {
  align-items: center;
}

.ms-cta-area .ff-hero__actions {
  margin-top: 0;
  justify-content: flex-start;
}

/* Navegacion por anclas: el encabezado fijo no debe tapar el titulo destino. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 130px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Credito de autoria en el pie */
.ff-credit p {
  margin: 0;
  font-size: 14px;
  color: var(--clr-text-4);
}

.ff-credit a {
  color: var(--ff-amarillo);
  transition: color 0.3s ease;
}

.ff-credit a:hover {
  color: var(--clr-common-white);
}

/* Accesibilidad: el foco de teclado debe verse sobre fondo negro */
a:focus-visible,
button:focus-visible,
.accordion-button:focus-visible {
  outline: 2px solid var(--ff-amarillo);
  outline-offset: 3px;
}

/* Respeta la preferencia de movimiento reducido del sistema */
@media (prefers-reduced-motion: reduce) {
  .ff-guide-item,
  .ff-collab,
  .ff-track {
    transition: none;
  }

  .ff-guide-item:hover,
  .ff-collab:hover {
    transform: none;
  }
}