/* ═══════════════════════════════════════════════════════════
   APLICATIVO DA INTERATIVA FM · visual
   Laranja da marca dominante, botões grandes, texto curto.
   Pensado para o celular; no computador vira uma coluna no centro.
   Sem sombra com transparência pesada e sem nenhum traço desenhado.
   ═══════════════════════════════════════════════════════════ */
:root{
  --laranja:#FF4200; --laranja-2:#FF6B2C; --laranja-claro:#FFF1EA;
  --tinta:#1B1E52; --tinta-2:#5B6078; --linha:#ECEDF3; --cartao:#F5F6FA;
  --branco:#fff; --verde:#14A44D;
  --cl-noite:#0E1036; --cl-azul:#1B1E52; --cl-marinho:#292B62; --cl-royal:#3D4BC4; --cl-gelo:#EEF0F8;
  --r:20px; --r-g:28px;
  --abas:74px;
  --seguro:env(safe-area-inset-bottom, 0px);
  --topo-seguro:env(safe-area-inset-top, 0px);
  --f:'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; }
body{
  font-family:var(--f); color:var(--tinta); background:#E9EAF2;
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none;
}
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
img{ display:block; max-width:100%; }
a{ color:inherit; }
[hidden]{ display:none !important; }

/* ícones (SVG montado pelo app.js) */
.ic{ width:1em; height:1em; display:block; fill:currentColor; }
i[data-ic]{ display:inline-flex; }

/* ─── a coluna do app ─── */
.ap{
  position:relative; max-width:520px; min-height:100%; margin:0 auto;
  background:var(--branco); overflow-x:hidden;
}
.ap__telas{ padding-bottom:calc(var(--abas) + var(--seguro) + 16px); }
.ap.tem-mini .ap__telas{ padding-bottom:calc(var(--abas) + var(--seguro) + 96px); }
.tela{ min-height:100vh; animation:entra .28s ease-out; }
@keyframes entra{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* cabeçalho das abas */
.cab{
  position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:calc(14px + var(--topo-seguro)) 20px 12px; background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--linha);
}
.cab h1{ margin:0; font-size:1.65rem; font-weight:800; letter-spacing:-.02em; }
.cab__logo{ height:30px; width:auto; }
.cab__bt{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--cartao); font-size:22px;
}
.sub{ margin:4px 20px 0; color:var(--tinta-2); font-size:.98rem; }
.titulo-sec{ margin:26px 20px 12px; font-size:1.2rem; font-weight:800; display:flex; align-items:center; justify-content:space-between; }
.titulo-sec button{ font-size:.95rem; font-weight:600; color:var(--laranja); }

/* ═══ OUVIR ═══ */
.palco{
  position:relative; padding:calc(16px + var(--topo-seguro)) 20px 30px; color:#fff;
  background:linear-gradient(160deg, var(--laranja) 0%, #FF5A14 55%, #E63A00 100%);
  border-radius:0 0 var(--r-g) var(--r-g); overflow:hidden;
}
.ap.is-classic .palco{ background:linear-gradient(160deg, var(--cl-marinho) 0%, var(--cl-azul) 55%, var(--cl-noite) 100%); }
.palco__topo{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.palco__logo{ height:34px; width:auto; }
.palco__vivo{
  display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px;
  background:rgba(255,255,255,.18); font-weight:700; font-size:.85rem; letter-spacing:.06em;
}
.palco__vivo::before{ content:''; width:9px; height:9px; border-radius:50%; background:#fff; animation:pisca 1.4s infinite; }
@keyframes pisca{ 50%{ opacity:.3; } }

/* escolher a rádio: dois botões grandes */
.radios{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:20px; padding:6px; border-radius:999px; background:rgba(0,0,0,.18); }
.radios button{ padding:12px 8px; border-radius:999px; font-weight:700; font-size:1rem; color:rgba(255,255,255,.85); }
.radios button.is-on{ background:#fff; color:var(--laranja); }
.ap.is-classic .radios button.is-on{ color:var(--cl-azul); }

.agora{ display:flex; flex-direction:column; align-items:center; text-align:center; margin-top:22px; }
.agora__capa{
  width:min(64vw, 260px); aspect-ratio:1; border-radius:var(--r-g); object-fit:cover;
  background:rgba(255,255,255,.15); border:4px solid rgba(255,255,255,.25);
}
.agora__capa--larga{ width:100%; aspect-ratio:16/9; }
.agora__rot{ margin-top:18px; font-size:.82rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.85; }
.agora__tit{ margin:6px 0 0; font-size:1.7rem; font-weight:800; line-height:1.15; letter-spacing:-.01em; }
.agora__sub{ margin-top:6px; font-size:1.05rem; opacity:.92; }

.botao-play{
  margin:24px auto 0; width:112px; height:112px; border-radius:50%; display:grid; place-items:center;
  background:#fff; color:var(--laranja); font-size:56px; position:relative;
  transition:transform .15s;
}
.ap.is-classic .botao-play{ color:var(--cl-azul); }
.botao-play:active{ transform:scale(.94); }
.botao-play::after{
  content:''; position:absolute; inset:-10px; border-radius:50%; border:3px solid rgba(255,255,255,.45);
  animation:onda 2s infinite;
}
.ap.is-tocando .botao-play::after{ animation:none; opacity:0; }
@keyframes onda{ 0%{ transform:scale(.9); opacity:1; } 100%{ transform:scale(1.25); opacity:0; } }
.botao-play.is-carregando .ic{ animation:gira 1s linear infinite; }
@keyframes gira{ to{ transform:rotate(360deg); } }
.play-rot{ margin-top:12px; font-weight:700; font-size:1.05rem; }

.barras{ display:flex; gap:4px; height:22px; align-items:flex-end; justify-content:center; margin-top:10px; opacity:0; }
.ap.is-tocando .barras{ opacity:1; }
.barras i{ width:5px; border-radius:3px; background:#fff; animation:barra 1s ease-in-out infinite; }
.barras i:nth-child(2){ animation-delay:.2s } .barras i:nth-child(3){ animation-delay:.4s } .barras i:nth-child(4){ animation-delay:.1s } .barras i:nth-child(5){ animation-delay:.3s }
@keyframes barra{ 0%,100%{ height:5px; } 50%{ height:22px; } }

.timer-chip{
  margin:14px auto 0; display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px;
  background:rgba(255,255,255,.2); font-weight:600; font-size:.92rem;
}

/* ações grandes embaixo do play */
.acoes{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:20px 16px 0; }
.acao{
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 4px; border-radius:var(--r);
  background:var(--cartao); font-weight:600; font-size:.86rem; text-align:center; min-height:96px; justify-content:center;
}
.acao i{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--laranja); color:#fff; font-size:24px; }
.ap.is-classic .acao i{ background:var(--cl-azul); }
.acao:active{ background:var(--laranja-claro); }

/* próximo programa e cartões horizontais */
.prox{
  margin:20px 16px 0; display:flex; gap:14px; align-items:center; padding:12px; border-radius:var(--r);
  background:var(--cartao); text-align:left; width:calc(100% - 32px);
}
.prox img{ width:96px; aspect-ratio:16/9; object-fit:cover; border-radius:12px; flex:0 0 auto; }
.prox small{ display:block; font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--laranja); }
.prox b{ display:block; font-size:1.05rem; margin-top:2px; }
.prox span{ display:block; font-size:.88rem; color:var(--tinta-2); }

.trilho{ display:flex; gap:12px; overflow-x:auto; padding:0 16px 6px; scroll-snap-type:x mandatory; scrollbar-width:none; }
.trilho::-webkit-scrollbar{ display:none; }
.trilho > *{ scroll-snap-align:start; flex:0 0 78%; }

/* ═══ NOTÍCIAS ═══ */
.inw-logo{ height:30px; width:auto; }
.chips{ display:flex; gap:8px; overflow-x:auto; padding:14px 16px 4px; scrollbar-width:none; }
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px;
  background:var(--cartao); font-weight:600; font-size:.95rem; white-space:nowrap;
}
.chip i{ width:10px; height:10px; border-radius:3px; background:var(--cor, var(--laranja)); }
.chip.is-on{ background:var(--tinta); color:#fff; }

.lista-not{ display:flex; flex-direction:column; gap:14px; padding:14px 16px 0; }
.not{
  display:block; width:100%; text-align:left; border-radius:var(--r); overflow:hidden; background:var(--branco);
  border:1px solid var(--linha);
}
.not__foto{ width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--cartao); }
.not__txt{ padding:14px 16px 16px; }
.not__ed{ display:inline-flex; align-items:center; gap:7px; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-2); }
.not__ed i{ width:10px; height:10px; border-radius:3px; background:var(--cor); }
.not h3{ margin:6px 0 0; font-size:1.15rem; line-height:1.3; font-weight:700; }
.not time{ display:block; margin-top:8px; font-size:.85rem; color:var(--tinta-2); }
.not--peq{ display:flex; gap:12px; align-items:center; padding:10px; }
.not--peq .not__foto{ width:104px; flex:0 0 auto; border-radius:12px; aspect-ratio:4/3; }
.not--peq .not__txt{ padding:0; }
.not--peq h3{ font-size:1rem; }
.trilho .not{ flex-basis:78%; }

/* leitor da matéria */
.leitor__foto{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--r); }
.leitor__credito{ margin-top:6px; font-size:.78rem; color:var(--tinta-2); text-align:right; }
.leitor h2{ margin:12px 0 0; font-size:1.55rem; line-height:1.2; font-weight:800; letter-spacing:-.01em; }
.leitor__resumo{ margin:10px 0 0; font-size:1.08rem; color:var(--tinta-2); line-height:1.5; }
.leitor__meta{ margin-top:12px; font-size:.88rem; color:var(--tinta-2); }
.leitor__corpo p{ font-size:1.1rem; line-height:1.7; margin:16px 0 0; }
.leitor__aviso{ margin-top:16px; padding:12px 14px; border-radius:14px; background:var(--laranja-claro); font-size:.92rem; }
.leitor__acoes{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:22px; }

/* ═══ PROGRAMAÇÃO ═══ */
.dias{ display:flex; gap:8px; overflow-x:auto; padding:14px 16px 4px; scrollbar-width:none; }
.dias::-webkit-scrollbar{ display:none; }
.dias button{ flex:0 0 auto; padding:10px 16px; border-radius:999px; background:var(--cartao); font-weight:600; }
.dias button.is-on{ background:var(--laranja); color:#fff; }
.grade{ display:flex; flex-direction:column; gap:10px; padding:14px 16px 0; }
.prog{
  display:flex; gap:12px; align-items:center; width:100%; text-align:left; padding:10px; border-radius:var(--r);
  background:var(--cartao); border:2px solid transparent;
}
.prog img{ width:92px; aspect-ratio:16/9; object-fit:cover; border-radius:12px; flex:0 0 auto; }
.prog__hora{ font-size:.85rem; font-weight:700; color:var(--laranja); }
.prog b{ display:block; font-size:1.02rem; margin-top:2px; }
.prog span{ display:block; font-size:.86rem; color:var(--tinta-2); }
.prog.is-agora{ border-color:var(--laranja); background:var(--laranja-claro); }
.selo{
  display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px; background:var(--laranja); color:#fff;
  font-size:.7rem; font-weight:700; letter-spacing:.08em; vertical-align:middle;
}
.prog .selo{ display:inline-block; width:auto; }
.prog.is-passou{ opacity:.55; }

/* ═══ CLASSIC ═══ */
.tela--classic{ background:var(--cl-noite); color:#fff; }
.tela--classic .cab{ background:rgba(14,16,54,.96); border-color:rgba(255,255,255,.08); }
.cl-palco{ padding:20px; text-align:center; }
.cl-capa{ width:min(72vw, 300px); aspect-ratio:1; margin:6px auto 0; border-radius:var(--r-g); object-fit:cover; background:var(--cl-marinho); }
.cl-tit{ margin:18px 0 0; font-size:1.6rem; font-weight:800; line-height:1.15; }
.cl-art{ margin-top:6px; font-size:1.05rem; color:var(--cl-gelo); opacity:.85; }
.cl-bloco{ display:inline-block; margin-top:12px; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.1); font-size:.88rem; }
.cl-play{
  margin:22px auto 0; display:flex; align-items:center; justify-content:center; gap:10px; width:100%; max-width:320px;
  padding:18px; border-radius:999px; background:#fff; color:var(--cl-azul); font-weight:800; font-size:1.15rem;
}
.cl-play i{ font-size:28px; }
.cl-hist{ display:flex; flex-direction:column; gap:10px; padding:4px 16px 0; }
.cl-item{ display:flex; gap:12px; align-items:center; padding:10px; border-radius:16px; background:rgba(255,255,255,.06); }
.cl-item img{ width:56px; height:56px; border-radius:10px; object-fit:cover; flex:0 0 auto; background:var(--cl-marinho); }
.cl-item b{ display:block; font-size:1rem; }
.cl-item span{ display:block; font-size:.86rem; opacity:.75; }
.cl-item time{ margin-left:auto; font-size:.82rem; opacity:.6; }
.tela--classic .titulo-sec{ color:#fff; }

/* ═══ MAIS ═══ */
.blocos{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:16px; }
.bloco{
  display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:18px 16px; border-radius:var(--r);
  background:var(--cartao); text-align:left; min-height:128px; text-decoration:none;
}
.bloco i{ width:50px; height:50px; border-radius:16px; display:grid; place-items:center; background:var(--laranja); color:#fff; font-size:26px; }
.bloco b{ font-size:1.05rem; }
.bloco span{ font-size:.85rem; color:var(--tinta-2); margin-top:-6px; }
.bloco--verde i{ background:#25D366; }
.bloco--azul i{ background:var(--tinta); }
.instalar{
  margin:4px 16px 0; padding:18px; border-radius:var(--r); background:var(--laranja); color:#fff;
  display:flex; gap:14px; align-items:center;
}
.instalar i{ font-size:32px; }
.instalar b{ display:block; font-size:1.05rem; }
.instalar span{ font-size:.9rem; opacity:.92; }
.sobre{ margin:24px 20px 0; font-size:.85rem; color:var(--tinta-2); text-align:center; }

.linha-item{ display:flex; gap:12px; align-items:center; width:100%; text-align:left; padding:10px; border-radius:16px; background:var(--cartao); }
.linha-item img{ width:64px; height:64px; border-radius:12px; object-fit:cover; flex:0 0 auto; }
.linha-item b{ display:block; }
.linha-item span{ display:block; font-size:.88rem; color:var(--tinta-2); }
.linha-item .pos{ width:32px; font-size:1.4rem; font-weight:800; color:var(--laranja); text-align:center; flex:0 0 auto; }
.pilha{ display:flex; flex-direction:column; gap:10px; }

/* ═══ PLAYER PEQUENO ═══ */
.mini{
  position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--abas) + var(--seguro) + 8px);
  width:calc(min(520px, 100%) - 20px); z-index:20; display:flex; align-items:center; gap:10px; padding:8px 8px 8px 8px;
  border-radius:20px; background:var(--tinta); color:#fff;
}
.ap.is-classic .mini{ background:var(--cl-marinho); }
.mini__abrir{ flex:1; min-width:0; display:flex; align-items:center; gap:10px; text-align:left; }
.mini__capa{ width:48px; height:48px; border-radius:12px; object-fit:cover; background:rgba(255,255,255,.1); flex:0 0 auto; }
.mini__txt{ min-width:0; }
.mini__tit{ display:block; font-size:.98rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini__sub{ display:block; font-size:.82rem; opacity:.75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini__play{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:var(--laranja); color:#fff; font-size:28px; flex:0 0 auto; }

/* ═══ ABAS ═══ */
.abas{
  position:fixed; left:50%; transform:translateX(-50%); bottom:0; z-index:30; width:min(520px, 100%);
  display:grid; grid-template-columns:repeat(5,1fr); padding:6px 4px calc(6px + var(--seguro));
  background:#fff; border-top:1px solid var(--linha);
}
.aba{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 2px; border-radius:16px; font-size:.78rem; font-weight:600; color:var(--tinta-2); min-height:58px; justify-content:center; }
.aba i{ font-size:26px; width:56px; height:32px; border-radius:999px; display:grid; place-items:center; transition:background .2s; }
.aba.is-on{ color:var(--laranja); }
.aba.is-on i{ background:var(--laranja-claro); }
.aba[data-ir="classic"].is-on{ color:var(--cl-azul); }
.aba[data-ir="classic"].is-on i{ background:var(--cl-gelo); }

/* ═══ FOLHA (por cima) ═══ */
.folha{ position:fixed; inset:0; z-index:50; display:flex; align-items:flex-end; justify-content:center; }
.folha__fundo{ position:absolute; inset:0; background:rgba(14,16,54,.55); animation:aparece .2s; }
@keyframes aparece{ from{ opacity:0; } }
.folha__caixa{
  position:relative; width:min(520px, 100%); max-height:92vh; overflow-y:auto; background:#fff; color:var(--tinta);
  border-radius:var(--r-g) var(--r-g) 0 0; padding:22px 20px calc(24px + var(--seguro)); animation:sobe .28s ease-out;
}
.folha--cheia .folha__caixa{ max-height:100vh; height:100vh; border-radius:0; padding-top:calc(64px + var(--topo-seguro)); }
@keyframes sobe{ from{ transform:translateY(40px); opacity:0; } }
.folha__x{
  position:absolute; top:calc(12px + var(--topo-seguro)); right:12px; z-index:2; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; background:var(--cartao); font-size:22px;
}
.folha:not(.folha--cheia) .folha__x{ top:12px; }
.folha h2{ margin:0 48px 0 0; font-size:1.35rem; font-weight:800; line-height:1.2; }
.folha p{ line-height:1.55; }
.opcoes{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:16px; }
.opcoes--3{ grid-template-columns:repeat(3,1fr); }
.opcao{ padding:16px 8px; border-radius:16px; background:var(--cartao); font-weight:700; font-size:1.05rem; }
.opcao.is-on{ background:var(--laranja); color:#fff; }
.bt{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:16px; border-radius:999px;
  background:var(--laranja); color:#fff; font-weight:700; font-size:1.05rem; text-decoration:none; margin-top:14px;
}
.bt i{ font-size:22px; }
.bt--claro{ background:var(--cartao); color:var(--tinta); }
.video{ width:100%; aspect-ratio:16/9; background:#000; border-radius:16px; margin-top:14px; }
.video--retrato{ aspect-ratio:9/16; max-height:60vh; width:auto; margin-left:auto; margin-right:auto; display:block; }
.carregando{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:30px 0; text-align:center; color:var(--tinta-2); }
.carregando::before{ content:''; width:44px; height:44px; border-radius:50%; border:4px solid var(--linha); border-top-color:var(--laranja); animation:gira .9s linear infinite; }
.prog-folha__arte{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:16px; margin-top:14px; }
.pessoa{ display:flex; gap:12px; align-items:center; margin-top:14px; }
.pessoa img{ width:56px; height:56px; border-radius:50%; object-fit:cover; }
.pessoa b{ display:block; } .pessoa span{ font-size:.88rem; color:var(--tinta-2); }

/* avisos curtos no rodapé */
.aviso{
  position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--abas) + var(--seguro) + 16px); z-index:60;
  max-width:calc(min(520px, 100%) - 32px); padding:12px 18px; border-radius:16px; background:var(--tinta); color:#fff;
  font-weight:600; text-align:center; animation:sobe .2s;
}
.ap.tem-mini .aviso{ bottom:calc(var(--abas) + var(--seguro) + 90px); }

.vazio{ padding:30px 20px; text-align:center; color:var(--tinta-2); }

/* computador: a coluna fica no centro, com o fundo neutro dos lados */
@media (min-width:560px){
  .ap{ box-shadow:0 0 0 1px var(--linha); }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ═══ RÁDIO 3.0 no app ═══ */
.r30-pede{ text-align:center; padding-top:6px; }
.r30-pede__ic{ width:76px; height:76px; margin:0 auto; border-radius:50%; display:grid; place-items:center; background:var(--laranja-claro); color:var(--laranja); font-size:40px; }
.r30-pede h2{ margin:16px 0 0; }
.r30-pede p{ color:var(--tinta-2); font-size:1.02rem; }
.r30-pede__miudo{ font-size:.9rem !important; }
.r30-pede__como{ background:var(--laranja-claro); border-radius:14px; padding:12px 14px; color:var(--tinta) !important; text-align:left; }
.r30-cartao{
  position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--abas) + var(--seguro) + 10px); z-index:40;
  width:calc(min(520px, 100%) - 20px); display:flex; gap:12px; align-items:center; padding:10px; border-radius:20px;
  background:#fff; color:var(--tinta); border:2px solid var(--laranja); text-decoration:none; overflow:hidden; animation:sobe .3s;
}
.ap.tem-mini .r30-cartao{ bottom:calc(var(--abas) + var(--seguro) + 86px); }
.r30-cartao img{ width:64px; height:64px; border-radius:14px; object-fit:cover; flex:0 0 auto; }
.r30-cartao__txt{ min-width:0; display:flex; flex-direction:column; }
.r30-cartao em{ font-style:normal; font-size:.78rem; font-weight:700; color:var(--laranja); letter-spacing:.04em; }
.r30-cartao b{ font-size:1.05rem; }
.r30-cartao__txt > span:last-child{ font-size:.88rem; color:var(--tinta-2); }
.r30-cartao__barra{ position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--laranja-claro); }
.r30-cartao__barra i{ display:block; height:100%; background:var(--laranja); transform-origin:left; transform:scaleX(0); }

/* ═══ Promoções, Onde pega e grade da Classic (29/10) ═══ */
.promo-topo{ text-align:center; padding:4px 0 6px; }
.promo-topo .ic{ width:60px; height:60px; margin:0 auto; padding:14px; border-radius:50%; background:var(--laranja); color:#fff; box-sizing:border-box; }
.promo-topo h2{ margin:14px 0 0 !important; }
.promo-topo p{ color:var(--tinta-2); }
.promo{ border-radius:var(--r); overflow:hidden; background:var(--cartao); }
.promo img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.promo__txt{ padding:14px 16px; }
.promo__txt small{ font-weight:700; color:var(--laranja); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; }
.promo__txt b{ display:block; font-size:1.15rem; margin-top:4px; }
.promo__txt p{ margin:6px 0 0; color:var(--tinta-2); }
.promo__como{ color:var(--tinta) !important; font-weight:600; }
.promo-vazio{ text-align:center; padding:22px 16px; border-radius:var(--r); background:var(--laranja-claro); }
.promo-vazio b{ font-size:1.1rem; }
.promo-vazio p{ margin:6px 0 0; color:var(--tinta-2); }
.passos-tit{ margin:22px 0 10px; font-size:1.1rem; }
.passos{ list-style:none; margin:0; padding:0; counter-reset:p; display:flex; flex-direction:column; gap:10px; }
.passos li{ counter-increment:p; position:relative; padding:12px 14px 12px 60px; border-radius:16px; background:var(--cartao); }
.passos li::before{ content:counter(p); position:absolute; left:14px; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:50%; background:var(--laranja); color:#fff; font-weight:800; display:grid; place-items:center; }
.passos b{ display:block; } .passos span{ font-size:.92rem; color:var(--tinta-2); }
.bt--verde{ background:#25D366; }
.bt--cl{ background:var(--cl-azul); }
.cidade{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:center; padding:12px 14px; border-radius:14px; background:var(--cartao); font-size:.95rem; }
.cidade i{ font-style:normal; font-size:.7rem; font-weight:700; margin-left:6px; padding:1px 7px; border-radius:999px; background:var(--laranja-claro); color:var(--laranja); }
.cidade span:nth-child(2){ color:var(--tinta-2); font-size:.85rem; }
.cidade em{ font-style:normal; font-weight:700; color:var(--laranja); font-size:.85rem; min-width:56px; text-align:right; }
.radios--claro{ margin:14px 16px 0; background:var(--cartao); }
.radios--claro button{ color:var(--tinta-2); }
.radios--claro button.is-on{ background:var(--laranja); color:#fff; }
.radios--claro button.is-on.is-cl{ background:var(--cl-azul); }
.prog--cl{ align-items:flex-start; }
.prog--cl.is-agora{ border-color:var(--cl-azul); background:var(--cl-gelo); }
.prog--cl .prog__hora{ color:var(--cl-royal); }
.prog--cl .selo{ background:var(--cl-azul); }
.prog__ic{ width:56px; height:56px; flex:0 0 auto; border-radius:16px; display:grid; place-items:center; background:var(--cl-azul); color:#fff; font-size:28px; }
.prog__tocando{ display:flex !important; align-items:center; gap:6px; margin-top:6px; font-weight:600; color:var(--cl-azul) !important; }
.prog__tocando .ic{ flex:0 0 auto; }
/* contraste: o selo e o botão escolhido ficam sempre com texto branco */
.prog .selo{ color:#fff !important; }
.ap .radios--claro button.is-on{ color:#fff !important; }

/* ═══ Toque na capa: afunda, volta com mola e um brilho passa ═══ */
.capa-toque{ position:relative; display:block; width:fit-content; max-width:100%; margin:0 auto; border-radius:var(--r-g); overflow:hidden; }
.capa-toque img{ display:block; }
.capa-toque::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(105deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 70%);
  transform:translateX(-120%);
}
.capa-toque.is-pop{ animation:pop .65s cubic-bezier(.3,1.6,.5,1); }
.capa-toque.is-pop::after{ animation:brilho .75s ease-out; }
@keyframes pop{ 0%{ transform:scale(1); } 25%{ transform:scale(.93) rotate(-1deg); } 60%{ transform:scale(1.035) rotate(.5deg); } 100%{ transform:scale(1) rotate(0); } }
@keyframes brilho{ from{ transform:translateX(-120%); } to{ transform:translateX(120%); } }
.agora .capa-toque--larga{ width:100%; }
/* capa quadrada da Classic: o botão (e o brilho) têm o tamanho da capa, não da tela */
.capa-toque:not(.capa-toque--larga) img{ border:0 !important; }
.agora .capa-toque .agora__capa:not(.agora__capa--larga){ margin:0 auto; }

/* ═══ Promoções ao vivo, formulário e número da sorte ═══ */
.promo img{ aspect-ratio:auto; height:auto; }
.promo .bt{ margin-top:14px; }
.regras{ margin-top:12px; }
.regras summary{ cursor:pointer; font-weight:600; color:var(--laranja); }
.regras p{ font-size:.92rem; color:var(--tinta-2); margin:8px 0 0; }
.form-sub{ color:var(--tinta-2); margin:6px 0 4px; }
.form-promo{ display:flex; flex-direction:column; gap:12px; margin-top:10px; }
.campo{ display:flex; flex-direction:column; gap:6px; font-weight:600; font-size:.92rem; min-width:0; }
.campo input{
  font:inherit; font-size:1.08rem; font-weight:500; padding:14px 16px; border-radius:14px;
  border:2px solid var(--linha); background:#fff; color:var(--tinta); width:100%;
}
.campo input:focus{ outline:none; border-color:var(--laranja); }
.campo input.is-erro{ border-color:#D92D20; background:#FFF5F4; }
.form-promo__dupla{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.form-promo__mel{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.form-promo__aceite{ display:flex; gap:10px; align-items:flex-start; font-size:.92rem; color:var(--tinta-2); }
.form-promo__aceite input{ width:22px; height:22px; flex:0 0 auto; accent-color:var(--laranja); margin-top:1px; }
.form-promo__erro{ margin:0; padding:10px 14px; border-radius:12px; background:#FFF5F4; color:#B42318; font-weight:600; }
.form-promo__lgpd{ margin:0; font-size:.82rem; color:var(--tinta-2); text-align:center; }
.form-promo .bt{ margin-top:4px; }
.feito{ text-align:center; padding-top:10px; }
.feito__ic{ width:80px; height:80px; margin:0 auto; border-radius:50%; display:grid; place-items:center; background:var(--laranja); color:#fff; font-size:40px; animation:pop .7s cubic-bezier(.3,1.6,.5,1); }
.feito h2{ margin:16px 0 0 !important; }
.feito p{ color:var(--tinta-2); }
.voucher{
  position:relative; margin:18px auto 0; max-width:320px; padding:20px 16px; border-radius:20px;
  background:var(--laranja); color:#fff; display:flex; flex-direction:column; gap:4px; text-align:center;
}
.voucher::before, .voucher::after{ content:''; position:absolute; top:50%; width:22px; height:22px; margin-top:-11px; border-radius:50%; background:#fff; }
.voucher::before{ left:-11px; } .voucher::after{ right:-11px; }
.voucher small{ font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.75rem; opacity:.9; }
.voucher b{ font-size:2.4rem; letter-spacing:.18em; line-height:1.1; }
.voucher span{ font-size:.85rem; opacity:.9; }
.voucher--mini{ margin:14px 0 0; max-width:none; padding:14px; }
.voucher--mini b{ font-size:1.7rem; }
.feito__dica{ font-size:.92rem; margin-top:16px; }
.chamada-promo{
  margin:20px 16px 0; width:calc(100% - 32px); display:flex; gap:14px; align-items:center; text-align:left; padding:10px;
  border-radius:var(--r); background:var(--laranja-claro); border:2px solid var(--laranja);
}
.chamada-promo img{ width:72px; height:90px; object-fit:cover; border-radius:12px; flex:0 0 auto; }
.chamada-promo small{ display:block; font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--laranja); }
.chamada-promo b{ display:block; font-size:1.08rem; margin-top:2px; }
.chamada-promo span span{ display:block; font-size:.9rem; color:var(--tinta-2); }

/* ═══ Últimas tocadas (aba Ouvir) ═══ */
.tocadas__lista{ padding:0 16px; }
.tocadas__lista .linha-item img{ width:56px; height:56px; }
.tocadas__lista time{ margin-left:auto; font-size:.85rem; color:var(--tinta-2); flex:0 0 auto; }
.tocadas__lista .linha-item > span:not(.pos){ min-width:0; }
.tocadas__lista b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ═══ Classic dentro do Ouvir e a aba Promoções ═══ */
.agora__bloco{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; padding:6px 14px; border-radius:999px; background:rgba(255,255,255,.14); font-size:.88rem; font-weight:600; }
.promos-tela{ padding:16px 16px 0; }
.promos-tela .promo-topo h2{ font-size:1.35rem; }
.aba{ position:relative; }
.aba.tem-novidade i::after{
  content:''; position:absolute; top:6px; left:calc(50% + 10px); width:10px; height:10px; border-radius:50%;
  background:var(--laranja); border:2px solid #fff;
}

/* ═══ Confetes, você ganhou, cadastro e avisos ═══ */
.confete{ position:fixed; inset:0; width:100vw; height:100vh; z-index:90; pointer-events:none; }
.sou-eu{ display:flex; gap:12px; align-items:center; padding:14px; border-radius:16px; background:var(--cartao); margin:12px 0; }
.sou-eu > .ic{ width:44px; height:44px; padding:10px; border-radius:50%; background:var(--laranja); color:#fff; box-sizing:border-box; flex:0 0 auto; }
.sou-eu b{ display:block; } .sou-eu span span{ display:block; font-size:.9rem; color:var(--tinta-2); }
.bt--avisos{ background:var(--tinta); }
.linha-item .pos .ic{ width:28px; height:28px; margin:0 auto; color:var(--laranja); }
.ganhou{ text-align:center; padding-top:6px; }
.ganhou__trofeu{
  width:96px; height:96px; margin:0 auto; border-radius:50%; display:grid; place-items:center; font-size:50px; color:#fff;
  background:radial-gradient(circle at 35% 30%, #FFD84D, #FF9F00 60%, #E36A00);
  animation:trofeu 1.2s cubic-bezier(.3,1.6,.5,1), brilha 2.4s ease-in-out .9s infinite;
}
@keyframes trofeu{ 0%{ transform:scale(.2) rotate(-30deg); opacity:0; } 60%{ transform:scale(1.15) rotate(8deg); opacity:1; } 100%{ transform:scale(1) rotate(0); } }
@keyframes brilha{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
.ganhou small{ display:block; margin-top:14px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--laranja); }
.ganhou h2{ margin:4px 0 0 !important; font-size:2.3rem !important; letter-spacing:-.02em; animation:pop .8s cubic-bezier(.3,1.6,.5,1) .2s both; }
.ganhou__premio{ font-size:1.2rem; font-weight:700; color:var(--tinta) !important; margin:10px 0 0; }
.ganhou__de{ margin:4px 0 0; color:var(--tinta-2); }
.voucher--ouro{ background:linear-gradient(135deg, #FF9F00, #FF4200); }
.ganhou__instr{ margin:20px 0 4px; padding:16px; border-radius:16px; background:var(--laranja-claro); text-align:left; }
.ganhou__instr b{ display:block; margin-bottom:6px; }
.ganhou__instr p{ margin:4px 0 0; color:var(--tinta) !important; }

/* ═══ Meu perfil ═══ */
.perfil-topo{
  margin:16px 16px 0; width:calc(100% - 32px); display:flex; align-items:center; gap:14px; padding:14px; text-align:left;
  border-radius:var(--r); background:var(--laranja-claro);
}
.perfil-topo > span:not(.avatar-ini){ flex:1; min-width:0; }
.perfil-topo > .perfil-topo__foto{ flex:0 0 58px; }
.perfil-topo b{ display:block; font-size:1.15rem; }
.perfil-topo > span span{ display:block; font-size:.9rem; color:var(--tinta-2); }
.perfil-topo > .ic{ transform:rotate(180deg); color:var(--laranja); font-size:22px; flex:0 0 auto; }
.perfil-topo__foto{ width:58px; height:58px; border-radius:50%; object-fit:cover; flex:0 0 auto; border:3px solid #fff; }
.avatar-ini{ display:grid; place-items:center; background:var(--laranja); color:#fff; font-weight:800; font-size:1.2rem; letter-spacing:.02em; }
.avatar-ini .ic{ width:55%; height:55%; }
.perfil{ text-align:center; }
.perfil__foto{ position:relative; display:inline-block; cursor:pointer; }
.perfil__img{ width:116px; height:116px; border-radius:50%; object-fit:cover; border:4px solid #fff; box-shadow:0 0 0 3px var(--laranja); font-size:2.2rem; }
.perfil__trocar{ position:absolute; right:0; bottom:2px; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--tinta); color:#fff; font-size:20px; border:3px solid #fff; }
.perfil h2{ margin:12px 0 0 !important; margin-right:0 !important; }
.perfil p{ margin:4px 0 0; color:var(--tinta-2); }
.perfil__dica{ font-size:.85rem; }

.pilha--nost .linha-item img{ border-radius:50%; }
.titulo-sec--nost{ margin-top:26px; }
.tocadas__sub{ margin:-6px 20px 12px; font-size:.86rem; color:var(--fraco, #6E7192); }
.pilha--nost .linha-item .pos{ color:var(--laranja, #FF4200); }