/* Radio Manizales Player PRO v1.0 */
:root{
 --primary:#1e88e5;
 --bg:#071526;
 --glass:rgba(255,255,255,.10);
 --border:rgba(255,255,255,.18);
 --text:#fff;
 --muted:#cfd3d8;
 --radius:24px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
 font-family:"Poppins",system-ui,sans-serif;
 color:var(--text);
 background:linear-gradient(135deg,#071526,#0d47a1);
 overflow:hidden;
}
.background{
 position:fixed;inset:0;
 background:url("fondo.png") center/cover no-repeat;
 transform:scale(1.05);
 filter:blur(3px);
}
.overlay{
 position:fixed;inset:0;
 background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.75));
}
.player{
 position:relative;
 z-index:2;
 min-height:100vh;
 display:grid;
 place-items:center;
 padding:24px;
}
.glass{
 width:min(460px,100%);
 background:var(--glass);
 border:1px solid var(--border);
 backdrop-filter:blur(18px);
 border-radius:var(--radius);
 padding:32px;
 text-align:center;
 box-shadow:0 20px 60px rgba(0,0,0,.45);
}
#logo{max-width:220px;width:70%;display:block;margin:0 auto 18px}
h1{margin:.2rem 0;font-size:2rem}
.slogan{color:var(--muted);margin:0 0 20px}
.live{display:inline-flex;align-items:center;gap:8px;background:#0d3b66;padding:8px 14px;border-radius:999px;font-weight:600}
.dot{width:10px;height:10px;border-radius:50%;background:#ff3b3b;animation:pulse 1.4s infinite}
#playButton{
 margin:28px auto 16px;
 width:170px;height:170px;border-radius:50%;
 border:none;cursor:pointer;
 background:linear-gradient(180deg,#42a5f5,#1565c0);
 color:#fff;font-size:1.2rem;font-weight:700;
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:10px;
 transition:.25s transform,.25s box-shadow;
 box-shadow:0 10px 30px rgba(198,40,40,.45);
}
#playButton:hover{transform:scale(1.04)}
#playButton i{font-size:3rem}
#status{margin:12px 0;color:var(--muted)}
.equalizer{height:48px;display:flex;justify-content:center;align-items:flex-end;gap:6px;margin:20px 0}
.equalizer span{
 width:8px;height:16px;background:var(--primary);border-radius:99px;
 animation:eq 1s infinite ease-in-out;
}
.equalizer span:nth-child(2){animation-delay:.15s}
.equalizer span:nth-child(3){animation-delay:.3s}
.equalizer span:nth-child(4){animation-delay:.45s}
.equalizer span:nth-child(5){animation-delay:.6s}
.social{display:flex;justify-content:center;gap:18px;margin-top:20px}
.social a{
 width:46px;height:46px;border-radius:50%;
 display:grid;place-items:center;
 text-decoration:none;color:#fff;
 background:rgba(255,255,255,.08);
 border:1px solid rgba(255,255,255,.12);
 transition:.2s;
}
.social a:hover{background:var(--primary);transform:translateY(-3px)}
@keyframes pulse{50%{transform:scale(1.35);opacity:.4}}
@keyframes eq{
0%,100%{height:12px}
25%{height:38px}
50%{height:22px}
75%{height:46px}
}
@media (max-width:600px){
 .glass{padding:22px}
 #playButton{width:140px;height:140px}
 h1{font-size:1.7rem}
}