:root{
  --bg:#130024;
  --bg-deep:#09000f;
  --purple:#4c00a8;
  --violet:#7600ff;
  --magenta:#ff18e8;
  --pink:#ff58df;
  --gold:#ffd900;
  --orange:#ff6500;
  --white:#fff;
  --muted:#e9ddff;
  --panel:rgba(27,0,59,.72);
  --shadow:0 22px 70px rgba(0,0,0,.58);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-width:320px;
  color:var(--white);
  font-family:Poppins,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
  position:relative;
  background:
    radial-gradient(ellipse 74% 48% at 50% 38%,rgba(128,0,255,.50) 0%,rgba(99,0,214,.28) 38%,transparent 72%),
    radial-gradient(ellipse 44% 42% at 50% 57%,rgba(255,20,225,.23) 0%,rgba(181,0,255,.12) 42%,transparent 74%),
    radial-gradient(ellipse 38% 55% at 5% 50%,rgba(72,0,166,.34),transparent 72%),
    radial-gradient(ellipse 38% 55% at 95% 50%,rgba(72,0,166,.34),transparent 72%),
    linear-gradient(180deg,#0b0014 0%,#1b003b 28%,#310067 57%,#19002f 78%,#0d0019 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 30%,rgba(255,255,255,.08) 0 1px,transparent 2px),
    radial-gradient(circle at 76% 23%,rgba(255,255,255,.055) 0 1px,transparent 2px),
    radial-gradient(circle at 51% 62%,rgba(255,38,222,.07) 0 1px,transparent 2px);
  background-size:150px 150px,185px 185px,230px 230px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent 92%);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:50;
  pointer-events:none;
  opacity:.24;
  background:
    linear-gradient(90deg,rgba(0,0,0,.55),transparent 14%,transparent 86%,rgba(0,0,0,.55)),
    linear-gradient(180deg,rgba(0,0,0,.24),transparent 18%,transparent 80%,rgba(0,0,0,.38));
}

.ambient{
  position:fixed;
  border-radius:50%;
  pointer-events:none;
  z-index:-2;
  mix-blend-mode:screen;
  filter:blur(92px);
  opacity:.32;
  will-change:transform,opacity;
}
.ambient-a{
  width:460px;height:460px;left:-240px;top:10%;
  background:radial-gradient(circle,rgba(255,0,219,.66),transparent 70%);
  animation:ambientDriftA 14s ease-in-out infinite alternate;
}
.ambient-b{
  width:520px;height:520px;right:-270px;bottom:5%;
  background:radial-gradient(circle,rgba(67,0,255,.68),transparent 70%);
  animation:ambientDriftB 18s ease-in-out infinite alternate;
}
@keyframes ambientDriftA{to{transform:translate(95px,36px) scale(1.08);opacity:.38}}
@keyframes ambientDriftB{to{transform:translate(-75px,-48px) scale(1.12);opacity:.40}}

.site-header{
  position:relative;
  z-index:20;
  width:min(1440px,100%);
  min-height:86px;
  margin:0 auto;
  padding:12px 42px 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{display:inline-flex;align-items:center}
.brand img{
  display:block;
  width:154px;
  height:auto;
  filter:drop-shadow(0 7px 9px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(255,103,0,.16));
}
.main-nav{display:flex;align-items:center;gap:22px}
.nav-home{
  min-height:50px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#fff;
  text-decoration:none;
  font-weight:600;
  letter-spacing:.015em;
  padding:9px 7px 11px;
  border-bottom:2px solid transparent;
  transition:.25s ease;
}
.home-svg{
  width:27px;height:27px;fill:none;stroke:#ff9c00;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 7px rgba(255,88,0,.65));
}
.nav-home:hover,.nav-home.active{color:#ffd72b;border-color:#ff8f00;text-shadow:0 0 15px #ff7a00}
.main-nav>a{
  display:inline-flex;align-items:center;justify-content:center;min-height:42px;
  padding:0 19px;border:1px solid rgba(255,206,0,.72);border-radius:999px;
  background:linear-gradient(135deg,rgba(118,0,255,.92),rgba(55,0,122,.92));
  color:#fff;text-decoration:none;font-size:13px;font-weight:800;letter-spacing:.08em;
  box-shadow:0 0 0 1px rgba(255,24,232,.25),0 8px 22px rgba(20,0,55,.38),inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease;
}
.main-nav>a:hover,.main-nav>a:focus-visible{color:#24004e;background:linear-gradient(135deg,#ffe35a,#ff9d00);box-shadow:0 0 20px rgba(255,190,0,.68),0 9px 26px rgba(255,24,232,.32);transform:translateY(-2px);outline:none}
.main-nav>a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.nav-divider{width:1px;height:43px;background:rgba(255,255,255,.25);margin:0 1px}
.nav-socials{display:flex;gap:10px}
.nav-socials a,.social-grid a{
  width:51px;height:51px;
  border-radius:50%;
  display:grid;place-items:center;
  color:#fff;text-decoration:none;
  border:1px solid rgba(255,214,0,.80);
  background:rgba(45,0,91,.52);
  box-shadow:0 0 10px rgba(255,0,226,.46),inset 0 0 15px rgba(255,184,0,.13);
  transition:transform .25s ease,box-shadow .25s ease,color .25s ease,background .25s ease;
}
.nav-socials a:hover,.social-grid a:hover{
  transform:translateY(-4px) scale(1.05);
  color:#ffd83a;
  background:rgba(81,0,118,.66);
  box-shadow:0 0 17px #ff00de,0 0 32px rgba(255,150,0,.5);
}
.nav-socials svg,.social-grid svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-socials svg path,.social-grid svg path{fill:currentColor;stroke:none}
.nav-socials svg .play-svg,.social-grid svg .play-svg{fill:#3c006f}
.nav-socials svg .fill-dot,.social-grid svg .fill-dot{fill:currentColor;stroke:none}
.nav-socials a:nth-child(3) svg,.social-grid a:nth-child(3) svg{fill:currentColor;stroke:none}
.nav-socials a:nth-child(4) svg,.social-grid a:nth-child(4) svg{stroke:none}
.menu-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer}
.menu-toggle span{display:block;width:27px;height:2px;background:#fff;margin:6px;border-radius:2px;box-shadow:0 0 8px rgba(255,0,225,.5)}

.hero{
  position:relative;
  min-height:740px;
  padding:28px 24px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(ellipse 92% 38% at 50% 35%,rgba(75,0,173,.15),transparent 72%),
    radial-gradient(ellipse 58% 25% at 50% 67%,rgba(255,20,225,.10),transparent 75%);
}
.hero::before{
  content:"";
  position:absolute;
  z-index:0;
  width:min(980px,94vw);
  height:690px;
  left:50%;top:39%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.09) 0%,rgba(255,65,220,.22) 12%,rgba(181,0,255,.30) 32%,rgba(91,0,213,.14) 55%,transparent 74%);
  filter:blur(34px);
  opacity:.96;
  animation:heroGlow 7s ease-in-out infinite;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 34% 16% at 50% 38%,rgba(255,22,232,.20),transparent 72%),
    radial-gradient(ellipse 70% 28% at 50% 52%,rgba(138,0,255,.16),transparent 70%),
    radial-gradient(ellipse 30% 55% at 0% 52%,rgba(255,22,232,.10),transparent 75%),
    radial-gradient(ellipse 30% 55% at 100% 52%,rgba(255,22,232,.10),transparent 75%);
  mix-blend-mode:screen;
}
@keyframes heroGlow{
  0%,100%{opacity:.78;transform:translate(-50%,-50%) scale(.97)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.035)}
}

.hero-content{text-align:center;position:relative;z-index:12;width:min(760px,90vw)}
.hero-logo{
  margin:0 auto;
  width:min(680px,82vw);
  position:relative;
  line-height:0;
  filter:drop-shadow(0 19px 6px rgba(0,0,0,.62)) drop-shadow(0 0 20px rgba(255,104,0,.24));
}
.hero-logo::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;top:51%;
  width:92%;height:80%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,77,220,.31),rgba(186,0,255,.27) 35%,rgba(87,0,208,.10) 58%,transparent 76%);
  filter:blur(30px);
  animation:logoHalo 5.5s ease-in-out infinite;
}
.hero-logo img{display:block;width:100%;height:auto}
@keyframes logoHalo{50%{transform:translate(-50%,-50%) scale(1.08);opacity:.72}}

.tagline{
  margin:10px 0 26px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:17px;
  font-size:clamp(18px,2.1vw,29px);
  line-height:1;
  letter-spacing:.32em;
  font-weight:700;
  color:#fff;
  text-shadow:0 0 16px rgba(255,0,220,.42);
}
.tagline b{color:#ff9d00;font-weight:700}
.tagline span:first-child,.tagline span:last-child{color:#fff}

.wave-field{
  position:absolute;
  z-index:2;
  inset:15% -8% 19%;
  width:116%;height:62%;
  pointer-events:none;
  overflow:visible;
  opacity:.78;
  filter:drop-shadow(0 0 6px rgba(255,22,232,.42)) drop-shadow(0 0 18px rgba(138,0,255,.28));
}
.wave-field path{
  fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;
  animation:waveFloat 9s ease-in-out infinite alternate;
}
.wave-field path:nth-child(1){stroke:#ff4fd8;stroke-width:1.5;opacity:.42}
.wave-field path:nth-child(2){stroke:#c000ff;stroke-width:1.1;opacity:.30;animation-delay:-1.3s}
.wave-field path:nth-child(3){stroke:#8a00ff;stroke-width:1.4;opacity:.28;animation-delay:-2.6s}
.wave-field path:nth-child(4){stroke:#ff16e8;stroke-width:.9;opacity:.25;animation-delay:-3.9s}
.wave-field path:nth-child(5){stroke:#d83dff;stroke-width:1.2;opacity:.22;animation-delay:-5.2s}
.wave-field path:nth-child(6){stroke:#ff8be9;stroke-width:.8;opacity:.18;animation-delay:-6.5s}
.wave-field path:nth-child(7){stroke:#ff16e8;stroke-width:1;opacity:.16;animation-delay:-7.8s}
.wave-field path:nth-child(8){stroke:#8a00ff;stroke-width:.8;opacity:.20;animation-delay:-8.4s}
@keyframes waveFloat{from{transform:translateY(-3px) scaleY(.985)}to{transform:translateY(4px) scaleY(1.015)}}

.light-streak{
  position:absolute;z-index:3;height:1px;border-radius:999px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,79,216,.9),rgba(255,255,255,.75),transparent);
  box-shadow:0 0 8px rgba(255,22,232,.75),0 0 22px rgba(138,0,255,.35);
  opacity:.48;animation:streakPulse 6s ease-in-out infinite;
}
.streak-1{width:150px;left:7%;top:28%;transform:rotate(-2deg)}
.streak-2{width:190px;right:8%;top:40%;transform:rotate(2deg);animation-delay:-2s}
.streak-3{width:115px;left:13%;bottom:27%;animation-delay:-4s}
.streak-4{width:130px;right:13%;bottom:31%;animation-delay:-1s}
@keyframes streakPulse{50%{opacity:.16;transform:scaleX(.72)}}

.music-note{
  position:absolute;z-index:8;color:#ff65ec;text-shadow:0 0 12px #ff00d9,0 0 30px rgba(138,0,255,.7);
  font-size:68px;pointer-events:none;opacity:.48;animation:floatNote 8s ease-in-out infinite;will-change:transform,opacity;
}
.note-1{left:17%;top:15%}
.note-2{right:17%;top:19%;animation-delay:-2.7s}
.note-3{left:35%;top:47%;font-size:48px;animation-delay:-5.1s}
@keyframes floatNote{0%,100%{transform:translate3d(0,5px,0) rotate(-3deg);opacity:.28}50%{transform:translate3d(7px,-14px,0) rotate(4deg);opacity:.65}}

.particle-field{position:absolute;z-index:4;inset:0;pointer-events:none;overflow:hidden}
.particle{position:absolute;display:block;width:var(--size);height:var(--size);left:var(--x);top:var(--y);border-radius:50%;background:var(--particle-color);opacity:var(--opacity);box-shadow:0 0 7px var(--particle-color),0 0 18px rgba(192,0,255,.35);animation:particleFloat var(--duration) ease-in-out var(--delay) infinite;will-change:transform,opacity}
.particle.star{border-radius:1px;transform:rotate(45deg);box-shadow:0 0 8px #fff,0 0 18px var(--particle-color);animation-name:particleStar}
@keyframes particleFloat{0%,100%{transform:translate3d(0,8px,0) scale(.82);opacity:calc(var(--opacity) * .45)}50%{transform:translate3d(var(--drift),-18px,0) scale(1.12);opacity:var(--opacity)}}
@keyframes particleStar{0%,100%{transform:translate3d(0,7px,0) rotate(45deg) scale(.75);opacity:calc(var(--opacity) * .4)}50%{transform:translate3d(var(--drift),-15px,0) rotate(135deg) scale(1.15);opacity:var(--opacity)}}

.equalizer{
  position:absolute;z-index:5;top:28%;width:19%;height:255px;display:flex;gap:5px;align-items:center;pointer-events:none;opacity:.78;
  mask-image:linear-gradient(to bottom,transparent 0%,black 13%,black 87%,transparent 100%);
}
.eq-left{left:0;justify-content:flex-end;padding-right:3%}
.eq-right{right:0;justify-content:flex-start;padding-left:3%}
.equalizer::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,22,232,.12),transparent);filter:blur(12px)}
.equalizer i{position:relative;z-index:2;display:block;width:clamp(2px,.32vw,5px);height:var(--h);min-height:12px;max-height:220px;border-radius:999px;background:linear-gradient(180deg,#ff4fd8 0%,#c000ff 48%,#ff9d00 100%);box-shadow:0 0 6px rgba(255,22,232,.85),0 0 14px rgba(138,0,255,.55);opacity:var(--o);transform-origin:center;animation:eqPulse var(--speed) ease-in-out var(--delay) infinite alternate;will-change:transform}
.equalizer i:nth-child(4n){background:linear-gradient(180deg,#ff9fff,#ff16e8 55%,#ffb000)}
.equalizer i:nth-child(7n){background:linear-gradient(180deg,#fff,#c000ff 50%,#ff16e8)}
@keyframes eqPulse{0%{transform:scaleY(.58)}48%{transform:scaleY(1)}100%{transform:scaleY(.72)}}
.sound-wave{display:none}

.player-shell{
  width:min(1200px,94vw);
  min-height:190px;
  margin-top:0;
  position:relative;z-index:15;
  padding:20px 38px;
  display:grid;grid-template-columns:1fr 190px 1fr;gap:26px;align-items:center;
  border:2px solid #ff48ef;border-radius:25px;
  background:linear-gradient(115deg,rgba(41,0,82,.92),rgba(31,0,66,.70));
  box-shadow:0 0 25px rgba(255,0,236,.50),0 0 55px rgba(119,0,255,.32),inset 0 0 30px rgba(143,0,255,.18);
  backdrop-filter:blur(13px);
}
.station-info{display:flex;align-items:center;gap:20px;min-width:0}
.station-art{position:relative;width:132px;height:132px;flex:0 0 auto;display:grid;place-items:center}
.station-art img{width:98px;height:auto;position:relative;z-index:2;filter:drop-shadow(0 6px 5px #000)}
.art-ring{position:absolute;inset:4px;border:2px solid #ffb500;border-radius:50%;box-shadow:0 0 18px #ff00de,inset 0 0 14px rgba(255,165,0,.35)}
.station-copy{min-width:0}
.live-badge{display:flex;align-items:center;gap:9px;color:#ffc400;font-size:14px}
.live-badge i{width:11px;height:11px;border-radius:50%;background:#ff4a00;box-shadow:0 0 10px #ff4a00;animation:blink 1.3s infinite}
@keyframes blink{50%{opacity:.35}}
.station-copy h2{margin:4px 0 2px;font-size:31px;line-height:1.1}
.station-copy p{margin:0;color:#eee;font-size:15px}.station-copy p b{color:#ffbd00}
.station-copy small{display:block;margin-top:7px;color:#bda9d6;font-size:10px}
.player-center{display:grid;place-items:center}
.play-button{
  width:132px;height:132px;border-radius:50%;border:3px solid #ffd000;
  background:radial-gradient(circle at 35% 28%,#ffd23d,#ff7b00 48%,#e13a00 100%);
  box-shadow:0 0 0 7px rgba(255,0,212,.13),0 0 28px #ff00de,0 0 48px rgba(255,165,0,.55);
  cursor:pointer;position:relative;display:grid;place-items:center;transition:.25s;
}
.play-button:hover{transform:scale(1.04);box-shadow:0 0 0 8px rgba(255,0,212,.18),0 0 35px #ff00de,0 0 60px rgba(255,165,0,.65)}
.play-button:focus-visible{outline:3px solid #fff;outline-offset:5px}
.play-icon{width:0;height:0;margin-left:8px;border-top:22px solid transparent;border-bottom:22px solid transparent;border-left:34px solid #fff;filter:drop-shadow(0 3px 2px rgba(0,0,0,.25))}
.pause-icon{display:none;gap:10px}.pause-icon i{width:12px;height:42px;border-radius:3px;background:#fff}
.player-shell.is-playing .play-icon{display:none}.player-shell.is-playing .pause-icon{display:flex}.player-shell.is-playing .play-button{animation:playPulse 1.8s ease-in-out infinite}
@keyframes playPulse{50%{box-shadow:0 0 0 12px rgba(255,0,212,.06),0 0 45px #ff00de,0 0 70px rgba(255,165,0,.55)}}
.player-controls{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.volume-button,.retry-button{background:transparent;border:0;color:#ffd400;cursor:pointer;padding:6px;font-size:28px}
.volume-button:focus-visible,.retry-button:focus-visible{outline:2px solid #fff;border-radius:6px}
.speaker-svg{width:31px;height:31px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(255,170,0,.65))}
#volumeControl{appearance:none;width:240px;max-width:100%;height:6px;border-radius:10px;background:linear-gradient(90deg,#ff7a00 0%,#ffb000 85%,#8b1ed8 85%);cursor:pointer}
#volumeControl::-webkit-slider-thumb{appearance:none;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 0 14px #fff}
#volumeControl::-moz-range-thumb{width:21px;height:21px;border:0;border-radius:50%;background:#fff}
.mini-eq{display:flex;align-items:center;gap:4px;height:38px;margin-left:7px}.mini-eq i{display:block;width:3px;height:18px;background:#ffd500;box-shadow:0 0 8px #ffad00}.mini-eq i:nth-child(2){height:30px}.mini-eq i:nth-child(3){height:22px}.mini-eq i:nth-child(4){height:34px}.mini-eq i:nth-child(5){height:25px}.mini-eq i:nth-child(6){height:17px}
.player-shell.is-playing .mini-eq i{animation:miniEq .75s ease-in-out infinite alternate}.player-shell.is-playing .mini-eq i:nth-child(2){animation-delay:.1s}.player-shell.is-playing .mini-eq i:nth-child(3){animation-delay:.25s}.player-shell.is-playing .mini-eq i:nth-child(4){animation-delay:.4s}
@keyframes miniEq{to{transform:scaleY(.35)}}

.social-section{max-width:1120px;margin:0 auto;padding:0 20px 22px;text-align:center;position:relative}
.section-line{height:1px;background:linear-gradient(90deg,transparent,#ffbd00,transparent);opacity:.65}
.social-section h2{font-size:15px;letter-spacing:.22em;color:#ffd000;margin:0 auto 14px;background:linear-gradient(#4d00a5,#4d00a5);width:max-content;padding:0 25px;transform:translateY(-10px)}
.social-grid{display:flex;justify-content:center;gap:25px;flex-wrap:wrap}.social-grid a{width:57px;height:57px;font-size:24px}

.site-footer{
  width:min(1490px,calc(100% - 44px));
  min-height:88px;
  margin:0 auto 12px;
  padding:10px 45px;
  border:1px solid rgba(255,74,237,.45);border-radius:20px;
  background:rgba(32,0,74,.55);
  display:flex;align-items:center;gap:28px;
  box-shadow:inset 0 0 20px rgba(125,0,255,.12);
}
.footer-brand{padding-right:25px;border-right:1px solid rgba(255,190,0,.6)}
.footer-brand img{display:block;width:125px}.footer-copy{display:flex;flex-direction:column;gap:4px;color:#e8ddf5;font-size:13px}

/* Sello Sistema Digital de Colombia: bandera y texto en disposición horizontal. */
.site-footer{position:relative;padding-right:315px}
.site-footer::before{content:"";position:absolute;right:145px;top:50%;width:106px;height:54px;transform:translateY(-50%);background:url('../assets/logo/sistema-digital-colombia.png') center bottom/126px auto no-repeat;mix-blend-mode:screen;pointer-events:none;z-index:1}
.site-footer::after{content:"Sistema Digital\A de Colombia";box-sizing:border-box;display:flex;align-items:center;width:245px;height:60px;padding:0 10px 0 118px;white-space:pre-line;position:absolute;right:25px;top:50%;transform:translateY(-50%);border:1px solid rgba(255,190,0,.32);border-radius:10px;background:rgba(10,0,30,.34);color:#fff;font-size:12px;font-weight:800;line-height:1.12;text-align:left;letter-spacing:0;pointer-events:none}

@media (max-width:1050px){
  .site-header{padding:14px 25px}.nav-socials a{width:43px;height:43px}.nav-socials{gap:8px}
  .player-shell{grid-template-columns:1fr 145px 1fr;padding:20px 24px}.station-art{width:102px;height:102px}.station-art img{width:78px}.play-button{width:112px;height:112px}#volumeControl{width:150px}
}
@media (max-width:780px){
  .site-header{min-height:74px}.brand img{width:122px}.menu-toggle{display:block;z-index:25}
  .main-nav{position:absolute;top:70px;right:18px;left:18px;padding:18px;border:1px solid rgba(255,0,225,.5);border-radius:18px;background:rgba(23,0,53,.96);backdrop-filter:blur(18px);display:none;flex-direction:column;align-items:stretch;gap:12px;box-shadow:var(--shadow)}
  .main-nav.open{display:flex}.nav-home{text-align:center;justify-content:center}.nav-divider{width:100%;height:1px}.nav-socials{justify-content:center;flex-wrap:wrap}
  .hero{min-height:auto;padding:42px 14px 30px}.hero-logo{width:min(570px,88vw)}.tagline{font-size:15px;letter-spacing:.2em;gap:11px;margin-bottom:25px}
  .player-shell{grid-template-columns:1fr;gap:15px;text-align:center}.station-info{justify-content:center}.station-copy{text-align:left}.player-controls{justify-content:center}
  .equalizer{opacity:.25}.eq-left{left:-7%;width:30%}.eq-right{right:-7%;width:30%}.wave-field{inset:26% -20% 27%;width:140%;height:43%;opacity:.48}.wave-field path:nth-child(n+6){display:none}
  .music-note{font-size:44px;opacity:.30}.note-1{left:3%;top:18%}.note-2{right:4%;top:22%}.note-3{left:12%;top:43%;font-size:36px}
  .site-footer{margin:0 12px 12px;padding:18px 220px 18px 18px;justify-content:center}
}
@media (max-width:480px){
  .site-header{padding:11px 17px}.brand img{width:105px}.hero{padding:28px 12px 28px}.hero-logo{width:88vw}.tagline{font-size:13px;letter-spacing:.13em;gap:8px}
  .music-note{font-size:36px}.note-3{display:none}.player-shell{width:96vw;padding:18px 12px;border-radius:19px}.station-info{gap:13px}.station-art{width:78px;height:78px}.station-art img{width:63px}.station-copy h2{font-size:24px}.station-copy p{font-size:12px}.live-badge{font-size:11px}.station-copy small{font-size:9px}.play-button{width:105px;height:105px}.play-icon{border-top-width:18px;border-bottom-width:18px;border-left-width:28px}.pause-icon i{height:35px;width:10px}.player-controls{gap:6px}#volumeControl{width:135px}.mini-eq{display:none}.social-grid{gap:13px}.social-grid a{width:50px;height:50px}.site-footer{flex-direction:column;gap:12px;padding:18px 18px 88px;text-align:center}.footer-brand{padding:0 0 12px;border-right:0;border-bottom:1px solid rgba(255,190,0,.5)}.site-footer::before{top:auto;bottom:18px;right:calc(50% + 8px);width:70px;height:38px;background-size:82px auto;transform:none}.site-footer::after{top:auto;bottom:12px;right:calc(50% - 130px);width:210px;height:48px;padding-left:82px;font-size:10px;transform:none}
  .wave-field{inset:28% -38% 32%;width:176%;height:35%;opacity:.36}.wave-field path:nth-child(n+5){display:none}.equalizer{top:34%;width:26%;height:150px;opacity:.34;gap:3px}.eq-left{left:-13%}.eq-right{right:-13%}.equalizer i{width:2px}.particle:nth-child(n+13){display:none}.light-streak{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}

/* Pie de página plano, inspirado en la distribución de referencia. */
.site-footer{width:100%;min-height:136px;margin:0;padding:42px clamp(28px,5vw,100px) 42px;background:#050008;border:0;border-top:1px solid rgba(255,255,255,.12);border-radius:0;box-shadow:none;justify-content:flex-start;gap:0;padding-right:310px}
.footer-brand{display:none}
.footer-copy{flex-direction:row;align-items:center;flex-wrap:wrap;gap:0;color:rgba(255,255,255,.72);font-size:14px}
.footer-copy span+span::before{content:" ";white-space:pre}
.site-footer::before{right:185px;width:112px;height:48px;background-position:center 65%;background-size:132px auto}
.site-footer::after{right:55px;width:128px;height:auto;padding:0;border:0;border-radius:0;background:transparent;color:rgba(255,255,255,.78);font-size:12px;line-height:1.08}
@media (max-width:780px){.site-footer{min-height:120px;padding:34px 225px 34px 28px}.footer-copy{font-size:12px}.site-footer::before{right:132px;width:92px;height:42px;background-position:center 65%;background-size:108px auto}.site-footer::after{right:28px;width:105px;font-size:10px}}
@media (max-width:480px){.site-footer{min-height:160px;padding:30px 24px 92px;align-items:center}.footer-copy{justify-content:center;text-align:center;font-size:11px}.site-footer::before{right:calc(50% + 8px);bottom:24px;width:92px;height:40px;background-position:center 65%;background-size:108px auto}.site-footer::after{right:calc(50% - 130px);bottom:29px;width:106px;font-size:10px}}

/* Logo horizontal oficial de Sistema Digital de Colombia. */
.site-footer::before{right:48px;width:238px;height:62px;background-image:url('../assets/logo/sistema-digital-colombia-horizontal.png');background-position:center 50%;background-size:258px auto;mix-blend-mode:screen}
.site-footer::after{display:none}
@media (max-width:780px){.site-footer::before{right:28px;width:190px;height:54px;background-size:210px auto}}
@media (max-width:480px){.site-footer::before{right:50%;bottom:22px;width:190px;height:52px;background-position:center 50%;background-size:210px auto;transform:translateX(50%)}}

/* Acabado visual del footer. */
.site-footer{isolation:isolate;overflow:hidden;background:linear-gradient(105deg,#040008 0%,#12002c 48%,#06000d 100%);border-top:1px solid rgba(255,31,232,.55);box-shadow:0 -12px 38px rgba(112,0,255,.16),inset 0 1px 0 rgba(255,215,0,.15)}
.site-footer::after{content:"";display:block;position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 40% 190% at 8% 50%,rgba(255,0,210,.15),transparent 72%),radial-gradient(ellipse 28% 170% at 88% 50%,rgba(255,183,0,.13),transparent 72%);pointer-events:none}
.footer-copy{position:relative;z-index:1;font-weight:600;letter-spacing:.015em;text-shadow:0 1px 12px rgba(255,255,255,.18)}
.footer-copy span:first-child{color:#ffd92c;font-weight:800}
.site-footer::before{filter:drop-shadow(0 0 9px rgba(255,216,0,.32));z-index:1}
@media (max-width:480px){.site-footer::after{display:block}.footer-copy{line-height:1.55}}

/* Pantalla de carga MAX FM. */
html::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:
    radial-gradient(circle at 50% 43%,rgba(255,76,221,.24),transparent 20%),
    radial-gradient(circle at 50% 52%,rgba(114,0,255,.38),transparent 38%),
    url('../assets/logo/max-fm-logo.png') center 43%/min(440px,72vw) auto no-repeat,
    linear-gradient(145deg,#08000e 0%,#210047 48%,#090011 100%);
  animation:maxLoaderExit 2.8s cubic-bezier(.68,0,.32,1) forwards;
}
html::after{
  content:"CARGANDO · LA RADIO DIGITAL";position:fixed;left:50%;top:calc(50% + min(245px,37vw));z-index:10000;
  width:min(330px,72vw);padding:14px 0 22px;transform:translateX(-50%);pointer-events:none;
  border-bottom:4px solid transparent;border-radius:999px;
  background:linear-gradient(90deg,#ff9e00,#ff16e8,#7d00ff) bottom/100% 4px no-repeat;
  color:#fff;text-align:center;font-size:12px;font-weight:800;letter-spacing:.2em;
  text-shadow:0 0 13px rgba(255,255,255,.55);animation:maxLoaderExit 2.8s cubic-bezier(.68,0,.32,1) forwards,maxLoaderPulse .85s ease-in-out infinite alternate;
}
@keyframes maxLoaderExit{0%,78%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes maxLoaderPulse{to{filter:drop-shadow(0 0 10px rgba(255,23,232,.8));letter-spacing:.24em}}

/* Cargador con porcentaje real de recursos. */
html::before,html::after{content:none;display:none}
.max-loader{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;overflow:hidden;background:linear-gradient(145deg,#08000e 0%,#210047 48%,#090011 100%);transition:opacity .5s ease,visibility .5s ease}
.max-loader.is-complete{opacity:0;visibility:hidden}
.max-loader{animation:maxLoaderFailSafe 0s linear 3s forwards}
@keyframes maxLoaderFailSafe{to{opacity:0;visibility:hidden;pointer-events:none}}
.max-loader__glow{position:absolute;width:min(740px,110vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,77,222,.28),rgba(114,0,255,.17) 31%,transparent 67%);filter:blur(6px);animation:loaderGlow 1.5s ease-in-out infinite alternate}
.max-loader__logo{position:relative;width:min(440px,72vw);height:auto;filter:drop-shadow(0 0 26px rgba(255,37,231,.42));animation:loaderLogo 1.5s ease-in-out infinite alternate}
.max-loader p,.max-loader strong,.max-loader__track{position:relative;margin:0}.max-loader p{color:#fff;font-size:clamp(10px,1.25vw,14px);font-weight:800;letter-spacing:.22em;text-shadow:0 0 13px rgba(255,255,255,.55)}
.max-loader__track{width:min(330px,72vw);height:7px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.16);box-shadow:inset 0 1px 3px rgba(0,0,0,.45)}
.max-loader__track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff9e00,#ff16e8,#7d00ff);box-shadow:0 0 13px #ff16e8;transition:width .12s linear}
.max-loader strong{color:#ffe36d;font-size:clamp(26px,4vw,42px);line-height:1;text-shadow:0 0 18px rgba(255,188,0,.55)}
@keyframes loaderGlow{to{transform:scale(1.08);opacity:.78}}@keyframes loaderLogo{to{transform:translateY(-5px) scale(1.025)}}
@media (prefers-reduced-motion:reduce){.max-loader,.max-loader__glow,.max-loader__logo{animation:none;transition:none}}
@media (prefers-reduced-motion:reduce){.max-loader{animation:maxLoaderFailSafe 0s linear 3s forwards}}

/* Escala compacta para que la emisora se vea completa en pantalla de escritorio. */
@media (min-width:781px){
  .site-header{min-height:70px;padding:8px 42px}.brand img{width:118px}.main-nav{gap:15px}.nav-socials a{width:43px;height:43px}.nav-socials svg{width:21px;height:21px}.main-nav>a{min-height:36px;padding:0 16px;font-size:11px}
  .hero{min-height:610px;padding:10px 24px 16px}.hero::before{width:min(850px,88vw);height:560px;top:42%}.hero-content{width:min(620px,82vw)}.hero-logo{width:min(510px,64vw)}.tagline{margin:5px 0 16px;gap:13px;font-size:clamp(15px,1.5vw,22px);letter-spacing:.27em}
  .wave-field{inset:18% -8% 21%;height:55%}.music-note{font-size:48px}.note-3{font-size:35px}.equalizer{top:31%;height:185px;gap:4px}
  .player-shell{width:min(960px,82vw);min-height:146px;padding:14px 28px;grid-template-columns:1fr 150px 1fr;gap:18px;border-radius:20px}.station-info{gap:14px}.station-art{width:100px;height:100px}.station-art img{width:76px}.station-copy h2{font-size:25px}.station-copy p{font-size:12px}.live-badge{font-size:12px}.play-button{width:104px;height:104px}.play-icon{border-top-width:17px;border-bottom-width:17px;border-left-width:27px}.pause-icon i{height:33px;width:9px}.volume-button{font-size:24px}.speaker-svg{width:26px;height:26px}#volumeControl{width:180px}.mini-eq{transform:scale(.82);margin-left:0}
  .social-section{padding-bottom:16px}.social-section h2{font-size:12px;margin-bottom:8px}.social-grid{gap:17px}.social-grid a{width:46px;height:46px}.social-grid svg{width:21px;height:21px}
  .site-footer{min-height:104px;padding-top:28px;padding-bottom:28px}.site-footer::before{transform:translateY(-50%) scale(.88);transform-origin:right center}
}

/* CMS dynamic content */
.dynamic-content{width:min(1120px,92vw);margin:0 auto 48px;position:relative;z-index:3}.dynamic-section{margin-top:28px}.dynamic-section h2{font-size:clamp(1.2rem,2vw,1.7rem);letter-spacing:.08em;text-align:center;margin:0 0 18px}.dynamic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}.dynamic-card{background:rgba(18,0,38,.62);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:18px;box-shadow:0 18px 50px rgba(0,0,0,.25);backdrop-filter:blur(14px)}.dynamic-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:15px;margin-bottom:12px}.dynamic-card h3{margin:0 0 8px}.dynamic-card p{color:var(--muted);margin:0;line-height:1.65}.dynamic-card .meta{font-size:.78rem;opacity:.72;margin-bottom:8px}.admin-preview-frame{width:100%;min-height:430px;border:0;border-radius:20px;background:#09000f}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}