:root{
  --red:#ed111c;
  --red2:#ff2c35;
  --black:#050505;
  --panel:#111214;
  --white:#f4f1ee;
  --muted:#aaa6a3;
  --line:rgba(255,255,255,.13);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  background:#050505;
  color:var(--white);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

body{
  overflow-x:hidden;
  background:
    radial-gradient(circle at 10% 50%,rgba(198,0,12,.33),transparent 28rem),
    radial-gradient(circle at 90% 45%,rgba(198,0,12,.26),transparent 28rem),
    linear-gradient(180deg,#050505,#090909 60%,#050505);
}

.noise{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.13;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:40px 40px;
}

.topbar{
  width:min(1460px,calc(100% - 48px));
  margin:auto;
  padding:26px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:3;
}

.mini-logo{
  text-decoration:none;
  color:white;
  font-size:clamp(1.75rem,3vw,2.7rem);
  font-weight:950;
  letter-spacing:-.075em;
  line-height:1;
}

.mini-logo-red{color:var(--red)}

.share-button{
  width:52px;
  height:52px;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:white;
  display:grid;
  place-items:center;
  cursor:pointer;
}

.share-button svg{width:23px;fill:currentColor}

.hero{
  width:min(1460px,calc(100% - 36px));
  margin:auto;
  padding:20px 0 38px;
}

.hero-content{
  position:relative;
  text-align:center;
}

.frequency{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:#ddd9d6;
  font-size:clamp(.95rem,2vw,1.45rem);
  margin:10px 0 24px;
}

.frequency strong{
  color:white;
  font-size:1.7em;
  letter-spacing:.1em;
}

.frequency .line{
  width:clamp(44px,9vw,145px);
  height:2px;
  background:linear-gradient(90deg,transparent,var(--red));
}

.frequency .line:last-child{
  background:linear-gradient(90deg,var(--red),transparent);
}

.live-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 18px var(--red);
}

.brand-wrap{
  width:100%;
  overflow:visible;
}

.brand-main{
  display:block;
  width:100%;
  white-space:nowrap;
  font-size:clamp(4.4rem,13.5vw,13rem);
  line-height:.82;
  letter-spacing:-.095em;
  font-weight:950;
  text-align:center;
  padding:0 .05em .13em 0;
}

.brand-white{color:var(--white)}
.brand-red{color:var(--red)}

.tagline{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  color:var(--red);
  font-size:clamp(.86rem,1.7vw,1.35rem);
  letter-spacing:.28em;
  text-transform:uppercase;
}

.tagline span{
  width:clamp(28px,5vw,90px);
  height:1px;
  background:var(--red);
}

.visualizer{
  position:absolute;
  top:27%;
  width:13%;
  height:180px;
  opacity:.4;
  background:
    repeating-linear-gradient(90deg,var(--red) 0 5px,transparent 5px 12px);
  mask-image:linear-gradient(to bottom,transparent 0%,black 28%,black 72%,transparent 100%);
  animation:breathe 2.2s ease-in-out infinite alternate;
}

.visualizer-left{left:-2%}
.visualizer-right{right:-2%;animation-delay:.8s}

@keyframes breathe{
  from{transform:scaleY(.55);opacity:.24}
  to{transform:scaleY(1);opacity:.52}
}

.player-shell{
  margin:34px auto 24px;
  width:min(1080px,100%);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:22px;
}

.live-status{
  text-align:left;
  justify-self:start;
}

.live-status span{
  display:block;
  color:var(--red2);
  text-transform:uppercase;
  letter-spacing:.12em;
}

.live-status i,.codec i{
  display:inline-block;
  width:9px;
  height:9px;
  background:var(--red);
  border-radius:50%;
  margin-right:7px;
}

.live-status small{
  display:block;
  margin-top:7px;
  font-size:1.15rem;
}

.player-controls{
  display:flex;
  align-items:center;
  gap:42px;
}

.round{
  border-radius:50%;
  display:grid;
  place-items:center;
  cursor:pointer;
  color:white;
}

.round svg{fill:currentColor}

.round.secondary{
  width:70px;
  height:70px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.025);
}

.round.secondary svg{width:28px}

.round.play{
  width:112px;
  height:112px;
  border:5px solid var(--red);
  background:rgba(20,0,2,.5);
  box-shadow:0 0 34px rgba(237,17,28,.55),inset 0 0 28px rgba(237,17,28,.15);
}

.round.play svg{width:48px}

.volume-control{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:15px;
}

.volume-control svg{
  width:26px;
  fill:white;
}

.volume-control input{
  width:170px;
  accent-color:var(--red);
}

.now-card{
  width:min(1240px,100%);
  margin:0 auto;
  border:1px solid var(--line);
  border-radius:28px;
  background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  padding:22px 28px;
  display:grid;
  grid-template-columns:150px minmax(260px,.8fr) 1fr;
  align-items:center;
  gap:28px;
  box-shadow:0 18px 60px rgba(0,0,0,.35);
}

.cover{
  width:150px;
  aspect-ratio:1;
  border-radius:18px;
  background:
    radial-gradient(circle at 70% 70%,rgba(237,17,28,.25),transparent 45%),
    #070707;
  display:grid;
  place-items:center;
  font-size:5.5rem;
  font-weight:950;
  letter-spacing:-.15em;
  border:1px solid rgba(255,255,255,.08);
}

.cover-white{color:white}
.cover-red{color:var(--red)}

.now-copy{text-align:left}

.now-label{
  color:var(--red2);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.82rem;
  font-weight:800;
}

.now-copy h1{
  margin:.55rem 0 .35rem;
  font-size:clamp(1.35rem,2.8vw,2.15rem);
}

.now-copy p{
  margin:0;
  color:var(--muted);
  font-size:1.05rem;
}

.codec{
  margin-top:17px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#c7c2bd;
  font-size:.82rem;
}

.eq{
  height:120px;
  display:flex;
  justify-content:flex-end;
  align-items:flex-end;
  gap:5px;
  overflow:hidden;
}

.eq span{
  width:8px;
  border-radius:8px 8px 0 0;
  background:linear-gradient(to top,#710008,var(--red2));
  animation:eq 1.15s ease-in-out infinite alternate;
  opacity:.85;
}

.eq span:nth-child(3n){animation-duration:.85s}
.eq span:nth-child(4n){animation-duration:1.45s}
.eq span:nth-child(5n){animation-delay:.3s}
.eq span:nth-child(2n){animation-delay:.12s}

@keyframes eq{
  from{height:14%}
  to{height:92%}
}

footer{
  border-top:1px solid rgba(255,255,255,.08);
  width:min(1460px,calc(100% - 48px));
  margin:auto;
  padding:22px 0 28px;
  display:flex;
  justify-content:space-between;
  color:#85817e;
  font-size:.82rem;
}

@media(max-width:900px){
  .brand-main{
    font-size:clamp(3.7rem,15.5vw,8rem);
    letter-spacing:-.08em;
  }

  .tagline{
    letter-spacing:.15em;
  }

  .player-shell{
    grid-template-columns:1fr;
    justify-items:center;
    gap:24px;
  }

  .live-status,.volume-control{
    justify-self:center;
    text-align:center;
  }

  .now-card{
    grid-template-columns:110px 1fr;
  }

  .cover{width:110px;font-size:4rem}
  .eq{grid-column:1/-1;height:70px;justify-content:center}
}

@media(max-width:560px){
  .topbar{width:calc(100% - 28px)}
  .hero{width:calc(100% - 22px)}
  .share-button{width:46px;height:46px}

  .frequency{
    gap:9px;
    letter-spacing:.1em;
  }

  .frequency .line{width:30px}

  .brand-main{
    font-size:clamp(3.2rem,17.2vw,5.8rem);
    letter-spacing:-.07em;
    line-height:.9;
  }

  .tagline{
    font-size:.72rem;
    line-height:1.45;
    letter-spacing:.11em;
    gap:8px;
  }

  .tagline span{width:18px}

  .visualizer{display:none}

  .player-controls{gap:16px}
  .round.secondary{width:56px;height:56px}
  .round.play{width:92px;height:92px}
  .round.play svg{width:40px}

  .volume-control input{width:190px}

  .now-card{
    grid-template-columns:74px 1fr;
    padding:18px;
    gap:16px;
    border-radius:22px;
  }

  .cover{width:74px;border-radius:14px;font-size:2.7rem}
  .now-copy h1{font-size:1.2rem}
  .now-copy p{font-size:.92rem}
  .codec{font-size:.72rem}
  .eq{height:54px}

  footer{
    width:calc(100% - 28px);
    flex-direction:column;
    align-items:center;
    gap:8px;
  }
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important}
}


/* Ajustes solicitados */
.tagline{color:var(--red)!important;font-weight:800;}
.tagline span{background:var(--red)!important;}
.volume-control input[type="range"]{
  appearance:auto;
  -webkit-appearance:auto;
  pointer-events:auto;
  cursor:pointer;
  position:relative;
  z-index:5;
}