/* ==========================================================================
   Site da rádio, tema "Portal" (versão 7)
   As cores vêm do painel (Aparência) pelas variáveis --c-*. Todos os outros
   tons são calculados a partir delas, então qualquer combinação funciona.
   ========================================================================== */

:root {
  --c-primaria: #3D7BFF;
  --c-secundaria: #00C2FF;
  --c-base: #1A1D2E;
  --c-texto: #FFFFFF;
  --c-botao-texto: #FFFFFF;
  --c-rodape: #131522;

  --fundo: var(--c-base);
  --sup: color-mix(in oklab, var(--c-base) 93%, var(--c-texto));
  --sup-2: color-mix(in oklab, var(--c-base) 86%, var(--c-texto));
  --sup-3: color-mix(in oklab, var(--c-base) 78%, var(--c-texto));
  --linha: color-mix(in oklab, var(--c-texto) 12%, transparent);
  --linha-forte: color-mix(in oklab, var(--c-texto) 24%, transparent);
  --txt: var(--c-texto);
  --txt-2: color-mix(in oklab, var(--c-texto) 72%, var(--c-base));
  --txt-3: color-mix(in oklab, var(--c-texto) 52%, var(--c-base));
  --acento: var(--c-primaria);
  --acento-txt: var(--c-botao-texto);
  --acento-suave: color-mix(in oklab, var(--c-primaria) 16%, transparent);
  --brilho: var(--c-secundaria);
  --lampada: #ff4438;
  --papel: color-mix(in oklab, var(--c-secundaria) 10%, #f2ede2);
  --papel-linha: color-mix(in oklab, var(--c-secundaria) 30%, #d9d0bf);
  --tinta: #24202b;
  --ok: #3ccf8e;
  --erro: #ff6b6b;

  --f-disp: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-txt: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sombra: 0 14px 34px -18px rgb(0 0 0 / .65);
  --whats: #25D366;

  --r-1: 6px;
  --r-2: 12px;
  --r-3: 16px;
  --larg: 1240px;
  --gut: clamp(16px, 4vw, 40px);
  --topo-h: 80px;
  --player-h: 78px;
  --portal-h: 86px;
  --sobe: 0px;
}

/* -------------------------------------------------------------------------- */
/* Base                                                                        */
/* -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topo-h) + var(--sobe) + 16px); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--fundo);
  color: var(--txt);
  font: 400 .95rem/1.6 var(--f-txt);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background-image: var(--fundo-img, none);
  background-size: cover; background-position: center;
  opacity: .14;
  pointer-events: none;
}
img, video, iframe, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-disp); font-weight: 700; line-height: 1.15; letter-spacing: -.005em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--acento); color: var(--acento-txt); }

.sr, .oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: fixed; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: var(--r-1); background: var(--acento); color: var(--acento-txt); font-weight: 700; }
.pular:focus { top: 12px; }

body.tem-player { padding-bottom: var(--player-h); }
body.player-topo { padding-bottom: 0; --sobe: var(--player-h); }
body.modelo-capsula { padding-bottom: calc(var(--player-h) + 24px); }
body.modelo-capsula.player-topo { padding-bottom: 0; --sobe: 0px; }
body.tem-player-externo { padding-bottom: 96px; }

/* -------------------------------------------------------------------------- */
/* Peças comuns                                                                */
/* -------------------------------------------------------------------------- */
.lampada {
  display: inline-block; flex: none;
  width: 9px; height: 9px; border-radius: 50%;
  background: color-mix(in oklab, var(--lampada) 45%, var(--c-base));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--lampada) 60%, transparent);
}
.tocando .lampada, .selo-vivo .lampada, .prog__selo .lampada {
  background: var(--lampada);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--lampada) 22%, transparent), 0 0 14px var(--lampada);
}
.tocando .lampada { animation: lampada 2.4s ease-in-out infinite; }
@keyframes lampada { 50% { box-shadow: 0 0 0 5px color-mix(in oklab, var(--lampada) 10%, transparent), 0 0 6px var(--lampada); } }

.selo-vivo {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 5px 12px 5px 10px; border-radius: 99px;
  background: color-mix(in oklab, var(--lampada) 14%, transparent);
  color: color-mix(in oklab, var(--lampada) 35%, var(--txt));
  font-size: .82rem; font-weight: 700;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px; padding: 0 22px; border-radius: 99px;
  background: var(--acento); color: var(--acento-txt);
  font-weight: 700; font-size: .95rem; line-height: 1;
  border: 1.5px solid transparent;
  transition: transform .15s, background-color .2s, border-color .2s;
}
.btn:hover { background: color-mix(in oklab, var(--acento) 86%, #fff); }
.btn:active { transform: scale(.97); }
.btn .ti { font-size: 1.15rem; }
.btn--contorno { background: transparent; color: var(--txt); border-color: var(--linha-forte); }
.btn--contorno:hover { background: var(--sup-2); border-color: var(--txt-3); }
.btn--claro { background: var(--c-base); color: var(--txt); }
.btn--claro:hover { background: color-mix(in oklab, var(--c-base) 85%, #000); }
.btn--pequeno { min-height: 38px; padding: 0 16px; font-size: .88rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.icone-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  color: var(--txt-2); font-size: 1.25rem;
  transition: background-color .2s, color .2s;
}
.icone-btn:hover { background: var(--sup-2); color: var(--txt); }
.icone-btn--cheio { background: var(--acento); color: var(--acento-txt); }
.icone-btn--cheio:hover { background: color-mix(in oklab, var(--acento) 86%, #fff); color: var(--acento-txt); }

.tag {
  display: inline-block; align-self: flex-start;
  padding: 3px 10px; border-radius: 99px;
  background: var(--sup-3); color: var(--txt-2);
  font-size: .76rem; font-weight: 600; line-height: 1.5;
}
.tag--ok { background: color-mix(in oklab, var(--ok) 18%, transparent); color: color-mix(in oklab, var(--ok) 55%, var(--txt)); }

.vazio { color: var(--txt-3); padding: 18px 0; }
.nota { margin-top: 24px; color: var(--txt-3); font-size: .88rem; }

.spinner {
  display: none; width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid currentColor; border-right-color: transparent;
  animation: gira .8s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
.carregando [data-play] .spinner { display: block; }
.carregando [data-play] .ic-play, .carregando [data-play] .ic-pause { display: none; }
.ic-pause, .t-pause { display: none; }
.tocando .ic-pause, .tocando .t-pause { display: inline; }
.tocando .ic-play, .tocando .t-play { display: none; }

.redes { display: flex; gap: 6px; flex-wrap: wrap; }
.redes a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sup-2); color: var(--txt-2); font-size: 1.2rem; transition: background-color .2s, color .2s; }
.redes a:hover { background: var(--acento); color: var(--acento-txt); }
.redes--mini a { width: 34px; height: 34px; font-size: 1.05rem; }

/* -------------------------------------------------------------------------- */
/* Topo                                                                        */
/* -------------------------------------------------------------------------- */
.topo { position: relative; z-index: 45; background: color-mix(in oklab, var(--c-base) 80%, #000); border-bottom: 1px solid var(--linha); }
.topo__inner {
  max-width: calc(var(--larg) + 2 * var(--gut));
  margin: 0 auto; padding: 0 var(--gut);
  height: var(--topo-h);
  display: flex; align-items: center; gap: 28px;
}
.marca { display: flex; align-items: center; gap: 12px; flex: none; min-width: 0; }
.marca img { height: 58px; width: auto; max-width: 210px; object-fit: contain; }
.marca--com-nome img { height: 50px; }
.marca__nome { font-weight: 700; font-size: 1rem; line-height: 1.15; max-width: 15ch; }

.nav { flex: 1; display: flex; align-items: center; justify-content: flex-end; min-width: 0; }
.nav__lista { display: flex; align-items: center; gap: 4px; }
.nav__lista > li > a, .nav__abre {
  position: relative;
  display: flex; align-items: center; gap: 4px;
  padding: 10px 12px;
  color: var(--txt-2); font-weight: 600; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  transition: color .2s;
}
.nav__lista > li > a:hover, .nav__abre:hover, .nav__grupo.aberto .nav__abre, .nav__lista > li > a.ativo { color: var(--txt); }
.nav__lista > li > a::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 0; height: 3px; border-radius: 3px; background: var(--acento); transition: width .25s, left .25s; }
.nav__lista > li > a:hover::after, .nav__lista > li > a.ativo::after { left: 12px; width: calc(100% - 24px); }
.nav__abre .ti { font-size: .95rem; transition: transform .2s; }
.nav__grupo { position: relative; }
.nav__grupo.aberto .nav__abre .ti { transform: rotate(180deg); }
.nav__sub {
  position: absolute; top: calc(100% + 12px); right: 0;
  min-width: 220px; padding: 8px;
  background: var(--sup); border: 1px solid var(--linha); border-radius: var(--r-2);
  box-shadow: var(--sombra);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.nav__grupo.aberto .nav__sub { opacity: 1; visibility: visible; transform: none; }
.nav__sub a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-1); color: var(--txt-2); font-weight: 500; font-size: .88rem; }
.nav__sub a:hover, .nav__sub a.ativo { background: var(--sup-2); color: var(--txt); }
.nav__sub .ti { font-size: 1.1rem; color: var(--acento); }

.topo__acoes { display: flex; align-items: center; gap: 8px; flex: none; }
.topo__redes { display: flex; gap: 6px; padding-left: 14px; border-left: 1px solid var(--linha); }
.topo__redes a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sup-2); color: var(--txt-2); font-size: 1.05rem; transition: background-color .2s, color .2s; }
.topo__redes a:hover { background: var(--acento); color: var(--acento-txt); }
.ouvir {
  display: inline-flex; align-items: center; gap: 10px;
  height: 42px; padding: 0 18px 0 15px; border-radius: 99px;
  background: var(--acento); color: var(--acento-txt);
  font-weight: 700; font-size: .85rem; white-space: nowrap;
}
.ouvir .lampada { background: color-mix(in oklab, var(--acento-txt) 40%, var(--acento)); }
.tocando .ouvir .lampada { background: var(--lampada); }

.menu-mobile { display: none; width: 44px; height: 44px; border-radius: var(--r-2); background: var(--sup-2); position: relative; }
.menu-mobile span { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: var(--txt); transition: transform .25s, top .25s, opacity .2s; }
.menu-mobile span:nth-child(1) { top: 15px; }
.menu-mobile span:nth-child(2) { top: 21px; }
.menu-mobile span:nth-child(3) { top: 27px; }
.menu-aberto .menu-mobile span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.menu-aberto .menu-mobile span:nth-child(2) { opacity: 0; }
.menu-aberto .menu-mobile span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

.barra-carga { position: fixed; top: 0; left: 0; z-index: 300; height: 3px; width: 0; background: var(--acento); transition: width .4s ease, opacity .3s; }
#app { outline: none; transition: opacity .18s; }
#app.saindo { opacity: .35; }

/* -------------------------------------------------------------------------- */
/* Destaque "No ar agora" com a capa de fita                                   */
/* -------------------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--linha); }
.hero__fundo { position: absolute; inset: -40px; z-index: -1; }
.hero__fundo img { width: 100%; height: 100%; object-fit: cover; filter: blur(60px) saturate(1.3); opacity: .38; transform: scale(1.1); transition: opacity .25s; }
.hero__fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, var(--fundo) 96%), linear-gradient(90deg, var(--fundo) 0%, color-mix(in oklab, var(--fundo) 40%, transparent) 60%); }
.hero--meio { margin-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--linha); }

.hero__grade {
  max-width: calc(var(--larg) + 2 * var(--gut));
  margin: 0 auto; padding: clamp(36px, 6vw, 84px) var(--gut) clamp(40px, 6vw, 76px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(32px, 5vw, 72px);
}
.hero__info { min-width: 0; }
.hero__status { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 22px; }
.hero__ouvintes { display: inline-flex; align-items: center; gap: 7px; color: var(--txt-2); font-size: .9rem; font-variant-numeric: tabular-nums; }
.hero__musica {
  font-stretch: 125%; font-weight: 850;
  font-size: clamp(2.3rem, 5.4vw, 5rem); line-height: .96; letter-spacing: -.025em;
  text-wrap: balance; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  padding-bottom: .06em;
}
.hero__artista { margin-top: 14px; font-size: clamp(1.05rem, 1.6vw, 1.35rem); color: var(--txt-2); font-weight: 500; }
.hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }

.play-grande {
  display: inline-flex; align-items: center; gap: 14px;
  height: 62px; padding: 0 28px 0 7px; border-radius: 99px;
  background: var(--acento); color: var(--acento-txt);
  font-weight: 800; font-size: 1.05rem;
  transition: transform .15s, background-color .2s;
}
.play-grande:hover { background: color-mix(in oklab, var(--acento) 86%, #fff); }
.play-grande:active { transform: scale(.97); }
.play-grande__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--acento-txt); color: var(--acento); font-size: 1.4rem; }

.hero__programas { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; margin-top: 36px; max-width: 640px; }
.no-ar { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-2); background: color-mix(in oklab, var(--sup-2) 80%, transparent); border: 1px solid var(--linha); }
.no-ar img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.no-ar__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
.no-ar__txt strong { font-size: 1rem; line-height: 1.3; }
.no-ar__txt > span { color: var(--txt-2); font-size: .88rem; }
.no-ar__txt small { display: flex; justify-content: space-between; gap: 8px; color: var(--txt-3); font-size: .78rem; font-variant-numeric: tabular-nums; }
.no-ar__barra { display: block; height: 4px; margin: 9px 0 6px; border-radius: 4px; background: var(--linha); overflow: hidden; }
.no-ar__barra i { display: block; height: 100%; border-radius: inherit; background: var(--acento); transition: width .6s; }
.a-seguir { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 14px 16px; border-radius: var(--r-2); border: 1px dashed var(--linha-forte); }
.a-seguir__rot { color: var(--txt-3); font-size: .8rem; font-weight: 600; }
.a-seguir strong { font-size: .98rem; line-height: 1.3; }
.a-seguir small { color: var(--txt-2); font-size: .82rem; font-variant-numeric: tabular-nums; }

/* A capa de fita: aba (lista de faixas) | lombada | frente (capa da música) */
.kcard {
  --h: clamp(250px, 26vw, 360px);
  position: relative;
  display: grid; grid-template-columns: calc(var(--h) * .78) 46px var(--h); grid-template-rows: var(--h);
  height: var(--h);
  perspective: 1400px;
  filter: drop-shadow(0 40px 50px rgb(0 0 0 / .45));
}
.kcard__aba {
  position: relative;
  padding: 18px 18px 14px;
  background:
    repeating-linear-gradient(180deg, transparent 0 25px, var(--papel-linha) 25px 26px) 0 52px / 100% calc(100% - 52px) no-repeat,
    var(--papel);
  color: var(--tinta);
  border-radius: var(--r-1) 0 0 var(--r-1);
  transform-origin: right center;
  transform: rotateY(22deg);
  animation: abre-aba 1.1s cubic-bezier(.2, .8, .2, 1) .15s both;
  overflow: hidden;
}
.kcard__aba::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / .14), transparent 30%, rgb(0 0 0 / .1)); pointer-events: none; }
@keyframes abre-aba { from { transform: rotateY(88deg); } to { transform: rotateY(22deg); } }
.kcard__aba-tit { font-family: var(--f-disp); font-stretch: 112%; font-weight: 800; font-size: .95rem; margin-bottom: 14px; height: 22px; line-height: 22px; }
.kcard__faixas { counter-reset: faixa; font-size: .78rem; line-height: 26px; }
.kcard__faixas li { counter-increment: faixa; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 4px; }
.kcard__faixas li::before { content: "A" counter(faixa); grid-row: span 2; font-weight: 700; color: color-mix(in oklab, var(--tinta) 55%, var(--papel)); font-variant-numeric: tabular-nums; }
.kcard__faixas span { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kcard__faixas small { display: none; }
.kcard__faixas:empty::before { content: "As faixas tocadas aparecem aqui."; display: block; color: color-mix(in oklab, var(--tinta) 50%, var(--papel)); }

.kcard__lombada {
  min-height: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between;
  writing-mode: vertical-rl; transform: rotate(180deg);
  padding: 16px 0;
  background: var(--acento); color: var(--acento-txt);
  font-family: var(--f-disp); font-stretch: 110%; font-weight: 800; font-size: .9rem;
  box-shadow: inset 6px 0 10px -6px rgb(0 0 0 / .35), inset -6px 0 10px -6px rgb(0 0 0 / .35);
}
.kcard__lombada span { max-height: 75%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kcard__lombada b { font-weight: 700; font-variant-numeric: tabular-nums; opacity: .8; }
.kcard__frente { position: relative; overflow: hidden; border-radius: 0 var(--r-1) var(--r-1) 0; background: var(--sup-3); }
.kcard__frente img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s; }
.kcard__frente::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgb(255 255 255 / .16), transparent 40%); pointer-events: none; }
.kcard__lado { position: absolute; top: 12px; left: 12px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--papel); color: var(--tinta); font-family: var(--f-disp); font-weight: 900; font-size: .9rem; }

.estacoes { margin-top: 26px; }
.estacoes__tit { display: block; color: var(--txt-3); font-size: .84rem; font-weight: 600; margin-bottom: 10px; }
.estacoes__lista { display: flex; flex-wrap: wrap; gap: 8px; }
.estacao-chip {
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 6px 14px 6px 6px; border-radius: 99px;
  background: var(--sup-2); border: 1.5px solid transparent;
  transition: border-color .2s, background-color .2s;
}
.estacao-chip:hover { background: var(--sup-3); }
.estacao-chip.ativa { border-color: var(--acento); background: var(--acento-suave); }
.estacao-chip__logo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; overflow: hidden; flex: none; color: #222; font-size: .75rem; }
.estacao-chip__logo img { width: 100%; height: 100%; object-fit: contain; }
.estacao-chip__txt { display: flex; flex-direction: column; line-height: 1.2; }
.estacao-chip__txt strong { font-size: .88rem; }
.estacao-chip__txt small { color: var(--txt-3); font-size: .74rem; }
.estacao-chip__eq { display: none; gap: 2px; align-items: flex-end; height: 14px; }
.estacao-chip__eq i { width: 3px; height: 40%; border-radius: 2px; background: var(--acento); }
.tocando .estacao-chip.ativa .estacao-chip__eq { display: flex; }
.tocando .estacao-chip.ativa .estacao-chip__eq i { animation: eq .9s ease-in-out infinite alternate; }
.estacao-chip__eq i:nth-child(2) { animation-delay: -.3s !important; }
.estacao-chip__eq i:nth-child(3) { animation-delay: -.6s !important; }
@keyframes eq { to { height: 100%; } }

/* -------------------------------------------------------------------------- */
/* Seções da página inicial                                                    */
/* -------------------------------------------------------------------------- */
.secao { max-width: calc(var(--larg) + 2 * var(--gut)); margin: 0 auto; padding: clamp(44px, 6vw, 76px) var(--gut) 0; }
.secao__topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.secao__topo h2 { display: flex; align-items: center; gap: 12px; font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 700; }
.secao__topo h2::before { content: ""; flex: none; width: 6px; height: 1.15em; border-radius: 4px; background: linear-gradient(180deg, var(--acento), var(--brilho)); }
.link-mais { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 7px 14px; border-radius: 99px; background: var(--sup-2); color: var(--txt-2); font-weight: 600; font-size: .8rem; transition: background-color .2s, color .2s; }
.link-mais:hover { background: var(--acento); color: var(--acento-txt); }
.modulo__sub { margin-top: 6px; color: var(--txt-2); }

.painel { padding: clamp(18px, 2.4vw, 26px); border-radius: var(--r-3); background: var(--sup); border: 1px solid var(--linha); box-shadow: var(--sombra); }
.painel .secao__topo { margin-bottom: 16px; }
.painel .secao__topo h2 { font-size: 1.3rem; }

/* Slides */
.carrossel { position: relative; }
.carrossel__trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--r-3); }
.carrossel__trilho::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 16 / 6; background: var(--sup); }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slides-alt--imagem .slide { aspect-ratio: auto; }
.slides-alt--imagem .slide img { height: auto; object-fit: contain; }
.slides-alt--alta .slide { aspect-ratio: auto; height: 70vh; }
.slides-alt--tela .slide { aspect-ratio: auto; height: calc(100vh - var(--topo-h) - var(--player-h)); }
.slide__texto { position: absolute; inset: auto 0 0 0; padding: clamp(20px, 4vw, 48px); background: linear-gradient(0deg, rgb(0 0 0 / .78), transparent); color: #fff; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.slide__texto h2 { font-stretch: 115%; font-size: clamp(1.4rem, 3.4vw, 2.8rem); max-width: 22ch; }
.slide__texto p { max-width: 60ch; opacity: .9; }
.slide__link { position: absolute; inset: 0; }
.carrossel__ctrl { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.carrossel__pontos { display: flex; gap: 6px; }
.carrossel__pontos button { width: 8px; height: 8px; border-radius: 99px; background: var(--linha-forte); transition: width .3s, background-color .3s; }
.carrossel__pontos button[aria-current="true"] { width: 28px; background: var(--acento); }
.slides--cheia { max-width: none; padding-left: 0; padding-right: 0; }
.slides--cheia .carrossel__trilho { border-radius: 0; }

/* Banners */
.banners { position: relative; display: grid; }
.banners .banner { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s; }
.banners .banner.ativo { opacity: 1; visibility: visible; }
.banners img { width: 100%; border-radius: var(--r-2); }
.banners__pontos { position: absolute; bottom: 10px; left: 50%; translate: -50% 0; display: flex; gap: 5px; }
.banners__pontos i { width: 6px; height: 6px; border-radius: 50%; background: rgb(255 255 255 / .5); }
.banners__pontos i.ativo { background: #fff; }
.faixa-banner { max-width: calc(var(--larg) + 2 * var(--gut)); margin: clamp(32px, 5vw, 56px) auto 0; padding: 0 var(--gut); }
.faixa-banner--topo { margin-top: 28px; }

/* Músicas: tocadas e ranking */
.musicas { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); }
.musicas--uma { grid-template-columns: minmax(0, 760px); }
.historico li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--linha); }
.historico li:last-child { border-bottom: 1px solid var(--linha); }
.historico li.vazio { display: block; }
.historico img { width: 48px; height: 48px; border-radius: var(--r-1); object-fit: cover; background: var(--sup-2); }
.historico strong { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.historico span { display: block; color: var(--txt-3); font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.historico time { color: var(--txt-3); font-size: .84rem; font-variant-numeric: tabular-nums; }
.historico li.novo { animation: entra .6s ease; }
@keyframes entra { from { background: var(--acento-suave); } }

.ranking { display: flex; flex-direction: column; gap: 4px; }
.ranking__item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 8px 10px 8px 0; border-radius: var(--r-2); text-align: left; transition: background-color .2s; }
button.ranking__item:hover { background: var(--sup); }
.ranking__pos { font-family: var(--f-disp); font-stretch: 125%; font-weight: 900; font-size: 2.6rem; line-height: 1; text-align: center; color: transparent; -webkit-text-stroke: 1.5px var(--acento); }
.ranking li:first-child .ranking__pos { color: var(--acento); }
.ranking__txt strong { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ranking__txt span { display: block; color: var(--txt-3); font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ranking__thumb { position: relative; width: 92px; aspect-ratio: 16 / 9; border-radius: var(--r-1); overflow: hidden; background: var(--sup-2); }
.ranking__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ranking__thumb .ti { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 1.2rem; background: rgb(0 0 0 / .3); }

/* Programação de hoje: a largura de cada programa acompanha a duração */
.linha-tempo { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 14px; scrollbar-width: thin; scrollbar-color: var(--linha-forte) transparent; }
.prog { position: relative; flex: 0 0 clamp(220px, calc(var(--dur) * 2px), 460px); scroll-snap-align: start; padding: 0 14px 0 0; }
.prog__hora { display: block; padding: 0 0 10px; color: var(--txt-3); font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; border-bottom: 2px solid var(--linha-forte); position: relative; }
.prog__hora::before { content: ""; position: absolute; left: 0; bottom: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--fundo); border: 2px solid var(--linha-forte); }
.prog__corpo { display: flex; gap: 12px; align-items: center; padding-top: 18px; }
.prog__corpo img { width: 64px; height: 64px; border-radius: var(--r-2); object-fit: cover; flex: none; background: var(--sup-2); }
.prog h3 { font-family: var(--f-txt); font-weight: 700; font-size: 1rem; line-height: 1.3; }
.prog p { color: var(--txt-3); font-size: .86rem; }
.prog--passou { opacity: .5; }
.prog--ativo .prog__hora { color: var(--acento); border-bottom-color: var(--acento-suave); }
.prog--ativo .prog__hora::before { border-color: var(--acento); background: var(--acento); }
.prog__pct { position: absolute; left: 0; top: calc(1.6em + 8px); height: 2px; background: var(--acento); }
.prog__selo { position: absolute; right: 14px; top: 0; display: inline-flex; align-items: center; gap: 7px; color: color-mix(in oklab, var(--lampada) 40%, var(--txt)); font-size: .78rem; font-weight: 700; }

/* Notícias */
.manchetes { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: repeat(4, auto); column-gap: clamp(24px, 4vw, 48px); row-gap: 4px; }
.manchete { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 14px; align-items: start; padding: 10px; margin: 0 -10px; border-radius: var(--r-2); transition: background-color .2s; }
.manchete:hover { background: var(--sup); }
.manchete__img { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-1); overflow: hidden; background: var(--sup-2); }
.manchete__img img { width: 100%; height: 100%; object-fit: cover; }
.manchete__txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.manchete__txt strong { font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.manchete__resumo { color: var(--txt-2); font-size: .92rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.manchete__txt time, .manchete__fonte { color: var(--txt-3); font-size: .8rem; }
.manchete--principal { grid-row: 1 / span 4; grid-template-columns: 1fr; align-content: start; }
.manchete--principal .manchete__img { aspect-ratio: 16 / 10; }
.manchete--principal strong { font-family: var(--f-disp); font-stretch: 108%; font-weight: 800; font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.15; -webkit-line-clamp: 4; }
.manchete--carregando .manchete__img, .manchete--carregando b { background: linear-gradient(90deg, var(--sup), var(--sup-2), var(--sup)); background-size: 200% 100%; animation: brilho 1.4s linear infinite; }
.manchete--carregando b { display: block; height: 14px; border-radius: 4px; }
.manchete--carregando b + b { width: 60%; }
@keyframes brilho { to { background-position: -200% 0; } }
.lista-noticias { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 8px clamp(20px, 3vw, 36px); }
.lista-noticias .manchete__resumo { -webkit-line-clamp: 2; }

/* Cartazes: promoções e eventos */
.cartazes { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; }
.cartazes > .cartaz { flex: 0 0 min(300px, 78vw); scroll-snap-align: start; }
.cartazes--grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); overflow: visible; }
.cartaz { display: flex; flex-direction: column; border-radius: var(--r-2); overflow: hidden; background: var(--sup); border: 1px solid var(--linha); transition: border-color .2s; }
.cartaz:hover { border-color: var(--linha-forte); }
.cartaz__img { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--sup-2); }
.cartaz__img img { width: 100%; height: 100%; object-fit: cover; }
.cartaz__img .data-bloco { position: absolute; left: 12px; bottom: 12px; }
.cartaz__txt { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.cartaz__txt strong { font-weight: 700; line-height: 1.3; }
.cartaz__txt small { display: flex; align-items: center; gap: 6px; color: var(--txt-3); font-size: .84rem; }
.cartaz--encerrado, .cartazes--passados .cartaz { opacity: .6; }
.data-bloco { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 56px; height: 60px; border-radius: var(--r-2); background: var(--acento); color: var(--acento-txt); line-height: 1; flex: none; }
.data-bloco strong { font-family: var(--f-disp); font-stretch: 112%; font-weight: 900; font-size: 1.5rem; }
.data-bloco span { font-size: .78rem; font-weight: 700; margin-top: 3px; }
.agenda { display: grid; gap: 10px; }
.agenda__item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 10px 16px 10px 10px; border-radius: var(--r-2); background: var(--sup); transition: background-color .2s; }
.agenda__item:hover { background: var(--sup-2); }
.agenda__txt { display: flex; flex-direction: column; min-width: 0; }
.agenda__txt strong { font-weight: 700; }
.agenda__txt small { display: flex; align-items: center; gap: 5px; color: var(--txt-3); font-size: .86rem; }
.agenda__hora { color: var(--txt-2); font-size: .9rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Vídeos */
.videos { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; }
.videos .video { flex: 0 0 min(300px, 78vw); scroll-snap-align: start; }
.videos--grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); overflow: visible; }
.video { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.video__img { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r-2); overflow: hidden; background: var(--sup-2); }
.video__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.video:hover .video__img img { transform: scale(1.04); }
.video__img .ti { position: absolute; left: 12px; bottom: 12px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--acento); color: var(--acento-txt); font-size: 1.2rem; }
.video strong { font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.video small { color: var(--txt-3); font-size: .86rem; }

/* Fotos */
.galerias { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.galeria { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-2); overflow: hidden; background: var(--sup-2); }
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.galeria:hover img { transform: scale(1.04); }
.galeria span { position: absolute; inset: auto 0 0; display: flex; flex-direction: column; padding: 40px 16px 14px; background: linear-gradient(0deg, rgb(0 0 0 / .8), transparent); color: #fff; }
.galeria small { opacity: .8; font-size: .82rem; }
.mosaico { columns: 4 220px; column-gap: 12px; }
.mosaico a { display: block; margin-bottom: 12px; border-radius: var(--r-1); overflow: hidden; break-inside: avoid; }

/* Interação: câmera, chat, enquete */
.interacao { display: grid; gap: 20px; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }
.interacao--2 { --cols: 2; }
.interacao--3 { --cols: 3; }
.camera { aspect-ratio: 16 / 9; border-radius: var(--r-2); overflow: hidden; background: #000; }
.camera video { width: 100%; height: 100%; object-fit: contain; }
.camera--grande { border-radius: var(--r-3); }
.enquete__pergunta { font-weight: 700; font-size: 1.05rem; margin-bottom: 14px; }
.enquete__opcoes { display: grid; gap: 8px; }
.enquete .btn { margin-top: 8px; justify-self: start; }
.opcao { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r-2); background: var(--sup-2); cursor: pointer; transition: background-color .2s; }
.opcao:hover { background: var(--sup-3); }
.opcao input { accent-color: var(--acento); width: 18px; height: 18px; }
.enquete__resultado { display: grid; gap: 14px; }
.barra { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; font-size: .92rem; }
.barra b { font-variant-numeric: tabular-nums; }
.barra i { grid-column: 1 / -1; height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--acento) var(--p), var(--sup-3) var(--p)); }
.enquete__msg { margin-top: 10px; color: var(--txt-2); font-size: .9rem; }

/* Chat */
.chat__corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.chat--grande .chat__corpo { grid-template-columns: minmax(0, 1fr) 200px; }
.chat__msgs { height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 6px; scrollbar-width: thin; }
.chat--grande .chat__msgs { height: 460px; }
.chat__msgs .m { max-width: 85%; padding: 9px 13px; border-radius: 4px 14px 14px 14px; background: var(--sup-2); }
.chat__msgs .m b { display: flex; gap: 8px; align-items: baseline; font-size: .82rem; color: var(--acento); }
.chat__msgs .m time { color: var(--txt-3); font-weight: 400; font-size: .74rem; }
.chat__msgs .m p { overflow-wrap: anywhere; }
.chat__msgs .m--eu { align-self: flex-end; border-radius: 14px 4px 14px 14px; background: var(--acento-suave); }
.chat__vazio { color: var(--txt-3); margin: auto; }
.chat__usuarios h3 { font-family: var(--f-txt); font-size: .9rem; margin-bottom: 8px; color: var(--txt-2); }
.chat__usuarios li { padding: 4px 0; font-size: .9rem; border-bottom: 1px solid var(--linha); }
.chat__entrar, .chat__enviar { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.chat__entrar input, .chat__enviar input { flex: 1; min-width: 0; height: 46px; padding: 0 16px; border-radius: 99px; background: var(--sup-2); border: 1px solid var(--linha); }
.chat__entrar input:focus, .chat__enviar input:focus { outline: none; border-color: var(--acento); }
.chat__eu { display: inline-flex; align-items: center; gap: 4px; color: var(--txt-3); font-size: .82rem; max-width: 110px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-externo { width: 100%; height: 480px; border: 0; border-radius: var(--r-2); background: #fff; }

/* Equipe */
.equipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 24px 18px; }
.equipe--home { display: flex; overflow-x: auto; padding-bottom: 10px; gap: 18px; }
.equipe--home .membro { flex: 0 0 170px; }
.membro { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.membro img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-2); background: var(--sup-2); }
.membro figcaption, .membro h2 { font-family: var(--f-txt); font-weight: 700; font-size: 1rem; }

/* Faixa de pedidos (WhatsApp) */
.pedido {
  display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap;
  padding: clamp(28px, 4.5vw, 52px);
  border-radius: var(--r-3);
  background: var(--acento); color: var(--acento-txt);
}
.pedido h2 { font-stretch: 118%; font-size: clamp(1.6rem, 3.2vw, 2.6rem); max-width: 20ch; line-height: 1.02; }
.pedido p { margin-top: 12px; max-width: 52ch; opacity: .85; }

/* Aplicativos */
.faixa-apps { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: clamp(22px, 3.5vw, 36px); border-radius: var(--r-3); background: var(--sup); border: 1px solid var(--linha); }
.faixa-apps__icone img { width: 72px; height: 72px; object-fit: contain; border-radius: 18px; background: var(--sup-2); padding: 8px; }
.faixa-apps__txt { flex: 1; min-width: 220px; }
.faixa-apps__txt h2 { font-stretch: 112%; font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
.faixa-apps__txt p { color: var(--txt-2); margin-top: 6px; }
.apps { display: flex; flex-wrap: wrap; gap: 10px; }
.apps--rodape { margin-top: 18px; }
.loja { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 18px 0 14px; border-radius: var(--r-2); background: var(--txt); color: var(--fundo); transition: transform .15s; }
.loja:hover { transform: translateY(-2px); }
.loja .ti { font-size: 1.6rem; }
.loja span { display: flex; flex-direction: column; line-height: 1.1; font-weight: 700; font-size: .98rem; }
.loja small { font-weight: 500; font-size: .7rem; opacity: .7; }

/* Parceiros */
.parceiros { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.parceiros__faixa { display: flex; gap: 18px; width: max-content; animation: faixa 50s linear infinite; }
.parceiros:hover .parceiros__faixa { animation-play-state: paused; }
.parceiros a { flex: none; display: grid; place-items: center; width: 180px; height: 96px; padding: 12px; border-radius: var(--r-2); background: #fff; }
.parceiros img { max-height: 100%; width: auto; object-fit: contain; }
@keyframes faixa { to { transform: translateX(calc(-50% - 9px)); } }

/* Previsão do tempo */
.tempo__local { display: inline-flex; align-items: center; gap: 5px; color: var(--txt-2); font-size: .9rem; }
.tempo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px 48px; align-items: center; padding: clamp(20px, 3vw, 32px); border-radius: var(--r-3); background: var(--sup); border: 1px solid var(--linha); }
.tempo__agora { display: flex; align-items: center; gap: 18px; }
.tempo__icone { font-size: 4rem; color: var(--acento); }
.tempo__temp { display: block; font-family: var(--f-disp); font-stretch: 112%; font-weight: 900; font-size: 3.4rem; line-height: 1; }
.tempo__txt { display: block; font-weight: 600; }
.tempo__agora small { display: block; color: var(--txt-3); font-size: .84rem; margin-top: 4px; }
.tempo__dias { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.tempo__dias li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border-radius: var(--r-2); background: var(--sup-2); }
.tempo__dias span { font-weight: 600; font-size: .86rem; }
.tempo__dias .ti { font-size: 1.6rem; color: var(--txt-2); margin: 4px 0; }
.tempo__dias em { font-style: normal; color: var(--txt-3); font-size: .86rem; }
.tempo__dias small { display: flex; align-items: center; gap: 2px; color: var(--brilho); font-size: .76rem; }
.horoscopo { overflow: hidden; }

/* Módulos livres */
.modulo__caixa { display: grid; gap: 24px; }
.modulo--caixa .modulo__caixa { padding: clamp(20px, 3vw, 34px); border-radius: var(--r-3); background: var(--sup); border: 1px solid var(--linha); }
.modulo--destaque .modulo__caixa { padding: clamp(24px, 4vw, 48px); border-radius: var(--r-3); background: color-mix(in oklab, var(--acento) 18%, var(--sup)); }
.modulo--com-img.modulo--imagem .modulo__caixa, .modulo--com-img.modulo--caixa .modulo__caixa { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; }
.modulo__img img, .modulo__img-livre { width: 100%; border-radius: var(--r-2); }
.modulo__acao { margin-top: 18px; }

/* -------------------------------------------------------------------------- */
/* Páginas internas                                                            */
/* -------------------------------------------------------------------------- */
.cab { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--linha); }
.cab__fundo { position: absolute; inset: 0; z-index: -1; }
.cab__fundo img { width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.cab__fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--fundo) 15%, color-mix(in oklab, var(--fundo) 55%, transparent)), linear-gradient(0deg, var(--fundo), transparent 60%); }
.cab__inner { max-width: calc(var(--larg) + 2 * var(--gut)); margin: 0 auto; padding: clamp(48px, 8vw, 100px) var(--gut) clamp(32px, 5vw, 56px); }
.cab h1 { font-stretch: 122%; font-weight: 850; font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1; max-width: 22ch; text-wrap: balance; overflow-wrap: anywhere; }
.cab p { margin-top: 14px; max-width: 60ch; color: var(--txt-2); font-size: 1.08rem; }
.cab__voltar { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; color: var(--txt-2); font-weight: 600; font-size: .92rem; }
.cab__voltar:hover { color: var(--acento); }

.conteudo { max-width: calc(var(--larg) + 2 * var(--gut)); margin: 0 auto; padding: clamp(32px, 5vw, 56px) var(--gut) 0; }
.conteudo--estreito { max-width: calc(780px + 2 * var(--gut)); }
.conteudo--duplo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 5vw, 64px); align-items: start; }
.subtitulo { font-stretch: 110%; font-size: 1.4rem; margin: 8px 0 18px; }
.subtitulo:not(:first-child) { margin-top: 48px; }

.texto-rico { max-width: 70ch; font-size: 1.05rem; line-height: 1.75; color: color-mix(in oklab, var(--txt) 90%, var(--c-base)); overflow-wrap: break-word; }
.texto-rico > * + * { margin-top: 1.1em; }
.texto-rico h1, .texto-rico h2, .texto-rico h3 { font-stretch: 108%; line-height: 1.2; margin-top: 1.6em; color: var(--txt); }
.texto-rico h2 { font-size: 1.6rem; }
.texto-rico h3 { font-size: 1.25rem; }
.texto-rico a { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }
.texto-rico img { border-radius: var(--r-2); }
.texto-rico ul, .texto-rico ol { padding-left: 1.3em; }
.texto-rico ul { list-style: disc; }
.texto-rico ol { list-style: decimal; }
.texto-rico blockquote { margin-left: 0; padding-left: 18px; border-left: 3px solid var(--acento); color: var(--txt-2); }
.texto-rico iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--r-2); }
.texto-rico table { width: 100%; border-collapse: collapse; }
.texto-rico td, .texto-rico th { padding: 8px; border-bottom: 1px solid var(--linha); }
.texto-rico [style*="color"] { color: inherit !important; }
.texto-rico [style*="background"] { background: none !important; }
.texto-rico--intro { margin-bottom: 32px; }
.artigo__img { width: 100%; border-radius: var(--r-3); margin-bottom: 28px; }
.autor { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.autor img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.autor strong { display: block; }
.autor span { color: var(--txt-3); font-size: .88rem; }
.compartilhar { display: flex; align-items: center; gap: 6px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--linha); }
.compartilhar span { margin-right: 8px; color: var(--txt-2); font-weight: 600; font-size: .9rem; }

.lateral { position: sticky; top: calc(var(--topo-h) + var(--sobe) + 20px); display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: var(--r-3); background: var(--sup); border: 1px solid var(--linha); }
.lateral h2 { font-family: var(--f-txt); font-weight: 700; font-size: 1.05rem; margin-bottom: 6px; }
.lateral__link { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--linha); }
.lateral__link strong { font-weight: 600; line-height: 1.35; }
.lateral__link:hover strong { color: var(--acento); }
.lateral__link time { color: var(--txt-3); font-size: .8rem; }
.lateral .info { display: flex; gap: 10px; align-items: flex-start; color: var(--txt-2); }
.lateral .info .ti { color: var(--acento); font-size: 1.2rem; margin-top: 2px; }
.lateral .btn { margin-top: 6px; }
.lateral a:not(.btn):not(.lateral__link):not(.canal) { color: var(--acento); text-decoration: underline; }
.canal { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: var(--r-2); background: var(--sup-2); transition: background-color .2s; }
a.canal:hover { background: var(--sup-3); }
.canal .ti { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--acento-suave); color: var(--acento); font-size: 1.3rem; flex: none; }
.canal span { display: flex; flex-direction: column; min-width: 0; }
.canal small { color: var(--txt-3); overflow-wrap: anywhere; }
.mapa { width: 100%; height: 220px; border: 0; border-radius: var(--r-2); margin-top: 6px; }

.contagem { display: flex; gap: 8px; }
.contagem span { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border-radius: var(--r-2); background: var(--sup-2); }
.contagem b { font-family: var(--f-disp); font-stretch: 112%; font-size: 1.5rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.contagem small { color: var(--txt-3); font-size: .74rem; }

.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filtros a { padding: 8px 16px; border-radius: 99px; background: var(--sup-2); color: var(--txt-2); font-weight: 600; font-size: .9rem; }
.filtros a.ativo { background: var(--acento); color: var(--acento-txt); }
.paginacao { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 36px; }
.paginacao a { display: grid; place-items: center; min-width: 42px; height: 42px; border-radius: 99px; background: var(--sup-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.paginacao a.ativo { background: var(--acento); color: var(--acento-txt); }

/* Formulários */
.form { display: grid; gap: 16px; }
.form__duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form__rodape { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > span { color: var(--txt-2); font-size: .88rem; font-weight: 600; }
.campo input, .campo textarea { width: 100%; padding: 12px 14px; border-radius: var(--r-2); background: var(--sup-2); border: 1px solid var(--linha); transition: border-color .2s; }
.campo textarea { resize: vertical; min-height: 130px; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.campo--curto { max-width: 180px; }
.campo.erro input, .campo.erro textarea { border-color: var(--erro); }
.form__msg { font-size: .92rem; color: var(--txt-2); }
.form__msg:empty { display: none; }
.form__msg.ok { color: var(--ok); font-weight: 600; }
.form__msg.erro { color: var(--erro); }

/* Programação da semana */
.abas { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 28px; padding-bottom: 6px; scrollbar-width: none; }
.abas button { flex: none; display: flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 99px; background: var(--sup-2); color: var(--txt-2); font-weight: 600; transition: background-color .2s, color .2s; }
.abas button:hover { color: var(--txt); }
.abas button[aria-selected="true"] { background: var(--acento); color: var(--acento-txt); }
.abas small { font-size: .74rem; opacity: .75; }
.abas__curto { display: none; }
.grade-dia { display: grid; gap: 10px; }
.faixa { position: relative; display: grid; grid-template-columns: 124px 80px minmax(0, 1fr); align-items: center; gap: 18px; padding: 12px 18px 12px 12px; border-radius: var(--r-2); background: var(--sup); border: 1px solid transparent; }
.faixa--ativa { border-color: var(--acento); background: color-mix(in oklab, var(--acento) 8%, var(--sup)); }
.faixa__hora { font-family: var(--f-disp); font-stretch: 108%; font-weight: 800; font-size: 1.02rem; font-variant-numeric: tabular-nums; padding-left: 8px; }
.faixa__img { width: 80px; height: 80px; border-radius: var(--r-2); object-fit: cover; }
.faixa__txt h3 { font-family: var(--f-txt); font-weight: 700; font-size: 1.1rem; }
.faixa__txt p { display: flex; align-items: center; gap: 8px; color: var(--txt-2); margin-top: 4px; }
.faixa__txt p img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.faixa__txt .no-ar__barra { max-width: 280px; }
.faixa .prog__selo { top: 12px; right: 16px; }

.depoimentos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.depoimento { margin: 0; padding: 24px; border-radius: var(--r-3); background: var(--sup); }
.depoimento blockquote { margin: 0; font-size: 1.02rem; line-height: 1.65; }
.depoimento figcaption { display: flex; justify-content: space-between; margin-top: 16px; color: var(--txt-3); font-size: .86rem; }
.depoimento figcaption strong { color: var(--txt); }

.vazio-grande { max-width: 640px; margin: 0 auto; padding: clamp(64px, 12vw, 140px) var(--gut); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.vazio-grande--tela { min-height: 100vh; justify-content: center; }
.vazio-grande__num { font-family: var(--f-disp); font-stretch: 125%; font-weight: 900; font-size: clamp(5rem, 18vw, 10rem); line-height: .9; color: transparent; -webkit-text-stroke: 2px var(--acento); }
.vazio-grande h1 { font-stretch: 115%; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.vazio-grande p { color: var(--txt-2); }
.vazio-grande__logo { max-height: 90px; width: auto; margin-bottom: 16px; }

/* -------------------------------------------------------------------------- */
/* Rodapé                                                                      */
/* -------------------------------------------------------------------------- */
.rodape { margin-top: clamp(56px, 8vw, 96px); background: var(--c-rodape); border-top: 3px solid var(--acento); }
.rodape__grade { max-width: calc(var(--larg) + 2 * var(--gut)); margin: 0 auto; padding: clamp(40px, 6vw, 64px) var(--gut) 36px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 36px; }
.rodape__logo img { height: 64px; width: auto; max-width: 200px; object-fit: contain; }
.rodape__txt { margin-top: 12px; color: var(--txt-2); max-width: 40ch; font-size: .88rem; }
.rodape__tit { display: flex; align-items: center; gap: 10px; font-size: .95rem; font-weight: 700; margin-bottom: 16px; }
.rodape__tit::before { content: ""; width: 4px; height: 1em; border-radius: 3px; background: var(--acento); }
.rodape__lista { display: grid; gap: 9px; }
.rodape__lista a, .rodape__lista span { display: inline-flex; align-items: center; gap: 9px; color: var(--txt-2); font-size: .88rem; overflow-wrap: anywhere; }
.rodape__lista a:hover { color: var(--acento); }
.rodape__lista .ti { font-size: 1.1rem; color: var(--acento); flex: none; }
.rodape__numeros { display: flex; gap: 22px; margin-top: 18px; }
.rodape__numeros strong { display: block; font-weight: 800; font-size: 1.4rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rodape__numeros span { color: var(--txt-3); font-size: .76rem; }
.rodape__base { max-width: calc(var(--larg) + 2 * var(--gut)); margin: 0 auto; padding: 18px var(--gut) 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; border-top: 1px solid var(--linha); color: var(--txt-3); font-size: .8rem; }
.rodape__base p { flex: 1; }
.credito { display: inline-flex; align-items: center; gap: 8px; color: var(--txt-3); }
.credito img { height: 22px; width: auto; opacity: .85; }
.voltar-topo { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 99px; background: var(--sup-2); color: var(--txt); font-weight: 600; font-size: .8rem; }
.voltar-topo:hover { background: var(--acento); color: var(--acento-txt); }

/* -------------------------------------------------------------------------- */
/* Player fixo                                                                 */
/* -------------------------------------------------------------------------- */
.player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  height: var(--player-h);
  background: color-mix(in oklab, var(--c-base) 90%, #000);
  border-top: 1px solid var(--linha);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.player--topo { top: 0; bottom: auto; border-top: 0; border-bottom: 1px solid var(--linha); }
.player__viz { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .32; pointer-events: none; }
.player__inner { position: relative; height: 100%; max-width: calc(var(--larg) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); display: flex; align-items: center; gap: 16px; }
.player__capa { flex: none; order: -2; }
.player__inner .player__play { order: -1; }
.player__disco { display: block; width: 52px; height: 52px; border-radius: var(--r-1); overflow: hidden; background: var(--sup-2); }
.player__disco img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s; }
.player__info { flex: 1; min-width: 0; }
.player__vivo { white-space: nowrap; overflow: hidden; display: flex; align-items: center; gap: 7px; color: var(--txt-3); font-size: .74rem; font-weight: 700; }
.player__estacao-atual:not(:empty)::before { content: "/"; margin-right: 7px; opacity: .5; }
.player__titulo { overflow: hidden; white-space: nowrap; font-weight: 700; font-size: 1rem; line-height: 1.35; }
.player__titulo span { display: inline-block; }
.player__titulo.rola { mask-image: linear-gradient(90deg, #000 85%, transparent); }
.player__titulo.rola span { animation: letreiro 14s linear infinite; padding-right: 40px; }
@keyframes letreiro { 0%, 12% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
.player__artista { color: var(--txt-2); font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__play { margin-right: 4px; }
.player__play { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--acento); color: var(--acento-txt); font-size: 1.45rem; transition: transform .15s, background-color .2s; }
.player__play:hover { background: color-mix(in oklab, var(--acento) 86%, #fff); }
.player__play:active { transform: scale(.94); }
.sem-autoplay .player__play { animation: chama 1.6s ease-in-out infinite; }
@keyframes chama { 50% { box-shadow: 0 0 0 10px var(--acento-suave); } }
.player__vol { display: flex; align-items: center; gap: 4px; flex: none; }
.player__vol input { width: 110px; accent-color: var(--acento); }
.player__ouvintes { display: flex; align-items: center; gap: 6px; flex: none; color: var(--txt-2); font-size: .88rem; font-variant-numeric: tabular-nums; min-width: 54px; }
.player__dial { display: none; }
.player__estacao { position: relative; flex: none; }
.player__estacoes { position: absolute; bottom: calc(100% + 16px); right: -60px; width: 290px; max-height: 60vh; overflow: auto; padding: 12px; display: grid; gap: 6px; border-radius: var(--r-3); background: var(--sup); border: 1px solid var(--linha); box-shadow: 0 30px 60px -20px #000; }
.player--topo .player__estacoes { bottom: auto; top: calc(100% + 16px); }
.player__estacoes-tit { font-size: .86rem; color: var(--txt-2); padding: 2px 6px 6px; }
.player__estacoes .estacao-chip { border-radius: var(--r-2); }

/* Modelo: vinil (a capa vira um disco que gira) */
.player--vinil .player__disco {
  width: 60px; height: 60px; border-radius: 50%; padding: 17px;
  background: repeating-radial-gradient(circle, #141414 0 1.5px, #222 1.5px 3px);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .06), inset 0 0 0 2px #000;
  animation: gira 3.2s linear infinite; animation-play-state: paused;
}
.player--vinil .player__disco img { border-radius: 50%; }
.tocando .player--vinil .player__disco { animation-play-state: running; }

/* Modelo: dial retrô (escala de sintonia com agulha) */
.player--retro { background: color-mix(in oklab, var(--c-base) 70%, #1a1206); }
.player--retro .player__dial { display: block; position: relative; flex: 0 1 260px; height: 38px; border-radius: var(--r-1); background: #0d0a05; box-shadow: inset 0 0 0 1px rgb(255 190 90 / .18), inset 0 0 18px rgb(255 160 40 / .12); overflow: hidden; }
.player--retro .player__escala { position: absolute; inset: 8px 10px; background: repeating-linear-gradient(90deg, rgb(255 200 120 / .7) 0 1px, transparent 1px 10px), repeating-linear-gradient(90deg, rgb(255 200 120 / .9) 0 2px, transparent 2px 50px); mask-image: linear-gradient(180deg, #000 45%, transparent 45%, transparent 55%, #000 55%); }
.player--retro .player__agulha { position: absolute; top: 4px; bottom: 4px; left: 30%; width: 2px; border-radius: 2px; background: var(--lampada); box-shadow: 0 0 8px var(--lampada); transition: left 1.2s cubic-bezier(.3, 1.4, .5, 1); }
.tocando .player--retro .player__agulha { left: 62%; }
.player--retro .player__titulo { color: #ffd69a; text-shadow: 0 0 12px rgb(255 170 60 / .35); }
.player--retro .player__disco { border-radius: 50%; }

/* Modelo: cápsula flutuante */
.player--capsula {
  left: 50%; right: auto; bottom: 14px; translate: -50% 0;
  width: min(760px, calc(100% - 24px)); height: 70px;
  border: 1px solid var(--linha-forte); border-radius: 99px;
  background: color-mix(in oklab, var(--c-base) 72%, transparent);
  box-shadow: 0 24px 60px -18px rgb(0 0 0 / .7);
  overflow: visible;
}
.player--capsula.player--topo { top: calc(var(--topo-h) + 10px); bottom: auto; }
.player--capsula .player__viz { border-radius: 99px; }
.player--capsula .player__inner { padding: 0 9px 0 9px; gap: 12px; }
.player--capsula .player__disco { width: 52px; height: 52px; border-radius: 50%; }
.player--capsula .player__ouvintes { display: none; }
.player--capsula .player__vol input { width: 80px; }

/* Player externo (iframe do provedor) */
.player-externo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #000; }
.player-externo iframe { width: 100%; height: 100%; border: 0; }

/* Player em janela separada */
.popup { min-height: 100vh; padding: 0; display: grid; place-items: center; overflow: hidden; }
.popup__fundo { position: fixed; inset: -40px; z-index: -1; }
.popup__fundo img { width: 100%; height: 100%; object-fit: cover; filter: blur(50px); opacity: .45; }
.popup__inner { width: 100%; max-width: 380px; padding: 28px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.popup__logo { max-height: 52px; width: auto; }
.popup__capa { width: 220px; aspect-ratio: 1; border-radius: var(--r-2); overflow: hidden; box-shadow: 0 30px 60px -20px #000; margin: 6px 0; }
.popup__capa img { width: 100%; height: 100%; object-fit: cover; }
.popup__musica { font-stretch: 115%; font-size: 1.5rem; }
.popup__artista { color: var(--txt-2); }
.player__play--grande { width: 72px; height: 72px; font-size: 2rem; }
.player__vol--popup input { width: 160px; }
.popup .estacoes { margin-top: 6px; }
.popup .estacoes__lista { justify-content: center; }
.popup__viz { width: 100%; height: 60px; }

/* -------------------------------------------------------------------------- */
/* Modal, aviso de cookies e mensagens                                         */
/* -------------------------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 60px 16px; background: rgb(0 0 0 / .88); }
.modal__corpo { width: min(1100px, 100%); }
.modal__corpo iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-2); background: #000; }
.modal__corpo img { max-height: 82vh; width: auto; margin: 0 auto; border-radius: var(--r-1); }
.modal__fechar, .modal__nav { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgb(255 255 255 / .12); color: #fff; font-size: 1.5rem; }
.modal__fechar { top: 14px; right: 14px; }
.modal__nav { top: 50%; translate: 0 -50%; display: none; }
.modal__nav--ant { left: 14px; }
.modal__nav--prox { right: 14px; }
.modal.galeria-on .modal__nav { display: grid; }

.cookies { position: fixed; left: 16px; bottom: calc(var(--player-h) + 16px); z-index: 70; max-width: 380px; display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 18px; border-radius: var(--r-2); background: var(--sup-2); border: 1px solid var(--linha-forte); box-shadow: 0 20px 50px -20px #000; font-size: .86rem; color: var(--txt-2); }
.player-topo .cookies, .tem-player-externo .cookies { bottom: 16px; }
.modelo-capsula .cookies { bottom: calc(var(--player-h) + 36px); }
.modelo-capsula.player-topo .cookies { bottom: 16px; }

.toast { position: fixed; left: 50%; bottom: calc(var(--player-h) + 20px); z-index: 120; translate: -50% 20px; max-width: calc(100% - 32px); padding: 12px 20px; border-radius: 99px; background: var(--txt); color: var(--fundo); font-weight: 600; font-size: .92rem; opacity: 0; pointer-events: none; transition: opacity .25s, translate .25s; }
.toast.on { opacity: 1; translate: -50% 0; }
.em-previa .cookies { display: none !important; }

/* -------------------------------------------------------------------------- */
/* Player "Barra do portal" (logo abaixo do menu)                              */
/* -------------------------------------------------------------------------- */
.player--portal {
  position: sticky; top: 0; bottom: auto; left: auto; right: auto; z-index: 44;
  height: var(--portal-h);
  background: linear-gradient(90deg, color-mix(in oklab, var(--acento) 26%, var(--sup)) 0%, var(--sup) 45%, var(--sup) 100%);
  border-top: 0; border-bottom: 1px solid var(--linha);
  box-shadow: 0 12px 30px -20px rgb(0 0 0 / .8);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.modelo-portal { padding-bottom: 0; --sobe: var(--portal-h); }
.player--portal .player__inner { gap: 18px; }
.player--portal .player__viz { opacity: .18; }
.pp-play { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--acento); color: var(--acento-txt); font-size: 1.6rem; box-shadow: 0 0 0 6px var(--acento-suave); transition: transform .15s; }
.pp-play:hover { transform: scale(1.05); }
.pp-play__ic { display: grid; place-items: center; }
body:not(.tocando) .pp-play { animation: chama 2s ease-in-out infinite; }
.pp-musica { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pp-musica__acao { color: var(--acento); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.player--portal .player__titulo { font-size: 1rem; font-weight: 700; }
.pp-musica__artista { color: var(--txt-2); font-weight: 500; }
.pp-musica__artista:not(:empty)::before { content: "\00a0-\00a0"; }
.pp-capa { flex: none; width: 54px; height: 54px; border-radius: var(--r-1); overflow: hidden; background: var(--sup-2); }
.pp-capa img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s; }
.pp-programa { flex: none; display: flex; align-items: center; gap: 12px; padding-left: 18px; border-left: 1px solid var(--linha); max-width: 300px; }
.pp-programa img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--acento); flex: none; }
.pp-programa div { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.25; }
.pp-programa strong { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pp-programa small { color: var(--txt-2); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pp-programa small b { color: var(--txt); }
.tag-no-ar, .tag-proximo { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; }
.tag-no-ar { background: var(--lampada); color: #fff; }
.tag-no-ar .lampada { width: 7px; height: 7px; background: #fff; box-shadow: none; animation: lampada 1.6s ease-in-out infinite; }
.tag-proximo { background: var(--acento); color: var(--acento-txt); }
.pp-programa .tag-no-ar { margin-bottom: 3px; }
.pp-rede { flex: none; }
.pp-rede__btn { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 99px; background: var(--sup-2); border: 1px solid var(--linha); transition: border-color .2s; }
.pp-rede__btn:hover { border-color: var(--acento); }
.pp-rede__txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; max-width: 150px; }
.pp-rede__txt small { color: var(--acento); font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pp-rede__txt strong { font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.player--portal .player__estacoes { top: calc(100% + 12px); bottom: auto; right: 0; }

/* -------------------------------------------------------------------------- */
/* Blocos do modelo portal                                                     */
/* -------------------------------------------------------------------------- */
/* Rede de rádios */
.rede { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 16px; }
.rede__item { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--r-3); background: var(--sup); border: 1px solid var(--linha); box-shadow: var(--sombra); }
.rede__logo { display: grid; place-items: center; flex: none; width: 66px; height: 66px; border-radius: 50%; background: #fff; overflow: hidden; color: #222; font-weight: 800; }
.rede__logo img { width: 100%; height: 100%; object-fit: contain; }
.rede__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rede__txt strong { font-size: .95rem; text-transform: uppercase; line-height: 1.25; }
.rede__txt small { color: var(--acento); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rede__btn.estacao-chip { padding: 0 16px; gap: 6px; border-radius: 99px; background: var(--acento); border: 0; color: var(--acento-txt); }
.rede__btn.estacao-chip.ativa { background: transparent; box-shadow: inset 0 0 0 2px var(--acento); color: var(--acento); }
.rede__btn .estacao-chip__eq i { background: currentColor; }
.tocando .rede__btn.ativa .ti { display: none; }

/* Programação em cartões */
.grade-prog { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 16px; }
.card-prog { position: relative; display: flex; flex-direction: column; border-radius: var(--r-3); overflow: hidden; background: var(--sup); border: 1px solid var(--linha); box-shadow: var(--sombra); }
.card-prog--ar { border-color: var(--lampada); }
.card-prog__img { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--sup-2); }
.card-prog__img img { width: 100%; height: 100%; object-fit: cover; }
.card-prog__img .tag-no-ar, .card-prog__img .tag-proximo { position: absolute; top: 12px; left: 12px; }
.card-prog__txt { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.card-prog__txt strong { font-size: 1rem; line-height: 1.3; }
.card-prog__txt small { display: flex; align-items: center; gap: 6px; color: var(--txt-2); font-size: .8rem; }
.card-prog__txt .ti { color: var(--acento); }
.card-prog__barra { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--linha); }
.card-prog__barra i { display: block; height: 100%; background: var(--lampada); }

/* Notícias em cartões */
.cards-noticias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cards-noticias .manchete { grid-template-columns: 1fr; gap: 0; margin: 0; padding: 0; border-radius: var(--r-3); overflow: hidden; background: var(--sup); border: 1px solid var(--linha); box-shadow: var(--sombra); }
.cards-noticias .manchete:hover { background: var(--sup-2); }
.cards-noticias .manchete__img { aspect-ratio: 16 / 10; border-radius: 0; }
.cards-noticias .manchete__txt { padding: 14px 16px 16px; }
.cards-noticias .manchete__txt strong { font-size: .95rem; }
.cards-noticias .manchete__resumo { font-size: .82rem; -webkit-line-clamp: 2; }
.manchete__fonte { color: var(--acento) !important; font-weight: 600; }

/* Vídeos na página inicial */
.videos--home { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* WhatsApp */
.whats { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: clamp(22px, 3.5vw, 36px); border-radius: var(--r-3); background: linear-gradient(110deg, #128C4B, var(--whats)); color: #fff; box-shadow: var(--sombra); }
.whats__ic { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: rgb(255 255 255 / .18); font-size: 2.4rem; flex: none; }
.whats__txt { flex: 1; min-width: 220px; }
.whats__txt h2 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
.whats__txt p { opacity: .9; margin-top: 4px; }
.btn--whats { background: #fff; color: #128C4B; min-height: 58px; padding: 0 26px; }
.btn--whats:hover { background: #effff5; }
.btn--whats span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.btn--whats small { font-weight: 600; font-size: .78rem; opacity: .8; }

/* Equipe em cartões */
.equipe--home { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; overflow: visible; }
.equipe--home .membro, .equipe .membro { flex: none; align-items: center; text-align: center; padding: 24px 16px 20px; border-radius: var(--r-3); background: var(--sup); border: 1px solid var(--linha); box-shadow: var(--sombra); }
.equipe .membro img, .equipe--home .membro img { width: 128px; height: 128px; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 4px var(--acento), 0 0 0 8px var(--acento-suave); }
.membro figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.membro figcaption strong, .membro h2 { font-size: .95rem; font-weight: 700; text-transform: uppercase; }
.membro figcaption span, .membro__funcao { color: var(--acento); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.equipe .membro .redes { justify-content: center; }

/* Ranking com miniatura */
.ranking__item { grid-template-columns: 44px auto minmax(0, 1fr); }
.ranking__item:not(:has(.ranking__thumb)) { grid-template-columns: 44px minmax(0, 1fr); }
.ranking__pos { font-size: 1.6rem; font-weight: 800; color: var(--acento-txt); -webkit-text-stroke: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--acento); }
.ranking li:first-child .ranking__pos { color: var(--acento-txt); background: linear-gradient(135deg, var(--acento), var(--brilho)); }
.ranking__thumb { width: 84px; }
.musicas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.historico li:first-child { border-top: 0; }
.historico li:last-child { border-bottom: 0; }

/* Aplicativos */
.faixa-apps { background: linear-gradient(120deg, color-mix(in oklab, var(--acento) 30%, var(--sup)), var(--sup) 60%); box-shadow: var(--sombra); }
.loja--web { background: var(--acento); color: var(--acento-txt); }

/* Cookies */
.cookies { left: 50%; translate: -50% 0; max-width: min(720px, calc(100% - 24px)); width: 100%; justify-content: space-between; }
.modelo-portal .cookies { bottom: 16px; }

/* Cabeçalho das páginas internas */
.cab { background: color-mix(in oklab, var(--c-base) 85%, #000); }
.cab h1 { font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.8rem); }

/* -------------------------------------------------------------------------- */
/* Telas menores                                                               */
/* -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .nav__lista > li > a, .nav__abre { padding: 8px 9px; font-size: .9rem; }
  .so-desktop { display: none; }
  .rodape__grade { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 980px) {
  :root { --topo-h: 64px; }
  .menu-mobile { display: block; }
  .nav {
    position: fixed; left: 0; right: 0; top: calc(var(--topo-h) + var(--sobe)); bottom: 0; z-index: 39;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 24px;
    padding: 20px var(--gut) calc(var(--player-h) + 24px);
    background: var(--fundo); overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s, transform .2s, visibility .2s;
  }
  .menu-aberto { overflow: hidden; }
  .menu-aberto .nav { opacity: 1; visibility: visible; transform: none; }
  .nav__lista { flex-direction: column; align-items: stretch; margin: 0; gap: 0; }
  .nav__lista > li { border-bottom: 1px solid var(--linha); }
  .nav__lista > li > a, .nav__abre { width: 100%; justify-content: space-between; padding: 16px 4px; font-family: var(--f-disp); font-stretch: 112%; font-weight: 800; font-size: 1.35rem; color: var(--txt); }
  .nav__lista > li > a.ativo { color: var(--acento); }
  .nav__lista > li > a.ativo::after { display: none; }
  .nav__sub { position: static; translate: none; min-width: 0; padding: 0 0 12px; background: none; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; display: none; }
  .nav__grupo.aberto .nav__sub { display: block; }
  .nav__sub a { padding: 10px 4px; font-size: 1.02rem; }
  .nav__redes { display: flex; gap: 8px; }
  .nav__redes a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sup-2); font-size: 1.25rem; }

  .hero__grade { grid-template-columns: 1fr; }
  .kcard { order: -1; justify-self: center; --h: clamp(200px, 46vw, 300px); }
  .musicas, .conteudo--duplo { grid-template-columns: 1fr; }
  .lateral { position: static; }
  .manchetes { grid-template-columns: 1fr; grid-template-rows: none; }
  .manchete--principal { grid-row: auto; }
  .interacao--3 { --cols: 2; }
  .interacao--3 > :first-child { grid-column: 1 / -1; }
  .tempo { grid-template-columns: 1fr; }
  .modulo--com-img.modulo--imagem .modulo__caixa, .modulo--com-img.modulo--caixa .modulo__caixa { grid-template-columns: 1fr; }
  .player--retro .player__dial { display: none; }
}

@media (max-width: 720px) {
  :root { --player-h: 70px; }
  .ouvir { padding: 0 14px; height: 40px; }
  .ouvir .t-play, .ouvir .t-pause { display: none; }
  .ouvir::after { content: "Ao vivo"; }
  .marca img { height: 40px; max-width: 150px; }
  .marca__nome { display: none; }
  .kcard__aba { display: none; }
  .kcard { grid-template-columns: 40px var(--h); }
  .kcard__frente { border-radius: 0 var(--r-1) var(--r-1) 0; }
  .hero__programas { grid-template-columns: 1fr; }
  .hero__acoes { flex-direction: column; align-items: stretch; }
  .play-grande { justify-content: flex-start; }
  .hero__acoes .btn { min-height: 52px; }
  .interacao--2, .interacao--3 { --cols: 1; }
  .chat--grande .chat__corpo { grid-template-columns: 1fr; }
  .chat__usuarios { display: none; }
  .form__duplo { grid-template-columns: 1fr; }
  .faixa { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "img hora" "img txt"; row-gap: 2px; }
  .faixa__hora { grid-area: hora; padding: 0; font-size: .92rem; color: var(--txt-2); }
  .faixa__img { grid-area: img; width: 64px; height: 64px; }
  .faixa__txt { grid-area: txt; }
  .faixa .prog__selo { top: 10px; right: 12px; }
  .abas__longo { display: none; }
  .abas__curto { display: inline; }
  .tempo__dias { grid-template-columns: repeat(5, minmax(56px, 1fr)); overflow-x: auto; }
  .rodape__grade { grid-template-columns: 1fr; gap: 32px; }
  .agenda__item { grid-template-columns: 56px minmax(0, 1fr); }
  .agenda__hora { display: none; }
  .ranking__thumb { width: 72px; }

  .player__inner { gap: 12px; }
  .player .player__vol, .player__ouvintes, .player__estacao-atual { display: none; }
  .player__disco { width: 46px; height: 46px; }
  .player--vinil .player__disco { width: 50px; height: 50px; padding: 14px; }
  .player__play { width: 48px; height: 48px; }
  .player__estacoes { right: -8px; width: min(290px, calc(100vw - 24px)); }
  .player--capsula { height: 64px; bottom: 10px; }
  .player--capsula .player__disco { width: 46px; height: 46px; }
  .cookies { left: 12px; right: 12px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .kcard__aba { animation: none; }
  .parceiros__faixa { animation: none; flex-wrap: wrap; width: auto; }
}

/* Portal: telas menores */
@media (max-width: 1180px) {
  .topo__redes { display: none; }
  .pp-programa { max-width: 230px; }
  .player--portal .player__ouvintes { display: none; }
}
@media (max-width: 1100px) {
  .cards-noticias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .equipe--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  :root { --topo-h: 68px; }
  .marca img { height: 48px; }
  .nav__lista > li > a, .nav__abre { text-transform: none; letter-spacing: 0; font-family: var(--f-disp); font-weight: 700; font-size: 1.15rem; }
  .nav__lista > li > a::after { display: none; }
  .nav__sub { right: auto; }
  /* No celular a barra do portal vai para o rodapé da tela */
  .player--portal { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: 74px; border-bottom: 0; border-top: 1px solid var(--linha); }
  body.modelo-portal { padding-bottom: 74px; --sobe: 0px; }
  .modelo-portal .nav { padding-bottom: 96px; }
  .modelo-portal .cookies, .modelo-portal .toast { bottom: 88px; }
  .pp-programa, .player--portal .player__vol { display: none; }
  .player--portal .player__estacoes { top: auto; bottom: calc(100% + 12px); }
  .musicas { grid-template-columns: 1fr; }
  .videos--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pp-play { width: 52px; height: 52px; font-size: 1.35rem; box-shadow: 0 0 0 4px var(--acento-suave); }
  .pp-capa { width: 46px; height: 46px; }
  .pp-rede__txt { display: none; }
  .pp-rede__btn { padding: 4px; }
  .pp-rede__btn .ti { display: none; }
  .player--portal .player__inner { gap: 12px; }
  .cards-noticias, .videos--home { grid-template-columns: 1fr; }
  .equipe--home { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .equipe .membro img, .equipe--home .membro img { width: 96px; height: 96px; }
  .grade-prog { display: flex; overflow-x: auto; padding-bottom: 8px; }
  .grade-prog .card-prog { flex: 0 0 78%; }
  .rodape__grade { grid-template-columns: 1fr 1fr; }
  .rodape__marca { grid-column: 1 / -1; }
  .whats { text-align: center; justify-content: center; }
  .btn--whats { width: 100%; }
}
body:not(.modelo-portal) .topo { position: sticky; top: var(--sobe); }
@media (max-width: 980px) { .topo { position: sticky !important; top: 0 !important; } }

/* Primeiro bloco logo abaixo da barra do portal */
#app > .secao:first-child { padding-top: clamp(24px, 3vw, 36px); }
#app > .secao--slides.slides--cheia:first-child { padding-top: 0; }
.topo__acoes { margin-left: auto; }
.pp-musica__acao { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) {
  .slide__texto { padding: 14px 16px; gap: 6px; }
  .slide__texto h2 { font-size: 1.05rem; }
  .slide__texto p { display: none; }
  .slide__texto .btn { min-height: 36px; padding: 0 14px; font-size: .8rem; }
  .pp-musica__acao { font-size: .64rem; }
}