:root{
  --navy:#0d2a5c;
  --navy-deep:#081b3d;
  --cyan:#28a9f5;
  --cyan-soft:#6cc9ff;
  --ink:#0b1e3f;
  --paper:#f4f8fd;
  --card:#ffffff;
  --line:rgba(13,42,92,.10);
  --muted:#5c7099;
  --shadow:0 18px 50px -18px rgba(13,42,92,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  min-height:100dvh;
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--paper);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 20px;
  position:relative;
  overflow-x:hidden;
}

/* halo de color detrás del contenido */
.glow{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(680px 420px at 50% -10%, rgba(40,169,245,.18), transparent 70%),
    radial-gradient(520px 380px at 85% 105%, rgba(13,42,92,.12), transparent 70%);
}

.wrap{
  position:relative;
  z-index:1;
  width:100%;
  max-width:560px;
  text-align:center;
}

.logo{
  width:min(78%,380px);
  height:auto;
  margin:0 auto;
  display:block;
}

.tagline{
  margin:4px 0 28px;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- player ---------- */
.player{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:20px;
  display:flex;
  align-items:center;
  gap:18px;
  text-align:left;
}

.play{
  flex:0 0 auto;
  position:relative;
  width:74px;
  height:74px;
  border:0;
  border-radius:50%;
  cursor:pointer;
  color:#fff;
  background:linear-gradient(145deg,var(--cyan-soft),var(--cyan) 45%,var(--navy));
  box-shadow:0 10px 26px -8px rgba(40,169,245,.75);
  display:grid;
  place-items:center;
  transition:transform .15s ease, box-shadow .15s ease;
}
.play:hover{transform:scale(1.05)}
.play:active{transform:scale(.97)}
.play:focus-visible{outline:3px solid var(--navy);outline-offset:3px}

.play svg{width:30px;height:30px;fill:currentColor;grid-area:1/1}
.ico-play{margin-left:4px}
.ico-pause,.spinner{display:none}

/* estados del botón */
.play.is-playing .ico-play{display:none}
.play.is-playing .ico-pause{display:block}

.play.is-loading .ico-play,
.play.is-loading .ico-pause{visibility:hidden}
.play.is-loading .spinner{
  display:block;
  grid-area:1/1;
  width:28px;height:28px;
  border:3px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* anillo pulsante mientras suena */
.play.is-playing::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:2px solid var(--cyan);
  animation:pulse 1.9s ease-out infinite;
}
@keyframes pulse{
  0%{transform:scale(.95);opacity:.8}
  100%{transform:scale(1.25);opacity:0}
}

.meta{flex:1 1 auto;min-width:0}

.status{
  margin:0;
  display:flex;
  align-items:center;
  gap:7px;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.dot{
  width:8px;height:8px;border-radius:50%;
  background:#c3cfe2;
  flex:0 0 auto;
}
.status.live .dot{background:#ff3b3b;box-shadow:0 0 0 0 rgba(255,59,59,.6);animation:blink 1.6s ease-out infinite}
.status.live{color:#ff3b3b}
@keyframes blink{70%{box-shadow:0 0 0 8px rgba(255,59,59,0)}100%{box-shadow:0 0 0 0 rgba(255,59,59,0)}}

.now{
  margin:2px 0 12px;
  font-size:1.05rem;
  font-weight:800;
  color:var(--navy);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

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

.mute{
  width:32px;height:32px;
  border:0;background:transparent;padding:0;
  cursor:pointer;color:var(--navy);
  display:grid;place-items:center;
  border-radius:8px;
}
.mute:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.mute svg{
  width:20px;height:20px;grid-area:1/1;
  fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}
.ico-muted{display:none}
.mute.is-muted .ico-vol{display:none}
.mute.is-muted .ico-muted{display:block}
.mute.is-muted{color:var(--muted)}

.slider{
  -webkit-appearance:none;appearance:none;
  flex:1 1 auto;
  height:6px;border-radius:99px;
  background:linear-gradient(var(--cyan),var(--cyan)) 0/var(--fill,80%) 100% no-repeat, #e3eaf5;
  cursor:pointer;
}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;border-radius:50%;
  background:#fff;border:3px solid var(--cyan);
  box-shadow:0 2px 6px rgba(13,42,92,.3);
}
.slider::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;
  background:#fff;border:3px solid var(--cyan);
}
.slider:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

.err{
  margin:14px 0 0;
  font-size:.85rem;
  font-weight:600;
  color:#c62828;
  background:#fdeaea;
  border-radius:10px;
  padding:10px 12px;
}

/* ---------- redes ---------- */
.social{
  margin:26px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}
.social a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:99px;
  font-size:.82rem;
  font-weight:600;
  text-decoration:none;
  color:var(--navy);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 6px 18px -12px rgba(13,42,92,.5);
  transition:transform .15s ease, color .15s ease, border-color .15s ease;
}
.social a:hover{transform:translateY(-2px);border-color:var(--cyan);color:var(--cyan)}
.social svg{
  width:17px;height:17px;
  fill:currentColor;stroke:none;
}
.btn-ig svg{fill:none;stroke:currentColor;stroke-width:1.8}

.foot{
  margin:34px 0 0;
  font-size:.75rem;
  line-height:1.7;
  color:var(--muted);
}
.foot p{margin:0}
.foot a{color:var(--muted)}

@media (max-width:420px){
  .player{flex-direction:column;text-align:center;gap:14px}
  .meta{width:100%}
  .status{justify-content:center}
  .now{white-space:normal}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}