/* ==========================================================================
   Rádio Alegria · estilos do site (inicial, destaques/entrar, fofocas e offline)
   Ordem do arquivo (do geral para o específico):
     1. Variáveis              5. Cabeçalho e menu
     2. Base                   6. Seções da página inicial, na ordem em que aparecem
     3. Layout                 7. Janelas (vídeo, álbum)
     4. Componentes            8. Barra do player e rodapé
                               9. Página de destaques (entrar, área do anunciante)
                              10. Página de fofocas
                              11. Página offline (app sem internet)
   Cada bloco traz as próprias regras de celular (@media) logo abaixo dele.
   ========================================================================== */

/* ===== 1. Variáveis ===== */
:root{
  --bg:#0f0620;--bg2:#160a2e;--card:#1e1040;--line:rgba(255,255,255,.09);
  --p1:#7c3aed;--p2:#a855f7;--p2-txt:#b065f9;--p3:#d946ef;--txt:#f5f0ff;--mut:#b8a9d9;
  --grad:linear-gradient(135deg,#7c3aed,#d946ef);
  --grad-text:linear-gradient(135deg,#7c3aed,#c113db); /* versão mais escura do --grad, usada só onde há texto por cima (contraste AA) */
  --nav-h:96px;
}
@media(max-width:600px){:root{--nav-h:80px}}

/* ===== 2. Base ===== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{font-family:'Poppins',system-ui,sans-serif;background:var(--bg);color:var(--txt);line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer;border:0;color:inherit;background:none}
h1{font-size:clamp(2.4rem,5.5vw,4.2rem);line-height:1.08;font-weight:800;margin:18px 0}
h2{font-size:clamp(1.9rem,4vw,2.7rem);font-weight:800;line-height:1.15}
/* atributo hidden precisa vencer classes com display próprio (ex.: .form) */
[hidden]{display:none!important}
/* só para leitores de tela */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* acessibilidade: pular a navegação com o teclado */
.skip-link{position:fixed;top:-60px;left:12px;z-index:200;background:var(--p1);color:#fff;font-weight:700;padding:12px 20px;border-radius:0 0 10px 10px;transition:top .2s}
.skip-link:focus{top:0}

/* barra de rolagem roxa */
*::-webkit-scrollbar{width:12px;height:12px}
*::-webkit-scrollbar-track{background:var(--bg)}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#7c3aed,#d946ef);border-radius:999px;border:3px solid var(--bg);background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#8b5cf6,#e879f9);background-clip:padding-box}
*::-webkit-scrollbar-corner{background:var(--bg)}
/* fim da página: o traço da barra de progresso (fim do degradê, #d946ef) continua sobre a barra de rolagem (ver comum.js) */
html.rolagem-fim::-webkit-scrollbar-track{background:linear-gradient(to bottom,var(--bg) calc(var(--barra-y) - 3px),#d946ef calc(var(--barra-y) - 3px) var(--barra-y),var(--bg) var(--barra-y))}
@supports (-moz-appearance:none){*{scrollbar-width:thin;scrollbar-color:#a855f7 var(--bg)}}

/* animações usadas em vários lugares */
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(244,63,94,.7)}100%{box-shadow:0 0 0 10px rgba(244,63,94,0)}}
@keyframes bar{0%,100%{height:8px}50%{height:38px}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes girar{to{transform:rotate(360deg)}}
@keyframes float{50%{transform:translateY(-30px) scale(1.08)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* quem pediu menos movimento no sistema: sem animações nem transições */
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ===== 3. Layout ===== */
.container{width:min(1140px,100% - 40px);margin-inline:auto}
/* iPhone deitado (a inicial usa viewport-fit=cover, por causa da barra do player): o conteúdo não entra embaixo do entalhe */
.container,.nav-inner,.mini-inner{padding-inline:env(safe-area-inset-left,0px) env(safe-area-inset-right,0px)}
.narrow{max-width:720px}
.section{padding:100px 0}
.section.alt{background:var(--bg2)}
.section-head{text-align:center;max-width:560px;margin:0 auto 46px}
.section-head.left{text-align:left;max-width:none;margin:0 0 34px}
.section-head p{color:var(--mut);margin-top:10px}
/* títulos alinhados à esquerda, com um traço roxo embaixo */
.section-head.left h2{position:relative;padding-bottom:14px}
.section-head.left h2::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:4px;background:var(--p2)}
.section-head.left p{max-width:560px}
.grid{display:grid;gap:24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px}
.empty{grid-column:1/-1;text-align:center;color:var(--mut);padding:30px 10px}
@media(max-width:600px){
  .section{padding:72px 0}
  .card{padding:20px}
}

/* ===== 4. Componentes ===== */
/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border-radius:999px;font-weight:600;transition:transform .2s,box-shadow .2s,background .2s}
.btn.primary{background:var(--grad-text);box-shadow:0 10px 28px rgba(168,85,247,.45)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(168,85,247,.6)}
.btn.ghost{border:1px solid var(--line);background:rgba(255,255,255,.04)}
.btn.ghost:hover{background:rgba(255,255,255,.1)}
.round{width:62px;height:62px;border-radius:50%;background:var(--grad);font-size:1.3rem;box-shadow:0 10px 26px rgba(168,85,247,.55);transition:transform .2s}
.round:hover{transform:scale(1.08)}

/* indicador "no ar", selo e texto em degradê */
.dot{width:8px;height:8px;border-radius:50%;background:#f43f5e;animation:pulse 1.4s infinite}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:rgba(168,85,247,.16);border:1px solid rgba(168,85,247,.4);font-size:.75rem;font-weight:600;letter-spacing:.08em}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.tag{font-size:.7rem;font-weight:700;padding:4px 10px;border-radius:999px;background:#be123c;letter-spacing:.06em} /* vermelho escuro: contraste 5,6 com o texto (o #f43f5e dava 3,3) */

/* equalizador (anima enquanto toca) */
.eq{display:flex;justify-content:center;align-items:flex-end;gap:5px;height:40px;margin:18px 0}
.eq span{width:6px;height:6px;border-radius:3px;background:var(--grad);transition:height .3s}
.eq span:nth-child(2){animation-delay:-.2s!important}.eq span:nth-child(3){animation-delay:-.5s!important}
.eq span:nth-child(4){animation-delay:-.8s!important}.eq span:nth-child(5){animation-delay:-.3s!important}
.eq span:nth-child(6){animation-delay:-.6s!important}.eq span:nth-child(7){animation-delay:-.1s!important}

/* volume (player da hero e barra do player) */
input[type=range]{accent-color:var(--p2)}
.vol-btn{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;color:var(--txt);background:rgba(255,255,255,.08);transition:background .2s,color .2s}
.vol-btn:hover{background:rgba(255,255,255,.16)}
.vol-btn:focus-visible,.vol-range:focus-visible{outline:2px solid var(--p2);outline-offset:3px}
.vol-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vol-btn .x{display:none}
.vol-btn.low .w2{display:none}
.vol-btn.muted{color:#fda4af}
.vol-btn.muted .w1,.vol-btn.muted .w2{display:none}
.vol-btn.muted .x{display:block}
.vol-range{-webkit-appearance:none;appearance:none;height:24px;padding:0;border:0;box-shadow:none;background:transparent;cursor:pointer;outline:0;
  --t:22px;--f:calc(var(--t) / 2 + (100% - var(--t)) * var(--p,.7))}
.vol-range::-webkit-slider-runnable-track{height:5px;border-radius:999px;background:linear-gradient(90deg,#a855f7 0,#d946ef var(--f),rgba(255,255,255,.22) var(--f))}
.vol-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-8.5px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 4px rgba(168,85,247,.5),0 3px 8px rgba(0,0,0,.45);transition:transform .15s}
.vol-range:hover::-webkit-slider-thumb{transform:scale(1.12)}
.vol-range::-moz-range-track{height:5px;border-radius:999px;background:linear-gradient(90deg,#a855f7 0,#d946ef var(--f),rgba(255,255,255,.22) var(--f))}
.vol-range::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(168,85,247,.5),0 3px 8px rgba(0,0,0,.45)}

/* abas (dias da programação, playlists de vídeo, entrar/criar conta) */
.tabs{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px;margin-bottom:30px}
.tab{padding:9px 20px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-weight:500;color:var(--mut);transition:.25s}
.tab:hover{color:#fff}
.tab.active,.tab[aria-pressed=true]{background:var(--grad-text);color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(168,85,247,.4)}

/* formulários */
.form{display:grid;gap:16px}
.form label,.form-campo{display:grid;gap:6px;font-size:.88rem;font-weight:500;color:var(--mut)} /* .form-campo: rótulo + campo com botão ao lado (senha) */
input,select,textarea{width:100%;padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--txt);font:inherit;outline:none;transition:border-color .2s,box-shadow .2s}
select option{background:var(--card)}
input:focus,select:focus,textarea:focus{border-color:var(--p2);box-shadow:0 0 0 3px rgba(168,85,247,.25)}
input.err,textarea.err{border-color:#f43f5e}
textarea{resize:none}
.form-msg{min-height:1.4em;font-size:.9rem;color:#86efac}.form-msg.error{color:#fca5a5}
.hint{font-size:.8rem;color:var(--mut);font-weight:400}

/* faixa em movimento que dá para arrastar (patrocinadores, locutores no celular e recados):
   o movimento é feito no inicio.js (arrastavel): anda sozinha, pausa com o mouse em cima e dá para arrastar */
.marquee{overflow:hidden;position:relative;padding:8px 0;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee.arrastando{cursor:grabbing}
.marquee a,.marquee img{-webkit-user-drag:none}
.marquee-track{display:flex;width:max-content;will-change:transform}
@media(prefers-reduced-motion:reduce){.marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none;cursor:auto;touch-action:auto}}

/* carrossel de vídeos e álbuns: uma linha que rola para o lado.
   Rolagem nativa (deslize no celular, roda/trackpad no computador) com encaixe em cada cartão;
   as setas só aparecem quando há mais itens do que cabem (.rola, posto pelo inicio.js). */
.faixa{position:relative}
.faixa>.grid{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:var(--col);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:4px;scroll-behavior:smooth;scrollbar-width:none;padding:12px 4px 20px;margin:-12px -4px -20px}
.faixa>.grid::-webkit-scrollbar{display:none}
.faixa>.grid>*{scroll-snap-align:start}
/* a linha entra inteira (.faixa.reveal); cartões fora da tela ficam visíveis para aparecerem cortados na borda, indicando que dá para deslizar */
.faixa>.grid>.reveal{opacity:1;transform:none}
.faixa>.grid:has(>.empty){display:block}
.faixa-nav{display:none;position:absolute;top:var(--nav-y,40%);transform:translateY(-50%);z-index:2;width:46px;height:46px;border-radius:50%;
  place-items:center;font-size:1.7rem;line-height:1;color:#fff;background:rgba(15,6,32,.8);border:1px solid var(--line);backdrop-filter:blur(6px);
  box-shadow:0 8px 20px rgba(0,0,0,.4);transition:background .2s,opacity .2s,transform .2s}
.faixa.rola .faixa-nav{display:grid}
.faixa-nav:hover:not(:disabled){background:var(--grad-text)}
.faixa-nav:disabled{opacity:0;pointer-events:none}
.faixa-nav:focus-visible{outline:2px solid var(--p2);outline-offset:3px}
.faixa-nav.prev{left:-23px}
.faixa-nav.next{right:-23px}
@media(max-width:1240px){.faixa-nav.prev{left:8px}.faixa-nav.next{right:8px}}
@media(max-width:600px){.faixa-nav{display:none!important}}

/* ===== 5. Cabeçalho e menu ===== */
.navbar{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--nav-h);transition:height .3s,background .3s,box-shadow .3s,transform .35s}
.navbar.scrolled{height:76px;background:rgba(15,6,32,.82);backdrop-filter:blur(14px);box-shadow:0 8px 30px rgba(0,0,0,.35)}
.nav-inner{width:min(1140px,100% - 40px);height:100%;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:flex;align-items:center;gap:10px;font-size:1.15rem;font-weight:500}
.logo-img{height:78px;width:auto;display:block;transition:height .3s;filter:drop-shadow(0 4px 12px rgba(0,0,0,.35))}
.navbar.scrolled .logo-img{height:58px}
/* menu: Programação · Conteúdos ▾ · A Rádio ▾ · Contato · Anuncie (chamada) · conta.
   Os grupos são botões que mostram/escondem um submenu (aria-expanded); o JS fica em comum.js. */
.nav-links{display:flex;align-items:center;gap:4px;position:relative}
.nav-links a,.nav-grupo-btn{position:relative;display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;font-size:.92rem;font-weight:500;color:var(--mut);transition:color .25s,background .25s,box-shadow .25s}
.nav-links a:hover,.nav-grupo-btn:hover,.nav-grupo.aberto>.nav-grupo-btn{color:#fff;background:rgba(255,255,255,.07)}
.nav-links a:focus-visible,.nav-grupo-btn:focus-visible{outline:2px solid var(--p2);outline-offset:2px}
/* seção atual: roxo suave, para não competir com a chamada Anuncie */
.nav-links a.active,.nav-grupo.ativo>.nav-grupo-btn{color:#fff;background:rgba(168,85,247,.2);box-shadow:inset 0 0 0 1px rgba(168,85,247,.5)}
.nav-links a:active,.nav-grupo-btn:active{transform:scale(.97)}
.nav-seta{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.nav-grupo.aberto .nav-seta{transform:rotate(180deg)}

/* submenu flutuante */
.nav-grupo{position:relative}
.nav-sub{position:absolute;top:calc(100% + 12px);left:50%;z-index:2;display:grid;gap:2px;min-width:190px;padding:8px;border-radius:18px;
  background:rgba(22,10,46,.97);border:1px solid rgba(168,85,247,.28);box-shadow:0 20px 45px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.2);backdrop-filter:blur(16px);
  opacity:0;visibility:hidden;transform:translate(-50%,-8px);transition:opacity .2s,transform .2s,visibility 0s .2s}
.nav-sub::before{content:"";position:absolute;inset:-14px 0 auto;height:14px} /* ponte: o mouse passa do botão ao submenu sem fechá-lo */
.nav-grupo.aberto>.nav-sub{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s,transform .2s}
.nav-sub a{padding:10px 14px;border-radius:12px;color:var(--txt)}
.nav-sub a:hover{background:rgba(168,85,247,.16)}
.nav-sub a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--p2);opacity:.35;transition:opacity .2s}
.nav-sub a:hover::before,.nav-sub a.active::before{opacity:1}

/* Anuncie: chamada em destaque */
.nav-links .nav-cta{margin-left:6px}
.nav-links .nav-cta a{padding:9px 20px;font-weight:600;color:#fff;background:var(--grad-text);box-shadow:0 4px 16px rgba(168,85,247,.4)}
.nav-links .nav-cta a:hover{background:var(--grad-text);box-shadow:0 6px 22px rgba(217,70,239,.55);transform:translateY(-1px)}

/* botão da conta: no computador, ícone redondo no fim do menu; no menu lateral, primeiro item (ícone + "Entrar") */
/* "Instalar o app": só no menu lateral (o JS mostra quando dá para instalar) */
.nav-links .nav-instalar{display:none}
.nav-links .nav-admin{margin-left:8px}
.nav-links .nav-admin a{display:grid;place-items:center;width:38px;height:38px;padding:0;border-radius:50%;border:1px solid var(--p2);color:#fff}
.nav-links .nav-admin a:hover{background:var(--p1);border-color:var(--p1)}
.nav-admin-icone{display:grid;place-items:center}
.nav-links .nav-admin svg{width:20px;height:20px;fill:currentColor;stroke:none}
.nav-admin-texto{display:none}
.menu-btn{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:5px;border-radius:12px;background:rgba(255,255,255,.07)}
.menu-btn span{width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .3s,opacity .3s}
.menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn.open span:nth-child(2){opacity:0}
.menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-fundo{display:none} /* só existe no menu lateral (abaixo) */
.scroll-progress{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--grad)}
/* abaixo de 960px (tablet em pé e celular) vira menu lateral; a mesma largura está em comum.js */
@media(max-width:960px){
  .menu-btn{display:flex}
  .nav-links{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:min(310px,82vw);flex-direction:column;align-items:stretch;gap:4px;padding:100px 24px 24px;overflow-y:auto;background:rgba(22,10,46,.97);backdrop-filter:blur(16px);transform:translateX(100%);transition:transform .35s;box-shadow:-20px 0 50px rgba(0,0,0,.5)}
  .nav-links.open{transform:none}
  /* fundo escurecido atrás do menu aberto (criado pelo comum.js): tocar nele fecha o menu.
     z-index -1 dentro da navbar: fica sobre a página, mas abaixo do menu e do botão */
  .nav-fundo{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;z-index:-1;background:rgba(8,3,18,.6);backdrop-filter:blur(2px);
    opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
  .navbar.menu-aberto .nav-fundo{opacity:1;visibility:visible;transition:opacity .3s}
  .navbar.menu-aberto{z-index:70} /* menu aberto fica acima da barra do player (z-index 60), que cobria o fim dele */
  .nav-links a,.nav-grupo-btn{font-size:1.05rem;padding:12px 18px}
  .nav-grupo-btn{width:100%;justify-content:space-between}
  /* submenu vira sanfona dentro do menu lateral, com uma linha à esquerda ligando os itens ao grupo */
  .nav-sub{position:static;min-width:0;margin:0 0 0 18px;padding:0 0 0 10px;border:0;border-left:1px solid rgba(168,85,247,.3);border-radius:0;background:none;box-shadow:none;backdrop-filter:none;
    transform:none;max-height:0;overflow:hidden;transition:max-height .3s,opacity .2s,visibility 0s .3s}
  .nav-sub::before{display:none}
  .nav-grupo.aberto>.nav-sub{transform:none;max-height:240px;margin-block:2px 6px;transition:max-height .3s,opacity .2s}
  .nav-sub a{font-size:.98rem;padding:10px 14px}
  .nav-links .nav-cta{margin:14px 0 0}
  .nav-links .nav-cta a{justify-content:center}
  /* conta vira o primeiro item, uma linha como as outras: o ícone começa na mesma margem do texto dos links */
  .nav-links .nav-admin{order:-1;margin:0 0 6px;padding-bottom:12px;border-bottom:1px solid var(--line)}
  .nav-links .nav-admin a{display:flex;align-items:center;gap:12px;width:auto;height:auto;padding:8px 18px;border:0;border-radius:999px;font-weight:600;color:#fff}
  .nav-links .nav-admin a:hover{background:rgba(255,255,255,.06)}
  .nav-admin-icone{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--p2);background:rgba(168,85,247,.12)}
  .nav-links .nav-admin a:hover .nav-admin-icone{background:var(--p1);border-color:var(--p1)}
  .nav-admin-texto{display:inline}
  .nav-links .nav-instalar{display:block;margin-top:8px}
  .nav-instalar button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px 18px;border-radius:999px;border:1px solid rgba(168,85,247,.45);background:rgba(168,85,247,.08);font-weight:600;color:#fff;transition:background .25s}
  .nav-instalar button:hover{background:rgba(168,85,247,.2)}
  .nav-instalar button:focus-visible{outline:2px solid var(--p2);outline-offset:2px}
  .nav-instalar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
}
@media(prefers-reduced-motion:reduce){.nav-sub,.nav-seta{transition:none}}
@media(max-width:600px){.logo-img{height:62px}.navbar.scrolled{height:68px}.navbar.scrolled .logo-img{height:50px}}

/* ===== 6. Seções da página inicial ===== */

/* --- Hero: texto à esquerda, player com capa e disco de vinil à direita --- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:calc(var(--nav-h) + 30px) 0 60px;overflow:hidden;
  background:radial-gradient(900px 500px at 80% 10%,rgba(124,58,237,.35),transparent 60%),radial-gradient(700px 500px at 0% 100%,rgba(217,70,239,.22),transparent 60%),var(--bg)}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:float 9s ease-in-out infinite}
.orb1{width:280px;height:280px;background:#7c3aed;top:10%;left:-80px}
.orb2{width:220px;height:220px;background:#d946ef;bottom:5%;right:5%;animation-delay:-4s}
.hero-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.hero-grid>*{min-width:0}
.hero-text p{color:var(--mut);font-size:1.1rem;max-width:480px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.player{background:linear-gradient(160deg,rgba(124,58,237,.28),rgba(30,16,64,.85));border:1px solid var(--line);border-radius:28px;padding:34px;text-align:center;backdrop-filter:blur(10px);box-shadow:0 30px 60px rgba(0,0,0,.4)}
.player-label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--p2-txt);font-weight:600}
.player-titulo{font-size:1.5rem;font-weight:700}
.player-sub{color:var(--mut);font-size:.95rem}
.player.playing .eq span{animation:bar 1s ease-in-out infinite}
.player-controls{display:flex;align-items:center;justify-content:center;gap:20px}
.vol{display:flex;align-items:center;gap:8px}
.vol .vol-range{width:110px}
/* conectando: o botão vira um círculo girando */
.player.carregando #playBtn{position:relative;color:transparent}
.player.carregando #playBtn::after{content:"";position:absolute;inset:18px;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;animation:girar .8s linear infinite}
#nowSub.aviso{color:#fde68a}
/* capa do programa (foto do locutor ou logo) com o disco saindo de trás; o disco gira enquanto toca */
.cover-stage{position:relative;width:100%;max-width:292px;aspect-ratio:292/196;margin:0 auto 22px}
.cover-stage .sleeve{position:absolute;left:0;top:0;z-index:2;width:67.1%;height:100%;border-radius:18px;
  background:url(../img/logo-radio-alegria.webp) center/78% no-repeat,radial-gradient(circle at 30% 20%,#a855f7,#4c1d95 70%);
  box-shadow:0 22px 44px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.14)}
.cover-stage .sleeve::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.22),transparent 45%,rgba(0,0,0,.25))}
.sleeve.has-photo{background-size:cover,cover;background-position:center;background-repeat:no-repeat}
.cover-stage .vinyl{position:absolute;left:34.2%;top:5.1%;width:60.3%;aspect-ratio:1;z-index:1;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.player.playing .vinyl{transform:translateX(9%)}
.cover-stage .disc{width:100%;height:100%;border-radius:50%;box-shadow:0 10px 28px rgba(0,0,0,.5);
  background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.16) 8%,transparent 18%,transparent 50%,rgba(255,255,255,.12) 58%,transparent 68%),radial-gradient(circle,#0f0620 0 5%,#c084fc 6% 28%,transparent 29%),repeating-radial-gradient(circle,#0b0614 0 3px,#1c1136 3px 5px)}
.player.playing .disc{animation:spin 5s linear infinite}
@media(max-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:480px){.player{padding:24px 18px}.hero-actions .btn{flex:1 1 100%}}

/* --- Patrocinadores: faixa de logos logo abaixo da hero --- */
.sponsors{padding:64px 0 56px;background:var(--bg2);border-block:1px solid var(--line)}
.sponsors h2{font-size:clamp(1.5rem,3vw,2rem)}
.sponsor-group{display:flex;gap:20px;padding-right:20px}
/* logos: cada uma cabe inteira no cartão, qualquer proporção (quadrada, larga, redonda) */
.sponsor{flex:none;display:flex;align-items:center;justify-content:center;width:200px;height:116px;padding:10px 14px;overflow:hidden;border-radius:18px;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.3);transition:transform .25s,box-shadow .25s}
.sponsor img{flex:none;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
a.sponsor:hover,a.sponsor:focus-visible{transform:translateY(-4px) scale(1.03);box-shadow:0 14px 30px rgba(168,85,247,.45);outline:0}
@media(max-width:600px){.sponsor{width:158px;height:92px;padding:8px 10px}}
@media(prefers-reduced-motion:reduce){.sponsor-group[aria-hidden=true]{display:none}}

/* --- Destaques: carrossel em largura total (banners aprovados + convite para anunciar) --- */
.destaques-top{padding:64px 0 56px;background:var(--bg)}
.destaques-top h2{font-size:clamp(1.5rem,3vw,2rem)}
.carousel{position:relative;overflow:hidden;background:var(--bg2)}
.destaques-top .carousel{--car-h:clamp(250px,42vw,580px);width:min(1140px,100% - 48px);margin-inline:auto;border-radius:24px;border:1px solid var(--line)}
.carousel-track{display:flex;transition:transform .7s cubic-bezier(.4,0,.2,1);will-change:transform}
.car-slide{flex:0 0 100%;min-width:0}
.car-slide a{display:block;height:var(--car-h);overflow:hidden;color:inherit;text-decoration:none}
.car-slide img{display:block;width:100%;height:100%;object-fit:cover}
.car-slide a:focus-visible{outline:3px solid var(--p2);outline-offset:-3px}
/* margem lateral de no mínimo 84px: as setas ocupam até 60px de cada borda (14px + 46px), e o texto e o "Quero anunciar" ficam livres delas */
.car-slide .car-convite{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;height:var(--car-h);padding:28px max(6vw,84px);background:linear-gradient(135deg,#3b1d7a,#6b21a8)}
.carousel.unico .car-slide .car-convite{padding-inline:6vw} /* sem setas */
.car-convite-texto{display:grid;gap:6px;font-size:clamp(1rem,2.2vw,1.5rem)}
.car-convite-texto strong{font-size:clamp(1.3rem,3.2vw,2.2rem);font-weight:800}
.car-convite-texto span{color:#f3e8ff;font-size:clamp(.9rem,1.6vw,1.1rem)}
.car-cta{background:#fff;color:#4c1d95;font-weight:700;padding:12px 24px;border-radius:999px}
.car-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:46px;border-radius:50%;background:rgba(15,6,32,.65);color:#fff;font-size:1.7rem;line-height:1;backdrop-filter:blur(6px)}
.car-nav:hover{background:rgba(15,6,32,.85)}
.car-nav.prev{left:14px}
.car-nav.next{right:14px}
.car-dots{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);z-index:2;display:flex}
/* área de toque de 24px (mínimo da WCAG 2.2); a bolinha visível (10px, ou 28px a ativa) é o ::before */
.car-dots button{position:relative;width:24px;height:24px;padding:0;border-radius:999px;transition:width .3s}
.car-dots button::before{content:"";position:absolute;inset:7px;border-radius:999px;background:rgba(255,255,255,.5);transition:background .3s}
.car-dots button.on{width:42px}
.car-dots button.on::before{background:#fff}
.car-pause{position:absolute;right:14px;bottom:10px;z-index:2;width:36px;height:36px;border-radius:50%;background:rgba(15,6,32,.65);color:#fff;font-size:.75rem}
.car-nav:focus-visible,.car-dots button:focus-visible,.car-pause:focus-visible{outline:2px solid var(--p2);outline-offset:3px}
/* com um slide só não há para onde ir: some com setas, bolinhas e pausa */
.carousel.unico .car-nav,.carousel.unico .car-dots,.carousel.unico .car-pause{display:none}
@media(max-width:600px){.car-nav{width:38px;height:38px;font-size:1.4rem}.car-nav.prev{left:8px}.car-nav.next{right:8px}.car-slide .car-convite{padding:24px 58px;text-align:center;justify-content:center}.carousel.unico .car-slide .car-convite{padding-inline:24px}.car-pause{top:8px;bottom:auto;right:8px}}
@media(prefers-reduced-motion:reduce){.carousel-track{transition:none}}

/* --- Programação: título, abas de dia e grade centralizados --- */
#programacao .section-head{text-align:center;max-width:560px;margin:0 auto 34px}
#programacao .section-head h2::after{left:50%;transform:translateX(-50%)}
#programacao .tabs{justify-content:center}
.schedule{max-width:760px;margin:0 auto;display:grid;gap:12px}
.slot{display:grid;grid-template-columns:130px 1fr auto;align-items:center;gap:18px;padding:18px 22px;background:var(--card);border:1px solid var(--line);border-radius:18px;animation:fadeUp .45s both;transition:transform .2s,border-color .2s}
.slot:hover{transform:translateX(6px);border-color:var(--p2)}
.slot.now{border-color:var(--p3);background:linear-gradient(90deg,rgba(217,70,239,.22),var(--card))}
.slot time{font-weight:700;color:var(--p2-txt);font-size:.95rem}
.slot-titulo{font-size:1.05rem}.slot p{color:var(--mut);font-size:.88rem}
/* foto do programa (a do locutor responsável) */
.slot-main{display:flex;align-items:center;gap:14px;min-width:0}
.slot-photo{flex:none;width:52px;height:52px;border-radius:14px;object-fit:cover;border:1px solid var(--line)}
@media(max-width:900px){.slot{grid-template-columns:1fr auto;gap:6px 14px}.slot time{grid-column:1/-1}}

/* --- Vídeos --- */
.videos{grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));--col:calc((100% - 72px) / 4)}
#videoFaixa{--nav-y:36%} /* meio da miniatura do vídeo */
.video{border-radius:22px;overflow:hidden;background:var(--card);border:1px solid var(--line);text-align:left;transition:transform .3s,box-shadow .3s}
.video:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(124,58,237,.35)}
.thumb{position:relative;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden}
.thumb::after{content:"▶";position:relative;z-index:1;width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.95);color:var(--p1);display:grid;place-items:center;padding-left:4px;transition:transform .3s}
.video:hover .thumb::after{transform:scale(1.15)}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video-info{display:block;padding:16px 20px}
.video-titulo{display:block;font-size:1rem;font-weight:700}
.video-categoria{font-size:.82rem;color:var(--mut)}
@media(max-width:900px){.videos{--col:calc((100% - 24px) / 2)}}
@media(max-width:600px){.videos{--col:85%}}

/* --- Locutores: grade no computador; no celular, faixa que anda sozinha e dá para arrastar (arrastavel() no inicio.js) --- */
.hosts{grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr))}
.host{text-align:center;padding:30px 22px;transition:transform .3s,border-color .3s}
.host:hover{transform:translateY(-8px);border-color:var(--p2)}
.avatar{width:110px;height:110px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;object-fit:cover;font-size:2.2rem;font-weight:800;box-shadow:0 0 0 5px rgba(168,85,247,.25)}
.host-nome{font-size:1.15rem}.host .role{color:var(--p2-txt);font-size:.85rem;font-weight:600}
.host p{color:var(--mut);font-size:.88rem;margin-top:8px;overflow-wrap:anywhere}
@media(max-width:600px){
  .host{padding:20px}
  .hosts.run{display:block;overflow:hidden;padding:12px 0 20px;margin:-12px 0 -20px;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .hosts.run.arrastando{cursor:grabbing}
  .host-track{display:flex;width:max-content;will-change:transform}
  .host-group{display:flex;gap:14px;padding-right:14px}
  .host-group>.host{flex:none;width:250px}
  .hosts.run .reveal{opacity:1;transform:none}
  .hosts.run img{-webkit-user-drag:none}
}
/* sem animação (preferência do sistema): a faixa não anda, vira rolagem normal com o dedo */
@media(max-width:600px) and (prefers-reduced-motion:reduce){
  .hosts.run{overflow-x:auto;cursor:auto;touch-action:auto;-webkit-mask-image:none;mask-image:none}
  .hosts.run .host-group[aria-hidden=true]{display:none}
}

/* --- Álbuns --- */
.albums{grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));--col:calc((100% - 72px) / 4)}
#albumFaixa{--nav-y:40%} /* meio da capa do álbum */
.album{display:block;width:100%;text-align:left;cursor:pointer;transition:transform .3s}
.album:hover{transform:translateY(-8px) rotate(-1deg)}
.album:focus-visible{outline:2px solid var(--p2);outline-offset:4px;border-radius:20px}
.cover{display:block;aspect-ratio:4/3;border-radius:20px;font-size:3rem;position:relative;overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,.4)}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.album .cover img{transition:transform .5s}
.album:hover .cover img{transform:scale(1.06)}
.album-titulo{display:block;margin-top:12px;font-size:1rem;font-weight:700}
.album-data{display:block;color:var(--mut);font-size:.85rem}
.album-month,.album-count{position:absolute;z-index:1;font-size:.74rem;font-weight:600;padding:4px 12px;border-radius:999px;background:rgba(15,6,32,.72);backdrop-filter:blur(6px);color:#fff}
.album-month{top:12px;left:12px}
.album-count{bottom:12px;right:12px}
@media(max-width:900px){.albums{--col:calc((100% - 24px) / 2)}}
@media(max-width:600px){
  .albums{--col:calc((100% - 14px) / 2 - 18px);gap:14px}
  .album-titulo{font-size:.92rem}
  .album-month,.album-count{font-size:.64rem;padding:3px 9px}
  .album-month{top:8px;left:8px}.album-count{bottom:8px;right:8px}
}

/* --- Fofocas: cartões (prévia na inicial, em carrossel, e lista da página fofocas.html) e janela de detalhe ---
   O título do cartão é um botão que, pelo ::after, cobre o cartão inteiro (o clique em qualquer parte abre a janela). */
.fofocas{--col:calc((100% - 72px) / 4)}
#fofocasFaixa{--nav-y:calc(12px + (100% - 32px) / 2)} /* meio do cartão inteiro (imagem + texto), descontando o respiro de 12px em cima e 20px embaixo da faixa */
.fofoca{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:20px;background:var(--card);border:1px solid var(--line);transition:transform .3s,box-shadow .3s,border-color .3s}
.fofoca:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(124,58,237,.35);border-color:rgba(168,85,247,.5)}
.fofoca:focus-within{outline:2px solid var(--p2);outline-offset:3px}
.fofoca-capa{flex:none;aspect-ratio:16/9;overflow:hidden;background:var(--grad)}
.fofoca-capa img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.fofoca:hover .fofoca-capa img{transform:scale(1.05)}
.fofoca-info{display:grid;gap:6px;align-content:start;padding:14px 16px 16px}
.fofoca-cat{justify-self:start;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--p2-txt)}
.fofoca-titulo{font-size:1rem;line-height:1.35}
.fofoca-abrir{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;text-align:left;font-weight:700;outline:none}
.fofoca-abrir::after{content:"";position:absolute;inset:0}
.fofoca-meta{color:var(--mut);font-size:.8rem}
.fofocas-ver-todas{margin-top:28px}
@media(max-width:900px){.fofocas{--col:calc((100% - 24px) / 2)}}
@media(max-width:600px){.fofocas{--col:85%}}

/* janela de detalhe (<dialog> nativo: Esc e foco já vêm do navegador) */
.fofoca-dlg{width:min(640px,100% - 32px);max-height:calc(100dvh - 40px);margin:auto;padding:0;overflow-y:auto;color:var(--txt);background:var(--card);border:1px solid rgba(217,70,239,.35);border-radius:22px;box-shadow:0 30px 70px rgba(0,0,0,.55)}
.fofoca-dlg[open]{animation:fofocaAbre .25s ease-out}
.fofoca-dlg::backdrop{background:rgba(8,3,18,.85);backdrop-filter:blur(6px)}
.fofoca-dlg .modal-close{top:14px;right:14px;background:rgba(15,6,32,.55);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(6px)}
.fofoca-dlg .modal-close:hover{background:var(--grad)}
.fofoca-dlg-capa img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.fofoca-dlg-corpo{display:grid;gap:10px;padding:22px 24px 24px}
.fofoca-dlg-titulo{font-size:1.35rem;line-height:1.25}
.fofoca-dlg-resumo{line-height:1.7}
.fofoca-dlg-link{justify-self:start;margin-top:6px}
.fofoca-dlg-nota{color:var(--mut);font-size:.78rem}
@keyframes fofocaAbre{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:480px){.fofoca-dlg-corpo{padding:18px}.fofoca-dlg-link{justify-self:stretch}}
@media(prefers-reduced-motion:reduce){.fofoca-dlg[open]{animation:none}}

/* --- Recados: formulário e mural (carrossel vertical) --- */
.recados-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:30px;align-items:start}
.counter{text-align:right;font-size:.78rem;color:var(--mut);margin-top:-8px}
.wall{display:block;height:auto;max-height:480px;overflow:hidden;padding-right:0;position:relative}
/* o movimento é feito no inicio.js (sobe sozinho, pausa com o mouse em cima e dá para arrastar com mouse ou dedo) */
.wall.run{height:480px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  -webkit-mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent)}
.wall.run.arrastando{cursor:grabbing}
.wall.run .wall-track{will-change:transform}
.wall-group{display:grid;gap:14px;padding-bottom:14px}
.wall::-webkit-scrollbar-track{background:transparent}.wall::-webkit-scrollbar-thumb{border-color:transparent}
.note{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--p2);border-radius:16px;padding:16px 20px;animation:fadeUp .4s both}
.note p{margin-bottom:8px}.note small{color:var(--mut)}
.note strong{color:var(--p2-txt)}
@media(max-width:900px){.recados-grid{grid-template-columns:minmax(0,1fr)}.wall{max-height:420px}.wall.run{height:420px}}
@media(prefers-reduced-motion:reduce){.wall.run{overflow-y:auto;-webkit-mask-image:none;mask-image:none;cursor:auto;touch-action:auto;user-select:auto;-webkit-user-select:auto}.wall-group[aria-hidden]{display:none}}

/* --- Contato e redes sociais: lista à esquerda e redes à direita (no celular, uma embaixo da outra) --- */
.contato-grid{display:grid;grid-template-columns:minmax(0,560px) auto;justify-content:start;align-items:start;gap:40px 120px}
.contato{font-style:normal}
.contact-list{display:grid;grid-template-columns:1fr;gap:0;max-width:560px;margin-inline:0}
.contact-list li{display:flex;align-items:center;gap:14px;color:var(--mut);border-bottom:1px solid var(--line);padding:14px 0;min-width:0;overflow-wrap:anywhere}
.contact-list li:first-child{border-top:1px solid var(--line)}
.contact-list a{transition:color .2s}
.contact-list a[href^="tel:"]{white-space:nowrap} /* o número não quebra no meio */
.contact-list a:hover{color:#fff;text-decoration:underline}
.contact-list span.ci{flex:none;display:block}
.contact-list .ci svg{width:22px;height:22px;display:block;fill:none;stroke:var(--p2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.social{max-width:none;margin:0;text-align:left}
@media(max-width:760px){.contato-grid{grid-template-columns:minmax(0,1fr);gap:36px}}
/* a chamada do Contato (topo da coluna da lista) e o título das redes: mesmo estilo e mesma altura, lado a lado */
.social h3,.contato-chamada{font-size:1.05rem;font-weight:600;color:var(--mut);margin-bottom:16px}
.social-links{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:12px}
/* redes sociais: só o ícone, em botão redondo (o nome fica no aria-label e na dica ao passar o mouse) */
.social-btn{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;padding:0;border-radius:50%;background:var(--card);border:1px solid var(--line);transition:transform .2s,background .25s,border-color .25s,box-shadow .25s}
.social-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.social-btn svg.wa{fill:currentColor;stroke:none}
.social-btn:hover{transform:translateY(-3px);color:#fff}
.social-btn.facebook:hover{background:#1877f2;border-color:#1877f2;box-shadow:0 10px 24px rgba(24,119,242,.4)}
.social-btn.instagram:hover{background:linear-gradient(45deg,#f09433,#dc2743 50%,#bc1888);border-color:transparent;box-shadow:0 10px 24px rgba(220,39,67,.4)}
.social-btn.whatsapp:hover{background:#25d366;border-color:#25d366;box-shadow:0 10px 24px rgba(37,211,102,.4)}
.social-btn:focus-visible{outline:2px solid var(--p2);outline-offset:3px}

/* --- Entrada suave das seções ao rolar (a classe .in é posta pelo inicio.js) ---
   Fica depois das seções de propósito: nos cartões que também têm .reveal (vídeo, locutor, álbum)
   esta transição vence a do próprio cartão. */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ===== 7. Janelas (vídeo, álbum) ===== */
.modal{position:fixed;inset:0;z-index:100;background:rgba(8,3,18,.85);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:.3s}
.modal.open{opacity:1;visibility:visible}
.modal-box{position:relative;width:min(820px,100%);background:var(--card);border-radius:22px;padding:18px;transform:scale(.94);transition:transform .3s}
.modal.open .modal-box{transform:none}
.modal-titulo{margin:14px 6px 4px;font-size:1.17em;font-weight:700;line-height:inherit}
.modal-close{position:absolute;top:-14px;right:-14px;width:38px;height:38px;border-radius:50%;background:var(--grad);z-index:2}

/* --- vídeo --- */
.modal-video{aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000}
.modal-video iframe{width:100%;height:100%;border:0}

/* --- álbum de fotos (carrossel) --- */
.alb-box{position:relative;width:min(1000px,100%);max-height:100%;overflow-y:auto;overflow-x:hidden;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:20px 20px 16px;transform:scale(.96);transition:transform .3s}
.modal.open .alb-box{transform:none}
.alb-box .modal-close{top:14px;right:14px}
.alb-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;padding:4px 44px 14px 4px}
.alb-month{display:inline-block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--p2-txt)}
.alb-titulo{font-size:1.4rem;font-weight:700;line-height:1.2}
.alb-head p{color:var(--mut);font-size:.9rem}
.alb-meta{display:flex;flex-wrap:wrap;gap:8px}
.alb-meta span{font-size:.82rem;padding:5px 14px;border-radius:999px;background:rgba(168,85,247,.16);border:1px solid rgba(168,85,247,.35)}
.alb-stage{position:relative;display:grid;place-items:center;background:#0a0416;border-radius:16px;overflow:hidden;min-height:200px}
.alb-stage figure{width:100%;display:grid;justify-items:center}
.alb-stage img{width:100%;max-height:min(62vh,620px);object-fit:contain;display:block;opacity:0;transition:opacity .35s}
.alb-stage img.in{opacity:1}
.alb-stage figcaption{width:100%;padding:10px 16px;text-align:center;color:var(--mut);font-size:.9rem;min-height:1.6em}
.alb-nav{position:absolute;top:calc(50% - 20px);transform:translateY(-50%);z-index:2;width:46px;height:46px;border-radius:50%;background:rgba(15,6,32,.7);backdrop-filter:blur(6px);border:1px solid var(--line);font-size:1.8rem;line-height:1;display:grid;place-items:center;transition:background .2s,transform .2s}
.alb-nav:hover{background:var(--grad);transform:translateY(-50%) scale(1.08)}
.alb-nav.prev{left:12px}.alb-nav.next{right:12px}
.alb-pos{position:absolute;top:12px;right:12px;z-index:2;font-size:.78rem;font-weight:600;padding:4px 12px;border-radius:999px;background:rgba(15,6,32,.72)}
.alb-thumbs{display:flex;gap:8px;overflow-x:auto;padding:12px 2px 4px;scrollbar-width:thin}
.alb-thumb{flex:none;width:74px;height:54px;border-radius:10px;overflow:hidden;border:2px solid transparent;opacity:.55;transition:opacity .2s,border-color .2s}
.alb-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.alb-thumb:hover{opacity:.9}
.alb-thumb.active{opacity:1;border-color:var(--p2)}
.alb-box::-webkit-scrollbar-track,.alb-thumbs::-webkit-scrollbar-track{background:transparent}
.alb-box::-webkit-scrollbar-thumb,.alb-thumbs::-webkit-scrollbar-thumb{border-color:transparent}
@media(max-width:600px){
  .alb-box{padding:14px 12px}
  .alb-nav{width:38px;height:38px;font-size:1.5rem}
  .alb-thumb{width:60px;height:46px}
}

/* --- Instalar o app no iPhone: passo a passo (<dialog> criado pelo comum.js) --- */
.instalar-dlg{width:min(400px,100% - 32px);margin:auto;padding:30px 24px 24px;text-align:center;color:var(--txt);background:var(--card);border:1px solid rgba(217,70,239,.35);border-radius:22px;box-shadow:0 30px 70px rgba(0,0,0,.55)}
.instalar-dlg[open]{animation:fofocaAbre .25s ease-out}
.instalar-dlg::backdrop{background:rgba(8,3,18,.85);backdrop-filter:blur(6px)}
.instalar-dlg .modal-close{top:12px;right:12px}
.instalar-icone{display:block;margin:0 auto 14px;border-radius:18px;box-shadow:0 10px 26px rgba(124,58,237,.45)}
.instalar-titulo{font-size:1.3rem;margin-bottom:6px}
.instalar-dlg>p{color:var(--mut);font-size:.92rem}
.instalar-passos{display:grid;gap:10px;margin-top:18px;text-align:left;counter-reset:passo;list-style:none}
.instalar-passos li{position:relative;padding:10px 12px 10px 48px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:.92rem;counter-increment:passo}
.instalar-passos li::before{content:counter(passo);position:absolute;left:12px;top:50%;translate:0 -50%;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--grad-text);font-weight:700;font-size:.8rem}
.instalar-passos svg{width:18px;height:18px;vertical-align:-3px;fill:none;stroke:var(--p2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(prefers-reduced-motion:reduce){.instalar-dlg[open]{animation:none}}

/* ===== 8. Barra do player e rodapé ===== */
/* barra fixa embaixo: escondida enquanto a hero (que tem o próprio player) ocupa a tela */
.mini-player{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 0 calc(10px + env(safe-area-inset-bottom));background:rgba(22,10,46,.9);backdrop-filter:blur(16px);border-top:1px solid rgba(168,85,247,.4);box-shadow:0 -10px 40px rgba(0,0,0,.45);
  transform:translateY(110%);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.mini-player.show{transform:none}
/* iPhone (Safari): quando a barra do navegador encolhe ao rolar, sobra um vão abaixo de bottom:0 por onde a página aparecia.
   Este prolongamento do fundo cobre o vão (fica fora da tela quando não há vão) */
.mini-player::after{content:"";position:absolute;left:0;right:0;top:100%;height:120px;background:#140a2a}
.mini-inner{width:min(1140px,100% - 40px);margin-inline:auto;display:flex;align-items:center;gap:16px}
/* miniatura: logo, ou a foto do locutor no ar */
.mini-disc{flex:none;width:48px;height:48px;border-radius:12px;position:relative;
  background:url(../img/logo-radio-alegria.webp) center/78% no-repeat,radial-gradient(circle at 30% 20%,#a855f7,#4c1d95 70%);
  box-shadow:0 6px 16px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.14)}
.mini-disc.has-photo{background-size:cover,cover;background-position:center;background-repeat:no-repeat}
.mini-info{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}
.mini-label{display:flex;align-items:center;gap:9px;font-size:.66rem;letter-spacing:.14em;font-weight:600;color:var(--p2-txt)}
/* na barra o espaço é curto: a bolinha só pisca, sem o anel que se espalha (ele cobria o "NO AR") */
.mini-label .dot{flex:none;animation:piscar 1.4s ease-in-out infinite}
@keyframes piscar{50%{opacity:.3}}
.mini-info strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-info small{color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#miniSub.aviso{color:#fde68a}
.mini-vol{display:flex;align-items:center;gap:8px;flex:none}
.mini-vol .vol-range{width:110px}
.mini-eq{height:28px;margin:0}
.mini-player.playing .mini-eq span{animation:bar 1s ease-in-out infinite}
.mini-eq span:nth-child(2){animation-delay:-.3s!important}.mini-eq span:nth-child(3){animation-delay:-.6s!important}
.mini-eq span:nth-child(4){animation-delay:-.2s!important}.mini-eq span:nth-child(5){animation-delay:-.8s!important}
.mini-btn{flex:none;width:46px;height:46px;font-size:1rem}
/* conectando: o botão vira um círculo girando */
.mini-player.carregando .mini-btn{position:relative}
.mini-player.carregando .mini-btn::after{content:"";position:absolute;inset:13px;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;animation:girar .8s linear infinite}
/* celular: o volume é o dos botões do aparelho (no iPhone a barra nem muda o som); sobra só o mudo e o nome do programa ganha espaço */
@media(max-width:600px){
  .mini-inner{gap:12px}
  .mini-eq,.mini-vol .vol-range{display:none}
  .mini-label{white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){.mini-player.carregando .mini-btn::after{animation:none;border-color:#fff}.mini-label .dot{animation:none}}

/* rodapé */
.footer{padding:30px 0;border-top:1px solid var(--line);background:var(--bg)}
body.has-mini .footer{padding-bottom:96px}
.foot-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;color:var(--mut);font-size:.9rem}
.logo-img.foot-logo{height:64px}
/* crédito do desenvolvedor */
.foot-credit{flex:0 0 100%;text-align:center;margin-top:8px;padding-top:16px;border-top:1px solid var(--line);font-size:.82rem;color:var(--mut)}
.foot-credit strong{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;color:var(--txt);font-weight:600;letter-spacing:.02em}
.foot-credit a{color:inherit;text-decoration:none}
.foot-credit a:hover strong,.foot-credit a:focus-visible strong{text-decoration:underline;text-underline-offset:3px}
.rs-mark{height:18px;width:auto;display:block}

/* aviso de cookies (js/rastreio.js): faixa no rodapé da tela, acima da barra do player; o botão "Cookies" do rodapé reabre */
.cookies{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:80;max-width:720px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;padding:16px 20px;border-radius:18px;background:var(--card);border:1px solid rgba(168,85,247,.45);box-shadow:0 18px 40px rgba(0,0,0,.55);animation:cookiesSobe .3s ease-out}
.cookies p{flex:1 1 300px;margin:0;font-size:.88rem;line-height:1.55;color:var(--mut)}
.cookies-botoes{display:flex;gap:10px;flex:none}
.cookies-botoes .btn{padding:10px 22px}
@keyframes cookiesSobe{from{opacity:0;transform:translateY(12px)}}
@media(max-width:480px){.cookies-botoes{flex:1 1 100%}.cookies-botoes .btn{flex:1}}
@media(prefers-reduced-motion:reduce){.cookies{animation:none}}
.foot-cookies{margin-left:8px;padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.foot-cookies:hover{color:var(--txt)}

/* ===== 9. Página de destaques (entrar / criar conta e área do anunciante) ===== */
.page-cliente{padding:calc(var(--nav-h) + 40px) 0 90px}
.page-cliente h1{font-size:clamp(1.6rem,4vw,2.2rem);font-weight:800}
.status-texto{color:var(--mut)}
.form-titulo{font-size:1.2rem}
.form-titulo:focus{outline:none}

/* entrar / criar conta: campo de senha com botão de mostrar */
.pw{position:relative;display:block}
.pw input{padding-right:52px}
.eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--mut)}
.eye .i-hide,.eye[aria-pressed=true] .i-show{display:none}
.eye[aria-pressed=true] .i-hide{display:block}
.eye:hover{color:#fff;background:rgba(255,255,255,.08)}
.eye:focus-visible{outline:2px solid var(--p2)}

/* área do anunciante: lista de destaques */
.area-topo{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.area-botoes,.form-botoes,.meu-acoes{display:flex;gap:10px;flex-wrap:wrap}
.meus-destaques{list-style:none;display:grid;gap:14px;margin-top:14px}
.meu-destaque{display:grid;grid-template-columns:180px 1fr auto;gap:16px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.02)}
.meu-thumb{display:block;width:180px;height:60px;overflow:hidden;border-radius:10px}
.meu-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.meu-info{display:grid;gap:4px;min-width:0}
.meu-info small{color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meu-info .motivo{white-space:normal;color:#fca5a5}
.meu-info .pill{justify-self:start}
.pill{display:inline-block;padding:4px 12px;border-radius:999px;font-size:.78rem;font-weight:600;background:rgba(255,255,255,.08);color:var(--mut)}
.pill.ok{background:rgba(34,197,94,.18);color:#86efac}
.pill.wait{background:rgba(250,204,21,.18);color:#fde68a}
.pill.no{background:rgba(239,68,68,.18);color:#fca5a5}
@media(max-width:600px){.meu-destaque{grid-template-columns:1fr}.meu-thumb{width:100%;height:auto;aspect-ratio:2/1}}

/* formulário do destaque */
.voltar-lista{justify-self:start;color:var(--mut);font-size:.9rem;text-decoration:underline;text-underline-offset:3px}
.voltar-lista:hover{color:var(--txt)}
.form-aviso{padding:12px 16px;border-radius:14px;border:1px solid rgba(250,204,21,.35);background:rgba(250,204,21,.08);color:#fde68a;font-size:.9rem}
.form-aviso.erro{border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.08);color:#fca5a5}
.grupo{border:1px solid var(--line);border-radius:18px;padding:18px;display:grid;gap:8px;min-width:0}
.grupo legend{padding:0 8px;font-weight:700;color:var(--txt)}
.grupo > label,.linha-2 label{font-size:.88rem;font-weight:500;color:var(--mut);margin-top:6px}
.linha-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.linha-2 > div{display:grid;gap:8px;min-width:0}
.campo-erro{color:#fca5a5;font-size:.82rem}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:#f43f5e}
.hint.conta{display:flex;justify-content:space-between;gap:12px}
#contaDesc{flex:none;font-variant-numeric:tabular-nums}
#contaDesc.quase{color:#fde68a}
@media(max-width:600px){.linha-2{grid-template-columns:1fr;gap:8px}.grupo{padding:14px}}

/* envio da imagem: botão próprio + área para soltar o arquivo */
.arquivo-oculto{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.upload-zona{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px;border:2px dashed rgba(168,85,247,.4);border-radius:16px;transition:border-color .2s,background .2s}
.upload-zona.sobre{border-color:var(--p2);background:rgba(168,85,247,.08)}
.upload-zona.enviando{opacity:.7}
.form .upload-zona .btn{display:inline-flex;color:var(--txt);font-size:.95rem;cursor:pointer}
.arquivo-oculto:focus-visible + .btn{outline:3px solid var(--p2);outline-offset:2px}
.upload-texto{color:var(--mut);font-size:.85rem;flex:1 1 220px}

/* prévia do banner: mesma moldura do carrossel (proporção definida pelo destaques.js, recorte central como no site) */
.capa-previa{display:grid;gap:10px}
.capa-previa p{color:var(--txt)}
.previas{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.previas figure{display:grid;gap:6px;flex:1 1 300px;min-width:0;margin:0}
.previas .previa-cel{flex:0 0 130px}
.previas figcaption{font-size:.78rem;color:var(--mut);text-align:center}
.moldura{overflow:hidden;cursor:grab;touch-action:none;user-select:none;border-radius:14px;border:1px solid var(--line);background:var(--bg2)}
.moldura img{display:block;width:100%;height:100%;object-fit:cover}
.moldura.arrastando{cursor:grabbing}
.moldura:focus-visible{outline:3px solid var(--p2);outline-offset:2px}
.enquadrar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.enquadrar #zoom{flex:1 1 100px;width:auto;min-width:0;accent-color:var(--p2)}
.enquadrar output{min-width:3.5em;color:var(--txt);font-weight:600}
@media(max-width:600px){.enquadrar #centralizar{flex:1 1 100%}}

/* confirmação de envio do destaque (card sobre a tela escurecida) */
.confirma{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;background:rgba(8,3,18,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.confirma-card{width:min(420px,100%);display:grid;gap:12px;justify-items:center;padding:32px 28px;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 60px rgba(0,0,0,.5);animation:confirmaIn .35s ease-out}
.confirma-card h2{font-size:1.3rem;font-weight:800}
.confirma-card p{color:var(--mut);font-size:.95rem}
.confirma-icon{width:56px;height:56px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-size:1.6rem;font-weight:700;box-shadow:0 8px 22px rgba(168,85,247,.45)}
.confirma-barra{width:100%;height:8px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.confirma-barra span{display:block;height:100%;width:0;background:var(--grad)}
.confirma-botoes{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
@keyframes confirmaIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.confirma-card{animation:none}}
/* confirmação de exclusão de destaque: card como o de "Pedido enviado!", com ícone de lixeira e Cancelar / Excluir */
.excluir-dlg{width:min(420px,100% - 32px);margin:auto;padding:0;color:var(--txt);background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.excluir-dlg::backdrop{background:rgba(8,3,18,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.excluir-dlg[open]{animation:confirmaIn .35s ease-out}
.excluir-dlg form{display:grid;gap:12px;justify-items:center;padding:30px 26px 26px;text-align:center}
.excluir-icone{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:rgba(244,63,94,.15);border:1px solid rgba(244,63,94,.45);color:#fda4af}
.excluir-icone svg{width:26px;height:26px}
.excluir-dlg h2{font-size:1.2rem;font-weight:800;overflow-wrap:anywhere}
.excluir-dlg p{color:var(--mut);font-size:.95rem}
.excluir-botoes{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px}
.excluir-botoes .btn{min-width:130px}
.btn.perigo{background:#e11d48;color:#fff;box-shadow:0 10px 28px rgba(225,29,72,.35)}
.btn.perigo:hover{transform:translateY(-2px);background:#be123c}
@media(max-width:420px){.excluir-botoes .btn{flex:1 1 100%}}
@media(prefers-reduced-motion:reduce){.excluir-dlg[open]{animation:none}}

/* ===== 10. Página de fofocas (fofocas.html) ===== */
.page-fofocas{padding:calc(var(--nav-h) + 40px) 0 90px}
.page-fofocas h1{position:relative;font-size:clamp(2rem,5vw,3rem);margin:0;padding-bottom:14px}
.page-fofocas h1::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:4px;background:var(--p2)}
.fofocas-status{min-height:1.5em;margin:-10px 0 22px;color:var(--mut);font-size:.85rem}
.fofocas-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(270px,100%),1fr));gap:24px}
.fofocas-lista .fofoca-titulo{font-size:1.02rem}
.fofocas-vazio{grid-column:1/-1;text-align:center;color:var(--mut);padding:40px 10px}
.fofocas-mais{margin-top:32px;text-align:center}
@media(max-width:600px){.fofocas-lista{gap:16px}}

/* ===== 11. Página offline (offline.html: o app abre sem internet) ===== */
.page-offline{min-height:100vh;min-height:100dvh;display:grid;place-content:center;justify-items:center;gap:14px;padding:40px 24px;text-align:center;
  background:radial-gradient(700px 400px at 80% 0%,rgba(124,58,237,.35),transparent 60%),radial-gradient(600px 400px at 0% 100%,rgba(217,70,239,.22),transparent 60%),var(--bg)}
.offline-logo{width:180px;height:auto;filter:drop-shadow(0 8px 20px rgba(0,0,0,.4))}
.page-offline h1{font-size:clamp(1.7rem,6vw,2.4rem);margin:6px 0 0}
.page-offline p{max-width:420px;color:var(--mut)}
.page-offline .btn{margin-top:8px}