:root{
  --ink:#ffffff;
  --muted:#c9d3ef;
  --night:#070713;
  --panel:rgba(9,8,24,.84);
  --line:rgba(255,255,255,.18);
  --cyan:#08b8ff;
  --lime:#91f24a;
  --magenta:#ff2d93;
  --violet:#7f2cff;
  --amber:#ffd447;
  --red:#ef233c;
}

*{
  box-sizing:border-box;
  letter-spacing:0;
}

html{
  min-height:100%;
}

body{
  margin:0;
  min-height:100vh;
  min-height:100svh;
  background:var(--night);
  color:var(--ink);
  font-family:Inter,Segoe UI,Arial,sans-serif;
  overflow-x:hidden;
}

button,
audio{
  font:inherit;
}

a{
  color:inherit;
}

[hidden]{
  display:none!important;
}

.hero-shell{
  position:relative;
  isolation:isolate;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--night);
}

.hero-shell::before{
  content:"";
  position:absolute;
  inset:-18px;
  z-index:-4;
  background:
    linear-gradient(90deg,rgba(7,7,19,.92) 0%,rgba(7,7,19,.56) 42%,rgba(7,7,19,.86) 100%),
    linear-gradient(180deg,rgba(127,44,255,.24),rgba(8,184,255,.1) 42%,rgba(0,0,0,.64) 100%),
    url('../assets/fondo.jpg') center/cover no-repeat;
  transform:scale(1.03);
}

.hero-shell::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(115deg,transparent 0 28%,rgba(8,184,255,.16) 29%,transparent 31% 46%,rgba(145,242,74,.12) 47%,transparent 49% 66%,rgba(255,45,147,.12) 67%,transparent 69%),
    repeating-linear-gradient(180deg,rgba(255,255,255,.03) 0 1px,transparent 1px 11px);
  mix-blend-mode:screen;
  opacity:.9;
  pointer-events:none;
}

.backdrop-lines{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
}

.backdrop-lines::before,
.backdrop-lines::after{
  content:"";
  position:absolute;
  top:13%;
  left:-18%;
  width:138%;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(8,184,255,.9),rgba(255,212,71,.75),rgba(145,242,74,.85),transparent);
  box-shadow:0 28px 0 rgba(255,45,147,.44),0 56px 0 rgba(127,44,255,.34);
  transform:rotate(-10deg);
  animation:lineDrift 8s ease-in-out infinite alternate;
}

.backdrop-lines::after{
  top:auto;
  bottom:24%;
  animation-duration:10s;
  animation-direction:alternate-reverse;
  opacity:.55;
}

.topbar{
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:22px 30px 0;
}

.signal-pill{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  padding:9px 13px;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(10,12,28,.58);
  box-shadow:0 12px 30px rgba(0,0,0,.22);
  color:#f4f8ff;
  font-size:.8rem;
  font-weight:800;
  text-transform:uppercase;
  backdrop-filter:blur(14px);
}

.signal-pill span,
.live span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 6px rgba(239,35,60,.18),0 0 20px rgba(239,35,60,.8);
  animation:pulseLive 1.15s ease-in-out infinite;
}

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

.social a{
  width:43px;
  height:43px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;
  text-decoration:none;
  box-shadow:0 12px 30px rgba(0,0,0,.2);
  backdrop-filter:blur(14px);
  transition:transform .2s ease,background .2s ease,border-color .2s ease;
}

.social a:hover,
.social a:focus-visible{
  transform:translateY(-2px);
  background:rgba(8,184,255,.24);
  border-color:rgba(255,255,255,.38);
  outline:none;
}

#installBtn{
  position:fixed;
  left:24px;
  bottom:124px;
  z-index:8;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:12px 16px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;
  background:linear-gradient(135deg,var(--red),var(--magenta));
  color:#fff;
  font-weight:800;
  box-shadow:0 18px 42px rgba(0,0,0,.35);
  cursor:pointer;
}

.install-hint{
  position:fixed;
  left:18px;
  right:18px;
  bottom:126px;
  z-index:8;
  max-width:440px;
  padding:14px 46px 14px 16px;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(6,8,18,.9);
  color:#fff;
  font-size:.9rem;
  line-height:1.4;
  box-shadow:0 18px 42px rgba(0,0,0,.35);
  backdrop-filter:blur(16px);
}

.install-hint strong{
  display:block;
  margin-bottom:4px;
}

.install-hint button{
  position:absolute;
  top:8px;
  right:10px;
  width:32px;
  height:32px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#fff;
  font-size:1.55rem;
  line-height:1;
  cursor:pointer;
}

.hero{
  position:relative;
  z-index:2;
  flex:1;
  width:min(1120px,calc(100% - 56px));
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(280px,500px) minmax(330px,560px);
  align-items:center;
  gap:58px;
  padding:22px 0 178px;
}

.logo-stage{
  position:relative;
  width:100%;
  min-width:0;
  min-height:460px;
  display:grid;
  place-items:center;
}

.logo-stage::before{
  content:"";
  position:absolute;
  width:92%;
  aspect-ratio:1;
  border-radius:50%;
  background:conic-gradient(from 110deg,rgba(8,184,255,.12),rgba(145,242,74,.72),rgba(255,212,71,.64),rgba(255,45,147,.72),rgba(127,44,255,.7),rgba(8,184,255,.12));
  filter:drop-shadow(0 0 26px rgba(8,184,255,.34));
  animation:spinRing 16s linear infinite;
}

.logo-stage::after{
  content:"";
  position:absolute;
  width:72%;
  height:72%;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.24);
  transform:rotate(-14deg);
}

.main-logo{
  position:relative;
  width:min(400px,100%);
  max-width:100%;
  aspect-ratio:1;
  object-fit:contain;
  border:1px solid rgba(255,255,255,.72);
  border-radius:8px;
  filter:drop-shadow(0 22px 28px rgba(0,0,0,.42)) drop-shadow(0 0 24px rgba(127,44,255,.36));
  animation:floatLogo 4.8s ease-in-out infinite;
}

.hero-copy{
  width:100%;
  min-width:0;
  max-width:560px;
  text-shadow:0 4px 20px rgba(0,0,0,.45);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 14px;
  color:#dfffe0;
  font-size:.9rem;
  font-weight:900;
  text-transform:uppercase;
}

.eyebrow::before{
  content:"";
  width:34px;
  height:3px;
  border-radius:3px;
  background:linear-gradient(90deg,var(--lime),var(--cyan));
  box-shadow:0 0 18px rgba(145,242,74,.58);
}

.hero-copy h1{
  margin:0;
  color:#fff;
  font-size:5.3rem;
  line-height:.92;
  font-weight:950;
  text-transform:uppercase;
}

.hero-copy h1 span{
  display:block;
}

.tagline{
  max-width:520px;
  margin:20px 0 0;
  color:#f2f6ff;
  font-size:1.2rem;
  line-height:1.45;
  font-weight:600;
}

.station-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}

.station-tags span{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:.86rem;
  font-weight:800;
  backdrop-filter:blur(10px);
}

.station-tags span:nth-child(1){
  border-color:rgba(8,184,255,.42);
}

.station-tags span:nth-child(2){
  border-color:rgba(239,35,60,.42);
}

.station-tags span:nth-child(3){
  border-color:rgba(145,242,74,.42);
}

.visualizer-strip{
  position:absolute;
  left:50%;
  bottom:104px;
  z-index:1;
  width:min(860px,calc(100% - 48px));
  height:86px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:6px;
  transform:translateX(-50%);
  pointer-events:none;
}

.visualizer-strip span{
  flex:1 1 0;
  min-width:7px;
  max-width:30px;
  height:calc(16px + (var(--i) * 5px));
  border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,var(--magenta),var(--amber),var(--lime),var(--cyan));
  opacity:.42;
  transform-origin:bottom;
  animation:bars 1.7s ease-in-out infinite;
  animation-delay:calc(var(--i) * -.09s);
  animation-play-state:paused;
}

.hero-shell.is-playing .visualizer-strip span{
  animation-play-state:running;
  opacity:.78;
}

.player-bar{
  position:fixed;
  left:50%;
  bottom:20px;
  z-index:6;
  width:min(1120px,calc(100% - 32px));
  display:grid;
  grid-template-columns:minmax(150px,190px) auto minmax(260px,1fr) auto;
  align-items:center;
  gap:14px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:8px;
  background:linear-gradient(135deg,rgba(8,8,22,.92),rgba(33,16,64,.88) 48%,rgba(9,39,52,.86));
  box-shadow:0 20px 60px rgba(0,0,0,.44);
  backdrop-filter:blur(18px);
  transform:translateX(-50%);
}

.player-info{
  min-width:0;
}

.live{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:3px;
  color:#fff;
  font-size:.78rem;
  font-weight:950;
}

.player-info strong,
.player-info small{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.player-info strong{
  color:#fff;
  font-size:1rem;
}

.player-info small{
  margin-top:1px;
  color:var(--muted);
  font-size:.78rem;
}

.play-toggle{
  min-width:122px;
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:0;
  border-radius:8px;
  background:linear-gradient(135deg,var(--cyan),var(--lime));
  color:#05101b;
  font-weight:950;
  cursor:pointer;
  box-shadow:0 14px 34px rgba(8,184,255,.25);
  transition:transform .2s ease,filter .2s ease;
}

.play-toggle:hover,
.play-toggle:focus-visible{
  transform:translateY(-1px);
  filter:saturate(1.12) brightness(1.04);
  outline:none;
}

.play-toggle i{
  font-size:1rem;
}

audio{
  width:100%;
  min-width:250px;
  height:44px;
  accent-color:var(--cyan);
}

audio::-webkit-media-controls-panel{
  background:#f7fbff;
}

.vumeters{
  display:flex;
  gap:8px;
}

.vu-meter{
  position:relative;
  width:118px;
  height:70px;
  overflow:hidden;
  border:2px solid rgba(20,15,30,.95);
  border-radius:8px;
  background:
    linear-gradient(90deg,rgba(145,242,74,.25),rgba(255,212,71,.3) 58%,rgba(239,35,60,.24)),
    linear-gradient(180deg,#fffdea,#f6d277);
  color:#1a1230;
  box-shadow:inset 0 0 12px rgba(0,0,0,.16);
}

.scale{
  position:absolute;
  top:8px;
  left:9px;
  right:9px;
  display:flex;
  justify-content:space-between;
  font-size:.63rem;
  font-weight:900;
}

.needle{
  position:absolute;
  bottom:12px;
  left:50%;
  width:3px;
  height:45px;
  border-radius:3px;
  background:var(--red);
  box-shadow:0 0 8px rgba(239,35,60,.7);
  transform:translateX(-50%) rotate(-42deg);
  transform-origin:bottom center;
  transition:transform .08s linear;
}

.pivot{
  position:absolute;
  bottom:7px;
  left:50%;
  width:14px;
  height:14px;
  border:3px solid rgba(255,255,255,.7);
  border-radius:50%;
  background:#171021;
  transform:translateX(-50%);
}

@keyframes pulseLive{
  50%{
    opacity:.58;
    transform:scale(.82);
  }
}

@keyframes lineDrift{
  from{
    transform:translateX(-2%) rotate(-10deg);
  }
  to{
    transform:translateX(5%) rotate(-10deg);
  }
}

@keyframes spinRing{
  to{
    transform:rotate(360deg);
  }
}

@keyframes floatLogo{
  0%,100%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(-10px);
  }
}

@keyframes bars{
  0%,100%{
    transform:scaleY(.32);
  }
  40%{
    transform:scaleY(1);
  }
  68%{
    transform:scaleY(.56);
  }
}

@media(max-width:900px){
  .hero{
    grid-template-columns:1fr;
    gap:2px;
    text-align:center;
    padding:12px 0 256px;
  }

  .logo-stage{
    min-height:360px;
  }

  .main-logo{
    width:min(330px,100%);
  }

  .hero-copy{
    margin:0 auto;
  }

  .hero-copy h1{
    font-size:3.7rem;
  }

  .tagline{
    margin-left:auto;
    margin-right:auto;
    font-size:1.05rem;
  }

  .eyebrow{
    justify-content:center;
  }

  .station-tags{
    justify-content:center;
  }

  .visualizer-strip{
    bottom:230px;
    height:58px;
  }

  .player-bar{
    grid-template-columns:1fr;
    gap:11px;
  }

  .player-info{
    text-align:center;
  }

  .live{
    justify-content:center;
  }

  .play-toggle{
    width:100%;
  }

  audio{
    min-width:0;
  }

  .vumeters{
    justify-content:center;
  }

  #installBtn{
    left:50%;
    bottom:296px;
    transform:translateX(-50%);
    white-space:nowrap;
  }

  .install-hint{
    bottom:296px;
  }
}

@media(max-width:560px){
  .topbar{
    align-items:flex-start;
    padding:16px 16px 0;
    gap:10px;
  }

  .signal-pill{
    max-width:142px;
    min-height:38px;
    font-size:.72rem;
  }

  .social{
    gap:6px;
  }

  .social a{
    width:34px;
    height:34px;
    font-size:.86rem;
  }

  .hero{
    width:calc(100% - 28px);
    justify-items:center;
    padding-top:0;
  }

  .logo-stage{
    max-width:330px;
    min-height:300px;
  }

  .main-logo{
    width:100%;
  }

  .hero-copy h1{
    font-size:2.8rem;
  }

  .tagline{
    font-size:1rem;
  }

  .station-tags{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
    max-width:340px;
    gap:8px;
    margin-left:auto;
    margin-right:auto;
  }

  .station-tags span{
    min-width:0;
    justify-content:center;
    font-size:.82rem;
  }

  .station-tags span:nth-child(3){
    grid-column:1/-1;
  }

  .player-bar{
    bottom:12px;
    width:calc(100% - 20px);
    padding:12px;
  }

  .vumeters{
    display:none;
  }

  .visualizer-strip{
    bottom:210px;
    width:calc(100% - 36px);
  }

  .visualizer-strip span{
    min-width:4px;
  }

  #installBtn{
    bottom:252px;
  }

  .install-hint{
    bottom:252px;
  }
}

@media(max-height:740px) and (min-width:901px){
  .hero{
    padding-bottom:140px;
  }

  .logo-stage{
    min-height:390px;
  }

  .main-logo{
    width:360px;
  }

  .hero-copy h1{
    font-size:4.6rem;
  }

  .visualizer-strip{
    bottom:88px;
    height:62px;
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
  }
}