/* ═══════════════════════════════════════════════════════════
   RÁDIO INTERATIVA FM 101,7 · Avaré / SP
   "A Número 1" · laranja da marca dominante, azul secundário.
   Versão refinada: pesos menores, cantos contidos, menos ruído.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* marca */
  --orange:       #FF4200;
  --orange-600:   #E63A00;
  --orange-700:   #C43100;
  --orange-100:   #FFE4D9;
  --orange-050:   #FFF5F1;

  --navy:         #292B62;
  --navy-800:     #1F2150;
  --navy-100:     #E4E5EF;
  --navy-050:     #F3F3F8;

  /* superfícies */
  --paper:        #FFFFFF;
  --paper-warm:   #FBF9F7;
  --line:         #E8E5E2;
  --line-white:   rgba(255,255,255,.26);

  /* texto */
  --ink:          #1C1D3A;
  --muted:        #6E7192;
  --muted-light:  rgba(255,255,255,.80);

  /* sombras neutras e discretas */
  --sh-sm:        0 1px 3px rgba(28,29,58,.06);
  --sh:           0 10px 30px -14px rgba(28,29,58,.22);

  /* layout */
  --shell:        1200px;
  --pad:          clamp(20px, 5vw, 44px);
  --r-sm:         8px;
  --r:            12px;
  --r-lg:         16px;
  --r-xl:         20px;

  --f-display:    'Outfit', system-ui, -apple-system, sans-serif;
  --f-body:       'Inter', system-ui, -apple-system, sans-serif;

  --e-out:        cubic-bezier(.2,1,.35,1);
  --e-io:         cubic-bezier(.65,0,.35,1);

  --nav-h:        86px;
}

/* ─── Reset ──────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--paper);
  color:var(--muted);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'kern' 1, 'liga' 1;
}

/* números sempre alinhados na vertical */
.stat b, .ad__metrics b, .chart__pos,
.player__freq, .frame__cap b{ font-variant-numeric:tabular-nums; }
body.is-locked{ overflow:hidden; }

img,svg,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button,input{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; }
address{ font-style:normal; }

::selection{ background:var(--orange); color:#fff; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; border-radius:3px; }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--navy-050); }
::-webkit-scrollbar-thumb{ background:var(--orange); border-radius:20px; border:3px solid var(--navy-050); }

/* ─── Layout ─────────────────────────────────────────────── */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.section{ position:relative; padding-block:clamp(72px,8.5vw,124px); }

/* ─── Tipografia ─────────────────────────────────────────── */
.h2{
  font-family:var(--f-display);
  font-size:clamp(1.85rem,4vw,3rem);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.028em;
  color:var(--navy);
}
.h2 em{ font-style:normal; color:var(--orange); }
.h2--light{ color:#fff; }
.section--hits .h2 em{ color:var(--orange); }
.section--ad   .h2 em{ color:var(--navy); }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.65em;
  font-family:var(--f-display);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:14px;
  gap:0;
}
/* O tracinho decorativo que vinha antes de cada rotulo foi removido
   a pedido do cliente: ele nao quer traco nenhum no site, nem como
   enfeite. O `gap` do flex some junto, senao sobra um vao antes da
   primeira letra. */
.eyebrow--light{ color:#fff; }

.lead{
  font-size:1.02rem;
  color:var(--muted);
  line-height:1.72;
}
.lead strong{ color:var(--navy); font-weight:600; }
.lead--light{ color:var(--muted-light); }
.lead--light strong{ color:#fff; }

.head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(24px,4vw,64px);
  margin-bottom:clamp(38px,4.5vw,58px);
  flex-wrap:wrap;
}
.head__aside{ max-width:360px; color:var(--muted); font-size:.95rem; }
.head__aside--light{ color:var(--muted-light); }

/* ─── Botões ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  padding:.88em 1.5em;
  border-radius:100px;
  font-family:var(--f-display);
  font-size:.93rem;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  border:1.5px solid transparent;
  transition:transform .3s var(--e-out), background .22s, color .22s, border-color .22s;
}
.btn__ico{ width:1.05em; height:1.05em; fill:currentColor; flex:none; }
.btn:hover{ transform:translateY(-2px); }

.btn--live{ background:var(--orange); color:#fff; }
.btn--live:hover{ background:var(--orange-600); }

.btn--outline{ border-color:var(--navy-100); color:var(--navy); }
.btn--outline:hover{ border-color:var(--orange); color:var(--orange); }

.btn--white{ background:#fff; color:var(--orange); }
.btn--white:hover{ background:var(--navy); color:#fff; }

.btn--outline-white{ border-color:var(--line-white); color:#fff; }
.btn--outline-white:hover{ border-color:#fff; background:#fff; color:var(--orange); }

.ico-pause{ display:none; }
body.is-playing .ico-play{ display:none; }
body.is-playing .ico-pause{ display:block; }

/* ─── Progresso ──────────────────────────────────────────── */
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:120; pointer-events:none; }
.scroll-progress span{ display:block; height:100%; width:0; background:var(--orange); }

/* ─── Header ─────────────────────────────────────────────── */
.nav{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s;
}
.nav.is-stuck{ box-shadow:var(--sh-sm); }

.nav__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:var(--nav-h);
}

.nav__brand{ display:flex; align-items:center; flex:none; margin-right:clamp(8px,2.5vw,40px); }
.nav__logo{ height:clamp(40px,4vw,50px); width:auto; }
.nav__slogan{
  padding:.4em .75em;
  border-radius:100px;
  background:var(--orange-050);
  border:1px solid var(--orange-100);
  color:var(--orange);
  font-family:var(--f-display);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1;
  white-space:nowrap;
}

.nav__links{ display:flex; align-items:center; gap:clamp(6px,1.2vw,14px); }
/* nove itens nao cabem em 1360 com o tamanho cheio; em vez de
   deixar o menu quebrar em duas linhas, aperta tipo e espaco
   so onde falta largura */
@media (max-width:1460px){
  .nav__links{ gap:4px; }
  .nav__links a{ font-size:.86rem; padding:.5em .22em; }
}
.nav__links a{
  position:relative;
  padding:.5em .3em;
  white-space:nowrap;
  font-family:var(--f-display);
  font-size:.93rem;
  font-weight:500;
  color:var(--muted);
  transition:color .22s;
}
.nav__links a::after{
  content:'';
  position:absolute;
  left:.3em; right:.3em; bottom:.15em;
  height:2px;
  background:var(--orange);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s var(--e-out);
}
.nav__links a:hover{ color:var(--navy); }
.nav__links a:hover::after,
.nav__links a.is-current::after{ transform:scaleX(1); }
.nav__links a.is-current{ color:var(--navy); }

.nav__side{ display:flex; align-items:center; gap:12px; flex:none; }

.nav__burger{
  display:none;
  width:44px; height:44px;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  place-content:center;
  gap:5px;
  padding:0 12px;
}
.nav__burger i{
  display:block;
  height:2px;
  background:var(--navy);
  transition:transform .3s var(--e-out), opacity .22s, width .3s var(--e-out);
}
.nav__burger i:nth-child(1){ width:20px }
.nav__burger i:nth-child(2){ width:14px }
.nav__burger i:nth-child(3){ width:20px }
.nav__burger.is-open i:nth-child(1){ transform:translateY(7px) rotate(45deg); width:20px }
.nav__burger.is-open i:nth-child(2){ opacity:0 }
.nav__burger.is-open i:nth-child(3){ transform:translateY(-7px) rotate(-45deg); width:20px }

/* ═══════════════════════════════════════════════════════════
   Bloco ao vivo · laranja, logo abaixo do menu
   ═══════════════════════════════════════════════════════════ */
.live{
  position:relative;
  background:var(--orange);
  color:#fff;
  /* Respiro menor desde que o player saiu daqui. Com tudo empilhado em
     uma coluna só, o que antes era folga virou empurrão: os botões
     caíam abaixo da dobra em 1360x768. */
  padding-top:0;
  overflow:hidden;
}
/* Marca d'água: o símbolo ladrilhado, igual à peça da emissora, que
   usa o mesmo recurso sobre o azul. Opacidade baixa o bastante para
   dar textura sem virar padrão decorativo. */
.live__deco{
  position:absolute;
  inset:0;
  z-index:1;
  background-image:url('../img/logo/simbolo-branco.png');
  background-repeat:repeat;
  background-size:clamp(66px, 7vw, 104px) auto;
  background-position:center top;
  opacity:.055;
  pointer-events:none;
}

.live > .shell{ position:relative; z-index:2; text-align:center; }
.live > .shell .live__eyebrow{ justify-content:center; }
.live .live__cta{ justify-content:center; margin-bottom:clamp(10px,1.6vw,20px); }

.live__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--f-display);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted-light);
  margin-bottom:18px;
}
/* fio antes do rótulo, mesma gramática do .eyebrow das outras seções.
   O ponto piscante sai daqui: quem sinaliza "ao vivo" é o selo do player. */

.live__dot{ display:none; }
@keyframes blink{ 50%{ opacity:.25 } }

.live__title{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.14em;
  font-family:var(--f-display);
  font-size:clamp(2.6rem,6.4vw,4.6rem);
  font-weight:700;
  line-height:.98;
  letter-spacing:-.038em;
  color:#fff;
  margin-bottom:20px;
}
/* o "1" fecha o slogan: círculo branco, numeral laranja,
   ecoando o símbolo da marca sem abrir mão da leitura */
.live__one{
  display:inline-grid;
  place-items:center;
  width:1.04em; height:1.04em;
  border-radius:50%;
  background:#fff;
  color:var(--orange);
  font-weight:700;
  line-height:1;
  padding-bottom:.05em;
  flex:none;
}

.live__lead{
  max-width:430px;
  font-size:1.02rem;
  color:var(--muted-light);
  margin-bottom:30px;
}

.live__cta{ display:flex; gap:12px; flex-wrap:wrap; }

/* player */
.player{
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--navy-800);
}
.player__screen{
  position:relative;
  aspect-ratio:16/9;
  background:#0F1124;
}
.player__video{ width:100%; height:100%; object-fit:contain; background:#0F1124; }

.player__cover{
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:15px;
  background:var(--navy-800);
  transition:opacity .45s var(--e-out), visibility .45s;
}
.player__cover.is-hidden{ opacity:0; visibility:hidden; }
.player__cover::before{
  content:'';
  position:absolute;
  inset:0;
  background:url('../img/logo/interativa-simbolo.png') center/min(28%,130px) no-repeat;
  opacity:.10;
}
.player__cover > *{ position:relative; z-index:2; }

.player__play{
  width:72px; height:72px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--orange);
  transition:transform .3s var(--e-out), background .22s;
}
.player__play:hover{ transform:scale(1.05); background:#fff; }
.player__play svg{ width:26px; height:26px; fill:#fff; margin-left:4px; transition:fill .22s; }
.player__play:hover svg{ fill:var(--orange); }

.player__hint{
  font-family:var(--f-display);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
}

.player__badge{
  position:absolute;
  top:14px; left:14px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:.36em .75em;
  border-radius:100px;
  background:var(--orange);
  font-family:var(--f-display);
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.14em;
  color:#fff;
  z-index:3;
}
.player__badge i{
  width:5px; height:5px;
  border-radius:50%;
  background:#fff;
  animation:blink 1.6s var(--e-io) infinite;
}

.player__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:13px 18px;
  background:#fff;
}
.player__now{ display:flex; align-items:baseline; gap:9px; min-width:0; }
.player__now-label{
  font-family:var(--f-display);
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--orange);
  flex:none;
}
.player__now b{
  font-family:var(--f-display);
  font-size:.98rem;
  font-weight:600;
  color:var(--navy);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.player__freq{
  font-family:var(--f-display);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--navy);
  flex:none;
}

/* números: grade com fios verticais, alinhados no topo */
.live__stats{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:clamp(40px,5vw,64px);
  padding-bottom:clamp(64px,7.5vw,104px);
  border-top:1px solid var(--line-white);
}
.stat{
  display:grid;
  gap:4px;
  padding:22px clamp(16px,2vw,28px) 0 0;
}
.stat + .stat{
  padding-left:clamp(16px,2vw,28px);
  border-left:1px solid var(--line-white);
}
.stat b{
  font-family:var(--f-display);
  font-size:clamp(1.45rem,2.7vw,2rem);
  font-weight:700;
  letter-spacing:-.028em;
  line-height:1;
  color:#fff;
}
.stat span{
  font-family:var(--f-display);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted-light);
  line-height:1.4;
}

/* a onda encosta na base sem cortar seco */
.live__wave{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:2;
  width:100%;
  height:clamp(48px,6vw,84px);
  pointer-events:none;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}

/* ─── Ticker (discreto) ──────────────────────────────────── */
.ticker{
  overflow:hidden;
  padding-block:13px;
  background:var(--navy);
}
.ticker__track{
  display:flex;
  align-items:center;
  gap:22px;
  width:max-content;
  animation:tick 52s linear infinite;
}
.ticker__track span{
  font-family:var(--f-display);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
  white-space:nowrap;
}
.ticker__track i{
  width:4px; height:4px;
  border-radius:50%;
  background:var(--orange);
  flex:none;
}
@keyframes tick{ to{ transform:translateX(-50%) } }

/* ─── A Rádio ────────────────────────────────────────────── */
.section--radio{ background:var(--paper); }

.split{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  align-items:start;
  gap:clamp(36px,5.5vw,72px);
}
.split__media{ position:relative; padding-top:6px; }

.frame{
  aspect-ratio:5/4;
  display:grid;
  place-items:center;
  padding:clamp(28px,4vw,48px);
  border-radius:var(--r-lg);
  background:var(--orange-050);
}
.frame__logo{ width:min(100%,220px); }

/* a frequência virou legenda embaixo, não mais um selo em cima da arte */
.frame__cap{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.frame__cap b{
  font-family:var(--f-display);
  font-size:.95rem;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--navy);
}
.frame__cap span{
  font-family:var(--f-display);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--orange);
}

.split__copy .h2{ margin-bottom:20px; }
.split__copy p + p{ margin-top:15px; }
.split__copy p{ color:var(--muted); }
.split__copy p strong{ color:var(--navy); font-weight:600; }

.pillars{ margin-top:34px; border-top:1px solid var(--line); }
.pillars li{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:20px 0;
  border-bottom:1px solid var(--line);
  transition:padding-left .3s var(--e-out);
}
.pillars li:hover{ padding-left:8px; }
.pillars__ico{
  flex:none;
  width:38px; height:38px;
  display:grid;
  place-items:center;
  border-radius:var(--r-sm);
  background:var(--orange-050);
  border:1px solid var(--orange-100);
}
.pillars__ico svg{ width:18px; height:18px; fill:var(--orange); }
.pillars li b{
  display:block;
  font-family:var(--f-display);
  font-size:1.02rem;
  font-weight:600;
  color:var(--navy);
  margin-bottom:2px;
}
.pillars li span{ font-size:.92rem; color:var(--muted); line-height:1.55; }

/* ─── Programação ────────────────────────────────────────── */
.section--grade{ background:var(--paper-warm); border-block:1px solid var(--line); }

.shows{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));
  gap:clamp(18px,2.4vw,26px);
}

.show{
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:var(--r-lg);
  background:var(--paper);
  border:1px solid var(--line);
  overflow:hidden;
  transition:transform .4s var(--e-out), border-color .25s;
}
.show:hover{ transform:translateY(-4px); border-color:var(--navy-100); }

.show__art{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--navy-050);
  flex:none;
}
.show__art img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s var(--e-out);
}
.show:hover .show__art img{ transform:scale(1.04); }

.show__body{ padding:20px 22px 24px; flex:1; }
.show__time{
  display:inline-block;
  font-family:var(--f-display);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--orange);
  margin-bottom:7px;
}
.show__body h3{
  font-family:var(--f-display);
  font-size:1.22rem;
  font-weight:600;
  letter-spacing:-.018em;
  color:var(--navy);
  line-height:1.18;
  margin-bottom:7px;
}
.show__body p{ font-size:.91rem; color:var(--muted); line-height:1.55; }

.show__onair{
  position:absolute;
  top:12px; right:12px;
  display:none;
  align-items:center;
  gap:6px;
  padding:.34em .72em;
  border-radius:100px;
  background:var(--orange);
  font-family:var(--f-display);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#fff;
  z-index:2;
}
.show__onair::before{
  content:'';
  width:5px; height:5px;
  border-radius:50%;
  background:#fff;
  animation:blink 1.6s var(--e-io) infinite;
}
.show.is-onair{ border-color:var(--orange); }
.show.is-onair .show__onair{ display:inline-flex; }

/* ─── Top Hits (faixa azul) ──────────────────────────────── */
.section--hits{ background:var(--navy); }

.chart{ border-top:1px solid rgba(255,255,255,.14); }

.chart__row{
  display:grid;
  grid-template-columns:2.2em 62px minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(16px,2.4vw,28px);
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.14);
  transition:padding-left .32s var(--e-out);
}
.chart__row:hover{ padding-left:10px; }

.chart__pos{
  font-family:var(--f-display);
  font-size:.98rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--orange);
  text-align:left;
}

.chart__art{
  width:62px; height:62px;
  border-radius:var(--r-sm);
  overflow:hidden;
  background:var(--navy-800);
  flex:none;
}
.chart__art img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .5s var(--e-out);
}
.chart__row:hover .chart__art img{ transform:scale(1.06); }

.chart__info h3{
  font-family:var(--f-display);
  font-size:1.08rem;
  font-weight:600;
  letter-spacing:-.015em;
  color:#fff;
  line-height:1.24;
}
.chart__info span{ font-size:.9rem; color:var(--muted-light); }

.chart__eq{ display:none; }   /* equalizador decorativo removido */

/* ─── interNews ──────────────────────────────────────────── */
/* interNews subiu para logo depois do ticker. Como A Rádio também é
   branca, esta assume o bege e a alternância volta a funcionar:
   azul (ticker) > bege > branco > bege > azul > laranja */
.section--news{ background:var(--paper-warm); border-block:1px solid var(--line); }

.news{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(20px,2.6vw,30px);
}

.news__lead,
.news__card{
  display:flex;
  flex-direction:column;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--paper);
  border:1px solid var(--line);
  transition:transform .4s var(--e-out), border-color .25s;
}
.news__lead:hover,
.news__card:hover{ transform:translateY(-4px); border-color:var(--orange); }

.news__img{ position:relative; overflow:hidden; background:var(--navy-050); flex:none; }
.news__lead .news__img{ aspect-ratio:16/10; }
.news__card .news__img{ aspect-ratio:16/9; }
.news__img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .7s var(--e-out);
}
.news__lead:hover .news__img img,
.news__card:hover .news__img img{ transform:scale(1.04); }

.news__body{ padding:22px clamp(20px,2.2vw,26px) 26px; flex:1; }
.news__card .news__body{ padding:17px 19px 21px; }

.news__lead h3{
  font-family:var(--f-display);
  font-size:clamp(1.2rem,2.1vw,1.55rem);
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.022em;
  color:var(--navy);
  margin-bottom:11px;
}
.news__lead p{ font-size:.94rem; color:var(--muted); line-height:1.6; }
.news__card h3{
  font-family:var(--f-display);
  font-size:.98rem;
  font-weight:600;
  line-height:1.32;
  letter-spacing:-.012em;
  color:var(--navy);
}

.chip{
  display:inline-block;
  font-family:var(--f-display);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:9px;
}

.news__more{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:16px;
  font-family:var(--f-display);
  font-size:.88rem;
  font-weight:600;
  color:var(--orange);
}
.news__more svg{ width:15px; height:15px; fill:var(--orange); transition:transform .3s var(--e-out); }
.news__lead:hover .news__more svg{ transform:translateX(5px); }

/* as quatro chamadas dividem a altura da matéria principal em partes iguais */
.news__side{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:1fr;
  gap:clamp(14px,1.8vw,20px);
}

/* ─── Anuncie (faixa laranja) ────────────────────────────── */
.section--ad{ background:var(--orange); }

.ad{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:center;
  gap:clamp(36px,5.5vw,76px);
}
.ad__copy .h2{ margin-bottom:18px; }

.ad__metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-block:32px;
  padding-block:24px;
  border-block:1px solid var(--line-white);
}
.ad__metrics b{
  display:block;
  font-family:var(--f-display);
  font-size:clamp(1.5rem,3vw,2.1rem);
  font-weight:700;
  letter-spacing:-.028em;
  color:#fff;
  font-variant-numeric:tabular-nums;
  line-height:1;
  margin-bottom:5px;
}
.ad__metrics span{ font-size:.8rem; color:var(--muted-light); }

.ad__actions{ display:flex; gap:12px; flex-wrap:wrap; }

.ad__visual{ display:grid; place-items:center; }
.adnum{
  display:grid;
  justify-items:center;
  gap:0;
  padding:clamp(30px,3.6vw,42px) clamp(26px,3vw,36px);
  border-radius:var(--r-lg);
  background:#fff;
  width:min(100%,300px);
}
.adnum img{ width:min(52%,132px); margin-bottom:22px; }
.adnum span{
  width:100%;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-family:var(--f-display);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--navy);
  text-align:center;
}

/* ─── Footer ─────────────────────────────────────────────── */
.foot{
  background:var(--paper-warm);
  border-top:1px solid var(--line);
  padding-top:clamp(52px,6vw,84px);
  padding-bottom:calc(80px + env(safe-area-inset-bottom));
}

.foot__top{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.2fr);
  gap:clamp(28px,4.5vw,60px);
  padding-bottom:clamp(32px,4vw,50px);
  border-bottom:1px solid var(--line);
}

.foot__brand img{ width:min(100%,270px); margin-bottom:18px; }
.foot__brand p{ font-size:.94rem; color:var(--muted); max-width:300px; margin-bottom:20px; }

.foot__social{ display:flex; gap:9px; }
.foot__social a{
  width:42px; height:42px;
  display:grid;
  place-items:center;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  transition:transform .3s var(--e-out), background .22s, border-color .22s;
}
.foot__social a:hover{ transform:translateY(-3px); background:var(--orange); border-color:var(--orange); }
.foot__social svg{ width:18px; height:18px; fill:var(--navy); transition:fill .22s; }
.foot__social a:hover svg{ fill:#fff; }

.foot__col{ display:grid; align-content:start; gap:9px; }
.foot__col h4{
  font-family:var(--f-display);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:6px;
}
.foot__col a{
  font-size:.94rem;
  color:var(--muted);
  width:fit-content;
  transition:color .22s;
}
.foot__col a:hover{ color:var(--orange); }
.foot__col address{ font-size:.94rem; color:var(--muted); line-height:1.75; }
.foot__link{ margin-top:6px; color:var(--navy) !important; font-weight:600; }

.foot__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  padding-top:22px;
  font-size:.84rem;
  color:var(--muted);
}
.foot__bottom a{ color:var(--orange); font-weight:600; }

/* ─── Dock ───────────────────────────────────────────────── */
.dock{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:95;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  transform:translateY(115%);
  transition:transform .5s var(--e-out);
  padding-bottom:env(safe-area-inset-bottom);
}
.dock.is-visible{ transform:translateY(0); }

.dock__inner{
  max-width:var(--shell);
  margin-inline:auto;
  display:flex;
  align-items:center;
  gap:clamp(12px,2vw,20px);
  padding:11px var(--pad);
}

.dock__play{
  position:relative;
  width:42px; height:42px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--orange);
  transition:background .22s;
}
.dock__play:hover{ background:var(--orange-600); }
.dock__play svg{ width:16px; height:16px; fill:#fff; }
.dock__play .ico-play{ margin-left:2px; }

.dock__spin{
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:2px solid transparent;
  border-top-color:var(--orange);
  opacity:0;
}
body.is-loading .dock__spin{ opacity:1; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }

.dock__meta{ display:grid; line-height:1.35; min-width:0; flex:1; }
.dock__live{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--f-display);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--orange);
}
.dock__live i{
  width:5px; height:5px;
  border-radius:50%;
  background:var(--orange);
  animation:blink 1.6s var(--e-io) infinite;
}
.dock__meta strong{
  font-family:var(--f-display);
  font-size:.93rem;
  font-weight:600;
  color:var(--navy);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.dock__eq{ display:flex; align-items:center; gap:2px; height:24px; flex:none; }
.dock__eq i{
  width:3px;
  height:4px;
  border-radius:2px;
  background:var(--orange);
  transition:height .09s linear;
}

.dock__vol{ display:flex; align-items:center; gap:9px; flex:none; }
.dock__mute{ width:32px; height:32px; display:grid; place-items:center; border-radius:var(--r-sm); transition:background .22s; }
.dock__mute:hover{ background:var(--navy-050); }
.dock__mute svg{ width:18px; height:18px; fill:var(--muted); }
.dock__mute .ico-muted{ display:none; }
body.is-muted .dock__mute .ico-vol{ display:none; }
body.is-muted .dock__mute .ico-muted{ display:block; fill:var(--orange); }

#dockVolume{
  -webkit-appearance:none;
  appearance:none;
  width:84px;
  height:3px;
  border-radius:3px;
  background:linear-gradient(90deg,var(--orange) var(--vol,85%),var(--line) var(--vol,85%));
  cursor:pointer;
}
#dockVolume::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:12px; height:12px;
  border-radius:50%;
  background:var(--orange);
}
#dockVolume::-moz-range-thumb{
  width:12px; height:12px; border:0;
  border-radius:50%;
  background:var(--orange);
}

.dock__tv{
  display:flex;
  align-items:center;
  gap:7px;
  padding:.56em 1em;
  border-radius:100px;
  border:1px solid var(--line);
  font-family:var(--f-display);
  font-size:.83rem;
  font-weight:600;
  color:var(--navy);
  flex:none;
  transition:border-color .22s, color .22s;
}
.dock__tv:hover{ border-color:var(--orange); color:var(--orange); }
.dock__tv svg{ width:16px; height:16px; fill:currentColor; }

/* ─── Reveal ─────────────────────────────────────────────── */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .75s var(--e-out), transform .75s var(--e-out);
  transition-delay:calc(var(--d,0) * 75ms);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ─── Responsivo ─────────────────────────────────────────── */
@media (max-width:1080px){
  .nav__links{ display:none; }
  .nav__burger{ display:grid; }
  .nav__slogan{ display:none; }

  .live__lead{ max-width:none; }

  .split{ grid-template-columns:1fr; }
  .split__media{ max-width:360px; margin-inline:auto; }

  .news{ grid-template-columns:1fr; }

  .ad{ grid-template-columns:1fr; }
  .ad__visual{ order:-1; }
  .adnum{ width:min(100%,240px); }

  .foot__top{ grid-template-columns:1fr 1fr; }
  .foot__brand{ grid-column:1/-1; }

  .nav__links.is-open{
    display:flex;
    position:fixed;
    inset:var(--nav-h) 0 0;
    z-index:99;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:2px;
    padding:0 var(--pad);
    background:var(--paper);
  }
  .nav__links.is-open a{
    font-family:var(--f-display);
    font-size:clamp(1.6rem,6vw,2.3rem);
    font-weight:600;
    letter-spacing:-.028em;
    color:var(--navy);
    padding:.26em 0;
    opacity:0;
    transform:translateY(16px);
    animation:menuIn .45s var(--e-out) forwards;
  }
  .nav__links.is-open a::after{ left:0; right:auto; width:38px; bottom:.14em; }
  .nav__links.is-open a:nth-child(1){ animation-delay:.04s }
  .nav__links.is-open a:nth-child(2){ animation-delay:.08s }
  .nav__links.is-open a:nth-child(3){ animation-delay:.12s }
  .nav__links.is-open a:nth-child(4){ animation-delay:.16s }
  .nav__links.is-open a:nth-child(5){ animation-delay:.20s }
  .nav__links.is-open a:nth-child(6){ animation-delay:.24s }
  .nav__links.is-open a:nth-child(7){ animation-delay:.28s }
  .nav__links.is-open a:nth-child(8){ animation-delay:.32s }
  .nav__links.is-open a:nth-child(9){ animation-delay:.36s }
  @keyframes menuIn{ to{ opacity:1; transform:none } }
}

@media (max-width:760px){
  .live{ padding-top:0; }
  .live__cta .btn{ width:100%; }

  /* em duas colunas o fio vertical só vale entre a coluna 1 e a 2;
     a segunda linha ganha fio horizontal em vez disso */
  .live__stats{ grid-template-columns:repeat(2,1fr); }
  .stat{ padding:18px 14px 0 0; }
  .stat:nth-child(odd){ padding-left:0; border-left:0; }
  .stat:nth-child(even){ padding-left:14px; border-left:1px solid var(--line-white); }
  .stat:nth-child(n+3){ margin-top:18px; border-top:1px solid var(--line-white); }

  .btn--live span{ display:none; }
  .btn--live{ padding:.8em; width:44px; height:44px; }

  .news__side{ grid-template-columns:1fr; }

  .chart__row{
    grid-template-columns:auto 54px minmax(0,1fr);
    gap:14px;
    padding:14px 0;
  }
  .chart__art{ width:54px; height:54px; }

  .frame__badge{ right:0; bottom:14px; padding:11px 16px; }
  .frame__badge b{ font-size:1.24rem; }

  .ad__metrics{ grid-template-columns:1fr; gap:14px; }
  .ad__actions .btn{ width:100%; }

  .foot__top{ grid-template-columns:1fr; }
  .foot__bottom{ flex-direction:column; align-items:flex-start; gap:8px; }

  .dock__vol, .dock__tv, .dock__eq{ display: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;
  }
  .reveal{ opacity:1; transform:none; }
}

@media print{
  .nav,.dock,.scroll-progress,.ticker,.live__wave{ display:none !important; }
  body{ background:#fff; color:#000; }
}

/* ═══════════════════════════════════════════════════════════
   Foto real na seção A Rádio
   ═══════════════════════════════════════════════════════════ */
.frame--photo{
  padding:0;
  background:var(--navy-050);
  overflow:hidden;
}
.frame__photo{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s var(--e-out);
}
.frame--photo:hover .frame__photo{ transform:scale(1.03); }

/* nota abaixo dos botões do Anuncie */
.ad__note{
  margin-top:14px;
  font-size:.85rem;
  color:var(--muted-light);
}

/* coração do rodapé */
.foot__cred .heart{ font-style:normal; color:var(--orange); }

/* ═══════════════════════════════════════════════════════════
   Capa das páginas internas
   ═══════════════════════════════════════════════════════════ */
.pagehead{
  padding-block:clamp(44px,5.5vw,76px) clamp(40px,5vw,64px);
  border-bottom:1px solid var(--line);
}
.pagehead--accent{
  background:var(--orange);
  border-bottom:0;
  color:#fff;
}

.crumb{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--f-display);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:20px;
}
.crumb a{ color:var(--orange); transition:opacity .2s; }
.crumb a:hover{ opacity:.7; }
.crumb span{ opacity:.45; }
.crumb b{ font-weight:600; color:var(--navy); }
.crumb--light{ color:var(--muted-light); }
.crumb--light a,
.crumb--light b{ color:#fff; }

.pagehead__title{
  font-family:var(--f-display);
  font-size:clamp(2.3rem,5.4vw,3.9rem);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.035em;
  color:var(--navy);
  margin-bottom:18px;
}
.pagehead__title span{ color:var(--orange); }
.pagehead__title--light{ color:#fff; }
.pagehead__title--light span{ color:var(--navy); }

.pagehead__lead{
  max-width:560px;
  font-size:1.04rem;
  color:var(--muted);
  line-height:1.7;
}
.pagehead__lead--light{ color:var(--muted-light); }

.pagehead__facts{
  display:flex;
  flex-wrap:wrap;
  margin-top:32px;
  border-top:1px solid var(--line);
}
.pagehead__facts > div{
  padding:18px 32px 0 0;
  margin-right:32px;
  border-right:1px solid var(--line);
}
.pagehead__facts > div:last-child{ border-right:0; margin-right:0; }
.pagehead__facts dt{
  font-family:var(--f-display);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:5px;
}
.pagehead__facts dd{
  font-family:var(--f-display);
  font-size:1.3rem;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--navy);
  line-height:1;
}

.pagehead__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }

/* ═══════════════════════════════════════════════════════════
   Equipe
   ═══════════════════════════════════════════════════════════ */
.section--team{ padding-block:clamp(56px,6.5vw,92px); }
.section--alt{ background:var(--paper-warm); border-block:1px solid var(--line); }

.teamhead{ margin-bottom:clamp(30px,3.5vw,44px); }

.team{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));
  gap:clamp(20px,2.6vw,30px);
}
/* grid largo (direção, administrativo): card deitado, foto ao lado
   do texto, para a imagem 1:1 não dominar a linha inteira */
/* min() para o track nunca ficar mais largo que a tela */
.team--wide{ grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr)); }
.team--wide .member{ flex-direction:row; }
.team--wide .member__photo{ width:42%; max-width:230px; aspect-ratio:4/5; }
.team--wide .member__body{ display:flex; flex-direction:column; justify-content:center; }

.member{
  display:flex;
  flex-direction:column;
  border-radius:var(--r-lg);
  background:var(--paper);
  border:1px solid var(--line);
  overflow:hidden;
  transition:transform .4s var(--e-out), border-color .25s;
}
.member:hover{ transform:translateY(-4px); border-color:var(--orange); }

.member__photo{
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--navy-050);
  flex:none;
}
.member__photo img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center top;
  transition:transform .6s var(--e-out);
}
.member:hover .member__photo img{ transform:scale(1.04); }

.member__body{ padding:20px 22px 24px; flex:1; }
.member__role{
  display:block;
  font-family:var(--f-display);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:7px;
}
.member__body h3{
  font-family:var(--f-display);
  font-size:1.2rem;
  font-weight:600;
  letter-spacing:-.018em;
  color:var(--navy);
  line-height:1.18;
  margin-bottom:8px;
}
.member__body p{ font-size:.9rem; color:var(--muted); line-height:1.6; }

/* card "faça parte" */
.joinus{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:12px;
  padding:clamp(26px,3.4vw,38px);
  border-radius:var(--r-lg);
  background:var(--orange-050);
  border:1px solid var(--orange-100);
}
.joinus .eyebrow{ margin-bottom:6px; }
.joinus h3{
  font-family:var(--f-display);
  font-size:clamp(1.4rem,2.4vw,1.8rem);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.025em;
  color:var(--navy);
}
.joinus p{ font-size:.94rem; color:var(--muted); }
.joinus .btn{ align-self:flex-start; margin-top:6px; }
.btn--solid{ background:var(--orange); color:#fff; }
.btn--solid:hover{ background:var(--orange-600); }

/* ═══════════════════════════════════════════════════════════
   Chamada Anuncie das páginas internas
   ═══════════════════════════════════════════════════════════ */
.adcall{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(26px,4vw,60px);
  flex-wrap:wrap;
}
.adcall__actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* ═══════════════════════════════════════════════════════════
   Promoções
   ═══════════════════════════════════════════════════════════ */
.promos{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,26px);
}
.promos:empty + .promos__empty{ display:block; }

.promo{
  display:flex;
  flex-direction:column;
  border-radius:var(--r-lg);
  background:var(--paper);
  border:1px solid var(--line);
  overflow:hidden;
  transition:transform .4s var(--e-out), border-color .25s;
}
.promo:hover{ transform:translateY(-4px); border-color:var(--orange); }
.promo--feature{ grid-column:span 3; }

.promo__img{
  position:relative;
  aspect-ratio:16/9;
  display:grid;
  place-items:center;
  background:var(--navy-050);
  overflow:hidden;
  flex:none;
}
.promo--feature .promo__img{ aspect-ratio:21/8; }
.promo__img img:not(.promo__ph){ width:100%; height:100%; object-fit:cover; }
/* placeholder enquanto não há arte da promoção */
.promo__ph{ width:clamp(56px,8vw,88px); opacity:.16; }

.promo__mock{
  position:absolute;
  top:12px; left:12px;
  padding:.34em .72em;
  border-radius:100px;
  background:var(--navy);
  font-family:var(--f-display);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
}

.promo__body{ padding:20px 22px 24px; flex:1; }
.promo__meta{
  display:block;
  font-family:var(--f-display);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:8px;
}
.promo__body h3{
  font-family:var(--f-display);
  font-size:1.22rem;
  font-weight:600;
  letter-spacing:-.018em;
  color:var(--navy);
  line-height:1.18;
  margin-bottom:8px;
}
.promo--feature .promo__body h3{ font-size:clamp(1.4rem,2.4vw,1.9rem); }
.promo__body p{ font-size:.92rem; color:var(--muted); line-height:1.6; }
.promo__how{
  display:inline-block;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--line);
  font-family:var(--f-display);
  font-size:.86rem;
  font-weight:600;
  color:var(--navy);
}

.promos__empty{
  display:none;
  padding:clamp(40px,6vw,72px);
  border-radius:var(--r-lg);
  background:var(--paper-warm);
  border:1px solid var(--line);
  text-align:center;
}
.promos__empty h3{
  font-family:var(--f-display);
  font-size:clamp(1.3rem,2.4vw,1.7rem);
  font-weight:700;
  letter-spacing:-.022em;
  color:var(--navy);
  margin-bottom:10px;
}
.promos__empty p{
  max-width:460px;
  margin:0 auto 22px;
  font-size:.96rem;
  color:var(--muted);
}

/* passos */
.steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.6vw,32px);
  border-top:1px solid var(--line);
}
.steps li{ padding-top:26px; }
.steps li + li{ border-left:1px solid var(--line); padding-left:clamp(20px,2.6vw,32px); }
.steps__n{
  display:block;
  font-family:var(--f-display);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--orange);
  margin-bottom:10px;
}
.steps h3{
  font-family:var(--f-display);
  font-size:1.14rem;
  font-weight:600;
  letter-spacing:-.018em;
  color:var(--navy);
  margin-bottom:7px;
}
.steps p{ font-size:.93rem; color:var(--muted); line-height:1.6; }

.steps__cta{
  display:flex;
  align-items:center;
  gap:clamp(18px,3vw,34px);
  flex-wrap:wrap;
  margin-top:clamp(30px,4vw,46px);
  padding-top:clamp(24px,3vw,32px);
  border-top:1px solid var(--line);
}
.steps__note{ max-width:420px; font-size:.86rem; color:var(--muted); }

/* ═══════════════════════════════════════════════════════════
   Responsivo das páginas internas
   ═══════════════════════════════════════════════════════════ */
@media (max-width:1080px){
  .promos{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .promo--feature{ grid-column:span 2; }
  .steps{ grid-template-columns:1fr; }
  .steps li + li{
    border-left:0;
    padding-left:0;
    border-top:1px solid var(--line);
  }
}

@media (max-width:760px){
  .pagehead__facts > div{
    padding-right:20px;
    margin-right:20px;
  }
  .pagehead__facts dd{ font-size:1.1rem; }
  .pagehead__cta .btn{ width:100%; }

  .promos{ grid-template-columns:1fr; }
  .promo--feature{ grid-column:span 1; }
  .promo--feature .promo__img{ aspect-ratio:16/9; }

  /* no celular o card deitado volta a empilhar */
  .team--wide .member{ flex-direction:column; }
  .team--wide .member__photo{ width:100%; max-width:none; aspect-ratio:1/1; }

  .adcall{ align-items:flex-start; }
  .adcall__actions{ width:100%; }
  .adcall__actions .btn{ width:100%; }

  .steps__cta .btn{ width:100%; }
  .joinus .btn{ align-self:stretch; }
}

/* ═══════════════════════════════════════════════════════════
   Rebobina: voltar 30 s e recortar o trecho
   ═══════════════════════════════════════════════════════════ */
.rew{ display:flex; align-items:center; gap:6px; flex:none; }
.rew[hidden]{ display:none; }

.rew__btn{
  position:relative;
  width:38px; height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid var(--line);
  color:var(--navy);
  transition:border-color .22s, color .22s, background .22s;
}
.rew__btn:hover{ border-color:var(--orange); color:var(--orange); }
.rew__btn svg{ width:19px; height:19px; fill:currentColor; }
/* o número fica dentro da seta, como nos players de vídeo */
.rew__btn b{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-38%);
  font-family:var(--f-display);
  font-size:.56rem;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1;
}
.rew__btn--clip svg{ width:15px; height:15px; }
.rew__btn.is-busy{ opacity:.5; pointer-events:none; }

/* barra que aparece quando está ouvindo a gravação */
.replay{
  display:flex;
  align-items:center;
  gap:14px;
  max-width:var(--shell);
  margin-inline:auto;
  padding:0 var(--pad) 11px;
}
.replay[hidden]{ display:none; }

.replay__tag{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:.34em .8em;
  border-radius:100px;
  background:var(--navy);
  font-family:var(--f-display);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
  flex:none;
}
.replay__tag::before{
  content:'';
  width:5px; height:5px;
  border-radius:50%;
  background:var(--orange);
}

#replaySeek{
  -webkit-appearance:none;
  appearance:none;
  flex:1;
  height:3px;
  border-radius:3px;
  background:var(--line);
  cursor:pointer;
}
#replaySeek::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:12px; height:12px;
  border-radius:50%;
  background:var(--navy);
}
#replaySeek::-moz-range-thumb{
  width:12px; height:12px; border:0;
  border-radius:50%;
  background:var(--navy);
}

.replay__time{
  font-family:var(--f-display);
  font-size:.78rem;
  font-weight:600;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  flex:none;
}
.replay__time b{ color:var(--navy); font-weight:700; }

.replay__live{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:.5em 1em;
  border-radius:100px;
  background:var(--orange);
  font-family:var(--f-display);
  font-size:.8rem;
  font-weight:600;
  color:#fff;
  flex:none;
  transition:background .22s;
}
.replay__live:hover{ background:var(--orange-600); }

/* no modo gravação o dock deixa claro que não é o ao vivo */
body.is-replay .dock__live{ color:var(--muted); }
body.is-replay .dock__live i{ background:var(--muted); animation:none; }
body.is-replay .dock__eq{ opacity:.3; }

@media (max-width:760px){
  .rew__btn{ width:34px; height:34px; }
  .replay{ gap:10px; padding-bottom:9px; }
  .replay__time{ display:none; }
  .replay__live{ padding:.45em .8em; font-size:.74rem; }
}

/* botão de corte vertical, dentro da barra do player */
.cut9x16{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:.5em 1em;
  border-radius:100px;
  border:1px solid var(--line);
  font-family:var(--f-display);
  font-size:.8rem;
  font-weight:600;
  color:var(--navy);
  white-space:nowrap;
  transition:border-color .22s, color .22s, background .22s;
}
.cut9x16[hidden]{ display:none; }
.cut9x16:hover{ border-color:var(--orange); color:var(--orange); background:var(--orange-050); }
.cut9x16 svg{ width:15px; height:15px; fill:currentColor; }
.cut9x16.is-busy{ opacity:.55; pointer-events:none; }

@media (max-width:760px){
  .cut9x16 span{ display:none; }
  .cut9x16{ padding:.5em; }
}

/* ═══════════════════════════════════════════════════════════
   Alarme de programa
   ═══════════════════════════════════════════════════════════ */
.show__act{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line);
}

.bell{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:.48em .95em;
  border-radius:100px;
  border:1px solid var(--line);
  font-family:var(--f-display);
  font-size:.8rem;
  font-weight:600;
  color:var(--navy);
  transition:border-color .22s, color .22s, background .22s;
}
.bell svg{ width:14px; height:14px; fill:currentColor; }
.bell:hover{ border-color:var(--orange); color:var(--orange); }
.bell.is-on{
  background:var(--orange);
  border-color:var(--orange);
  color:#fff;
}
.bell.is-on svg{ animation:sino .6s var(--e-out); transform-origin:50% 10%; }
@keyframes sino{
  0%,100%{ transform:rotate(0) }
  25%{ transform:rotate(12deg) }
  60%{ transform:rotate(-9deg) }
}

.ics{
  font-family:var(--f-display);
  font-size:.78rem;
  font-weight:600;
  color:var(--muted);
  padding-bottom:2px;
  border-bottom:1px solid var(--line);
  transition:color .22s, border-color .22s;
}
.ics:hover{ color:var(--orange); border-color:var(--orange); }

/* ═══════════════════════════════════════════════════════════
   Páginas de programa
   A cor vem do <body style="--cor:...">, amostrada da própria
   arte do programa. `--sobre` é a cor do texto sobre ela.
   ═══════════════════════════════════════════════════════════ */
.pghero{
  background:var(--cor);
  background-image:linear-gradient(115deg, var(--cor) 0%, var(--cor2) 100%);
  color:var(--sobre);
  padding-block:clamp(40px,5vw,72px);
}
/* duas colunas: texto e ficha à esquerda, arte à direita.
   A ficha vive num bloco separado (.pghero__meta) só para que, ao
   empilhar, a ordem fique título > arte > horário/botões, em vez de
   jogar a arte na frente de tudo. */
.pghero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:clamp(30px,5vw,64px);
  row-gap:clamp(20px,3vw,32px);
}
.pghero__copy{ grid-column:1; grid-row:1; align-self:end; }
.pghero__meta{ grid-column:1; grid-row:2; align-self:start; }
.pghero__arte{ grid-column:2; grid-row:1 / span 2; }

.pghero .crumb--light{ color:rgba(255,255,255,.75); }
.pghero .crumb--light a,
.pghero .crumb--light b{ color:var(--sobre); }

.pghero__title{
  font-family:var(--f-display);
  font-size:clamp(2.4rem,6vw,4.4rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-.04em;
  margin-bottom:14px;
}
.pghero__chamada{
  font-family:var(--f-display);
  font-size:clamp(1.05rem,1.9vw,1.4rem);
  font-weight:500;
  color:rgba(255,255,255,.9);
  max-width:420px;
  margin-bottom:26px;
}

.pghero__ficha{
  display:flex;
  flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.26);
  margin-bottom:28px;
}
.pghero__ficha > div{
  padding:16px 30px 0 0;
  margin-right:30px;
  border-right:1px solid rgba(255,255,255,.26);
}
.pghero__ficha > div:last-child{ border-right:0; margin-right:0; }
.pghero__ficha dt{
  font-family:var(--f-display);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
  margin-bottom:4px;
}
.pghero__ficha dd{
  font-family:var(--f-display);
  font-size:1.18rem;
  font-weight:700;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}

.pghero__cta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* botões sobre a cor do programa */
.btn--sobre{ background:#fff; color:var(--cor); }
.btn--sobre:hover{ background:var(--navy); color:#fff; }
.bell--sobre{ border-color:rgba(255,255,255,.4); color:var(--sobre); }
.bell--sobre:hover{ border-color:#fff; color:var(--sobre); background:rgba(255,255,255,.14); }
.bell--sobre.is-on{ background:#fff; border-color:#fff; color:var(--cor); }
.ics--sobre{ color:rgba(255,255,255,.8); border-bottom-color:rgba(255,255,255,.35); }
.ics--sobre:hover{ color:#fff; border-bottom-color:#fff; }

/* a arte costuma ser o logo sobre a mesma cor do fundo, então
   precisa de um contorno para não virar um retângulo perdido */
.pghero__arte{
  border-radius:var(--r-lg);
  overflow:hidden;
  background:rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.22);
}
.pghero__arte img{ width:100%; display:block; }

/* corpo */
.eyebrow--cor{ color:var(--cor); }

.pgsobre__grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(34px,5vw,72px);
  align-items:start;
}
.pgsobre__texto p{
  font-size:1.04rem;
  color:var(--muted);
  line-height:1.75;
}
.pgsobre__texto p + p{ margin-top:16px; }

/* quem apresenta */
.pgapres .eyebrow{ color:var(--cor); }
.pgapres__card{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  transition:border-color .22s, transform .35s var(--e-out);
}
.pgapres__card:hover{ border-color:var(--cor); transform:translateY(-3px); }
.pgapres__card img{
  width:82px; height:82px;
  object-fit:cover;
  object-position:center top;
  border-radius:var(--r);
  flex:none;
  background:var(--navy-050);
}
/* Convidado sem foto na pasta da equipe (Frei Gilson, DJ Tonhao):
   a inicial ocupa o lugar do retrato, no mesmo tamanho, em vez de
   deixar uma imagem quebrada na pagina. */
.pgapres__inicial{
  width:82px; height:82px;
  border-radius:var(--r);
  flex:none;
  display:grid;
  place-items:center;
  background:var(--cor);
  color:var(--sobre, #fff);
  font-family:var(--f-display);
  font-size:2.1rem;
  font-weight:700;
  font-style:normal;
  line-height:1;
}

/* dois apresentadores: os cartoes empilham com respiro entre eles */
.pgapres .pgapres__card + .pgapres__card{ margin-top:10px; }

.pgapres__card b{
  display:block;
  font-family:var(--f-display);
  font-size:1.08rem;
  font-weight:600;
  color:var(--navy);
}
.pgapres__card em{
  font-style:normal;
  font-family:var(--f-display);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cor);
}

/* outros programas */
.pgmais__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,26px);
}
.pgmais__card{
  display:block;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--paper);
  border:1px solid var(--line);
  transition:transform .4s var(--e-out), border-color .25s;
}
.pgmais__card:hover{ transform:translateY(-4px); border-color:var(--cor); }
.pgmais__card img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.pgmais__hora{
  display:block;
  padding:16px 18px 0;
  font-family:var(--f-display);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--cor);
}
.pgmais__card b{
  display:block;
  padding:4px 18px 18px;
  font-family:var(--f-display);
  font-size:1.14rem;
  font-weight:600;
  letter-spacing:-.018em;
  color:var(--navy);
}

@media (max-width:1080px){
  .pgsobre__grid{ grid-template-columns:1fr; }
  .pgapres__card{ max-width:420px; }

  /* três cards em duas colunas deixam um órfão, e empilhados viram uma
     rolagem longa: vira uma tira que desliza na horizontal */
  .pgmais__grid{
    display:flex;
    grid-template-columns:none;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-inline:calc(var(--pad) * -1);
    padding:2px var(--pad) 10px;
  }
  .pgmais__grid::-webkit-scrollbar{ display:none; }
  .pgmais__card{
    flex:0 0 clamp(232px,64%,300px);
    scroll-snap-align:start;
  }
}

/* empilhado: título primeiro, arte contida no meio, ficha e botões depois */
@media (max-width:860px){
  .pghero{ padding-block:clamp(26px,5vw,40px) clamp(30px,5vw,44px); }
  .pghero__grid{ grid-template-columns:1fr; grid-template-rows:auto; row-gap:22px; }
  .pghero__copy,
  .pghero__meta,
  .pghero__arte{ grid-column:1; grid-row:auto; align-self:auto; }
  /* a arte tem margem sobrando em volta do logo: no empilhado ela é
     recortada na horizontal para o logo ocupar mais do quadro */
  .pghero__arte{ width:100%; max-width:430px; aspect-ratio:2.3/1; }
  .pghero__arte img{ width:100%; height:100%; object-fit:cover; }
  .pghero__chamada{ max-width:none; }
  .pghero__ficha{ margin-bottom:22px; }
}

@media (max-width:760px){
  .pghero__ficha > div{ padding:14px 18px 0 0; margin-right:18px; }
  .pghero__ficha dd{ font-size:1.05rem; }
  .pghero__cta{ gap:10px; }
  .pghero__cta .btn{ width:100%; }
}

@media (max-width:420px){
  .pghero__arte{ max-width:none; }
}

/* ═══════════════════════════════════════════════════════════
   Cabeçalho de seção usado nas páginas internas
   (mesma gramática do .head da home)
   ═══════════════════════════════════════════════════════════ */
.sechead{ margin-bottom:clamp(38px,4.5vw,58px); }
.sechead--row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(24px,4vw,64px);
  flex-wrap:wrap;
}
.sechead--row > *{ min-width:0; }
.sechead__aside{
  max-width:360px;
  color:var(--muted);
  font-size:.95rem;
  line-height:1.65;
}

/* ═══════════════════════════════════════════════════════════
   Mapa de abrangência
   Geografia real (IBGE). As animações só rodam quando a seção
   entra na tela, via .reveal.is-in, para não gastar CPU à toa.
   ═══════════════════════════════════════════════════════════ */
.cobertura{
  --m-cor:var(--orange);
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  align-items:center;
  gap:clamp(30px,4vw,56px);
  margin-top:clamp(56px,7vw,96px);
  padding-top:clamp(40px,5vw,64px);
  border-top:1px solid var(--line);
}

.cobertura__titulo{
  font-family:var(--f-display);
  font-size:clamp(1.6rem,3.2vw,2.4rem);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.028em;
  color:var(--navy);
  margin-bottom:16px;
}
.cobertura__titulo em{ font-style:normal; color:var(--orange); }
.cobertura__head p{ color:var(--muted); font-size:1rem; }

.cobertura__legenda{ display:grid; gap:9px; margin-top:24px; }
.cobertura__legenda li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.9rem;
  color:var(--muted);
}
.lg{ width:11px; height:11px; border-radius:50%; flex:none; }
.lg--sede{ background:var(--orange); box-shadow:0 0 0 3px rgba(255,66,0,.18); }
.lg--sp{ background:var(--navy); }
.lg--pr{ background:#fff; border:2px solid var(--navy); }

.cobertura__mapa{ margin:0; }
.cobertura__mapa figcaption{
  margin-top:14px;
  font-size:.82rem;
  color:var(--soft, var(--muted));
  line-height:1.6;
  opacity:.85;
}

/* ─── o desenho ─── */
.mapa{ width:100%; height:auto; display:block; overflow:visible; }

.mapa__uf{
  stroke:#fff;
  stroke-width:2.4;
  stroke-linejoin:round;
  transition:fill .6s var(--e-out);
}
/* os dois estados precisam de tons distintos: com a mesma cor a divisa
   some e o mapa vira uma mancha só */
.mapa__uf--sp{ fill:#E4E6F0; }
.mapa__uf--pr{ fill:#D3D6E6; }
.reveal.is-in .mapa__uf--sp{ fill:#E1E3EE; }

.mapa__uf-nome{
  font-family:var(--f-display);
  font-size:16px;
  font-weight:700;
  letter-spacing:.24em;
  fill:var(--navy);
  opacity:.42;
}

/* halo do alcance */
.mapa__halo{ opacity:0; transition:opacity 1s var(--e-out) .2s; }
.reveal.is-in .mapa__halo{ opacity:1; }

/* anéis de distância: desenham girando ao entrar */
.mapa__anel{
  fill:none;
  stroke:var(--orange);
  stroke-width:1.4;
  stroke-dasharray:5 7;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  transform:scale(.4);
  transition:opacity .7s var(--e-out), transform .9s var(--e-out);
  transition-delay:calc(.25s + var(--i) * .13s);
}
.reveal.is-in .mapa__anel{ opacity:.55; transform:scale(1); }

.mapa__anelTxt{
  font-family:var(--f-display);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  fill:var(--orange);
  text-anchor:end;
  opacity:0;
  transition:opacity .6s var(--e-out) .9s;
}
.reveal.is-in .mapa__anelTxt{ opacity:.9; }

/* ondas saindo da emissora */
.mapa__onda{
  fill:none;
  stroke:var(--orange);
  stroke-width:2;
  transform-box:fill-box;
  transform-origin:center;
  opacity:0;
}
.reveal.is-in .mapa__onda{
  animation:mapaOnda 4.2s cubic-bezier(.2,.6,.3,1) infinite;
  animation-delay:calc(1s + var(--i) * 1.4s);
}
@keyframes mapaOnda{
  0%   { transform:scale(.04); opacity:.65; }
  70%  { opacity:.12; }
  100% { transform:scale(1);   opacity:0; }
}

/* cidades: entram em ordem de distância */
.mapa__cidade{
  opacity:0;
  transition:opacity .5s var(--e-out);
  transition-delay:calc(.6s + var(--d) * 1.1s);
}
.reveal.is-in .mapa__cidade{ opacity:1; }

.mapa__ponto{ fill:var(--navy); }
.mapa__cidade--pr .mapa__ponto{ fill:#fff; stroke:var(--navy); stroke-width:2; }

.mapa__nome{
  font-family:var(--f-display);
  font-size:13px;
  font-weight:600;
  fill:var(--navy);
}
.mapa__cidade--pr .mapa__nome{ fill:var(--navy); }

/* a emissora */
.mapa__sede{ opacity:0; transition:opacity .6s var(--e-out) .45s; }
.reveal.is-in .mapa__sede{ opacity:1; }
.mapa__sedePonto{ fill:var(--orange); stroke:#fff; stroke-width:2.5; }
.mapa__sedePulso{
  fill:var(--orange);
  opacity:.35;
  transform-box:fill-box;
  transform-origin:center;
}
.reveal.is-in .mapa__sedePulso{ animation:mapaPulso 2.4s var(--e-io) infinite; }
@keyframes mapaPulso{
  0%,100%{ transform:scale(1);   opacity:.35 }
  50%    { transform:scale(1.9); opacity:0 }
}
.mapa__sedeNome{
  font-family:var(--f-display);
  font-size:16px;
  font-weight:800;
  letter-spacing:-.01em;
  fill:var(--navy);
}

@media (max-width:1080px){
  .cobertura{ grid-template-columns:1fr; gap:28px; }
}
@media (max-width:760px){
  .mapa__nome{ font-size:17px; }
  .mapa__sedeNome{ font-size:21px; }
  .mapa__anelTxt{ font-size:14px; }
  .mapa__uf-nome{ font-size:19px; }
  .cobertura__legenda{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  .mapa__onda{ display:none; }
  .reveal.is-in .mapa__sedePulso{ animation:none; }
}

/* rótulo que sai para a esquerda do ponto */
.mapa__nome--esq{ text-anchor:end; }
@media (max-width:760px){
  /* nomes secundários somem: nessa largura eles se sobrepõem */
  .mapa__nome--sec{ display:none; }
}

/* ═══════════════════════════════════════════════════════════
   Microfone da seção Anuncie
   A foto vem em fundo branco. Em vez de recortar (e ficar com
   serrilhado na espuma), `mix-blend-mode: multiply` resolve:
   sobre o laranja, o branco desaparece e o preto continua
   preto, com as bordas perfeitas.
   ═══════════════════════════════════════════════════════════ */
.mic{
  position:relative;
  width:min(100%,440px);
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
  isolation:isolate;
}

.mic__img{
  position:relative;
  z-index:2;
  width:100%;
  mix-blend-mode:multiply;
  animation:micFlutua 6s ease-in-out infinite;
  will-change:transform;
}
@keyframes micFlutua{
  0%,100%{ transform:translateY(0)      rotate(0deg) }
  50%    { transform:translateY(-14px)  rotate(-1.2deg) }
}

/* arcos de som saindo da cápsula. Círculos concêntricos cresciam
   para fora da coluna e estouravam a largura da página no celular;
   os arcos ficam contidos e ainda leem melhor como "som saindo". */
.mic__som{
  position:absolute;
  z-index:3;
  top:4%;
  right:-2%;
  width:36%;
  height:auto;
  overflow:visible;
  fill:none;
  stroke:#fff;
  stroke-width:4;
  stroke-linecap:round;
}
.mic__arco{
  opacity:0;
  transform-box:fill-box;
  transform-origin:left center;
}
.reveal.is-in .mic__arco{
  animation:micArco 2.8s cubic-bezier(.3,.7,.4,1) infinite;
  animation-delay:calc(var(--i) * .28s);
}
@keyframes micArco{
  0%      { opacity:0;   transform:translateX(-6px) scale(.86) }
  22%     { opacity:.95; transform:translateX(0)    scale(1) }
  62%     { opacity:.28 }
  100%    { opacity:0;   transform:translateX(7px)  scale(1.1) }
}

@media (max-width:1080px){
  .mic{ width:min(100%,320px); }
}
@media (prefers-reduced-motion:reduce){
  .mic__img{ animation:none; }
  .mic__onda{ display:none; }
}

/* ═══════════════════════════════════════════════════════════
   Lockup "a número 1 / todo mundo ouve"
   A forma do numeral foi traçada da peça da emissora
   (assets/img/numero-1.svg), não aproximada com fonte: o "1"
   tem bandeira e base próprias que nenhuma fonte reproduz.
   Tudo deriva de --um, a altura do numeral.
   ═══════════════════════════════════════════════════════════ */
.marca1{
  --um:clamp(128px, 16vw, 212px);
  --palavra:calc(var(--um) * 0.205);   /* proporção medida na peça original */
  display:grid;
  justify-items:center;
  gap:calc(var(--um) * 0.055);
  margin-bottom:26px;
  font-family:var(--f-display);
  font-weight:700;
  line-height:.94;
  letter-spacing:-.03em;
  color:#fff;
  text-align:center;
}

.marca1__topo,
.marca1__base{
  font-size:var(--palavra);
  text-transform:lowercase;
}
.marca1__base i{
  font-style:normal;
  font-size:.55em;
  vertical-align:super;
  margin-left:.04em;
}

.marca1__um{
  height:var(--um);
  width:auto;
  display:block;
  overflow:visible;
}
.marca1__corpo{ fill:#fff; }
/* o deslocamento é o que dá volume ao numeral na peça original */
.marca1__sombra{
  fill:var(--navy);
  transform:translate(calc(var(--um) * 0.038), calc(var(--um) * 0.030));
}

.marca1__nota{
  font-size:.74rem;
  color:var(--muted-light);
  text-align:center;
  margin:-14px 0 24px;
}

@media (max-width:1080px){
  .marca1,
  .marca1__nota{ text-align:center; }
}
@media (max-width:760px){
  .marca1{ --um:clamp(116px, 34vw, 180px); }
}

/* texto só para leitor de tela */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* o lockup é um bloco centrado, então a coluna inteira acompanha:
   rótulo, nota e botões alinhados com ele */


/* ═══════════════════════════════════════════════════════════
   Entrada do lockup
   A sequência monta a peça na ordem em que ela é construída:
   o rótulo desce, o numeral sobe e assenta, a sombra sai de
   trás dele (o volume nasce na frente de quem está olhando)
   e por fim a assinatura. Só transform e opacity, nada que
   force recálculo de layout.
   ═══════════════════════════════════════════════════════════ */
.marca1__topo,
.marca1__um,
.marca1__base,
.marca1__nota{
  opacity:0;
  animation-duration:.72s;
  animation-fill-mode:forwards;
  animation-timing-function:cubic-bezier(.22,1,.36,1);
}

.marca1__topo{
  animation-name:m1Desce;
  animation-delay:.12s;
}
@keyframes m1Desce{
  from{ opacity:0; transform:translateY(-18px) }
  to  { opacity:1; transform:none }
}

/* o numeral assenta com um leve exagero, como carimbo */
.marca1__um{
  animation-name:m1Assenta;
  animation-delay:.26s;
  animation-duration:.86s;
  animation-timing-function:cubic-bezier(.2,1.16,.32,1);
  transform-origin:50% 88%;
}
@keyframes m1Assenta{
  from{ opacity:0; transform:translateY(34px) scale(.86) }
  60% { opacity:1 }
  to  { opacity:1; transform:none }
}

/* a sombra parte de trás do corpo e desliza para o lugar */
.marca1__sombra{
  animation:m1Sombra .62s cubic-bezier(.22,1,.36,1) .78s both;
}
@keyframes m1Sombra{
  from{ transform:translate(0,0) }
  to  { transform:translate(calc(var(--um) * 0.038), calc(var(--um) * 0.030)) }
}

.marca1__base{
  animation-name:m1Sobe;
  animation-delay:.92s;
}
.marca1__nota{
  animation-name:m1Sobe;
  animation-delay:1.18s;
  animation-duration:.6s;
}
@keyframes m1Sobe{
  from{ opacity:0; transform:translateY(20px) }
  to  { opacity:1; transform:none }
}

/* o asterisco entra depois da palavra, como nota de rodapé faz */
.marca1__base i{
  display:inline-block;
  opacity:0;
  animation:m1Aster .4s cubic-bezier(.22,1,.36,1) 1.42s forwards;
}
@keyframes m1Aster{
  from{ opacity:0; transform:translateY(-6px) scale(.6) }
  to  { opacity:1; transform:none }
}

@media (prefers-reduced-motion:reduce){
  .marca1__topo,
  .marca1__um,
  .marca1__base,
  .marca1__nota,
  .marca1__base i{ opacity:1; animation:none; transform:none; }
  .marca1__sombra{
    animation:none;
    transform:translate(calc(var(--um) * 0.038), calc(var(--um) * 0.030));
  }
}

/* ═══════════════════════════════════════════════════════════
   Carrossel do topo
   Os slides ficam todos na mesma célula de um grid, então a
   altura do palco é a do slide mais alto e a página não pula
   na troca. Quem está fora sai do fluxo de foco e de leitor de
   tela por visibility, não por display: display:none mataria a
   transição de opacidade.
   ═══════════════════════════════════════════════════════════ */
.carrossel{ position:relative; z-index:2; }

/* ─── Trilho ───────────────────────────────────────────────
   Um container de rolagem horizontal com encaixe. Vem daí,
   de graça e sem uma linha de código: arrastar com o dedo,
   roda do mouse na horizontal, barra de espaço e setas do
   teclado, e o inércia do próprio sistema. O automático é só
   um scrollTo por cima disso, não um motor paralelo.

   `scrollbar-width:none` esconde a barra sem travar a rolagem:
   o conteúdo continua rolável, só não mostra o trilho cinza.
─────────────────────────────────────────────────────────── */
.carrossel__trilho{
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
.carrossel__trilho::-webkit-scrollbar{ display:none; }
.carrossel__trilho:focus-visible{ outline:2px solid #fff; outline-offset:-4px; }

.carrossel__slide{
  position:relative;
  flex:0 0 100%;
  min-width:0;
  scroll-snap-align:center;
  scroll-snap-stop:always;
  display:flex;
  align-items:center;
  justify-content:center;
  /* todos os slides têm a mesma altura: a do mais alto, que é o
     lockup. Sem isso o trilho encolhia na troca e a página pulava. */
  min-height:var(--alt-slide, auto);
  padding-block:clamp(8px,1.4vw,18px);
}
.carrossel__slide > .shell{ position:relative; z-index:2; width:100%; }


/* o lockup já traz margem própria; dentro do slide ela sobra */
.carrossel__slide .marca1{ margin-bottom:18px; }

/* ─── Frase dos slides sem o numeral ───────────────────────
   Mesma família e mesmo peso do lockup, em escala que dá massa
   parecida, para a troca não parecer que o topo encolheu.
─────────────────────────────────────────────────────────── */
.frase{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(2.5rem, 6.4vw, 5.3rem);
  line-height:.98;
  letter-spacing:-.035em;
  text-align:center;
  color:#fff;
  margin:0 0 18px;
  text-wrap:balance;
}
.frase em{
  font-style:normal;
  color:var(--navy);
}
.frase__nota{
  font-size:clamp(.92rem, 1.5vw, 1.06rem);
  line-height:1.5;
  color:var(--muted-light);
  text-align:center;
  max-width:30ch;
  margin:0 auto 24px;
}

/* entrada da frase, no mesmo espírito da entrada do lockup:
   a linha sobe e assenta, a nota vem atrás */
.carrossel__slide.is-ativo .frase{
  animation:frEntra .76s cubic-bezier(.22,1,.36,1) both;
}
.carrossel__slide.is-ativo .frase__nota{
  animation:frEntra .6s cubic-bezier(.22,1,.36,1) .22s both;
}
@keyframes frEntra{
  from{ opacity:0; transform:translateY(22px) }
  to  { opacity:1; transform:none }
}

/* A entrada do lockup era disparada no carregamento da página.
   Agora é disparada quando o slide entra em cena: o observador
   põe e tira a classe, e tirar e devolver reinicia a animação. */
.carrossel__slide:not(.is-ativo) .marca1__topo,
.carrossel__slide:not(.is-ativo) .marca1__um,
.carrossel__slide:not(.is-ativo) .marca1__base,
.carrossel__slide:not(.is-ativo) .marca1__nota,
.carrossel__slide:not(.is-ativo) .marca1__base i,
.carrossel__slide:not(.is-ativo) .marca1__sombra{
  animation:none;
}

/* ─── Pontos ───────────────────────────────────────────────
   Alvo de toque de 44px, como manda o mínimo de acessibilidade,
   com o traço visível menor dentro dele.
─────────────────────────────────────────────────────────── */
.carrossel__pontos{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  gap:2px;
  margin:0 0 6px;
}
.carrossel__ponto{
  width:44px;
  height:44px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  display:grid;
  place-items:center;
  -webkit-tap-highlight-color:transparent;
}
/* Bolinha, nao tracinho: o cliente nao quer traco em lugar nenhum
   do site, nem como indicador. O ativo cresce em vez de esticar. */
.carrossel__ponto::before{
  content:'';
  width:9px;
  height:9px;
  border-radius:50%;
  background:rgba(255,255,255,.38);
  transition:background .3s ease, transform .3s ease;
}
.carrossel__ponto:hover::before{ background:rgba(255,255,255,.6); }
.carrossel__ponto.is-ativo::before{
  background:#fff;
  transform:scale(1.35);
}
.carrossel__ponto:focus-visible{ outline:2px solid #fff; outline-offset:-8px; border-radius:6px; }

@media (max-width:760px){
  .frase{ font-size:clamp(2.1rem, 9.4vw, 3.3rem); }
}

@media (prefers-reduced-motion:reduce){
  .carrossel__trilho{ scroll-behavior:auto; }
  .carrossel__slide.is-ativo .frase,
  .carrossel__slide.is-ativo .frase__nota{ animation:none; }
}

/* a faixa Anuncie usa o mesmo laranja do bloco ao vivo, então recebe a
   mesma marca d'água: uma texturizada e a outra chapada destoaria */
.section--ad{ position:relative; overflow:hidden; }
.section--ad::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:url('../img/logo/simbolo-branco.png');
  background-repeat:repeat;
  background-size:clamp(66px, 7vw, 104px) auto;
  opacity:.055;
  pointer-events:none;
}
.section--ad > .shell{ position:relative; z-index:1; }

/* "Faça parte" saiu de dentro da grade e virou uma faixa no fim dela:
   dentro da grade ele ocupava o lugar de uma pessoa, o que confundia */
.joinus--larga{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:clamp(20px,3vw,44px);
  margin-top:clamp(22px,2.6vw,30px);
}
.joinus--larga > div{ display:grid; gap:6px; }
.joinus--larga .btn{ align-self:center; margin-top:0; flex:none; }

@media (max-width:760px){
  .joinus--larga{ flex-direction:column; align-items:flex-start; }
  .joinus--larga .btn{ align-self:stretch; width:100%; }
}

/* ═══════════════════════════════════════════════════════════
   MÓDULO DE NOTÍCIAS
   Listagem (/noticias), página da matéria e as etiquetas que
   também aparecem no bloco interNews da home.
   ═══════════════════════════════════════════════════════════ */

/* ─── Etiquetas ────────────────────────────────────────────
   O NÍVEL é a etiqueta principal: diz se a notícia é daqui,
   da região, do estado ou do país. Vem preenchida, porque é
   o que a emissora quer que se leia primeiro. O ASSUNTO vem
   depois, só como texto, para não disputar.

   As cores seguem a proximidade: quanto mais perto de Avaré,
   mais cheia e mais quente a etiqueta. Nada de paleta nova,
   só os dois tons da marca em intensidades diferentes.
─────────────────────────────────────────────────────────── */
.etiquetas{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}

.nivel{
  display:inline-block;
  font-family:var(--f-display);
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:4px 10px 3px;
  border-radius:999px;
  border:1px solid transparent;
  white-space:nowrap;
}
.nivel--avare {  background:var(--orange); color:#fff; }
.nivel--regiao{  background:var(--navy);   color:#fff; }
.nivel--estado{  background:var(--navy-050); color:var(--navy); border-color:var(--navy-100); }
.nivel--brasil{  background:transparent;     color:var(--muted); border-color:var(--line); }

.assunto{
  font-family:var(--f-display);
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.assunto::before{
  content:'';
  display:inline-block;
  width:3px; height:3px;
  border-radius:50%;
  background:currentColor;
  vertical-align:middle;
  margin-right:8px;
  opacity:.5;
}

/* sobre o azul do rodapé e em fundo escuro a etiqueta vazada some */
.foot .nivel--brasil{ color:var(--muted-light); border-color:var(--line-white); }

/* a capa da página já abre bastante espaço em cima; o padrão da
   .section por cima disso deixava um vão grande antes do filtro */
.section--materias{ padding-top:clamp(34px,4vw,54px); }

/* ─── Filtro por nível ─────────────────────────────────────── */
.filtro{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:clamp(26px,3vw,38px);
}
.filtro__bt{
  font-family:var(--f-display);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--navy);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 17px;
  cursor:pointer;
  transition:background .2s, border-color .2s, color .2s;
}
.filtro__bt:hover{ border-color:var(--orange); color:var(--orange); }
.filtro__bt.is-ativo{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
}
.filtro__bt:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }

/* ─── Grade de matérias ────────────────────────────────────── */
.materias{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:clamp(20px,2.6vw,30px);
}

.matcard{
  display:flex;
  flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform .3s var(--e-out), border-color .3s;
}
.matcard:hover{ transform:translateY(-4px); border-color:var(--orange); }

/* a matéria em destaque ocupa a linha inteira e ganha a foto grande */
.matcard--grande{ grid-column:1 / -1; }
@media (min-width:860px){
  .matcard--grande{
    flex-direction:row;
    align-items:stretch;
  }
  .matcard--grande .matcard__img{ width:52%; flex:none; }
  .matcard--grande .matcard__body{ flex:1; align-self:center; padding:clamp(24px,3vw,40px); }
}

.matcard__img{
  position:relative;
  overflow:hidden;
  background:var(--navy-050);
  aspect-ratio:16/9;
  flex:none;
}
.matcard--grande .matcard__img{ aspect-ratio:16/11; }
.matcard__img img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s var(--e-out);
}
.matcard:hover .matcard__img img{ transform:scale(1.04); }

.matcard__body{ padding:18px 20px 22px; display:flex; flex-direction:column; }
.matcard__body h3{
  font-family:var(--f-display);
  font-size:1.03rem;
  font-weight:600;
  line-height:1.3;
  color:var(--navy);
  margin:0 0 10px;
}
.matcard--grande .matcard__body h3{ font-size:clamp(1.4rem,2.4vw,1.95rem); line-height:1.2; }
.matcard__body p{
  font-size:.94rem;
  color:var(--muted);
  line-height:1.6;
  margin:0 0 14px;
}
.matcard__body time{
  font-size:.76rem;
  color:var(--muted);
  letter-spacing:.04em;
  margin-top:auto;
}

.materias__vazio{
  text-align:center;
  color:var(--muted);
  padding:50px 0;
  font-size:1rem;
}

/* ─── Página da matéria ────────────────────────────────────── */
.shell--estreito{
  max-width:760px;
}

.materia{ padding-block:clamp(28px,4vw,52px) clamp(56px,7vw,92px); }

.etiquetas--materia{ margin-bottom:16px; }

.materia__titulo{
  font-family:var(--f-display);
  font-size:clamp(1.85rem,4.3vw,3rem);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--navy);
  margin:0 0 16px;
  text-wrap:balance;
}
.materia__resumo{
  font-size:clamp(1.03rem,1.7vw,1.2rem);
  line-height:1.6;
  color:var(--muted);
  margin:0 0 20px;
}
.materia__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  font-size:.82rem;
  color:var(--muted);
  padding-bottom:clamp(22px,3vw,32px);
  border-bottom:1px solid var(--line);
}
.materia__meta span::before{
  content:'·';
  margin-right:18px;
  opacity:.5;
}

.materia__foto{
  margin:clamp(26px,3.5vw,42px) auto;
  max-width:1000px;
  padding-inline:var(--pad);
}
.materia__foto img{
  width:100%;
  display:block;
  border-radius:var(--r-lg);
  aspect-ratio:16/9;
  object-fit:cover;
  background:var(--navy-050);
}
.materia__foto figcaption{
  font-size:.76rem;
  color:var(--muted);
  margin-top:10px;
  text-align:right;
}

.materia__corpo p{
  font-size:1.06rem;
  line-height:1.75;
  color:var(--ink);
  margin:0 0 20px;
}
/* a primeira linha puxa o olho para dentro do texto */
.materia__corpo p:first-child{ font-size:1.14rem; }

/* ─── Aviso de texto de exemplo ────────────────────────────
   Existe para o site nunca passar por matéria de verdade um
   texto que a redação não escreveu. Some sozinho quando a
   notícia é cadastrada pelo painel.
─────────────────────────────────────────────────────────── */
.aviso{
  display:block;
  background:var(--orange-050);
  border:1px solid var(--orange-100);
  border-left:3px solid var(--orange);
  border-radius:var(--r);
  padding:16px 20px;
  font-size:.92rem;
  line-height:1.6;
  color:var(--ink);
  margin:0 0 28px;
}
.aviso b{ color:var(--orange-700); }

.materia__rodape{
  padding-top:clamp(22px,3vw,32px);
  border-top:1px solid var(--line);
}

.section--mais{ background:var(--paper-warm); }

@media (max-width:620px){
  .materia__foto{ padding-inline:0; }
  .materia__foto img{ border-radius:0; }
  .materia__meta span::before{ display:none; }
}

/* ═══════════════════════════════════════════════════════════
   PLAYER DE VÍDEO FLUTUANTE
   A transmissão em vídeo saiu do topo e passou a acompanhar a
   rolagem, no canto direito.

   Mora acima do dock de áudio, nunca em cima dele: a posição
   de baixo é calculada a partir da altura real do dock, que o
   main.js mede e grava em --dock-h. Chutar um valor fixo aqui
   quebraria assim que o dock mudasse de altura, que é o que
   acontece no celular.
   ═══════════════════════════════════════════════════════════ */
.flutua{
  position:fixed;
  right:clamp(12px, 2vw, 24px);
  bottom:calc(var(--dock-h, 76px) + clamp(12px, 1.6vw, 20px));
  z-index:60;                      /* abaixo do menu, acima do conteúdo */
  width:min(340px, calc(100vw - 24px));
  transition:width .32s var(--e-out), transform .32s var(--e-out);
}

/* ─── Pastilha (estado recolhido) ───────────────────────────
   Começa assim de propósito: abrir um vídeo sozinho na cara de
   quem acabou de chegar é invasivo, e o navegador bloqueia o
   autoplay com som de qualquer jeito.
─────────────────────────────────────────────────────────── */
.flutua__pastilha{
  display:none;
  align-items:center;
  gap:9px;
  width:auto;
  margin-left:auto;
  padding:11px 18px 11px 14px;
  border:0;
  border-radius:999px;
  background:var(--navy);
  color:#fff;
  font-family:var(--f-display);
  font-size:.88rem;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 12px 30px -12px rgba(28,29,58,.6);
  transition:transform .25s var(--e-out), background .25s;
}
.flutua__pastilha:hover{ transform:translateY(-2px); background:var(--navy-800); }
.flutua__pastilha:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }

.flutua__ponto{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--orange);
  flex:none;
  animation:flutuaPulsa 1.8s ease-in-out infinite;
}
@keyframes flutuaPulsa{
  0%,100%{ opacity:1; transform:scale(1) }
  50%    { opacity:.45; transform:scale(.8) }
}

.flutua.is-recolhido{ width:auto; }
.flutua.is-recolhido .flutua__pastilha{ display:flex; }
.flutua.is-recolhido .flutua__caixa{ display:none; }

/* ─── Caixa (estado aberto) ─────────────────────────────── */
.flutua__caixa{
  background:var(--navy);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:0 22px 50px -18px rgba(28,29,58,.65);
  animation:flutuaEntra .34s var(--e-out) both;
}
@keyframes flutuaEntra{
  from{ opacity:0; transform:translateY(14px) scale(.96) }
  to  { opacity:1; transform:none }
}

.flutua__topo{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 8px 8px 13px;
  background:var(--navy-800);
}
.flutua__marca{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--f-display);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.14em;
  color:#fff;
}
.flutua__marca i{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--orange);
  animation:flutuaPulsa 1.8s ease-in-out infinite;
}
.flutua__acoes{ margin-left:auto; display:flex; gap:2px; }
.flutua__bt{
  width:30px; height:30px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:8px;
  background:none;
  cursor:pointer;
  transition:background .2s;
}
.flutua__bt:hover{ background:rgba(255,255,255,.12); }
.flutua__bt:focus-visible{ outline:2px solid var(--orange); outline-offset:-2px; }
.flutua__bt svg{ width:16px; height:16px; fill:rgba(255,255,255,.8); }

/* ─── Tela e barra, herdadas do player antigo ─────────────── */
.flutua .player__screen{
  position:relative;
  aspect-ratio:16/9;
  background:#000;
  overflow:hidden;
}
.flutua .player__video{
  width:100%; height:100%;
  display:block;
  object-fit:cover;
  background:#000;
}
.flutua .player__badge{ display:none; }   /* o AO VIVO já está no topo */

.flutua .player__bar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 13px;
  background:var(--navy-800);
}
.flutua .player__now{ min-width:0; }
.flutua .player__now-label{
  display:block;
  font-size:.58rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted-light);
}
.flutua .player__now b{
  display:block;
  font-family:var(--f-display);
  font-size:.84rem;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.flutua .player__freq{ display:none; }    /* não cabe, e já está no dock */
.flutua .cut9x16{ margin-left:auto; flex:none; }

/* no espaço estreito o botão vira só o ícone */
@media (max-width:1100px){
  .flutua .cut9x16 span{
    position:absolute;
    width:1px; height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
}

/* ─── Celular ───────────────────────────────────────────── */
@media (max-width:620px){
  .flutua{
    right:10px;
    left:10px;
    width:auto;
  }
  .flutua.is-recolhido{ left:auto; }
  /* 320px numa tela de 390 tomava quase tudo. Vídeo flutuante grande
     demais deixa de ser flutuante e vira obstáculo. */
  .flutua__caixa{ max-width:268px; margin-left:auto; }
}

/* Quem pediu menos animação não leva pulso nem entrada deslizando. */
@media (prefers-reduced-motion:reduce){
  .flutua, .flutua__caixa, .flutua__pastilha{ transition:none; animation:none; }
  .flutua__ponto, .flutua__marca i{ animation:none; }
}

/* Enquanto o vídeo está na janelinha do sistema, a tela aqui fica
   vazia. Avisar é melhor do que mostrar um retângulo preto. */
.flutua.is-pip .player__screen::after{
  content:'Tocando na janelinha do sistema';
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:18px;
  text-align:center;
  font-family:var(--f-display);
  font-size:.84rem;
  color:var(--muted-light);
  background:var(--navy);
}

/* ═══════════════════════════════════════════════════════════
   APLICATIVO (PWA)
   O convite para instalar e o aviso de versão nova.
   Os dois ficam acima do dock de áudio, nunca em cima dele.
   ═══════════════════════════════════════════════════════════ */

/* ─── Convite para instalar ────────────────────────────────
   Aparece uma vez, depois de a pessoa já estar na página, e
   some por 30 dias se for recusado. Pedir instalação na
   primeira tela é o jeito mais rápido de ser ignorado.
─────────────────────────────────────────────────────────── */
.convite-app{
  position:fixed;
  left:clamp(10px,3vw,20px);
  right:clamp(10px,3vw,20px);
  bottom:calc(var(--dock-h, 76px) + 12px);
  z-index:70;
  max-width:460px;
  margin-inline:auto;
  display:flex;
  align-items:center;
  gap:13px;
  flex-wrap:wrap;
  padding:14px 16px;
  background:var(--navy);
  color:#fff;
  border-radius:var(--r-lg);
  box-shadow:0 20px 44px -18px rgba(28,29,58,.7);
  opacity:0;
  transform:translateY(16px);
  transition:opacity .34s var(--e-out), transform .34s var(--e-out);
}
.convite-app.is-in{ opacity:1; transform:none; }

.convite-app__ico{
  width:44px; height:44px;
  border-radius:11px;
  flex:none;
}
.convite-app__txt{ flex:1; min-width:150px; }
.convite-app__txt b{
  display:block;
  font-family:var(--f-display);
  font-size:.98rem;
  font-weight:600;
  margin-bottom:2px;
}
.convite-app__txt span{
  display:block;
  font-size:.82rem;
  line-height:1.45;
  color:var(--muted-light);
}
.convite-app__bts{
  display:flex;
  gap:8px;
  align-items:center;
  margin-left:auto;
}
.convite-app__sim,
.convite-app__nao{
  font:inherit;
  font-family:var(--f-display);
  font-size:.86rem;
  font-weight:600;
  border-radius:999px;
  padding:9px 17px;
  cursor:pointer;
  border:1px solid transparent;
  white-space:nowrap;
}
.convite-app__sim{ background:var(--orange); color:#fff; }
.convite-app__sim:hover{ filter:brightness(1.08); }
.convite-app__nao{ background:none; color:var(--muted-light); padding:9px 10px; }
.convite-app__nao:hover{ color:#fff; }
.convite-app__sim:focus-visible,
.convite-app__nao:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

@media (max-width:420px){
  .convite-app__bts{ width:100%; margin-left:0; justify-content:flex-end; }
}

/* ─── Aviso de versão nova ─────────────────────────────── */
.aviso-versao{
  position:fixed;
  left:50%;
  bottom:calc(var(--dock-h, 76px) + 12px);
  z-index:70;
  transform:translate(-50%, 16px);
  display:flex;
  align-items:center;
  gap:14px;
  padding:11px 12px 11px 18px;
  background:var(--navy);
  color:#fff;
  border-radius:999px;
  box-shadow:0 18px 40px -16px rgba(28,29,58,.7);
  font-size:.88rem;
  opacity:0;
  transition:opacity .3s var(--e-out), transform .3s var(--e-out);
  max-width:calc(100vw - 24px);
}
.aviso-versao.is-in{ opacity:1; transform:translate(-50%, 0); }
.aviso-versao button{
  font:inherit;
  font-family:var(--f-display);
  font-weight:600;
  background:var(--orange);
  color:#fff;
  border:0;
  border-radius:999px;
  padding:8px 18px;
  cursor:pointer;
  white-space:nowrap;
}
.aviso-versao button:hover{ filter:brightness(1.08); }

/* ─── Rodando como aplicativo ──────────────────────────────
   Dentro do app não há barra de endereço, então a área de
   segurança do aparelho (o entalhe e a barra de gestos) passa
   a ser responsabilidade nossa.
─────────────────────────────────────────────────────────── */
.is-app body{
  padding-top:env(safe-area-inset-top);
}
.is-app .dock{
  padding-bottom:env(safe-area-inset-bottom);
}

@media (prefers-reduced-motion:reduce){
  .convite-app, .aviso-versao{ transition:none; }
}

/* ═══════════════════════════════════════════════════════════
   ABAS DA GRADE
   A programação de sábado e domingo é diferente da semana.
   Abre no dia de hoje, decidido pelo main.js.
   ═══════════════════════════════════════════════════════════ */
.gradeabas{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:clamp(24px,3vw,34px);
}
.gradeabas__bt{
  font-family:var(--f-display);
  font-size:.88rem;
  font-weight:600;
  color:var(--navy);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 20px;
  cursor:pointer;
  transition:background .2s, border-color .2s, color .2s;
}
.gradeabas__bt:hover{ border-color:var(--orange); color:var(--orange); }
.gradeabas__bt.is-ativo{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
}
.gradeabas__bt:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }

/* quem apresenta, na linha abaixo do nome do programa */
.show__quem{
  display:block;
  font-family:var(--f-display);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--orange);
  margin:-4px 0 8px;
}

@media (max-width:520px){
  .gradeabas__bt{ font-size:.82rem; padding:9px 15px; }
}

/* ═══════════════════════════════════════════════════════════
   PODCASTS · TV INTERATIVA
   O vídeo abre dentro do próprio cartão: o ouvinte assiste
   sem sair do site.
   ═══════════════════════════════════════════════════════════ */
.section--pods{ background:var(--paper-warm); }

.podcasts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(20px,2.6vw,30px);
}

.podcast{
  display:flex;
  flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform .3s var(--e-out), border-color .3s;
}
.podcast:hover{ transform:translateY(-4px); border-color:var(--orange); }
/* enquanto toca, o cartão para de se mexer: o vídeo manda */
.podcast.is-tocando{ transform:none; border-color:var(--navy); }
.podcast.is-tocando:hover{ transform:none; }

/* o destaque ocupa a linha inteira e ganha a capa grande */
.podcast--destaque{ grid-column:1 / -1; }
@media (min-width:900px){
  .podcast--destaque{ flex-direction:row; align-items:stretch; }
  .podcast--destaque .podcast__capa,
  .podcast--destaque .podcast__palco{ width:56%; flex:none; }
  .podcast--destaque .podcast__body{ flex:1; align-self:center; padding:clamp(22px,2.8vw,36px); }
  .podcast--destaque .podcast__body h3{ font-size:clamp(1.3rem,2.2vw,1.8rem); }
  /* tocando, o vídeo toma a frente e o texto encolhe */
  .podcast--destaque.is-tocando .podcast__palco{ width:68%; }
}

.podcast__capa{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:var(--navy);
  cursor:pointer;
  aspect-ratio:16/9;
  overflow:hidden;
}
.podcast__capa img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s var(--e-out), filter .3s;
}
.podcast:hover .podcast__capa img{ transform:scale(1.04); filter:brightness(.82); }
.podcast__capa:focus-visible{ outline:2px solid var(--orange); outline-offset:-3px; }
/* some quando o vídeo entra, senão ocuparia espaço atrás dele */
.podcast.is-tocando .podcast__capa{ display:none; }

.podcast__play{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:clamp(54px,5vw,70px);
  height:clamp(54px,5vw,70px);
  border-radius:50%;
  background:var(--orange);
  display:grid;
  place-items:center;
  transition:transform .3s var(--e-out);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.5);
}
.podcast:hover .podcast__play{ transform:translate(-50%,-50%) scale(1.08); }
.podcast__play svg{ width:44%; height:44%; fill:#fff; margin-left:6%; }

/* ─── O player ──────────────────────────────────────────── */
.podcast__palco{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
}
.podcast__palco iframe{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  border:0;
  display:block;
}
.podcast__fechar{
  position:absolute;
  top:8px; right:8px;
  width:32px; height:32px;
  border:0;
  border-radius:50%;
  background:rgba(14,15,30,.72);
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:2;
  transition:background .2s;
}
.podcast__fechar:hover{ background:rgba(14,15,30,.92); }
.podcast__fechar svg{ width:16px; height:16px; fill:#fff; }
.podcast__fechar:focus-visible{ outline:2px solid #fff; outline-offset:1px; }

/* ─── Texto ─────────────────────────────────────────────── */
.podcast__body{ padding:18px 20px 22px; }
.podcast__n{
  display:inline-block;
  font-family:var(--f-display);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:7px;
}
.podcast__body h3{
  font-family:var(--f-display);
  font-size:1.1rem;
  font-weight:600;
  color:var(--navy);
  margin:0 0 8px;
  line-height:1.25;
}
.podcast__body p{
  font-size:.92rem;
  line-height:1.6;
  color:var(--muted);
  margin:0;
}

.podcasts__pe{
  display:flex;
  justify-content:center;
  margin-top:clamp(26px,3vw,38px);
}

@media (prefers-reduced-motion:reduce){
  .podcast, .podcast__capa img, .podcast__play{ transition:none; }
}

/* ─── Slides de foto ──────────────────────────────────────
   A foto É o slide: ocupa o trilho de borda a borda, inteira,
   sem véu, sem filtro e sem nada por cima. Cada passada do
   carrossel mostra uma foto diferente do estúdio.

   Já tentei foto como fundo (com opacidade e depois com véu
   laranja) e o cliente recusou as duas. Aqui nada disso: só a
   imagem como veio da câmera.
─────────────────────────────────────────────────────────── */
.carrossel__slide{
  min-height:var(--alt-slide, clamp(360px, 46vw, 640px));
}
.carrossel__slide--foto{
  padding:0;
  background:#0f1020;
}
.carrossel__slide--foto > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 26%;
  display:block;
  filter:none;
  user-select:none;
  -webkit-user-drag:none;
}

/* ═══════════════════════════════════════════════════════════
   CARROSSEL DO TOPO · refinamento
   Setas, e uma mensagem em cada foto.

   A foto continua sem filtro e sem véu: o texto vive num
   CARTÃO SÓLIDO ao lado, que não encosta na imagem. É o que
   mantém a regra de "nenhum filtro em nenhuma foto" e ainda
   deixa o texto legível em qualquer parede, clara ou escura.
   ═══════════════════════════════════════════════════════════ */
.carrossel__moldura{ position:relative; }

/* ─── Setas ───────────────────────────────────────────────
   Círculo branco sólido, com o ícone em azul: legível sobre
   foto clara ou escura sem precisar de sombra nem de véu.
─────────────────────────────────────────────────────────── */
.carrossel__seta{
  position:absolute;
  top:50%;
  z-index:5;
  width:52px; height:52px;
  margin-top:-26px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:#fff;
  cursor:pointer;
  transition:transform .25s var(--e-out), background .2s;
}
.carrossel__seta svg{ width:24px; height:24px; fill:var(--navy); }
.carrossel__seta--ant { left:clamp(10px,2vw,28px); }
.carrossel__seta--prox{ right:clamp(10px,2vw,28px); }
.carrossel__seta:hover{ background:var(--navy); }
.carrossel__seta:hover svg{ fill:#fff; }
.carrossel__seta--ant:hover { transform:translateX(-3px); }
.carrossel__seta--prox:hover{ transform:translateX(3px); }
.carrossel__seta:active{ transform:scale(.94); }
.carrossel__seta:focus-visible{ outline:3px solid var(--navy); outline-offset:3px; }

/* ─── Cartão de mensagem ──────────────────────────────────── */
.legenda{
  position:absolute;
  left:clamp(70px,8vw,120px);
  bottom:clamp(22px,4vw,54px);
  z-index:3;
  width:min(420px, calc(100% - 150px));
  padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,28px) clamp(20px,2.2vw,28px);
  background:#fff;
  border-radius:var(--r-lg);
  color:var(--ink);
  text-align:left;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .5s var(--e-out) .25s, transform .5s var(--e-out) .25s;
}
.carrossel__slide.is-ativo .legenda{ opacity:1; transform:none; }

.legenda__rot{
  display:block;
  font-family:var(--f-display);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:8px;
}
.legenda__tit{
  font-family:var(--f-display);
  font-size:clamp(1.5rem,2.6vw,2.15rem);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.025em;
  color:var(--navy);
  margin:0 0 8px;
}
.legenda__txt{
  font-size:.95rem;
  line-height:1.55;
  color:var(--muted);
  margin:0 0 16px;
}
.legenda__bt{
  display:inline-block;
  font:inherit;
  font-family:var(--f-display);
  font-size:.9rem;
  font-weight:600;
  color:#fff;
  background:var(--orange);
  border:0;
  border-radius:999px;
  padding:11px 22px;
  cursor:pointer;
  text-decoration:none;
  transition:filter .2s, transform .25s var(--e-out);
}
.legenda__bt:hover{ filter:brightness(1.08); transform:translateY(-2px); }
.legenda__bt:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }

/* ─── Celular ─────────────────────────────────────────────
   O cartão desce para a borda de baixo e ocupa a largura, e as
   setas ficam menores. Tocar e arrastar continua sendo o gesto
   principal: a seta é apoio, não obrigação.
─────────────────────────────────────────────────────────── */
@media (max-width:760px){
  .carrossel__seta{ width:40px; height:40px; margin-top:-20px; }
  .carrossel__seta svg{ width:20px; height:20px; }
  .legenda{
    left:12px; right:12px; bottom:12px;
    width:auto;
    padding:14px 16px 16px;
  }
  .legenda__rot{ margin-bottom:4px; }
  .legenda__tit{ font-size:1.35rem; margin-bottom:4px; }
  .legenda__txt{ font-size:.84rem; margin-bottom:11px; }
  .legenda__bt{ font-size:.84rem; padding:9px 18px; }
}
@media (max-width:420px){
  /* tela estreita: sem o texto de apoio, para o cartão não cobrir a foto */
  .legenda__txt{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .legenda{ transition:none; transform:none; opacity:1; }
  .carrossel__seta{ transition:none; }
}


/* ═══════════════════════════════════════════════════════════
   PORTAL DE NOTÍCIAS (/noticias/)
   Pedido do cliente: que parecesse um portal de notícias dos
   grandes, mas mais moderno, e com foto em tudo.

   Foto grande, texto abaixo em tipografia forte, cantos
   generosos, muito ar. Nada de texto sobre foto: o título fica
   em fundo branco, sem véu e sem filtro.
   ═══════════════════════════════════════════════════════════ */
.portal{
  background:var(--paper-warm);
  padding-block:clamp(28px,4vw,56px) clamp(56px,7vw,100px);
}

/* ─── Barra: título e busca ─────────────────────────────── */
.portal__barra{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px 32px;
  flex-wrap:wrap;
  margin-bottom:clamp(18px,2.4vw,28px);
}
.portal__marca{
  font-family:var(--f-display);
  font-size:clamp(2.4rem,5vw,3.8rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-.035em;
  color:var(--navy);
  margin:0 0 8px;
}
.portal__marca::after{ content:'.'; color:var(--orange); }
.portal__sub{ font-size:1rem; color:var(--muted); margin:0; }

.portal__busca{
  position:relative;
  display:block;
  width:min(340px,100%);
}
.portal__busca svg{
  position:absolute;
  left:16px; top:50%;
  width:20px; height:20px;
  margin-top:-10px;
  fill:var(--muted);
  pointer-events:none;
}
.portal__busca input{
  width:100%;
  font:inherit;
  font-size:.95rem;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  padding:13px 20px 13px 46px;
  transition:border-color .2s;
}
.portal__busca input::placeholder{ color:var(--muted); }
.portal__busca input:focus{ outline:2px solid var(--orange); outline-offset:1px; border-color:var(--orange); }

/* o filtro grudado embaixo do menu enquanto a pessoa rola */
.portal .filtro{
  position:sticky;
  top:var(--nav-h);
  z-index:20;
  margin:0 calc(var(--pad) * -1) clamp(22px,3vw,34px);
  padding:12px var(--pad);
  background:rgba(251,249,247,.94);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  overflow-x:auto;
  flex-wrap:nowrap;
  scrollbar-width:none;
}
.portal .filtro::-webkit-scrollbar{ display:none; }
.portal .filtro__bt{ flex:none; }

/* ─── Capa: matéria principal e três laterais ─────────────── */
.portal__capa{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
  gap:clamp(20px,2.6vw,34px);
  margin-bottom:clamp(36px,5vw,64px);
}

.pt-lead{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.pt-lead__img{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-xl);
  aspect-ratio:16/10;
  background:var(--navy-050);
}
.pt-lead__img img,
.pt-side__img img,
.pt-card__img img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s var(--e-out);
}
.pt-lead:hover .pt-lead__img img,
.pt-side:hover .pt-side__img img,
.pt-card:hover .pt-card__img img{ transform:scale(1.045); }

.pt-lead__body{ padding:clamp(18px,2vw,26px) 4px 0; }
.pt-lead__body h2{
  font-family:var(--f-display);
  font-size:clamp(1.7rem,3.3vw,2.7rem);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.03em;
  color:var(--navy);
  margin:0 0 12px;
  text-wrap:balance;
  transition:color .2s;
}
.pt-lead:hover .pt-lead__body h2{ color:var(--orange); }
.pt-lead__body p{
  font-size:1.05rem;
  line-height:1.6;
  color:var(--muted);
  margin:0 0 14px;
  max-width:62ch;
}

.pt-lead time,
.pt-side time,
.pt-card time{
  font-size:.78rem;
  color:var(--muted);
  letter-spacing:.03em;
}

/* laterais: miniatura à esquerda, texto à direita */
.portal__laterais{
  display:flex;
  flex-direction:column;
  gap:clamp(16px,2vw,22px);
}
.pt-side{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr);
  gap:16px;
  align-items:start;
  padding-bottom:clamp(16px,2vw,22px);
  border-bottom:1px solid var(--line);
}
.pt-side:last-child{ border-bottom:0; padding-bottom:0; }
.pt-side__img{
  overflow:hidden;
  border-radius:var(--r-lg);
  aspect-ratio:4/3;
  background:var(--navy-050);
}
.pt-side__body h3{
  font-family:var(--f-display);
  font-size:1.04rem;
  font-weight:600;
  line-height:1.28;
  letter-spacing:-.01em;
  color:var(--navy);
  margin:0 0 8px;
  transition:color .2s;
}
.pt-side:hover h3{ color:var(--orange); }

/* ─── Corpo: seções e coluna lateral ──────────────────────── */
.portal__corpo{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:clamp(28px,4vw,56px);
  align-items:start;
}
.pt-sec{ margin-bottom:clamp(34px,4.5vw,56px); }
.pt-sec:last-child{ margin-bottom:0; }
.pt-sec__cab{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:clamp(16px,2vw,24px);
}
.pt-sec__cab .nivel{ font-size:.78rem; padding:6px 14px 5px; }
.pt-sec__cab p{ font-size:.9rem; color:var(--muted); margin:0; }

.pt-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));
  gap:clamp(20px,2.4vw,30px);
}
.pt-card{ display:flex; flex-direction:column; min-width:0; }
.pt-card__img{
  overflow:hidden;
  border-radius:var(--r-lg);
  aspect-ratio:3/2;
  background:var(--navy-050);
  margin-bottom:14px;
}
.pt-card__body h3{
  font-family:var(--f-display);
  font-size:1.18rem;
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.015em;
  color:var(--navy);
  margin:0 0 8px;
  transition:color .2s;
}
.pt-card:hover h3{ color:var(--orange); }
.pt-card__body p{
  font-size:.92rem;
  line-height:1.55;
  color:var(--muted);
  margin:0 0 10px;
}

/* ─── Últimas notícias ────────────────────────────────────── */
.portal__lado{
  position:sticky;
  top:calc(var(--nav-h) + 76px);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:clamp(20px,2vw,26px);
}
.portal__lado h2{
  font-family:var(--f-display);
  font-size:1.2rem;
  font-weight:700;
  color:var(--navy);
  margin:0 0 6px;
}
.ultimas{ list-style:none; margin:0; padding:0; counter-reset:ult; }
.ultimas li{
  counter-increment:ult;
  border-bottom:1px solid var(--line);
}
.ultimas li:last-child{ border-bottom:0; }
.ultimas a{
  display:grid;
  grid-template-columns:78px minmax(0,1fr);
  gap:14px;
  align-items:center;
  padding:14px 0;
}
.ultimas img{
  width:78px; height:78px;
  object-fit:cover;
  border-radius:var(--r);
  background:var(--navy-050);
}
.ultimas em{
  display:block;
  font-style:normal;
  font-family:var(--f-display);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:3px;
}
.ultimas b{
  display:block;
  font-family:var(--f-display);
  font-size:.94rem;
  font-weight:600;
  line-height:1.28;
  color:var(--navy);
  transition:color .2s;
}
.ultimas a:hover b{ color:var(--orange); }
.ultimas time{ display:block; font-size:.74rem; color:var(--muted); margin-top:4px; }

/* ─── Com filtro ou busca ativos ───────────────────────────
   A capa vira uma coluna só: a principal em cima, se ainda
   estiver no resultado, e as laterais em grade abaixo.
─────────────────────────────────────────────────────────── */
.portal--filtrado .portal__capa{ grid-template-columns:1fr; margin-bottom:clamp(28px,4vw,44px); }
.portal--filtrado .portal__laterais{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
  gap:clamp(18px,2.2vw,26px);
}
.portal--filtrado .pt-side{
  border-bottom:0;
  padding-bottom:0;
}
[hidden]{ display:none !important; }

/* ─── Telas menores ─────────────────────────────────────────── */
@media (max-width:1060px){
  .portal__corpo{ grid-template-columns:1fr; }
  .portal__lado{ position:static; }
  .ultimas{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); column-gap:28px; }
}
@media (max-width:860px){
  .portal__capa{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .pt-side{ grid-template-columns:104px minmax(0,1fr); gap:13px; }
  .pt-lead__body p{ font-size:.96rem; }
  .portal .filtro{ top:calc(var(--nav-h) - 10px); }
}
@media (prefers-reduced-motion:reduce){
  .pt-lead__img img, .pt-side__img img, .pt-card__img img{ transition:none; }
}


/* ═══════════════════════════════════════════════════════════
   PÁGINA DA MATÉRIA · estrutura pedida pela emissora
   Foto, título, subtítulo, texto e autor embaixo, nessa ordem,
   no celular e no computador. Ao lado, "Saiba também".
   ═══════════════════════════════════════════════════════════ */
.materia{ background:var(--paper-warm); padding-block:clamp(24px,3.4vw,44px) clamp(56px,7vw,96px); }

.materia__grade{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:clamp(28px,4vw,56px);
  align-items:start;
}
.materia__principal{ min-width:0; max-width:820px; }

/* a foto vem primeiro e ocupa a coluna inteira */
.materia__principal > .crumb{ margin-bottom:18px; }
.materia .materia__foto{
  margin:0 0 clamp(20px,2.6vw,30px);
  padding:0;
  max-width:none;
}
.materia .materia__foto img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:var(--r-xl);
  background:var(--navy-050);
  display:block;
}
.materia .materia__foto figcaption{
  font-size:.76rem;
  color:var(--muted);
  margin-top:10px;
  text-align:right;
}
.materia .materia__foto figcaption:empty{ display:none; }

.materia .materia__titulo{
  font-size:clamp(1.9rem,4vw,3rem);
  line-height:1.08;
}
.materia .materia__meta{ border-bottom:1px solid var(--line); margin-bottom:clamp(22px,3vw,32px); }

/* ─── Autor, no fim do texto ───────────────────────────────── */
.materia__autor{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:clamp(26px,3.4vw,40px);
  padding:16px 18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
}
.materia__autor img{
  width:46px; height:46px;
  border-radius:50%;
  flex:none;
  background:var(--navy-050);
  padding:5px;
  object-fit:contain;
}
.materia__autor b{
  display:block;
  font-family:var(--f-display);
  font-size:1rem;
  font-weight:600;
  color:var(--navy);
}
.materia__autor small{ display:block; font-size:.8rem; color:var(--muted); margin-top:2px; }

/* "Saiba também" reaproveita a coluna lateral do portal */
.materia__lado{ top:calc(var(--nav-h) + 24px); }

@media (max-width:1060px){
  .materia__grade{ grid-template-columns:1fr; }
  .materia__principal{ max-width:none; }
  .materia__lado{ position:static; }
}
@media (max-width:620px){
  /* no celular a foto vai de borda a borda, sem canto arredondado */
  .materia .materia__foto{ margin-inline:calc(var(--pad) * -1); }
  .materia .materia__foto img{ border-radius:0; aspect-ratio:4/3; }
  .materia .materia__foto figcaption{ padding-inline:var(--pad); }
}

.materia .materia__rodape{ border-top:0; padding-top:clamp(18px,2.4vw,26px); }

/* ─── Faixa "Em destaque": as altas além da principal ───────
   Continuam grandes: foto de um lado e título forte do outro,
   uma abaixo da outra, para ocuparem boa parte da tela.
─────────────────────────────────────────────────────────── */
.pt-destaques{ margin-bottom:clamp(36px,5vw,64px); }
.pt-destaques__tit{
  font-family:var(--f-display);
  font-size:1.2rem;
  font-weight:700;
  color:var(--navy);
  margin:0 0 clamp(14px,1.8vw,22px);
}
.pt-destaques__grade{ display:grid; gap:clamp(18px,2.2vw,28px); }

.pt-wide{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(18px,2.6vw,36px);
  align-items:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:clamp(12px,1.4vw,18px);
  transition:border-color .3s;
}
.pt-wide:hover{ border-color:var(--orange); }
.pt-wide__img{
  overflow:hidden;
  border-radius:var(--r-lg);
  aspect-ratio:16/10;
  background:var(--navy-050);
}
.pt-wide__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--e-out); }
.pt-wide:hover .pt-wide__img img{ transform:scale(1.045); }
.pt-wide__body{ padding:clamp(4px,1vw,14px) clamp(4px,1.4vw,18px) clamp(4px,1vw,14px) 0; }
.pt-wide__body h3{
  font-family:var(--f-display);
  font-size:clamp(1.4rem,2.6vw,2.1rem);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.025em;
  color:var(--navy);
  margin:0 0 10px;
  transition:color .2s;
}
.pt-wide:hover h3{ color:var(--orange); }
.pt-wide__body p{ font-size:1rem; line-height:1.6; color:var(--muted); margin:0 0 12px; }
.pt-wide time{ font-size:.78rem; color:var(--muted); letter-spacing:.03em; }

@media (max-width:760px){
  .pt-wide{ grid-template-columns:1fr; padding:12px; }
  .pt-wide__body{ padding:2px 6px 6px; }
}
@media (prefers-reduced-motion:reduce){ .pt-wide__img img{ transition:none; } }

/* Sem seções (todas as matérias já couberam na capa), a coluna "Últimas
   notícias" ocupa a largura toda em vez de ficar sozinha na direita. */
.portal__corpo--so-lado{ grid-template-columns:1fr; }
.portal__corpo--so-lado .portal__main{ display:none; }
.portal__corpo--so-lado .portal__lado{ position:static; }
.portal__corpo--so-lado .ultimas{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));
  column-gap:clamp(20px,3vw,40px);
}

/* ═══════════════════════════════════════════════════════════
   ESPAÇOS DE ANÚNCIO
   A caixa nasce escondida (atributo hidden) e só aparece quando o
   main.js tem o que mostrar. A proporção é fixa por espaço, para a
   página não pular quando a imagem chega.
   ═══════════════════════════════════════════════════════════ */
.anuncio{
  position:relative;
  display:block;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--navy-050);
}
.anuncio[hidden]{ display:none; }
.anuncio--faixa{ aspect-ratio:24/5; width:100%; }
.anuncio--lateral{ aspect-ratio:6/5; width:100%; margin-top:20px; }
.anuncio-linha{ padding-block:clamp(26px,3.4vw,44px) 0; }

.anuncio__link{ display:block; width:100%; height:100%; }
.anuncio__link img{ width:100%; height:100%; object-fit:cover; display:block; }

/* a palavra "Publicidade" é obrigação: anúncio tem de parecer anúncio */
.anuncio__rot{
  position:absolute;
  top:8px; left:8px;
  z-index:2;
  font-family:var(--f-display);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  background:rgba(255,255,255,.92);
  border-radius:999px;
  padding:3px 9px;
  pointer-events:none;
}

/* ─── Espaço livre: o convite ─────────────────────────────── */
.anuncio--casa{ background:var(--paper); border:1px solid var(--navy-100); }
.anuncio__casa{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:14px 18px;
  text-align:center;
  transition:background .25s;
}
.anuncio__casa:hover{ background:var(--orange-050); }
.anuncio__casa b{
  font-family:var(--f-display);
  font-size:clamp(1.05rem,2.2vw,1.5rem);
  font-weight:700;
  color:var(--navy);
}
.anuncio__casa span{ font-size:.86rem; line-height:1.45; color:var(--muted); max-width:46ch; }
.anuncio__casa em{
  font-style:normal;
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--orange);
  margin-top:2px;
}
@media (max-width:620px){
  .anuncio--faixa{ aspect-ratio:2/1; }
  .anuncio__casa span{ display:none; }
}

/* respiro em volta das faixas, que nascem coladas no que vem antes e depois */
.portal .anuncio--faixa{ margin-bottom:clamp(26px,3.4vw,42px); }
.materia .anuncio--faixa{ margin-top:clamp(26px,3.4vw,40px); }


/* ═══════════════════════════════════════════════════════════
   Mapa com os 49 marcadores e a lista de municípios
   ═══════════════════════════════════════════════════════════ */
.mapa__cidade{ cursor:pointer; outline:none; }
.mapa__alvo{ fill:transparent; }
.mapa__marca{
  transform:scale(var(--s,1));
  transform-box:fill-box;
  transform-origin:50% 100%;
  transition:transform .2s var(--e-out);
}
.mapa__pin{ fill:var(--navy); stroke:#fff; stroke-width:1.4; paint-order:stroke; }
.mapa__furo{ fill:#fff; }
.mapa__cidade--pr .mapa__pin{ fill:#fff; stroke:var(--navy); stroke-width:2; }
.mapa__cidade--pr .mapa__furo{ fill:var(--navy); }
.mapa__cidade:hover .mapa__marca,
.mapa__cidade:focus-visible .mapa__marca,
.mapa__cidade.is-ativo .mapa__marca{ transform:scale(calc(var(--s,1) * 1.45)); }
.mapa__cidade:hover .mapa__pin,
.mapa__cidade:focus-visible .mapa__pin,
.mapa__cidade.is-ativo .mapa__pin{ fill:var(--orange); stroke:#fff; }
.mapa__cidade--pr:hover .mapa__furo,
.mapa__cidade--pr.is-ativo .mapa__furo{ fill:#fff; }
.mapa__cidade:hover,
.mapa__cidade:focus-visible,
.mapa__cidade.is-ativo{ z-index:3; }

.mapa__nome{
  font-size:13px;
  paint-order:stroke;
  stroke:#fff;
  stroke-width:4px;
  stroke-linejoin:round;
  pointer-events:none;
}
.mapa__nome--oculto{ opacity:0; transition:opacity .15s; }
.mapa__cidade:hover .mapa__nome--oculto,
.mapa__cidade:focus-visible .mapa__nome--oculto,
.mapa__cidade.is-ativo .mapa__nome--oculto{ opacity:1; font-weight:700; fill:var(--orange); }
.mapa__sedeNome{ paint-order:stroke; stroke:#fff; stroke-width:5px; stroke-linejoin:round; }
.lg--tam{
  width:14px; height:14px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  background:var(--navy); opacity:.75;
}

.cidades{ margin-top:clamp(36px,4.5vw,60px); }
.cidades__cab h3{ font-family:var(--f-display); font-size:clamp(1.2rem,2.4vw,1.6rem); color:var(--navy); }
.cidades__cab p{ color:var(--muted); font-size:.92rem; margin-top:4px; }
.cidades__lista{
  list-style:none; margin:20px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); gap:8px;
}
.cidade{
  width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px;
  text-align:left; padding:10px 14px; border-radius:var(--r-lg);
  background:#fff; border:1px solid var(--line); color:var(--navy);
  font:inherit; cursor:pointer; transition:border-color .2s, background .2s;
}
.cidade:hover,.cidade:focus-visible,.cidade.is-ativo{ border-color:var(--orange); background:var(--orange-050); }
.cidade__nome{ font-weight:700; font-size:.92rem; overflow-wrap:anywhere; }
.cidade__nome i{
  font-style:normal; font-size:.62rem; letter-spacing:.08em; margin-left:6px;
  padding:1px 6px; border-radius:999px; background:var(--navy-050); color:var(--navy);
  vertical-align:middle;
}
.cidade__km{ font-size:.78rem; color:var(--orange); font-weight:700; text-align:right; }
.cidade__pop{ grid-column:1; font-size:.78rem; color:var(--muted); }
@media (max-width:760px){
  .mapa__nome{ font-size:19px; stroke-width:5px; }
  .mapa__cidade--p .mapa__marca{ transform:scale(calc(var(--s,1) * 1.2)); }
}

/* ═══════════════════════════════════════════════════════════
   RÁDIO 3.0: a pergunta da localização e o cartão do anunciante
   Os dois flutuam acima do player fixo, e nunca o cobrem.
   ═══════════════════════════════════════════════════════════ */
.r30-pede,
.r30-cartao{
  position:fixed;
  left:50%;
  bottom:calc(var(--dock-h, 76px) + 14px + env(safe-area-inset-bottom, 0px));
  z-index:90;
  width:min(440px, calc(100% - 32px));
  transform:translate(-50%, 16px);
  opacity:0;
  transition:opacity .3s var(--e-out), transform .3s var(--e-out);
  border-radius:var(--r-lg);
  box-shadow:0 18px 40px rgba(20,22,60,.22);
}
.r30-pede.is-in,
.r30-cartao.is-in{ opacity:1; transform:translate(-50%, 0); }

.r30-pede{ background:var(--navy); color:#fff; padding:18px 20px; }
.r30-pede b{ font-family:var(--f-display); font-size:1.05rem; display:block; }
.r30-pede p{ font-size:.88rem; line-height:1.5; margin:6px 0 14px; color:rgba(255,255,255,.86); }
.r30-pede__bts{ display:flex; gap:10px; flex-wrap:wrap; }
.r30-pede__bts button{
  font:inherit; font-weight:700; font-size:.88rem; border-radius:999px; padding:9px 18px; cursor:pointer;
}
.r30-sim{ background:var(--orange); color:#fff; border:0; }
.r30-nao{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4); }

.r30-cartao{
  display:flex; align-items:center; gap:14px;
  background:#fff; color:var(--navy); padding:12px 14px 16px;
  border:1px solid var(--navy-100);
  overflow:hidden;
}
.r30-cartao img{ width:60px; height:60px; border-radius:12px; object-fit:cover; flex:none; }
.r30-cartao__txt{ display:flex; flex-direction:column; min-width:0; }
.r30-cartao__txt em{
  font-style:normal; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--orange); font-weight:700;
}
.r30-nome{ font-family:var(--f-display); font-size:1.02rem; line-height:1.25; overflow-wrap:anywhere; }
.r30-frase{ font-size:.86rem; color:var(--muted); line-height:1.4; }
.r30-cartao__barra{ position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--navy-050); }
.r30-cartao__barra i{
  display:block; height:100%; background:var(--orange);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .25s linear;
}
/* durante o comercial o player avisa que o ao vivo volta em seguida */
body.is-r30 .dock__live{ color:var(--muted); }

/* ═══════════════════════════════════════════════════════════
   DUAS RÁDIOS NO PLAYER: 101,7 FM e Classic
   ═══════════════════════════════════════════════════════════ */
.dock__radios{
  display:flex; flex:none;
  background:var(--navy-050); border-radius:999px; padding:3px;
}
.dock__radios button{
  font:inherit; font-family:var(--f-display); font-size:.74rem; font-weight:700;
  color:var(--muted); background:transparent; border:0; border-radius:999px;
  padding:7px 12px; cursor:pointer; white-space:nowrap;
  transition:background .2s, color .2s;
}
.dock__radios button.is-on{ background:var(--navy); color:#fff; }
.dock__radios button:not(.is-on):hover{ color:var(--navy); }
body.is-classic .dock__radios button.is-on{ background:var(--orange); }
@media (max-width:620px){
  .dock__radios button{ padding:6px 9px; font-size:.68rem; }
}

/* ═══════════════════════════════════════════════════════════
   PÁGINA DA CLASSIC
   ═══════════════════════════════════════════════════════════ */
.classic{
  background:var(--orange);
  color:#fff;
  padding:calc(var(--nav-h) + clamp(36px,6vw,80px)) 0 clamp(48px,7vw,96px);
  position:relative;
  overflow:hidden;
}
.classic__grade{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(28px,5vw,64px);
  align-items:center;
}
.classic__selo{
  display:inline-block; font-family:var(--f-display); font-size:.74rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  background:rgba(255,255,255,.16); border-radius:999px; padding:6px 14px;
}
.classic__titulo{
  font-family:var(--f-display); font-weight:800; letter-spacing:-.03em; line-height:.92;
  font-size:clamp(3rem,8.5vw,6.6rem); margin:18px 0 0;
}
.classic__titulo span{ display:block; color:var(--navy); }
.classic__lead{ font-size:clamp(1.02rem,1.6vw,1.2rem); line-height:1.55; max-width:44ch; margin-top:18px; color:rgba(255,255,255,.94); }
.classic__acoes{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.classic__ouvir{ color:var(--orange); }
.classic__dica{ font-size:.86rem; color:rgba(255,255,255,.85); margin-top:16px; max-width:46ch; }

.cagora{
  background:#fff; color:var(--navy); border-radius:var(--r-xl);
  padding:clamp(18px,2.4vw,26px); box-shadow:0 30px 60px -30px rgba(31,33,80,.55);
  min-width:0;
}
.cagora__rot{
  font-family:var(--f-display); font-size:.7rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--orange);
}
.cagora__linha{ display:flex; gap:16px; align-items:center; margin-top:12px; min-width:0; }
.cagora__arte{ width:96px; height:96px; border-radius:var(--r); object-fit:cover; flex:none; background:var(--navy-050); }
.cagora__txt{ display:flex; flex-direction:column; min-width:0; gap:3px; }
.cagora__txt b{ font-family:var(--f-display); font-size:1.25rem; line-height:1.2; overflow-wrap:anywhere; }
.cagora__txt span{ color:var(--muted); font-size:.95rem; overflow-wrap:anywhere; }
.cagora__txt em{ font-style:normal; font-size:.78rem; font-weight:700; color:var(--orange); }
.cagora__barra{ height:5px; border-radius:999px; background:var(--navy-050); margin-top:18px; overflow:hidden; }
.cagora__barra i{ display:block; height:100%; background:var(--orange); transform:scaleX(0); transform-origin:0 50%; transition:transform .5s linear; }
.cagora__seguir{ margin-top:12px; font-size:.86rem; color:var(--muted); overflow-wrap:anywhere; }
.cagora__seguir span{ font-weight:700; color:var(--navy); margin-right:4px; }
.is-sem-sinal .cagora__barra, .is-sem-sinal .cagora__seguir{ display:none; }

.cblocos{
  list-style:none; padding:0; margin:30px 0 0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;
}
.cbloco{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px; position:relative; transition:border-color .3s, background .3s;
}
.cbloco__hora{ font-family:var(--f-display); font-weight:700; font-size:.82rem; color:var(--orange); }
.cbloco b{ display:block; font-family:var(--f-display); font-size:1.35rem; color:var(--navy); margin-top:6px; }
.cbloco p{ color:var(--muted); font-size:.92rem; line-height:1.5; margin-top:6px; }
.cbloco__no-ar{
  display:none; position:absolute; top:16px; right:16px;
  font-style:normal; font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  background:var(--orange); color:#fff; border-radius:999px; padding:4px 10px;
}
.cbloco.is-on{ border-color:var(--orange); background:var(--orange-050); }
.cbloco.is-on .cbloco__no-ar{ display:inline-block; }

.section--soft{ background:var(--paper-warm); }
.chist{ list-style:none; padding:0; margin:26px 0 0; display:grid; gap:8px; max-width:760px; }
.chist li{
  display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:16px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:12px 16px;
}
.chist time{ grid-row:span 2; font-family:var(--f-display); font-weight:700; color:var(--orange); font-variant-numeric:tabular-nums; align-self:center; }
.chist b{ color:var(--navy); overflow-wrap:anywhere; }
.chist span{ color:var(--muted); font-size:.88rem; }
.chist .chist__vazio{ display:block; color:var(--muted); }

@media (max-width:1080px){
  .cblocos{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:860px){
  .classic__grade{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .cblocos{ grid-template-columns:1fr; }
  .cagora__arte{ width:72px; height:72px; }
  .classic__acoes .btn{ width:100%; justify-content:center; }
}

/* ─── Chamada da Classic na home ─── */
.chamada-classic{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px 32px; align-items:center;
  background:var(--navy); color:#fff; border-radius:var(--r-xl);
  padding:clamp(22px,3.4vw,38px) clamp(22px,4vw,48px);
}
.chamada-classic small{
  font-family:var(--f-display); font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--orange);
}
.chamada-classic h3{ font-family:var(--f-display); font-size:clamp(1.4rem,3vw,2.1rem); line-height:1.1; margin-top:6px; }
.chamada-classic p{ color:rgba(255,255,255,.82); margin-top:8px; max-width:52ch; }
.chamada-classic__bts{ display:flex; flex-wrap:wrap; gap:10px; }
@media (max-width:760px){
  .chamada-classic{ grid-template-columns:1fr; }
  .chamada-classic__bts .btn{ flex:1; justify-content:center; }
}


/* Classic com a marca dela: logo azul sobre fundo claro (28/10) */
.classic{ background:var(--navy-050); color:var(--navy); }
.classic__selo{ background:var(--navy); color:#fff; }
.classic__titulo{ margin:22px 0 0; line-height:0; }
.classic__titulo img{ width:min(100%, 560px); height:auto; }
.classic__lead{ color:var(--ink); }
.classic__ouvir{ color:#fff; }
.classic__fm{ border:1.5px solid var(--navy); color:var(--navy); background:transparent; }
.classic__fm:hover{ background:var(--navy); color:#fff; }
.classic__dica{ color:var(--muted); }
.cagora{ box-shadow:0 24px 50px -28px rgba(31,33,80,.45); }
.chamada-classic h3{ line-height:0; margin-top:10px; }
.chamada-classic h3 img{ width:min(100%, 340px); height:auto; }

/* ═══════════════════════════════════════════════════════════
   FAIXA DO AO VIVO (abaixo do carrossel), 28/10
   ═══════════════════════════════════════════════════════════ */
.aovivo{ background:var(--orange); color:#fff; position:relative; z-index:2; }
.aovivo__grade{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1.3fr) auto;
  align-items:center;
  gap:clamp(20px,3vw,48px);
  padding-block:clamp(22px,2.4vw,30px);
}
.aovivo__agora{ display:flex; align-items:center; gap:18px; min-width:0; }
.aovivo__play{
  width:64px; height:64px; flex:none; border:0; border-radius:50%;
  background:#fff; display:grid; place-items:center; cursor:pointer;
  box-shadow:0 10px 24px -10px rgba(31,33,80,.55);
  transition:transform .25s var(--e-out);
}
.aovivo__play:hover{ transform:scale(1.06); }
.aovivo__play svg{ width:24px; height:24px; fill:var(--orange); }
.aovivo__play .ico-play{ margin-left:3px; }
.aovivo__play:focus-visible{ outline:3px solid var(--navy); outline-offset:3px; }
body.is-loading .aovivo__play{ animation:aovivoPulso 1s var(--e-io) infinite; }
@keyframes aovivoPulso{ 50%{ box-shadow:0 0 0 8px rgba(255,255,255,.25); } }

.aovivo__txt{ display:flex; flex-direction:column; min-width:0; }
.aovivo__selo{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-display); font-size:.68rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.85);
}
.aovivo__selo i{ width:7px; height:7px; border-radius:50%; background:#fff; animation:blink 1.6s var(--e-io) infinite; }
.aovivo__txt strong{
  font-family:var(--f-display); font-size:clamp(1.25rem,2vw,1.6rem); font-weight:700;
  line-height:1.15; letter-spacing:-.02em; margin-top:4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.aovivo__estado{ font-size:.86rem; color:rgba(255,255,255,.85); margin-top:2px; }

.aovivo__numeros{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; }
.aovivo__numeros div{ padding:4px clamp(12px,1.6vw,24px); border-left:1px solid rgba(255,255,255,.3); }
.aovivo__numeros dd{
  margin:0; font-family:var(--f-display); font-size:clamp(1.5rem,2.4vw,2rem);
  font-weight:700; letter-spacing:-.03em; line-height:1;
}
.aovivo__numeros dt{
  font-family:var(--f-display); font-size:.68rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.85); margin-top:6px; line-height:1.35;
}

.aovivo__link{
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  font-family:var(--f-display); font-weight:700; font-size:.95rem; color:var(--navy);
  background:#fff; border-radius:999px; padding:13px 22px; text-decoration:none;
  transition:transform .25s var(--e-out), background .2s;
}
.aovivo__link svg{ width:18px; height:18px; fill:currentColor; transition:transform .25s var(--e-out); }
.aovivo__link:hover{ background:var(--navy); color:#fff; }
.aovivo__link:hover svg{ transform:translateX(3px); }

/* as bolinhas do carrossel passam para cima da foto */
.carrossel__pontos{
  position:absolute; left:50%; bottom:clamp(10px,1.4vw,18px); transform:translateX(-50%);
  margin:0; z-index:4; padding:0 6px; border-radius:999px;
  background:rgba(28,29,58,.32); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.carrossel__ponto{ width:30px; height:34px; }
.carrossel__ponto::before{ width:8px; height:8px; background:rgba(255,255,255,.5); }

@media (max-width:1080px){
  .aovivo__grade{ grid-template-columns:minmax(0,1fr) auto; }
  .aovivo__numeros{ grid-column:1 / -1; grid-row:2; border-top:1px solid rgba(255,255,255,.3); padding-top:16px; }
  .aovivo__numeros div:first-child{ border-left:0; padding-left:0; }
}
@media (max-width:760px){
  /* no celular o cartão da foto ocupa a base: as bolinhas sobem para o topo */
  .carrossel__pontos{ bottom:auto; top:12px; }
  .aovivo__grade{ grid-template-columns:1fr; gap:16px; }
  .aovivo__play{ width:56px; height:56px; }
  .aovivo__numeros{ grid-row:auto; }
  .aovivo__link{ justify-content:center; }
  .aovivo__numeros dt{ font-size:.6rem; letter-spacing:.06em; }
}

/* ─── Botão da Classic no topo (28/10) ─── */
.nav__classic{
  display:inline-flex; align-items:center; gap:8px; flex:none;
  font-family:var(--f-display); font-weight:700; font-size:.88rem; color:var(--navy);
  border:1.5px solid var(--navy-100); border-radius:999px; padding:7px 14px 7px 8px;
  text-decoration:none; background:#fff; transition:border-color .2s, background .2s;
}
.nav__classic img{ width:24px; height:24px; display:block; }
.nav__classic:hover{ border-color:var(--navy); background:var(--navy-050); }
@media (max-width:760px){
  /* no celular, só o símbolo azul: o nome está no rótulo de acessibilidade */
  .nav__classic{ padding:0; width:44px; height:44px; justify-content:center; }
  .nav__classic span{ display:none; }
  .nav__classic img{ width:26px; height:26px; }
}


/* ═══════════════════════════════════════════════════════════
   INTERNEWS NO PADRÃO CNN (28/10)
   Título escuro, a cor da editoria só no bloquinho do canto da
   foto e no nome da editoria. Cada cartão traz a cor em --ed,
   escrita pelo gerador a partir do que a redação escolheu no
   painel.
   ═══════════════════════════════════════════════════════════ */
.ed-tab{ position:relative; }
.ed-tab::before{
  content:''; position:absolute; top:0; left:0; z-index:2;
  width:22px; height:14px; background:var(--ed, var(--orange));
  border-bottom-right-radius:5px;
}

.kick{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px;
  font-family:var(--f-display); font-size:.7rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; line-height:1.3;
}
.kick b{ color:var(--ed, var(--orange)); font-weight:800; }
.kick span{ color:var(--muted); font-weight:600; }
.kick span::before{ content:'·'; margin-right:8px; color:var(--muted); }

/* filtro: um quadradinho da cor antes do nome */
.inw-editorias .filtro__bt{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); }
.inw-editorias .filtro__bt[style]::before{
  content:''; width:10px; height:10px; border-radius:2px; background:var(--ed);
}
.inw-editorias .filtro__bt:hover{ border-color:var(--ed, var(--navy)); color:var(--ink); }
.inw-editorias .filtro__bt.is-ativo{ background:var(--ed, var(--navy)); border-color:var(--ed, var(--navy)); color:#fff; }
.inw-editorias .filtro__bt.is-ativo::before{ background:#fff; }

.inw h2, .inw h3{ color:var(--ink); }
.inw a{ text-decoration:none; }
.inw a:hover h2, .inw a:hover h3{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }

/* ─── capa ─── */
.inw-capa{
  display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:clamp(22px,3vw,40px); align-items:start;
}
.inw-lead, .inw-topo{
  position:relative; display:block; overflow:hidden; border-radius:var(--r-lg);
  background:var(--navy); isolation:isolate;
}
.inw-lead{ min-height:clamp(340px,40vw,520px); }
.inw-topo{ aspect-ratio:4/3; margin-top:16px; }
.inw-lead__img, .inw-topo__img{ position:absolute; inset:0; }
.inw-lead__img img, .inw-topo__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--e-out); }
.inw-lead:hover img, .inw-topo:hover img{ transform:scale(1.03); }
.inw-lead__txt, .inw-topo__txt{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:clamp(60px,8vw,110px) clamp(18px,2.6vw,34px) clamp(18px,2.4vw,30px);
  background:linear-gradient(180deg, rgba(14,15,40,0) 0%, rgba(14,15,40,.72) 45%, rgba(14,15,40,.92) 100%);
}
.inw-topo__txt{ padding:70px 18px 18px; }
.inw .inw-lead h2, .inw .inw-topo h2{ color:#fff; font-family:var(--f-display); font-weight:700; letter-spacing:-.02em; margin:10px 0 0; }
.inw-lead h2{ font-size:clamp(1.6rem,3vw,2.5rem); line-height:1.1; }
.inw-topo h2{ font-size:clamp(1.15rem,1.6vw,1.4rem); line-height:1.2; }
.inw-lead .kick b, .inw-topo .kick b{ background:var(--ed); color:#fff; padding:4px 9px; border-radius:4px; }
.inw-lead .kick span, .inw-topo .kick span, .inw-lead .kick span::before, .inw-topo .kick span::before{ color:rgba(255,255,255,.85); }

.inw-tit{
  font-family:var(--f-display); font-size:1.5rem; font-weight:800; letter-spacing:-.02em;
  color:var(--ink); margin:0 0 4px;
}
.inw-tit::after, .inw-sec__tit::after{
  content:''; display:inline-block; width:.26em; height:.26em; margin-left:3px;
  background:var(--ed, var(--orange));
}
.inw-capa__lado{ min-width:0; }
.inw-capa__lado .anuncio--lateral{ margin-top:18px; }

/* ─── lista: foto pequena e título ─── */
.inw-lista{ display:flex; flex-direction:column; }
.inw-linha{
  display:grid; grid-template-columns:clamp(96px,9vw,128px) minmax(0,1fr); gap:14px; align-items:start;
  padding:14px 0; border-top:1px solid var(--line);
}
.inw-lista .inw-linha:first-child{ border-top:0; }
.inw-linha__img{ border-radius:10px; overflow:hidden; aspect-ratio:4/3; background:var(--navy-050); }
.inw-linha__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.inw-linha__txt{ min-width:0; display:flex; flex-direction:column; gap:5px; }
.inw-linha h3{ font-family:var(--f-display); font-size:.98rem; font-weight:700; line-height:1.3; margin:0; overflow-wrap:anywhere; }
.inw-linha time{ font-size:.74rem; color:var(--muted); }

/* ─── faixa: três cartões ─── */
.inw-faixa{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.4vw,32px);
  margin-top:clamp(32px,4vw,48px); padding-top:clamp(26px,3vw,36px); border-top:1px solid var(--line);
}
.inw-card{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.inw-card__img{ border-radius:var(--r); overflow:hidden; aspect-ratio:16/10; background:var(--navy-050); margin-bottom:4px; }
.inw-card__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.inw-card h3{ font-family:var(--f-display); font-size:1.14rem; font-weight:700; line-height:1.25; margin:0; }
.inw-card p{
  font-size:.92rem; line-height:1.5; color:var(--muted); margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* ─── seções por editoria ─── */
.inw-secoes{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,3vw,40px);
  margin-top:clamp(36px,4.4vw,56px); padding-top:clamp(28px,3.4vw,40px); border-top:1px solid var(--line);
}
.inw-sec{ min-width:0; }
.inw-sec__tit{
  font-family:var(--f-display); font-size:clamp(1.6rem,2.4vw,2rem); font-weight:800;
  letter-spacing:-.025em; color:var(--ed); margin:0;
}
.inw-sec .inw-lista{ margin-top:6px; }
.inw-sec__mais{
  display:inline-flex; align-items:center; gap:6px; margin-top:12px;
  font-size:.9rem; color:var(--muted); font-weight:500;
}
.inw-sec__mais svg{ width:16px; height:16px; fill:currentColor; transition:transform .25s var(--e-out); }
.inw-sec__mais:hover{ color:var(--ed); }
.inw-sec__mais:hover svg{ transform:translateX(3px); }

/* ─── matéria ─── */
.materia__principal > .kick{ margin-bottom:12px; font-size:.78rem; }
.materia .materia__foto.ed-tab::before{ width:30px; height:18px; border-bottom-right-radius:6px; border-top-left-radius:var(--r-xl); }
.materia .materia__titulo{ color:var(--ink); }
.materia__lado.inw{
  position:sticky; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:20px 20px 10px;
}

/* ─── home: o bloco interNews ganha o mesmo bloquinho ─── */
.news__body .kick{ margin-bottom:10px; }

@media (max-width:1080px){
  .inw-capa{ grid-template-columns:1fr; }
  .inw-secoes{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px){
  .inw-faixa, .inw-secoes{ grid-template-columns:1fr; }
  .inw-lead{ min-height:360px; }
}
@media (max-width:620px){
  .materia .materia__foto.ed-tab::before{ border-top-left-radius:0; }
}

/* assuntos da matéria: pílulas discretas, abaixo da data */
.etiquetas--materia{ display:flex; flex-wrap:wrap; gap:6px; margin:-8px 0 clamp(20px,2.6vw,28px); }
.etiquetas--materia:empty{ display:none; }
.etiquetas--materia .assunto{ background:var(--navy-050); color:var(--navy); padding:5px 11px; border-radius:999px; }
.etiquetas--materia .assunto::before{ display:none; }

/* ─── Corte para as redes, na barra de baixo (28/10) ─── */
.dock__corte{
  display:flex; align-items:center; gap:6px; flex:none;
  padding:.5em .85em; border-radius:100px; border:1px solid var(--line); background:#fff;
  font-family:var(--f-display); font-size:.8rem; font-weight:600; color:var(--navy);
  cursor:pointer; white-space:nowrap; transition:border-color .22s, color .22s, background .22s;
}
.dock__corte svg{ width:16px; height:16px; fill:currentColor; flex:none; }
.dock__corte:hover{ border-color:var(--orange); color:var(--orange); }
.dock__corte.is-busy{ color:var(--orange); border-color:var(--orange); background:var(--orange-050); cursor:progress; }
.dock__corte.is-pronto,
.cut9x16.is-pronto{ background:var(--orange); border-color:var(--orange); color:#fff; animation:cortePronto 1.2s var(--e-io) infinite; }
@keyframes cortePronto{ 50%{ box-shadow:0 0 0 6px rgba(255,66,0,.18); } }
.cut9x16.is-busy{ opacity:1; color:var(--orange); }
body.is-classic .dock__corte{ display:none; }
@media (max-width:760px){
  /* no celular, só o ícone, a não ser enquanto grava ou está pronto */
  .dock__corte{ padding:0; width:36px; height:36px; justify-content:center; }
  .dock__corte span{ display:none; }
  /* gravando ou pronto: o aviso sobe num balão acima do botão, e a
     barra não muda de tamanho nem empurra o nome do programa */
  .dock__corte{ position:relative; }
  .dock__corte.is-busy span, .dock__corte.is-pronto span{
    display:block; position:absolute; right:-4px; bottom:calc(100% + 12px);
    background:var(--orange); color:#fff; font-size:.8rem; padding:8px 13px;
    border-radius:999px; box-shadow:0 10px 24px -8px rgba(31,33,80,.45);
  }
  .dock__live{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
}
@media (prefers-reduced-motion:reduce){ .dock__corte.is-pronto, .cut9x16.is-pronto{ animation:none; } }

/* celular estreito (iPhone SE): play, voltar 30 s, compartilhar áudio,
   nome do programa e o corte não cabem junto com a troca de rádio.
   A troca sai daqui; a Classic continua no botão do topo e na página dela. */
@media (max-width:620px){ .dock__inner{ gap:10px; } }
@media (max-width:400px){ .dock__radios{ display:none; } }

/* ═══════════════════════════════════════════════════════════
   CORTE PELO SERVIDOR: a folha de escolher o trecho (28/10)
   No celular sobe de baixo; no computador fica no meio.
   ═══════════════════════════════════════════════════════════ */
.dock__corte[hidden]{ display:none; }
html.tem-folha{ overflow:hidden; }
.corte-folha{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:16px; }
.corte-folha[hidden]{ display:none; }
.corte-folha__fundo{ position:absolute; inset:0; background:rgba(14,15,40,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.corte-folha__caixa{
  position:relative; width:min(420px,100%); max-height:calc(100dvh - 32px); overflow:auto;
  background:#fff; border-radius:var(--r-xl); padding:20px 22px 22px; color:var(--ink);
  box-shadow:0 30px 60px -20px rgba(14,15,40,.5);
}
.corte-folha__cab{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.corte-folha__cab b{ font-family:var(--f-display); font-size:1.2rem; color:var(--navy); }
.corte-folha__x{ width:38px; height:38px; border-radius:50%; border:0; background:var(--navy-050); display:grid; place-items:center; cursor:pointer; }
.corte-folha__x svg{ width:18px; height:18px; fill:var(--navy); }
.corte-folha__txt{ font-size:.92rem; color:var(--muted); line-height:1.5; margin:0 0 14px; }
.corte-folha__rot{ display:flex; justify-content:space-between; font-family:var(--f-display); font-weight:700; font-size:.82rem; color:var(--navy); margin:14px 0 8px; }
.corte-folha__rot output{ color:var(--orange); }
.corte-folha__dur{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.corte-folha__dur button{
  font:inherit; font-family:var(--f-display); font-weight:700; font-size:.95rem; padding:11px 0;
  border:1.5px solid var(--line); border-radius:var(--r); background:#fff; color:var(--navy); cursor:pointer;
}
.corte-folha__dur button.is-on{ border-color:var(--orange); background:var(--orange-050); color:var(--orange); }
.corte-folha input[type=range]{ width:100%; accent-color:var(--orange); }
.corte-folha__ajuda{ font-size:.8rem; color:var(--muted); margin:4px 0 0; }
.corte-folha__gerar, .corte-folha__share, .corte-folha__baixar{
  display:flex; align-items:center; justify-content:center; width:100%;
  font-family:var(--f-display); font-weight:700; font-size:1rem; border-radius:999px; padding:14px 18px;
  cursor:pointer; text-decoration:none; border:0;
}
.corte-folha__gerar{ background:var(--orange); color:#fff; margin-top:18px; }
.corte-folha__acoes{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.corte-folha__acoes > :only-child, .corte-folha__share[hidden] + .corte-folha__baixar{ grid-column:1 / -1; }
.corte-folha__share{ background:var(--orange); color:#fff; }
.corte-folha__share[hidden]{ display:none; }
.corte-folha__baixar{ background:var(--navy-050); color:var(--navy); }
.corte-folha__outro{ display:block; margin:12px auto 0; background:none; border:0; font:inherit; font-size:.88rem; color:var(--muted); text-decoration:underline; cursor:pointer; }
.corte-folha__video{ display:block; width:min(100%,260px); aspect-ratio:9/16; margin:4px auto 0; border-radius:var(--r); background:#000; object-fit:cover; }
.corte-folha__passo[data-passo=montando]{ text-align:center; padding:26px 0 10px; }
.corte-folha__roda{ display:inline-block; width:42px; height:42px; border-radius:50%; border:4px solid var(--orange-100); border-top-color:var(--orange); animation:spin .9s linear infinite; margin-bottom:14px; }
.corte-folha__erro{ margin:14px 0 0; padding:10px 12px; border-radius:var(--r); background:#FFF1ED; color:#9E2800; font-size:.88rem; }
@media (max-width:620px){
  .corte-folha{ align-items:flex-end; padding:0; }
  .corte-folha__caixa{ width:100%; border-radius:var(--r-xl) var(--r-xl) 0 0; padding-bottom:calc(22px + env(safe-area-inset-bottom, 0px)); }
}


/* ═══════════════════════════════════════════════════════════
   INTERNEWS SÓBRIO (28/10, segunda rodada)
   Pedido: mais sério, menu preto, e nada de copiar a CNN.
   · cabeçalho do portal numa faixa preta, como jornal
   · menu preto com lugares e editorias, fixo ao rolar
   · títulos na Inter, que lê como jornal (a Outfit é arredondada)
   · a cor da editoria vira um quadradinho ao lado do nome, em vez
     do bloquinho no canto da foto
   ═══════════════════════════════════════════════════════════ */
.portal.inw{ background:#fff; padding-top:0; }
.ed-tab::before{ content:none; }

.inw .portal__barra{
  background:#0E0F1A; color:#fff; margin:0; padding:clamp(24px,3.4vw,40px) 0 clamp(20px,2.6vw,30px);
  align-items:center; box-shadow:0 0 0 100vmax #0E0F1A; clip-path:inset(0 -100vmax);
}
.inw .portal__marca{ color:#fff; font-family:'Inter',system-ui,sans-serif; font-weight:800; letter-spacing:-.045em; font-size:clamp(2.1rem,4.6vw,3.3rem); }
.inw .portal__sub{ color:rgba(255,255,255,.6); font-size:.95rem; }
.inw .portal__busca input{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16); color:#fff; }
.inw .portal__busca input::placeholder{ color:rgba(255,255,255,.5); }
.inw .portal__busca input:focus{ border-color:#fff; outline-color:#fff; }
.inw .portal__busca svg{ fill:rgba(255,255,255,.6); }

.portal .inw-menu{
  background:#000; margin:0 0 clamp(26px,3.2vw,40px); padding:0; gap:0;
  box-shadow:0 0 0 100vmax #000; clip-path:inset(0 -100vmax);
  border-top:1px solid rgba(255,255,255,.1);
}
.inw-menu .filtro__bt{
  display:inline-flex; align-items:center; gap:8px; flex:none;
  font-family:'Inter',system-ui,sans-serif; font-size:.76rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(255,255,255,.8); background:transparent; border:0; border-radius:0; padding:15px 16px;
}
.inw-menu .filtro__bt:hover{ color:#fff; background:rgba(255,255,255,.08); border:0; }
.inw-menu .filtro__bt.is-ativo{ background:#fff; color:#000; }
.inw-menu .filtro__bt--ed::before{ content:''; width:9px; height:9px; background:var(--ed); flex:none; }
.inw-menu .filtro__bt:focus-visible{ outline:2px solid #fff; outline-offset:-4px; }

.inw h2, .inw h3, .materia .materia__titulo, .news__body h3{
  font-family:'Inter',system-ui,sans-serif; font-weight:800; letter-spacing:-.018em;
}
.inw-linha h3{ font-weight:700; letter-spacing:-.01em; }
.materia .materia__titulo{ letter-spacing:-.03em; }

/* o marcador da editoria: quadradinho da cor e o nome em preto */
.kick{ font-family:'Inter',system-ui,sans-serif; letter-spacing:.07em; }
.kick b{ display:inline-flex; align-items:center; gap:6px; color:var(--ink); }
.kick b::before{ content:''; width:9px; height:9px; background:var(--ed, var(--orange)); flex:none; }
.inw-lead .kick b::before, .inw-topo .kick b::before{ display:none; }

/* títulos de seção: caixa alta, preto, com o quadrado da cor */
.inw-tit, .inw-sec__tit{
  display:flex; align-items:center; gap:10px;
  font-family:'Inter',system-ui,sans-serif; font-size:1rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:#000; margin:0 0 6px;
}
.inw-tit::after, .inw-sec__tit::after{ content:none; }
.inw-tit::before, .inw-sec__tit::before{ content:''; width:12px; height:12px; background:var(--ed, #000); flex:none; }
.inw-sec__tit{ padding-bottom:12px; }

@media (max-width:760px){
  /* no celular o menu vai de borda a borda e desliza para o lado */
  .portal .inw-menu{ margin-inline:calc(var(--pad) * -1); padding-inline:calc(var(--pad) - 16px); }
  .inw-menu .filtro__bt{ padding:14px 13px; }
}
.inw .inw-lead h2, .inw .inw-topo h2{ font-family:'Inter',system-ui,sans-serif; font-weight:800; letter-spacing:-.025em; }


/* ═══════════════════════════════════════════════════════════
   INTERATIVA CLASSIC · AZUL-MARINHO (28/10, segunda versão)
   A versão com dourado e fonte serifada não agradou: a emissora
   prefere o azul do logo e a fonte do site. Ficou assim:
   · azul-marinho dominante, com o logo azul sobre fundo claro
   · nada de laranja nesta página (a variável --orange vira azul)
   · nada de dourado; o destaque é um azul royal mais vivo
   Os nomes de classe são os mesmos que o gerar-classic.py escreve.
   ═══════════════════════════════════════════════════════════ */
:root{
  --cl-noite:#0E1036;
  --cl-azul:#1B1E52;
  --cl-marinho:#292B62;
  --cl-royal:#3D4BC4;
  --cl-gelo:#EEF0F8;
  --cl-linha:#DADDEE;
}

/* sem laranja: tudo que usa a cor da marca vira azul nesta página e
   no player enquanto a Classic toca */
.pg-classic, body.is-classic .dock{
  --orange:#292B62; --orange-600:#1B1E52; --orange-700:#0E1036;
  --orange-050:#EEF0F8; --orange-100:#DADDEE;
}

/* ─── botões ─── */
.cl-bt{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f-display); font-weight:600; font-size:.98rem;
  border-radius:999px; padding:15px 28px; cursor:pointer; text-decoration:none; border:0;
  transition:transform .3s var(--e-out), background .25s, box-shadow .25s;
}
.cl-bt svg{ width:16px; height:16px; fill:currentColor; }
.cl-bt--cheio{ background:var(--cl-marinho); color:#fff; box-shadow:0 12px 26px -14px rgba(14,16,54,.7); }
.cl-bt--cheio:hover{ background:var(--cl-noite); transform:translateY(-2px); }
.cl-bt--vazado{ background:transparent; color:var(--cl-marinho); box-shadow:inset 0 0 0 1.5px var(--cl-marinho); }
.cl-bt--vazado:hover{ background:var(--cl-marinho); color:#fff; }
/* sobre fundo azul, os mesmos botões em branco */
.cl-escuro .cl-bt--cheio{ background:#fff; color:var(--cl-marinho); }
.cl-escuro .cl-bt--cheio:hover{ background:var(--cl-gelo); }
.cl-escuro .cl-bt--vazado{ color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6); }
.cl-escuro .cl-bt--vazado:hover{ background:rgba(255,255,255,.1); }
.cl-bt:focus-visible{ outline:2px solid var(--cl-royal); outline-offset:3px; }

/* ─── capa: fundo claro e o logo azul ─── */
.cl-hero{
  position:relative; overflow:hidden; color:var(--cl-marinho);
  padding:calc(var(--nav-h) + clamp(28px,4vw,60px)) 0 clamp(48px,6vw,90px);
  background:
    radial-gradient(55% 75% at 92% 10%, rgba(61,75,196,.14) 0%, rgba(61,75,196,0) 60%),
    var(--cl-gelo);
}
.cl-hero__grade{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(32px,5vw,72px); align-items:center; }
.cl-hero__logo{ margin:0; line-height:0; }
.cl-hero__logo img{ width:min(100%,480px); height:auto; }
.cl-hero__frase{
  font-family:var(--f-display); font-weight:700; font-size:clamp(1.55rem,2.6vw,2.15rem); line-height:1.15;
  letter-spacing:-.02em; color:var(--cl-marinho); margin:clamp(18px,2.4vw,28px) 0 0;
}
.cl-hero__frase em, .cl-tit em{ font-style:normal; color:var(--cl-royal); }
.cl-hero__lead{ font-size:1.02rem; line-height:1.7; color:var(--ink); opacity:.82; max-width:48ch; margin:14px 0 0; }
.cl-hero__acoes{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }

/* o tocando agora: cartão azul-marinho */
.pg-classic .cagora{
  background:linear-gradient(160deg, var(--cl-azul), var(--cl-noite)); color:#fff; border:0;
  box-shadow:0 30px 60px -28px rgba(14,16,54,.65);
}
.pg-classic .cagora__rot{ color:#AEB8FF; letter-spacing:.18em; }
.pg-classic .cagora__arte{ background:#fff; }
.pg-classic .cagora__txt b{ color:#fff; }
.pg-classic .cagora__txt span{ color:rgba(255,255,255,.72); }
.pg-classic .cagora__txt em{ color:#AEB8FF; }
.pg-classic .cagora__barra{ background:rgba(255,255,255,.14); }
.pg-classic .cagora__barra i{ background:#fff; }
.pg-classic .cagora__seguir{ color:rgba(255,255,255,.62); }
.pg-classic .cagora__seguir span{ color:#fff; }

/* ─── seções ─── */
.cl-sec{ padding-block:clamp(64px,8vw,116px); background:#fff; color:var(--cl-marinho); }
.cl-sobre{
  display:inline-block; font-family:var(--f-display); font-size:.74rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--cl-royal);
}
.cl-tit{
  font-family:var(--f-display); font-weight:700; font-size:clamp(2rem,4vw,3.2rem); line-height:1.05;
  letter-spacing:-.03em; color:var(--cl-marinho); margin:12px 0 0;
}
.cl-lead{ font-size:1.02rem; line-height:1.7; color:var(--muted); max-width:60ch; margin:16px 0 0; }

.cl-escuro{ background:linear-gradient(170deg, var(--cl-azul), var(--cl-noite)); color:#fff; }
.cl-escuro .cl-tit{ color:#fff; }
.cl-escuro .cl-tit em{ color:#AEB8FF; }
.cl-escuro .cl-sobre{ color:#AEB8FF; }
.cl-escuro .cl-lead{ color:rgba(255,255,255,.72); }

.cl-exp__lista{ list-style:none; padding:0; margin:clamp(32px,4vw,50px) 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.2vw,26px); }
.cl-exp__item{ padding:28px 26px; border-radius:var(--r-xl); background:var(--cl-gelo); border:1px solid var(--cl-linha); }
.cl-exp__ico{ display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--cl-marinho); margin-bottom:18px; }
.cl-exp__ico svg{ width:24px; height:24px; fill:#fff; }
.cl-exp__item b{ display:block; font-family:var(--f-display); font-weight:700; font-size:1.25rem; color:var(--cl-marinho); line-height:1.2; }
.cl-exp__item p{ color:var(--muted); line-height:1.6; margin:10px 0 0; font-size:.95rem; }

/* grade por horário, no azul */
.pg-classic .cblocos{ margin-top:clamp(30px,4vw,46px); }
.pg-classic .cbloco{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#fff; padding:24px 22px 26px; }
.pg-classic .cbloco__hora{ font-family:var(--f-display); font-size:1.3rem; font-weight:700; color:#fff; letter-spacing:-.01em; }
.pg-classic .cbloco__hora i{ font-style:normal; font-weight:500; font-size:.95rem; color:rgba(255,255,255,.6); }
.pg-classic .cbloco b{ font-family:var(--f-display); font-weight:700; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:#AEB8FF; margin-top:10px; }
.pg-classic .cbloco p{ color:rgba(255,255,255,.7); }
.pg-classic .cbloco.is-on{ background:rgba(255,255,255,.14); border-color:#fff; }
.pg-classic .cbloco__no-ar{ background:#fff; color:var(--cl-marinho); }

/* para anunciantes */
.cl-anuncie{ background:var(--cl-gelo); }
.cl-anuncie .cl-bt{ margin-top:26px; }
.cl-anuncie__grade{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(30px,5vw,72px); align-items:center; }
.cl-anuncie__pontos{ list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.cl-anuncie__pontos li{
  display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:16px; align-items:start;
  background:#fff; border-radius:var(--r-lg); padding:20px 22px; border:1px solid var(--cl-linha);
}
.cl-anuncie__pontos li::before{ content:''; grid-row:span 2; width:12px; height:12px; margin-top:5px; border-radius:50%; background:var(--cl-royal); }
.cl-anuncie__pontos b{ font-family:var(--f-display); font-weight:700; font-size:1.08rem; color:var(--cl-marinho); line-height:1.25; }
.cl-anuncie__pontos span{ color:var(--muted); font-size:.93rem; line-height:1.55; margin-top:4px; }

/* tocou há pouco, no azul */
.pg-classic .chist{ margin-top:clamp(26px,3vw,40px); }
.pg-classic .chist li{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#fff; }
.pg-classic .chist time{ color:#AEB8FF; }
.pg-classic .chist b{ color:#fff; }
.pg-classic .chist span, .pg-classic .chist .chist__vazio{ color:rgba(255,255,255,.62); }

/* ─── cabeçalho, player e rodapé sem laranja ─── */
body.is-classic .nav .btn--live{ background:var(--cl-marinho); color:#fff; }
body.is-classic .nav .btn--live:hover{ background:var(--cl-noite); }
.pg-classic .nav__classic{ border-color:var(--cl-marinho); background:var(--cl-gelo); }
.pg-classic .flutua, .pg-classic .dock__tv, .pg-classic .dock__corte{ display:none; }
.pg-classic .dock__radios button.is-on, body.is-classic .dock__radios button.is-on{ background:var(--cl-marinho); color:#fff; }

/* ─── home: a chamada da Classic ─── */
.chamada-classic{ background:linear-gradient(160deg, var(--cl-azul), var(--cl-noite)); border:0; }
.chamada-classic small{ color:#AEB8FF; letter-spacing:.22em; }
.chamada-classic p{ color:rgba(255,255,255,.78); }
.chamada-classic__bts .cl-bt{ padding:13px 24px; }

@media (max-width:1080px){
  .cl-exp__lista{ grid-template-columns:1fr; }
  .cl-anuncie__grade{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .cl-hero__grade{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .cl-hero__acoes .cl-bt, .cl-anuncie .cl-bt{ width:100%; }
  .chamada-classic__bts .cl-bt{ flex:1; }
}

/* ─── O player na cor da rádio que está selecionada (28/10) ───
   101,7 em laranja, Classic em azul-escuro, em qualquer página.
   Na página da Classic o resto da página continua sem laranja, mas o
   player segue a rádio escolhida. */
.pg-classic:not(.is-classic) .dock{
  --orange:#FF4200; --orange-600:#E63A00; --orange-700:#C43100;
  --orange-050:#FFF5F1; --orange-100:#FFE4D9;
}
body.is-classic .dock__play{ background:var(--cl-marinho); }
body.is-classic .dock__play:hover{ background:var(--cl-noite); }
body.is-classic .dock__live{ color:var(--cl-royal); }
body.is-classic .dock__live i{ background:var(--cl-royal); }

/* ─── A moldura: a página abre por dentro e o som continua (bloco 15) ─── */
.moldura{
  position:fixed; left:0; top:0; z-index:80; width:100%; border:0; background:#fff;
  height:calc(100vh - var(--dock-h, 76px));
  height:calc(100dvh - var(--dock-h, 76px));
}
body.com-moldura{ overflow:hidden; }
body.com-moldura > :not(.dock):not(.moldura):not(audio):not(script):not(.corte-folha):not(.r30-pede):not(.r30-cartao){ display:none !important; }
body.com-moldura .dock__tv{ display:none; }
/* a página de dentro não tem player próprio: o de fora é que toca */
html.em-moldura .dock{ display:none !important; }
.pg-classic:not(.is-classic) .nav .btn--live{ background:#FF4200; color:#fff; }

/* na Classic, o botão do topo leva de volta à 101,7, em laranja */
.nav__classic--fm, .pg-classic .nav__classic--fm{ background:#FF4200; border-color:#FF4200; color:#fff; }
.nav__classic--fm:hover, .pg-classic .nav__classic--fm:hover{ background:#E63A00; border-color:#E63A00; }
.nav__classic--fm img{ background:#fff; border-radius:50%; padding:2px; }


/* ═══════════════════════════════════════════════════════════
   CLASSIC · O ACABAMENTO (28/10)
   Manifesto, linha do dia com o "agora", capas no que tocou,
   o celular desenhado e a chamada final. Sempre no azul-marinho.
   ═══════════════════════════════════════════════════════════ */

/* barrinhas de som no "Tocando agora" */
.cagora__rot{ display:inline-flex; align-items:center; gap:10px; }
.cl-eq{ display:inline-flex; align-items:flex-end; gap:2px; height:12px; }
.cl-eq i{ width:3px; height:100%; border-radius:2px; background:#AEB8FF; transform-origin:50% 100%; animation:clEq 1.1s var(--e-io) infinite; }
.cl-eq i:nth-child(2){ animation-delay:-.3s; }
.cl-eq i:nth-child(3){ animation-delay:-.6s; }
.cl-eq i:nth-child(4){ animation-delay:-.15s; }
@keyframes clEq{ 0%,100%{ transform:scaleY(.35); } 50%{ transform:scaleY(1); } }
.pg-classic .cagora{ transition:transform .4s var(--e-out); }
.pg-classic .cagora__arte{ width:112px; height:112px; box-shadow:0 14px 30px -14px rgba(0,0,0,.55); }

/* ─── manifesto ─── */
.cl-manifesto{ padding-block:clamp(56px,7vw,96px); position:relative; overflow:hidden; }
.cl-manifesto::before{
  content:''; position:absolute; right:-8%; top:50%; width:min(52vw,640px); aspect-ratio:1; transform:translateY(-50%);
  background:url('../img/logo/classic-simbolo.svg') center/contain no-repeat; opacity:.05; filter:brightness(0) invert(1);
  pointer-events:none;
}
.cl-manifesto__frase{
  font-family:var(--f-display); font-weight:700; font-size:clamp(2.2rem,5.6vw,4.6rem); line-height:1;
  letter-spacing:-.04em; color:#fff; margin:0; position:relative;
}
.cl-manifesto__frase em{ font-style:normal; color:#AEB8FF; }
.cl-manifesto__fatos{
  list-style:none; padding:0; margin:clamp(30px,4vw,48px) 0 0; position:relative;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,24px);
}
.cl-manifesto__fatos li{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-lg);
  padding:20px 22px; display:flex; flex-direction:column; gap:4px;
}
.cl-manifesto__fatos b{ font-family:var(--f-display); font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:700; color:#fff; letter-spacing:-.02em; }
.cl-manifesto__fatos span{ color:rgba(255,255,255,.7); font-size:.95rem; }

/* cartões que sobem um pouco ao passar o mouse */
.cl-exp__item, .cl-anuncie__pontos li, .pg-classic .cbloco{ transition:transform .35s var(--e-out), box-shadow .35s var(--e-out), border-color .25s, background .25s; }
.cl-exp__item:hover, .cl-anuncie__pontos li:hover{ transform:translateY(-4px); box-shadow:0 22px 40px -26px rgba(14,16,54,.45); }
.pg-classic .cbloco:hover{ transform:translateY(-4px); }

/* ─── a linha do dia ─── */
.cl-dia{ margin:clamp(30px,4vw,44px) 0 0; }
.cl-dia__regua{ position:relative; height:46px; border-radius:12px; overflow:visible; }
.cl-dia__bloco{
  position:absolute; top:0; bottom:0; display:flex; align-items:center; padding:0 12px;
  background:rgba(255,255,255,.08); border-right:2px solid var(--cl-azul); color:rgba(255,255,255,.75);
  font-family:var(--f-display); font-size:.82rem; transition:background .3s;
}
.cl-dia__bloco:first-child{ border-radius:12px 0 0 12px; }
.cl-dia__bloco:nth-last-child(2){ border-radius:0 12px 12px 0; border-right:0; }
.cl-dia__bloco b{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-dia__bloco.is-on{ background:rgba(174,184,255,.28); color:#fff; }
.cl-dia__agora{ position:absolute; top:-8px; bottom:-8px; width:0; z-index:2; transition:left 1s var(--e-out); }
.cl-dia__agora i{
  position:absolute; left:-7px; top:50%; width:14px; height:14px; margin-top:-7px; border-radius:50%;
  background:#fff; box-shadow:0 0 0 5px rgba(255,255,255,.22), 0 0 0 10px rgba(255,255,255,.08);
  animation:clPulso 2s var(--e-io) infinite;
}
.cl-dia__agora em{
  position:absolute; left:50%; bottom:100%; transform:translateX(-50%); margin-bottom:6px;
  font-style:normal; font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cl-marinho); background:#fff; padding:3px 8px; border-radius:999px; white-space:nowrap;
}
@keyframes clPulso{ 50%{ box-shadow:0 0 0 8px rgba(255,255,255,.18), 0 0 0 16px rgba(255,255,255,.05); } }
.cl-dia__horas{ position:relative; height:22px; margin-top:8px; }
.cl-dia__h{ position:absolute; transform:translateX(-50%); font-size:.72rem; color:rgba(255,255,255,.5); font-variant-numeric:tabular-nums; }
.cl-dia__h:first-child{ transform:none; }
.cl-dia__h:last-child{ transform:translateX(-100%); }
.cl-dia__status{ margin:14px 0 0; color:rgba(255,255,255,.75); font-size:.98rem; }
.cl-dia__status b{ color:#fff; }

.cbloco__ico{ display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.1); margin-bottom:14px; }
.cbloco__ico svg{ width:22px; height:22px; fill:#AEB8FF; }
.pg-classic .cbloco.is-on .cbloco__ico{ background:#fff; }
.pg-classic .cbloco.is-on .cbloco__ico svg{ fill:var(--cl-marinho); }

/* ─── o que tocou: cartões com a capa ─── */
.pg-classic .chist{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,22px); max-width:none; }
.pg-classic .chist li{
  display:flex; flex-direction:column; gap:0; padding:0; overflow:hidden;
  background:#fff; border:1px solid var(--cl-linha); border-radius:var(--r-lg); color:var(--cl-marinho);
  transition:transform .35s var(--e-out), box-shadow .35s var(--e-out);
}
.pg-classic .chist li:hover{ transform:translateY(-4px); box-shadow:0 22px 40px -26px rgba(14,16,54,.45); }
.chist__capa{ width:100%; aspect-ratio:1; object-fit:cover; display:block; background:var(--cl-gelo); }
.chist__txt{ display:flex; flex-direction:column; gap:3px; padding:14px 16px 16px; min-width:0; }
.pg-classic .chist b{ font-family:var(--f-display); font-weight:700; font-size:1rem; color:var(--cl-marinho); line-height:1.25; overflow-wrap:anywhere; }
.pg-classic .chist span{ color:var(--muted); font-size:.88rem; }
.pg-classic .chist time{ grid-row:auto; align-self:flex-start; margin-top:6px; font-size:.75rem; font-weight:700; color:var(--cl-royal); background:var(--cl-gelo); padding:2px 8px; border-radius:999px; }
.pg-classic .chist .chist__vazio{ grid-column:1 / -1; padding:18px; color:var(--muted); }

/* ─── leve com você: o celular desenhado ─── */
.cl-app{ background:var(--cl-gelo); }
.cl-app__grade{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(30px,6vw,90px); align-items:center; }
.cl-celular{
  width:min(280px,72vw); aspect-ratio:9/18.5; margin-inline:auto; border-radius:44px; padding:12px;
  background:linear-gradient(160deg,#2B2E66,#0E1036); box-shadow:0 40px 80px -36px rgba(14,16,54,.7), inset 0 0 0 2px rgba(255,255,255,.08);
}
.cl-celular__tela{
  height:100%; border-radius:34px; padding:34px 22px 26px; display:flex; flex-direction:column; align-items:center; text-align:center;
  background:radial-gradient(80% 50% at 50% 30%, rgba(61,75,196,.55), rgba(14,16,54,0) 70%), linear-gradient(170deg,#1B1E52,#0B0D2A);
  color:#fff;
}
.cl-celular__logo{ width:120px; height:auto; opacity:.95; }
.cl-celular__capa{ width:82%; aspect-ratio:1; object-fit:cover; border-radius:18px; margin:26px 0 18px; background:#fff; box-shadow:0 20px 40px -20px rgba(0,0,0,.6); }
.cl-celular__titulo{ font-family:var(--f-display); font-size:1rem; line-height:1.25; }
.cl-celular__artista{ font-size:.82rem; color:rgba(255,255,255,.65); margin-top:2px; }
.cl-celular__barra{ width:100%; height:4px; border-radius:999px; background:rgba(255,255,255,.18); margin:auto 0 18px; overflow:hidden; }
.cl-celular__barra i{ display:block; width:42%; height:100%; background:#fff; }
.cl-celular__play{ width:54px; height:54px; border-radius:50%; background:#fff; display:grid; place-items:center; }
.cl-celular__play svg{ width:22px; height:22px; fill:var(--cl-marinho); margin-left:3px; }
.cl-app__passos{ list-style:none; padding:0; margin:22px 0 26px; display:grid; gap:12px; }
.cl-app__passos li{ display:flex; align-items:center; gap:14px; color:var(--ink); font-size:.98rem; }
.cl-app__passos span{
  flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:var(--cl-marinho); color:#fff; font-family:var(--f-display); font-weight:700; font-size:.9rem;
}
.cl-bt__ico{ width:18px; height:18px; fill:currentColor; }

/* ─── chamada final ─── */
.cl-fim{ padding-block:clamp(60px,8vw,110px); }
.cl-fim__grade{ display:flex; align-items:center; justify-content:space-between; gap:30px; }
.cl-fim__frase{ font-family:var(--f-display); font-weight:700; font-size:clamp(2.2rem,5.4vw,4.4rem); line-height:1; letter-spacing:-.04em; color:#fff; margin:0; }
.cl-fim__frase em{ font-style:normal; color:#AEB8FF; }
.cl-fim__play{
  flex:none; width:clamp(96px,11vw,132px); aspect-ratio:1; border-radius:50%; border:0; cursor:pointer;
  background:#fff; display:grid; place-items:center;
  box-shadow:0 0 0 14px rgba(255,255,255,.08), 0 0 0 30px rgba(255,255,255,.04);
  transition:transform .35s var(--e-out);
}
.cl-fim__play:hover{ transform:scale(1.06); }
.cl-fim__play svg{ width:40%; height:40%; fill:var(--cl-marinho); margin-left:6%; }
body.is-classic.is-playing .cl-fim__play svg{ display:none; }
body.is-classic.is-playing .cl-fim__play::after{
  content:''; width:30%; height:34%;
  background:linear-gradient(90deg,var(--cl-marinho) 0 36%,transparent 36% 64%,var(--cl-marinho) 64% 100%);
}

@media (max-width:1080px){
  .pg-classic .chist{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:860px){
  .cl-manifesto__fatos{ grid-template-columns:1fr; }
  .cl-app__grade{ grid-template-columns:1fr; }
  .cl-dia__bloco b{ font-size:.72rem; }
}
@media (max-width:620px){
  .pg-classic .chist{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cl-fim__grade{ flex-direction:column; align-items:flex-start; }
  .cl-dia__bloco{ padding:0 6px; }
  .cl-dia__h{ font-size:.66rem; }
}
@media (prefers-reduced-motion:reduce){
  .cl-eq i, .cl-dia__agora i{ animation:none; }
}

/* o que tocou: 5 por linha; no celular, uma fileira que desliza */
.cl-app__grade > *{ min-width:0; }
.pg-classic .chist{ grid-template-columns:repeat(5,minmax(0,1fr)); }
@media (max-width:1080px){
  .pg-classic .chist{
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(180px,42%);
    overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:thin;
  }
  .pg-classic .chist li{ scroll-snap-align:start; }
}
@media (max-width:620px){
  .pg-classic .chist{ grid-auto-columns:minmax(160px,62%); }
}
.cl-app__passos p{ margin:0; min-width:0; }

/* ═══════════════════════════════════════════════════════════
   CLASSIC NO CELULAR (28/10)
   Menos rolagem e mais cara de aplicativo: abertura enxuta,
   destaques em linha, a experiência deslizando para o lado,
   os blocos em 2x2 e o celular desenhado menor.
   ═══════════════════════════════════════════════════════════ */
@media (max-width:620px){
  .cl-sec{ padding-block:52px; }
  .cl-tit{ font-size:2rem; }
  .cl-lead{ font-size:.96rem; margin-top:12px; }

  /* abertura */
  .cl-hero{ padding-top:calc(var(--nav-h) + 22px); padding-bottom:40px; }
  .cl-hero__logo img{ width:min(78%,300px); }
  .cl-hero__frase{ font-size:1.35rem; margin-top:16px; }
  .cl-hero__lead{ font-size:.95rem; }
  .cl-hero__acoes{ margin-top:18px; gap:10px; }
  .cl-hero__acoes .cl-bt{ padding:14px 20px; }
  .pg-classic .cagora{ padding:16px; }
  .pg-classic .cagora__arte{ width:84px; height:84px; }
  .pg-classic .cagora__txt b{ font-size:1.1rem; }

  /* manifesto: destaques em linha, o número à esquerda */
  .cl-manifesto{ padding-block:46px; }
  .cl-manifesto__frase{ font-size:2.3rem; }
  .cl-manifesto__fatos{ gap:8px; margin-top:24px; }
  .cl-manifesto__fatos li{ flex-direction:row; align-items:baseline; gap:12px; padding:14px 16px; }
  .cl-manifesto__fatos b{ font-size:1.3rem; flex:none; min-width:5.4em; }
  .cl-manifesto__fatos span{ font-size:.88rem; }

  /* leve com você: o celular menor, ao lado do título */
  .cl-app__grade{ gap:26px; }
  .cl-celular{ width:min(200px,56vw); border-radius:34px; padding:9px; }
  .cl-celular__tela{ border-radius:26px; padding:24px 14px 18px; }
  .cl-celular__logo{ width:92px; }
  .cl-celular__capa{ margin:16px 0 12px; border-radius:12px; }
  .cl-celular__titulo{ font-size:.86rem; }
  .cl-celular__artista{ font-size:.72rem; }
  .cl-celular__play{ width:40px; height:40px; }
  .cl-app__passos{ margin:18px 0 22px; gap:10px; }
  .cl-app__passos li{ font-size:.92rem; }
  .cl-app .cl-bt{ width:100%; }

  /* a experiência desliza para o lado */
  .cl-exp__lista{
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:78%;
    overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:calc(var(--pad) * -1); padding:4px var(--pad) 12px;
    scrollbar-width:none;
  }
  .cl-exp__lista::-webkit-scrollbar{ display:none; }
  .cl-exp__item{ scroll-snap-align:start; padding:22px 20px; }
  .cl-exp__ico{ width:44px; height:44px; margin-bottom:14px; }

  /* a linha do dia sem os nomes, que não cabem: eles estão nos cartões */
  .cl-dia__bloco b{ display:none; }
  .cl-dia__regua{ height:34px; }

  /* os blocos em 2x2, mais baixos */
  .pg-classic .cblocos{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .pg-classic .cbloco{ padding:16px 14px 18px; }
  .cbloco__ico{ width:34px; height:34px; border-radius:10px; margin-bottom:10px; }
  .cbloco__ico svg{ width:18px; height:18px; }
  .pg-classic .cbloco__hora{ font-size:1.05rem; }
  .pg-classic .cbloco b{ font-size:.72rem; margin-top:6px; }
  .pg-classic .cbloco p{ font-size:.82rem; line-height:1.45; }
  .pg-classic .cbloco__no-ar{ top:12px; right:10px; font-size:.58rem; padding:3px 7px; }

  /* chamada final */
  .cl-fim{ padding-block:50px; }
  .cl-fim__frase{ font-size:2.4rem; }
  .cl-fim__play{ width:88px; }
}
@media (max-width:380px){
  .pg-classic .cblocos{ grid-template-columns:1fr; }
}


/* ═══════════════════════════════════════════════════════════
   INTERNEWS: MOSAICO E MENU REFINADO (28/10, terceira rodada)
   Pedido: sem buraco branco entre os blocos, e o menu preto menos
   grosseiro. O título volta ao fundo branco; o menu vira uma barra
   escura de cantos arredondados, contida na largura do conteúdo.
   ═══════════════════════════════════════════════════════════ */
.portal.inw{ padding-top:clamp(26px,3.6vw,48px); }
.inw .portal__barra{
  background:transparent; color:var(--ink); box-shadow:none; clip-path:none;
  padding:0; margin:0 0 clamp(18px,2.4vw,26px); align-items:flex-end;
}
.inw .portal__marca{ color:var(--ink); }
.inw .portal__sub{ color:var(--muted); }
.inw .portal__busca input{ background:#fff; border-color:var(--line); color:var(--ink); }
.inw .portal__busca input::placeholder{ color:var(--muted); }
.inw .portal__busca input:focus{ border-color:var(--ink); outline-color:var(--ink); }
.inw .portal__busca svg{ fill:var(--muted); }

/* o menu: barra escura arredondada, itens leves, o escolhido em pílula branca */
.portal .inw-menu{
  background:#16172E; box-shadow:0 14px 30px -22px rgba(14,15,40,.8); clip-path:none;
  border:0; border-radius:16px; margin:0 0 clamp(22px,3vw,34px); padding:6px; gap:2px;
}
.inw-menu .filtro__bt{
  font-size:.74rem; letter-spacing:.08em; color:rgba(255,255,255,.72);
  padding:10px 14px; border-radius:11px;
}
.inw-menu .filtro__bt:hover{ background:rgba(255,255,255,.07); color:#fff; }
.inw-menu .filtro__bt.is-ativo{ background:#fff; color:#16172E; box-shadow:0 4px 12px -6px rgba(0,0,0,.5); }
.inw-menu .filtro__bt--ed::before{ width:8px; height:8px; border-radius:2px; }
.inw-menu .filtro__bt:first-child{ margin-right:6px; }

/* ─── o mosaico ─── */
.inw-mosaico{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:clamp(210px,19vw,250px);
  gap:clamp(12px,1.4vw,18px);
}
.inw-b{ position:relative; display:block; overflow:hidden; border-radius:var(--r-lg); background:var(--navy); min-width:0; }
.inw-b--g{ grid-column:span 2; grid-row:span 2; }
.inw-b--w{ grid-column:span 2; }
.inw-b--f{ grid-column:1 / -1; }
.inw-b__img{ position:absolute; inset:0; }
.inw-b__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s var(--e-out); }
.inw-b:hover .inw-b__img img{ transform:scale(1.04); }

/* título sobre a foto (principal e pequenas) */
.inw-b__txt{
  position:absolute; left:0; right:0; bottom:0; z-index:1; display:flex; flex-direction:column; gap:6px;
  padding:56px 16px 16px; color:#fff;
  background:linear-gradient(180deg, rgba(14,15,40,0) 0%, rgba(14,15,40,.78) 52%, rgba(14,15,40,.94) 100%);
}
.inw .inw-b h2, .inw .inw-b h3{ color:#fff; margin:0; font-family:'Inter',system-ui,sans-serif; font-weight:800; letter-spacing:-.02em; }
.inw-b h3{ font-size:1rem; line-height:1.25; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.inw-b--g .inw-b__txt{ padding:120px clamp(18px,2.4vw,30px) clamp(18px,2.4vw,28px); gap:10px; }
.inw-b--g h2{ font-size:clamp(1.5rem,2.6vw,2.3rem); line-height:1.1; }
.inw-b p{ margin:0; color:rgba(255,255,255,.8); font-size:.92rem; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.inw-b time{ font-size:.72rem; color:rgba(255,255,255,.66); }
.inw-b .kick b{ background:var(--ed); color:#fff; padding:3px 8px; border-radius:4px; }
.inw-b .kick b::before{ display:none; }
.inw-b .kick span, .inw-b .kick span::before{ color:rgba(255,255,255,.8); }
.inw a.inw-b:hover h2, .inw a.inw-b:hover h3{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }

/* larga e faixa: foto de um lado, texto do outro, no branco */
.inw-b--w, .inw-b--f{ background:#fff; border:1px solid var(--line); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.inw-b--f{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); }
.inw-b--w .inw-b__img, .inw-b--f .inw-b__img{ position:relative; inset:auto; }
.inw-b--w .inw-b__txt, .inw-b--f .inw-b__txt{
  position:static; background:none; color:var(--ink); padding:18px 20px; justify-content:center; gap:8px;
}
.inw .inw-b--w h3, .inw .inw-b--f h3{ color:var(--ink); font-size:1.15rem; }
.inw-b--w p, .inw-b--f p{ color:var(--muted); -webkit-line-clamp:3; }
.inw-b--w time, .inw-b--f time{ color:var(--muted); }
.inw-b--w .kick span, .inw-b--f .kick span, .inw-b--w .kick span::before, .inw-b--f .kick span::before{ color:var(--muted); }

/* filtrado: o mosaico vira grade igual, porque as peças escondidas
   deixariam buraco no plano montado para todas */
.portal--filtrado .inw-mosaico{ grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:260px; }
.portal--filtrado .inw-b{ grid-column:auto; grid-row:auto; display:block; background:var(--navy); border:0; }
.portal--filtrado .inw-b .inw-b__img{ position:absolute; inset:0; }
.portal--filtrado .inw-b .inw-b__txt{ position:absolute; left:0; right:0; bottom:0; padding:56px 16px 16px; background:linear-gradient(180deg, rgba(14,15,40,0) 0%, rgba(14,15,40,.78) 52%, rgba(14,15,40,.94) 100%); color:#fff; }
.portal--filtrado .inw-b h2, .portal--filtrado .inw-b h3{ color:#fff !important; font-size:1rem; }
.portal--filtrado .inw-b p{ display:none; }
.portal--filtrado .inw-b time, .portal--filtrado .inw-b .kick span, .portal--filtrado .inw-b .kick span::before{ color:rgba(255,255,255,.7); }

.portal .anuncio--faixa{ margin-top:clamp(24px,3vw,36px); }

@media (max-width:1080px){
  .inw-mosaico, .portal--filtrado .inw-mosaico{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:230px; }
  .inw-b--f{ grid-column:1 / -1; }
}
@media (max-width:620px){
  .inw-mosaico, .portal--filtrado .inw-mosaico{ grid-template-columns:1fr; grid-auto-rows:auto; }
  .inw-b, .inw-b--g, .inw-b--w, .inw-b--f{ grid-column:auto; grid-row:auto; }
  .inw-b{ min-height:220px; }
  .inw-b--g{ min-height:340px; }
  .inw-b--w, .inw-b--f{ grid-template-columns:120px minmax(0,1fr); min-height:0; }
  .inw-b--w .inw-b__txt, .inw-b--f .inw-b__txt{ padding:14px 14px; }
  .inw-b--w p, .inw-b--f p{ display:none; }
  .inw .inw-b--w h3, .inw .inw-b--f h3{ font-size:1rem; }
  .portal .inw-menu{ border-radius:14px; margin-inline:0; padding:5px; }
}


/* ═══ Logo do interNews (28/10): a escrita da marca no lugar da palavra
   digitada. SVG feito com a Nunito Black, a fonte livre mais próxima da
   escrita das artes da rádio. */
.portal__marca::after, .inw .portal__marca::after{ content:none; }
.portal__marca img{ display:block; height:clamp(34px,4.4vw,52px); width:auto; }
.marca-inw{ display:block; height:20px; width:auto; }
.marca-inw--leg{ height:16px; }


/* ═══ Lista dos municípios fechada (29/10): abre na setinha ═══ */
.cidades__cab{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 20px; border-radius:var(--r-lg); background:#fff; border:1px solid var(--line);
  transition:border-color .2s, background .2s;
}
.cidades__cab::-webkit-details-marker{ display:none; }
.cidades__cab::marker{ content:''; }
.cidades__cab:hover, .cidades__cab:focus-visible{ border-color:var(--orange); background:var(--orange-050); }
.cidades__tit{ min-width:0; }
.cidades__seta{
  flex:0 0 auto; width:40px; height:40px; padding:8px; border-radius:50%;
  fill:#fff; background:var(--orange); transition:transform .3s var(--e-out);
}
.cidades[open] .cidades__seta{ transform:rotate(180deg); }
.cidades__aberta{ display:none; }
.cidades[open] .cidades__aberta{ display:block; }
.cidades[open] .cidades__fechada{ display:none; }


/* ═══ Promoções do painel e o Quero participar (29/10) ═══ */
.promo__img--arte{ aspect-ratio:4/5 !important; background:var(--orange-050); }
.promo__img--arte img{ width:100%; height:100%; object-fit:cover; }
.promo--real .promo__body{ display:flex; flex-direction:column; gap:8px; }
.promo__quero{ margin-top:8px; align-self:stretch; justify-content:center; }
.promo__regras summary{ cursor:pointer; font-weight:600; color:var(--orange); font-size:.92rem; }
.promo__regras p{ margin-top:6px; }
.promo__voucher{
  position:relative; margin-top:8px; padding:14px; border-radius:14px; background:var(--orange); color:#fff;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px;
}
.promo__voucher small{ font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.7rem; opacity:.9; }
.promo__voucher b{ font-family:var(--f-display); font-size:1.7rem; letter-spacing:.16em; }
.promo__voucher span{ font-size:.8rem; opacity:.9; }
.promo__voucher--grande b{ font-size:2.4rem; }
.participar{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:16px; }
.participar__fundo{ position:absolute; inset:0; background:rgba(14,16,54,.6); }
.participar__caixa{
  position:relative; width:min(480px,100%); max-height:calc(100vh - 32px); overflow-y:auto;
  background:#fff; color:var(--ink); border-radius:20px; padding:28px 24px 24px;
}
.participar__x{ position:absolute; top:10px; right:10px; width:40px; height:40px; border-radius:50%; border:0; background:var(--orange-050); font-size:1.5rem; line-height:1; cursor:pointer; color:var(--ink); }
.participar h3{ font-family:var(--f-display); font-size:1.4rem; margin:0 44px 0 0; color:var(--navy); }
.participar__sub{ color:var(--muted); margin:6px 0 14px; }
.participar__form{ display:flex; flex-direction:column; gap:12px; }
.participar__campo{ display:flex; flex-direction:column; gap:6px; font-weight:600; font-size:.9rem; min-width:0; }
.participar__campo input{ font:inherit; font-size:1rem; padding:12px 14px; border-radius:12px; border:2px solid var(--line); width:100%; }
.participar__campo input:focus{ outline:none; border-color:var(--orange); }
.participar__campo input.is-erro{ border-color:#D92D20; background:#FFF5F4; }
.participar__dupla{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
.participar__mel{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.participar__aceite{ display:flex; gap:10px; align-items:flex-start; font-size:.88rem; color:var(--muted); }
.participar__aceite input{ width:20px; height:20px; flex:0 0 auto; accent-color:var(--orange); }
.participar__erro{ margin:0; padding:10px 12px; border-radius:10px; background:#FFF5F4; color:#B42318; font-weight:600; font-size:.92rem; }
.participar__lgpd{ margin:0; font-size:.8rem; color:var(--muted); text-align:center; }
.participar__form .btn, .participar__feito .btn{ justify-content:center; }
.participar__feito{ text-align:center; display:flex; flex-direction:column; gap:12px; }
.participar__dica{ font-size:.9rem; color:var(--muted); }

.promos--uma{ grid-template-columns:minmax(0,1fr) !important; }
@media (min-width:760px){
  .promos--uma .promo--real{ display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); max-width:980px; }
  .promos--uma .promo--real .promo__body{ justify-content:center; padding:clamp(24px,3.4vw,44px); gap:12px; }
  .promos--uma .promo--real h3{ font-size:clamp(1.5rem,2.6vw,2.2rem); }
  .promos--uma .promo--real .promo__body > p{ font-size:1.1rem; }
  .promos--uma .promo__quero{ align-self:flex-start; padding-left:34px; padding-right:34px; }
}


/* ═══ Top Hits em duas colunas: as mais pedidas e as mais nostálgicas (29/10) ═══ */
.hits2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4.5vw,64px); }
.hits2__col{ min-width:0; display:flex; flex-direction:column; }
.hits2__cab{ margin-bottom:clamp(18px,2.4vw,26px); }
.hits2__cab .h2{ font-size:clamp(1.6rem,2.8vw,2.3rem); margin-top:8px; }
.hits2__cab .head__aside{ margin-top:10px; max-width:none; }
.hits2__col--nost{ padding:clamp(18px,2.4vw,28px); margin:calc(-1 * clamp(18px,2.4vw,28px)); border-radius:var(--r-lg);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); }
.chart--nost .chart__pos{ color:var(--orange); }
.chart--nost .chart__art{ border-radius:50%; }
@media (max-width:900px){
  .hits2{ grid-template-columns:minmax(0,1fr); }
  .hits2__col--nost{ margin:0; }
}

/* ═══ Top Hits: acabamento (29/10) ═══ */
.section--hits{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(760px 420px at 88% 0%, rgba(255,66,0,.17), transparent 62%),
    radial-gradient(680px 520px at 4% 100%, rgba(84,92,190,.30), transparent 64%),
    linear-gradient(180deg, #1A1C4A 0%, #121433 100%);
}
.section--hits::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.2px); background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg, #000, transparent 70%); mask-image:linear-gradient(180deg, #000, transparent 70%); }
.section--hits .eyebrow{ display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:99px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); }
.section--hits .eyebrow::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--orange);
  box-shadow:0 0 0 4px rgba(255,66,0,.22); }

.hits2 .chart{ border-top:0; display:flex; flex-direction:column; gap:10px; }
.hits2 .chart__row{
  grid-template-columns:2.4em 64px minmax(0,1fr);
  gap:clamp(14px,1.8vw,20px);
  padding:12px 18px 12px 14px;
  border:1px solid rgba(255,255,255,.08); border-radius:var(--r-lg);
  background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  transition:transform .35s var(--e-out), background .35s, border-color .35s, box-shadow .35s;
}
.hits2 .chart__row:hover{ padding-left:14px; transform:translateX(6px);
  border-color:rgba(255,66,0,.45); background:linear-gradient(90deg, rgba(255,66,0,.14), rgba(255,255,255,.03));
  box-shadow:0 18px 40px -22px rgba(0,0,0,.7); }
.hits2 .chart__pos{ font-size:1.9rem; font-weight:800; line-height:1; letter-spacing:-.04em; text-align:center;
  color:transparent; -webkit-text-stroke:1.4px rgba(255,255,255,.42); }
.hits2 .chart__art{ width:64px; height:64px; border-radius:12px; box-shadow:0 10px 24px -10px rgba(0,0,0,.8); }
.hits2 .chart__info h3{ font-size:1.06rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hits2 .chart__info span{ display:block; margin-top:2px; color:rgba(255,255,255,.66); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* o primeiro lugar */
.hits2 .chart__row:first-child{ padding-top:16px; padding-bottom:16px; border-color:rgba(255,66,0,.5);
  background:linear-gradient(110deg, rgba(255,66,0,.28), rgba(255,66,0,.06) 60%, rgba(255,255,255,.03));
  box-shadow:0 22px 50px -26px rgba(255,66,0,.6); grid-template-columns:2.4em 80px minmax(0,1fr); }
.hits2 .chart__row:first-child .chart__pos{ color:var(--orange); -webkit-text-stroke:0; font-size:2.5rem; }
.hits2 .chart__row:first-child .chart__art{ width:80px; height:80px; }
.hits2 .chart__row:first-child .chart__info h3{ font-size:1.22rem; }

/* nostálgicas: o cartão da coluna e as capas de vinil */
.hits2__col--nost{ background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border-color:rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 30px 70px -40px rgba(0,0,0,.8); }
.hits2__col--nost .chart__row{ background:rgba(10,11,34,.35); }
.hits2__col--nost .chart__row:first-child{ background:linear-gradient(110deg, rgba(255,66,0,.24), rgba(10,11,34,.4) 65%); }
.chart--nost .chart__art{ position:relative; border-radius:50%;
  box-shadow:0 0 0 3px #0B0C24, 0 0 0 4px rgba(255,255,255,.14), 0 12px 26px -10px rgba(0,0,0,.9); }
.chart--nost .chart__art::after{ content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:
    radial-gradient(circle, #0B0C24 0 7%, rgba(255,255,255,.55) 7.5% 9%, transparent 9.5%),
    repeating-radial-gradient(circle, rgba(0,0,0,0) 0 3px, rgba(0,0,0,.14) 3px 4px),
    linear-gradient(135deg, rgba(255,255,255,.22), transparent 45%); }
.chart--nost .chart__row:hover .chart__art img{ transform:none; }
.chart--nost .chart__row:hover .chart__art{ animation:hits-gira 3.2s linear infinite; }
@keyframes hits-gira{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .chart--nost .chart__row:hover .chart__art{ animation:none; } }

@media (max-width:600px){
  .hits2 .chart__row, .hits2 .chart__row:first-child{ grid-template-columns:1.9em 54px minmax(0,1fr); padding:10px 12px 10px 8px; }
  .hits2 .chart__art, .hits2 .chart__row:first-child .chart__art{ width:54px; height:54px; }
  .hits2 .chart__pos{ font-size:1.5rem; }
  .hits2 .chart__row:first-child .chart__pos{ font-size:1.9rem; }
  .hits2 .chart__row:hover{ transform:none; }
}

/* ═══ "Leve a Classic com você": o celular igual à aba Ouvir do app (29/10) ═══ */
.cl-celular{ width:min(300px,74vw); aspect-ratio:9/19.3; border-radius:48px; padding:11px; position:relative;
  background:linear-gradient(150deg,#3A3D78,#15173F 45%,#0A0B26); box-shadow:0 50px 90px -40px rgba(14,16,54,.75), 0 0 0 1px rgba(14,16,54,.5), inset 0 0 0 2px rgba(255,255,255,.1); }
.cl-celular__tela{ height:100%; border-radius:38px; padding:0; overflow:hidden; display:flex; flex-direction:column; align-items:stretch; text-align:center;
  background:#fff; color:#fff; }
.cl-cel__status{ position:absolute; top:11px; left:11px; right:11px; height:34px; z-index:2; display:flex; align-items:center; justify-content:space-between;
  padding:0 24px 0 28px; font-size:.68rem; font-weight:700; color:#fff; pointer-events:none; }
.cl-cel__ilha{ position:absolute; left:50%; top:8px; transform:translateX(-50%); width:78px; height:22px; border-radius:99px; background:#05061A; }
.cl-cel__sinais{ display:flex; align-items:flex-end; gap:2px; }
.cl-cel__sinais i{ width:3px; border-radius:1px; background:#fff; }
.cl-cel__sinais i:nth-child(1){ height:5px; } .cl-cel__sinais i:nth-child(2){ height:7px; } .cl-cel__sinais i:nth-child(3){ height:9px; }
.cl-cel__palco{ flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; padding:44px 16px 18px;
  border-radius:0 0 26px 26px; background:linear-gradient(180deg,#2A2D68 0%,#1C1F55 55%,#14164A 100%); }
.cl-cel__topo{ width:100%; display:flex; align-items:center; justify-content:space-between; }
.cl-celular__logo{ width:78px; height:auto; opacity:1; }
.cl-cel__vivo{ display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border-radius:99px; background:rgba(255,255,255,.12);
  font-size:.55rem; font-weight:800; letter-spacing:.08em; }
.cl-cel__vivo i{ width:6px; height:6px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 3px rgba(255,66,0,.25); animation:blink 1.6s var(--e-io) infinite; }
.cl-cel__seg{ width:100%; display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-top:12px; padding:4px; border-radius:99px; background:rgba(8,9,32,.4);
  font-family:var(--f-display); font-size:.72rem; font-weight:700; }
.cl-cel__seg span{ padding:7px 0; border-radius:99px; color:rgba(255,255,255,.8); }
.cl-cel__seg .is-on{ background:#fff; color:#1C1D3A; }
.cl-celular__capa{ width:74%; margin:16px 0 12px; border-radius:16px; background:#fff; box-shadow:0 22px 40px -18px rgba(0,0,0,.75); }
.cl-cel__rot{ font-size:.55rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.72); }
.cl-celular__titulo{ font-size:.98rem; font-weight:700; margin-top:3px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cl-celular__artista{ font-size:.74rem; color:rgba(255,255,255,.75); }
.cl-celular__play{ position:relative; width:50px; height:50px; margin:auto 0 0; flex:none;
  box-shadow:0 0 0 7px rgba(255,255,255,.07), 0 0 0 8px rgba(255,255,255,.14); }
.cl-celular__play svg{ width:20px; height:20px; }
.cl-cel__toque{ font-family:var(--f-display); font-size:.7rem; font-weight:700; margin-top:12px; }
.cl-cel__abas{ display:grid; grid-template-columns:repeat(5,1fr); padding:9px 6px 14px; background:#fff; border-top:1px solid #ECEBF2; }
.cl-cel__aba{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size:.47rem; font-weight:600; color:#5D6085; white-space:nowrap; }
.cl-cel__aba i{ display:grid; place-items:center; width:28px; height:20px; border-radius:99px; }
.cl-cel__aba svg{ width:14px; height:14px; fill:currentColor; }
.cl-cel__aba.is-on{ color:var(--orange); }
.cl-cel__aba.is-on i{ background:#FFE4D9; }
@media (max-width:700px){
  .cl-celular{ width:min(230px,62vw); border-radius:38px; padding:9px; }
  .cl-celular__tela{ border-radius:30px; }
  .cl-cel__status{ top:9px; left:9px; right:9px; padding:0 18px 0 22px; font-size:.56rem; }
  .cl-cel__ilha{ width:60px; height:17px; top:7px; }
  .cl-cel__palco{ padding:36px 12px 14px; }
  .cl-celular__logo{ width:62px; }
  .cl-celular__capa{ margin:12px 0 10px; border-radius:12px; }
  .cl-celular__titulo{ font-size:.82rem; }
  .cl-celular__play{ width:40px; height:40px; }
  .cl-cel__aba{ font-size:.4rem; }
}