/* ============================================================================
   PORTAL RANCHERAS - LAYOUT DE BANDA
   ----------------------------------------------------------------------------
   Estilos exclusivos de la Landing de Banda (banda.html). La landing usa un
   layout propio (Header de Banda + secciones + Footer de Banda) manteniendo
   el lenguaje visual del portal. Consume los mismos tokens.
   Se carga ADEMÁS de portal.css, nunca en su reemplazo.
   ============================================================================ */

/* ------------------------- HEADER DE BANDA ------------------------------- */
/* Navegación interna de la landing: recorre secciones, no el portal.        */

.pr-banda-header {
  position: sticky;
  top: 0;
  z-index: var(--pr-z-header);
  background: var(--pr-dark);
  color: var(--pr-text-inverse);
  box-shadow: 0 6px 18px rgba(31, 20, 14, 0.28);
}
.pr-banda-header-inner {
  display: flex;
  align-items: center;
  gap: var(--pr-sp-4);
  min-height: var(--pr-header-band-height);
}
.pr-banda-brand {
  font-family: var(--pr-font-display);
  color: var(--pr-white);
  font-size: 1.05rem;
  white-space: nowrap;
  /* Nombres largos se truncan con elipsis en vez de desbordar el header. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pr-banda-brand:hover { color: var(--pr-secondary); text-decoration: none; }

.pr-banda-nav { display: none; }
.pr-banda-nav a {
  color: var(--pr-text-inverse);
  font-weight: 700;
  font-size: var(--pr-fs-aux);
  padding: var(--pr-sp-2) var(--pr-sp-2);
  border-radius: var(--pr-radius-sm);
  white-space: nowrap;
}
.pr-banda-nav a:hover { color: var(--pr-secondary); text-decoration: none; }

/* Bloque de accesos a la derecha: "Volver al Portal | Login" */
.pr-banda-tail {
  margin-left: auto;
  display: none;
  align-items: center;
  gap: var(--pr-sp-3);
}
.pr-banda-sep {
  color: var(--pr-dark-soft);
  font-weight: 400;
}
.pr-banda-back {
  font-size: var(--pr-fs-aux);
  font-weight: 800;
  color: var(--pr-secondary);
  white-space: nowrap;
}
.pr-banda-back:hover { color: var(--pr-white); }

/* El nav completo (9 secciones + "Volver al Portal | Zona Fan") solo cabe
   desde 1200px; entre 992 y 1199 desbordaba el sitio hacia la derecha, así
   que en ese rango se mantiene la hamburguesa. */
@media (min-width: 1200px) {
  .pr-banda-nav { display: flex; gap: var(--pr-sp-1); }
  .pr-banda-tail { display: flex; }
  .pr-banda-burger { display: none; }
}

.pr-banda-burger {
  margin-left: auto;
  flex: 0 0 auto;
  border: 1px solid var(--pr-dark-soft);
  background: transparent;
  color: var(--pr-text-inverse);
  border-radius: var(--pr-radius-sm);
  padding: var(--pr-sp-1) var(--pr-sp-3);
  font-size: 1.2rem;
}

/* --------------------------- HERO DE BANDA ------------------------------- */

.pr-banda-hero {
  background:
    radial-gradient(900px 380px at 15% -10%, rgba(224, 159, 62, 0.35), transparent 60%),
    linear-gradient(150deg, var(--pr-hero-start) 0%, var(--pr-primary) 60%, var(--pr-hero-accent) 100%);
  color: var(--pr-text-inverse);
  padding: var(--pr-sp-8) 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* La imagen (gradiente + foto) vive en un ::before para poder animarla con
   transform (zoom de entrada, keyframes pr-hero-zoom en portal.css) sin mover
   el contenido del hero. */
.pr-banda-hero[style*="--pr-banda-hero-image"] {
  position: relative;
  overflow: hidden;
  padding-top: 205px;
}
.pr-banda-hero[style*="--pr-banda-hero-image"]::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
  background-image:
    linear-gradient(180deg, rgba(16, 12, 10, 0.08) 0%, rgba(25, 17, 14, 0.3) 25%, rgba(25, 17, 14, 0.9) 49%, rgba(25, 17, 14, 0.98) 100%),
    var(--pr-banda-hero-image);
  /* La foto SIEMPRE cubre el 100% del hero (cover); en pantallas angostas el
     gradiente oscuro de encima mantiene legible el contenido. */
  background-position: center, center top;
  background-size: 100% 100%, cover;
  background-repeat: no-repeat;
  animation: pr-hero-zoom 1.6s ease-out both;
}
.pr-banda-hero[style*="--pr-banda-hero-image"] > * { position: relative; z-index: 1; }
.pr-banda-hero h1 {
  color: var(--pr-white);
  font-size: var(--pr-fs-hero);
  line-height: 1.06;
  max-width: 100%;
  overflow-wrap: break-word;
}
@media (min-width: 992px) {
  .pr-banda-hero[style*="--pr-banda-hero-image"] { padding-top: var(--pr-sp-8); }
  .pr-banda-hero[style*="--pr-banda-hero-image"]::before {
    background-image:
      linear-gradient(90deg, rgba(28,22,20,.88) 0%, rgba(40,26,25,.76) 36%, rgba(68,28,31,.45) 63%, rgba(92,28,34,.23) 100%),
      var(--pr-banda-hero-image);
    background-position: center;
    background-size: cover;
  }
  .pr-banda-hero h1 { max-width: min(760px, 50%); }
}
.pr-banda-hero .pr-banda-generos { display: flex; gap: var(--pr-sp-2); flex-wrap: wrap; margin: var(--pr-sp-3) 0; }
.pr-banda-hero .pr-badge--genero { background: var(--pr-overlay-soft); color: var(--pr-white); }
.pr-banda-hero-meta { display: flex; flex-wrap: wrap; gap: var(--pr-sp-4); font-size: var(--pr-fs-aux); opacity: 0.9; }

/* Contador de fans + botón seguir */
.pr-fanclub {
  display: flex;
  align-items: center;
  gap: var(--pr-sp-4);
  margin-top: var(--pr-sp-5);
  flex-wrap: wrap;
}
.pr-fanclub .pr-fans-count strong { font-family: var(--pr-font-display); font-size: 1.4rem; color: var(--pr-secondary); }
.pr-fanclub .pr-fans-count { white-space: nowrap; }

/* ------------------------ SECCIONES DE LA LANDING ------------------------ */

.pr-banda-seccion { padding: var(--pr-sp-7) 0; scroll-margin-top: 80px; }
.pr-banda-seccion--alt { background: var(--pr-surface-alt); }
.pr-banda-seccion h2 { margin-bottom: var(--pr-sp-5); }

/* Integrantes */
.pr-integrante { text-align: center; }
.pr-integrante .pr-avatar { margin-bottom: var(--pr-sp-3); }
.pr-integrante h3 { font-size: 1rem; margin-bottom: 0; }
.pr-integrante p { font-size: var(--pr-fs-aux); color: var(--pr-text-2); margin: 0; }
.pr-bio-logo-col { display: flex; justify-content: flex-start; align-items: flex-start; }
.pr-bio-logo { display: block; max-width: 100%; object-fit: contain; }
.pr-bio-logo--section { width: min(100%, 340px); aspect-ratio: 1 / 1; padding: var(--pr-sp-4); border: 1px solid var(--pr-border); border-radius: var(--pr-radius); background: var(--pr-white); }
.pr-bio-logo--preview { width: min(220px, 100%); }

/* El texto de la biografía va justificado en todos los tamaños (el logo que
   la acompaña solo se muestra en escritorio: d-none d-lg-block en la vista). */
.pr-bio-texto p { text-align: justify; }

/* Acciones de evento en modo diseño: tres filas compactas y estables
   (ver, visibilidad y decisión de participación). */
.pr-event-actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--pr-sp-2);
}
.pr-participacion-acciones {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--pr-sp-2);
  padding-top: 2px;
}
.pr-participacion-label {
  color: var(--pr-text-2);
  font-size: var(--pr-fs-label);
  font-weight: 800;
  white-space: nowrap;
}
.pr-participacion-botones { display: flex; align-items: center; gap: var(--pr-sp-1); }
.pr-participacion-botones .btn { padding: .3rem .65rem; }

/* Perfil básico sin contenido (vista pública): placeholder suave, mismo
   lenguaje visual que las secciones vacías del modo diseño. */
.pr-banda-sin-contenido {
  border: 1px dashed var(--pr-border-strong);
  border-radius: var(--pr-radius);
  background: rgba(58, 107, 53, 0.035);
  padding: var(--pr-sp-6) var(--pr-sp-4);
  text-align: center;
  color: var(--pr-text-2);
}
.pr-banda-sin-contenido i { display: block; font-size: 1.6rem; color: var(--pr-border-strong); margin-bottom: var(--pr-sp-2); }
.pr-banda-sin-contenido h2 { font-size: 1.3rem; margin-bottom: var(--pr-sp-3); }
.pr-banda-sin-contenido p { max-width: 640px; margin-left: auto; margin-right: auto; }

/* Aparición progresiva de secciones al hacer scroll (banda.js las marca solo
   en la vista pública; en modo diseño no se aplica). */
.pr-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.pr-reveal--visible {
  opacity: 1;
  transform: none;
}

/* Swiper: navegación alineada al sitio y tarjetas con altura consistente. */
.pr-banda-slider { width: 100%; }
.pr-banda-slider-shell { position: relative; }
.pr-banda-slider .swiper-slide { height: auto; }
.pr-banda-slider .swiper-slide > .pr-card-link,
.pr-banda-slider .swiper-slide > .pr-card-link .pr-card { height: 100%; }
.pr-banda-slider .swiper-pagination {
  position: static;
  margin-top: var(--pr-sp-4);
  line-height: 1;
}
.pr-banda-slider .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  background: var(--pr-border-strong);
  opacity: 0.65;
}
.pr-banda-slider .swiper-pagination-bullet-active {
  background: var(--pr-primary);
  opacity: 1;
}
.pr-banda-slider .swiper-pagination-lock { display: none; }
.pr-banda-slider-shell > .swiper-button-prev,
.pr-banda-slider-shell > .swiper-button-next { display: none; }

@media (min-width: 992px) {
  .pr-banda-slider-shell {
    --swiper-navigation-color: var(--pr-primary);
    padding-inline: 52px;
  }
  .pr-banda-slider-shell > .swiper-button-prev,
  .pr-banda-slider-shell > .swiper-button-next { display: flex; }
  .pr-banda-slider-shell > .swiper-button-prev { left: 8px; }
  .pr-banda-slider-shell > .swiper-button-next { right: 8px; }
  .pr-banda-slider .swiper-pagination { display: none; }
  .pr-banda-slider-shell > .swiper-button-lock { display: none; }
}

/* Video principal: grande en escritorio; primero y claramente identificado
   dentro del carrusel en móvil. */
.pr-video-item { position: relative; }
.pr-video-destacado-label {
  display: none;
}
.pr-video-item--destacado .pr-embed {
  border: 2px solid var(--pr-secondary);
  box-shadow: 0 0 0 3px var(--pr-secondary-soft), var(--pr-shadow-sm);
}
.pr-video-principal { margin-bottom: var(--pr-sp-6); }
.pr-videos-secundarios-titulo { margin: 0 0 var(--pr-sp-4); }
.pr-spotify-iframe { height: 400px; }
.pr-youtube-frame { position: relative; }
.pr-youtube-activar { display: none; }

@media (max-width: 991.98px) {
  /* El iframe de YouTube captura los gestos táctiles. Esta capa deja que el
     primer gesto llegue a Swiper; un toque breve activa luego el reproductor. */
  .pr-youtube-frame:not(.is-active) iframe { pointer-events: none; }
  .pr-youtube-frame:not(.is-active) .pr-youtube-activar {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    cursor: pointer;
    background: transparent;
    touch-action: pan-y;
  }
}

@media (min-width: 992px) {
  .pr-video-destacado-label {
    position: static;
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--pr-sp-2);
    margin-bottom: var(--pr-sp-2);
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: var(--pr-secondary-soft);
    color: #8A5A10;
    font-size: var(--pr-fs-aux);
    font-weight: 700;
    box-shadow: none;
  }
  .pr-video-destacado-label i { font-size: inherit; }
  .pr-video-principal .pr-embed--video {
    width: 100%;
    height: 600px;
    aspect-ratio: auto;
  }
  .pr-spotify-iframe { height: 600px; }
}

/* Galería */
.pr-galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pr-sp-3); }
.pr-galeria-item {
  aspect-ratio: 4 / 3;
  border-radius: var(--pr-radius);
  background: linear-gradient(135deg, var(--pr-dark-soft), var(--pr-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.8rem;
}
@media (min-width: 768px) { .pr-galeria { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------- FOOTER DE BANDA ----------------------------- */
/* Reemplaza al Footer Global: es el punto de conversión (contratación).     */

.pr-banda-footer {
  background: var(--pr-dark);
  color: var(--pr-text-inverse);
  padding: var(--pr-sp-8) 0 var(--pr-sp-5);
  margin-top: var(--pr-sp-8);
}
.pr-banda-footer h2, .pr-banda-footer h3 { color: var(--pr-white); }
.pr-banda-footer .form-label { color: var(--pr-text-inverse); font-weight: 800; }
.pr-banda-footer .pr-contacto-item { display: flex; align-items: center; gap: var(--pr-sp-3); padding: var(--pr-sp-2) 0; }
.pr-banda-footer .pr-contacto-item i { color: var(--pr-secondary); font-size: 1.2rem; }
.pr-banda-footer .pr-contacto-item a { color: var(--pr-text-inverse); }
.pr-banda-footer-credit {
  border-top: 1px solid var(--pr-dark-soft);
  margin-top: var(--pr-sp-6);
  padding-top: var(--pr-sp-4);
  font-size: var(--pr-fs-aux);
  opacity: 0.75;
  text-align: center;
}
.pr-banda-footer-credit a { color: var(--pr-secondary); }

/* Link a la agenda completa (calendario filtrado por la banda) cuando la
   landing solo muestra los eventos más cercanos. */
.pr-agenda-completa {
  margin-top: var(--pr-sp-4);
  text-align: center;
}

@media (max-width: 575.98px) {
  .page-banda .pr-event-row { flex-wrap: wrap; }
  .page-banda .pr-event-row > .btn { width: 100%; }
  .page-banda .pr-event-actions { width: 100%; align-items: flex-end; }
  .page-banda .pr-participacion-acciones {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding-top: var(--pr-sp-2);
    border-top: 1px solid var(--pr-border);
  }
  .page-banda .pr-participacion-botones {
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   PREVIEW UX v2 — landing de banda: devolver vida al contenido.
   TODO scoped a body.page-banda y en UN solo bloque.
   >>> PARA REVERTIR: borrar desde este comentario hasta el final del archivo. <<<
   No toca el fondo crema ni la tipografía base.
   ========================================================================== */

/* 1. Títulos de sección: un poco menos pesados + acento de marca rojo->dorado,
      para que el color de la fiesta ranchera baje también al contenido. */
body.page-banda .pr-banda-seccion > .pr-container > h2 {
  position: relative;
  padding-bottom: var(--pr-sp-3);
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  letter-spacing: -0.01em;
}
body.page-banda .pr-banda-seccion > .pr-container > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 54px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pr-primary), var(--pr-secondary));
}

/* 2. Fondo un pelo más claro y cálido (casi blanco). */
body.page-banda { --pr-bg: #FFFBF5; }

/* 3. Cards de contenido y de publicidad, incluidas las FILAS de evento de la
      banda (.pr-event-row, que no son .pr-card). El énfasis se apoya en el rail
      dorado (inset: respeta esquinas y NO lo recorta el carrusel de noticias) +
      un borde un pelo más marcado, con una sombra sutil pareja para todas. Se
      excluyen los eventos finalizados (ya tienen su propio estilo atenuado). */
body.page-banda .pr-card,
body.page-banda .pr-promo-card,
body.page-banda .pr-event-row:not(.pr-event-row--finalizado) {
  border-color: var(--pr-border-strong);
  box-shadow: inset 3px 0 0 var(--pr-secondary), 0 4px 14px -6px rgba(92, 45, 18, 0.14);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
body.page-banda .pr-card:hover,
body.page-banda .pr-promo-card:hover,
body.page-banda .pr-event-row:not(.pr-event-row--finalizado):hover {
  transform: translateY(-3px);
  box-shadow: inset 3px 0 0 var(--pr-secondary), 0 8px 22px -8px rgba(92, 45, 18, 0.2);
}

/* 4. Etiqueta "video destacado": fondo dorado (igual que el rail) + texto blanco. */
body.page-banda .pr-video-destacado-label {
  background: var(--pr-secondary);
  color: #fff;
}

/* 5. Menos aire entre secciones: con el tono uniforme, 48px (sp-7) arriba y
      abajo se sentía holgado. Se baja a 32px (sp-6) y se junta un poco el
      título con su contenido. */
body.page-banda .pr-banda-seccion { padding-top: var(--pr-sp-6); padding-bottom: var(--pr-sp-6); }
body.page-banda .pr-banda-seccion h2 { margin-bottom: var(--pr-sp-4); }