/* ---------- Fonte da marca (Baloo 2, licença OFL, hospedada aqui) ---------- */
@font-face{font-family:'Baloo';font-style:normal;font-weight:600;font-display:swap;
  src:url(fontes/baloo2-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212;}
@font-face{font-family:'Baloo';font-style:normal;font-weight:600;font-display:swap;
  src:url(fontes/baloo2-600-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Baloo';font-style:normal;font-weight:700;font-display:swap;
  src:url(fontes/baloo2-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212;}
@font-face{font-family:'Baloo';font-style:normal;font-weight:700;font-display:swap;
  src:url(fontes/baloo2-700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Baloo';font-style:normal;font-weight:800;font-display:swap;
  src:url(fontes/baloo2-800-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212;}
@font-face{font-family:'Baloo';font-style:normal;font-weight:800;font-display:swap;
  src:url(fontes/baloo2-800-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF;}

/* ---------- Paleta tirada da marca do Bentinho ---------- */
:root{
  --amarelo:#F3B32F;      /* fundo da marca */
  --amarelo-vivo:#FFBE00; /* amarelo mais forte */
  --amarelo-claro:#FFE9B0;
  --creme:#FFF7E4;
  --destaque:#F7C232;     /* o "DO" e o risco da logo */
  --azul:#058FE3;         /* letras da logo */
  --azul-escuro:#06427B;  /* contorno da logo, textos */
  --azul-gola:#3493BF;
  --verde:#2FAE60;
  --rosa:#F2568F;
  --branco:#FFFFFF;
  --sombra:0 6px 0 rgba(6,66,123,.22);
  --raio:26px;
}

*{box-sizing:border-box}
/* Sem isto, qualquer display de autor (o .bt é inline-flex) vence o [hidden] do navegador
   e o elemento continua na tela mesmo marcado como escondido. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:'Baloo',ui-rounded,'Nunito','Segoe UI',system-ui,sans-serif;
  font-weight:600; color:var(--azul-escuro); background:var(--creme);
  font-size:clamp(16px,1.05rem + .2vw,19px); line-height:1.5;
  overflow-x:hidden;
}
h1,h2,h3{font-weight:800; line-height:1.12; margin:0 0 .4em}
p{margin:0 0 1em}
/* height:auto é obrigatório: sem ele o atributo height="..." do HTML continua valendo
   quando o CSS define só a largura, e a imagem estica. */
img{max-width:100%; display:block; height:auto}
a{color:var(--azul); text-decoration-thickness:.14em; text-underline-offset:.18em}

.env{width:min(1160px,100% - 2.2rem); margin-inline:auto}

/* Foco visível e generoso — teclado e leitor de tela */
:where(a,button,input,summary,[tabindex]):focus-visible{
  outline:4px solid var(--azul-escuro); outline-offset:3px; border-radius:12px}

.pular{position:absolute; left:-9999px; top:0; background:var(--azul-escuro); color:#fff;
  padding:.8rem 1.2rem; border-radius:0 0 14px 0; z-index:99}
.pular:focus{left:0}

.oculto{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Botões gordinhos, fáceis de acertar com o dedo ---------- */
.bt{
  --cor:var(--azul); --borda:#0466a5;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:60px; padding:.75rem 1.6rem; border:0; border-radius:999px;
  background:var(--cor); color:#fff; font:inherit; font-weight:800; font-size:1.06em;
  cursor:pointer; box-shadow:0 6px 0 var(--borda); text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease; -webkit-tap-highlight-color:transparent;
}
.bt:hover{transform:translateY(-2px); box-shadow:0 8px 0 var(--borda)}
.bt:active{transform:translateY(4px); box-shadow:0 2px 0 var(--borda)}
.bt--amarelo{--cor:var(--destaque); --borda:#c8931a; color:var(--azul-escuro)}
.bt--branco{--cor:#fff; --borda:#dcc9a4; color:var(--azul-escuro)}
.bt--verde{--cor:var(--verde); --borda:#218347}
.bt--rosa{--cor:var(--rosa); --borda:#c93b70}
.bt--fantasma{--cor:transparent; --borda:transparent; color:var(--azul-escuro); box-shadow:none;
  border:3px solid rgba(6,66,123,.25)}
.bt--fantasma:hover{background:rgba(6,66,123,.06); box-shadow:none; transform:none}
.bt svg{width:1.35em; height:1.35em; flex:none}

/* ---------- Cabeçalho ---------- */
.topo{position:sticky; top:0; z-index:40; background:rgba(255,247,228,.94);
  backdrop-filter:blur(10px); box-shadow:0 3px 0 rgba(6,66,123,.09)}
.topo-in{display:flex; align-items:center; gap:.7rem; padding:.5rem 0; min-height:78px}
.marca{display:flex; align-items:center; text-decoration:none; margin-right:auto; flex:none}
.marca img{height:54px; width:auto}
@media(min-width:820px){
  .topo-in{gap:1.2rem; min-height:86px}
  .marca img{height:64px}
}
.topo .bt{min-height:48px; padding:.45rem 1.05rem; font-size:.92em}

/* Botão do menu — os links saíram do cabeçalho e foram para a gaveta lateral,
   deixando lá só o que a criança usa: rádio e TV. */
.menu-bt{display:grid; place-items:center; width:46px; height:46px; flex:none; cursor:pointer;
  border:3px solid rgba(6,66,123,.22); border-radius:14px; background:#fff; color:var(--azul-escuro);
  box-shadow:0 3px 0 rgba(6,66,123,.16); transition:transform .12s ease, background .12s ease;
  -webkit-tap-highlight-color:transparent}
.menu-bt:hover{background:var(--amarelo-claro); transform:translateY(-1px)}
.menu-bt:active{transform:translateY(2px); box-shadow:none}
.menu-bt svg{width:24px; height:24px}
a.menu-bt{text-decoration:none; color:var(--azul-escuro)}
.gl-navy{background:var(--azul-escuro)}

/* ---------- Gaveta lateral ---------- */
/* Gaveta encostada na DIREITA, do mesmo lado do botão que a abre. */
.gaveta{border:0; padding:0; margin:0 0 0 auto; width:min(330px,86vw); max-width:100%;
  height:100dvh; max-height:100dvh; background:var(--creme); color:var(--azul-escuro);
  box-shadow:-14px 0 40px rgba(6,66,123,.35); overflow:auto; overscroll-behavior:contain;
  transform:translateX(102%); transition:transform .24s cubic-bezier(.3,1,.5,1)}
.gaveta.aberta{transform:translateX(0)}
.gaveta::backdrop{background:rgba(6,66,123,.60); backdrop-filter:blur(3px)}
.gaveta-topo{display:flex; align-items:center; gap:1rem; padding:1rem 1rem .8rem;
  border-bottom:3px solid rgba(6,66,123,.10)}
.gaveta-topo img{height:48px; width:auto; margin-right:auto}
.gaveta-links{display:flex; flex-direction:column; padding:.7rem .7rem}
.gaveta-links a, .gaveta-links button{display:flex; align-items:center; gap:.8rem; width:100%;
  padding:.7rem .7rem; border:0; border-radius:16px; background:transparent; cursor:pointer;
  font:inherit; font-weight:800; font-size:1.02em; color:var(--azul-escuro); text-decoration:none;
  text-align:left; -webkit-tap-highlight-color:transparent}
.gaveta-links a:hover, .gaveta-links button:hover{background:#fff}
.gl-ic{display:grid; place-items:center; width:42px; height:42px; border-radius:50%; flex:none; color:#fff}
.gl-ic svg{width:21px; height:21px}
.gl-azul{background:var(--azul)}
.gl-amarelo{background:var(--destaque); color:var(--azul-escuro)}
.gl-rosa{background:var(--rosa)}
.gl-verde{background:var(--verde)}
.gl-tube{background:#FF0033}
.gl-lapis{background:var(--azul-gola)}
.gl-insta{background:linear-gradient(45deg,#F58529,#DD2A7B 52%,#8134AF 78%,#515BD4)}
.gl-seta{width:18px; height:18px; margin-left:auto; flex:none; opacity:.45}
.gaveta-pe{display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; padding:1rem 1.4rem 2rem;
  border-top:3px solid rgba(6,66,123,.10); margin-top:.4rem; font-size:.92em}
.gaveta-pe a{color:#5a6f85; font-weight:700}
@media(prefers-reduced-motion:reduce){.gaveta{transition:none}}

/* Rádio e TV moram juntos num painel só: são a mesma pergunta — "ouvir ou assistir?".
   Soltos no cabeçalho pareciam dois botões perdidos. */
.modos{display:flex; align-items:center; gap:.3rem; flex:none;
  background:rgba(6,66,123,.07); border-radius:999px; padding:.28rem}
.modo{position:relative; display:inline-flex; align-items:center; gap:.4rem;
  min-height:44px; padding:.42rem .85rem; border:0; border-radius:999px;
  background:#fff; color:var(--azul-escuro); font:inherit; font-weight:800; font-size:.9em;
  cursor:pointer; box-shadow:0 2px 0 rgba(6,66,123,.18);
  transition:transform .12s ease, background .12s ease; -webkit-tap-highlight-color:transparent}
.modo:hover{transform:translateY(-1px); background:var(--amarelo-claro)}
.modo:active{transform:translateY(2px); box-shadow:none}
.modo svg{width:21px; height:21px; flex:none}
.modo--tv{background:var(--destaque)}
/* Em tela estreita cabem só os ícones (com o botão do menu e a logo, os rótulos
   estouravam a largura). Quem não reconhecer o desenho acha "Rádio" e "Modo TV"
   escritos por extenso na gaveta lateral. */
.modo span{display:none}
@media(min-width:480px){.modo span{display:inline}}

/* ---------- Capa: cenário em recorte de papel (artes aprovadas pelo Dr.) ----------
   Fora o Bentinho, NADA aqui é imagem. Fundo creme com blobs e meio-tom, nuvens e
   arco-íris de papel, colina amarela, título 3D em texto de verdade.
   --h-colina amarra a altura da colina com a base das nuvens e do arco-íris: mexer
   num número só desloca a cena inteira sem descolar as camadas. */
.capa{
  --h-colina:52%;
  position:relative; overflow:hidden; text-align:center;
  background:
    radial-gradient(58% 44% at 6% 2%,   #F8E5BE 0 38%, transparent 74%),
    radial-gradient(42% 34% at 97% 8%,  #FAE9C8 0 42%, transparent 78%),
    radial-gradient(48% 42% at 72% 44%, #FDF1D8 0 44%, transparent 80%),
    linear-gradient(180deg,#FEF9EC,#FDF4E1 58%,#FBEDD1);
}

/* meio-tom (bolinhas) só nos cantos — as duas máscaras se somam */
.meiotom{position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(circle, rgba(238,172,56,.40) 1.5px, transparent 1.9px);
  background-size:12px 12px;
  -webkit-mask-image:radial-gradient(40% 32% at 1% 1%, #000 0 22%, transparent 74%),
                     radial-gradient(22% 16% at 100% 34%, #000 0 24%, transparent 76%);
          mask-image:radial-gradient(40% 32% at 1% 1%, #000 0 22%, transparent 74%),
                     radial-gradient(22% 16% at 100% 34%, #000 0 24%, transparent 76%);
}

/* nuvens GRANDES como na referência (≈30% da largura de altura), nascendo
   atrás da colina: ela engole a base, o topo fofo fica à mostra */
.nuvens,.arco{position:absolute; z-index:1; pointer-events:none;
  bottom:calc(var(--h-colina) - 10%)}
.nuvens{height:clamp(130px,30vw,270px); width:auto}
.nv-esq{left:-7%}
.nv-dir{right:-7%}
.arco{display:none}   /* a referência não tem arco-íris: tem as bolas da frente */

/* as bolas rosa e azul do canto direito ficam NA FRENTE do morro, como na arte —
   pequenas e enfiadas no canto, com a nuvem branca espiando por cima */
.frente-rosa,.frente-azul{position:absolute; z-index:3; border-radius:50%; pointer-events:none}
.frente-rosa{width:clamp(78px,21vw,175px); aspect-ratio:1; right:-8%;
  bottom:calc(var(--h-colina) - 14vw); background:#F794BC}
.frente-azul{width:clamp(60px,16vw,135px); aspect-ratio:1; right:-12%;
  bottom:calc(var(--h-colina) - 21vw); background:#3E71D9}
.nv-dir{bottom:calc(var(--h-colina) - 6%)}
@media(min-width:900px){
  .frente-rosa{width:170px; right:-2%; bottom:calc(var(--h-colina) - 9vw)}
  .frente-azul{width:130px; right:-4%; bottom:calc(var(--h-colina) - 13vw)}
}

/* a colina: frente de todo o céu, fundo de todo o conteúdo */
.colina{position:absolute; left:-6%; right:-6%; bottom:0; height:var(--h-colina); z-index:2;
  border-top-left-radius:50% 88px; border-top-right-radius:50% 88px; overflow:hidden;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.34);
  background:
    radial-gradient(circle at 74% 82%, rgba(255,255,255,.16) 0 6px, transparent 7px) 0 0/56px 56px,
    linear-gradient(180deg,#FFD457,#FFC12D 44%,#F4AE1F)}
/* o meio-tom do canto direito vive NA colina (na camada do céu ele ficava coberto) */
.colina::after{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle, rgba(200,124,12,.30) 1.6px, transparent 2px);
  background-size:13px 13px;
  -webkit-mask-image:radial-gradient(34% 46% at 97% 90%, #000 0 28%, transparent 74%);
          mask-image:radial-gradient(34% 46% at 97% 90%, #000 0 28%, transparent 74%)}
.ondas{position:absolute; left:0; bottom:6%; width:64%; height:44%}
@media(min-width:900px){
  .colina{border-top-left-radius:50% 132px; border-top-right-radius:50% 132px}
  .ondas{width:46%; height:56%}
}

/* notas, estrelas e bolinhas com relevo: sombra sólida (--d3) + sombra difusa */
.dec{position:absolute; z-index:3; pointer-events:none;
  filter:drop-shadow(0 2.5px 0 var(--d3)) drop-shadow(0 6px 7px rgba(6,66,123,.20));
  animation:flutua 5.2s ease-in-out infinite}
/* As NOTAS saem DO BENTINHO, como som de um radinho: cada uma nasce pequena
   junto dele (--sx/--sy é o deslocamento do lugar final até o peito dele),
   voa até o seu lugar no céu crescendo, e some. As estrelas só flutuam. */
@keyframes emana{
  0%{transform:translate(var(--sx),var(--sy)) scale(.35); opacity:0}
  14%{opacity:1}
  76%{opacity:1}
  100%{transform:translate(0,0) scale(1); opacity:0}
}
.dec-n1,.dec-n2,.dec-n3,.dec-n4,.dec-n5,.dec-n6{animation:emana 3.9s ease-out infinite}
.dec-n1{left:6%;  top:10%; width:46px; height:46px; color:#2F86E0; --d3:#1B5EA6; --sx:120px;  --sy:120px}
.dec-n2{right:7%; top:13%; width:40px; height:40px; color:#F2568F; --d3:#C93B70; --sx:-120px; --sy:110px; animation-delay:.7s}
.dec-n3{left:11%; top:55%; width:31px; height:31px; color:#2F86E0; --d3:#1B5EA6; --sx:110px;  --sy:-90px; animation-delay:1.4s}
.dec-n4{right:13%;top:47%; width:35px; height:35px; color:#F7C232; --d3:#C8931A; --sx:-105px; --sy:-70px; animation-delay:2.1s}
.dec-n5{left:22%; top:30%; width:26px; height:26px; color:#F7C232; --d3:#C8931A; --sx:75px;   --sy:40px;  animation-delay:2.8s}
.dec-n6{right:22%;top:28%; width:28px; height:28px; color:#2F86E0; --d3:#1B5EA6; --sx:-80px;  --sy:45px;  animation-delay:3.4s}
.dec-e1{left:19%; top:26%; width:27px; height:27px; color:#F7C232; --d3:#C8931A; animation-delay:.5s}
.dec-e2{right:23%;top:31%; width:21px; height:21px; color:#F2568F; --d3:#C93B70; animation-delay:1.3s}
/* alto o bastante para nunca cair em cima do subtítulo */
.dec-e3{right:6%; top:47%; width:25px; height:25px; color:#2F86E0; --d3:#1B5EA6; animation-delay:2.1s}
.bolha{position:absolute; z-index:3; border-radius:50%; pointer-events:none;
  box-shadow:0 2px 0 var(--d3), 0 5px 6px rgba(6,66,123,.16)}
.bo1{left:14%;  top:20%; width:13px; height:13px; background:#F7C232; --d3:#C8931A}
.bo2{right:16%; top:8%;  width:15px; height:15px; background:#F58BB4; --d3:#D9628F}
.bo3{right:9%;  top:38%; width:11px; height:11px; background:#F7C232; --d3:#C8931A}
/* no computador as notas dançam em volta do Bentinho, do lado direito */
@media(min-width:900px){
  /* os caminhos aqui são mais longos; a duração cresce junto para a
     VELOCIDADE ficar igual à do celular */
  .dec-n1,.dec-n2,.dec-n3,.dec-n4,.dec-n5,.dec-n6{animation-duration:5.6s}
  .dec-n1{left:44%; top:8%;  --sx:240px;  --sy:150px}
  .dec-n2{right:5%; top:16%; --sx:-150px; --sy:130px}
  .dec-n3{left:52%; top:58%; --sx:200px;  --sy:-70px}
  .dec-n4{right:22%; top:40%; --sx:-70px; --sy:-20px}
  .dec-n5{left:58%; top:14%; --sx:130px;  --sy:110px}
  .dec-n6{right:10%; top:56%; --sx:-150px; --sy:-50px}
  .dec-e1{left:47%; top:30%} .dec-e2{right:27%; top:10%} .dec-e3{right:7%; top:58%}
  .bo1{left:50%; top:44%} .bo2{right:11%; top:9%} .bo3{right:19%; top:62%}
}

/* No celular: Bentinho em cima, título sobre a colina. No computador: texto à
   esquerda e o Bentinho de pé sobre a colina, à direita — como nas duas artes. */
.capa-grade{position:relative; z-index:4; display:flex; flex-direction:column}
.capa-txt{padding:0 0 2.4rem}
/* respiro do cabeçalho: o Bentinho não nasce grudado na barra de cima */
.palco{position:relative; order:-1; display:flex; justify-content:center; padding-top:2.4rem}
/* o sol mora no céu (z 0): as nuvens, o arco e a colina passam NA FRENTE dele */
.brilho{position:absolute; z-index:0; top:1%; left:50%; transform:translateX(-50%);
  width:min(530px,104vw); aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,208,70,.66) 0 47%,
                                     rgba(255,208,70,.32) 62%, rgba(255,208,70,0) 72%)}
.mascote{position:relative; width:auto; height:clamp(240px,38vh,380px); margin:0;
  filter:drop-shadow(0 16px 18px rgba(6,66,123,.26)); animation:flutua 4.5s ease-in-out infinite}
@keyframes flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* ---- título 3D: texto de verdade, relevo feito com stroke + camadas de sombra ----
   paint-order joga o contorno para TRÁS do preenchimento; sem ele o stroke come
   metade da letra. As sombras sólidas descendo são a extrusão. */
/* tamanho medido na referência: "Vem cantar" ≈ 10,7% da largura da tela */
.titulo{position:relative; display:inline-block; margin:0 0 .34em;
  font-size:clamp(2.3rem,10.7vw,3.9rem); line-height:.9; letter-spacing:.005em}
/* Letreiro-adesivo da referência, em DUAS camadas de texto:
   — a de cima: preenchimento + contorno azul royal;
   — a de trás (::before, cópia via data-t): contorno BRANCO mais gordo, que
     vira o aro do adesivo, e carrega a extrusão 3D royal.
   (Aro e sombra na MESMA camada viram mancha — por isso as duas camadas.) */
.titulo .l{display:block; position:relative;
  -webkit-text-stroke:.155em #2361CF; paint-order:stroke fill}
.titulo .l::before{content:attr(data-t); position:absolute; inset:0; z-index:-1;
  color:#fff; -webkit-text-stroke:.30em #fff; paint-order:stroke fill;
  text-shadow:
    0 .05em 0 #1E55B8, 0 .09em 0 #1A4CA6, 0 .13em 0 #163F8C,
    0 .17em .02em rgba(22,63,140,.6), 0 .22em .26em rgba(22,63,140,.30)}
.l-branca{color:#fff}
/* proporção da referência: comigo! ≈ 1,38× o Vem cantar */
.l-dourada{color:#FFC71F; font-size:1.38em; margin-top:-.04em}

/* raios curtos dos lados do título, como nas artes */
.raios{position:absolute; top:.8em; width:0; height:0; pointer-events:none; font-size:inherit}
.raios i{position:absolute; display:block; width:.13em; height:.38em; border-radius:99px;
  box-shadow:0 .02em 0 rgba(6,66,123,.22)}
.raios-esq{left:-.5em}
.raios-esq i:nth-child(1){left:.22em;  top:-.40em; background:#fff;     transform:rotate(-38deg)}
.raios-esq i:nth-child(2){left:-.04em; top:.04em;  background:#F2568F;  transform:rotate(-70deg)}
.raios-esq i:nth-child(3){left:.14em;  top:.46em;  background:#39B7F0;  transform:rotate(-106deg)}
.raios-dir{right:-.5em}
.raios-dir i:nth-child(1){right:.22em;  top:-.40em; background:#fff;    transform:rotate(38deg)}
.raios-dir i:nth-child(2){right:-.04em; top:.04em;  background:#F2568F; transform:rotate(70deg)}
.raios-dir i:nth-child(3){right:.14em;  top:.46em;  background:#39B7F0; transform:rotate(106deg)}

.capa-sub{color:#3A5B79; font-size:1.06em; line-height:1.28; max-width:34ch;
  margin:0 auto; font-weight:700}
@media(min-width:520px){.quebra{display:none}}

/* botões em pílula com relevo: borda inferior sólida + sombra difusa por baixo */
.portas{display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; margin-top:1.4rem}
.portas .bt{min-height:60px; padding:.7rem 1.55rem; font-size:1.02em;
  box-shadow:0 6px 0 var(--borda), 0 12px 18px rgba(6,66,123,.20)}
.portas .bt:hover{box-shadow:0 8px 0 var(--borda), 0 14px 20px rgba(6,66,123,.22)}
.portas .bt:active{box-shadow:0 2px 0 var(--borda), 0 6px 10px rgba(6,66,123,.18)}
.portas .bt--branco{--borda:#D9C7A6; color:#0F62B8}
.portas .bt--rosa{--borda:#CE3E76}
/* na arte do celular os dois botões ficam LADO A LADO — dividem a linha meio a meio.
   (Depois da regra base de propósito: mesma especificidade, a última ganha.) */
@media(max-width:519px){
  .portas{flex-wrap:nowrap; gap:.6rem}
  .portas .bt{flex:1 1 0; min-height:56px; padding:.6rem .8rem; font-size:.94em}
}

@media(min-width:900px){
  .capa{--h-colina:30%}
  .capa-grade{flex-direction:row; align-items:center; gap:2.5rem; padding-top:1.4rem}
  /* na referência o bloco do texto é CENTRALIZADO dentro da coluna esquerda */
  .capa-txt{flex:1 1 56%; text-align:center; padding:0 0 3.4rem}
  .palco{order:0; flex:1 1 44%; align-self:flex-end; padding-top:2rem}
  .mascote{height:clamp(330px,54vh,470px)}
  .brilho{left:auto; right:-5%; transform:none; top:5%; width:min(620px,46vw)}
  .titulo{font-size:clamp(2.7rem,4.4vw,4rem)}
  .capa-sub{margin:0 auto; max-width:30ch}
  .portas{justify-content:center; margin-top:2.2rem}
}

/* ---------- Seções ---------- */
.secao{padding:2.6rem 0}
/* O cabeçalho é fixo: sem esta folga ele tampa o título de quem chega por um atalho do menu */
#destaque,#videos,#novidades,#instalar{scroll-margin-top:96px}
.secao-cab{display:flex; align-items:center; gap:.8rem; margin-bottom:1.4rem; flex-wrap:wrap}
.secao-cab h2{font-size:clamp(1.7rem,4.4vw,2.5rem); margin:0}
.risco{height:9px; border-radius:999px; background:var(--destaque); flex:1; min-width:40px;
  box-shadow:0 3px 0 rgba(6,66,123,.18)}

/* ---------- Cartão do vídeo ---------- */
.grade{display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fill,minmax(255px,1fr))}
.cartao{position:relative; display:flex; flex-direction:column; text-align:left; padding:0;
  background:#fff; border:4px solid var(--azul-escuro); border-radius:var(--raio); overflow:hidden;
  box-shadow:0 8px 0 rgba(6,66,123,.28); cursor:pointer; font:inherit; color:inherit;
  transition:transform .14s ease, box-shadow .14s ease; -webkit-tap-highlight-color:transparent}
.cartao:hover{transform:translateY(-5px); box-shadow:0 13px 0 rgba(6,66,123,.28)}
.cartao:active{transform:translateY(2px); box-shadow:0 4px 0 rgba(6,66,123,.28)}
.capa-v{position:relative; aspect-ratio:16/9; background:var(--amarelo-claro); overflow:hidden}
.capa-v img{width:100%; height:100%; object-fit:cover}
.play{position:absolute; inset:0; margin:auto; width:74px; height:74px; border-radius:50%;
  background:var(--azul); border:4px solid #fff; display:grid; place-items:center;
  box-shadow:0 5px 14px rgba(6,66,123,.45); transition:transform .16s ease}
.play svg{width:34px; height:34px; color:#fff; margin-left:4px}
.cartao:hover .play{transform:scale(1.13)}
.cartao-txt{padding:.95rem 1.05rem 1.05rem; display:flex; flex-direction:column; gap:.6rem; flex:1}
.cartao-txt h3{font-size:1.13em; margin:0; line-height:1.25}
/* sem a data, sobra só o compartilhar — fica no canto direito */
.cartao-pe{display:flex; align-items:center; justify-content:flex-end; gap:.5rem; margin-top:auto}
.data{font-size:.85em; color:#6c7f93; font-weight:700}
.selo{position:absolute; top:.7rem; left:.7rem; z-index:2; background:var(--rosa); color:#fff;
  font-weight:800; font-size:.82em; letter-spacing:.04em; padding:.32rem .8rem; border-radius:999px;
  border:3px solid #fff; box-shadow:0 3px 8px rgba(6,66,123,.35)}
.mini-share{display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%;
  border:3px solid rgba(6,66,123,.20); background:#fff; cursor:pointer; color:var(--azul-escuro); flex:none}
.mini-share:hover{background:var(--amarelo-claro); border-color:var(--azul-escuro)}
.mini-share svg{width:20px; height:20px}

/* ---------- Destaque da home ---------- */
.destaque{background:linear-gradient(180deg,var(--creme),#FFEFC9); padding:2.4rem 0 2.8rem;
  border-block:4px solid rgba(6,66,123,.10)}
.destaque .cartao{max-width:none}
@media(min-width:860px){
  .destaque .cartao{flex-direction:row}
  .destaque .capa-v{flex:1 1 58%; aspect-ratio:16/9}
  .destaque .cartao-txt{flex:1 1 42%; justify-content:center; padding:1.8rem}
  .destaque .cartao-txt h3{font-size:clamp(1.4rem,2.6vw,2rem)}
}
.destaque .play{width:92px; height:92px}
.destaque .play svg{width:42px; height:42px}
.chamada{margin:0; font-weight:700; color:#5a6f85; font-size:1.02em}
/* Na carta grande o rodapé não é empurrado para baixo — senão sobra um vão branco no meio */
.destaque .cartao-pe{margin-top:.4rem}
.destaque .cartao-txt{gap:.85rem}

/* ---------- Newsletter ---------- */
.news{background:var(--azul-escuro); color:#fff; border-radius:var(--raio); padding:2rem 1.3rem;
  position:relative; overflow:hidden}
@media(min-width:820px){.news{padding:2.6rem}}
.news h2{color:#fff; font-size:clamp(1.6rem,3.6vw,2.2rem)}
.news p{color:#D3E6F6}
.news-grid{display:grid; gap:1.6rem; align-items:start}
@media(min-width:900px){.news-grid{grid-template-columns:1fr 1.1fr; gap:2.6rem}}
.campo{display:block; margin-bottom:.9rem}
.campo span{display:block; font-weight:700; margin-bottom:.35rem; font-size:.95em}
.campo input{width:100%; min-height:58px; padding:.7rem 1.05rem; font:inherit; font-weight:700;
  border:3px solid transparent; border-radius:16px; background:#fff; color:var(--azul-escuro)}
.campo input:focus{border-color:var(--destaque); outline:none}
.aceite{display:flex; gap:.75rem; align-items:flex-start; background:rgba(255,255,255,.10);
  border-radius:16px; padding:.9rem 1rem; margin:.4rem 0 1.1rem; font-size:.93em; line-height:1.4}
.aceite input{width:26px; height:26px; flex:none; margin-top:2px; accent-color:var(--destaque)}
.recado{display:none; align-items:center; gap:.7rem; background:var(--verde); color:#fff;
  border-radius:16px; padding:.9rem 1.1rem; font-weight:800; margin-top:.9rem}
.recado.erro{background:var(--rosa)}
.recado.on{display:flex}
.recado svg{width:1.5em;height:1.5em;flex:none}
.mini{font-size:.83em; color:#9FC4DF; line-height:1.45}
/* O Bentinho dançando alegra o bloco escuro da newsletter — só no computador,
   onde a coluna do texto sobra embaixo; no celular ele roubaria rolagem. */
.news-bentinho{display:none}
@media(min-width:900px){
  .news-bentinho{display:block; width:auto; height:230px; margin:1.4rem auto 0;
    filter:drop-shadow(0 10px 16px rgba(0,0,0,.35))}
}

/* ---------- Instalar o app (banner das referências do Dr.) ----------
   Celular: cena em cima, tudo centralizado. Computador: cena à esquerda.
   Blobs pastéis nos cantos e meio-tom rosa dão o fundo da arte. */
.instalar{position:relative; overflow:hidden; display:grid; gap:1.4rem; align-items:center;
  background:#FFFDF6; border:4px solid var(--azul-escuro);
  border-radius:var(--raio); padding:1.8rem 1.4rem; box-shadow:0 8px 0 rgba(6,66,123,.20);
  text-align:center}
.instalar::before{content:""; position:absolute; left:-60px; bottom:-70px; width:190px; height:190px;
  border-radius:50%; background:#DCEBFA}
.instalar::after{content:""; position:absolute; right:-70px; bottom:-90px; width:230px; height:230px;
  border-radius:50%; background:#FBEFCB}
.inst-corpo{position:relative; z-index:1}
.inst-corpo::before{content:""; position:absolute; right:-1.4rem; top:-2.4rem; width:110px; height:90px;
  pointer-events:none; opacity:.5; z-index:-1;
  background:radial-gradient(circle, #F2A0C0 2px, transparent 2.5px) 0 0/13px 13px;
  -webkit-mask-image:radial-gradient(closest-side, #000, transparent);
          mask-image:radial-gradient(closest-side, #000, transparent)}

/* a cena: celular + ícone do app, com notas, estrela e coração ao redor */
.inst-arte{position:relative; z-index:1; width:min(300px,86%); height:220px; margin:0 auto}
.inst-fone{position:absolute; left:1%; top:0; width:118px; height:auto;
  transform:rotate(-7deg); filter:drop-shadow(0 10px 14px rgba(6,66,123,.25))}
.inst-icone-caixa{position:absolute; right:0; top:26px; width:150px; height:150px}
.inst-icone-caixa img{width:100%; height:100%; border-radius:34px; border:5px solid #fff;
  box-shadow:0 10px 18px rgba(6,66,123,.28)}
.inst-selo{position:absolute; top:-13px; right:-13px; display:grid; place-items:center;
  width:44px; height:44px; border-radius:50%; background:#fff; color:var(--azul);
  box-shadow:0 4px 8px rgba(6,66,123,.22)}
.inst-selo svg{width:22px; height:22px}
.inst-dec{position:absolute; filter:drop-shadow(0 2px 0 rgba(6,66,123,.18))}
.inst-nota1{left:-6%; top:6%; width:34px; height:34px; color:var(--rosa)}
.inst-nota2{right:-4%; top:-6%; width:28px; height:28px; color:var(--azul)}
.inst-estrela{left:-8%; top:52%; width:24px; height:24px; color:var(--destaque)}
.inst-coracao{position:absolute; left:16%; bottom:-6px; display:grid; place-items:center;
  width:44px; height:44px; border-radius:50%; background:#F794BC; color:#fff;
  box-shadow:0 4px 8px rgba(6,66,123,.20)}
.inst-coracao svg{width:20px; height:20px}

/* passos em fileiras brancas com o número amarelo, como na arte */
.passos{margin:.9rem 0 1.2rem; padding:0; list-style:none; display:grid; gap:.55rem}
.passos li{display:flex; gap:.75rem; align-items:center; text-align:left;
  background:#fff; border:2px solid rgba(6,66,123,.12); border-radius:16px;
  padding:.65rem .85rem; box-shadow:0 3px 8px rgba(6,66,123,.07)}
.passos b{display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:50%;
  background:var(--destaque); color:var(--azul-escuro); font-size:.95em;
  box-shadow:0 2px 0 #C8931A}
.inst-acoes{display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center}
.bt--navy{--cor:var(--azul-escuro); --borda:#032B55; color:#fff}
.seta-fim{width:1.1em!important; height:1.1em!important}

@media(min-width:820px){
  .instalar{grid-template-columns:minmax(280px,330px) 1fr; padding:2.2rem 2.4rem;
    gap:2.4rem; text-align:left}
  .inst-arte{height:250px; margin:0}
  .inst-fone{width:132px}
  .inst-icone-caixa{width:165px; height:165px; top:36px}
  .passos li{background:transparent; border:0; box-shadow:none;
    border-bottom:2px solid rgba(6,66,123,.10); border-radius:0; padding:.55rem .2rem}
  .passos li:last-child{border-bottom:0}
  .inst-acoes{justify-content:flex-start}
}

/* ---------- Player ---------- */
dialog.player{border:0; padding:0; background:transparent; max-width:min(1040px,96vw); width:100%;
  color:var(--azul-escuro); overflow:visible}
dialog.player::backdrop{background:rgba(6,66,123,.82); backdrop-filter:blur(4px)}
.player-caixa{background:#fff; border:5px solid var(--azul-escuro); border-radius:var(--raio); overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.5)}
.player-video{aspect-ratio:16/9; background:#000}
/* A div que recebe o player precisa ter altura, senão o height:100% do iframe
   não tem em que se apoiar e o vídeo fica pequeno no meio de uma tarja preta. */
.player-video > div{width:100%; height:100%}
.player-video iframe{width:100%; height:100%; border:0; display:block}
/* Tela cheia de verdade: o quadro do vídeo passa a ocupar a tela inteira */
.player-video:fullscreen{aspect-ratio:auto; width:100vw; height:100vh}
.player-video:-webkit-full-screen{aspect-ratio:auto; width:100vw; height:100vh}
.player-pe{padding:1rem 1.15rem 1.2rem; display:flex; flex-wrap:wrap; gap:.7rem; align-items:center}
.player-pe h3{margin:0; flex:1 1 200px; font-size:1.2em}
.ic--tela{background:var(--destaque); color:var(--azul-escuro); box-shadow:0 4px 0 #c8931a}
.pe-txt{flex:1 1 200px; min-width:0}
.pe-txt h3{margin:0; font-size:1.2em}

/* ---------- Fila (Rádio / TV) ---------- */
.fila-tag{display:inline-block; background:var(--rosa); color:#fff; font-size:.72em; font-weight:800;
  letter-spacing:.08em; padding:.18rem .6rem; border-radius:999px; margin-bottom:.25rem}
.fila-prox{margin:.25rem 0 0; font-size:.9em; color:#6c7f93; font-weight:700}
.fila-bts{display:flex; align-items:center; justify-content:center; gap:.6rem; flex-wrap:wrap;
  padding:.9rem .8rem .2rem; background:#fff}
/* Anterior, próxima e embaralhar só fazem sentido quando há uma fila (modo TV).
   Dois níveis de seletor de propósito: mais abaixo há um .ct{display:grid} que,
   com uma classe só, venceria por ser a última regra. */
.fila-bts .so-fila{display:none}
.em-fila .fila-bts .so-fila{display:grid}
.ct{display:grid; place-items:center; width:46px; height:46px; border-radius:50%; cursor:pointer;
  border:3px solid var(--azul-escuro); background:#fff; color:var(--azul-escuro);
  box-shadow:0 4px 0 rgba(6,66,123,.22); transition:transform .12s ease; -webkit-tap-highlight-color:transparent}
.ct:hover{transform:translateY(-2px); background:var(--amarelo-claro)}
.ct:active{transform:translateY(3px); box-shadow:0 1px 0 rgba(6,66,123,.22)}
.ct svg{width:21px; height:21px}
.ct--grande{width:58px; height:58px; background:var(--azul); color:#fff; border-color:var(--azul-escuro);
  box-shadow:0 5px 0 #0466a5}
.ct--grande:hover{background:#0a9df5}
.ct--grande svg{width:26px; height:26px}

.fila-lista{list-style:none; margin:0; padding:.4rem .8rem 1rem; max-height:34vh; overflow:auto;
  border-top:3px solid rgba(6,66,123,.10); background:#FFFBF0}
.fila-lista li{margin:0}
.fila-lista button{display:flex; align-items:center; gap:.75rem; width:100%; text-align:left;
  padding:.45rem .55rem; border:0; background:transparent; border-radius:14px; cursor:pointer;
  font:inherit; font-weight:700; color:var(--azul-escuro); font-size:.95em}
.fila-lista button:hover{background:var(--amarelo-claro)}
.fila-lista img{width:64px; height:36px; object-fit:cover; border-radius:8px; flex:none;
  border:2px solid rgba(6,66,123,.18)}
.fila-lista .tocando button{background:var(--destaque)}
.fila-lista .tocando button::after{content:""; width:10px; height:10px; border-radius:50%;
  background:var(--azul-escuro); margin-left:auto; flex:none; animation:pisca 1.1s ease-in-out infinite}
@keyframes pisca{0%,100%{opacity:1}50%{opacity:.25}}
.compartilhar{display:flex; gap:.5rem; flex-wrap:wrap}
.ic{display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%; border:0;
  cursor:pointer; color:#fff; box-shadow:0 4px 0 rgba(0,0,0,.22); transition:transform .12s ease}
.ic:hover{transform:translateY(-2px)}
.ic:active{transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.22)}
.ic svg{width:20px; height:20px}
.ic--zap{background:#25D366}
.ic--face{background:#1877F2}
.ic--mail{background:var(--azul-gola)}
.ic--link{background:#8A93A5}
.ic--share{background:var(--azul-escuro)}
/* O X mora ACIMA do cartão, na área escura — assim não tapa o vídeo e sobra tela
   para ele. Numa faixa própria em vez de pendurado com position:absolute, que era
   o que fazia ele ser cortado pela borda do celular. */
.player-topo{display:flex; justify-content:flex-end; margin-bottom:.55rem}
.fechar{width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:#fff; border:3px solid var(--azul-escuro); cursor:pointer; color:var(--azul-escuro);
  box-shadow:0 4px 0 rgba(0,0,0,.30); transition:transform .12s ease}
.fechar:hover{transform:translateY(-2px)}
.fechar:active{transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.30)}
.fechar svg{width:23px;height:23px}
.player-wrap{position:relative}

/* ---------- Rodapé ---------- */
.rodape{background:var(--azul-escuro); color:#BBD6EC; padding:2.4rem 0 2rem; margin-top:2.4rem;
  text-align:center; font-size:.94em}
.rodape img{height:56px; width:auto; margin:0 auto 1rem}
.rodape a{color:#fff}
.rodape-links{display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap; margin:1rem 0}

/* ---------- Aviso flutuante ---------- */
.torrada{position:fixed; left:50%; bottom:26px; transform:translate(-50%,140%); z-index:90;
  background:var(--azul-escuro); color:#fff; padding:.85rem 1.4rem; border-radius:999px; font-weight:800;
  box-shadow:0 10px 30px rgba(0,0,0,.35); transition:transform .3s cubic-bezier(.2,1.4,.4,1);
  display:flex; align-items:center; gap:.6rem; max-width:92vw}
.torrada.on{transform:translate(-50%,0)}
.torrada svg{width:1.3em;height:1.3em;color:var(--destaque);flex:none}

.vazio{text-align:center; padding:2.4rem 1rem; color:#6c7f93; font-weight:700}

/* ---------- Desenhos para colorir & papéis de parede ---------- */
.ativ-dica{text-align:center; color:#5a6f85; font-weight:700; margin:0 0 1.6rem}
/* Cartões pequenos, tipo galeria (2 colunas até no celular) — o tamanho grande
   é papel do visor, que abre no toque. */
.ativ-grade{display:grid; gap:.9rem; grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.ativ{display:flex; flex-direction:column; background:#fff; border:3px solid var(--azul-escuro);
  border-radius:18px; overflow:hidden; box-shadow:0 5px 0 rgba(6,66,123,.20); cursor:pointer;
  padding:0; font:inherit; text-align:left; -webkit-tap-highlight-color:transparent;
  transition:transform .14s ease, box-shadow .14s ease}
.ativ:hover{transform:translateY(-3px); box-shadow:0 8px 0 rgba(6,66,123,.20)}
.ativ:active{transform:translateY(1px); box-shadow:0 2px 0 rgba(6,66,123,.20)}
.ativ-img{display:grid; place-items:center; aspect-ratio:3/4; padding:.4rem; background:#fff;
  border-bottom:2px solid rgba(6,66,123,.10)}
.ativ-img img{max-width:100%; max-height:100%; object-fit:contain}
.ativ-txt{padding:.5rem .65rem .6rem}
.ativ-txt strong{font-size:.86em; line-height:1.2; color:var(--azul-escuro); display:block}
/* Visor do desenho */
dialog.visor{border:0; padding:0; background:transparent; width:min(720px,94vw); overflow:visible}
dialog.visor::backdrop{background:rgba(6,66,123,.82); backdrop-filter:blur(4px)}
.visor-caixa{background:#fff; border:5px solid var(--azul-escuro); border-radius:24px; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.5)}
#visorImg{display:block; width:100%; max-height:62vh; object-fit:contain; background:#fff;
  border-bottom:3px solid rgba(6,66,123,.10); padding:.6rem}
.visor-pe{padding:.9rem 1.1rem 1.1rem; display:flex; flex-wrap:wrap; gap:.7rem; align-items:center}
.visor-pe strong{flex:1 1 160px; font-size:1.08em; color:var(--azul-escuro)}
.linha-visor{display:flex; gap:.6rem; flex-wrap:wrap}
.linha-visor .bt{min-height:48px; font-size:.92em; padding:.5rem 1.1rem}

.ativ-vazio{text-align:center; padding:1.6rem 1rem 2.4rem}
.ativ-vazio img{width:min(300px,64vw); height:auto; margin:0 auto 1rem;
  filter:drop-shadow(0 10px 14px rgba(6,66,123,.18))}
.ativ-vazio h2{margin:0 0 .3em}
.ativ-vazio p{color:#5a6f85; font-weight:700; margin:0 auto; max-width:38ch}
.ver-todas{min-height:44px; padding:.4rem 1.1rem; font-size:.9em; border-width:3px}

/* ---------- Faixa de título (página das musiquinhas) ----------
   O Bentinho canta de um lado e "apresenta" o título do outro — a mão aberta
   dele aponta para o texto. No celular os dois empilham, centralizados. */
.faixa-titulo{position:relative; overflow:hidden;
  padding:1.5rem 0 3.9rem;                       /* folga: o título nunca monta no recorte */
  /* exatamente o mesmo fundo da capa da home: as duas camadas de bolinhas + degradê */
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.30) 0 9px, transparent 10px) 0 0/78px 78px,
    radial-gradient(circle at 70% 68%, rgba(255,255,255,.18) 0 6px, transparent 7px) 0 0/54px 54px,
    linear-gradient(160deg, var(--amarelo-vivo), var(--amarelo) 62%, #EFA81F)}
.faixa-titulo::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:40px;
  background:radial-gradient(120% 100% at 50% 100%, var(--creme) 0 99%, transparent 100%)}
/* Lado a lado em TODA tela: o Bentinho canta e a mão aberta apresenta o título.
   Empilhado, o título caía na emenda da faixa com um buraco embaixo. */
.faixa-titulo .env{position:relative; z-index:1; display:flex; align-items:center;
  justify-content:center; gap:clamp(.9rem,4vw,4rem); text-align:left}
.faixa-bentinho{width:auto; height:clamp(150px,30vw,320px); margin:0; flex:none;
  filter:drop-shadow(0 12px 16px rgba(6,66,123,.30))}
.faixa-txt{display:flex; flex-direction:column; align-items:flex-start}
.faixa-titulo h1{font-size:clamp(1.7rem,6.4vw,3.9rem); line-height:1.04; color:#fff; margin:0;
  letter-spacing:.01em;
  text-shadow:
    2.5px 0 0 var(--azul-escuro), -2.5px 0 0 var(--azul-escuro),
    0 2.5px 0 var(--azul-escuro), 0 -2.5px 0 var(--azul-escuro),
    2px 2px 0 var(--azul-escuro), -2px 2px 0 var(--azul-escuro),
    2px -2px 0 var(--azul-escuro), -2px -2px 0 var(--azul-escuro),
    0 6px 0 var(--azul-escuro), 0 10px 20px rgba(6,66,123,.30)}

/* ---------- Barra do rádio ---------- */
/* Rádio ligado usa o azul da marca (o mesmo das letras da logo), não um verde
   de fora da paleta: fica evidente que está ativo sem brigar com o amarelo da TV. */
.modo.ligado{background:var(--azul); color:#fff; box-shadow:0 2px 0 var(--azul-escuro)}
.modo.ligado:hover{background:#0a9df5}

/* Tocando: o ícone continua sendo o do rádio, só que "no ar" — ele respira e
   solta ondas. Diz que está tocando sem virar um play/pausa genérico. */
.modo.tocando svg{animation:respira 1.25s ease-in-out infinite}
@keyframes respira{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.modo.tocando::after, .modo.tocando::before{content:""; position:absolute; inset:-3px;
  border-radius:999px; border:3px solid var(--azul); pointer-events:none;
  animation:ondaAr 1.9s ease-out infinite}
.modo.tocando::before{animation-delay:.95s}
@keyframes ondaAr{0%{transform:scale(1); opacity:.7} 100%{transform:scale(1.42); opacity:0}}

.radio-barra{position:fixed; left:0; right:0; bottom:0; z-index:80; display:flex; align-items:center;
  gap:.7rem; padding:.55rem .7rem calc(.55rem + env(safe-area-inset-bottom));
  background:var(--azul-escuro); color:#fff; border-top:4px solid var(--destaque);
  box-shadow:0 -8px 26px rgba(6,66,123,.32)}
/* Uma nota pulsando diz "tem música tocando" ocupando bem menos que um gráfico,
   e a sobra vira espaço para o botão de volume. */
.nota-toca{flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:var(--destaque); color:var(--azul-escuro)}
.nota-toca svg{width:21px; height:21px; animation:pulsa 1.05s ease-in-out infinite}
@keyframes pulsa{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
.nota-toca.parado svg{animation-play-state:paused; transform:scale(1)}
.nota-toca.parado{opacity:.55}
/* O player fica montado e tocando, só que fora do campo de visão. */
.rb-oculto{position:absolute; left:-9999px; top:0; width:240px; height:135px; overflow:hidden}
.rb-oculto iframe{width:100%; height:100%; border:0}
.rb-txt{flex:1 1 auto; min-width:0}
.rb-tag{display:flex; align-items:center; gap:.45rem; font-size:.66em; letter-spacing:.12em;
  color:var(--destaque); font-weight:800}

/* Título correndo em laço, igual ao visor de um rádio de carro.
   Duas cópias lado a lado e um deslize de -50% fazem a emenda ficar invisível. */
.rb-txt strong{display:block; font-size:1em; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; mask-image:linear-gradient(90deg,#000 88%,transparent)}
.rola{display:inline-block; white-space:nowrap; will-change:transform}
.rola .peca{display:inline-block; padding-right:2.8rem}
.rola.anda{animation:rolar 14s linear infinite}
@keyframes rolar{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.rb-bts{display:flex; gap:.35rem; flex:none}
.ct--peq{width:42px; height:42px; border-width:2px}
.ct--peq svg{width:19px; height:19px}
.rb-off{background:var(--rosa); color:#fff; border-color:#fff}
.rb-off:hover{background:#f76ca1}

/* Volume no rodapé: o botão abre uma bolinha com a barra, para não lotar a barra */
.rb-som{position:relative}
.som-caixa{position:absolute; bottom:calc(100% + 12px); right:0; z-index:2; display:flex;
  align-items:center; gap:.5rem; background:#fff; border:3px solid var(--azul-escuro);
  border-radius:999px; padding:.4rem .7rem .4rem .4rem; box-shadow:0 10px 26px rgba(0,0,0,.35)}
[data-som-vol]{width:126px; accent-color:var(--azul); height:26px; cursor:pointer}
@media(max-width:400px){[data-som-vol]{width:96px}}

/* Na janela do vídeo a barra fica sempre à mostra: cabe, e o pai não precisa
   caçar onde mexer no som. (Popover ali dentro seria cortado pelo overflow da caixa.) */
.som-inline{display:flex; align-items:center; gap:.45rem; background:var(--creme);
  border:3px solid rgba(6,66,123,.18); border-radius:999px; padding:.25rem .75rem .25rem .3rem}
.som-inline .ct{width:38px; height:38px; border-width:2px; box-shadow:none}
.som-inline .ct:active{transform:none}
.som-inline [data-som-vol]{width:92px}
body.com-radio{padding-bottom:104px}
/* Celular: informação em cima, controles numa linha só embaixo — assim cabe
   anterior, embaralhar e volume sem espremer o nome da música. */
@media(max-width:560px){
  .radio-barra{flex-wrap:wrap; gap:.45rem .6rem}
  .nota-toca{order:1}
  .rb-txt{order:2; flex:1 1 auto}
  .rb-bts{order:3; flex:1 0 100%; justify-content:center; gap:.45rem}
  .ct--peq{width:44px; height:44px}
  body.com-radio{padding-bottom:152px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .mascote,.dec{animation:none}
}