/* Layout: bloques de color a todo el ancho (azul / amarillo / noche), contenido centrado a 1180px, reproductor fijo abajo */
:root{
  --night:#050b26;      /* fondo base, azul noche */
  --night-2:#0a1442;    /* superficies */
  --night-3:#112063;    /* superficies elevadas */
  --blue:#1d4fe0;       /* azul del logo */
  --blue-deep:#0d2a9c;
  --orange:#ff7a00;     /* naranja del logo */
  --yellow:#ffd21f;     /* amarillo del logo */
  --cream:#fff6e0;
  --ink:#ffffff;
  --muted:#a9b6e6;
  --line:rgba(255,255,255,.12);
  --grad-fire:linear-gradient(135deg,#ffe23d 0%,#ffb000 45%,#ff6a00 100%);
  --f-display:"Bowlby One","Arial Black",Impact,sans-serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1180px;
  --r:18px;
  --player-h:72px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55;overflow-x:hidden;padding-bottom:calc(var(--player-h) + env(safe-area-inset-bottom,0px))}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{text-wrap:balance;margin:0}
.display{font-family:var(--f-display);font-weight:400;line-height:.92;letter-spacing:-.01em;text-transform:uppercase}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--yellow);color:var(--night)}
.tag.orange{background:var(--orange);color:#fff}
.tag.ghost{background:transparent;border:1.5px solid var(--yellow);color:var(--yellow)}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:10px 18px;font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:uppercase;background:var(--grad-fire);color:var(--night);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(255,140,0,.7)}
.btn.outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5)}
.sec-title{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(34px,6vw,64px);line-height:.95}
.sec-title .hl{background:var(--grad-fire);-webkit-background-clip:text;background-clip:text;color:transparent}
.spark{position:absolute;width:64px;height:64px;pointer-events:none}
.spark i{position:absolute;left:50%;top:50%;width:8px;height:30px;background:var(--yellow);border-radius:6px;transform-origin:50% 0}
.spark i:nth-child(1){transform:rotate(-20deg) translate(-50%,-10px)}
.spark i:nth-child(2){transform:rotate(30deg) translate(-50%,-10px)}
.spark i:nth-child(3){transform:rotate(80deg) translate(-50%,-10px)}

/* ---------- TOP BAR ---------- */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(5,11,38,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--night)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:8px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand img{width:76px;height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.brand span{font-family:var(--f-display);font-size:18px;line-height:1;text-transform:uppercase}
.brand span{white-space:nowrap}
@media (max-width:1320px){.brand span{display:none}}
.brand small{display:block;font-family:var(--f-body);font-weight:700;font-size:11px;letter-spacing:.16em;color:var(--yellow)}
.nav{display:flex;gap:2px;align-items:center;min-width:0}
.nav a{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:8px 11px;white-space:nowrap;border-radius:999px;color:var(--muted);transition:.2s}
.nav a:hover,.nav a.active{color:var(--night);background:var(--yellow)}
.top-actions{display:flex;align-items:center;gap:8px;flex:none}
.soc{display:flex;gap:6px}
.soc a{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--night);transition:.2s}
.soc a:hover{background:var(--orange);color:#fff;transform:rotate(-8deg)}
.soc svg{width:16px;height:16px;fill:currentColor}
.burger{display:none;background:none;border:2px solid var(--yellow);color:var(--yellow);width:42px;height:42px;border-radius:12px}
.burger svg{width:22px;height:22px;stroke:currentColor}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;background:var(--night)}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;min-height:560px}
.hero-left{position:relative;background:var(--blue-deep) url("../img/portada-buenaza.webp") center/cover no-repeat;padding:48px max(16px,env(safe-area-inset-left,0px)) 120px max(24px,env(safe-area-inset-left,0px));display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:560px}
.hero-left::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(29,79,224,.58) 0%,rgba(13,42,156,.72) 100%)}
.hero-left > img{position:relative}
.hero-logo{width:min(520px,100%);animation:float 6s ease-in-out infinite;filter:drop-shadow(0 18px 28px rgba(0,0,0,.55))}
@keyframes float{50%{transform:translateY(-10px) rotate(-1deg)}}
.hero-left .spark{position:absolute;top:28px;left:28px}
.onair-card{display:flex;gap:12px;align-items:center;background:rgba(5,11,38,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:16px;padding:10px 14px 10px 10px;position:absolute;left:24px;bottom:24px;max-width:calc(100% - 48px)}
.onair-card .thumb{width:54px;height:54px;border-radius:12px;background:var(--grad-fire);display:grid;place-items:center;font-family:var(--f-display);color:var(--night);font-size:22px;flex:none}
.onair-card > div:last-child{min-width:0}
.onair-card b{display:block;font-size:15px;line-height:1.2;margin-top:4px}
.onair-card small{display:block;color:var(--muted);font-size:12px}
.hero-right{padding:48px max(16px,env(safe-area-inset-right,0px)) 48px 40px;display:flex;flex-direction:column;justify-content:center;gap:22px;position:relative}
.hero-title{font-size:clamp(56px,9vw,120px);color:#fff}
.hero-title .b{display:block;background:var(--grad-fire);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.big-play{position:relative;width:118px;height:118px;border-radius:50%;border:0;background:var(--yellow);color:var(--night);display:grid;place-items:center;box-shadow:0 0 0 10px rgba(255,210,31,.18),0 20px 40px -10px rgba(255,140,0,.7);transition:transform .25s;flex:none}
.big-play:hover{transform:scale(1.06)}
.big-play::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid var(--yellow);opacity:0}
.playing .big-play::after{animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.4);opacity:0}}
.big-play svg{width:46px;height:46px}
.hero-claim{font-size:clamp(22px,2.6vw,30px);font-weight:900;line-height:1.1}
.hero-claim span{color:var(--yellow)}
.genres-inline{display:flex;flex-wrap:wrap;gap:8px}
.genres-inline span{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px;border:1.5px solid var(--line);color:var(--muted)}
.hero-mini{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:520px}
.mini{position:relative;border-radius:16px;overflow:hidden;min-height:118px;padding:14px;display:flex;flex-direction:column;justify-content:flex-end;background:var(--night-3)}
.mini b{font-size:15px;line-height:1.15;position:relative}
.mini small{color:var(--cream);opacity:.8;font-size:12px;position:relative}
.mini .tag{position:absolute;top:12px;left:12px}
.art-salsa{background:radial-gradient(circle at 80% 20%,#ffd21f 0 18%,transparent 19%),linear-gradient(135deg,#ff7a00,#c2185b)}
.art-cumbia{background:radial-gradient(circle at 85% 25%,#fff 0 6%,transparent 7%),repeating-linear-gradient(45deg,#1d4fe0 0 14px,#2a5ff5 14px 28px)}
.art-reggaeton{background:radial-gradient(circle at 75% 30%,#ff7a00 0 22%,transparent 23%),linear-gradient(135deg,#0d2a9c,#050b26)}
.art-merengue{background:conic-gradient(from 30deg at 80% 30%,#ffd21f,#ff7a00,#ffd21f,#ff7a00,#ffd21f)}
.art-rock{background:repeating-linear-gradient(-45deg,#1a1a2e 0 10px,#22224a 10px 20px),#111}
.art-baladas{background:radial-gradient(circle at 30% 30%,#ff9ec0 0 20%,transparent 21%),linear-gradient(135deg,#7b2ff7,#1d4fe0)}
.art-mix{background:radial-gradient(circle at 80% 28%,#050b26 0 8%,#ffd21f 8.5% 10%,#111 10.5% 38%,transparent 38.5%),linear-gradient(135deg,#ff7a00,#ffd21f)}
.art-news{background:linear-gradient(135deg,#ffd21f,#ff7a00 60%,#d6400b)}
.mini::before,.card-art::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,11,38,.9),rgba(5,11,38,.1) 60%)}

/* marquee */
.marquee{background:var(--yellow);color:var(--night);overflow:hidden;border-block:3px solid var(--night)}
.marquee-track{display:flex;gap:36px;white-space:nowrap;padding-block:12px;animation:scroll 28s linear infinite;width:max-content}
.marquee-track span{font-family:var(--f-display);font-size:22px;text-transform:uppercase;display:flex;align-items:center;gap:36px}
.marquee-track span::after{content:"";width:14px;height:14px;background:var(--orange);border-radius:50%}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- SECTIONS ---------- */
section{position:relative}
.pad{padding-block:clamp(56px,8vw,96px)}
.center{text-align:center}

/* schedule */
.sched-box{margin-top:28px;background:var(--night-2);border:1px solid var(--line);border-radius:28px;padding:18px}
.days{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.days::-webkit-scrollbar{display:none}
.days button{flex:1 0 auto;min-width:92px;background:transparent;border:0;color:var(--muted);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:10px 12px;border-radius:12px}
.days button[aria-selected="true"]{background:var(--grad-fire);color:var(--night)}
.sched-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.prog{position:relative;border-radius:18px;overflow:hidden;min-height:200px;padding:16px;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;transition:transform .25s}
.prog:hover{transform:translateY(-4px)}
.prog::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,11,38,.95),rgba(5,11,38,.05) 70%)}
.prog > *{position:relative}
.prog .tag{position:absolute;top:14px;left:14px}
.prog .live{position:absolute;top:14px;right:14px;background:#e11d48;color:#fff}
.prog .live::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}
.prog h3{font-size:19px;font-weight:900}
.prog .time{font-size:13px;color:var(--yellow);font-weight:700;font-variant-numeric:tabular-nums}
.prog .host{font-size:13px;color:var(--muted)}
.prog .glyph{position:absolute;top:40px;right:14px;font-family:var(--f-display);font-size:64px;line-height:1;color:rgba(255,255,255,.14);text-transform:uppercase}

/* news */
.news-grid{display:grid;grid-template-columns:.85fr 1.6fr;gap:32px;align-items:center}
.news-intro p{color:var(--muted);max-width:42ch}
.listen-on{margin-top:22px}
.listen-on .row{display:flex;gap:10px;margin-top:10px}
.listen-on a{width:46px;height:46px;border-radius:50%;background:var(--blue);display:grid;place-items:center;transition:.2s}
.listen-on a:hover{background:var(--orange)}
.listen-on svg{width:20px;height:20px;fill:#fff}
.feature{position:relative;border-radius:24px;overflow:hidden;min-height:380px;display:flex;flex-direction:column;justify-content:flex-end;padding:28px}
.feature .bg{position:absolute;inset:0}
.feature::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,11,38,.95) 10%,rgba(5,11,38,0) 70%)}
.feature > *:not(.bg){position:relative;z-index:1}
.feature h3{font-size:clamp(22px,3vw,32px);font-weight:900;line-height:1.1;margin-top:10px;max-width:24ch}
.feature p{color:var(--cream);opacity:.85;max-width:52ch;margin:8px 0 0}
.feature-art{position:absolute;inset:0;background:radial-gradient(circle at 75% 35%,#ffd21f 0 12%,#ff7a00 12.5% 22%,transparent 22.5%),radial-gradient(circle at 75% 35%,transparent 0 28%,rgba(255,255,255,.08) 28.5% 30%,transparent 30.5% 38%,rgba(255,255,255,.06) 38.5% 40%,transparent 40.5%),linear-gradient(135deg,#1d4fe0,#0a1442)}
.dots{display:flex;gap:6px;margin-top:16px}
.dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.35)}
.dots i:first-child{background:var(--yellow);width:26px;border-radius:6px}

/* genre strip */
.genre-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:40px}
.genre{aspect-ratio:1;max-width:100%;border-radius:50%;border:2px dashed rgba(255,210,31,.45);display:grid;place-items:center;text-align:center;padding:10px;transition:.3s;position:relative}
.genre:hover{border-style:solid;background:rgba(255,210,31,.08);transform:rotate(-6deg)}
.genre svg{width:40%;height:auto;fill:none;stroke:var(--yellow);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.genre b{display:block;font-family:var(--f-display);font-size:clamp(11px,1.3vw,15px);text-transform:uppercase;line-height:1;margin-top:6px}

/* trending */
.trend-pills{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}
.pill{position:relative;overflow:hidden;border-radius:999px;background:var(--blue);padding:16px 18px;text-align:center;font-weight:900;font-size:15px;border:0;color:#fff;transition:.2s}
.pill:hover,.pill.on{background:var(--grad-fire);color:var(--night)}
.pill::after{content:attr(data-ghost);position:absolute;left:0;right:0;bottom:-12px;font-family:var(--f-display);font-size:28px;opacity:.12;text-transform:uppercase;white-space:nowrap}
.trend-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:16px;margin-top:20px}
.list{display:flex;flex-direction:column;gap:10px}
.li{display:flex;gap:12px;align-items:center;background:var(--night-2);border:1px solid var(--line);border-radius:14px;padding:8px;transition:.2s}
.li:hover{border-color:var(--yellow)}
.li .t{width:58px;height:46px;border-radius:10px;flex:none}
.li b{font-size:14px;line-height:1.25}
.card{background:var(--night-2);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.card-art{position:relative;aspect-ratio:4/3;max-width:100%}
.card-body{padding:14px;display:flex;flex-direction:column;gap:6px}
.card-body b{font-size:16px;line-height:1.2}
.meta{display:flex;gap:12px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

/* podcasts split */
.split{display:grid;grid-template-columns:1fr 1fr}
.split-left{background:var(--night);padding-block:clamp(48px,7vw,80px);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:clamp(16px,3vw,40px)}
.split-right{background:var(--yellow);color:var(--night);padding-block:clamp(48px,7vw,80px);padding-right:max(16px,env(safe-area-inset-right,0px));padding-left:clamp(16px,3vw,40px);position:relative;overflow:hidden}
.split-inner{max-width:560px}
.split-left .split-inner{margin-left:auto}
.ep-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}
.ep-tabs button{background:transparent;border:1.5px solid var(--line);color:#fff;border-radius:999px;padding:6px 14px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.ep-tabs button.on{border-color:var(--yellow);color:var(--yellow)}
.ep{display:flex;align-items:center;gap:14px;background:var(--night-2);border:1px solid var(--line);border-radius:16px;padding:10px;margin-bottom:10px}
.ep .disc{width:64px;height:64px;border-radius:50%;flex:none;display:grid;place-items:center;background:radial-gradient(circle,#050b26 0 14%,#ffd21f 15% 19%,#1a1a2e 20% 100%);border:2px solid var(--yellow)}
.ep .disc svg{width:18px;height:18px;fill:var(--yellow)}
.ep b{display:block}
.ep small{color:var(--muted);font-size:12px}
.pod-title{display:inline-block;background:var(--blue);color:#fff;border-radius:22px;padding:14px 22px 10px;font-size:clamp(40px,6vw,68px);box-shadow:8px 8px 0 var(--night)}
.split-right p{max-width:44ch;font-weight:500}
.pod-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.pod-card{background:var(--night);color:#fff;border-radius:18px;overflow:hidden}
.pod-card .card-art{aspect-ratio:1}
.pod-card div.cap{padding:12px}
.pod-card b{display:block}
.pod-card small{color:var(--yellow);font-size:12px;font-weight:700}
.wave{position:absolute;right:-20px;top:20px;display:flex;gap:6px;align-items:center;height:160px;opacity:.25}
.wave i{width:8px;background:var(--night);border-radius:6px}

/* now listening */
.listening{background:linear-gradient(90deg,var(--blue) 0%,var(--blue-deep) 100%);overflow:hidden}
.listening .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:28px;flex-wrap:wrap}
.listening .sec-title{color:#fff}
.lst-left{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.lst-play{width:96px;height:96px;border-radius:50%;background:var(--yellow);border:0;display:grid;place-items:center;color:var(--night);box-shadow:0 0 0 8px rgba(255,210,31,.2);flex:none}
.lst-play svg{width:38px;height:38px}
.eq{display:flex;align-items:flex-end;gap:4px;height:56px}
.eq i{width:7px;background:var(--yellow);border-radius:4px;height:20%}
.playing .eq i{animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2n){animation-delay:-.3s}.eq i:nth-child(3n){animation-delay:-.6s}.eq i:nth-child(5n){animation-delay:-.15s}
@keyframes eq{0%,100%{height:15%}50%{height:100%}}
.now-meta{text-align:right}
.now-meta b{font-size:18px;display:block}
.now-meta small{color:var(--yellow);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:12px}
.played{background:radial-gradient(circle at 20% 50%,rgba(255,122,0,.35),transparent 55%),linear-gradient(90deg,#0a1442,#3b0d4f 60%,#5a0d2a)}
.played .wrap{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;padding-block:clamp(48px,7vw,80px)}
.stay{font-family:var(--f-display);font-size:clamp(40px,6vw,72px);line-height:.95;text-transform:uppercase}
.stay span{color:var(--yellow)}
.songs{display:flex;flex-direction:column;gap:10px}
.song{display:flex;align-items:center;gap:12px;background:rgba(5,11,38,.6);border:1px solid var(--line);border-radius:14px;padding:8px 12px 8px 8px}
.song .c{width:48px;height:48px;border-radius:10px;flex:none}
.song div{flex:1;min-width:0}
.song b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.song small{color:var(--muted);font-size:12px}
.song time{font-size:12px;color:var(--yellow);font-weight:700;font-variant-numeric:tabular-nums}

/* chart */
.chart-box{display:grid;grid-template-columns:.9fr 1.4fr;gap:18px;margin-top:28px;background:var(--night-2);border:1px solid var(--line);border-radius:28px;padding:18px}
.chart-cover{position:relative;border-radius:20px;overflow:hidden;background:var(--grad-fire);color:var(--night);display:flex;flex-direction:column;justify-content:flex-end;padding:20px;min-height:340px}
.vinyl{position:absolute;top:22px;left:22px;width:min(220px,62%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#ffd21f 0 9%,#050b26 9.5% 13%,#1a1a2e 13.5% 100%);box-shadow:inset 0 0 0 6px #050b26}
.vinyl::after{content:"";position:absolute;inset:14%;border-radius:50%;border:1px solid rgba(255,255,255,.12);box-shadow:0 0 0 14px transparent,inset 0 0 0 10px rgba(255,255,255,.04)}
.playing .vinyl{animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.chart-cover .vtxt{position:absolute;right:16px;top:20px;writing-mode:vertical-rl;font-family:var(--f-display);font-size:40px;line-height:1;color:var(--night);opacity:.85}
.chart-cover b{font-size:24px;font-weight:900;position:relative}
.rank{display:flex;flex-direction:column;gap:10px}
.rk{display:grid;grid-template-columns:auto 34px 1fr auto;align-items:center;gap:12px;background:var(--night-3);border-radius:14px;padding:10px 14px}
.rk .n{font-family:var(--f-display);font-size:34px;line-height:1;width:44px;text-align:center;background:var(--grad-fire);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.vote{display:flex;flex-direction:column;align-items:center;gap:2px}
.vote button{background:none;border:0;color:var(--muted);padding:0;line-height:0}
.vote button:hover{color:var(--yellow)}
.vote svg{width:18px;height:18px}
.vote span{font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
.rk div{min-width:0}
.rk b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk small{color:var(--muted);font-size:12px}
.mv{font-size:12px;font-weight:800;padding:3px 8px;border-radius:999px;font-variant-numeric:tabular-nums}
.mv.up{background:rgba(52,211,153,.15);color:#34d399}
.mv.dn{background:rgba(248,113,113,.15);color:#f87171}
.mv.eq2{background:rgba(255,255,255,.08);color:var(--muted)}
.host-row{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px}
.host-chip{display:flex;align-items:center;gap:10px;background:var(--night-2);border:1px solid var(--line);border-radius:14px;padding:8px 16px 8px 8px}
.av{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:900;color:var(--night);background:var(--grad-fire)}
.host-row p{font-size:clamp(18px,2.2vw,24px);font-weight:700;margin:0;max-width:34ch}

/* dedications */
.ded-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.ded-title{display:inline-block;background:#fff;color:var(--blue);border-radius:24px;padding:16px 24px 12px;font-size:clamp(40px,6vw,66px);box-shadow:8px 8px 0 var(--orange)}
form{display:flex;flex-direction:column;gap:14px;margin-top:26px}
label{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.field{display:flex;flex-direction:column;gap:6px}
input[type=text],textarea{width:100%;background:transparent;border:2px solid var(--yellow);border-radius:14px;color:#fff;padding:12px 14px;font:inherit;font-size:15px;resize:vertical}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.4)}
.check{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:500}
.check input{accent-color:var(--yellow);width:16px;height:16px}
.form-msg{font-weight:700;color:var(--yellow);min-height:1.4em;margin:0}
.ded-feed{background:var(--night-2);border:1px solid var(--line);border-radius:24px;padding:18px;max-height:520px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
.ded{border-bottom:1px dashed var(--line);padding-bottom:14px}
.ded:last-child{border:0}
.ded .who{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ded .who .tag{font-size:10px}
.ded .sng{color:var(--orange);font-weight:800;font-size:14px}
.ded p{margin:6px 0 0;font-weight:600}
.ded-intro{color:var(--muted);margin:0 0 16px}

/* footer */
footer{background:var(--blue-deep);border-top:4px solid var(--yellow);padding-block:56px 28px}
.foot-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px;align-items:start}
.foot-brand img{width:200px}
.foot-brand p{margin:8px 0 14px;font-weight:700}
.foot-col h4{margin:0 0 12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--yellow)}
.foot-col p{margin:0;color:var(--cream);opacity:.85;font-size:14px}
.foot-bottom{margin-top:36px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;background:rgba(5,11,38,.5);border-radius:999px;padding:12px 20px;font-size:13px;color:var(--muted)}
.foot-links{display:flex;gap:8px;flex-wrap:wrap}
.foot-links a{background:var(--yellow);color:var(--night);font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;border-radius:999px}

/* fixed player */
.player{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(5,11,38,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:2px solid var(--yellow);padding-bottom:env(safe-area-inset-bottom,0px)}
.player .wrap{display:flex;align-items:center;gap:14px;height:var(--player-h)}
.p-btn{width:48px;height:48px;border-radius:50%;border:0;background:var(--grad-fire);color:var(--night);display:grid;place-items:center;flex:none}
.p-btn svg{width:22px;height:22px}
.p-info{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
.p-info img{width:56px;flex:none}
.p-info div{min-width:0}
.p-info b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-info small{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:#64748b}
.playing .dot{background:#22c55e;animation:blink 1.2s infinite}
.p-eq{display:flex;align-items:flex-end;gap:3px;height:26px}
.p-eq i{width:4px;height:20%;background:var(--yellow);border-radius:3px}
.playing .p-eq i{animation:eq .9s ease-in-out infinite}
.p-eq i:nth-child(2){animation-delay:-.2s}.p-eq i:nth-child(3){animation-delay:-.5s}.p-eq i:nth-child(4){animation-delay:-.7s}
.vol{display:flex;align-items:center;gap:8px}
.vol svg{width:20px;height:20px;fill:var(--muted)}
.vol input{width:110px;accent-color:var(--yellow)}

/* mobile nav */
.mnav{position:fixed;inset:0;z-index:80;background:var(--night);display:flex;flex-direction:column;padding:calc(20px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));gap:6px}
.mnav .close{align-self:flex-end;background:none;border:2px solid var(--yellow);color:var(--yellow);border-radius:12px;width:44px;height:44px;font-size:22px;font-weight:900}
.mnav a{font-family:var(--f-display);font-size:34px;text-transform:uppercase;padding:6px 0;border-bottom:1px solid var(--line)}
.mnav a:hover{color:var(--yellow)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1240px){
  .nav{display:none}
  .burger{display:grid;place-items:center}
  .genre-strip{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .onair-card .thumb{width:42px;height:42px;font-size:17px}
  .onair-card b{font-size:14px}
  .hero-left{padding:28px 16px 120px;min-height:440px;background-image:url("../img/portada-buenaza-sm.webp");background-position:center}
  .hero-right{padding:36px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px))}
  .sched-grid{grid-template-columns:repeat(2,1fr)}
  .news-grid,.played .wrap,.ded-grid,.chart-box{grid-template-columns:1fr}
  .trend-pills{grid-template-columns:repeat(2,1fr)}
  .trend-grid{grid-template-columns:1fr 1fr}
  .trend-grid .list{grid-column:1/-1}
  .split{grid-template-columns:1fr}
  .split-left,.split-right{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .split-inner{max-width:none;margin:0}
  .foot-grid{grid-template-columns:1fr}
  .now-meta{text-align:left}
  .chart-cover{min-height:280px}
}
@media (max-width:600px){
  .soc{display:none}
  .brand span{display:none}
  .sched-grid{grid-template-columns:1fr}
  .prog{min-height:160px}
  .trend-grid{grid-template-columns:1fr}
  .hero-mini{grid-template-columns:1fr 1fr}
  .big-play{width:92px;height:92px}
  .big-play svg{width:36px;height:36px}
  .vol{display:none}
  .pod-cards{grid-template-columns:1fr 1fr}
  .rk{grid-template-columns:auto 28px 1fr;gap:10px}
  .rk .mv{display:none}
  .rk .n{font-size:28px;width:34px}
  .wrap > .spark{display:none}
  .foot-bottom{border-radius:20px;justify-content:center;text-align:center}
  .top-actions .btn{padding:9px 14px}
  .feature{min-height:320px;padding:20px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- añadidos para la versión con panel ---------- */
.listen-on button{width:46px;height:46px;border-radius:50%;background:var(--blue);display:grid;place-items:center;border:0;transition:.2s}
.listen-on button:hover{background:var(--orange)}
.sched-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:30px 0;margin:0}
a.feature,a.card,a.ep{color:inherit;text-decoration:none}
a.card:hover,a.ep:hover{border-color:var(--yellow)}
.prog[style*="background-image"]::before{background:linear-gradient(to top,rgba(5,11,38,.95),rgba(5,11,38,.2) 70%)}
.vote button:disabled{cursor:default;opacity:.7}
.article{max-width:760px;margin:0 auto}
.article .cover{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:16/9;max-width:100%;margin:22px 0}
.article h1{font-family:var(--f-display);font-weight:400;text-transform:uppercase;font-size:clamp(30px,5vw,52px);line-height:1}
.article .meta{margin-top:12px}
.article .body{font-size:18px;line-height:1.7;color:var(--cream)}
.article .body p{margin:0 0 1.1em}
.back{display:inline-flex;gap:6px;align-items:center;color:var(--yellow);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.08em}
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
@media (max-width:900px){.more-grid{grid-template-columns:1fr}}