*{box-sizing:border-box}
html,body{margin:0;min-height:100%;width:100%;font-family:Montserrat,Arial,sans-serif}
body{
  min-height:100vh;
  background:#101b2b url("img/fondo.jpg") center center/cover fixed no-repeat;
  color:#fff;overflow:hidden;
}
.overlay{
  position:fixed;inset:0;
  background:linear-gradient(180deg,rgba(0,20,45,.24),rgba(0,22,42,.54));
}
.overlay:after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 35%,rgba(0,155,235,.16),transparent 35%),
             linear-gradient(90deg,rgba(0,0,0,.15),transparent 45%,rgba(0,0,0,.22));
}
.landing{min-height:100vh;position:relative;z-index:2;display:grid;place-items:center;padding:30px 18px}
.content{width:min(760px,100%);display:flex;flex-direction:column;align-items:center}
.logo{
  width:min(540px,88vw);max-height:330px;object-fit:contain;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.48));
  animation:logoIn .7s ease-out both;
}
.socials{
  display:flex;align-items:center;justify-content:center;gap:10px;margin:16px 0 22px;
  animation:fadeIn .8s .15s both;
}
.socials a{
  width:43px;height:43px;border-radius:50%;display:grid;place-items:center;
  color:#fff;text-decoration:none;font-size:18px;
  box-shadow:0 7px 18px rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.35);
  transition:.2s transform,.2s filter;
}
.socials a:hover{transform:translateY(-4px) scale(1.04);filter:brightness(1.12)}
.facebook{background:#1d4f98}.instagram{background:linear-gradient(135deg,#7b2cff,#f32172,#ff9a00)}
.youtube{background:#e51e2a}.whatsapp{background:#16b83a}.googleplay{background:#151922}

.player{
  width:min(680px,96vw);padding:15px 18px 12px;border-radius:20px;
  background:rgba(6,17,34,.82);border:1px solid rgba(255,255,255,.25);
  box-shadow:0 20px 50px rgba(0,0,0,.38);backdrop-filter:blur(12px);
  animation:fadeUp .8s .25s both;
}
.live{font-size:10px;font-weight:900;letter-spacing:1.4px;margin-bottom:10px;color:#fff}
.live span{display:inline-block;width:8px;height:8px;background:#ff3322;border-radius:50%;margin-right:6px;animation:pulse 1s infinite}
.player-main{display:flex;align-items:center;gap:13px}
.play{
  flex:0 0 52px;width:52px;height:52px;border:0;border-radius:50%;cursor:pointer;
  background:linear-gradient(135deg,#0ab0ee,#72df00);color:#07131e;font-size:18px;
  box-shadow:0 0 0 5px rgba(8,170,235,.12)
}
.station{flex:1;min-width:0}
.station strong{display:block;font-size:15px;font-weight:900}
.station span{display:block;margin-top:4px;font-size:9px;letter-spacing:.7px;opacity:.68;font-weight:700}
.volume{display:flex;align-items:center;gap:8px}
.volume i{font-size:13px;opacity:.75}
.volume input{width:85px;accent-color:#0aaeee}
.bars{height:25px;display:flex;align-items:end;justify-content:center;gap:4px;margin-top:8px}
.bars i{width:4px;height:8px;border-radius:4px;background:#0aaeee;animation:eq .65s infinite alternate}
.bars i:nth-child(2){height:16px;animation-delay:.08s}.bars i:nth-child(3){height:11px;animation-delay:.16s}
.bars i:nth-child(4){height:21px;animation-delay:.24s}.bars i:nth-child(5){height:13px;animation-delay:.32s}
.bars i:nth-child(6){height:18px;animation-delay:.4s}.bars i:nth-child(7){height:9px;animation-delay:.48s}
.bars i:nth-child(8){height:20px;animation-delay:.56s}.bars i:nth-child(9){height:13px;animation-delay:.64s}
.bars i:nth-child(10){height:17px;animation-delay:.72s}.bars i:nth-child(11){height:10px;animation-delay:.8s}
.bars i:nth-child(12){height:19px;animation-delay:.88s}
.hint{margin-top:15px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;text-shadow:0 2px 7px #000;opacity:.78}
@keyframes pulse{50%{transform:scale(.55);opacity:.45}}
@keyframes eq{to{transform:scaleY(.35)}}
@keyframes logoIn{from{opacity:0;transform:scale(.9) translateY(15px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(max-width:600px){
  body{overflow:auto}
  .landing{padding:22px 12px}
  .logo{width:min(420px,94vw);max-height:300px}
  .socials{gap:8px;margin:10px 0 18px}
  .socials a{width:40px;height:40px;font-size:16px}
  .player{width:100%;padding:13px 13px 10px}
  .volume{display:none}
  .station strong{font-size:13px}
  .station span{font-size:8px}
  .hint{margin-top:12px}
}