/*
 * Componente compartido: tarjetas de bandas de INICIO y BANDAS.
 * Cada página conserva su propia hoja para el resto del diseño.
 */
#inicio-page .rock-band-card.band-card-visual,
#bandas-page .rock-band-card.band-card-visual {
  box-sizing: border-box; min-width: 0; min-height: 283px; padding: 20px;
  display: flex; align-items: flex-end; position: relative; overflow: hidden;
  isolation: isolate; border: 1px solid rgba(255,255,255,.13); border-radius: 0;
  background-color: #090909; background-image: none !important; color: #fff;
  text-decoration: none; transition: transform .22s ease, border-color .22s ease;
}
#inicio-page .rock-band-card.band-card-visual::before,
#bandas-page .rock-band-card.band-card-visual::before {
  content: ""; position: absolute; inset: -5px;
  background-image: var(--band-card-logo, none), var(--band-card-background, none);
  background-size: cover, cover; background-position: center, center;
  background-repeat: no-repeat, no-repeat; opacity: .48;
  filter: blur(1.2px) brightness(.48) saturate(.82); transform: scale(1.04);
  z-index: 0; pointer-events: none;
}
#inicio-page .rock-band-card.band-card-visual::after,
#bandas-page .rock-band-card.band-card-visual::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.40) 38%,rgba(0,0,0,.94) 100%);
  z-index: 1; pointer-events: none;
}
#inicio-page .rock-band-card.band-card-visual .rock-band-number,
#bandas-page .rock-band-card.band-card-visual .rock-band-number {
  position: absolute; top: 22px; left: 24px; z-index: 3;
  color: rgba(255,255,255,.58); font-size: .8rem; letter-spacing: .18em;
}
#inicio-page .rock-band-card.band-card-visual .rock-band-card-logo,
#bandas-page .rock-band-card.band-card-visual .rock-band-card-logo {
  position: absolute; z-index: 2; top: 22px; left: 50%;
  transform: translateX(-50%); width: min(76%,270px); height: 132px;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
#inicio-page .rock-band-card.band-card-visual .rock-band-card-logo img,
#bandas-page .rock-band-card.band-card-visual .rock-band-card-logo img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  object-position: center; filter: drop-shadow(0 3px 10px rgba(0,0,0,.8));
}
#inicio-page .rock-band-card.band-card-visual .rock-band-content,
#bandas-page .rock-band-card.band-card-visual .rock-band-content {
  position: relative; z-index: 3; width: 100%;
}
#inicio-page .rock-band-card.band-card-visual .rock-band-tag,
#bandas-page .rock-band-card.band-card-visual .rock-band-tag {
  display: block; margin: 0 0 8px; color: #ff4b00; font-size: .72rem;
  line-height: 1.25; letter-spacing: .16em; font-weight: 900; text-transform: uppercase;
}
#inicio-page .rock-band-card.band-card-visual .rock-band-content h3,
#bandas-page .rock-band-card.band-card-visual .rock-band-content h3 {
  margin: 0 0 9px; max-width: 100%; color: #fff;
  font-size: clamp(1.55rem,2.3vw,2.35rem); line-height: 1.02;
  letter-spacing: -.025em; text-transform: uppercase; display: -webkit-box;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}
#inicio-page .rock-band-card.band-card-visual.band-name-medium .rock-band-content h3,
#bandas-page .rock-band-card.band-card-visual.band-name-medium .rock-band-content h3 {
  font-size: clamp(1.35rem,2vw,1.9rem);
}
#inicio-page .rock-band-card.band-card-visual.band-name-long .rock-band-content h3,
#bandas-page .rock-band-card.band-card-visual.band-name-long .rock-band-content h3 {
  font-size: clamp(1.15rem,1.7vw,1.6rem);
}
#inicio-page .rock-band-card.band-card-visual .rock-band-content p,
#bandas-page .rock-band-card.band-card-visual .rock-band-content p {
  color: #d2d2d2; max-width: 100%; margin: 0 0 18px;
  font-size: .9rem; line-height: 1.4;
}
#inicio-page .rock-band-card.band-card-visual .rock-band-link,
#bandas-page .rock-band-card.band-card-visual .rock-band-link {
  display: inline-block; color: #fff; font-size: .76rem; font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase;
}
#inicio-page .rock-band-card.band-card-visual .rock-band-link strong,
#bandas-page .rock-band-card.band-card-visual .rock-band-link strong {
  color: #ff4b00; font-size: 1rem; margin-left: 5px;
}
#inicio-page .rock-band-card.band-card-visual:hover,
#bandas-page .rock-band-card.band-card-visual:hover {
  transform: translateY(-4px); border-color: rgba(255,75,0,.65);
}
@media(max-width:1050px) {
  #inicio-page .rock-band-card.band-card-visual,
  #bandas-page .rock-band-card.band-card-visual { min-height: 265px; }
}
@media(max-width:650px) {
  #inicio-page .rock-band-card.band-card-visual,
  #bandas-page .rock-band-card.band-card-visual { min-height: 235px; padding: 14px; }
  #inicio-page .rock-band-card.band-card-visual .rock-band-card-logo,
  #bandas-page .rock-band-card.band-card-visual .rock-band-card-logo { top: 18px; height: 105px; width: 78%; }
  #inicio-page .rock-band-card.band-card-visual .rock-band-number,
  #bandas-page .rock-band-card.band-card-visual .rock-band-number { top: 12px; left: 13px; font-size: .65rem; }
  #inicio-page .rock-band-card.band-card-visual .rock-band-content h3,
  #bandas-page .rock-band-card.band-card-visual .rock-band-content h3 { font-size: 1.25rem; }
  #inicio-page .rock-band-card.band-card-visual .rock-band-content p,
  #bandas-page .rock-band-card.band-card-visual .rock-band-content p { font-size: .72rem; margin-bottom: 12px; }
}


/* AJUSTE DEFINITIVO EXCLUSIVO DE BANDAS:
   el logo ocupa toda la tarjeta, sin deformarse y con 50% de opacidad.
   La versión nueva en bandas.php evita reutilizar la hoja CSS en caché. */
#bandas-page .rock-band-card.band-card-visual::before {
  background-image: var(--band-card-background, none) !important;
}

#bandas-page .rock-band-card.band-card-visual .rock-band-card-logo {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  z-index: 2 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

#bandas-page .rock-band-card.band-card-visual .rock-band-card-logo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: .5 !important;
  filter: none !important;
}

#bandas-page .rock-band-card.band-card-visual::before {
  z-index: 0 !important;
}

#bandas-page .rock-band-card.band-card-visual::after {
  z-index: 1 !important;
}

#bandas-page .rock-band-card.band-card-visual .rock-band-content,
#bandas-page .rock-band-card.band-card-visual .rock-band-number {
  position: relative;
  z-index: 3 !important;
}


/* Ajuste solicitado: logos mas oscuros, numeracion en el marco superior y textos mayores.
   Exclusivo de la pagina BANDAS; no altera las tarjetas de INICIO. */
#bandas-page .rock-band-card.band-card-visual .rock-band-card-logo img {
  opacity: .60 !important;
  filter: brightness(.50) !important;
}

#bandas-page .rock-band-card.band-card-visual .rock-band-number {
  position: absolute !important;
  top: 22px !important;
  left: 24px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 5 !important;
  display: block !important;
  margin: 0 !important;
}

#bandas-page .rock-band-card.band-card-visual .rock-band-content h3 {
  font-size: calc(clamp(1.86rem, 2.7vw, 2.75rem) + 2pt) !important;
}

#bandas-page .rock-band-card.band-card-visual.band-name-medium .rock-band-content h3 {
  font-size: calc(clamp(1.66rem, 2.4vw, 2.25rem) + 2pt) !important;
}

#bandas-page .rock-band-card.band-card-visual.band-name-long .rock-band-content h3 {
  font-size: calc(clamp(1.46rem, 2.1vw, 1.98rem) + 2pt) !important;
}

#bandas-page .rock-band-card.band-card-visual .rock-band-tag {
  font-size: .8rem !important;
}

#bandas-page .rock-band-card.band-card-visual .rock-band-content p {
  font-size: .98rem !important;
}

#bandas-page .rock-band-card.band-card-visual .rock-band-link {
  font-size: .84rem !important;
}

@media(max-width:650px) {
  #bandas-page .rock-band-card.band-card-visual .rock-band-number {
    top: 12px !important;
    left: 13px !important;
    right: auto !important;
    bottom: auto !important;
  }
  #bandas-page .rock-band-card.band-card-visual .rock-band-content h3 {
    font-size: calc(1.54rem + 2pt) !important;
  }
  #bandas-page .rock-band-card.band-card-visual .rock-band-content p {
    font-size: .78rem !important;
  }
}