/* Página Ao Vivo: palco com a capa no ar, painel "No ar", cartão de informações, vitrine e andamento do programa.
   --lv-accent / --lv-accent2 seguem a cor do que está no ar (live-stage.js); o play fica sempre azul. */
.lv{--lv-accent:var(--brand,#1f6bff);--lv-accent2:color-mix(in srgb,var(--brand,#1f6bff) 55%,#1f6bff);--lv-glass:rgba(10,24,56,.58);--lv-line:rgba(140,180,255,.2);--lv-muted:#a9b6d3;--lv-red:#ff3b4e;--lv-green:#22d27a;--lv-play:#1f6bff;
 position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;padding:48px 0;background:#06142e;color:#fff;min-height:calc(100vh - var(--lv-top,120px));min-height:calc(100svh - var(--lv-top,120px))}
.lv-backdrop{position:absolute;inset:-80px;z-index:-3}
.lv-backdrop img{width:100%;height:100%;object-fit:cover;filter:blur(48px) saturate(1.35);transform:scale(1.12);transition:opacity .6s}
.lv-backdrop:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,#06142e22,#06142e99 78%),linear-gradient(180deg,#06142e44,#06142ec4)}
.lv-fx{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1s}
body.is-playing .lv-fx{opacity:1}
.lv[data-fx=none] .lv-fx{display:none}
.lv-grid{position:relative;display:grid;grid-template-columns:330px minmax(0,1fr) 280px;grid-template-areas:"media panel shop" "info info next";gap:30px 28px;align-items:center;max-width:1400px}
.lv-media{grid-area:media;perspective:1200px}
.lv-panel{grid-area:panel;min-width:0}
.lv-aside{display:contents}
.lv-shop{grid-area:shop}
.lv-info{grid-area:info;align-self:stretch}
.lv-next{grid-area:next;align-self:stretch}
.lv .ri{width:20px;height:20px}

/* Cartão grande: gira como uma carta a cada troca do que está no ar */
.lv-card{position:relative;aspect-ratio:1;border-radius:30px;background:#0a1430;transform:rotateY(12deg) rotateZ(-2deg);transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.8,.2,1),box-shadow .8s;
 box-shadow:0 30px 80px #0009,0 0 0 2px color-mix(in srgb,var(--lv-accent) 60%,transparent),0 0 60px color-mix(in srgb,var(--lv-accent) 40%,transparent)}
.lv-media:hover .lv-card{transform:rotateY(3deg)}
.lv-faces{position:absolute;inset:0;border-radius:30px;overflow:hidden}
.lv-face{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0a1430;transition:opacity .9s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.lv-face.is-back{opacity:0}
.lv-face:not([src]){visibility:hidden}
.lv[data-anim=slide] .lv-face.is-back{opacity:1;transform:translateX(100%)}
.lv-card.show-b .lv-face.is-back{opacity:1;transform:none}
.lv-card.show-b .lv-face:not(.is-back){opacity:0}
.lv[data-anim=slide] .lv-card.show-b .lv-face:not(.is-back){opacity:1;transform:translateX(-100%)}
.lv-tag{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:8px;max-width:calc(100% - 32px);padding:7px 13px;border:1px solid var(--lv-line);border-radius:999px;background:#06142ed9;backdrop-filter:blur(8px);font-size:12px;font-weight:700}
.lv-tag>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lv-tag i{width:8px;height:8px;flex:none;border-radius:50%;background:var(--lv-accent)}
.lv-ring{position:absolute;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);overflow:visible;pointer-events:none}
.lv-ring rect{fill:none;stroke:#ffffff1a;stroke-width:4;stroke-linecap:round}
.lv-ring .lv-ring-progress{stroke:var(--lv-accent);transition:stroke-dashoffset 1s}
.lv:not([data-progress=ring]) .lv-ring-progress{display:none}

/* Painel central */
.lv-panel{position:relative;display:flex;flex-direction:column;gap:14px;padding:24px 28px;border:1px solid var(--lv-line);border-radius:28px;background:var(--lv-glass);backdrop-filter:blur(18px);box-shadow:0 30px 90px #0008,inset 0 1px #ffffff14}
.lv-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lv-live{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid #ff3b4e66;border-radius:999px;background:#ff3b4e22;font-family:RadioDisplay,Inter,sans-serif;font-size:17px;font-weight:700;text-transform:uppercase}
.lv-live i{width:10px;height:10px;border-radius:50%;background:var(--lv-red);animation:lv-pulse 1.6s infinite}
@keyframes lv-pulse{0%{box-shadow:0 0 0 0 #ff3b4e99}70%,100%{box-shadow:0 0 0 10px transparent}}
.lv-station{display:flex;flex-direction:column;line-height:1.15;padding-left:12px;border-left:1px solid var(--lv-line)}
.lv-station strong{font-family:RadioDisplay,Inter,sans-serif;font-size:17px;text-transform:uppercase}
.lv-station span{font-size:11px;color:var(--lv-muted)}
.lv-spacer{flex:1}
.lv-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border:1px solid #ffffff3a;border-radius:12px;background:#ffffff0d;color:#fff;font-family:RadioDisplay,Inter,sans-serif;font-size:16px;font-weight:700;text-transform:uppercase;cursor:pointer;transition:background .2s}
.lv-btn:hover{background:#ffffff1f}
.lv-btn.is-accent{border-color:transparent;background:var(--lv-accent);color:#0a1430;box-shadow:0 8px 26px color-mix(in srgb,var(--lv-accent) 40%,transparent)}
.lv-btn.is-back,.lv.is-watching .lv-btn.is-accent:not(.is-back){display:none}
.lv.is-watching .lv-btn.is-back{display:inline-flex}
.lv-btn .lv-studio-mobile-label{display:none}
.lv-head{position:relative;padding-right:180px;min-height:200px}
.lv-onair{margin:0;font-family:RadioDisplay,Inter,sans-serif;font-size:clamp(54px,5.6vw,92px);font-weight:700;line-height:.9;text-transform:uppercase}
.lv-call{margin:8px 0 0;font-size:18px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:#dce5ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-wave{display:flex;align-items:center;gap:4px;height:84px;margin-top:16px;overflow:hidden}
.lv-wave b{flex:1;max-width:5px;min-width:2px;height:12%;border-radius:4px;background:linear-gradient(var(--lv-accent),var(--lv-accent2));transition:height .3s}
body.is-playing .lv-wave b{animation:lv-wave 1s ease-in-out infinite alternate;animation-delay:var(--d)}
@keyframes lv-wave{to{height:var(--h)}}
/* The play button sits in the head grid on desktop; the votes beside it are for the phone layout */
.lv-controls{position:absolute;right:42px;top:112px;display:flex;align-items:center;gap:30px}
.lv-controls .lv-vote{display:none}
.lv-play{position:relative;display:grid;place-items:center;width:130px;height:130px;border:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4b8dff,var(--lv-play) 60%,#0b3fb8);color:#fff;cursor:pointer;box-shadow:0 18px 50px #1f6bff80,inset 0 2px #ffffff40,0 0 0 16px #1f6bff1c,0 0 0 17px #1f6bff55;transition:transform .2s}
.lv-play:hover{transform:scale(1.04)}
.lv-play .ri{width:46px;height:46px}
.lv-ripple{position:absolute;inset:0;border-radius:50%;border:1px solid #4b8dff;opacity:0;pointer-events:none;animation:lv-ripple 3s cubic-bezier(.2,.6,.3,1) infinite}
body.is-playing .lv-ripple{animation-duration:2.2s;border-width:1.5px}
@keyframes lv-ripple{0%{transform:scale(.95);opacity:.75}100%{transform:scale(1.9);opacity:0}}

/* Andamento do programa: anel (no cartão), barra, contorno ou contorno duplo */
.lv-program{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:14px 20px;border:1px solid var(--lv-line);border-radius:16px;background:#06142e80}
.lv-program-copy{display:flex;flex-direction:column;min-width:0;flex:1}
.lv-program-copy strong{font-family:RadioDisplay,Inter,sans-serif;font-size:20px;font-weight:700;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-program-copy span{font-size:13px;color:var(--lv-muted)}
.lv-program-time{display:none;font-size:13px;color:var(--lv-muted);font-variant-numeric:tabular-nums}
.lv-pill{padding:5px 12px;border-radius:999px;background:var(--lv-accent);color:#0a1430;font-family:RadioDisplay,Inter,sans-serif;font-size:15px;font-weight:700}
.lv-program-bar{display:none;flex-basis:100%;height:5px;border-radius:5px;background:#ffffff1c;overflow:hidden}
.lv-program-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#ffd400,var(--lv-accent) 55%,#ff3b6b);transition:width 1s}
.lv:not([data-progress=ring]) .lv-program-time{display:block}
.lv:not([data-progress=ring]) .lv-pill{display:none}
.lv[data-progress=bar] .lv-program-bar{display:block}
.lv[data-progress=bar] .lv-program-copy strong{color:var(--lv-accent)}
.lv-outline,.lv-split{display:none;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.lv[data-progress=line] .lv-outline,.lv[data-progress=split] .lv-split{display:block}
.lv-outline rect{x:1.5px;y:1.5px;width:calc(100% - 3px);height:calc(100% - 3px);fill:none;stroke-width:3;stroke-linecap:round}
.lv-split path{fill:none;stroke-width:3;stroke-linecap:round}
.lv-outline-track,.lv-split-track{stroke:#ffffff14}
.lv-outline-progress,.lv-split-progress{stroke:var(--lv-time,#22d27a);filter:drop-shadow(0 0 6px var(--lv-time,#22d27a));transition:stroke-dashoffset 1s,stroke .8s}
.lv.is-ending .lv-ring-progress,.lv.is-ending .lv-program-bar i,.lv.is-ending .lv-outline-progress,.lv.is-ending .lv-split-progress{animation:lv-blink 1.4s ease-in-out infinite}
@keyframes lv-blink{50%{opacity:.3}}

/* Estúdio: o vídeo assume o painel */
.lv-video{display:none;position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000}
.lv-video .live-screen video{display:block;object-fit:cover}
.lv-video .live-screen video:fullscreen{object-fit:contain}
.lv.is-watching .lv-video{display:block}
.lv.is-watching .lv-head,.lv.is-watching .lv-controls,.lv.is-watching .lv-media,.lv.is-watching .lv-shop,.lv.is-watching .lv-program,.lv.is-watching .lv-next{display:none}
.lv.is-watching .lv-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"panel" "info";max-width:1180px}

/* Vitrine: destaques da home; trava no anunciante durante o spot */
.lv-shop{position:relative;display:block;aspect-ratio:3/4.1;border-radius:26px;overflow:hidden;transform:perspective(1200px) rotateY(-11deg) rotateZ(1.5deg);transition:transform .8s;box-shadow:0 30px 80px #0009,0 0 0 1px var(--lv-line),0 0 50px #1f6bff40}
.lv-shop:hover{transform:perspective(1200px) rotateY(-3deg)}
.lv-slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:22px;color:#fff;text-decoration:none;opacity:0;pointer-events:none;transition:opacity .8s;background:var(--img,none) center/cover,#0b2a6b}
.lv-slide:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,#030b1ef2)}
.lv-slide>*{position:relative;z-index:1}
.lv-slide.is-on{opacity:1;pointer-events:auto}
.lv-slide-kind{align-self:flex-start;padding:5px 10px;border-radius:999px;background:#ffffff26;backdrop-filter:blur(6px);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.lv-slide strong{font-family:RadioDisplay,Inter,sans-serif;font-size:26px;font-weight:700;line-height:1.02;text-transform:uppercase;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lv-slide small{font-size:13px;color:#d3dcf3}
.lv-slide em{font-style:normal;font-size:13px;font-weight:800;color:var(--lv-accent)}
.lv-slide.is-brand{align-items:center;justify-content:center;text-align:center;background:linear-gradient(160deg,#123a9c,#06142e)}
.lv-slide.is-brand:after{display:none}
.lv-slide.is-brand img{width:62%;height:auto;border-radius:22px;margin-bottom:12px}
.lv-slide.is-advertiser{background:#fff;color:#0a1430}
.lv-slide.is-advertiser:after{background:linear-gradient(transparent 45%,#030b1ef2)}
.lv-slide.is-advertiser strong{color:#fff}
.lv-shop-dots{position:absolute;top:16px;right:16px;z-index:3;display:flex;gap:5px}
.lv-shop-dots i{width:7px;height:7px;border-radius:9px;background:#ffffff60;transition:.3s}
.lv-shop-dots i.is-on{width:22px;background:#fff}
.lv-shop-lock{position:absolute;top:14px;left:14px;z-index:3;display:none;padding:5px 10px;border-radius:999px;background:var(--lv-red);font-size:11px;font-weight:800}
.lv-shop.is-locked .lv-shop-lock{display:block}
.lv-shop.is-locked .lv-shop-dots{display:none}

/* Cartão de informações */
.lv-info,.lv-next{position:relative;display:block;padding:18px 22px;border:1px solid var(--lv-line);border-radius:22px;background:var(--lv-glass);backdrop-filter:blur(18px);box-shadow:0 20px 60px #0007;color:#fff;text-decoration:none;overflow:hidden}
.lv-info-head{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-family:RadioDisplay,Inter,sans-serif;font-size:18px;font-weight:700;text-transform:uppercase;color:var(--lv-accent)}
.lv-info-head [data-lv-head-icon]{display:none}
.lv[data-track-kind=music] [data-lv-head-icon=music],.lv[data-track-kind=info] [data-lv-head-icon=info],.lv[data-track-kind=commercial] [data-lv-head-icon=commercial],.lv[data-track-kind=live] [data-lv-head-icon=live]{display:block}
.lv-info-body{display:flex;align-items:center;gap:18px}
@keyframes lv-in{from{opacity:0;transform:translateY(8px)}}
.lv-thumb{flex:none;width:76px;height:76px;border-radius:14px;overflow:hidden;background:#0a1430;box-shadow:0 10px 30px #0008}
.lv-thumb img{width:100%;height:100%;object-fit:cover}
.lv-info-copy{display:flex;flex-direction:column;min-width:0;flex:1}
.lv-info-title{color:inherit;text-decoration:none}
.lv-info-title strong{display:block;font-family:RadioDisplay,Inter,sans-serif;font-size:28px;font-weight:700;line-height:1.05;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.lv-info-title[href]:hover strong{color:var(--lv-accent)}
.lv-info-sub{margin-top:4px;font-size:14px;color:#d6def3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-info-sub b{color:var(--lv-accent)}
.lv[data-track-kind=music] .lv-info-sub{text-transform:uppercase;letter-spacing:.05em;color:var(--lv-muted)}
.lv-song-bar{width:min(320px,100%);height:4px;margin-top:10px;border-radius:4px;background:#ffffff1f;overflow:hidden}
.lv-song-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--lv-accent2),var(--lv-accent));transition:width 1s linear}
.lv-links,.lv-advertiser-links{display:flex;flex-wrap:nowrap;gap:10px}
.lv-advertiser{display:contents}
.lv-advertiser[hidden]{display:none}
.lv-advertiser [data-advertiser-name],.lv-advertiser p{display:none}
.lv-icon,.lv-advertiser .advertiser-link{position:relative;display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:50%;color:#fff;background:#2f6bff;box-shadow:0 6px 18px #0006;transition:transform .2s,filter .2s}
.lv-icon:hover,.lv-advertiser .advertiser-link:hover{transform:translateY(-3px);filter:brightness(1.12)}
.lv-icon .ri,.lv-advertiser .advertiser-link .ri{width:22px;height:22px}
.lv-advertiser .advertiser-tile{display:grid;place-items:center}
.lv-advertiser .advertiser-caption,.lv-advertiser .is-page{display:none}
.is-whatsapp.lv-icon,.lv-advertiser .is-whatsapp{background:#25d366}
.is-instagram.lv-icon,.lv-advertiser .is-instagram{background:radial-gradient(circle at 30% 107%,#fdf497 0,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.is-facebook.lv-icon,.lv-advertiser .is-facebook{background:#1877f2}
.is-youtube.lv-icon{background:#ff0033}
.is-phone.lv-icon,.lv-advertiser .is-phone{background:#0ea5e9}
.is-website.lv-icon,.lv-advertiser .is-website{background:#2f6bff}
.is-map.lv-icon{background:#ea4335}
.lv-icon.is-cta{width:auto;padding:0 16px;gap:8px;border-radius:999px;font-size:13px;font-weight:800;color:#04210f;background:#25d366}
.lv-votes{display:flex;gap:12px;flex:none}
.lv-votes button,.lv-vote button{display:grid;place-items:center;width:58px;height:58px;border:2px solid;border-radius:50%;cursor:pointer;transition:transform .2s,background .2s}
.lv-votes button .ri,.lv-vote button .ri{width:24px;height:24px}
.lv [data-vote=dislike]{color:var(--lv-red);border-color:#ff3b4e88;background:#ff3b4e14}
.lv [data-vote=like]{color:var(--lv-green);border-color:#22d27a88;background:#22d27a14}
.lv [data-vote]:hover:not(:disabled){transform:translateY(-2px)}
.lv [data-vote=like][aria-pressed=true]{background:var(--lv-green);color:#06142e}
.lv [data-vote=dislike][aria-pressed=true]{background:var(--lv-red);color:#fff}
.lv [data-vote]:disabled:not([aria-pressed=true]){opacity:.45;cursor:default}

/* A seguir */
.lv-next-row{display:flex;align-items:center;gap:16px}
.lv-next-time{font-family:RadioDisplay,Inter,sans-serif;font-size:26px;font-weight:700;color:var(--lv-accent)}
.lv-next-copy{display:flex;flex-direction:column;min-width:0;flex:1}
.lv-next-copy strong{font-family:RadioDisplay,Inter,sans-serif;font-size:22px;font-weight:700;line-height:1.05;text-transform:uppercase;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lv-next-copy small{font-size:13px;color:var(--lv-muted)}
.lv-next-row>.ri{width:22px;height:22px;color:var(--lv-accent)}
.lv-soon{display:none;margin-left:auto;padding:4px 9px;border-radius:999px;background:var(--lv-accent);color:#0a1430;font-family:Inter,sans-serif;font-size:11px;font-weight:800;animation:lv-pulse 1.6s infinite}
.lv.is-ending .lv-soon{display:inline-block}

@media(max-width:1180px){
 .lv-grid{grid-template-columns:260px minmax(0,1fr);grid-template-areas:"media panel" "info info" "next shop"}
 .lv-shop{aspect-ratio:16/9;transform:none}
}
/* Celular: tela de app de música */
@media(max-width:760px){
 .lv{padding:14px 0 40px;min-height:0}
 .lv-grid{display:flex;flex-direction:column;align-items:stretch;gap:16px;width:calc(100% - 32px)}
 .lv-panel{display:contents}
 .lv-bar{order:1;gap:8px}
 .lv-station,.lv-btn span{display:none}
 .lv-btn{padding:10px}
 .lv-btn.is-accent span{display:inline}
 .lv-video{order:2}
 .lv-media{order:3;width:min(78vw,340px);margin:8px auto 0}
 .lv-info{order:4;padding:0;border:0;background:none;box-shadow:none;backdrop-filter:none;text-align:center}
 .lv-info-head{display:none}
 .lv-info-body{flex-direction:column;gap:12px}
 .lv-thumb,.lv-info .lv-votes{display:none}
 .lv-info-copy{align-items:center;width:100%}
 .lv-info-title strong{font-size:30px;max-width:86vw}
 .lv-song-bar{width:100%;max-width:340px}
 .lv-links,.lv-advertiser-links{flex-wrap:wrap;justify-content:center}
 .lv-head{order:5;display:block;padding:0;min-height:0;width:100%}
 .lv-onair,.lv-call{display:none}
 .lv-wave{height:34px;margin:0 auto;max-width:300px;justify-content:center}
 .lv-controls{order:6;position:static;justify-content:center;gap:30px}
 .lv-controls .lv-vote:not([hidden]){display:block}
 .lv-play{width:92px;height:92px;box-shadow:0 14px 40px #1f6bff80,inset 0 2px #ffffff40,0 0 0 8px #1f6bff1c,0 0 0 9px #1f6bff55}
 .lv-play .ri{width:34px;height:34px}
 .lv-vote button{width:54px;height:54px}
 .lv-program{order:7}
 .lv-next{order:8}
 .lv-shop{order:9;aspect-ratio:16/9;transform:none}
 .lv-slide{padding:16px}.lv-slide strong{font-size:20px;-webkit-line-clamp:2}.lv-slide small{display:none}
 .lv-next-time{font-size:20px}.lv-next-copy strong{font-size:18px}
}
@media(prefers-reduced-motion:reduce){.lv-card,.lv-face{transition:none}.lv-fx{display:none}body.is-playing .lv-wave b,.lv-ripple{animation:none}}
@media(min-width:1600px){.lv-grid{grid-template-columns:400px minmax(0,1fr) 330px;max-width:1600px;gap:36px 34px}.lv-panel{padding:30px 34px}.lv-onair{font-size:104px}.lv-play{width:150px;height:150px}.lv-controls{top:124px;right:52px}.lv-head{padding-right:200px;min-height:230px}}
/* Composição em camadas (desktop): o cartão grande e a vitrine invadem as bordas do painel "No ar" (deslocados com
   transform, sem mudar o tamanho deles) e a linha de baixo começa deslocada — nada de blocos alinhados em grade. */
@media(min-width:1181px){
 .lv{padding:64px 0 48px}
 .lv-grid{grid-template-columns:var(--lv-side,320px) minmax(0,1fr) var(--lv-shop,270px);column-gap:0;row-gap:26px}
 .lv-media{position:relative;z-index:3;justify-self:end;width:min(100%,50vh);transform:translateX(var(--lv-bite,70px))}
 .lv-panel{z-index:1;padding-left:calc(var(--lv-bite,70px) + 36px)}
 .lv-shop{position:relative;z-index:1;justify-self:end;width:calc(100% - 28px)}
 .lv-info{margin-left:calc(var(--lv-side,320px) * .45);margin-right:20px;z-index:2}
 .lv-next{z-index:2}
 .lv-media .lv-card{transform:rotateY(14deg) rotateZ(-3deg)}
}
@media(min-width:1600px){.lv-grid{--lv-side:400px;--lv-shop:330px;--lv-bite:90px}}
@media(min-width:1181px) and (max-width:1599px){
 .lv-grid{--lv-side:290px;--lv-shop:250px;--lv-bite:64px}
 .lv-station{display:none}
 .lv-btn{padding:10px 13px;font-size:15px}
 .lv-onair{font-size:72px}
 .lv-play{width:116px;height:116px}
}
/* O play fica sobre a linha da onda: a onda corre da esquerda e termina por baixo do botão. */
@media(min-width:761px){
 .lv-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;padding-right:0;min-height:0}
 .lv-onair,.lv-call{grid-column:1/-1}
 .lv-wave{grid-column:1;grid-row:3;height:110px;margin-top:10px;margin-right:-70px;-webkit-mask:linear-gradient(90deg,#000 80%,transparent);mask:linear-gradient(90deg,#000 80%,transparent)}
 .lv-controls{position:relative;inset:auto;grid-column:2;grid-row:3;z-index:1;margin-top:10px}
}
/* Proporção da arte: cartão da capa maior e mais alto que o painel; painel "No ar" mais baixo e largo; play menor. */
@media(min-width:1181px){
 .lv-grid{--lv-side:360px}
 .lv-media{width:min(100%,58vh)}
 .lv-panel{gap:10px;padding-top:18px;padding-bottom:18px}
 .lv-onair{font-size:clamp(50px,4.2vw,72px)}
 .lv-call{margin-top:4px;font-size:15px}
 .lv-wave{height:70px;margin-top:4px}
 .lv-controls{margin-top:4px}
 .lv-play{width:96px;height:96px;box-shadow:0 14px 40px #1f6bff80,inset 0 2px #ffffff40,0 0 0 10px #1f6bff1c,0 0 0 11px #1f6bff55}
 .lv-play .ri{width:34px;height:34px}
 .lv-program{padding:10px 18px}
 .lv-program-copy strong{font-size:18px}
}
@media(min-width:1600px){.lv-grid{--lv-side:440px}.lv-play{width:108px;height:108px}}
@media(min-width:1181px) and (max-width:1599px){.lv-grid{--lv-side:330px}.lv-play{width:88px;height:88px}.lv-onair{font-size:60px}}
/* Proporções medidas na arte de referência: capa em retrato (~3:4) um pouco mais alta que o painel; painel largo,
   com quase a mesma altura da capa; vitrine estreita em retrato. */
@media(min-width:1181px){
 .lv-grid{--lv-side:24%;--lv-shop:17%;--lv-bite:46px;grid-template-columns:var(--lv-side) minmax(0,1fr) var(--lv-shop);max-width:1560px}
 .lv-media{width:min(100%,calc(64vh * .78));justify-self:end}
 .lv-card{aspect-ratio:.78}
 .lv-panel{align-self:stretch;margin-block:4%;justify-content:center;padding-left:calc(var(--lv-bite) + 34px);padding-right:30px}
 .lv-shop{aspect-ratio:.62;width:min(calc(100% - 22px),calc(58vh * .62))}
 .lv-info{margin-left:calc(var(--lv-side) * .55 - 20px)}
}
@media(min-width:1600px){.lv-grid{--lv-side:24%;--lv-shop:17%;--lv-bite:56px}}
@media(min-width:1181px) and (max-width:1599px){.lv-grid{--lv-side:24%;--lv-shop:17%;--lv-bite:40px}}
/* Telas baixas (notebook): capa e vitrine também cabem pela altura, com a linha de baixo visível sem rolar. */
@media(min-width:1181px){
 .lv-media{width:min(100%,calc((100vh - var(--lv-top,120px) - 250px) * .78))}
 .lv-shop{width:min(calc(100% - 22px),calc((100vh - var(--lv-top,120px) - 290px) * .62))}
 .lv{padding:40px 0 32px}
}
.lv{padding-top:calc(var(--lv-under,0px) + 32px);min-height:calc(100vh - var(--lv-top,120px) + var(--lv-under,0px));min-height:calc(100svh - var(--lv-top,120px) + var(--lv-under,0px))}
@media(min-width:1181px){.lv{padding-top:calc(var(--lv-under,0px) + 36px)}}
/* Notebook (tela baixa): tudo compacto para caber sem rolar. */
@media(min-width:1181px) and (max-height:820px){
 .lv{padding-top:calc(var(--lv-under,0px) + 18px);padding-bottom:18px}
 .lv-grid{row-gap:16px}
 .lv-panel{margin-block:0;gap:8px;padding-top:14px;padding-bottom:14px}
 .lv-onair{font-size:50px}
 .lv-call{font-size:13px}
 .lv-wave{height:50px}
 .lv-play{width:80px;height:80px}.lv-play .ri{width:28px;height:28px}
 .lv-program{padding:8px 16px}
 .lv-info,.lv-next{padding:12px 18px}
 .lv-info-head{margin-bottom:8px;font-size:16px}
 .lv-thumb{width:56px;height:56px}
 .lv-info-title strong{font-size:22px}
 .lv-votes button{width:48px;height:48px}
 .lv-media{width:min(100%,calc((100vh - var(--lv-top,120px) - 200px) * .78))}
 .lv-shop{width:min(calc(100% - 22px),calc((100vh - var(--lv-top,120px) - 230px) * .62))}
}
/* Capa quase quadrada; o play encosta no fim da onda, na mesma linha; vitrine um pouco maior. */
@media(min-width:1181px){
 .lv-card{aspect-ratio:.92}
 .lv-media{width:min(100%,calc((100vh - var(--lv-top,120px) - 250px) * .92))}
 .lv-head{grid-template-columns:minmax(0,560px) auto;justify-content:start}
 .lv-wave{margin-right:-34px}
 .lv-grid{--lv-shop:20%}
 .lv-shop{width:min(calc(100% - 22px),calc((100vh - var(--lv-top,120px) - 250px) * .64))}
}
@media(min-width:1181px) and (max-height:820px){
 .lv-media{width:min(100%,calc((100vh - var(--lv-top,120px) - 200px) * .92))}
 .lv-shop{width:min(calc(100% - 22px),calc((100vh - var(--lv-top,120px) - 210px) * .64))}
}
/* Voto dado: o escolhido acende (mesmo desenho, mais luz) e o outro esmaece. */
.lv [data-vote=like][aria-pressed=true]{background:#22d27a2e;color:#3dff9b;border-color:#3dff9b;box-shadow:0 0 0 4px #22d27a22,0 0 22px #22d27a66}
.lv [data-vote=dislike][aria-pressed=true]{background:#ff3b4e2e;color:#ff5d6d;border-color:#ff5d6d;box-shadow:0 0 0 4px #ff3b4e22,0 0 22px #ff3b4e66}
.lv [data-vote]:disabled:not([aria-pressed=true]){opacity:.3;filter:grayscale(.6)}
/* Play menor */
@media(min-width:1181px){.lv-play{width:80px;height:80px;box-shadow:0 12px 34px #1f6bff80,inset 0 2px #ffffff40,0 0 0 8px #1f6bff1c,0 0 0 9px #1f6bff55}.lv-play .ri{width:28px;height:28px}}
@media(min-width:1600px){.lv-play{width:88px;height:88px}}
@media(min-width:1181px) and (max-height:820px){.lv-play{width:72px;height:72px}}
/* Estúdio: vídeo centralizado, cartão de baixo colado e da mesma largura, andamento do programa visível. */
.lv.is-watching .lv-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"panel" "info";max-width:1180px;row-gap:14px}
.lv.is-watching .lv-panel{padding:20px 24px;margin:0;align-self:auto}
.lv.is-watching .lv-program{display:flex}
.lv.is-watching .lv-info{margin:0;width:100%}
.lv.is-watching .lv-video{width:100%;margin:0 auto}
/* Selo do cartão: discreto, de vidro, em letras pequenas, com o ponto pulsando na cor do que está no ar. */
.lv-tag{left:14px;bottom:14px;gap:7px;padding:5px 11px 5px 9px;border:1px solid color-mix(in srgb,var(--lv-accent) 45%,transparent);border-radius:8px;background:linear-gradient(135deg,#06142e99,#06142e66);backdrop-filter:blur(10px) saturate(1.3);box-shadow:0 6px 18px #0006;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.lv-tag i{width:6px;height:6px;box-shadow:0 0 0 0 var(--lv-accent);animation:lv-dot 1.8s infinite}
@keyframes lv-dot{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--lv-accent) 70%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}
/* O player do site (player.css) pinta o voto dado de branco e preenche o ícone; aqui o desenho continua o mesmo:
   o escolhido só acende e o outro esmaece. */
:root body .lv [data-song-votes] [data-vote]:disabled[aria-pressed="true"]{opacity:1;filter:none}
:root body .lv [data-song-votes] [data-vote="like"]:disabled[aria-pressed="true"]{color:var(--lv-green);background:#22d27a14;border-color:#22d27a88;box-shadow:none}
:root body .lv [data-song-votes] [data-vote="dislike"]:disabled[aria-pressed="true"]{color:var(--lv-red);background:#ff3b4e14;border-color:#ff3b4e88;box-shadow:none}
:root body .lv [data-song-votes] [data-vote]:disabled[aria-pressed="true"] .ri{fill:none}
:root body .lv [data-song-votes] [data-vote]:disabled:not([aria-pressed="true"]){opacity:.3;filter:grayscale(.6)}
/* Vitrine um pouco menor no palco normal. */
@media(min-width:1181px){
 .lv:not(.is-watching) .lv-grid{--lv-shop:17%}
 .lv:not(.is-watching) .lv-shop{width:min(calc(100% - 22px),calc((100vh - var(--lv-top,120px) - 280px) * .6))}
}
/* Vitrine no palco: da mesma altura do painel "No ar" (nunca menor que ele). */
@media(min-width:1181px){
 .lv:not(.is-watching) .lv-grid{--lv-shop:20%}
 .lv:not(.is-watching) .lv-shop{aspect-ratio:auto;align-self:stretch;width:calc(100% - 22px);margin-block:4%;min-height:300px}
}
@media(min-width:1181px) and (max-height:820px){.lv:not(.is-watching) .lv-shop{margin-block:0}}
/* No desktop, o vídeo ocupa o painel principal e os cartões mantêm a hierarquia do modo áudio. */
@media(min-width:981px){
 .lv.is-watching{overflow:clip}
 .lv.is-watching .lv-grid{
  --lv-studio-panel-padding:12px;
  gap:16px;
  align-items:start;
 }
 .lv.is-watching .lv-panel{display:flex;gap:10px;padding:var(--lv-studio-panel-padding);border-radius:22px}
 .lv.is-watching .lv-bar{padding:0 2px;gap:8px}
 .lv.is-watching .lv-bar .lv-btn{padding:8px 12px;font-size:14px}
 .lv.is-watching .lv-video{border-radius:14px}
 .lv.is-watching .live-status{bottom:56px;pointer-events:none}
 .lv.is-watching .lv-info{width:auto}
 .lv.is-watching .lv-aside{display:flex;flex-direction:column;grid-area:aside;gap:16px;min-width:0}
 .lv.is-watching .lv-next{display:block}
 .lv.is-watching .lv-grid>.lv-program{grid-area:program;padding:12px 18px}
 .lv.is-watching[data-progress=ring] .lv-program-bar{display:block}
 .lv.is-watching .lv-shop{display:block;align-self:start;aspect-ratio:.66;width:100%;margin:0;transform:none}
 .lv.is-watching .lv-slide:not(.is-on){visibility:hidden;transition:none}
 .lv.is-watching .lv-slide.is-on{transition-duration:.3s}
}
@media(min-width:981px) and (max-width:1180px){
 .lv.is-watching .lv-grid{grid-template-areas:"panel" "program" "aside"}
 .lv.is-watching .lv-panel{padding-inline:24px}
 .lv.is-watching .lv-station{display:none}
 .lv.is-watching .lv-aside{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  grid-template-areas:"next shop";
  gap:28px;
  align-items:start;
 }
 .lv.is-watching .lv-shop{aspect-ratio:16/9}
 .lv.is-watching .lv-next{align-self:start}
}
@media(min-width:1181px){
 .lv.is-watching .lv-grid{
  /* Preserve the former video area (the old grid minus its 300px sidebar and 24px gap). */
  --lv-studio-page-gutter:64px;
  --lv-original-grid-width:min(100% - var(--lv-studio-page-gutter),max(1000px,min(1460px,(100vh - var(--lv-top,120px) - 150px) * 16 / 9 + 324px)));
  --lv-studio-aside:calc(min(100vw - var(--lv-studio-page-gutter),1560px) * .2 - 22px);
  --lv-studio-gap:22px;
  grid-template-columns:minmax(0,1fr) var(--lv-studio-aside);
  grid-template-areas:"panel aside" "program aside";
  column-gap:var(--lv-studio-gap);
  max-width:calc(var(--lv-original-grid-width) - 324px + var(--lv-studio-aside) + var(--lv-studio-gap) + 2 * (var(--lv-studio-panel-padding) + 1px));
 }
}
@media(min-width:1181px) and (max-width:1200px){
 .lv.is-watching .lv-grid{--lv-studio-page-gutter:40px}
}
/* Espaço entre o play e o cartão do programa. */
@media(min-width:761px){.lv:not(.is-watching) .lv-program{margin-top:18px}}
@media(min-width:1181px) and (max-height:820px){.lv:not(.is-watching) .lv-program{margin-top:14px}}
/* Celular: barra de cima mais compacta, para a capa subir. */
@media(max-width:760px){
 .lv{padding-top:calc(var(--lv-under,0px) + 8px)}
 .lv-grid{gap:12px}
 .lv-live{padding:4px 10px;font-size:13px;gap:6px}
 .lv-live i{width:7px;height:7px}
 .lv-btn{padding:6px 8px;border-radius:10px;font-size:13px;gap:6px}
 .lv-btn.is-accent{padding:6px 11px}
 .lv .lv-btn .ri{width:16px;height:16px}
 .lv-media{margin-top:2px}
}
/* Sem selo sobre a capa. */
.lv-tag{display:none}
/* Celular: capa reta e centralizada, sem inclinação. */
@media(max-width:760px){.lv-card,.lv-media:hover .lv-card{transform:none}}
/* Celular: sem a onda; o play fica com mais espaço logo abaixo da música. */
@media(max-width:760px){.lv-wave{display:none}.lv-controls{margin-top:6px}}
.lv-shop-dots i{cursor:pointer}
@media(max-width:760px){.lv-shop{touch-action:pan-y}.lv-shop-dots{padding:6px;margin:-6px}.lv-shop-dots i{width:8px;height:8px}.lv-shop-dots i.is-on{width:24px}}
/* Celular: sem o selo "Ao vivo"; Compartilhar e Estúdio alinhados às bordas da capa, logo acima dela. */
@media(max-width:760px){
 .lv{padding-top:calc(var(--lv-under,0px) + 2px)}
 .lv-bar{width:min(78vw,340px);margin:0 auto;justify-content:space-between}
 .lv-bar .lv-live,.lv-bar .lv-spacer{display:none}
 .lv-bar:not(:has(.is-accent)) [data-lv-share]{margin-left:auto}
 .lv-media{margin-top:2px}
}

/* Cast uses the same buttons and information text as the Ao vivo panel. */
.lv-cast{min-width:0}.lv-cast-status{margin:0;white-space:normal;overflow-wrap:anywhere}.lv-cast-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.lv-cast-controls[hidden]{display:none}.lv-btn:disabled{opacity:.55;cursor:default}.lv-btn:focus-visible{outline:2px solid currentColor;outline-offset:3px}
@media(max-width:760px){.lv-cast{order:1;width:min(78vw,340px);margin:0 auto}}

@media(max-width:760px){
 .lv.is-watching{align-items:flex-start}
 .lv-bar{column-gap:12px;margin-bottom:10px}
 .lv.is-watching .lv-bar{width:100%}
 .lv-bar .lv-btn{min-width:44px;min-height:44px;justify-content:center}
 .lv-btn.is-accent .lv-studio-desktop-label{display:none}
 .lv-btn.is-accent .lv-studio-mobile-label{display:inline}
 .lv.is-watching[data-track-kind=music] .lv-info{
  padding:12px;
  border:1px solid var(--lv-line);
  border-radius:15px;
  background:var(--lv-glass);
  text-align:left;
 }
 .lv.is-watching[data-track-kind=music] .lv-info-body{flex-direction:row;flex-wrap:wrap;gap:10px}
 .lv.is-watching[data-track-kind=music] .lv-thumb:has(img:not([hidden])){display:block;width:48px;height:48px;border-radius:10px}
 .lv.is-watching[data-track-kind=music] .lv-info-copy{align-items:stretch;width:auto}
 .lv.is-watching[data-track-kind=music] .lv-info-title strong{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  font-size:19px;
  white-space:normal;
  overflow-wrap:anywhere;
 }
 .lv.is-watching[data-track-kind=music] .lv-info-sub{font-size:12px}
 .lv.is-watching[data-track-kind=music] .lv-votes:not([hidden]){display:flex;gap:6px}
 .lv.is-watching[data-track-kind=music] .lv-votes button{width:44px;height:44px}
 .lv.is-watching[data-track-kind=music] .lv-votes button .ri{width:20px;height:20px}
 .lv.is-watching[data-track-kind=music] .lv-links{order:1;flex-basis:100%}
}
