:root{
  --gold:#f5b51b;
  --gold-soft:#ffc938;
  --black:#030303;
  --panel:rgba(3,3,3,.91);
  --white:#fff;
  --muted:#b9b9b9;
  --content-width:760px;
  --card-width:560px;
}

*{box-sizing:border-box}

html{
  min-width:320px;
  background:var(--black);
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100%;
  background:var(--black);
  color:var(--white);
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a,button{
  -webkit-tap-highlight-color:transparent;
}

.stage{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
}

.background{
  position:absolute;
  inset:-2px;
  z-index:-3;
  background:url("assets/fondo-oasis.jpeg") center/cover no-repeat;
  transform:scale(1.01);
}

.shade{
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(0deg,rgba(0,0,0,.97) 0%,rgba(0,0,0,.72) 15%,rgba(0,0,0,.12) 62%,rgba(0,0,0,.25) 100%),
    radial-gradient(circle at 50% 42%,rgba(245,181,27,.06),rgba(0,0,0,.68) 92%);
}

.content{
  width:min(var(--content-width),calc(100% - 28px));
  padding:clamp(28px,5vh,52px) 0 22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.logo{
  display:block;
  width:min(620px,88vw);
  height:auto;
  margin:0 auto clamp(16px,3vh,26px);
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.78));
  user-select:none;
}

.radio-card,
.app-card{
  width:min(var(--card-width),100%);
  border:2px solid var(--gold);
  border-radius:12px;
  background:linear-gradient(145deg,rgba(8,8,8,.96),rgba(0,0,0,.90));
  box-shadow:
    0 18px 58px rgba(0,0,0,.58),
    inset 0 0 0 1px rgba(255,255,255,.025);
  backdrop-filter:blur(7px);
}

.radio-card{
  padding:14px 20px 16px;
}

.live-row{
  min-height:46px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
}

.live-status{
  display:flex;
  align-items:center;
  gap:9px;
  white-space:nowrap;
  font-size:.95rem;
}

.live-status strong{
  letter-spacing:.02em;
}

.live-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--gold);
  animation:slowBlink 2.8s ease-in-out infinite;
}

.equalizer{
  height:38px;
  display:flex;
  align-items:end;
  justify-content:center;
  gap:3px;
}

.equalizer i{
  display:block;
  width:5px;
  min-height:5px;
  border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  transform-origin:bottom;
  animation:eq 1.08s ease-in-out infinite alternate;
}

.equalizer i:nth-child(2){animation-delay:-.72s}
.equalizer i:nth-child(3){animation-delay:-.33s}
.equalizer i:nth-child(4){animation-delay:-.55s}
.equalizer i:nth-child(5){animation-delay:-.12s}
.equalizer i:nth-child(6){animation-delay:-.82s}
.equalizer i:nth-child(7){animation-delay:-.43s}
.equalizer i:nth-child(8){animation-delay:-.68s}
.equalizer i:nth-child(9){animation-delay:-.25s}
.equalizer i:nth-child(10){animation-delay:-.9s}
.equalizer i:nth-child(11){animation-delay:-.48s}
.equalizer i:nth-child(12){animation-delay:-.18s}
.equalizer i:nth-child(13){animation-delay:-.61s}
.equalizer i:nth-child(14){animation-delay:-.37s}

.player-wrap{
  overflow:hidden;
  height:88px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:8px;
  background:#000;
}

.player-wrap iframe{
  display:block;
  width:100%;
  height:155px;
  border:0;
  background:#000;
  transform:translateY(-3px);
}

.app-card{
  margin-top:14px;
  padding:16px 20px;
  display:grid;
  grid-template-columns:104px minmax(0,1fr);
  align-items:center;
  gap:18px;
}

.phone-icon{
  display:grid;
  place-items:center;
}

.phone-icon svg{
  width:82px;
  height:82px;
  fill:none;
  stroke:#fff;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.5));
}

.app-copy{
  min-width:0;
  text-align:left;
}

.app-copy h2{
  margin:0;
  white-space:nowrap;
  font-size:clamp(1.02rem,2.1vw,1.28rem);
  line-height:1.1;
  letter-spacing:.015em;
}

.app-copy h2 span{
  color:var(--gold);
}

.app-copy p{
  margin:7px 0 12px;
  color:var(--muted);
  font-size:.82rem;
}

.store-buttons{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.store.badge{
  min-width:0;
  min-height:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.72);
  border-radius:7px;
  background:#000;
  text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.65);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.store.badge:hover,
.store.badge:focus-visible{
  transform:translateY(-2px);
  border-color:#fff;
  box-shadow:
    0 7px 18px rgba(0,0,0,.35),
    0 0 0 2px rgba(245,181,27,.16);
  outline:none;
}

.store.badge img{
  display:block;
  width:100%;
  height:46px;
  object-fit:contain;
  background:#000;
}

.station-info{
  margin-top:14px;
  display:grid;
  gap:5px;
  font-size:.92rem;
  text-shadow:0 2px 8px rgba(0,0,0,.8);
}

.station-info strong{
  letter-spacing:.025em;
}

.station-info a{
  color:var(--gold);
  text-decoration:none;
  font-weight:700;
  transition:color .2s ease;
}

.station-info a:hover,
.station-info a:focus-visible{
  color:#ffd763;
  outline:none;
}

.social{
  margin-top:21px;
  padding-top:10px;
  display:flex;
  justify-content:center;
  gap:12px;
  border-top:5px solid rgba(245,181,27,.08);
}

.social a{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid var(--gold);
  border-radius:50%;
  color:var(--gold);
  background:rgba(0,0,0,.28);
  transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease;
}

.social a:hover,
.social a:focus-visible{
  background:var(--gold);
  color:#000;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.35);
  outline:none;
}

.social svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.social .fill{
  fill:currentColor;
  stroke:none;
}

footer{
  margin-top:24px;
  color:#ddd;
  font-size:.68rem;
  text-shadow:0 2px 8px rgba(0,0,0,.8);
}

@keyframes slowBlink{
  0%,100%{
    opacity:.32;
    box-shadow:0 0 0 0 rgba(245,181,27,0);
  }
  50%{
    opacity:1;
    box-shadow:0 0 0 7px rgba(245,181,27,.12);
  }
}

@keyframes eq{
  from{height:7px;opacity:.52}
  to{height:36px;opacity:1}
}

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

/* Tablet horizontal y pantallas medianas */
@media (max-width:900px){
  .background{background-position:58% center}
  .content{
    width:min(720px,calc(100% - 24px));
    padding-top:32px;
  }
  .logo{
    width:min(570px,90vw);
  }
}

/* Tablet vertical y celulares grandes */
@media (max-width:650px){
  .stage{
    align-items:start;
    overflow-y:auto;
  }

  .background{
    position:fixed;
    background-position:61% center;
  }

  .shade{
    position:fixed;
    background:
      linear-gradient(0deg,rgba(0,0,0,.985) 4%,rgba(0,0,0,.72) 45%,rgba(0,0,0,.28) 78%),
      radial-gradient(circle at 50% 34%,rgba(245,181,27,.04),rgba(0,0,0,.74) 96%);
  }

  .content{
    width:min(100% - 18px,620px);
    min-height:100svh;
    padding:22px 0 18px;
  }

  .logo{
    width:min(540px,94vw);
    margin-bottom:14px;
  }

  .radio-card{
    padding:13px;
  }

  .live-row{
    flex-direction:column;
    gap:6px;
  }

  .equalizer{
    width:100%;
  }

  .player-wrap{
    height:102px;
  }

  .app-card{
    grid-template-columns:78px minmax(0,1fr);
    gap:12px;
    padding:15px 13px;
  }

  .phone-icon svg{
    width:66px;
    height:66px;
  }

  .app-copy h2{
    font-size:clamp(.92rem,4vw,1.12rem);
  }

  .store.badge img{
    height:42px;
  }

  .station-info{
    font-size:.84rem;
  }
}

/* Celulares */
@media (max-width:480px){
  .content{
    width:min(100% - 14px,460px);
    padding-top:16px;
  }

  .logo{
    width:96vw;
    margin-bottom:12px;
  }

  .radio-card,
  .app-card{
    border-radius:10px;
  }

  .live-status{
    font-size:.88rem;
  }

  .equalizer{
    height:32px;
  }

  .equalizer i{
    width:4px;
  }

  .player-wrap{
    height:108px;
  }

  .app-card{
    grid-template-columns:1fr;
    justify-items:center;
    padding:15px 12px;
  }

  .phone-icon{
    display:none;
  }

  .app-copy{
    width:100%;
    text-align:center;
  }

  .app-copy h2{
    font-size:1rem;
  }

  .app-copy p{
    margin:6px 0 11px;
  }

  .store-buttons{
    width:100%;
    max-width:360px;
  }

  .store.badge img{
    height:40px;
  }

  .station-info{
    font-size:.78rem;
  }

  .social{
    gap:9px;
  }

  .social a{
    width:40px;
    height:40px;
  }

  footer{
    margin-top:20px;
    font-size:.61rem;
  }
}

/* Celulares angostos */
@media (max-width:360px){
  .content{
    width:calc(100% - 10px);
  }

  .radio-card,
  .app-card{
    border-width:1.5px;
  }

  .store-buttons{
    gap:7px;
  }

  .store.badge img{
    height:37px;
  }

  .station-info strong{
    font-size:.73rem;
  }
}


/* Ajuste final de insignias oficiales */
.store-buttons {
  align-items: stretch;
}

.store.badge {
  aspect-ratio: 1090 / 330;
  height: auto;
  background: transparent;
  border: none;
  border-radius: 12px;
}

.store.badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  border-radius: inherit;
}

@media (max-width: 650px) {
  .store.badge {
    border-radius: 10px;
  }
}

@media (max-width: 480px) {
  .store-buttons {
    grid-template-columns: 1fr;
    max-width: 320px;
    margin-inline: auto;
  }
}