@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&display=swap');

:root {
  --bg: #141233;
  --bg2: #1d1a47;
  --bg3: #2a2660;
  --cream: #fff6e6;
  --cream2: #e9dcc4;
  --muted: #a29fcf;
  --red: #e2322b;
  --red2: #a81f1a;
  --gold: #ffc93c;
  --green: #2bc275;
  --font: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  background-image: radial-gradient(circle at 50% -20%, #2e2a73 0%, transparent 55%);
  color: var(--cream);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.35;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.02em; line-height: 1; }

button {
  font-family: var(--font);
  font-weight: 800;
  font-size: 16px;
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  cursor: pointer;
  background: var(--cream);
  color: var(--bg);
  transition: transform .08s, opacity .15s;
}
button:active { transform: scale(.97); }
button:disabled { opacity: .35; cursor: default; }
button.red { background: var(--red); color: var(--cream); }
button.gold { background: var(--gold); color: var(--bg); }
button.ghost { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 2px rgba(255, 246, 230, .35); }

input, select {
  font-family: var(--font);
  font-size: 17px;
  width: 100%;
  padding: 13px 16px;
  border-radius: 14px;
  border: 2px solid transparent;
  background: var(--cream);
  color: var(--bg);
  outline: none;
}
input:focus { border-color: var(--gold); }

.card { background: var(--bg2); border-radius: 22px; padding: 20px; }
.label { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.row { display: flex; gap: 10px; align-items: center; }
.grow { flex: 1; }
.hidden { display: none !important; }
.dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.bar > i { display: block; height: 100%; width: 100%; background: var(--gold); transform-origin: left; border-radius: 99px; }

/* Ecualizador animado */
.eq { display: flex; gap: 8px; align-items: flex-end; justify-content: center; height: 120px; }
.eq span { width: 16px; background: var(--gold); border-radius: 8px; animation: eq 1s ease-in-out infinite; }
.eq span:nth-child(2n) { background: var(--red); animation-duration: .8s; }
.eq span:nth-child(3n) { background: var(--cream); animation-duration: 1.2s; }
.eq span:nth-child(1) { animation-delay: -.2s; } .eq span:nth-child(2) { animation-delay: -.5s; } .eq span:nth-child(3) { animation-delay: -.1s; }
.eq span:nth-child(4) { animation-delay: -.7s; } .eq span:nth-child(5) { animation-delay: -.3s; } .eq span:nth-child(6) { animation-delay: -.9s; }
.eq span:nth-child(7) { animation-delay: -.4s; }
@keyframes eq { 0%, 100% { height: 18%; } 50% { height: 100%; } }
.eq.paused span { animation-play-state: paused; opacity: .4; }