/*
Theme Name: Adsync3
Theme URI: https://techsmoney.com
Author: Adsync3
Author URI: https://techsmoney.com
Description: Tema de portal mobile-first feito para conviver com anúncios. Cinco layouts de página inicial, editor de códigos com localizações livres, sistema de cores com modo escuro, oito idiomas de interface, diagnóstico de conformidade embutido, zero dependências e foco em Core Web Vitals.
Version: 10.3.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: adsync3
Tags: news, blog, two-columns, custom-colors, custom-menu, featured-images, translation-ready

Adsync3 — todos os direitos reservados.
*/

/* ==========================================================================
   TOKENS
   Verde (--sinal) e só verde significa "avançar". Não usar em mais nada.
   Vermelho e laranja não existem neste tema, por decisão.
   ========================================================================== */
:root{
  --breu:#0B2A38;
  --breu-70:rgba(11,42,56,.70);
  --breu-45:rgba(11,42,56,.45);
  --mar:#14607D;
  --sinal:#0E9C63;
  --sinal-escuro:#0A7A4C;
  --sinal-fraco:#E6F5EE;
  --papel:#F2F5F7;
  --carta:#FFFFFF;
  --linha:#DCE4E8;

  --fonte:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --raio:10px;

  /* ------------------------------------------------------------------
     ESCALA FLUIDA
     
     clamp(mínimo, preferido, máximo): o valor acompanha a largura da tela
     em vez de saltar em pontos fixos. Assim não existe "largura onde
     quebra" — entre o menor celular e o maior monitor, tudo escala junto.
     
     A unidade vw no meio é o que faz escalar; os extremos garantem que
     nunca fique ilegível no pequeno nem gigante no grande.
     ------------------------------------------------------------------ */

  /* Espaçamentos */
  --lado:clamp(14px, 4vw, 26px);
  --gap-p:clamp(8px, 2vw, 14px);
  --gap-m:clamp(14px, 3vw, 24px);
  --gap-g:clamp(22px, 5vw, 44px);

  /* Tipografia — a escala inteira em uma tela só */
  --t-micro:clamp(10px, 2.4vw, 11.5px);
  --t-mini:clamp(11.5px, 2.8vw, 13px);
  --t-p:clamp(13px, 3.2vw, 14.5px);
  --t-base:clamp(15.5px, 3.6vw, 17.5px);
  --t-m:clamp(17px, 4vw, 19px);
  --t-g:clamp(19px, 4.6vw, 23px);
  --t-titulo:clamp(22px, 5.4vw, 34px);
  --t-manchete:clamp(26px, 7vw, 52px);
  --t-heroi:clamp(28px, 7.6vw, 60px);
  --palco:1080px;     /* Palco enxuto de propósito.
                         Os side rails do AdSense só aparecem quando sobram
                         cerca de 160px livres de CADA lado do conteúdo.
                         Com palco de 1240px, uma tela de 1440px deixava só
                         100px por lado e o Google não encaixava nada.
                         1080px libera 180px por lado em 1440px. */
  --coluna-lado:280px;

  --toque:52px;          /* altura mínima de alvo de toque */
  --folga-anuncio:120px; /* distância mínima entre anúncio e CTA */
}

/* ==========================================================================
   BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}

/* Trava contra estouro horizontal.
   Um único elemento mais largo que a tela faz a página inteira deslizar
   para o lado — o leitor vê o rodapé "cortado" e barra de rolagem onde
   não deveria haver. No celular isso é sempre defeito, nunca recurso. */
html{-webkit-text-size-adjust:100%}

/* Sem overflow-x:hidden.
   
   Ele evitava rolagem lateral, mas cortava anúncio mais largo que a tela
   e quebra position:sticky em vários navegadores — e o cabeçalho do tema
   depende de sticky. Rolagem lateral eventual num criativo largo é menos
   custosa que anúncio cortado, que nunca chega a ser visto inteiro. */
body{max-width:100%}
body{
  margin:0;
  background:var(--papel);
  color:var(--breu);
  font-family:var(--fonte);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
/* O :not() exclui os iframes de anúncio.
   
   Esta regra existe para conteúdo editorial não estourar a coluna, e
   funciona bem para isso. Mas um iframe de anúncio tem largura casada
   com o criativo carregado dentro: limitá-la não redimensiona o conteúdo,
   só mostra menos dele — o anúncio aparece cortado. É preciso excluir. */
img,video{max-width:100%;height:auto}
iframe:not([id^="aswift"]):not([id^="google_ads"]):not([name^="aswift"]){max-width:100%;height:auto}
a{color:var(--mar);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--breu)}

/* Assinatura tipográfica: título muito pesado e apertado contra corpo arejado.
   Custo de rede: zero. */
h1,h2,h3{
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.18;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:1.72rem}
h2{font-size:1.28rem;margin-top:1.8em}
h3{font-size:1.08rem;margin-top:1.5em}
p{margin:0 0 1.15em}

.num{font-variant-numeric:tabular-nums}

/* foco visível sempre */
:where(a,button,input,select,textarea):focus-visible{
  outline:3px solid var(--mar);
  outline-offset:2px;
  border-radius:4px;
}
.pular,
.screen-reader-text.pular{
  position:absolute;left:-9999px;top:0;
  background:var(--chrome);color:var(--chrome-texto);
  padding:12px 16px;z-index:10000;
}
.pular:focus{left:0}

.env{
  width:100%;
  max-width:var(--palco);
  margin:0 auto;
  padding:0 var(--lado);
}

/* Palco em duas colunas no desktop, com FLOAT — não com grid.
   
   Motivo: o algoritmo do Auto Ads percorre o fluxo normal do documento
   procurando elementos block irmãos onde encaixar. Num grid container os
   filhos viram grid items e mudam de contexto de formatação; o Google
   deixa de reconhecer os pontos de inserção dentro deles.
   
   Float é o layout que os temas clássicos usam há mais de uma década — e
   é sobre esse padrão que o Auto Ads foi construído. A sobra fora do palco
   fica livre de propósito: é ali que entram os anúncios laterais. */
.palco{display:block}
.palco::after{content:"";display:table;clear:both}

@media (min-width:1000px){
  .palco > main{
    float:left;
    width:calc(100% - var(--coluna-lado) - 24px);
  }
  .lateral{
    float:right;
    width:var(--coluna-lado);
  }
}

/* Barra lateral: no mobile ela vai para baixo do conteúdo. */
.lateral{min-width:0}
.lateral-bloco{
  background:var(--carta);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  padding:18px;
  margin-bottom:16px;
}
.lateral-bloco h2{
  margin:0 0 12px;font-size:1rem;
}
.lateral-bloco ul{list-style:none;margin:0;padding:0}
.lateral-bloco li{margin-bottom:10px;line-height:1.4}
.lateral-bloco a{font-size:.93rem}
@media (min-width:1000px){
  .lateral-fixa{position:sticky;top:70px}
}

/* ==========================================================================
   CABEÇALHO
   ========================================================================== */
.topo{
  background:var(--chrome);
  color:var(--chrome-texto);
  padding:14px 0;
}
.topo-linha{display:flex;align-items:center;justify-content:space-between;gap:12px}
.marca{
  color:var(--chrome-texto);text-decoration:none;
  font-weight:800;font-size:1.06rem;letter-spacing:-.02em;
}
.marca span{color:var(--sinal)}

/* ==========================================================================
   TRILHA DE ETAPAS  ·  elemento de assinatura
   Mostra ao leitor em que passo do funil ele está.
   ========================================================================== */
.trilha{
  background:var(--carta);
  border-bottom:1px solid var(--linha);
  position:sticky;z-index:60;
}
.trilha-grade{display:flex;gap:6px;padding:11px 0 12px}
.trilha-item{flex:1;min-width:0}
.trilha-barra{
  height:3px;border-radius:3px;background:var(--linha);
  transition:background-color .45s ease;
}
.trilha-rot{
  display:block;margin-top:7px;
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--breu-45);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.trilha-item.feito .trilha-barra{background:var(--sinal)}
.trilha-item.feito .trilha-rot{color:var(--sinal-escuro)}
.trilha-item.agora .trilha-barra{background:var(--mar)}
.trilha-item.agora .trilha-rot{color:var(--mar);font-weight:700}

/* ==========================================================================
   CARTÃO DE VAGA
   Faixa de dados antes do título: a pessoa filtra por cidade em 1 segundo.
   ========================================================================== */
/* Feed em fluxo normal: <div> com <article> irmãos, sem grid e sem <ul>.
   
   Duas restrições do Auto Ads combinadas:
   - grid muda o contexto de formatação e o Google não mede o encaixe
   - dentro de <ul>, o <div class="google-auto-placed"> seria filho direto
     da lista (HTML inválido), então ele simplesmente não insere
   
   Article irmãos em fluxo normal é como os temas clássicos montam feed,
   e é o padrão sobre o qual o algoritmo do Google foi construído. */
.lista{display:block;margin:0;padding:0}
.lista > article{margin:0 0 22px;padding-bottom:2px}
.lista > article:last-child{margin-bottom:0}
.cartao{
  background:var(--carta);
  border:1px solid var(--linha);border-left:3px solid var(--mar);
  border-radius:var(--raio);
  padding:17px 18px 15px;
}
.cartao:hover{border-left-color:var(--sinal)}
.cartao-titulo a{color:var(--breu);text-decoration:none}
.cartao-titulo a:hover{color:var(--mar)}

/* link de saída do cartão, com folga: nenhuma unidade in-feed encosta nele */
.cartao-mais{margin:12px 0 0;clear:both}
.cartao-mais a{
  display:inline-block;
  font-size:.9rem;font-weight:700;color:var(--mar);
  text-decoration:none;
  padding:6px 0;
}
.cartao-mais a::after{content:" →"}
.cartao-mais a:hover{color:var(--sinal-escuro)}

/* item de feed: o espaço entre itens é onde o Auto Ads encaixa */
.feed-item{clear:both}
.cartao-meta{
  display:flex;flex-wrap:wrap;gap:5px 10px;
  font-size:12px;letter-spacing:.03em;
  color:var(--breu-45);margin-bottom:6px;
}
.cartao-meta b{color:var(--mar);font-weight:700}
.cartao-titulo{
  font-size:1.05rem;font-weight:800;letter-spacing:-.02em;
  line-height:1.3;margin:0 0 5px;color:var(--breu);
}
.cartao-resumo{margin:0;font-size:.9rem;line-height:1.5;color:var(--breu-70)}

/* ==========================================================================
   CONTEÚDO
   ========================================================================== */
/* O artigo é um cartão, mas com padding lateral contido.
   Container muito "fechado" (borda grossa, padding largo, sombra) faz o
   algoritmo do Auto Ads tratar o bloco como componente visual acabado e
   evitar inserir dentro dele. */
.artigo{
  background:var(--carta);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  padding:20px 16px 24px;
  margin:16px 0;
}
@media (min-width:700px){
  .artigo{padding:28px 26px 32px}
}
.artigo-cab{margin-bottom:18px}
.artigo-meta{
  font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--breu-45);margin-bottom:8px;
}
.conteudo li{margin-bottom:.45em}
.conteudo ul,.conteudo ol{padding-left:1.25em}
.conteudo blockquote{
  margin:1.4em 0;padding:2px 0 2px 16px;
  border-left:3px solid var(--mar);color:var(--breu-70);
}


/* ==========================================================================
   ZONAS DE ANÚNCIO
   Altura reservada = zero CLS = zero clique acidental = zero penalidade.
   Isto fica travado no tema de propósito. Plugin escolhe o quê, não o como.
   ========================================================================== */
/* O invólucro do anúncio é BLOCO, não flex.
   
   Unidade responsiva do AdSense precisa de um container em bloco com
   largura própria: o script lê a largura do <ins> para escolher o formato
   do anúncio. Dentro de um flex container com centralização, o <ins>
   ganha a largura do próprio conteúdo — que é zero antes de carregar. O
   script lê zero e não serve nada.
   
   Foi por isso que o mesmo código funcionava por plugin e não pelo tema:
   o plugin usa <div> em bloco, e aqui havia flex. */
.ad-wrap{
  display:block;
  width:100%;
  margin:26px 0;
  transition:min-height .2s ease;
}
.ad-rot{
  display:block;
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--breu-45);margin-bottom:6px;
}
.ad-slot{
  display:block;
  width:100%;
  text-align:center;
  /* Sem min-width.
     
     Uma versão anterior forçava 250px aqui, pensando no mínimo que o
     AdSense pede para servir responsivo. Mas isso é requisito DELE, não
     regra para o CSS: em tela de 320px sobram cerca de 288px depois das
     margens, e forçar largura maior que o container fazia o invólucro
     cortar o anúncio pela metade. */
}

/* O iframe do anúncio NÃO recebe teto de largura.
   
   Limitar a largura de um iframe não redimensiona o que está dentro
   dele: o criativo continua no tamanho original e o iframe vira uma
   janela menor mostrando só parte. É por isso que um retângulo de 336px
   numa coluna limitada a 300px aparecia cortado — não estava vazando,
   estava sendo espiado por uma fresta.
   
   A largura certa vem de outro lugar: o <ins> ocupa 100% da coluna, o
   AdSense mede esse valor e escolhe um criativo que caiba. Confiar na
   medição dele é o que faz o anúncio aparecer inteiro. */
.ad-slot ins,
.ad-slot .adsbygoogle{
  display:block;
  width:100%;
  margin-left:auto;
  margin-right:auto;
}
/* Sem display forçado.
   
   O AdSense define o display do <ins> conforme o formato carregado —
   in-article e in-feed dependem disso. Impor block sobrescreve a escolha
   dele e pode impedir a renderização. O CSS base já declara block; o
   script tem liberdade para trocar quando precisa. */

/* O iframe fica intocado: nem largura, nem teto, nem centralização
   forçada. Qualquer intervenção nele descasa a moldura do conteúdo. */

/* O invólucro esconde o que vaza na horizontal, mas nunca corta altura:
   anúncio alto precisa caber inteiro. */
/* O invólucro NÃO corta.
   
   Havia um overflow-x:hidden aqui para conter anúncio mais largo que o
   espaço. Só que cortar não resolve — deixa o anúncio pela metade, que é
   pior que deixá-lo vazar. O caminho certo é a unidade caber, e é o que
   as regras de largura abaixo garantem. */
.ad-wrap{overflow:visible}

/* preencheu: a altura passa a ser a do anúncio real */
.ad-wrap.ad-cheio{min-height:0!important}

/* não preencheu: some por completo, rótulo incluso.
   Buraco branco com "Publicidade" pendurado é pior que nenhum anúncio. */
.ad-wrap.ad-vazio{
  min-height:0!important;
  height:0;margin:0;padding:0;border:0;
  visibility:hidden;
}

/* trilho do anúncio que acompanha a rolagem */
.ad-trilho{position:relative;margin:26px 0;transition:height .2s ease}
.ad-trilho .ad-wrap{margin:0}
.ad-trilho.ad-vazio{height:0!important;margin:0}

/* Sticky só faz sentido com tela sobrando. Em telas curtas ele vira
   anúncio grudado cobrindo leitura. */
@media (max-height:620px){
  .ad-trilho{height:auto!important}
}

/* trava física: o CTA nunca encosta em anúncio */
.cta-caixa{margin-top:var(--folga-anuncio)}

/* ==========================================================================
   CTA  ·  o único verde clicável da página
   ========================================================================== */
.cta-caixa{
  background:var(--sinal-fraco);
  border:1px solid rgba(14,156,99,.25);
  border-radius:var(--raio);
  padding:20px 18px;
  text-align:center;
}
.cta-apoio{
  margin:0 0 14px;font-size:.94rem;line-height:1.5;
  color:var(--breu);font-weight:600;
}
.cta-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:var(--toque);
  background:var(--sinal);color:#fff;
  border:0;border-radius:var(--raio);
  font-family:var(--fonte);font-size:1.02rem;font-weight:800;letter-spacing:-.01em;
  text-decoration:none;
  padding:14px 18px;
  cursor:pointer;
}
.cta-btn:hover,.cta-btn:focus-visible{background:var(--sinal-escuro);color:#fff}
.cta-btn::after{content:"→";font-weight:400;font-size:1.15em;line-height:1}

/* ==========================================================================
   BUSCA
   ========================================================================== */
.busca{display:flex;gap:8px;margin:16px 0}
.busca input[type=search]{
  flex:1;min-width:0;min-height:var(--toque);
  padding:0 15px;font-size:16px;   /* 16px evita zoom automático no iOS */
  font-family:var(--fonte);color:var(--breu);
  background:var(--carta);
  border:1px solid var(--linha);border-radius:var(--raio);
}
.busca input[type=search]::placeholder{color:var(--breu-45)}
.busca button{
  min-height:var(--toque);padding:0 20px;
  background:var(--chrome);color:var(--chrome-texto);
  border:0;border-radius:var(--raio);
  font-family:var(--fonte);font-size:.95rem;font-weight:700;cursor:pointer;
}
.busca button:hover{background:var(--mar);color:#fff}

/* ==========================================================================
   PAGINAÇÃO / VAZIO / RODAPÉ
   ========================================================================== */
.paginacao{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:26px 0}
.paginacao .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 12px;
  background:var(--carta);border:1px solid var(--linha);border-radius:8px;
  color:var(--mar);text-decoration:none;font-weight:700;font-size:.92rem;
}
.paginacao .page-numbers.current{
  background:var(--chrome);border-color:var(--chrome);color:var(--chrome-texto);
}

.vazio{
  background:var(--carta);border:1px solid var(--linha);border-radius:var(--raio);
  padding:30px 20px;text-align:center;
}
.vazio h2{margin-top:0}
.vazio p{color:var(--breu-70);margin-bottom:18px}


/* ==========================================================================
   PRÉ-LOADER
   Teto de 3s por decisão. Tempo é limite, não espera somada.
   ========================================================================== */
#tv-pre{
  position:fixed;inset:0;z-index:9999;
  background:var(--papel);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .28s ease;
}
#tv-pre.off{opacity:0;pointer-events:none}
.tv-spin{
  width:34px;height:34px;border-radius:50%;
  border:3px solid rgba(11,42,56,.14);
  border-top-color:var(--sinal);
  border-right-color:var(--sinal);   /* arco maior = giro mais legível */
  animation:tv-gira .68s linear infinite;
}
@keyframes tv-gira{to{transform:rotate(360deg)}}

/* Movimento reduzido: o usuário pediu para não ter rotação, e isso é para
   respeitar. Mas o anel cinza parado que estava aqui antes parecia defeito.
   Fica o arco verde (indica carregamento por cor, sem movimento) com um
   pulso suave de opacidade, que é aceitável sob reduced-motion porque não
   desloca nada na tela. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    transition-duration:.001ms!important;
  }
  .tv-spin{
    animation:tv-pulsa 1.6s ease-in-out infinite!important;
    animation-duration:1.6s!important;
    border-top-color:var(--sinal);
    border-right-color:var(--sinal);
  }
}
@keyframes tv-pulsa{
  0%,100%{opacity:.35}
  50%{opacity:1}
}

/* ==========================================================================
   TELAS MAIORES
   ========================================================================== */
@media (min-width:700px){
  :root{--lado:24px}
  h1{font-size:2.05rem}
  .cta-btn{width:auto;min-width:290px;margin:0 auto}
}

/* ==========================================================================
   CONVIVÊNCIA COM O AUTO ADS
   O Google injeta unidades sozinho. O trabalho do tema não é impedir isso,
   é garantir que nenhuma unidade caia em cima de algo clicável.
   ========================================================================== */

/* Toda unidade injetada pelo Google ganha folga e ocupa a linha inteira.
   É isto que resolve o botão azul sobrepondo "Ler mais" e "Contact Us". */
/* Toque leve, de propósito.
   Forçar display, largura e margem nas unidades do Google com !important
   interfere na medição que o próprio AdSense faz da página — e pode ser
   lido como modificação do código de anúncio. Aqui fica só o clear, que
   resolve a sobreposição sem alterar o box da unidade. */
.google-auto-placed{
  clear:both;
  margin:20px 0;
}

/* Zona morta em volta de TUDO que é clicável.
   
   Clique acidental é a violação de política mais comum e a que mais derruba
   conta. Todo elemento em que o leitor pode clicar fica acima da camada dos
   anúncios, para que nenhuma unidade automática caia por cima dele.
   
   A lista precisa incluir cada elemento clicável do tema — link esquecido
   aqui é sobreposição esperando para acontecer. */
.conteudo a,
.entry-content a,
.cartao-titulo a,
.cartao-mais a,
.hero-link,
.sobre-link,
.capa-titulo a,
.capa-img,
.cat-titulo a,
.porta,
.nav-lista a,
.topo-hamburguer,
.topo-busca,
.topo-voltar,
.marca,
.lateral a,
.lateral-bloco a,
.destaque-titulo a,
.rodape-links a,
.rodape-contato a,
.ver-todas a,
.paginacao .page-numbers,
.busca button,
.busca input,
.cta-btn{
  position:relative;
  z-index:2;
}

/* Blocos de navegação inteiros ficam acima da camada de anúncio.
   Nenhuma unidade automática pode cair sobre cabeçalho ou rodapé. */
.topo,
.nav-principal,
.rodape{
  position:relative;
  z-index:3;
}

/* Blocos clicáveis inteiros: além da camada, uma folga física em volta,
   para o anúncio nem chegar perto. */
.portas,
.ver-todas,
.cartao-mais,
.abertura-busca{
  clear:both;
  position:relative;
  z-index:2;
}
.cartao-mais{margin-top:14px}
.ver-todas{margin-top:26px}
.rodape-links,
.paginacao,

/* Parágrafos com respiro: o Auto Ads insere entre <p> irmãos, e sem
   margem suficiente ele gruda o anúncio na frase anterior. */
.conteudo > p{margin-bottom:1.3em}
.conteudo > p + p{margin-top:0}

/* Estrutura repetida é o que o Auto Ads reconhece como feed. */
.lista > article{position:relative}

/* Anchor do Auto Ads no rodapé: garante que ele não cubra o CTA.
   
   O espaço entra só quando a âncora existe — mas em navegador sem :has()
   a regra é ignorada por completo, e a âncora cobriria o botão. Por isso
   uma reserva menor entra sempre no celular, onde a âncora aparece:
   custa um pouco de espaço e evita botão inacessível. */
@media (max-width:899px){
  .cta-caixa{margin-bottom:70px}
}
body:has([data-anchor-status="displayed"]) .cta-caixa{margin-bottom:110px}


/* ==========================================================================
   HOME — METADE ESTÁTICA
   ========================================================================== */
.secao-titulo{
  font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--breu-45);font-weight:700;
  margin:34px 0 14px;
  padding-bottom:9px;border-bottom:1px solid var(--linha);
  clear:both;
}

/* Abertura ------------------------------------------------------------- */
.abertura{
  background:var(--carta);
  border:1px solid var(--linha);
  border-top:3px solid var(--breu);
  border-radius:var(--raio);
  padding:26px 20px 22px;
  margin:18px 0 4px;
}
.abertura-titulo{
  font-size:1.62rem;margin:0 0 12px;
}
.abertura-texto{color:var(--breu-70);font-size:.98rem}
.abertura-texto p:last-child{margin-bottom:0}
.abertura-busca{margin-top:18px}
.abertura-busca .busca{margin:0}

/* Atalhos: alvo grande, sem virar botão-anúncio.
   Cinza de propósito — o verde continua exclusivo do avanço no funil. */

/* Destaques ------------------------------------------------------------ */
.destaques-grade{display:grid;gap:12px}
@media (min-width:640px){
  .destaques-grade{grid-template-columns:repeat(3,1fr)}
}
.destaque{
  background:var(--carta);
  border:1px solid var(--linha);
  border-top:3px solid var(--sinal);
  border-radius:var(--raio);
  padding:16px 16px 14px;
}
.destaque-titulo{
  font-size:1rem;margin:0 0 6px;line-height:1.3;
}
.destaque-titulo a{color:var(--breu);text-decoration:none}
.destaque-titulo a:hover{color:var(--mar)}
.destaque-resumo{
  margin:0;font-size:.87rem;line-height:1.5;color:var(--breu-70);
}

/* Ver todas ------------------------------------------------------------ */
.ver-todas{
  margin:22px 0 0;text-align:center;clear:both;
  position:relative;z-index:2;
}
.ver-todas a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--toque);padding:0 26px;
  background:var(--carta);
  border:1px solid var(--mar);border-radius:var(--raio);
  color:var(--mar);text-decoration:none;
  font-size:.95rem;font-weight:700;
}
.ver-todas a:hover{background:var(--mar);color:#fff}
.ver-todas a::after{content:" →";margin-left:6px}

@media (min-width:700px){
  .abertura{padding:34px 30px 28px}
  .abertura-titulo{font-size:2rem}
}

/* ==========================================================================
   DENSIDADE PARA O AUTO ADS
   O Google decide quantas unidades cabem pela ALTURA do bloco de texto, não
   pelo número de palavras. Artigo com parágrafos curtos e espaçamento
   apertado rende uma unidade só — foi o que aconteceu.
   ========================================================================== */
.conteudo{font-size:17.5px;line-height:1.78}
.conteudo > p{margin:0 0 1.55em}
.conteudo > h2{margin-top:2.1em;margin-bottom:.6em}
.conteudo > h3{margin-top:1.7em}
.conteudo > ul,
.conteudo > ol{margin:0 0 1.55em}
.conteudo > ul li,
.conteudo > ol li{margin-bottom:.6em}

/* O in-article entra entre <p> irmãos diretos. Wrapper de plugin em volta
   dos parágrafos esconde o ponto de inserção — mas usar display:contents
   às cegas quebraria caixas legítimas (tabelas, galerias, citações).
   A regra fica restrita ao wrapper genérico do Gutenberg clássico. */
.conteudo > .wp-block-group__inner-container{display:contents}

/* ==========================================================================
   ÁREA APÓS O RODAPÉ
   O Auto Ads costuma colocar uma unidade no fim do documento. Sem
   tratamento ela aparece sobre fundo branco logo abaixo do rodapé escuro,
   parecendo defeito. Aqui ela ganha um leito próprio.
   ========================================================================== */
.pos-rodape{
  background:var(--papel);
  padding:6px 0 2px;
  min-height:0;
}
.pos-rodape:empty{display:none}
body{background:var(--papel)}

/* ==========================================================================
   PORTAL — ABERTURA E PORTAS
   ========================================================================== */
.abertura-sobre{
  margin:0 0 8px;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mar);font-weight:700;
}
.cartao-meta{
  margin:0 0 6px;
  font-size:12px;letter-spacing:.03em;color:var(--breu-45);
}


/* ==========================================================================
   CABEÇALHO E NAVEGAÇÃO
   ========================================================================== */
.topo-linha{display:flex;align-items:center;justify-content:space-between;gap:12px}
.topo-acoes{display:flex;align-items:center;gap:8px}

.topo-busca{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--chrome-linha);color:var(--chrome-texto);text-decoration:none;
  font-size:1.15rem;line-height:1;
}
.topo-busca:hover{background:rgba(128,128,128,.22);color:var(--chrome-texto)}

/* Alternador do menu: checkbox escondido + label como botão.
   Sem JavaScript, funciona antes de qualquer script carregar. */
.tv-menu-check{position:absolute;opacity:0;width:0;height:0}
.topo-hamburguer{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;
  border-radius:8px;cursor:pointer;
  background:var(--chrome-linha);
}
.topo-hamburguer span{
  display:block;height:2px;border-radius:2px;background:var(--chrome-texto);
  transition:transform .2s ease,opacity .2s ease;
}
.tv-menu-check:focus-visible ~ .topo-bloco .topo-hamburguer{outline:3px solid var(--chrome-texto);outline-offset:2px}
.tv-menu-check:checked ~ .topo-bloco .topo-hamburguer span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.tv-menu-check:checked ~ .topo-bloco .topo-hamburguer span:nth-child(2){opacity:0}
.tv-menu-check:checked ~ .topo-bloco .topo-hamburguer span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Navegação: recolhida no mobile, aberta pelo alternador */
/* A navegação é irmã do cabeçalho e gruda logo abaixo dele.
   Fica no mesmo bloco sticky para os dois se moverem juntos. */
.nav-principal{
  position:sticky;top:56px;z-index:69;
  background:var(--chrome);
  box-shadow:inset 0 1px 0 var(--chrome-linha);
  max-height:0;overflow:hidden;
  transition:max-height .25s ease,transform 260ms cubic-bezier(.2,.7,.3,1);
}
.tv-topo-oculto .nav-principal{transform:translateY(-100%)}
.tv-sem-movimento .nav-principal{transition:max-height .25s ease}
.tv-menu-check:checked ~ .topo-bloco .nav-principal{max-height:70vh;overflow-y:auto}

.nav-lista{
  list-style:none;margin:0;padding:6px 0 10px;
  display:flex;flex-direction:column;
}
.nav-lista li{margin:0}
.nav-lista a{
  display:block;
  padding:13px 2px;
  min-height:var(--toque);
  color:var(--chrome-texto-70);text-decoration:none;
  font-size:.97rem;font-weight:600;
  border-bottom:1px solid var(--chrome-linha);
}
.nav-lista a:hover,.nav-lista a:focus-visible{color:var(--chrome-texto)}
.nav-lista li:last-child a{border-bottom:0}
.nav-lista .nav-atual > a,
.nav-lista .current-menu-item > a{color:var(--sinal)}

/* No desktop a navegação é uma barra fixa e o alternador some */
@media (min-width:860px){
  .topo-hamburguer{display:none}
  .nav-principal,
  .tv-menu-check:checked ~ .topo-bloco .nav-principal{max-height:none;overflow:visible}
  .nav-lista{
    flex-direction:row;flex-wrap:wrap;gap:4px 26px;
    padding:0;
  }
  .nav-lista a{
    padding:12px 0;border-bottom:2px solid transparent;
    min-height:0;
  }
  .nav-lista a:hover{border-bottom-color:var(--chrome-texto-45)}
  .nav-lista .nav-atual > a,
  .nav-lista .current-menu-item > a{border-bottom-color:var(--sinal)}
}

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
.rodape{
  background:var(--chrome);color:var(--chrome-texto-70);
  margin-top:40px;padding:30px 0 24px;
  font-size:.88rem;line-height:1.6;
  position:relative;
}
.rodape a{color:var(--chrome-texto);text-decoration:none;opacity:.88}
.rodape a:hover,.rodape a:focus-visible{opacity:1;text-decoration:underline}

/* Grade adaptativa: só as colunas que têm conteúdo.
   Antes a grade era sempre de quatro e as vazias abriam buraco. */
.rodape-grade{
  display:grid;gap:26px;
  grid-template-columns:1fr;
  padding-bottom:24px;
}
@media (min-width:620px){
  .rodape-grade--2,
  .rodape-grade--3,
  .rodape-grade--4{grid-template-columns:1fr 1fr}
}
@media (min-width:960px){
  .rodape-grade--2{grid-template-columns:1.6fr 1fr}
  .rodape-grade--3{grid-template-columns:1.6fr 1fr 1fr}
  .rodape-grade--4{grid-template-columns:1.7fr 1fr 1fr 1.1fr}
}

.rodape-titulo{
  margin:0 0 12px;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--chrome-texto-45);font-weight:700;
}
.rodape-marca{
  margin:0 0 6px;
  font-size:1.15rem;font-weight:800;letter-spacing:-.02em;
  color:var(--chrome-texto);
}
.rodape-marca::after{content:".";color:var(--sinal)}
.rodape-marca:empty{display:none}
.rodape-tag{margin:0 0 10px;color:var(--chrome-texto-45);font-size:.85rem}
.rodape-sobre{margin:0;max-width:38ch}
.rodape-contato,.rodape-editor{margin:0 0 8px}

.rodape-links{
  list-style:none;margin:0;padding:0;
  display:block;              /* empilhado, nunca em linha */
}
.rodape-links li{margin:0 0 9px;display:block}
.rodape-links a{
  display:inline-block;
  padding:3px 0;
  font-size:.9rem;
  line-height:1.4;
}

/* Base: aviso de publicidade e copyright.
   O aviso é exigência de transparência e protege contra a leitura de que
   os anúncios seriam recomendação editorial do site. */
.rodape-base{
  border-top:1px solid var(--chrome-linha);
  padding-top:18px;
}
.rodape-aviso{
  margin:0 0 10px;
  font-size:.78rem;line-height:1.55;
  color:var(--chrome-texto-45);
  max-width:78ch;
}
.rodape-copy{margin:0;font-size:.82rem;color:var(--chrome-texto-45)}

/* Voltar ao topo: SÓ no desktop.
   
   No mobile ele foi removido de propósito. A âncora do AdSense ocupa o
   rodapé da tela, e qualquer elemento fixo ali divide espaço com ela —
   a pessoa tenta fechar o anúncio e acerta o botão, ou o contrário.
   
   O Google não avalia intenção, avalia resultado: CTR anormal naquela
   unidade é lido como layout que induz clique, independente de o tema ter
   tentado afastar os elementos. Além disso, a altura e a posição da âncora
   são decididas pelo Google e mudam sem aviso, então qualquer folga
   calculada hoje pode colidir amanhã.
   
   O custo é baixo: no celular a pessoa rola de volta com o polegar, e no
   iOS tocar na barra de status já leva ao topo. */
.topo-voltar{display:none}

@media (min-width:1000px){
  .topo-voltar{
    position:fixed;left:20px;bottom:20px;
    display:inline-flex;align-items:center;justify-content:center;
    width:46px;height:46px;border-radius:50%;
    background:var(--chrome);color:var(--chrome-texto);text-decoration:none;
    font-size:1.15rem;line-height:1;
    box-shadow:0 4px 16px rgba(0,0,0,.32);
    z-index:40;
    opacity:.9;
  }
  .topo-voltar:hover,.topo-voltar:focus-visible{
    background:var(--mar);color:#fff;text-decoration:none;opacity:1;
  }
}

/* Regra geral: nenhum elemento fixo do tema divide o rodapé da tela com a
   âncora do AdSense. O rodapé é território dela. */
@media (max-width:999px){
  .topo-voltar,
}

/* ==========================================================================
   MOSAICO DE DESTAQUES
   Um cartão grande e três menores. No mobile empilha; a partir de 760px
   vira o mosaico de duas colunas.
   ========================================================================== */
.hero{
  display:grid;gap:12px;
  grid-template-columns:1fr;
  margin:18px 0 8px;
}
@media (min-width:760px){
  .hero{grid-template-columns:1.35fr 1fr;align-items:stretch}
}

.hero-grande,
.hero-pequeno{
  position:relative;
  border-radius:var(--raio);
  overflow:hidden;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* Véu escuro para o título ficar legível sobre qualquer imagem.
   Sem ele, foto clara come o texto branco. */
.hero-grande::after,
.hero-pequeno::after,
.sobre-card::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(6,24,32,.90) 0%,
    rgba(6,24,32,.55) 42%,
    rgba(6,24,32,.10) 78%,
    rgba(6,24,32,0) 100%);
}

.hero-grande{min-height:300px}
@media (min-width:760px){
  .hero-grande{min-height:460px}
}
.hero-coluna{display:grid;gap:12px;grid-template-rows:repeat(3,1fr)}
.hero-pequeno{min-height:135px}

.hero-link{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:flex-end;
  padding:18px 20px 20px;
  text-decoration:none;
}
.hero-titulo{
  margin:0;color:#fff;
  font-size:1.5rem;font-weight:800;letter-spacing:-.03em;line-height:1.16;
  text-wrap:balance;
  text-shadow:0 1px 12px rgba(0,0,0,.45);
}
@media (min-width:760px){
  .hero-titulo{font-size:1.95rem}
}
.hero-titulo--menor{font-size:1.02rem;line-height:1.24}
@media (min-width:760px){
  .hero-titulo--menor{font-size:1.06rem}
}
.hero-link:hover .hero-titulo{text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   SEÇÕES POR CATEGORIA
   ========================================================================== */
.secao-cat{margin-top:34px;clear:both}
.cat-titulo{
  margin:0 0 16px;
  font-size:1.42rem;font-weight:800;letter-spacing:-.03em;
}
.cat-titulo a{color:var(--breu);text-decoration:none}
.cat-titulo a:hover{color:var(--mar)}

.grade-cat{
  display:grid;gap:20px;
  grid-template-columns:1fr;
}
@media (min-width:560px){
  .grade-cat{grid-template-columns:1fr 1fr}
}
@media (min-width:900px){
  .grade-cat{grid-template-columns:repeat(3,1fr)}
}

/* Cartão com imagem acima e texto abaixo --------------------------------- */
.capa-card{min-width:0}
.capa-img{
  display:block;
  aspect-ratio:16/10;          /* dimensão fixa = zero CLS */
  border-radius:var(--raio);
  background-size:cover;
  background-position:center;
  margin-bottom:11px;
}
.capa-titulo{
  margin:0 0 6px;
  font-size:1.04rem;font-weight:800;letter-spacing:-.02em;line-height:1.3;
}
.capa-titulo a{color:var(--breu);text-decoration:none}
.capa-titulo a:hover{color:var(--mar)}
.capa-resumo{
  margin:0;font-size:.88rem;line-height:1.55;color:var(--breu-70);
}

/* Cartão com título sobre a imagem -------------------------------------- */
.sobre-card{
  position:relative;
  aspect-ratio:16/10;
  border-radius:var(--raio);
  overflow:hidden;
  background-size:cover;
  background-position:center;
  min-width:0;
}
.sobre-link{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:flex-end;
  padding:16px 17px 17px;
  text-decoration:none;
}
.sobre-titulo{
  margin:0;color:#fff;
  font-size:1.02rem;font-weight:800;letter-spacing:-.02em;line-height:1.26;
  text-shadow:0 1px 10px rgba(0,0,0,.45);
}
.sobre-link:hover .sobre-titulo{text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   IMAGENS REAIS NOS CARTÕES
   O gradiente inline continua no elemento como reserva; quando existe
   imagem destacada, a <img> cobre e o gradiente some por baixo.
   ========================================================================== */
/* Padrão: imagem em FLUXO NORMAL.
   Ela só vira absoluta dentro dos containers que declaram position:relative
   e servem de moldura (cartões de capa, mosaico, revista). Fora deles a
   imagem deve empurrar o layout como qualquer outra.
   
   Antes o padrão era absolute, e nos containers do modo portal — que são
   apenas <a> sem posicionamento — a imagem escapava e se posicionava em
   relação ao body, cobrindo a página inteira. */
.capa-real{
  display:block;
  width:100%;height:auto;
  object-fit:cover;
}

/* Containers-moldura: aqui a imagem preenche a caixa. */
.hero-grande,
.hero-pequeno,
.sobre-card,
.rev-capa,
.rev-item,
.capa-img{
  position:relative;
  overflow:hidden;
}
.hero-grande > .capa-real,
.hero-pequeno > .capa-real,
.sobre-card > .capa-real,
.rev-capa > .capa-real,
.rev-item > .capa-real,
.capa-img > .capa-real{
  position:absolute;inset:0;
  width:100%;height:100%;
}
.hero-grande,
.hero-pequeno,
.sobre-card{position:relative;isolation:isolate}
.hero-grande .capa-real,
.hero-pequeno .capa-real,
.sobre-card .capa-real{z-index:0}
.hero-grande::after,
.hero-pequeno::after,
.sobre-card::after{z-index:1}

/* cartão com imagem acima: a <img> preenche a caixa de proporção fixa */
.capa-img{position:relative;overflow:hidden}
.capa-img .capa-real{border-radius:var(--raio)}

/* ==========================================================================
   IMAGEM DESTACADA DO POST
   ========================================================================== */
.artigo-capa{
  margin:0 0 22px;
}
.artigo-capa img{
  display:block;width:100%;height:auto;
  border-radius:var(--raio);
}
.artigo-capa figcaption{
  margin-top:8px;
  font-size:.8rem;line-height:1.45;color:var(--breu-45);
}

/* ==========================================================================
   UNIDADE INLINE DENTRO DE CARTÃO
   
   O RSoC (busca relacionada) procura blocos de texto corrido e injeta o
   botão ali dentro. Num resumo de cartão isso é ruim duas vezes: quebra o
   alinhamento da grade e faz o anúncio parecer parte do conteúdo editorial,
   que é justamente o que a política de posicionamento proíbe.
   
   Não dá para impedir a inserção pelo CSS — isso se faz nas áreas excluídas
   do painel do AdSense. O que o tema faz é garantir que, se entrar, a
   unidade fique visualmente separada e não desalinhe nada.
   ========================================================================== */
.capa-resumo .google-auto-placed,
.capa-resumo ins.adsbygoogle,
.cartao-resumo .google-auto-placed,
.cartao-resumo ins.adsbygoogle{
  display:block;
  clear:both;
  margin:10px 0 0;
}

/* Resumo com altura previsível: a grade não desalinha quando um cartão
   recebe unidade e os vizinhos não. */
.capa-resumo{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Cartão como coluna: título no topo, resumo abaixo, e qualquer coisa
   injetada vai para o fim, nunca no meio do texto. */
.capa-card{
  display:flex;flex-direction:column;
  align-items:stretch;
}
.capa-card .capa-img{flex:0 0 auto}

/* Grade com itens do mesmo tamanho, independentemente do que entrar. */
.grade-cat{align-items:start}

/* ==========================================================================
   CARTÃO TIPOGRÁFICO  ·  quando o post não tem imagem nenhuma
   
   Em vez de gradiente ocupando o lugar de uma foto que não existe, o cartão
   assume que é de texto: fundo claro, barra de acento, título maior e
   resumo mais longo. Fica coerente ao lado dos cartões com imagem em vez
   de parecer que algo falhou ao carregar.
   ========================================================================== */
.capa-card--texto{
  background:var(--carta);
  border:1px solid var(--linha);
  border-left:3px solid var(--mar);
  border-radius:var(--raio);
  padding:18px 18px 16px;
}
.capa-card--texto:hover{border-left-color:var(--sinal)}

.capa-etiqueta{
  margin:0 0 9px;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mar);font-weight:700;
}
.capa-card--texto .capa-titulo{
  font-size:1.1rem;line-height:1.28;margin-bottom:8px;
}
.capa-card--texto .capa-resumo{
  -webkit-line-clamp:4;
  font-size:.89rem;
}
.capa-mais{margin:13px 0 0;clear:both;position:relative;z-index:2}
.capa-mais a{
  display:inline-block;padding:5px 0;
  font-size:.87rem;font-weight:700;color:var(--mar);text-decoration:none;
}
.capa-mais a::after{content:" →"}
.capa-mais a:hover{color:var(--sinal-escuro)}

/* ==========================================================================
   MOSAICO SEM IMAGEM
   O véu de gradiente existe para dar contraste sobre foto. Sem foto ele
   escurece um fundo que já é escuro, e o cartão fica chapado. Aqui o
   tratamento é outro: cor sólida da identidade e tipografia maior.
   ========================================================================== */
.hero-grande.sem-img,
.hero-pequeno.sem-img{
  background-image:none!important;
  background:var(--chrome);
  border:1px solid var(--chrome-linha);
}
.hero-grande.sem-img .hero-titulo,
.hero-pequeno.sem-img .hero-titulo{color:var(--chrome-texto)}
.hero-grande.sem-img::after,
.hero-pequeno.sem-img::after{display:none}

.hero-grande.sem-img .hero-link,
.hero-pequeno.sem-img .hero-link{
  align-items:flex-start;
  flex-direction:column;justify-content:center;
}
.hero-grande.sem-img .hero-titulo,
.hero-pequeno.sem-img .hero-titulo{text-shadow:none}

/* barra de acento no lugar onde estaria a imagem */
.hero-grande.sem-img .hero-link::before,
.hero-pequeno.sem-img .hero-link::before{
  content:"";
  display:block;width:44px;height:3px;border-radius:3px;
  background:var(--sinal);
  margin-bottom:14px;
}
.hero-pequeno.sem-img .hero-link::before{width:30px;margin-bottom:10px}

/* ==========================================================================
   MODO PORTAL DE NOTÍCIAS
   
   Quatro coisas separam portal de blog, e todas estão aqui:
   1. manchete em corpo grande com serifa
   2. densidade — muita chamada acima da dobra
   3. divisória fina no lugar de cartão com borda e sombra
   4. cor por editoria
   ========================================================================== */

/* Serifa do sistema: peso de jornal sem uma requisição de rede.
   Georgia existe em praticamente todo dispositivo e foi desenhada para
   corpo grande em tela — é a escolha certa aqui, não uma economia. */
.com-serifa .manchete-titulo,
.com-serifa .editoria-dest-titulo,
.com-serifa .chamada-titulo,
.com-serifa .editoria-titulo{
  font-family:Georgia,"Times New Roman",Times,serif;
  letter-spacing:-.015em;
}

/* Chapéu de editoria ---------------------------------------------------- */
.chapeu{
  display:inline-block;
  margin-bottom:7px;
  font-family:var(--fonte);
  font-size:11px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;
}
.chapeu:hover{text-decoration:underline;text-underline-offset:2px}

/* Bloco de manchetes ---------------------------------------------------- */
.portal-topo{
  display:grid;gap:0;
  grid-template-columns:1fr;
  margin:16px 0 10px;
  padding-bottom:26px;
  border-bottom:2px solid var(--breu);
}
@media (min-width:820px){
  .portal-topo{
    grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
    gap:0 26px;
  }
}

.manchete{min-width:0}
.manchete-foto{display:block;margin-bottom:14px}
.manchete-foto img{
  display:block;width:100%;height:auto;
  aspect-ratio:16/9;object-fit:cover;
}
.manchete-titulo{
  margin:0 0 10px;
  font-size:2.05rem;font-weight:800;line-height:1.08;
  text-wrap:balance;
}
@media (min-width:820px){
  .manchete-titulo{font-size:2.9rem}
}
.manchete-titulo a{color:var(--breu);text-decoration:none}
.manchete-titulo a:hover{text-decoration:underline;text-underline-offset:4px}
.manchete-linha{
  margin:0 0 14px;
  font-size:1.02rem;line-height:1.5;color:var(--breu-70);
  max-width:52ch;
}

/* Linhas de apoio: o marcador quadrado é a convenção do formato */
.apoio{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid var(--linha)}
.apoio li{
  position:relative;
  padding-left:15px;margin-bottom:10px;
  line-height:1.4;
}
.apoio li::before{
  content:"";
  position:absolute;left:0;top:.55em;
  width:6px;height:6px;
  background:var(--mar);
}
.apoio a{
  color:var(--breu);text-decoration:none;
  font-size:.96rem;font-weight:600;
}
.apoio a:hover{color:var(--mar);text-decoration:underline;text-underline-offset:2px}

/* Coluna de chamadas ---------------------------------------------------- */
.chamadas{
  min-width:0;
  margin-top:24px;padding-top:20px;
  border-top:1px solid var(--linha);
}
@media (min-width:820px){
  .chamadas{
    margin-top:0;padding-top:0;
    border-top:0;
    border-left:1px solid var(--linha);
    padding-left:26px;
    display:grid;grid-template-columns:1fr 1fr;gap:22px 20px;
    align-content:start;
  }
}
.chamada{min-width:0}
.chamada + .chamada{
  margin-top:18px;padding-top:18px;border-top:1px solid var(--linha);
}
@media (min-width:820px){
  .chamada + .chamada{margin-top:0;padding-top:0;border-top:0}
}
.chamada-foto{display:block;margin-bottom:9px}
.chamada-foto img{
  display:block;width:100%;height:auto;
  aspect-ratio:16/10;object-fit:cover;
}
.chamada-titulo{
  margin:0;
  font-size:1.02rem;font-weight:700;line-height:1.24;
}
.chamada-titulo a{color:var(--breu);text-decoration:none}
.chamada-titulo a:hover{color:var(--mar);text-decoration:underline;text-underline-offset:2px}

/* Faixas de editoria ---------------------------------------------------- */
.editoria{margin-top:32px;clear:both}
.editoria-titulo{
  margin:0 0 16px;padding-bottom:9px;
  font-size:1.34rem;font-weight:800;letter-spacing:-.02em;
  border-bottom:3px solid var(--editoria,var(--breu));
}
.editoria-titulo a{color:var(--editoria,var(--breu));text-decoration:none}
.editoria-titulo a:hover{text-decoration:underline;text-underline-offset:3px}

.editoria-corpo{
  display:grid;gap:22px;
  grid-template-columns:1fr;
}
@media (min-width:760px){
  .editoria-corpo{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0 26px}
}
.editoria-dest{min-width:0}
.editoria-foto{display:block;margin-bottom:11px}
.editoria-foto img{
  display:block;width:100%;height:auto;
  aspect-ratio:16/9;object-fit:cover;
}
.editoria-dest-titulo{
  margin:0 0 7px;
  font-size:1.3rem;font-weight:800;line-height:1.2;
}
.editoria-dest-titulo a{color:var(--breu);text-decoration:none}
.editoria-dest-titulo a:hover{text-decoration:underline;text-underline-offset:3px}
.editoria-dest-linha{
  margin:0;font-size:.93rem;line-height:1.5;color:var(--breu-70);
}

.editoria-lista{
  list-style:none;margin:0;padding:0;
  min-width:0;
}
@media (min-width:760px){
  .editoria-lista{border-left:1px solid var(--linha);padding-left:26px}
}
.editoria-lista li{
  display:flex;gap:12px;align-items:baseline;justify-content:space-between;
  padding:11px 0;
  border-bottom:1px solid var(--linha);
}
.editoria-lista li:first-child{padding-top:0}
.editoria-lista li:last-child{border-bottom:0}
.editoria-lista a{
  color:var(--breu);text-decoration:none;
  font-size:.95rem;font-weight:600;line-height:1.35;
}
.editoria-lista a:hover{color:var(--editoria,var(--mar));text-decoration:underline;text-underline-offset:2px}
.editoria-data{
  flex:0 0 auto;
  font-size:11px;color:var(--breu-45);
}

/* No modo portal a página inteira fica mais densa: o espaçamento de blog
   é o que mais entrega amadorismo. */
.modo-portal .recentes{margin-top:34px}
.modo-portal .secao-titulo{
  border-bottom:2px solid var(--breu);
  color:var(--breu);
  font-size:.9rem;
}

/* Proteção contra sobreposição de anúncio nos novos links */
.manchete-titulo a,
.chamada-titulo a,
.apoio a,
.editoria-titulo a,
.editoria-dest-titulo a,
.editoria-lista a,
.chapeu{
  position:relative;
  z-index:2;
}

/* ==========================================================================
   CHIP DE CATEGORIA
   O elemento aproveitado da estética de aplicativo: sinaliza a editoria sem
   gastar linha de texto e se lê bem sobre foto.
   ========================================================================== */
.chip{
  display:inline-block;
  padding:4px 10px;
  border-radius:100px;
  font-family:var(--fonte);
  font-size:10.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;
  color:#fff;
  margin-bottom:9px;
  align-self:flex-start;
}
.chip--claro{color:#fff}

/* ==========================================================================
   PORTAS  ·  cards de categoria
   ========================================================================== */
.portas{
  display:grid;gap:10px;
  grid-template-columns:1fr;
}
@media (min-width:520px){
  .portas{grid-template-columns:1fr 1fr}
}
@media (min-width:900px){
  .portas{grid-template-columns:repeat(3,1fr)}
}
.porta{
  display:flex;align-items:stretch;gap:0;
  background:var(--carta);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  overflow:hidden;
  text-decoration:none;color:inherit;
  position:relative;z-index:2;
  min-height:74px;
}
.porta:hover,.porta:focus-visible{
  border-color:var(--porta,var(--mar));
}
/* faixa colorida no lugar do ícone: identifica a editoria sem custo de rede */
.porta-marca{
  flex:0 0 6px;
  background:var(--porta,var(--mar));
}
.porta-corpo{
  display:flex;flex-direction:column;justify-content:center;
  padding:13px 15px;min-width:0;
}
.porta-titulo{
  font-weight:800;font-size:1rem;letter-spacing:-.02em;
  color:var(--breu);line-height:1.25;
}
.porta:hover .porta-titulo{color:var(--porta,var(--mar))}
.porta-texto{
  margin-top:3px;
  font-size:.82rem;line-height:1.4;color:var(--breu-45);
}
.portas-secao{clear:both;margin-top:30px}

/* ==========================================================================
   LAYOUT REVISTA
   ========================================================================== */
.revista{margin:16px 0 8px}
.rev-capa,
.rev-item{
  position:relative;isolation:isolate;
  border-radius:var(--raio);
  overflow:hidden;
  background-size:cover;background-position:center;
}
.rev-capa::after,
.rev-item::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,
    rgba(6,20,26,.92) 0%,
    rgba(6,20,26,.58) 45%,
    rgba(6,20,26,.08) 82%,
    rgba(6,20,26,0) 100%);
}
.rev-capa .capa-real,
.rev-item .capa-real{z-index:0}

.rev-capa{min-height:320px;margin-bottom:12px}
@media (min-width:760px){
  .rev-capa{min-height:420px}
}
.rev-item{min-height:190px}

.rev-link{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;justify-content:flex-end;
  align-items:flex-start;
  padding:18px 20px 20px;
  text-decoration:none;
}
.rev-capa-titulo{
  margin:0 0 8px;color:#fff;
  font-size:1.6rem;font-weight:800;letter-spacing:-.03em;line-height:1.14;
  text-wrap:balance;text-shadow:0 1px 14px rgba(0,0,0,.5);
}
@media (min-width:760px){
  .rev-capa-titulo{font-size:2.2rem}
}
.rev-capa-linha{
  margin:0;color:rgba(255,255,255,.82);
  font-size:.95rem;line-height:1.45;max-width:48ch;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}
.rev-item-titulo{
  margin:0;color:#fff;
  font-size:1rem;font-weight:800;letter-spacing:-.02em;line-height:1.24;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}
.rev-link:hover .rev-capa-titulo,
.rev-link:hover .rev-item-titulo{text-decoration:underline;text-underline-offset:3px}

.rev-grade{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:560px){
  .rev-grade{grid-template-columns:1fr 1fr}
}
@media (min-width:900px){
  .rev-grade{grid-template-columns:repeat(3,1fr)}
}

/* ==========================================================================
   LAYOUT COMPACTO
   Miniatura pequena e título forte: cabe o dobro de manchetes na mesma
   altura de tela, que é o que mais rende em mobile.
   ========================================================================== */
.comp-lista{display:block}
.comp-item{
  display:flex;gap:14px;align-items:flex-start;
  padding:14px 0;
  border-bottom:1px solid var(--linha);
}
.comp-item:first-child{padding-top:0}
.comp-foto{
  flex:0 0 96px;
  display:block;position:relative;overflow:hidden;
  border-radius:8px;
}
.comp-foto img{
  display:block;width:96px;height:68px;object-fit:cover;
}
.comp-texto{min-width:0;flex:1}
.comp-texto .chip{margin-bottom:6px;padding:3px 8px;font-size:9.5px}
.comp-titulo{
  margin:0;
  font-size:1rem;font-weight:700;line-height:1.28;
}
.comp-titulo a{color:var(--breu);text-decoration:none}
.comp-titulo a:hover{color:var(--mar);text-decoration:underline;text-underline-offset:2px}
.comp-linha{
  margin:6px 0 0;font-size:.9rem;line-height:1.5;color:var(--breu-70);
}
.comp-data{display:block;margin-top:6px;font-size:11px;color:var(--breu-45)}

/* primeiro item em destaque */
.comp-item--forte{
  display:block;
  padding-bottom:20px;
  border-bottom:2px solid var(--breu);
}
.comp-item--forte .comp-foto{
  flex:none;width:100%;margin-bottom:12px;border-radius:var(--raio);
}
.comp-item--forte .comp-foto img{
  width:100%;height:auto;aspect-ratio:16/9;
}
.comp-item--forte .comp-titulo{
  font-size:1.55rem;font-weight:800;letter-spacing:-.025em;line-height:1.14;
}
@media (min-width:760px){
  .comp-item--forte .comp-titulo{font-size:2rem}
}

/* serifa também nestes layouts quando ligada */
.com-serifa .rev-capa-titulo,
.com-serifa .rev-item-titulo,
.com-serifa .comp-titulo{
  font-family:Georgia,"Times New Roman",Times,serif;
  letter-spacing:-.015em;
}

/* proteção contra sobreposição de anúncio */
.rev-link,
.comp-titulo a,
.comp-foto,
.porta{
  position:relative;
  z-index:2;
}

/* ==========================================================================
   IMAGENS NOS LAYOUTS PORTAL E COMPACTO
   Proporção declarada em cada container: zero CLS e nenhuma imagem escapando.
   ========================================================================== */
.manchete-foto,
.chamada-foto,
.editoria-foto{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:6px;
}
.manchete-foto .capa-real{aspect-ratio:16/9}
.chamada-foto .capa-real{aspect-ratio:16/10}
.editoria-foto .capa-real{aspect-ratio:16/9}

.comp-foto{
  position:relative;
  overflow:hidden;
}
.comp-foto .capa-real{
  width:96px;height:68px;
}
.comp-item--forte .comp-foto .capa-real{
  width:100%;height:auto;aspect-ratio:16/9;
}

/* ==========================================================================
   CAMADA MODERNA
   
   O que lê como "atual" hoje não é decoração — é comportamento: superfícies
   com raio maior, hover com movimento contido, tipografia mais apertada e
   estados de foco cuidados. Nada aqui custa densidade ou requisição.
   ========================================================================== */
:root{
  --raio:14px;          /* era 10px — raio maior é o marcador visual do momento */
  --raio-p:10px;
  --raio-g:20px;
  --sombra:rgba(11,42,56,.07);
  --transicao:180ms cubic-bezier(.2,.7,.3,1);
}

/* --- Imagens: hover com aproximação contida ---------------------------- */
.capa-img,
.hero-grande,
.hero-pequeno,
.sobre-card,
.rev-capa,
.rev-item,
.manchete-foto,
.chamada-foto,
.editoria-foto,
.comp-foto{
  border-radius:var(--raio);
}
.comp-foto{border-radius:var(--raio-p)}

.capa-real{
  transition:transform 420ms cubic-bezier(.2,.7,.3,1);
  will-change:transform;
}
.capa-img:hover .capa-real,
.rev-capa:hover .capa-real,
.rev-item:hover .capa-real,
.manchete-foto:hover .capa-real,
.chamada-foto:hover .capa-real,
.editoria-foto:hover .capa-real,
.comp-foto:hover .capa-real{
  transform:scale(1.035);
}
.tv-sem-movimento .capa-real{transition:none}
.tv-sem-movimento .capa-real:hover{transform:none}

/* --- Sublinhado que cresce, em vez de aparecer de uma vez -------------- */
.manchete-titulo a,
.rev-capa-titulo,
.comp-titulo a,
.editoria-dest-titulo a,
.capa-titulo a,
.cartao-titulo a{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 2px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size var(--transicao);
  text-decoration:none!important;
}
.manchete-titulo a:hover,
.rev-link:hover .rev-capa-titulo,
.comp-titulo a:hover,
.editoria-dest-titulo a:hover,
.capa-titulo a:hover,
.cartao-titulo a:hover{
  background-size:100% 2px;
}
.tv-sem-movimento :is(.manchete-titulo,.comp-titulo,.capa-titulo) a{
  background-image:none;
}

/* --- Chips com desfoque de fundo -------------------------------------- */
.chip{
  backdrop-filter:saturate(1.3) blur(6px);
  -webkit-backdrop-filter:saturate(1.3) blur(6px);
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}

/* --- Cartões: elevação sutil no hover ---------------------------------- */
.cartao,
.porta,
.lateral-bloco,
.artigo,
.capa-card--texto,
.abertura{
  border-radius:var(--raio);
  transition:border-color var(--transicao),box-shadow var(--transicao),transform var(--transicao);
}
.cartao:hover,
.porta:hover,
.capa-card--texto:hover{
  box-shadow:0 6px 20px var(--sombra);
  transform:translateY(-1px);
}
.tv-sem-movimento :is(.cartao,.porta,.capa-card--texto):hover{transform:none}

/* --- Cabeçalho inteligente -------------------------------------------- */
.topo{
  position:sticky;top:0;z-index:70;
  transition:transform 260ms cubic-bezier(.2,.7,.3,1),box-shadow var(--transicao);
}
.tv-rolou .topo{box-shadow:0 2px 16px rgba(0,0,0,.18)}
.tv-topo-oculto .topo{transform:translateY(-100%)}
.tv-sem-movimento .topo{transition:none}

/* a trilha de etapas encosta no cabeçalho, não no topo da janela */
.trilha{top:104px}

/* --- Barra de progresso de leitura ------------------------------------ */
.tv-progresso{
  position:fixed;left:0;top:0;right:0;height:3px;
  z-index:80;pointer-events:none;
  background:transparent;
}
.tv-progresso span{
  display:block;height:100%;
  background:var(--sinal);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 90ms linear;
}

/* --- Foco visível moderno --------------------------------------------- */
:where(a,button,input,select,textarea,.porta):focus-visible{
  outline:2px solid var(--sinal);
  outline-offset:3px;
  border-radius:var(--raio-p);
}

/* --- Tipografia mais apertada ----------------------------------------- */
h1,h2,h3{letter-spacing:-.032em}
.manchete-titulo,
.rev-capa-titulo,
.comp-item--forte .comp-titulo{letter-spacing:-.038em}

/* --- Superfícies ------------------------------------------------------ */
.artigo,
.cartao,
.lateral-bloco,
.porta,
.abertura,
.capa-card--texto,
.vazio{
  background:var(--carta);
}
.busca input[type=search]{background:var(--carta);color:var(--breu)}

/* O cabeçalho fixo fica abaixo das unidades laterais do AdSense, que o
   Google posiciona com z-index alto. Sobrepor anúncio com elemento fixo é
   violação de posicionamento, não só um detalhe visual. */
.topo{z-index:70}
.google-auto-placed,
ins.adsbygoogle{z-index:75}

/* ==========================================================================
   NENHUMA UNIDADE PASSA DA LARGURA DISPONÍVEL
   
   Vale para todas, inclusive as que o Auto Ads insere sozinho. O AdSense
   escolhe o criativo pela largura que mede, mas nem sempre acerta — um
   banner de 336px numa coluna de 300px vaza para fora e fica cortado.
   
   Sem !important de propósito: o próprio AdSense define largura inline em
   alguns formatos, e sobrescrever isso à força quebraria os que dependem
   dela. O max-width limita sem impor.
   ========================================================================== */
/* Nenhum teto de largura em unidade de anúncio.
   
   A intenção aqui é deixar o AdSense e o Ad Manager servirem qualquer
   formato sem esbarrar em regra do tema. Teto de largura no envelope
   pode fazer o script recusar um criativo maior — e um formato a menos
   no leilão é receita a menos.
   
   O tema declara a largura disponível e para por aí. A decisão de qual
   criativo cabe é de quem serve o anúncio, que mede a coluna e escolhe.
   
   Contrapartida assumida: se um criativo vier mais largo que a tela, ele
   vaza em vez de ser cortado. Vazar é reversível pelo visitante — ele
   rola de lado e vê o anúncio inteiro. Cortado, o anúncio nunca aparece
   por completo. */

/* Sem overflow-x:hidden no body.
   
   Ele conteria rolagem lateral, mas quebra position:sticky em vários
   navegadores — e o cabeçalho do tema depende de sticky. O teto de
   largura nas unidades já evita o vazamento sem esse efeito colateral. */

/* ==========================================================================
   UNIDADES NÃO PREENCHIDAS
   
   Quando não há demanda para um slot, o AdSense marca a unidade como
   unfilled — mas o espaço reservado permanece e vira buraco branco no meio
   da página. Colapsar unidade vazia é prática recomendada pelo Google;
   esconder anúncio SERVIDO é que seria violação.
   
   O CSS resolve o caso comum; o assets/ads.js cobre o que o Auto Ads cria
   depois, em wrappers que o seletor não alcança.
   ========================================================================== */
ins.adsbygoogle[data-ad-status="unfilled"]{
  display:none!important;
}

/* Wrapper do Auto Ads que só contém unidade vazia. */
.google-auto-placed:has(ins.adsbygoogle[data-ad-status="unfilled"]){
  display:none!important;
}

/* Nenhum container de anúncio deve reservar altura por conta própria:
   quem define a altura é o anúncio que de fato carregar. */
.google-auto-placed{
  min-height:0!important;
}
.google-auto-placed:empty{display:none}

/* No mobile a navegação abre pelo alternador e não deve ficar sticky
   enquanto está recolhida — sticky com altura zero cria um bloco
   invisível que atrapalha o cálculo de posição do Auto Ads. */
@media (max-width:859px){
  .nav-principal{position:static}
  .tv-menu-check:checked ~ .nav-principal{position:sticky;top:56px}
  .trilha{top:56px}
}

/* ==========================================================================
   DIREITA PARA A ESQUERDA  ·  árabe
   
   Espelhar um layout não é só inverter o texto: bordas de acento, setas,
   alinhamentos e a coluna lateral precisam trocar de lado, senão a leitura
   fica quebrada para quem lê em RTL.
   ========================================================================== */
.tv-rtl{direction:rtl;text-align:right}

/* Fonte: a stack padrão não tem árabe, e o navegador cai numa fonte
   qualquer com métricas ruins. Estas existem nos sistemas mais comuns. */
.tv-rtl{
  --fonte:"Segoe UI",Tahoma,"Noto Naskh Arabic","Geeza Pro",-apple-system,Arial,sans-serif;
}
.tv-rtl .com-serifa .manchete-titulo,
.tv-rtl .com-serifa .editoria-dest-titulo,
.tv-rtl .com-serifa .chamada-titulo,
.tv-rtl .com-serifa .editoria-titulo,
.tv-rtl .com-serifa .rev-capa-titulo,
.tv-rtl .com-serifa .comp-titulo{
  font-family:"Noto Naskh Arabic","Times New Roman",serif;
  letter-spacing:0;   /* tracking negativo prejudica a ligadura árabe */
}
.tv-rtl h1,.tv-rtl h2,.tv-rtl h3{letter-spacing:0}

/* Colunas trocam de lado */
@media (min-width:1000px){
  .tv-rtl .palco > main{float:right}
  .tv-rtl .lateral{float:left}
  .tv-rtl .lateral{border-left:0}
}
@media (min-width:820px){
  .tv-rtl .chamadas{
    border-left:0;border-right:1px solid var(--linha);
    padding-left:0;padding-right:26px;
  }
}
@media (min-width:760px){
  .tv-rtl .editoria-lista{
    border-left:0;border-right:1px solid var(--linha);
    padding-left:0;padding-right:26px;
  }
}

/* Bordas de acento */
.tv-rtl .cartao,
.tv-rtl .capa-card--texto{
  border-left-width:1px;
  border-right:3px solid var(--mar);
}
.tv-rtl .cartao:hover,
.tv-rtl .capa-card--texto:hover{border-right-color:var(--sinal)}
.tv-rtl .conteudo blockquote{
  border-left:0;border-right:3px solid var(--mar);
  padding-left:0;padding-right:16px;
}
.tv-rtl .porta{flex-direction:row-reverse}

/* Marcadores e listas */
.tv-rtl .apoio li{padding-left:0;padding-right:15px}
.tv-rtl .apoio li::before{left:auto;right:0}
.tv-rtl .conteudo ul,
.tv-rtl .conteudo ol{padding-left:0;padding-right:1.25em}

/* Setas apontam para o outro lado */
.tv-rtl .cta-btn::after,
.tv-rtl .cartao-mais a::after,
.tv-rtl .capa-mais a::after,
.tv-rtl .ver-todas a::after,
.tv-rtl .porta-titulo::after{content:" ←"}

/* Elementos fixos */
.tv-rtl .topo-voltar{left:auto;right:20px}
.tv-rtl .pular:focus{left:auto;right:0}
.tv-rtl .tv-progresso span{transform-origin:100% 50%}

/* Alinhamentos de texto que devem seguir a direção */
.tv-rtl .ad-rot,
.tv-rtl .chip,
.tv-rtl .chapeu{align-self:flex-end}
.tv-rtl .rev-link,
.tv-rtl .hero-link,
.tv-rtl .sobre-link{align-items:flex-end;text-align:right}

/* Números e datas permanecem legíveis da esquerda para a direita */
.tv-rtl .num{direction:ltr;display:inline-block}

/* ==========================================================================
   BLOCO DO CABEÇALHO
   
   Cabeçalho e navegação dentro de um container FLEX.
   
   O Auto Ads insere unidades entre elementos block irmãos em fluxo normal.
   Com os dois soltos, ele encontrava o espaço entre eles e encaixava um
   anúncio no meio do cabeçalho. Filhos de um flex container não são
   candidatos a ponto de inserção — o mesmo motivo pelo qual precisamos
   TIRAR o feed do grid lá atrás, aqui trabalha a nosso favor.
   ========================================================================== */
.topo-bloco{
  display:flex;
  flex-direction:column;
  position:sticky;top:0;z-index:70;
  transition:transform 260ms cubic-bezier(.2,.7,.3,1);
}
.tv-topo-oculto .topo-bloco{transform:translateY(-100%)}
.tv-rolou .topo-bloco{box-shadow:0 2px 16px rgba(0,0,0,.18)}
.tv-sem-movimento .topo-bloco{transition:none}

/* o sticky agora é do bloco: os filhos voltam ao fluxo normal */
.topo,
.nav-principal{position:static;box-shadow:none}
.tv-topo-oculto .topo,
.tv-topo-oculto .nav-principal{transform:none}

@media (max-width:859px){
  .tv-menu-check:checked ~ .topo-bloco .nav-principal{position:static}
  .trilha{top:56px}
}

/* ==========================================================================
   ESPAÇO PARA A ÂNCORA
   
   A âncora do AdSense é fixa no rodapé da tela e cobre o que estiver ali —
   inclusive outro anúncio, quando o Auto Ads coloca um in-page perto do
   fim. Isso é o Google sobrepondo o próprio anúncio; o tema não controla
   nenhum dos dois.
   
   O que dá para fazer é reservar espaço no fim do documento, para que o
   último conteúdo não fique permanentemente escondido embaixo dela.
   ========================================================================== */
body:has([data-anchor-status="displayed"]) .pos-rodape{
  min-height:96px;
}

/* Fallback para navegador sem :has() — reserva sempre um pouco no mobile,
   onde a âncora é praticamente certa. */
@media (max-width:899px){
  .pos-rodape{min-height:70px}
}

/* ==========================================================================
   ANÚNCIO DENTRO DO BLOCO DO CABEÇALHO
   
   Se o Auto Ads inserir uma unidade aqui, ela herda o position:sticky do
   bloco e passa a acompanhar o scroll — some ao descer, reaparece ao
   subir. O leitor vê um anúncio "solto" perseguindo a tela, e a unidade
   acumula impressões sem ser realmente vista.
   
   Quando isso acontece, o cabeçalho abre mão do sticky. Perder o
   comportamento inteligente do menu é preferível a arrastar anúncio pela
   tela — e o Google decide sozinho onde insere, então o tema precisa
   reagir em vez de assumir que a inserção não vai ocorrer.
   ========================================================================== */
.topo-bloco:has(.google-auto-placed),
.topo-bloco:has(ins.adsbygoogle),
.topo-bloco.tem-anuncio{
  position:static;
  transform:none!important;
}

/* O anúncio dentro do bloco volta ao fluxo, sem herdar nada. */
.topo-bloco .google-auto-placed,
.topo-bloco ins.adsbygoogle{
  position:static!important;
  transform:none!important;
}

/* ==========================================================================
   RODAPÉ NO CELULAR
   
   Quatro blocos empilhados em coluna única ocupam quase três telas de
   altura. Como são listas curtas de links, duas colunas cabem sem apertar
   e cortam a altura pela metade — o rodapé volta a ser navegável em vez
   de virar um corredor de rolagem.
   ========================================================================== */
@media (max-width:619px){

  .rodape{padding:24px 0 18px;margin-top:30px}

  .rodape-grade{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px 16px;
    padding-bottom:16px;
  }

  /* Blocos de texto corrido ocupam a linha inteira; listas de link ficam
     lado a lado. Foi o contato numa coluna estreita que partiu o e-mail
     no meio da palavra. */
  .rodape-col--marca,
  .rodape-col:last-child{grid-column:1 / -1}

  .rodape-marca{font-size:1.02rem;margin-bottom:3px}
  .rodape-tag{margin-bottom:6px;font-size:.8rem}
  .rodape-sobre{
    margin:0;font-size:.84rem;line-height:1.5;
    max-width:none;
  }

  .rodape-titulo{
    margin-bottom:8px;
    font-size:10px;
  }
  .rodape-links li{margin-bottom:6px}
  .rodape-links a{
    padding:1px 0;
    font-size:.86rem;
    line-height:1.3;
  }

  /* Endereço de e-mail: quebra só entre palavras, nunca no meio delas.
     O break-word anterior partia "gmail.com" ao meio, que lê como erro. */
  .rodape-contato,
  .rodape-editor{
    margin-bottom:4px;
    font-size:.84rem;
    word-break:normal;
    overflow-wrap:break-word;
  }
  .rodape-contato a{display:inline-block}

  .rodape-base{padding-top:12px}
  .rodape-aviso{
    font-size:.72rem;line-height:1.45;
    margin-bottom:6px;
    max-width:none;
  }
  .rodape-copy{font-size:.76rem}
}

/* Telas bem estreitas voltam a uma coluna: duas ficariam apertadas demais
   para o alvo de toque. */
@media (max-width:359px){
  .rodape-grade{grid-template-columns:1fr}
}

/* ==========================================================================
   FUNDAÇÃO FLUIDA
   
   Esta camada vem depois de tudo de propósito: ela substitui os tamanhos
   fixos espalhados pelo tema por valores que escalam com a tela.
   
   O que ela resolve de uma vez: texto estourando coluna, palavra partida
   no meio, grade apertada em tela intermediária, título grande demais no
   celular. Em vez de corrigir cada caso, o valor deixa de ser fixo.
   ========================================================================== */

/* --- Nada ultrapassa a caixa que o contém ------------------------------ */

/* Iframes de anúncio ficam de fora pelo mesmo motivo do reset acima:
   teto de largura neles corta o criativo em vez de ajustá-lo. */
img,svg,video,embed,object,canvas,table,pre{
  max-width:100%;
}
iframe:not([id^="aswift"]):not([id^="google_ads"]):not([name^="aswift"]){
  max-width:100%;
}
img,svg,video{height:auto}

/* Item de grid ou flex tem min-width:auto por padrão, o que significa
   "não encolha abaixo do meu conteúdo". Uma palavra longa dentro dele
   alarga a coluna inteira. Isto é a causa mais comum de estouro. */
.palco > *,
.lista > *,
.grade-cat > *,
.portas > *,
.rev-grade > *,
.destaques-grade > *,
.lp-difs > *,
.rodape-grade > *,
.editoria-corpo > *,
.chamadas > *,
.comp-item > *{
  min-width:0;
}

/* --- Texto quebra entre palavras, nunca no meio delas ------------------ */
body{
  overflow-wrap:break-word;
  word-break:normal;
}
/* Endereços, URLs e códigos podem quebrar em qualquer ponto: são strings
   sem espaço e não têm onde mais quebrar. */
.rodape-contato a,
.conteudo a[href^="http"],
.entry-content a[href^="http"],
code,kbd,samp{
  overflow-wrap:anywhere;
}

/* --- Tipografia fluida ------------------------------------------------- */
body{font-size:var(--t-base)}

h1{font-size:var(--t-titulo)}
h2{font-size:var(--t-g)}
h3{font-size:var(--t-m)}

.abertura-titulo,
.cat-titulo,
.lp-secao-titulo,
.editoria-dest-titulo{font-size:var(--t-titulo)}

.manchete-titulo,
.rev-capa-titulo,
.comp-item--forte .comp-titulo,
.hero-titulo{font-size:var(--t-manchete)}

.lp-titulo{font-size:var(--t-heroi)}
.lp-cta-titulo{font-size:var(--t-titulo)}

.cartao-titulo,
.capa-titulo,
.chamada-titulo,
.comp-titulo,
.porta-titulo,
.destaque-titulo,
.rev-item-titulo,
.sobre-titulo,
.lp-dif-titulo,
.busca-viva-titulo{font-size:var(--t-m)}

.cartao-resumo,
.capa-resumo,
.destaque-resumo,
.editoria-dest-linha,
.manchete-linha,
.lp-dif-texto,
.porta-texto,
.busca-viva-linha,
.rodape-sobre{font-size:var(--t-p)}

.secao-titulo,
.rodape-titulo,
.chapeu,
.chip,
.lp-kicker,
.lp-marcador,
.ad-rot,
.cartao-meta,
.artigo-meta,
.editoria-data,
.comp-data{font-size:var(--t-micro)}

.rodape,
.rodape-links a,
.lateral-bloco a,
.editoria-lista a,
.apoio a,
.lp-selos li{font-size:var(--t-p)}

.rodape-aviso,
.rodape-copy,

/* Títulos de manchete perdem o tracking apertado quando ficam pequenos:
   em corpo reduzido, letra colada prejudica a leitura. */
@media (max-width:520px){
  .manchete-titulo,
  .rev-capa-titulo,
  .lp-titulo,
  .comp-item--forte .comp-titulo{letter-spacing:-.022em}
}

/* --- Espaçamentos fluidos ---------------------------------------------- */
.artigo{padding:var(--gap-m) var(--gap-m) var(--gap-g)}
.abertura{padding:var(--gap-g) var(--gap-m)}
.lateral-bloco{padding:var(--gap-m)}
.cartao,
.capa-card--texto,
.lp-dif{padding:var(--gap-m)}
.lp-cta{padding:var(--gap-g) var(--gap-m)}
.lp-secao{margin:var(--gap-g) 0}
.secao-cat,
.editoria{margin-top:var(--gap-g)}
.portas-secao{margin-top:var(--gap-g)}

/* --- Grades que se reorganizam sozinhas -------------------------------- */
/* auto-fit com minmax: as colunas se ajustam à largura disponível em vez
   de trocar de número em pontos fixos. Some a "largura intermediária"
   onde o layout ficava apertado. */
.grade-cat{
  grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap:var(--gap-m);
}
.portas{
  grid-template-columns:repeat(auto-fit, minmax(min(215px, 100%), 1fr));
  gap:var(--gap-p);
}
.rev-grade{
  grid-template-columns:repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap:var(--gap-p);
}
.destaques-grade{
  grid-template-columns:repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap:var(--gap-p);
}
.lp-difs{
  grid-template-columns:repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap:var(--gap-p);
}

/* --- Alvos de toque nunca encolhem ------------------------------------- */
/* O tamanho do texto escala; a área clicável, não. Botão pequeno demais
   no celular é erro de acessibilidade e de conversão. */
.cta-btn,
.lp-btn,
.busca-viva-btn,
.busca-viva-campo,
.busca input,
.busca button,
.ver-todas a,
.paginacao .page-numbers,
.topo-busca,
.topo-hamburguer{
  min-height:44px;
}
.busca-viva-chip,

/* --- Tabelas e blocos largos dentro do conteúdo ------------------------ */
/* Tabela larga rola dentro da própria caixa, sem arrastar a página. */
.conteudo table,
.entry-content table{
  display:block;
  width:100%;
  overflow-x:auto;
  border-collapse:collapse;
}
.conteudo pre,
.entry-content pre{
  overflow-x:auto;
  max-width:100%;
}

/* ==========================================================================
   COMENTÁRIOS
   ========================================================================== */
.comentarios{
  background:var(--carta);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  padding:var(--gap-m);
  margin:var(--gap-m) 0;
}
.comentarios-titulo{margin:0 0 var(--gap-m);font-size:var(--t-g)}
.comentarios-lista{list-style:none;margin:0 0 var(--gap-m);padding:0}
.comentarios-lista .children{list-style:none;margin:12px 0 0;padding-left:var(--gap-m)}
.comentarios-lista li{
  padding:14px 0;
  border-bottom:1px solid var(--linha);
}
.comentarios-lista li:last-child{border-bottom:0}
.comentarios-lista .comment-author{
  display:flex;align-items:center;gap:9px;
  margin-bottom:6px;
  font-size:var(--t-p);font-weight:700;
}
.comentarios-lista .avatar{border-radius:50%;flex:0 0 auto}
.comentarios-lista .comment-meta{
  font-size:var(--t-micro);color:var(--breu-45);margin-bottom:8px;
}
.comentarios-lista .comment-meta a{color:var(--breu-45);text-decoration:none}
.comentarios-lista p{margin:0 0 .8em;font-size:var(--t-p);line-height:1.6}
.comentarios-lista .reply a{
  font-size:var(--t-mini);font-weight:700;color:var(--mar);text-decoration:none;
}
.comentarios-fechados{
  margin:0 0 var(--gap-m);font-size:var(--t-p);color:var(--breu-45);
}

.comentarios-form{margin-top:var(--gap-m)}
.comentarios-form .comment-reply-title{margin:0 0 12px;font-size:var(--t-m)}
.comentarios-form label{
  display:block;margin-bottom:5px;
  font-size:var(--t-mini);font-weight:700;color:var(--breu-70);
}
.comentarios-form input[type=text],
.comentarios-form input[type=email],
.comentarios-form input[type=url],
.comentarios-form textarea{
  width:100%;max-width:100%;
  padding:11px 14px;
  font-family:var(--fonte);font-size:16px;
  color:var(--breu);background:var(--papel);
  border:1px solid var(--linha);border-radius:var(--raio-p);
  margin-bottom:14px;
}
.comentarios-form textarea{min-height:120px;resize:vertical}
.comentarios-form input:focus,
.comentarios-form textarea:focus{
  outline:none;border-color:var(--sinal);background:var(--carta);
}
.comentarios-form .submit{
  min-height:48px;padding:0 26px;
  background:var(--sinal);color:#fff;
  border:0;border-radius:100px;
  font-family:var(--fonte);font-size:var(--t-p);font-weight:700;
  cursor:pointer;
}
.comentarios-form .submit:hover{background:var(--sinal-escuro)}
.comentarios-form .comment-form-cookies-consent{
  display:flex;align-items:flex-start;gap:8px;margin-bottom:14px;
}
.comentarios-form .comment-form-cookies-consent label{
  margin:0;font-weight:400;font-size:var(--t-mini);color:var(--breu-70);
}

/* ==========================================================================
   CARTÃO NÃO É PONTO DE INSERÇÃO
   
   O Auto Ads estava entrando DENTRO do cartão de listagem, entre o título
   e o resumo — o cartão aparecia partido ao meio, com a borda começando
   antes do anúncio e terminando depois.
   
   Filho de container flex não é candidato a ponto de inserção. É a mesma
   técnica usada no cabeçalho: o anúncio passa a entrar ENTRE os cartões,
   que é onde ele pertence e onde rende igual.
   ========================================================================== */
.cartao,
.capa-card,
.destaque,
.lp-dif,
.comp-item{
  display:flex;
  flex-direction:column;
  align-items:stretch;
}

/* O item do feed continua em fluxo normal por fora: é entre eles que o
   in-feed deve encaixar. */
.feed-item{display:block}

/* Unidade que o Google insira mesmo assim não quebra o cartão. */
.cartao .google-auto-placed,
.capa-card .google-auto-placed,
.comp-item .google-auto-placed{
  order:99;                     /* vai para o fim do cartão, não para o meio */
  width:100%;
  margin-top:12px;
}

/* ==========================================================================
   CÓDIGO FIXO NA TELA
   
   Barra presa no topo ou no rodapé. Sempre com botão de fechar: elemento
   que cobre parte da tela e não pode ser dispensado é o que as políticas
   de anúncio chamam de intersticial forçado.
   ========================================================================== */
.ad-fixo{
  position:fixed;left:0;right:0;
  z-index:60;
  background:var(--carta);
  border-top:1px solid var(--linha);
  border-bottom:1px solid var(--linha);
  padding:6px 12px 8px;
  text-align:center;
  box-shadow:0 -2px 14px var(--sombra);
}
.ad-fixo--cabecalho{top:0;box-shadow:0 2px 14px var(--sombra)}
.ad-fixo--rodape{bottom:0}
.ad-fixo[hidden]{display:none}

.ad-fixo-fechar{
  position:absolute;top:4px;right:6px;
  width:26px;height:26px;
  border:0;border-radius:50%;
  background:var(--papel);color:var(--breu-70);
  font-size:17px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.ad-fixo-fechar:hover{background:var(--linha)}
.ad-fixo .ad-rot{display:block;margin-bottom:2px}
/* Mesmo motivo do invólucro comum: a unidade precisa de largura própria
   para o AdSense escolher o formato. */
.ad-fixo .ad-slot{display:block;width:100%}

/* O rodapé fixo divide espaço com a âncora do AdSense. Se as duas
   estiverem ligadas, a do tema cede — a do Google não pode ser movida. */
body:has([data-anchor-status="displayed"]) .ad-fixo--rodape{display:none}

/* ==========================================================================
   CLASSES DO WORDPRESS
   
   O editor de blocos e as funções internas geram marcação com classes
   próprias. Sem estas regras, legenda de imagem fica igual ao corpo do
   texto, galeria vira lista solta e o link "pular para o conteúdo"
   aparece no meio da página.
   ========================================================================== */

/* Texto só para leitor de tela.
   O WordPress usa esta classe em vários lugares — no formulário de busca,
   no "continue lendo", na paginação de comentários. Sem a regra, esses
   textos aparecem visualmente e poluem a interface. */
.screen-reader-text{
  border:0;
  clip-path:inset(50%);
  height:1px;width:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  position:absolute!important;
  white-space:nowrap;
}
.screen-reader-text:focus{
  clip-path:none;
  height:auto;width:auto;
  padding:14px 22px;
  background:var(--carta);
  color:var(--mar);
  font-size:var(--t-p);font-weight:700;
  border-radius:var(--raio-p);
  box-shadow:0 4px 18px var(--sombra);
  z-index:100000;
  top:12px;left:12px;
  text-decoration:none;
}

/* Alinhamentos --------------------------------------------------------- */
.alignleft{float:left;margin:.4em var(--gap-m) var(--gap-p) 0}
.alignright{float:right;margin:.4em 0 var(--gap-p) var(--gap-m)}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.alignnone{margin:var(--gap-p) 0}

@media (max-width:520px){
  /* Em tela estreita, texto contornando imagem fica com linhas de duas
     ou três palavras. Melhor empilhar. */
  .alignleft,.alignright{float:none;display:block;margin:var(--gap-p) auto}
}

/* Blocos largos: só valem onde há espaço fora da coluna de leitura. */
.conteudo .alignwide,
.entry-content .alignwide{
  margin-left:calc(var(--gap-m) * -1);
  margin-right:calc(var(--gap-m) * -1);
  max-width:calc(100% + var(--gap-m) * 2);
}
.conteudo .alignfull,
.entry-content .alignfull{
  margin-left:calc(var(--gap-m) * -1);
  margin-right:calc(var(--gap-m) * -1);
  max-width:calc(100% + var(--gap-m) * 2);
}
@media (min-width:900px){
  .conteudo .alignwide,
  .entry-content .alignwide{
    margin-left:-40px;margin-right:-40px;
    max-width:calc(100% + 80px);
  }
}

/* Legendas ------------------------------------------------------------- */
.wp-caption{max-width:100%;margin-bottom:var(--gap-m)}
.wp-caption img{display:block;width:100%;height:auto;border-radius:var(--raio-p)}
.wp-caption-text,
.wp-element-caption,
figcaption,
.gallery-caption{
  margin:7px 0 0;
  font-size:var(--t-mini);
  line-height:1.5;
  color:var(--breu-45);
  text-align:center;
}

/* Blocos do editor ----------------------------------------------------- */
.wp-block-image{margin:var(--gap-m) 0}
.wp-block-image img{border-radius:var(--raio-p);height:auto}

.wp-block-quote,
blockquote{
  margin:var(--gap-m) 0;
  padding:2px 0 2px var(--gap-m);
  border-left:3px solid var(--sinal);
  font-size:1.02em;
  color:var(--breu-70);
}
.wp-block-quote cite,
blockquote cite{
  display:block;margin-top:8px;
  font-size:var(--t-mini);font-style:normal;color:var(--breu-45);
}

.wp-block-pullquote{
  margin:var(--gap-g) 0;padding:var(--gap-m) 0;
  border-top:2px solid var(--linha);border-bottom:2px solid var(--linha);
  text-align:center;
}

.wp-block-table table,
.wp-block-table{margin:var(--gap-m) 0}
.wp-block-table th,
.wp-block-table td{
  padding:9px 12px;
  border:1px solid var(--linha);
  font-size:var(--t-p);
  text-align:left;
}
.wp-block-table th{background:var(--papel);font-weight:700}

.wp-block-separator,
hr{
  border:0;border-top:1px solid var(--linha);
  margin:var(--gap-g) auto;
  max-width:180px;
}

.wp-block-button__link{
  display:inline-flex;align-items:center;
  min-height:46px;padding:0 24px;
  background:var(--sinal);color:#fff;
  border-radius:100px;
  font-weight:700;font-size:var(--t-p);
  text-decoration:none;
}
.wp-block-button__link:hover{background:var(--sinal-escuro);color:#fff}
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent;color:var(--breu);
  border:1px solid var(--linha);
}

.wp-block-gallery{margin:var(--gap-m) 0}
.wp-block-embed{margin:var(--gap-m) 0}
.wp-block-embed iframe{max-width:100%;border-radius:var(--raio-p)}

.wp-block-code,
.wp-block-preformatted{
  background:var(--papel);
  border:1px solid var(--linha);
  border-radius:var(--raio-p);
  padding:var(--gap-p);
  font-size:var(--t-mini);
  overflow-x:auto;
}

/* Post fixo e comentário do autor: o WordPress marca, o tema sinaliza. */
.sticky .cartao-titulo::before,
.sticky .artigo-titulo::before{
  content:"★ ";
  color:var(--sinal);
}
.bypostauthor > .comment-body .comment-author::after{
  content:" ·";
  color:var(--sinal);
}

/* ==========================================================================
   ANÚNCIO LOGO ABAIXO DO CABEÇALHO
   
   Contido na mesma largura do conteúdo, e não na da janela: anúncio
   ocupando a tela inteira logo na entrada é o que faz a página parecer
   feita para o anúncio, mesmo estando na posição certa.
   ========================================================================== */
.ad-wrap[data-local="apos_cabecalho"],
.tv-ad-topo{
  max-width:var(--palco);
  margin:14px auto;
  padding:0 var(--lado);
}

/* No celular o anúncio usa a largura inteira.
   
   Com data-full-width-responsive ligado, o AdSense escolhe o criativo
   pela largura da TELA, não pela do container. Numa coluna com 14px de
   margem de cada lado, ele serve algo 28px mais largo do que cabe — e a
   diferença aparece como corte.
   
   Tirar a margem lateral só do anúncio resolve os dois lados: o criativo
   cabe inteiro e a medição do AdSense passa a bater com o espaço real.
   O texto em volta mantém a margem. */
@media (max-width:619px){
  .ad-wrap[data-local="apos_cabecalho"],
  .tv-ad-topo{
    padding:0 8px;
  }
}

/* ==========================================================================
   BOTÃO FLUTUANTE DE CONTATO
   
   Fixo na tela, com tamanho proporcional ao dispositivo. No celular ele
   precisa ser grande o bastante para o dedo (44px é o mínimo de alvo de
   toque) e pequeno o bastante para não cobrir o conteúdo — a proporção
   que funciona nos dois não é a mesma, por isso as medidas mudam.
   ========================================================================== */
.tv-bf{
  position:fixed;
  z-index:65;                    /* abaixo do menu (70) e da âncora (75) */
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:12px 18px 12px 14px;
  border-radius:100px;
  background:var(--bf-cor,#25D366);
  color:var(--bf-texto,#fff);
  font-family:var(--fonte);
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
  box-shadow:0 6px 22px rgba(0,0,0,.24);
  transition:transform var(--transicao),box-shadow var(--transicao),opacity var(--transicao);
  -webkit-tap-highlight-color:transparent;
}
.tv-bf:hover,
.tv-bf:focus-visible{
  color:var(--bf-texto,#fff);
  text-decoration:none;
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.tv-bf:active{transform:translateY(0) scale(.99)}
.tv-bf:focus-visible{outline:3px solid #fff;outline-offset:3px}

.tv-bf-icone{
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  width:24px;height:24px;
  /* Sem cor própria, herda a do texto. */
  color:var(--bf-icone,var(--bf-texto,#fff));
}
.tv-bf-icone svg{display:block;width:100%;height:100%}

/* Texto e descrição empilhados. */
.tv-bf-rotulos{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
}
.tv-bf-texto{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

/* A descrição é uma linha de apoio: menor, mais leve e um pouco
   transparente, para o texto principal continuar sendo o que se lê
   primeiro. Sem isso, duas linhas do mesmo peso competem entre si. */
.tv-bf-desc{
  font-size:.78em;
  font-weight:600;
  opacity:.88;
  line-height:1.25;
  margin-top:1px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

/* Com duas linhas o botão fica mais alto: o raio total viraria uma
   cápsula estranha, então arredonda menos. */
.tv-bf--com-desc{
  border-radius:16px;
  padding:10px 18px 10px 14px;
  align-items:center;
}

/* Só ícone: círculo. */
.tv-bf--so-icone{
  padding:0;
  width:56px;height:56px;
  justify-content:center;
  gap:0;
}
.tv-bf--so-icone .tv-bf-icone{width:28px;height:28px}

/* --- posições -------------------------------------------------------- */
.tv-bf--baixo-direita{right:18px;bottom:18px}
.tv-bf--baixo-esquerda{left:18px;bottom:18px}
.tv-bf--baixo-centro{left:50%;bottom:18px;transform:translateX(-50%)}
.tv-bf--baixo-centro:hover,
.tv-bf--baixo-centro:focus-visible{transform:translateX(-50%) translateY(-2px)}
.tv-bf--baixo-centro:active{transform:translateX(-50%)}
.tv-bf--meio-direita{right:18px;top:50%;transform:translateY(-50%)}
.tv-bf--meio-direita:hover,
.tv-bf--meio-direita:focus-visible{transform:translateY(-50%) scale(1.02)}
.tv-bf--meio-esquerda{left:18px;top:50%;transform:translateY(-50%)}
.tv-bf--meio-esquerda:hover,
.tv-bf--meio-esquerda:focus-visible{transform:translateY(-50%) scale(1.02)}

/* --- celular --------------------------------------------------------- */
@media (max-width:619px){
  .tv-bf{
    font-size:13px;
    padding:10px 15px 10px 12px;
    gap:7px;
  }
  .tv-bf-icone{width:21px;height:21px}

  .tv-bf--so-icone{width:52px;height:52px;padding:0}
  .tv-bf--so-icone .tv-bf-icone{width:25px;height:25px}

  .tv-bf--baixo-direita,
  .tv-bf--baixo-esquerda,
  .tv-bf--baixo-centro{bottom:14px}
  .tv-bf--baixo-direita,.tv-bf--meio-direita{right:14px}
  .tv-bf--baixo-esquerda,.tv-bf--meio-esquerda{left:14px}

  /* Texto longo em tela estreita vira botão atravessado.
     O teto força a reticência em vez de empurrar o layout. */
  .tv-bf-rotulos{max-width:46vw}
  .tv-bf-desc{font-size:.76em}
  .tv-bf--com-desc{padding:9px 15px 9px 12px;border-radius:14px}
}

/* Telas muito estreitas: as posições do meio da lateral cobrem leitura
   demais. Descem para o canto, onde atrapalham menos. */
@media (max-width:400px){
  .tv-bf--meio-direita,
  .tv-bf--meio-esquerda{
    top:auto;bottom:14px;transform:none;
  }
  .tv-bf--meio-direita:hover,
  .tv-bf--meio-esquerda:hover{transform:translateY(-2px)}
}

/* --- a âncora do AdSense tem prioridade ------------------------------ */

/* O botão fica ACIMA da faixa da âncora desde o início.
   
   A versão anterior só subia depois que a âncora aparecia — e isso criava
   um ciclo fechado: o AdSense inspeciona o rodapé antes de decidir servir
   a âncora, encontrava o botão ocupando a faixa, desistia de inserir, e
   a regra que moveria o botão nunca chegava a valer.
   
   Agora a reserva é permanente no celular, onde a âncora aparece. Custa
   uns 90px de distância da borda e garante que o formato que mais rende
   nunca deixe de ser servido por causa de um botão de contato. */
@media (max-width:899px){
  .tv-bf--baixo-direita,
  .tv-bf--baixo-esquerda,
  .tv-bf--baixo-centro{
    bottom:96px;
  }
}

/* Com a âncora realmente na tela, sobe um pouco mais: a altura dela varia
   conforme o criativo, e 96px cobre o caso comum, não todos. */
body:has([data-anchor-status="displayed"]) .tv-bf--baixo-direita,
body:has([data-anchor-status="displayed"]) .tv-bf--baixo-esquerda,
body:has([data-anchor-status="displayed"]) .tv-bf--baixo-centro{
  bottom:124px;
}

/* O bloco fixo do tema também disputa o mesmo canto. */
body:has(.ad-fixo--rodape:not([hidden])) .tv-bf--baixo-direita,
body:has(.ad-fixo--rodape:not([hidden])) .tv-bf--baixo-esquerda,
body:has(.ad-fixo--rodape:not([hidden])) .tv-bf--baixo-centro{
  bottom:118px;
}

/* Classe posta pelo JS: mede a altura real da âncora e ajusta.
   Cobre navegador sem :has() e criativo mais alto que o previsto. */
.tv-bf.tv-bf--acima-ancora{
  bottom:var(--bf-sobe,124px)!important;
}

/* Âncora fechada pelo visitante: ela não volta nesta página, então a
   reserva de espaço deixa de fazer sentido e o botão desce ao canto. */
.tv-bf.tv-bf--sem-ancora{
  bottom:18px!important;
}
@media (max-width:619px){
  .tv-bf.tv-bf--sem-ancora{bottom:14px!important}
}

/* --- animação de destaque -------------------------------------------- */
.tv-bf--pulsa::before{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  background:inherit;
  z-index:-1;
  opacity:.6;
}

@media (prefers-reduced-motion:no-preference){
  .tv-bf--pulsa::before{
    animation:tv-bf-pulso 2.4s ease-out 6;
  }
}

@keyframes tv-bf-pulso{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(1.5);opacity:0}
  100%{transform:scale(1.5);opacity:0}
}

/* Sem movimento na impressão. */
@media print{
  .tv-bf{display:none!important}
}

/* ==========================================================================
   ANÚNCIO NO CELULAR USA A LARGURA INTEIRA
   
   O conteúdo do artigo tem margem lateral, e é bom que tenha: texto
   colado na borda cansa. Mas o anúncio dentro dele herda essa margem, e
   com data-full-width-responsive o AdSense mede a tela em vez da coluna
   — pedindo um criativo 28 a 33px mais largo do que cabe. A diferença
   aparece como corte na lateral.
   
   A margem negativa devolve ao anúncio a largura que o AdSense está
   medindo. O texto em volta continua com a margem intacta.
   ========================================================================== */
@media (max-width:619px){
  /* Recupera quase toda a largura, mas deixa uma folga.
     
     A margem cheia do texto (14 a 26px de cada lado) tirava espaço
     demais e o criativo aparecia cortado. Largura total corrigia o
     corte, mas o anúncio encostava na borda e parecia meio escondido.
     
     A folga de 8px é o meio-termo: dá respiro visual sem retomar os
     30px que causavam o problema. */
  .conteudo .ad-wrap,
  .entry-content .ad-wrap,
  .artigo .ad-wrap{
    margin-left:calc((var(--lado) - 8px) * -1);
    margin-right:calc((var(--lado) - 8px) * -1);
    width:auto;
  }

  /* O rótulo acompanha o texto, não a borda do anúncio. */
  .conteudo .ad-wrap > .ad-rot,
  .entry-content .ad-wrap > .ad-rot,
  .artigo .ad-wrap > .ad-rot{
    padding-left:calc(var(--lado) - 8px);
  }
}