:root{
  --red:#ff2635;
  --red-dark:#a30812;
  --white:#f8f8f9;
  --black:#050609;
  --panel:rgba(8,9,13,.83);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#030406}
body{
  font-family:Arial,Helvetica,sans-serif;
  color:var(--white);
  background:#030406;
}
.shell{
  position:relative;
  width:100%;
  height:100dvh;
  overflow:hidden;
  background:
    linear-gradient(rgba(35,0,5,.10),rgba(0,0,0,.05)),
    url('../assets/background/studio-desktop.jpg') center center/cover no-repeat;
}

/* LOGO - proporción del modelo aprobado */
.brand-zone{
  position:absolute;
  left:4.7vw;
  top:10vh;
  width:clamp(210px,19.5vw,305px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  z-index:2;
}
.brand-zone::before{
  content:"";
  position:absolute;
  inset:2.5%;
  border-radius:50%;
  background:radial-gradient(circle,#07080a 0 70%,#0d0e12 71% 100%);
  border:3px solid rgba(255,255,255,.83);
  box-shadow:0 0 0 7px rgba(255,35,48,.95),inset 0 0 0 1px rgba(255,255,255,.06);
}
.station-logo{
  position:relative;
  z-index:1;
  width:91%;
  height:91%;
  object-fit:contain;
  filter:none;
}

/* REPRODUCTOR - tamaño y ubicación del modelo */
.player-zone{
  position:absolute;
  left:50%;
  top:68%;
  transform:translate(-50%,-50%);
  width:clamp(410px,30vw,500px);
  height:clamp(165px,20vh,200px);
  display:grid;
  grid-template-columns:1fr clamp(90px,6.4vw,108px) 1fr;
  grid-template-rows:1fr auto;
  align-items:center;
  column-gap:clamp(12px,1.45vw,20px);
  padding:15px 21px 16px;
  border-radius:32px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg,rgba(18,18,22,.79),rgba(5,6,9,.88));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  z-index:3;
}
.play-stop{border:0;background:none;padding:0;width:100%;aspect-ratio:1;cursor:pointer;filter:drop-shadow(0 15px 26px rgba(0,0,0,.72))}
.metal-ring{
  width:100%;height:100%;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 47% 42%,#1a1d23 0 53%,#07080a 54% 63%,#343840 64% 67%,#0f1116 68% 73%,var(--red) 74% 77%,#4d080c 78% 82%,#181a20 83% 100%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 0 23px #000,0 0 0 2px rgba(255,255,255,.06),0 0 28px rgba(255,40,56,.48),0 15px 28px rgba(0,0,0,.55)
}
.play-shape{width:0;height:0;border-top:22px solid transparent;border-bottom:22px solid transparent;border-left:36px solid #fff;margin-left:8px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.65))}
.play-stop.is-playing .play-shape{width:40px;height:40px;border:0;margin:0;background:#fff;border-radius:6px}
.meter{height:clamp(60px,7.6vh,76px);display:flex;align-items:center;justify-content:center;gap:clamp(5px,.48vw,8px);filter:drop-shadow(0 0 10px rgba(255,28,43,.36))}
.meter i{display:block;width:clamp(5px,.36vw,7px);border-radius:10px;background:linear-gradient(180deg,#fff 0 16%,#ff8188 33%,var(--red) 65%,var(--red-dark) 100%);box-shadow:0 0 10px rgba(255,28,43,.42);transform-origin:center}
.meter i:nth-child(1),.meter i:nth-child(9){height:25%}.meter i:nth-child(2),.meter i:nth-child(8){height:42%}.meter i:nth-child(3),.meter i:nth-child(7){height:62%}.meter i:nth-child(4),.meter i:nth-child(6){height:82%}.meter i:nth-child(5){height:100%}
.player-zone.playing .meter i{animation:vu .52s ease-in-out infinite alternate}.player-zone.playing .meter i:nth-child(2){animation-delay:.11s}.player-zone.playing .meter i:nth-child(3){animation-delay:.22s}.player-zone.playing .meter i:nth-child(4){animation-delay:.06s}.player-zone.playing .meter i:nth-child(6){animation-delay:.18s}.player-zone.playing .meter i:nth-child(7){animation-delay:.27s}
@keyframes vu{to{transform:scaleY(.46);opacity:.65}}
.volume-row{grid-column:1/-1;width:min(76%,350px);justify-self:center;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin-top:2px;font-size:14px;font-weight:700;color:#eee;text-shadow:0 2px 5px rgba(0,0,0,.75)}
.speaker{width:24px;height:24px;object-fit:contain;opacity:.96}
#volumeRange{appearance:none;width:100%;height:8px;border-radius:99px;background:linear-gradient(90deg,var(--red) 0 70%,#7b7f86 70% 100%);outline:none;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.35)}
#volumeRange::-webkit-slider-thumb{appearance:none;width:24px;height:24px;border-radius:50%;background:linear-gradient(#fff,#b5b8bf);border:2px solid #fff;box-shadow:0 0 0 2px rgba(255,255,255,.12),0 4px 12px rgba(0,0,0,.58)}
#volumeRange::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#eee;border:2px solid #fff}

/* REDES - proporción del modelo aprobado */
.social-zone{
  position:absolute;
  right:2.9vw;
  top:47.8%;
  transform:translateY(-50%);
  width:clamp(184px,13.2vw,220px);
  padding:20px 15px 13px;
  border:1px solid rgba(255,50,60,.72);
  border-radius:29px;
  background:linear-gradient(180deg,rgba(10,10,14,.87),rgba(5,6,9,.93));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  display:flex;flex-direction:column;align-items:center;gap:10px;z-index:4
}
.social-heading{position:relative;width:100%;text-align:center;padding:2px 0 19px;color:#f5f5f6}
.social-heading::after{content:"";position:absolute;left:30%;right:30%;bottom:4px;height:2px;background:var(--red);border-radius:4px}
.social-heading strong{display:block;font-size:clamp(13px,.95vw,16px);letter-spacing:.27em;font-weight:500}
.social-heading span{display:block;margin-top:8px;font-size:clamp(8px,.64vw,10px);letter-spacing:.22em;color:#cfd0d3}
.social-list{width:100%;display:flex;flex-direction:column;align-items:center;gap:9px}
.social-link{width:clamp(48px,3.55vw,56px);height:clamp(48px,3.55vw,56px);border-radius:50%;display:grid;place-items:center;text-decoration:none;background:#17191f;border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px rgba(255,255,255,.10),0 5px 13px rgba(0,0,0,.56);transition:transform .18s ease,border-color .18s ease}
.social-link:hover{transform:translateY(-2px) scale(1.03);border-color:rgba(255,41,53,.72)}
.social-link img{display:block;width:79%;height:79%;object-fit:contain}
.noesplay-link{width:100%;margin-top:3px;padding-top:13px;border-top:1px solid rgba(255,255,255,.18);display:flex;justify-content:center}
.noesplay-link img{display:block;width:76%;max-width:155px;height:auto;border-radius:10px}
.hidden{display:none!important}

/* TABLET */
@media (max-width:1080px){
  .shell{background-image:linear-gradient(rgba(35,0,5,.10),rgba(0,0,0,.05)),url('../assets/background/studio-tablet.jpg')}
  .brand-zone{left:3.5vw;top:7vh;width:clamp(180px,21vw,240px)}
  .player-zone{left:49%;top:69%;width:clamp(340px,38vw,420px);height:clamp(150px,18.5vh,184px);grid-template-columns:1fr 86px 1fr;padding:14px 16px 14px}
  .social-zone{right:2vw;top:48%;width:160px;padding:16px 11px 11px}
  .social-link{width:46px;height:46px}.noesplay-link img{width:78%}.volume-row{width:min(78%,285px)}
}

/* CELULAR: entra completo, sin scroll */
@media (max-width:760px){
  html,body{height:100dvh;overflow:hidden}
  .shell{background-image:linear-gradient(rgba(35,0,5,.10),rgba(0,0,0,.05)),url('../assets/background/studio-mobile.jpg');background-position:center center}
  .shell{height:100dvh;display:grid;grid-template-rows:auto auto auto;align-content:center;justify-items:center;gap:9px;padding:10px 10px 12px}
  .brand-zone,.player-zone,.social-zone{position:relative;left:auto;right:auto;top:auto;transform:none}
  .brand-zone{width:min(36vw,25vh,168px);aspect-ratio:1;margin:0}
  .brand-zone::before{inset:2.5%;border-width:2px;box-shadow:0 0 0 4px rgba(255,35,48,.95),0 0 18px rgba(255,22,38,.55)}
  .station-logo{width:91%;height:91%}
  .player-zone{width:min(86vw,360px);height:clamp(140px,20vh,165px);grid-template-columns:1fr 74px 1fr;grid-template-rows:1fr auto;column-gap:8px;padding:12px 11px 12px;border-radius:22px}
  .meter{height:52px;gap:4px}.meter i{width:4px}
  .play-shape{border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:25px solid #fff;margin-left:6px}.play-stop.is-playing .play-shape{width:29px;height:29px}
  .volume-row{width:100%;min-width:0;font-size:12px;gap:8px}.speaker{width:19px;height:19px}#volumeRange{height:6px}#volumeRange::-webkit-slider-thumb{width:20px;height:20px}
  .social-zone{width:min(94vw,420px);padding:10px 13px 10px;border-radius:23px;gap:8px}
  .social-heading{padding:0 0 10px}.social-heading strong{font-size:13px}.social-heading span{font-size:8px;margin-top:5px}.social-heading::after{bottom:2px;left:38%;right:38%;height:1px}
  .social-list{flex-direction:row;justify-content:center;gap:10px}
  .social-link{width:45px;height:45px}
  .noesplay-link{margin-top:0;padding-top:8px}.noesplay-link img{width:min(62%,170px)}
}

@media (max-width:380px),(max-height:700px) and (max-width:760px){
  .shell{gap:6px;padding:7px}
  .brand-zone{width:min(31vw,21vh,142px)}
  .player-zone{height:124px;width:min(84vw,330px);grid-template-columns:1fr 60px 1fr;padding:9px 10px;column-gap:6px}
  .meter{height:50px}.play-shape{border-top-width:14px;border-bottom-width:14px;border-left-width:24px}.play-stop.is-playing .play-shape{width:27px;height:27px}
  .social-zone{padding:8px 10px}.social-heading{display:none}.social-link{width:38px;height:38px}.noesplay-link img{width:min(56%,145px)}
}