/* ==========================================================================
   YoSoyHipHopMusic — portada (fiel al mockup aprobado; medidas base 1536 px)
   ========================================================================== */
:root{
  --bg:#08080a; --panel:rgba(17,17,20,.92); --panel-2:#131316; --panel-3:#1a1a1e; --line:rgba(255,255,255,.085); --line-2:rgba(255,255,255,.05);
  --red:#e3202d; --red-2:#b3121c; --red-glow:rgba(227,32,45,.45);
  --text:#f3f3f5; --muted:#a5a5ae; --muted-2:#7a7a84;
  --head:"Roboto Condensed","Barlow Condensed",Impact,sans-serif; --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:10px; --side:235px;
}
*,*::before,*::after{box-sizing:border-box;}
html{background:var(--bg);-webkit-text-size-adjust:100%;}
body{margin:0;min-height:100vh;color:var(--text);font:14px/1.45 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:
    radial-gradient(520px 420px at 6% 52%,rgba(150,20,28,.22),transparent 70%),
    radial-gradient(640px 520px at 98% 92%,rgba(130,18,26,.16),transparent 70%),
    radial-gradient(900px 600px at 40% 8%,rgba(60,60,70,.18),transparent 70%),
    linear-gradient(180deg,#0b0b0d,#070708 60%);background-attachment:fixed;}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.35;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
button{font:inherit;color:inherit;}
.ic{width:20px;height:20px;flex-shrink:0;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;}

/* ---------- Estructura (rejilla de la portada) ---------- */
.ys{position:relative;z-index:1;display:grid;grid-template-columns:var(--side) minmax(0,1fr);
  grid-template-areas:"side main" "mid mid" "bot bot" "foot foot";
  column-gap:5px;padding:0 11px 18px 0;max-width:1920px;margin:0 auto;}
.ys-side{grid-area:side;}
.ys-main{grid-area:main;min-width:0;display:flex;flex-direction:column;}
.ys-mid{grid-area:mid;}
.ys-bot{grid-area:bot;}
.ys-foot{grid-area:foot;}
.ys-mid,.ys-bot,.ys-foot{margin-left:18px;}

/* ---------- Barra lateral ---------- */
.ys-side{display:flex;flex-direction:column;padding:0 13px 10px 18px;min-height:100%;
  background:linear-gradient(180deg,rgba(14,14,16,.88),rgba(12,12,14,.72));border-right:1px solid var(--line-2);}
.ys-side > *{flex-shrink:0;}
.ys-social{margin-top:auto;}
.ys-logo{display:block;width:178px;margin:4px auto 6px 4px;}
.ys-logo img{width:100%;height:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));}
.ys-tvbtn{display:flex;align-items:center;gap:16px;height:41px;margin:1px 0 12px;padding:0 15px;border-radius:6px;
  background:linear-gradient(180deg,#ec2533,#c4141f);box-shadow:0 0 0 1px rgba(255,90,100,.35) inset,0 8px 22px -6px var(--red-glow);
  font:700 17px/1 var(--head);letter-spacing:.02em;text-transform:uppercase;transition:filter .15s;}
.ys-tvbtn .ic{width:24px;height:24px;}
.ys-tvbtn:hover{filter:brightness(1.1);}
.ys-nav{display:flex;flex-direction:column;gap:0;}
.ys-nav a{display:flex;align-items:center;gap:16px;height:32px;padding:0 0 0 18px;border-radius:6px;font-size:13.6px;font-weight:500;color:#ececef;transition:background .15s,color .15s;}
.ys-nav a .ic{width:18px;height:18px;color:#d9d9de;}
.ys-nav a:hover,.ys-nav a.on{background:rgba(255,255,255,.05);color:#fff;}
.ys-nav a.on .ic{color:var(--red);}
.ys-social{margin-top:auto;padding:10px 10px 11px;border-radius:9px;background:rgba(20,20,23,.85);border:1px solid var(--line);}
.ys-social p{margin:0 0 8px;font-size:12px;color:var(--muted);white-space:nowrap;}
.ys-social div{display:flex;gap:7px;}
.ys-social a{width:24px;height:24px;border-radius:5px;transition:transform .15s;}
.ys-social a:hover{transform:translateY(-2px);}
.ys-social svg{width:24px;height:24px;display:block;}

/* ---------- Barra superior ---------- */
.ys-top{display:flex;align-items:center;gap:8px;height:45px;margin:10px 0 0 24px;}
.ys-topnav{display:flex;align-items:center;gap:3px;flex:1;min-width:0;}
.ys-topnav > a,.ys-more > button{display:inline-flex;align-items:center;height:40px;padding:0 14px;border-radius:6px;font:600 15px/1 var(--head);letter-spacing:.02em;text-transform:uppercase;color:#f0f0f2;white-space:nowrap;background:none;border:0;cursor:pointer;transition:color .15s,background .15s;}
.ys-topnav > a:hover,.ys-more > button:hover{background:rgba(255,255,255,.05);}
.ys-topnav > a.on{background:linear-gradient(180deg,#ec2533,#c4141f);box-shadow:0 0 0 1px rgba(255,90,100,.35) inset,0 8px 20px -8px var(--red-glow);padding:0 18px;}
.ys-more{position:relative;}
.ys-more > button{padding:0 12px;}
.ys-vsep{width:1px;height:30px;background:var(--line);margin:0 14px 0 2px;}
.ys-search{position:relative;width:250px;flex-shrink:0;}
.ys-search .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:#cfcfd5;}
.ys-search input{width:100%;height:37px;padding:0 12px 0 36px;border-radius:19px;border:1px solid rgba(255,255,255,.12);background:rgba(14,14,17,.85);color:#fff;font:12.3px var(--body);}
.ys-search input::placeholder{color:#b9b9c0;}
.ys-search input:focus{outline:none;border-color:rgba(227,32,45,.6);}
.ys-bell{display:grid;place-items:center;width:40px;height:40px;margin-left:30px;border-radius:50%;color:#fff;position:relative;}
.ys-bell .ic{width:22px;height:22px;fill:#fff;}
.ys-user{display:flex;align-items:center;gap:6px;margin-left:8px;}
.ys-user img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid #d9d9de;}
.ys-user .ic{width:16px;height:16px;color:#ddd;}
.ys-burger{display:none;}

/* ---------- Escenario: TV 24/7 + chat ---------- */
.ys-stage{display:grid;grid-template-columns:minmax(0,1fr) 233px;gap:9px;margin-top:8px;}
.tv-frame{padding:9px;border-radius:12px;background:#0c0c0e;border:1px solid var(--line);box-shadow:0 20px 50px -25px rgba(0,0,0,.9);}
.tv{container-type:inline-size;position:relative;aspect-ratio:1029/350;border-radius:8px;overflow:hidden;
  background:#111 url("/assets/img/hero-tv.jpg") center/cover no-repeat;}
.tv::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,transparent 22%,transparent 52%,rgba(0,0,0,.55) 78%,rgba(0,0,0,.82) 100%);}
.tv > *{position:absolute;z-index:2;}
.tv-live{left:1.17cqw;top:1.17cqw;display:flex;align-items:center;gap:.6cqw;height:2.53cqw;padding:0 1.1cqw;border-radius:.45cqw;background:#e3202d;font:700 1.36cqw/1 var(--head);letter-spacing:.03em;text-transform:uppercase;}
.tv-live .ic{width:1.1cqw;height:1.1cqw;}
.tv-viewers{left:10.2cqw;top:1.17cqw;display:flex;align-items:center;gap:.7cqw;height:2.53cqw;padding:0 1.1cqw;border-radius:.45cqw;background:rgba(10,10,12,.72);font-size:1.32cqw;font-weight:500;}
.tv-viewers .ic{width:1.75cqw;height:1.75cqw;}
.tv-now{left:10.2cqw;bottom:4.37cqw;display:flex;align-items:center;gap:1.2cqw;width:48.9cqw;height:8.45cqw;padding:.55cqw;border-radius:.6cqw;
  background:linear-gradient(90deg,rgba(14,14,16,.9),rgba(14,14,16,.78) 60%,rgba(14,14,16,.0));}
.tv-now img{height:100%;aspect-ratio:1;border-radius:.4cqw;object-fit:cover;}
.tv-now small{display:block;font:700 1.17cqw/1.2 var(--head);letter-spacing:.03em;text-transform:uppercase;color:#ef2b38;}
.tv-now small b{color:#fff;font-weight:700;}
.tv-now h2{margin:.25cqw 0 .3cqw;font:700 2.05cqw/1.05 var(--head);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;}
.tv-now p{margin:0;font-size:1.22cqw;color:#e3e3e7;white-space:nowrap;}
.tv-now p i{display:inline-block;width:1px;height:1cqw;margin:0 .6cqw;background:rgba(255,255,255,.4);font-style:normal;vertical-align:-.1cqw;}
.tv-wave{left:42.2cqw;top:24.3cqw;width:31cqw;height:2.4cqw;fill:rgba(255,255,255,.75);}
.tv-ctrl{left:2cqw;right:16.5cqw;bottom:1.05cqw;display:flex;align-items:center;height:3.4cqw;}
.tv-btn{display:grid;place-items:center;flex-shrink:0;background:none;border:0;cursor:pointer;color:#fff;padding:0;}
.tv-btn .ic{width:2cqw;height:2cqw;}
.tv-play{width:3.3cqw;height:3.3cqw;border-radius:50%;border:.18cqw solid rgba(255,255,255,.85);background:rgba(0,0,0,.25);}
.tv-play .ic{width:1.5cqw;height:1.5cqw;}
.tv-vol{margin-left:3.1cqw;}
.tv-bar{position:relative;width:22cqw;height:.36cqw;margin-left:3.3cqw;border-radius:1cqw;background:rgba(255,255,255,.85);}
.tv-bar i{position:absolute;right:-.6cqw;top:50%;width:1.2cqw;height:1.2cqw;border-radius:50%;background:#e3202d;transform:translateY(-50%);box-shadow:0 0 .8cqw rgba(227,32,45,.8);}
.tv-bar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7%;border-radius:1cqw;background:#fff;}
.tv-livetxt{margin-left:2.6cqw;font:600 1.36cqw/1 var(--head);letter-spacing:.04em;}
.tv-share{margin-left:auto;}
.tv-q{margin-left:2.4cqw;padding:.55cqw 1cqw;border-radius:.5cqw;background:rgba(10,10,12,.7);font:600 1.32cqw/1 var(--body);}
.tv-full{margin-left:2.4cqw;}
.tv-sched{right:1cqw;top:1.46cqw;width:14.1cqw;height:31.4cqw;padding:1.17cqw;border-radius:.8cqw;background:rgba(9,9,11,.9);border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:.9cqw;}
.tv-sched-it + .tv-sched-it{padding-top:1.2cqw;border-top:1px solid rgba(255,255,255,.12);}
.tv-sched-h{display:flex;justify-content:space-between;margin-bottom:.9cqw;font:600 1.3cqw/1 var(--head);letter-spacing:.03em;text-transform:uppercase;}
.tv-sched-h span{font-family:var(--body);font-weight:500;font-size:1.17cqw;}
.tv-sched img{width:100%;aspect-ratio:116/65;object-fit:cover;border-radius:.35cqw;}
.tv-sched-it:last-child img{aspect-ratio:116/49;}
.tv-sched b{display:block;margin-top:.9cqw;font:700 1.42cqw/1.1 var(--head);letter-spacing:.02em;text-transform:uppercase;}
.tv-sched small{display:block;margin-top:.35cqw;font-size:1.12cqw;color:#cfcfd5;line-height:1.5;}

.chat{display:flex;flex-direction:column;margin:9px 0;contain:size;min-height:0;border-radius:var(--r);background:rgba(10,10,12,.94);border:1px solid var(--line);overflow:hidden;}
.chat-h{display:flex;align-items:center;gap:10px;height:40px;margin:0 12px;border-bottom:1px solid var(--line);font:500 15px/1 var(--body);text-transform:uppercase;letter-spacing:.01em;}
.chat-h .ic{width:17px;height:17px;}
.chat-h span{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:14px;text-transform:none;}
.chat-h span .ic{width:16px;height:16px;}
.chat-list{flex:1;list-style:none;margin:0;padding:5px 10px 4px 12px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#3a3a40 transparent;}
.chat-list li{display:flex;gap:10px;padding:2px 0 3px;min-width:0;}
.chat-list li > div{min-width:0;}
.chat-list li > img{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0;margin-top:1px;}
.chat-list p img.fl{display:inline-block;width:16px;height:12px;margin:0 0 -1px 2px;border-radius:2px;}
.chat-list b{font-size:12.5px;font-weight:500;line-height:1.25;}
.chat-list em{margin-left:6px;font-style:normal;font-size:10.5px;color:var(--muted-2);}
.chat-list p{margin:0;font-size:12px;line-height:1.25;color:#ececf0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-f{display:flex;align-items:center;gap:10px;padding:8px 10px 10px;}
.chat-f label{flex:1;position:relative;}
.chat-f input{width:100%;height:37px;padding:0 36px 0 12px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#151518;color:#fff;font:12.5px var(--body);}
.chat-f input::placeholder{color:#8f8f97;}
.chat-f label .ic{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:#ccc;}
.chat-f button{background:none;border:0;padding:0;cursor:pointer;color:#fff;}
.chat-f button .ic{width:22px;height:22px;}

/* ---------- Tarjetas de sección ---------- */
.ys-cards{display:grid;grid-template-columns:261fr 259fr 258fr 258fr 209fr;gap:9px;margin-top:10px;}
.sc{position:relative;display:flex;flex-direction:column;justify-content:center;height:140px;padding:0 20px;border-radius:9px;overflow:hidden;
  background:#111 center right/cover no-repeat;border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(0,0,0,.4);transition:transform .2s,border-color .2s;}
.sc::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,10,.92) 0%,rgba(8,8,10,.7) 38%,rgba(8,8,10,0) 70%);}
.sc > *{position:relative;}
.sc:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.2);}
.sc .h3{margin:0;font:700 23.5px/1 var(--head);letter-spacing:.01em;text-transform:uppercase;}
.sc p{margin:7px 0 13px;font-size:12.5px;line-height:1.35;color:#e2e2e6;white-space:pre-line;}
.sc .btn-o{align-self:flex-start;}
.btn-o{display:inline-flex;align-items:center;gap:9px;height:29px;padding:0 13px;border-radius:5px;border:1.5px solid rgba(255,255,255,.75);background:rgba(10,10,12,.45);
  font:700 12.5px/1 var(--head);letter-spacing:.04em;text-transform:uppercase;transition:background .15s;}
.btn-o .ic{width:15px;height:15px;}
.btn-o:hover{background:rgba(255,255,255,.1);}
.btn-o.red{border-color:#e3202d;}
.btn-o.red:hover{background:rgba(227,32,45,.2);}
.btn-o.blue{border-color:#5f8fc9;}
.sc-red h3{color:#fff;}

/* ---------- Paneles ---------- */
.pn{position:relative;padding:12px 13px 10px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);min-width:0;}
.pn-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 11px;}
.pn-h h2{margin:0;font:700 19.5px/1 var(--head);letter-spacing:.02em;text-transform:uppercase;}
.pn-h a{font-size:12.5px;color:#d0d0d6;white-space:nowrap;}
.pn-h a:hover{color:#fff;}

.ys-mid{display:grid;grid-template-columns:730fr 460fr 292fr;gap:12px;margin-top:17px;}
.ys-bot{display:grid;grid-template-columns:850fr 290fr 339fr;gap:12px;margin-top:12px;}

/* Nueva música */
.songs{display:grid;grid-template-columns:repeat(6,1fr);gap:15px;}
.song-cv{position:relative;display:block;aspect-ratio:104/100;border-radius:5px;overflow:hidden;background:#151518;border:1px solid rgba(255,255,255,.1);}
.song-cv img{width:100%;height:100%;object-fit:cover;transition:transform .3s;}
.song:hover .song-cv img{transform:scale(1.05);}
.play-c{position:absolute;right:6%;bottom:12%;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(15,15,18,.85);border:1px solid rgba(255,255,255,.25);color:#fff;transition:background .15s,transform .15s;}
.play-c .ic{width:12px;height:12px;margin-left:2px;}
.song:hover .play-c{background:#e3202d;transform:scale(1.08);}
.song b{display:block;margin-top:7px;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.song small{display:block;font-size:12.5px;color:#7fa1d6;}

/* Artistas destacados */
.artists{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center;}
.art-av{position:relative;display:block;width:100%;max-width:105px;aspect-ratio:1;margin:0 auto;border-radius:50%;}
.art-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.12);}
.art-av.hot img{border:3px solid #e3202d;box-shadow:0 0 18px -2px rgba(227,32,45,.6);}
.art-av .vf{position:absolute;right:4%;bottom:6%;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:#1d8cf0;border:2px solid #0d0d10;color:#fff;}
.art-av .vf .ic{width:11px;height:11px;stroke-width:3.4;}
.artists b{display:block;margin-top:8px;font:700 15.5px/1.1 var(--head);letter-spacing:.01em;}
.artists small{font-size:11.5px;color:var(--muted);}

/* Top 10 semanal */
.top10{padding-top:3px;padding-bottom:3px;}
.top10 .pn-h{margin-bottom:3px;}
.tops{list-style:none;margin:0;padding:0;}
.tops li{display:grid;grid-template-columns:24px 35px minmax(0,1fr) auto 28px;align-items:center;gap:10px;height:35px;border-bottom:1px solid var(--line-2);}
.tops li:last-child{border-bottom:0;}
.tops .n{font:600 16px/1 var(--body);text-align:center;}
.tops img{width:35px;height:35px;border-radius:4px;object-fit:cover;}
.tops b{display:block;font-size:12.5px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tops small{display:block;font-size:12px;color:var(--muted);line-height:1.2;}
.tops .pl{font-size:12.5px;color:#d6d6dc;}
.tops .pb{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:transparent;color:#fff;transition:background .15s,color .15s;}
.tops .pb .ic{width:15px;height:15px;margin-left:2px;}
.tops li:hover .pb{background:#e3202d;}
.tops li:hover .pb .ic{width:11px;height:11px;}

/* Noticias */
.news{display:grid;grid-template-columns:209fr 198fr 198fr 195fr;gap:12px;}
.nw{display:block;border-radius:7px;overflow:hidden;background:#111114;border:1px solid rgba(255,255,255,.08);}
.nw-img{display:block;position:relative;aspect-ratio:209/96;background:#1a1a1e center/cover;}
.nw-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.75));}
.nw-tag{position:absolute;z-index:1;left:8px;bottom:6px;padding:3px 6px;border-radius:3px;background:rgba(0,0,0,.6);font:700 9.5px/1 var(--body);letter-spacing:.04em;text-transform:uppercase;}
.nw-time{position:absolute;z-index:1;right:9px;bottom:7px;font-size:11px;color:#e6e6ea;}
.nw-b{display:block;padding:8px 9px 9px;}
.nw h3{margin:0 0 5px;font:700 15px/1.12 var(--head);letter-spacing:.005em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.nw p{margin:0;font-size:11.5px;line-height:1.35;color:#c2c2c9;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.nw:hover h3{color:#ff4b56;}

/* Próximos eventos */
.evs{display:flex;flex-direction:column;gap:9px;}
.ev{display:flex;gap:9px;padding:6px;border-radius:7px;background:#131316;border:1px solid rgba(255,255,255,.07);}
.ev-d{display:flex;flex-direction:column;align-items:center;justify-content:center;width:49px;flex-shrink:0;border-radius:5px;background:linear-gradient(180deg,#e3202d,#b3121c);}
.ev-d b{font:700 27px/1 var(--head);}
.ev-d span{font:600 14px/1 var(--head);text-transform:uppercase;}
.ev-b{flex:1;min-width:0;}
.ev-b h3{margin:2px 0 1px;font:700 12.5px/1.2 var(--body);text-transform:uppercase;letter-spacing:.01em;}
.ev-b p{margin:0;font-size:11.5px;color:#c8c8cf;}
.ev-f{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:4px;padding-top:4px;border-top:1px solid var(--line-2);}
.ev-f .btn-r{padding:0 7px;font-size:8px;letter-spacing:.01em;flex-shrink:0;}
.ev-f small{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.btn-r{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:24px;padding:0 9px;border-radius:4px;background:linear-gradient(180deg,#ec2533,#c4141f);font:700 9px/1 var(--body);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;box-shadow:0 6px 14px -6px var(--red-glow);transition:filter .15s;}
.btn-r:hover{filter:brightness(1.12);}
.btn-r .ic{width:13px;height:13px;}

/* Únete al ecosistema */
.eco .pn-h h2{font-size:15.5px;}
.eco-g{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1fr);gap:6px;}
.eco-art{border-radius:6px;background:#0d0d10 center/cover;min-height:150px;border:1px solid rgba(255,255,255,.06);}
.eco-c{display:flex;flex-direction:column;min-width:0;padding:10px 10px 10px;border-radius:7px;background:#141417;border:1px solid rgba(255,255,255,.07);}
.eco-c b{font:700 15px/1.1 var(--head);letter-spacing:.01em;}
.eco-c p{margin:5px 0 10px;font-size:11px;line-height:1.4;color:#c6c6cd;flex:1;}
.eco-c .btn-r{height:33px;font-size:9.5px;padding:0 6px;max-width:100%;overflow:hidden;}
.eco-c .btn-r .ic{width:12px;height:12px;}

/* Pie */
.ys-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;margin-top:18px;padding:14px 4px 0;border-top:1px solid var(--line-2);font-size:12px;color:var(--muted-2);}
.ys-foot nav{display:flex;flex-wrap:wrap;gap:6px 16px;}
.ys-foot a:hover{color:#fff;}

/* Aviso flotante */
.toast{position:fixed;left:50%;bottom:24px;z-index:60;transform:translate(-50%,20px);opacity:0;padding:12px 18px;border-radius:10px;background:#18181c;border:1px solid var(--line);box-shadow:0 18px 40px -12px rgba(0,0,0,.8);font-size:13px;transition:all .25s;pointer-events:none;}
.toast.show{opacity:1;transform:translate(-50%,0);}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1500px){
  .ys-topnav > a{padding:0 11px;font-size:14.5px;}
  .ys-bell{margin-left:10px;}
  .ys-search{width:210px;}
}
@media (max-width:1480px){
  .eco-g{grid-template-columns:48px minmax(0,1fr) minmax(0,1fr);}
  .eco-c{padding:9px 8px;}
  .eco-c p{font-size:10.5px;}
  .eco-c .btn-r{font-size:8.6px;gap:4px;}
}
@media (max-width:1400px){
  .ys-nav a{height:28px;}
  .pn-h h2{font-size:17.5px;}
  .nw-time{font-size:10px;right:7px;}
  .nw-tag{font-size:8.5px;}
}
@media (max-width:1360px){
  .eco-art{display:none;}
  .eco-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .eco-c .btn-r{font-size:8.4px;}
  .nw-time{display:none;}
}
@media (max-width:1280px){
  .ys-topnav > a:nth-child(n+8){display:none;}
  .ys-stage{grid-template-columns:minmax(0,1fr) 220px;}
  .songs{grid-template-columns:repeat(5,1fr);}
  .songs .song:nth-child(6){display:none;}
}
/* Tablet: barra lateral como cajón */
@media (max-width:1100px){
  .ys{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "mid" "bot" "foot";padding:0 14px 16px;}
  .ys-mid,.ys-bot,.ys-foot{margin-left:0;}
  .ys-side{contain:none;position:fixed;left:0;top:0;bottom:0;z-index:50;width:270px;transform:translateX(-102%);transition:transform .25s;overflow-y:auto;background:#0c0c0e;}
  body.nav-open .ys-side{transform:none;box-shadow:20px 0 60px rgba(0,0,0,.7);}
  body.nav-open .ys::before{content:"";position:fixed;inset:0;z-index:45;background:rgba(0,0,0,.6);}
  body.nav-open{overflow:hidden;}
  .ys-side{z-index:50;height:100dvh;padding-bottom:max(16px,env(safe-area-inset-bottom));}
  .ys-social{margin-top:16px;}
  .ys-top{margin:10px 0 0;gap:10px;}
  .ys-burger{display:grid;place-items:center;width:40px;height:40px;border-radius:8px;border:1px solid var(--line);background:rgba(14,14,17,.85);cursor:pointer;}
  .ys-mlogo{display:block;width:118px;}
  .ys-topnav > a:nth-child(n+6){display:none;}
  .ys-vsep{display:none;}
  .ys-stage{grid-template-columns:1fr;}
  .chat{margin:0;height:300px;contain:none;}
  .ys-cards{grid-template-columns:repeat(3,1fr);}
  .ys-mid{grid-template-columns:1fr 1fr;}
  .ys-mid .newmusic{grid-column:1/-1;}
  .songs{grid-template-columns:repeat(6,1fr);}
  .songs .song:nth-child(6){display:block;}
  .ys-bot{grid-template-columns:1fr 1fr;}
  .ys-bot .newsp{grid-column:1/-1;}
}
@media (min-width:1101px){ .ys-mlogo{display:none;} }
/* Móvil */
@media (max-width:760px){
  body{font-size:14px;}
  .ys{padding:0 12px 14px;}
  .ys-top{height:52px;margin-top:6px;}
  .ys-topnav{display:none;}
  .ys-search{flex:1;width:auto;}
  .ys-bell{margin-left:0;}
  .ys-user .ic{display:none;}
  .ys-user img{width:36px;height:36px;}
  .tv-frame{padding:6px;}
  .tv{aspect-ratio:16/10;background-position:42% center;}
  .tv-live{left:10px;top:10px;height:24px;padding:0 9px;font-size:13px;gap:5px;border-radius:5px;}
  .tv-live .ic{width:10px;height:10px;}
  .tv-viewers{left:auto;right:10px;top:10px;height:24px;padding:0 9px;font-size:12px;gap:6px;border-radius:5px;}
  .tv-viewers .ic{width:15px;height:15px;}
  .tv-sched,.tv-wave,.tv-share,.tv-livetxt{display:none;}
  .tv-now{left:10px;right:10px;bottom:54px;width:auto;height:66px;gap:10px;padding:6px;border-radius:8px;}
  .tv-now img{border-radius:6px;}
  .tv-now small{font-size:11px;}
  .tv-now h2{font-size:19px;margin:3px 0;white-space:normal;}
  .tv-now p{font-size:12px;}
  .tv-now p i{height:10px;margin:0 6px;}
  .tv-ctrl{left:10px;right:10px;bottom:10px;height:36px;}
  .tv-btn .ic{width:20px;height:20px;}
  .tv-play{width:36px;height:36px;border-width:2px;}
  .tv-play .ic{width:15px;height:15px;}
  .tv-vol{margin-left:12px;}
  .tv-bar{flex:1;width:auto;height:4px;margin:0 16px 0 12px;}
  .tv-bar i{width:12px;height:12px;right:-6px;}
  .tv-q{margin-left:8px;padding:6px 9px;font-size:12px;border-radius:6px;}
  .tv-full{margin-left:10px;}
  .chat{height:320px;}
  /* Carruseles horizontales */
  .ys-cards,.songs,.artists,.news{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin-right:-12px;padding-right:12px;scrollbar-width:none;}
  .ys-cards::-webkit-scrollbar,.songs::-webkit-scrollbar,.artists::-webkit-scrollbar,.news::-webkit-scrollbar{display:none;}
  .sc{flex:0 0 78%;scroll-snap-align:start;height:132px;}
  .song{flex:0 0 38%;scroll-snap-align:start;}
  .songs .song:nth-child(6){display:block;}
  .artists > a{flex:0 0 30%;scroll-snap-align:start;}
  .nw{flex:0 0 76%;scroll-snap-align:start;}
  .ys-mid,.ys-bot{grid-template-columns:1fr;}
  .pn{padding:13px 12px;}
  .eco-g{grid-template-columns:52px 1fr 1fr;}
}
@media (max-width:420px){
  .eco-g{grid-template-columns:1fr 1fr;}
  .eco-art{display:none;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;}}

/* Páginas en construcción / 404 */
.inner .ys-stage.soon{display:block;}
.soon-box{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-height:430px;justify-content:center;padding:48px;border-radius:12px;
  background:linear-gradient(90deg,rgba(8,8,10,.94) 30%,rgba(8,8,10,.55)),url("/assets/img/hero-tv.jpg") center/cover;border:1px solid var(--line);}
.soon-box h1{margin:0;font:700 clamp(32px,5vw,56px)/1 var(--head);text-transform:uppercase;letter-spacing:.01em;}
.soon-box p{margin:0;max-width:520px;color:#d4d4da;font-size:16px;}
.soon-box .tv-live{height:28px;padding:0 12px;font-size:14px;gap:6px;border-radius:6px;}
.soon-box .tv-live .ic{width:12px;height:12px;}
@media (max-width:760px){ .soon-box{padding:28px 20px;min-height:340px;} }

/* ── Simetría de Nueva música · Artistas · Top (columnas que no se estiran con textos largos) ── */
.songs{grid-template-columns:repeat(6,minmax(0,1fr));}
.song{min-width:0;}
.song small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.artists{grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;}
.artists > a{min-width:0;}
.artists b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.2em;}
.tops li > div{min-width:0;overflow:hidden;}
.tops small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media (min-width:1101px) and (max-width:1560px){
  .ys-mid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);}
  .ys-mid .newmusic{grid-column:1/-1;}
}
@media (min-width:1101px) and (max-width:1280px){
  .songs{grid-template-columns:repeat(6,minmax(0,1fr));}
  .songs .song:nth-child(6){display:block;}
}
@media (max-width:1100px){ .songs{grid-template-columns:repeat(6,minmax(0,1fr));} }