*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#eaf7ff;font-family:Arial,Helvetica,sans-serif;color:#061631}
a{text-decoration:none;color:inherit}
.page{
  position:relative;
  width:min(100vw,1024px);
  margin:0 auto;
  background:#fff;
  box-shadow:0 0 40px rgba(0,0,0,.08);
}
.mockup{
  display:block;
  width:100%;
  height:auto;
  user-select:none;
  pointer-events:none;
}
.hotspot{
  position:absolute;
  display:block;
  z-index:5;
  border-radius:8px;
}
.hotspot:focus{outline:3px solid #0876d8;outline-offset:3px}
.play-hot{
  border-radius:50%;
  background:rgba(8,118,216,0);
}
.play-hot:hover{background:rgba(8,118,216,.12)}
/* Botones extra que pidió: quedan sobre la página sin romper el diseño */
.app-strip{
  position:absolute;
  left:4.5%;
  right:4.5%;
  top:48.8%;
  z-index:9;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  pointer-events:auto;
}
.app-strip a{
  display:inline-flex;
  align-items:center;
  height:42px;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 9px 22px rgba(0,58,120,.16);
  transition:.18s;
}
.app-strip a:hover{transform:translateY(-2px)}
.app-strip img{height:42px;width:auto;display:block}
.tv-btn{
  background:#0876d8;color:#fff;font-weight:900;padding:0 16px;
  font-size:14px;
}

/* Reproductor popup */
.modal{
  position:fixed;inset:0;z-index:100;
  display:none;align-items:center;justify-content:center;
  background:rgba(0,30,70,.52);
  padding:18px;
}
.modal.open{display:flex}
.player{
  width:min(560px,96vw);
  background:#fff;
  border-radius:24px;
  box-shadow:0 28px 90px rgba(0,0,0,.30);
  padding:28px;
  text-align:center;
  position:relative;
}
.close{
  position:absolute;right:18px;top:12px;
  background:transparent;border:0;font-size:34px;cursor:pointer;
}
.player img{height:110px;max-width:88%;object-fit:contain}
.player h2{font-size:20px;margin:12px 0 4px}
.en-vivo{color:#0876d8;font-weight:900;text-transform:uppercase}
.wave{
  height:72px;width:min(440px,92%);margin:12px auto 16px;
  background:repeating-linear-gradient(90deg,#0876d8 0 4px,transparent 4px 14px);
  clip-path:polygon(0 55%,3% 35%,6% 74%,9% 20%,12% 65%,15% 36%,18% 70%,21% 22%,24% 78%,27% 30%,30% 66%,33% 42%,36% 60%,39% 28%,42% 72%,45% 46%,48% 58%,51% 25%,54% 75%,57% 34%,60% 68%,63% 30%,66% 76%,69% 44%,72% 64%,75% 38%,78% 70%,81% 28%,84% 62%,87% 46%,90% 58%,93% 34%,96% 64%,100% 50%);
}
audio{width:100%;margin:8px 0 10px}
.stream-box{
  border:2px dashed rgba(8,118,216,.38);
  background:#f2fbff;color:#0876d8;
  font-weight:900;border-radius:14px;padding:12px;font-size:13px;
}

/* Versión celular: usa el mismo diseño, ajustado al ancho, sin desbordar */
@media(max-width:700px){
  .page{width:100vw}
  .app-strip{
    position:sticky;
    bottom:0;
    left:0;right:0;top:auto;
    padding:8px;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(12px);
    border-top:1px solid rgba(8,118,216,.18);
  }
  .app-strip a{height:34px}
  .app-strip img{height:34px}
  .tv-btn{height:34px;font-size:12px;padding:0 10px}
}

/*
Hotspots calculados sobre imagen 1024x1536.
Se escalan porque usan porcentajes.
*/
.logo-link{left:2.3%;top:2.5%;width:15.5%;height:6.4%}
.nav-inicio{left:26.6%;top:5.2%;width:6.5%;height:2.6%}
.nav-radio{left:33.6%;top:5.2%;width:6.8%;height:2.6%}
.nav-programacion{left:40.6%;top:5.2%;width:10.7%;height:2.6%}
.nav-noticias{left:52.2%;top:5.2%;width:7.9%;height:2.6%}
.nav-contacto{left:61.0%;top:5.2%;width:7.8%;height:2.6%}
.social-f{left:84.0%;top:4.8%;width:3.0%;height:3.2%}
.social-i{left:88.0%;top:4.8%;width:3.0%;height:3.2%}
.social-x{left:92.0%;top:4.8%;width:3.0%;height:3.2%}
.play-main{left:12.6%;top:36.5%;width:10.6%;height:7.1%}
.live-card{left:62.5%;top:37.6%;width:27.0%;height:4.7%}
.feature-1{left:3.1%;top:50.2%;width:24.0%;height:6.1%}
.feature-2{left:29.0%;top:50.2%;width:22.0%;height:6.1%}
.feature-3{left:52.2%;top:50.2%;width:22.0%;height:6.1%}
.feature-4{left:75.0%;top:50.2%;width:22.0%;height:6.1%}
.phone-play{left:17.7%;top:70.9%;width:8.8%;height:5.9%}
.modal-card{left:44.5%;top:57.2%;width:49.8%;height:24.2%}
.footer-f{left:84.0%;top:97.1%;width:3.0%;height:2.2%}
.footer-i{left:88.0%;top:97.1%;width:3.0%;height:2.2%}
.footer-x{left:92.0%;top:97.1%;width:3.0%;height:2.2%}

.footer-full{left:0;bottom:0;width:100%;height:4.5%}