/* =====================================================================
   ALLEN NÚÑEZ & BANDALOVES — Sistema de diseño
   Paleta: noche de tarima morada + luces fucsia / oro / turquesa
   Tipografía: Anton (titulares tipo cartel) + Poppins (cuerpo)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap');

:root{
  --bg-night:#170B2E;
  --bg-night-2:#20103C;
  --bg-panel:#2A1650;
  --accent-fuchsia:#FF2E88;
  --accent-fuchsia-soft:#ff2e8833;
  --accent-gold:#FFC93C;
  --accent-teal:#00D9C0;
  --text-cream:#F7EFE3;
  --text-muted:#C6B6DE;
  --border-soft:#ffffff1a;

  --font-display:'Anton', 'Impact', sans-serif;
  --font-body:'Poppins', sans-serif;

  --radius-lg:26px;
  --radius-md:16px;
  --radius-sm:10px;

  --container:1180px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:
    radial-gradient(1100px 600px at 85% -10%, #3a1a63 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 20%, #0e2a3d 0%, transparent 55%),
    var(--bg-night);
  color:var(--text-cream);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }

::selection{ background:var(--accent-fuchsia); color:var(--bg-night); }

:focus-visible{
  outline:3px solid var(--accent-teal);
  outline-offset:3px;
  border-radius:4px;
}

.contenedor{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

.eyebrow{
  font-family:var(--font-body);
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.78rem;
  color:var(--accent-gold);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:26px;
  height:2px;
  background:var(--accent-gold);
  display:inline-block;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:.01em;
  text-transform:uppercase;
  line-height:1.05;
  margin:0;
}

h1{ font-size:clamp(2.6rem, 6.5vw, 5.2rem); }
h2{ font-size:clamp(1.9rem, 4vw, 2.9rem); }
h3{ font-size:1.25rem; text-transform:none; font-family:var(--font-body); font-weight:700; }

p{ margin:0; color:var(--text-muted); }

.boton{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 28px;
  border-radius:999px;
  font-weight:700;
  font-size:.95rem;
  border:2px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.boton-primario{
  background:linear-gradient(100deg, var(--accent-fuchsia), #ff5fa3);
  color:#1a0a10;
  box-shadow:0 10px 26px -8px var(--accent-fuchsia-soft);
}
.boton-primario:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -8px var(--accent-fuchsia-soft); }
.boton-secundario{
  border-color:var(--border-soft);
  color:var(--text-cream);
  background:#ffffff0d;
}
.boton-secundario:hover{ border-color:var(--accent-teal); color:var(--accent-teal); }

/* ---------------------------- NAV ---------------------------- */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:#170B2Ecc;
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
}
.nav-fila{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:8px 24px;
}
.nav-logo{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:1.15rem;
  letter-spacing:.02em;
  display:flex;
  flex-direction:column;
  line-height:1;
}
.nav-logo span{
  font-family:var(--font-body);
  font-weight:600;
  text-transform:none;
  font-size:.62rem;
  letter-spacing:.2em;
  color:var(--accent-teal);
  margin-top:4px;
}
.nav-logo b{ color:var(--accent-gold); }

.nav-logo-img{
  display:block;
  height:88px;
  width:auto;
}
@media (max-width:600px){
  .nav-logo-img{ height:60px; }
}

.nav-links{
  display:flex;
  align-items:center;
  gap:6px;
}
.nav-links a{
  padding:10px 14px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--text-muted);
  transition:color .15s ease, background .15s ease;
}
.nav-links a:hover{ color:var(--text-cream); background:#ffffff0f; }
.nav-links a.activo{ color:var(--bg-night); background:var(--accent-gold); }

.nav-derecha{ display:flex; align-items:center; gap:10px; }

.nav-buscar{ position:relative; }
.nav-buscar-boton{
  width:42px; height:42px;
  border-radius:50%;
  border:1px solid var(--border-soft);
  background:#ffffff0d;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-cream);
  transition:background .15s ease, border-color .15s ease;
}
.nav-buscar-boton:hover{ border-color:var(--accent-teal); }
.nav-buscar-boton svg{ width:18px; height:18px; stroke:currentColor; }

.nav-buscar-form{
  position:absolute;
  right:0;
  top:52px;
  display:flex;
  gap:8px;
  background:var(--bg-panel);
  border:1px solid var(--border-soft);
  padding:10px;
  border-radius:14px;
  box-shadow:0 20px 40px -14px #000000aa;
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  width:min(78vw, 300px);
}
.nav-buscar-form.abierto{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.nav-buscar-form input{
  flex:1;
  background:var(--bg-night);
  border:1px solid var(--border-soft);
  border-radius:8px;
  padding:10px 12px;
  color:var(--text-cream);
  font-family:var(--font-body);
  font-size:.9rem;
}
.nav-buscar-form button{
  background:var(--accent-fuchsia);
  color:#1a0a10;
  border:none;
  border-radius:8px;
  padding:0 14px;
  font-weight:700;
}

.nav-toggle{
  display:none;
  width:42px; height:42px;
  border-radius:50%;
  border:1px solid var(--border-soft);
  background:#ffffff0d;
  color:var(--text-cream);
  align-items:center;
  justify-content:center;
}
.nav-toggle svg{ width:20px; height:20px; stroke:currentColor; }

@media (max-width:860px){
  .nav-links{
    position:fixed;
    inset:70px 16px auto 16px;
    flex-direction:column;
    align-items:stretch;
    background:var(--bg-panel);
    border:1px solid var(--border-soft);
    border-radius:16px;
    padding:10px;
    display:none;
    box-shadow:0 20px 40px -14px #000000aa;
  }
  .nav-links.abierto{ display:flex; }
  .nav-links a{ text-align:center; padding:12px; }
  .nav-toggle{ display:flex; }
}

/* ------------------------- MARQUESINA (elemento firma) ------------------------- */
.marquesina{
  position:relative;
  border-radius:var(--radius-lg);
  padding:3px;
  background:linear-gradient(135deg, var(--accent-gold), var(--accent-fuchsia) 45%, var(--accent-teal));
  overflow:hidden;
}
.marquesina::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle, #fff9 2.5px, transparent 3px);
  background-size:26px 26px;
  animation:foquitos 1.4s steps(2) infinite;
  opacity:.9;
}
@keyframes foquitos{
  0%{ background-position:0 0; }
  100%{ background-position:26px 0; }
}
@media (prefers-reduced-motion: reduce){
  .marquesina::before{ animation:none; }
}
.marquesina-interior{
  position:relative;
  background:linear-gradient(180deg, var(--bg-night-2), var(--bg-night));
  border-radius:calc(var(--radius-lg) - 3px);
  padding:clamp(36px, 6vw, 72px);
}

/* ------------------------- HERO FOTOGRÁFICO (portada) ------------------------- */
.hero-foto{
  position:relative;
  height:min(80vh, 660px);
  min-height:520px;
  overflow:hidden;
  background-image:url('../img/fondobanda.png');
  background-size:cover;
  background-position:center 38%;
  display:flex;
  align-items:center;
}
.hero-foto::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(100deg, #0c0616b3 0%, #0c061694 20%, #0c061658 38%, #0c061626 54%, transparent 68%),
    linear-gradient(to top, #0c061680 0%, transparent 26%);
  z-index:1;
}
.hero-foto-cantantes{
  position:absolute;
  right:clamp(-10px, 1vw, 20px);
  bottom:0;
  height:100%;
  width:auto;
  max-width:46%;
  object-fit:contain;
  object-position:bottom;
  filter:drop-shadow(-18px 22px 30px #00000066);
  z-index:2;
}
.hero-foto .contenedor{
  max-width:1400px;
  margin-left:0;
  margin-right:auto;
  padding-left:clamp(20px, 4vw, 56px);
}
.hero-foto-contenido{
  position:relative;
  z-index:3;
  max-width:520px;
  padding:40px 0;
}
.hero-foto-contenido h1,
.hero-foto-contenido p.lead{
  text-shadow:0 4px 20px #00000099;
}
.hero-foto-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#00000059;
  border:1px solid #ffffff33;
  backdrop-filter:blur(6px);
  padding:9px 18px 9px 10px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:600;
  color:var(--text-cream);
  margin-bottom:20px;
}
.hero-foto-badge .punto{
  width:26px; height:26px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--accent-fuchsia), var(--accent-gold));
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem;
  flex-shrink:0;
}
.hero-foto-contenido h1{
  font-size:clamp(2.1rem, 4.6vw, 3.6rem);
  color:var(--text-cream);
}
.hero-foto-contenido h1 .resaltado{ color:var(--accent-teal); }
.hero-foto-contenido p.lead{
  color:var(--text-cream);
  opacity:.88;
  font-size:1.02rem;
  max-width:44ch;
  margin-top:18px;
}
.hero-foto-acciones{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }

@media (max-width:760px){
  .hero-foto{ height:auto; min-height:0; padding-bottom:46vw; }
  .hero-foto-cantantes{ max-width:62%; right:-6px; opacity:.9; }
  .hero-foto-contenido{ max-width:100%; padding:36px 0 28px; }
}
@media (max-width:520px){
  .hero-foto-cantantes{ max-width:78%; opacity:.55; }
}

/* ------------------------------ HERO (marquesina, usado en otras piezas) ------------------------------ */
.hero{ padding:52px 0 40px; }
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .8fr;
  gap:48px;
  align-items:center;
}
.hero-texto p.lead{
  color:var(--text-cream);
  opacity:.85;
  font-size:1.05rem;
  max-width:46ch;
  margin-top:18px;
}
.hero-titulo{ margin-top:14px; }
.hero-titulo b{ color:var(--accent-teal); -webkit-text-stroke:0; }
.hero-acciones{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }

.hero-disco{
  position:relative;
  aspect-ratio:1/1;
  border-radius:50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, #ffffff12 0 2px, transparent 2px 10px),
    conic-gradient(from 90deg, var(--accent-fuchsia), var(--accent-gold), var(--accent-teal), var(--accent-fuchsia));
  display:flex;
  align-items:center;
  justify-content:center;
  animation:girar 14s linear infinite;
  box-shadow:0 30px 60px -20px #000000cc;
}
@media (prefers-reduced-motion: reduce){ .hero-disco{ animation:none; } }
@keyframes girar{ to{ transform:rotate(360deg); } }
.hero-disco-centro{
  width:30%;
  aspect-ratio:1/1;
  border-radius:50%;
  background:var(--bg-night);
  border:6px solid var(--bg-panel);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:var(--font-display);
  font-size:.85rem;
  letter-spacing:.05em;
  padding:8px;
}

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-disco{ max-width:260px; margin:0 auto; }
}

/* --------------------------- FRANJA / TICKER --------------------------- */
.franja{
  background:var(--accent-fuchsia);
  color:var(--bg-night);
  padding:14px 0;
  overflow:hidden;
  white-space:nowrap;
}
.franja-track{
  display:inline-flex;
  gap:40px;
  animation:desfile 22s linear infinite;
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:1rem;
  letter-spacing:.04em;
}
@keyframes desfile{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .franja-track{ animation:none; } }

/* ------------------------------ SECCIONES ------------------------------ */
.seccion{ padding:72px 0; }
.seccion-cabecera{ max-width:640px; margin-bottom:40px; }
.seccion-cabecera h2{ margin-top:14px; }
.seccion-cabecera p{ margin-top:14px; font-size:1.02rem; }
.seccion-pie{ margin-top:36px; }

.seccion-alterna{ background:var(--bg-night-2); border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); }

/* ------------------------------ TARJETAS ------------------------------ */
.rejilla{ display:grid; gap:22px; }
.rejilla-3{ grid-template-columns:repeat(3, 1fr); }
.rejilla-2{ grid-template-columns:repeat(2, 1fr); }
@media (max-width:900px){ .rejilla-3, .rejilla-2{ grid-template-columns:1fr; } }

.tarjeta{
  background:var(--bg-panel);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-md);
  padding:26px;
  transition:transform .18s ease, border-color .18s ease;
}
.tarjeta:hover{ transform:translateY(-4px); border-color:var(--accent-teal); }

.tarjeta-cancion{
  display:flex;
  align-items:center;
  gap:16px;
}
.tarjeta-cancion .num{
  font-family:var(--font-display);
  font-size:1.5rem;
  color:var(--accent-gold);
  width:40px;
  flex-shrink:0;
}
.tarjeta-cancion .info{ flex:1; min-width:0; }
.tarjeta-cancion .info h3{ margin:0 0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tarjeta-cancion .info span{ font-size:.82rem; color:var(--text-muted); }
.tarjeta-cancion .reproducir{
  width:46px; height:46px;
  border-radius:50%;
  background:var(--accent-fuchsia);
  color:#1a0a10;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.tarjeta-cancion .reproducir svg{ width:18px; height:18px; }

.etiqueta{
  display:inline-block;
  background:#ffffff14;
  color:var(--accent-teal);
  border-radius:999px;
  padding:4px 12px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-top:8px;
}

/* -------------------------- BUSCADOR DE CANCIONES -------------------------- */
.buscador-canciones{
  display:flex;
  gap:12px;
  background:var(--bg-panel);
  border:1px solid var(--border-soft);
  border-radius:14px;
  padding:8px;
  margin-bottom:30px;
  max-width:520px;
}
.buscador-canciones svg{ width:20px; height:20px; margin:0 4px 0 8px; align-self:center; color:var(--accent-gold); flex-shrink:0; }
.buscador-canciones input{
  flex:1;
  background:transparent;
  border:none;
  color:var(--text-cream);
  font-family:var(--font-body);
  font-size:1rem;
  padding:10px 0;
}
.buscador-canciones input:focus{ outline:none; }

#sin-resultados{ display:none; color:var(--text-muted); margin-top:10px; }
#sin-resultados.visible{ display:block; }

/* ------------------------------ FRANJA DE VALORES / STATS ------------------------------ */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.stats div b{ display:block; font-family:var(--font-display); font-size:2.2rem; color:var(--accent-gold); }
.stats div span{ color:var(--text-muted); font-size:.85rem; }
@media (max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr); } }

/* ------------------------------ EVENTOS ------------------------------ */
.evento-tipo{
  display:flex;
  gap:18px;
  align-items:flex-start;
  padding:22px 0;
  border-bottom:1px solid var(--border-soft);
}
.evento-tipo:last-child{ border-bottom:none; }
.evento-tipo .icono{
  width:50px; height:50px;
  border-radius:14px;
  background:linear-gradient(135deg, var(--accent-fuchsia), var(--accent-gold));
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  color:#1a0a10;
}
.evento-tipo .icono svg{ width:24px; height:24px; }

.cta-banda{
  text-align:center;
  padding:64px 24px;
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg, #2a1650, #3a1450);
  border:1px solid var(--border-soft);
}
.cta-banda h2{ margin-bottom:16px; }
.cta-banda p{ max-width:52ch; margin:0 auto 26px; }

/* ------------------------------ FORMULARIO CONTACTO ------------------------------ */
.form-contacto{ display:grid; gap:16px; max-width:560px; }
.campo{ display:grid; gap:8px; }
.campo label{ font-size:.85rem; font-weight:600; color:var(--text-cream); }
.campo input, .campo textarea{
  background:var(--bg-panel);
  border:1px solid var(--border-soft);
  border-radius:10px;
  padding:12px 14px;
  color:var(--text-cream);
  font-family:var(--font-body);
  font-size:.95rem;
  resize:vertical;
}
.campo input:focus, .campo textarea:focus{ outline:none; border-color:var(--accent-teal); }

.contacto-directo{ display:grid; gap:18px; }
.contacto-directo a{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--bg-panel);
  border:1px solid var(--border-soft);
  border-radius:14px;
  padding:16px 18px;
  transition:border-color .15s ease;
}
.contacto-directo a:hover{ border-color:var(--accent-teal); }
.contacto-directo .icono{
  width:42px; height:42px;
  border-radius:50%;
  background:#ffffff14;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.contacto-directo .icono svg{ width:20px; height:20px; color:var(--accent-gold); }

/* ------------------------------ FOOTER ------------------------------ */
footer{
  border-top:1px solid var(--border-soft);
  padding:48px 0 28px;
  margin-top:40px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:32px;
  margin-bottom:32px;
}
.footer-grid h3{ margin-bottom:14px; }
.footer-grid ul li{ margin-bottom:10px; }
.footer-grid ul a{ color:var(--text-muted); transition:color .15s ease; }
.footer-grid ul a:hover{ color:var(--accent-teal); }
.footer-redes{ display:flex; gap:10px; margin-top:14px; }
.footer-redes a{
  width:38px; height:38px;
  border-radius:50%;
  background:#ffffff14;
  display:flex; align-items:center; justify-content:center;
}
.footer-redes a svg{ width:17px; height:17px; }
.footer-base{
  border-top:1px solid var(--border-soft);
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  font-size:.8rem;
  color:var(--text-muted);
}
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; } }

/* ------------------------------ PÁGINA INTERIOR (encabezado simple) ------------------------------ */
.pagina-cabecera{ padding:56px 0 20px; }
.pagina-cabecera h1{ margin-top:14px; }
.pagina-cabecera p{ margin-top:16px; max-width:60ch; font-size:1.05rem; }