:root{
  --psy-accent-1:#ff8f1f;
  --psy-accent-2:#ff4f9c;
  --psy-accent-3:#00c9c8;
  --psy-accent-4:#ffd166;
}

body{
  background:
    radial-gradient(circle at 12% 8%, #ff8f1f22 0, transparent 25%),
    radial-gradient(circle at 88% 82%, #ff4f9c20 0, transparent 30%),
    radial-gradient(circle at 80% 14%, #00c9c818 0, transparent 24%),
    var(--bg);
}

.hero{
  position:relative;
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0 0 0 auto;
  width:min(72%, 820px);
  background:url("assets/groove-instruments.svg") no-repeat right center / contain;
  filter:blur(3px);
  opacity:.22;
  z-index:0;
  pointer-events:none;
}

.hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:140px;
  background:linear-gradient(180deg, transparent, rgba(255,79,156,.08));
  z-index:0;
  pointer-events:none;
}

.hero .container{
  position:relative;
  z-index:1;
}

#catalogo,
#comunidad,
#espera{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

#catalogo::before,
#comunidad::before,
#espera::before{
  content:"";
  position:absolute;
  inset:-8%;
  z-index:-1;
  background:url("assets/groove-stage.svg") no-repeat 85% center / min(86%, 1100px);
  filter:blur(8px);
  opacity:.13;
  pointer-events:none;
}

#comunidad::before{
  background-image:url("assets/groove-instruments.svg");
  background-position:left center;
  background-size:min(75%, 900px);
  opacity:.12;
}

#espera::before{
  background-position:right 35%;
  opacity:.1;
}

.button-primary{
  background:linear-gradient(135deg,var(--psy-accent-1),var(--psy-accent-4));
  box-shadow:0 8px 25px #ff8f1f33;
}

.button-secondary,
.button-dark{
  border-color:#ffffff2f;
}

.brand-mark{
  background:linear-gradient(135deg,#ff4f9c2d,#ffd16636);
  box-shadow:inset 0 0 18px #ff8f1f2b;
}

.eyebrow{
  color:var(--psy-accent-4);
}

.feature-icon{
  background:linear-gradient(135deg,#ff8f1f33,#ff4f9c22,#00c9c81f);
}

.tags-wrap span{
  border-color:#ffffff2e;
  background:linear-gradient(135deg,#ff8f1f1e,#00c9c818);
  color:#f2efe8;
}

.player-window{
  background:
    radial-gradient(circle at 80% 0, #ff4f9c24, transparent 35%),
    radial-gradient(circle at 20% 100%, #00c9c81d, transparent 30%),
    linear-gradient(160deg,#171c22,#0b0d10);
}

.catalog-grid .song-card{
  box-shadow:0 8px 22px #00000030;
}

.section-light{
  background:
    radial-gradient(circle at 20% 0, #ff8f1f17, transparent 28%),
    radial-gradient(circle at 100% 100%, #00c9c812, transparent 24%),
    var(--cream);
}

#arena-bandas{
  position:relative;
}

#arena-bandas::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 15% 12%, #ff4f9c16, transparent 28%),
    radial-gradient(circle at 85% 82%, #ff8f1f14, transparent 30%),
    url("assets/groove-stage.svg") no-repeat 95% center / min(78%, 980px);
  filter:blur(7px);
  opacity:.72;
  pointer-events:none;
}

#arena-bandas .container{
  position:relative;
}

@media (prefers-reduced-motion:reduce){
  .button-primary{
    box-shadow:none;
  }
}

@media(max-width:820px){
  .hero::before{
    width:100%;
    background-position:center center;
    opacity:.11;
  }

  #catalogo::before,
  #comunidad::before,
  #espera::before{
    inset:0;
    background-position:center;
    background-size:cover;
    opacity:.08;
  }

  #arena-bandas::before{
    background-position:center;
    background-size:cover;
    opacity:.28;
  }
}