/* ============================================================================
   SISTEMA VISUAL — Redação e Dialogia
   ----------------------------------------------------------------------------
   Base: direção 03 (caderno de correção) — papel claro, coluna de margem,
   Bricolage Grotesque no display.
   Da 01 vem o contraste de largura da Archivo e o trilho horizontal.
   Da 02 vem o letterbox com zoom lento, usado UMA vez por site (herói da home).

   Regra de ritmo: o papel é o chão padrão; banda escura é pontuação, não
   alternância. Duas por página, no máximo.
   ========================================================================= */

:root{
  /* papel */
  --papel:#F7F4ED;
  --papel-2:#EFEBE2;
  --tinta:#191713;
  --tinta-2:#5E5749;
  --tinta-3:#8B8375;

  /* noite */
  --noite:#0C0C0E;
  --noite-2:#16151A;
  --claro:#F6F4F1;
  --claro-2:#A9A49B;

  /* marca */
  --rosa:#EF519D;
  /* O rosa da marca sobre papel claro dá 2,7:1 — ilegível como texto.
     Esta é a mesma cor, escurecida até 4,5:1. Continua rosa, e continua viva. */
  --rosa-forte:#C4306F;

  /* Azul de caneta esferográfica. Não é cor de marca — é tinta, da mesma
     família funcional da pauta: existe para parecer escrito à mão sobre o
     papel. 8,4:1 sobre o papel claro, então é anotação legível e não
     enfeite. O azul da marca (#75CDD8) continua sendo o azul da marca. */
  --tinta-caneta:#1B3FA0;
  --laranja:#F99F34;
  --azul:#75CDD8;

  /* fios */
  --fio:rgba(25,23,19,.16);
  --fio-esc:rgba(255,255,255,.14);
  --pauta:rgba(117,205,216,.28);

  /* medidas */
  --larg:1180px;
  --gut:clamp(20px,4.4vw,56px);
  --margem-col:clamp(132px,19.5vw,290px);

  /* Altura do logotipo. UM valor, usado pelo cabeçalho interno e pelo da
     home — era daqui que vinha a diferença de tamanho entre as páginas.
     38px porque a 30 a serifada itálica ficava tímida ao lado dos títulos
     em grotesca 800. */
  --logo-alt:clamp(28px,3vw,36px);
  /* Este é o logotipo COMPLETO, com a assinatura "inteligências em diálogo"
     embaixo. A assinatura ocupa 14% da altura do arquivo: a 46px ela saía com
     5px e virava borrão. A 64px sai com 9px e se lê. */
  --logo-alt-rodape:clamp(48px,5.6vw,64px);

  /* Altura do cabeçalho. UM valor para o topo do site e o da home — eram
     dois números diferentes (72px de min-height contra 11px de padding),
     e no celular a home ficava visivelmente mais baixa que o resto. */
  --topo-alt:clamp(62px,8vw,72px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:Asap,"Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--rosa); outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
}

.rd-env{max-width:var(--larg); margin:0 auto; padding:0 var(--gut)}
.rd-estreito{max-width:70ch}

/* ---------- tipografia ---------- */
h1,h2,h3,h4{
  font-family:"Bricolage Grotesque","Asap",sans-serif;
  font-weight:800; letter-spacing:-.032em; line-height:1.02;
  margin:0; text-wrap:balance;
}
.rd-h1{font-size:clamp(2.2rem,6vw,4.3rem); max-width:18ch}
.rd-h2{font-size:clamp(1.7rem,4vw,2.9rem); max-width:22ch}
.rd-h3{font-size:clamp(1.15rem,2.2vw,1.5rem); letter-spacing:-.022em}
p{margin:0 0 18px}
.rd-lead{font-size:clamp(1.05rem,1.7vw,1.2rem); color:#3E392F; max-width:58ch}
.rd-lead b{color:var(--tinta); font-weight:600}

/* rótulo em Archivo — o contraste de largura vem da direção 01 */
.rd-rotulo{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 84,"wght" 700;
  font-size:.68rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--tinta-3); margin:0 0 14px; display:block;
}
.rd-rotulo--claro{color:var(--claro-2)}

/* marca-texto: um movimento, uma vez, no carregamento */
.rd-marca{
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  background-image:linear-gradient(rgba(249,159,52,.55),rgba(249,159,52,.55));
  background-repeat:no-repeat; background-position:0 94%; background-size:0% .26em;
  animation:rd-marcar .85s .45s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes rd-marcar{to{background-size:100% .26em}}

/* ---------- botões ---------- */
.rd-b{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:.98rem;
  padding:15px 28px; border-radius:2px; border:1px solid transparent;
  transition:background .2s, color .2s, transform .2s;
}
.rd-b:hover{transform:translateY(-1px)}
.rd-b--p{background:var(--tinta); color:var(--papel)}
.rd-b--p:hover{background:var(--rosa)}
.rd-b--s{background:transparent; color:var(--tinta); border-color:var(--fio)}
.rd-b--s:hover{border-color:var(--tinta)}
.rd-b--claro{background:var(--claro); color:var(--noite)}
.rd-b--claro:hover{background:var(--azul)}
.rd-link{
  text-decoration:none; border-bottom:1px solid var(--rosa); padding-bottom:2px;
  font-size:.98rem; color:var(--tinta-2);
}
/* Hover é COR, não escurecimento: o link ganha o rosa da marca em vez de
   caminhar para o preto. A versão escura vale no papel; sobre banda noturna
   entra o rosa cheio, que ali é o que salta. */
.rd-link:hover{color:var(--rosa-forte); border-bottom-color:var(--rosa-forte)}
.rd-noite .rd-link:hover,
.rd-rodape .rd-link:hover{color:var(--rosa); border-bottom-color:var(--rosa)}

/* ---------- cabeçalho ---------- */
.rd-topo{
  position:sticky; top:0; z-index:60;
  background:rgba(247,244,237,.92); backdrop-filter:blur(12px);
  /* Metade da opacidade do fio padrão: o cabeçalho precisa se separar do
     conteúdo, não se anunciar. Com --fio cheio a linha competia com a pauta
     do papel, que é o desenho que importa aqui. */
  border-bottom:1px solid rgba(25,23,19,.07);
}
.rd-topo .rd-env{display:flex; align-items:center; gap:clamp(12px,1.6vw,22px); min-height:var(--topo-alt)}

/* ---------- variante escura do cabeçalho ----------
   Usada só onde o topo da página é escuro (hoje, a home, cujo herói é preto).
   Muda fundo, cor do texto e a cor do botão. NÃO muda altura, espaçamento,
   tamanho de logotipo nem a lista do menu: o cabeçalho é o mesmo objeto
   pintado de outro jeito. O arquivo do logotipo troca no PHP, porque é
   desenho e não cor de CSS — recolorir um SVG de marca por filtro é o tipo
   de atalho que estraga a marca. */
.rd-topo--escuro{
  background:rgba(13,12,11,.92);
  border-bottom-color:rgba(255,255,255,.14);
  color:var(--claro);
}
.rd-topo--escuro .rd-menu a{color:var(--claro-2)}
.rd-topo--escuro .rd-menu a:hover,
.rd-topo--escuro .rd-menu .current-menu-item > a{
  color:var(--claro); background:rgba(255,255,255,.08);
}
.rd-topo--escuro .rd-abre-menu{color:var(--claro)}
.rd-topo--escuro .rd-zap-topo{background:var(--azul); color:var(--noite)}
.rd-topo--escuro .rd-zap-topo:hover{background:#93DCE5; color:var(--noite)}
@media (max-width:1300px){
  .rd-topo--escuro .rd-menu{
    background:var(--noite); border-top:1px solid rgba(255,255,255,.14);
  }
}
/* Logotipo original em SVG. A altura manda; a largura acompanha pela
   proporção do arquivo (7,69:1). width/height no HTML reservam o espaço
   antes de a imagem chegar — sem isso o cabeçalho pula ao carregar.
   As duas versões, clara e escura, têm geometria idêntica: são recortes
   da MESMA caixa do arquivo original, só deslocada. */
/* A MARCA NÃO ENCOLHE. Esta linha é o conserto de um bug que passou semanas
   sem ser entendido.

   Antes era flex:0 1 auto + max-width:100%, para a marca ceder espaço quando
   o menu crescesse. O efeito colateral: com a caixa espremida na horizontal e
   a altura travada em 36px, o Chrome deixa de respeitar o recorte do arquivo
   e passa a desenhar o que existe FORA dele. Como o arquivo tem a assinatura
   logo abaixo do traço, ela aparecia — pela metade, cortada pela borda da
   caixa. Era isso que parecia "logotipo cortado", e não o SVG.

   Agora quem cede espaço é o menu (que vira hambúrguer antes de apertar). */
.rd-logo{display:inline-flex; align-items:center; text-decoration:none}
.rd-logo img{display:block; height:var(--logo-alt); width:auto; max-width:100%}
/* A regra "a marca não encolhe" vale para o CABEÇALHO, e só.
   Aplicada no site inteiro, ela vazou para o rodapé: lá o logotipo é o
   completo, mais largo, dentro de uma coluna de grade — sem poder encolher,
   ele atropelava a coluna "Navegar" do lado. Cabeçalho é linha flexível
   disputada; rodapé é grade com colunas fixas. Problemas diferentes. */
.rd-topo .rd-logo{flex:0 0 auto}
.rd-topo .rd-logo img{max-width:none}
@media (max-width:520px){
  .rd-logo img{height:26px}
}
.rd-menu{display:flex; gap:2px; margin-left:auto; list-style:none; padding:0; margin-block:0}
/* Sete itens cabem em 1180px, mas por pouco. As medidas abaixo foram
   ajustadas até a linha fechar com folga — e a conta é: marca 274 + menu +
   botão + dois vãos <= 1068 (os 1180 do contêiner menos as goteiras).
   Se entrar um oitavo item, isto estoura de novo: nesse dia, ou o item vira
   rodapé ou o menu vira hambúrguer também no desktop. */
.rd-menu a{
  display:block; text-decoration:none; font-size:.85rem; color:var(--tinta-2);
  padding:9px 8px; border-radius:2px; transition:color .18s, background .18s;
  white-space:nowrap;   /* "Temas de redação" não pode virar duas linhas */
}
.rd-menu a:hover, .rd-menu .current-menu-item > a{color:var(--rosa-forte); background:var(--papel-2)}
/* O botão do topo não pode quebrar nem encolher: "Falar no WhatsApp" virava
   duas linhas e a caixa preta crescia para cima e para baixo, estourando a
   altura do cabeçalho. flex:0 0 auto tira ele da conta do encolhimento —
   quem cede espaço é o logotipo, que tem max-width. */
.rd-topo .rd-b{padding:11px 15px; font-size:.85rem; white-space:nowrap; flex:0 0 auto}
/* ---------- botão de menu: três barras ----------
   A palavra "Menu" dentro de uma pílula com borda custava perto de 90px de
   largura num cabeçalho de 375px — espaço que o logotipo precisava. Três
   barras dizem a mesma coisa em 44px, que é também o alvo mínimo de toque. */
.rd-abre-menu{
  display:none; width:44px; height:44px; padding:0; margin:0;
  background:none; border:0; cursor:pointer;
  place-items:center; color:var(--tinta);
  /* Sem isto o Android pinta um retângulo colorido sobre o botão no toque. */
  -webkit-tap-highlight-color:transparent;
}
.rd-abre-menu:focus-visible{outline:2px solid var(--rosa-forte); outline-offset:2px; border-radius:6px}
.rd-hamb, .rd-hamb::before, .rd-hamb::after{
  display:block; width:22px; height:2px; border-radius:2px;
  background:currentColor; transition:transform .22s ease, background-color .18s ease;
}
.rd-hamb{position:relative}
.rd-hamb::before, .rd-hamb::after{content:""; position:absolute; left:0}
.rd-hamb::before{top:-7px}
.rd-hamb::after{top:7px}
/* Aberto, vira X — o mesmo botão fecha, sem procurar outro alvo. */
.rd-topo.aberto .rd-hamb{background:transparent}
.rd-topo.aberto .rd-hamb::before{transform:translateY(7px) rotate(45deg)}
.rd-topo.aberto .rd-hamb::after{transform:translateY(-7px) rotate(-45deg)}

/* ---------- botão de conversa ----------
   O glifo é o arquivo oficial do WhatsApp, em variante branca sobre o botão
   escuro. Ele não é recolorido nem deformado: width e height são iguais,
   porque a marca é quadrada. */
.rd-zap-topo{gap:9px}
.rd-b-ico{width:20px; height:20px; flex:none; display:none}
/* Hover no rosa-forte e não no rosa da marca: sobre #EF519D o glifo branco
   ficaria em 3:1. Em #C4306F passa de 5:1 e a cor continua viva. */
.rd-zap-topo:hover{background:var(--rosa-forte)}
/* 1240 e não 1180: entre 1180 e 1240 a linha cabia por poucos pixels e o
   botão era o primeiro a ceder. Melhor cair no hambúrguer com folga do que
   entregar um cabeçalho apertado. */
@media (max-width:1300px){
  /* Três colunas com as laterais de mesma largura: o logotipo fica no centro
     ÓPTICO da tela, não no espaço que sobrou. É o que dá o alinhamento que
     um cabeçalho de celular precisa — polegar à esquerda, marca no meio. */
  .rd-topo .rd-env{
    display:grid; grid-template-columns:1fr auto 1fr;
    align-items:center; gap:10px; min-height:var(--topo-alt);
    position:relative;
  }
  .rd-abre-menu{display:grid; order:1; justify-self:start}
  .rd-logo{order:2; justify-self:center}
  .rd-topo .rd-b{order:3; justify-self:end; display:inline-flex}

  .rd-menu{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0; background:var(--papel);
    border-bottom:1px solid var(--fio); padding:8px var(--gut) 18px;
    order:4; grid-column:1 / -1;
  }
  .rd-topo.aberto .rd-menu{display:flex}
  .rd-menu a{padding:13px 0; border-bottom:1px solid var(--fio)}
}

/* Abaixo de 620px o rótulo do botão não cabe sem espremer o logotipo:
   ele vira só o ícone, num alvo redondo de 42px. */
@media (max-width:620px){
  .rd-topo .rd-b{
    width:42px; height:42px; padding:0; border-radius:999px;
    justify-content:center; gap:0;
  }
  .rd-zap-topo .rd-b-txt{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap;
  }
  .rd-b-ico{display:block}
  .rd-topo .rd-env{gap:8px; padding-inline:clamp(16px,4.6vw,26px)}
  .rd-logo img{height:28px}
}

/* ---------- coluna de margem: a assinatura do sistema ---------- */
.rd-folha{
  display:grid; grid-template-columns:var(--margem-col) minmax(0,1fr);
  position:relative;
}
.rd-folha::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; z-index:0;
  background:repeating-linear-gradient(180deg,transparent 0 31px,var(--pauta) 31px 32px);
}
.rd-folha > *{position:relative; z-index:1}
/* O recuo do topo é fixo, e não elástico, porque a coluna de margem agora
   escreve SOBRE a pauta: 72px são dois vãos de 32 mais os 8 que separam o
   topo da caixa de linha da base da letra cursiva. Recuo elástico tiraria a
   primeira frase da linha em metade das larguras de tela. */
.rd-margem{
  border-right:1px solid rgba(239,81,157,.42);
  padding:72px clamp(12px,1.8vw,22px) clamp(30px,4vw,50px) var(--gut);
}
/* A coluna de margem é manuscrita no site inteiro.
   Entrelinha travada em 32px — a altura exata da pauta — e espaçamentos em
   múltiplos de 32, para que cada linha escrita POUSE num risco do caderno em
   vez de flutuar perto dele. Por isso não há rotação: inclinar tiraria a
   frase da linha, que é justamente o que se quer aproveitar.

   O rótulo em caixa alta fica na fonte de sempre. Ele é a etiqueta que faz a
   coluna ser varrida de olho; manuscrito, viraria mais uma frase igual às
   outras e a coluna perderia a hierarquia que a torna útil. */
.rd-nota{
  font-family:Caveat,"Bricolage Grotesque",cursive; font-weight:600;
  font-size:clamp(1.12rem,1.5vw,1.3rem);
  line-height:32px; color:var(--tinta-caneta);
  margin:0 0 32px;
  overflow-wrap:break-word;
  hyphens:none;
  max-width:100%;
}
/* Endereços de e-mail e telefone: a quebra fica melhor antes do @ ou do
   ponto do que no meio de uma sílaba. */
.rd-nota a, .rd-nota .rd-quebra{word-break:break-word}
.rd-nota b{
  display:block; font-family:Archivo,sans-serif; font-weight:700;
  font-size:.64rem; letter-spacing:.14em; line-height:32px;
  text-transform:uppercase; color:var(--tinta-3); margin:0;
}
/* Válvula de escape: devolve uma nota à fonte normal, sem tirar a cursiva
   das outras. Para dado que se copia ou se soletra — um e-mail, um CNPJ,
   um nome próprio que precise ser lido letra por letra. */
.rd-nota--reto{
  font-family:Asap,sans-serif; font-weight:500;
  font-size:.86rem; line-height:32px; color:var(--tinta-2);
  overflow-wrap:anywhere; hyphens:auto;
}
.rd-corpo{padding:clamp(38px,5.5vw,70px) var(--gut) clamp(34px,5vw,64px)}
@media (max-width:820px){
  .rd-folha{grid-template-columns:1fr}
  /* No celular a margem vira faixa no topo e as notas empilham em bloco.
     O flex com espaçamento lateral que havia aqui jogava a primeira nota
     para fora da borda esquerda — e quebrava a pauta, porque somava altura
     que não era múltipla de 32. */
  /* 8px de recuo, e não 40. Os dois alinham a cursiva na pauta (8 e 40 dão
     o mesmo resto na divisão por 32), mas 40 abria um vão de quase 70px
     entre o cabeçalho e a primeira linha escrita — no celular isso é um
     terço da tela em branco antes de qualquer conteúdo. */
  .rd-margem{
    border-right:0; border-bottom:1px solid rgba(239,81,157,.42);
    padding:8px var(--gut) 20px;
    display:block;
  }
  /* O corpo também começava longe demais: 38px fixos abaixo de um filete
     que já separa visualmente as duas partes. */
  .rd-corpo{padding-top:26px}
  /* Sem margem entre as notas no celular. Rótulo e valor já ocupam duas
     linhas de pauta (32+32); a margem de 32 acrescentava uma TERCEIRA linha,
     em branco, entre cada par. Tirá-la economiza 96px numa faixa de três
     notas e não desalinha nada: 64 continua múltiplo de 32, que é a única
     condição para a cursiva pousar no risco. */
  .rd-nota{margin-bottom:0}
}

/* ---------- banda escura (pontuação) ---------- */
.rd-noite{background:var(--noite); color:var(--claro); position:relative; overflow:hidden}
.rd-noite h1,.rd-noite h2,.rd-noite h3{color:var(--claro)}
.rd-noite p{color:var(--claro-2)}
.rd-noite .rd-env{padding-top:clamp(48px,7vw,86px); padding-bottom:clamp(48px,7vw,86px)}
/* título de banda escura em Archivo, com o contraste de largura da direção 01 */
.rd-noite .rd-h2{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 118,"wght" 800;
  letter-spacing:-.04em;
}
.rd-noite .rd-h2 em{
  font-style:normal; font-variation-settings:"wdth" 62,"wght" 400; color:var(--claro-2);
}
.rd-noite .rd-h2 mark{background:none; color:var(--laranja)}

/* ---------- trilho horizontal (direção 01) ---------- */
.rd-trilho{
  display:flex; gap:14px; overflow-x:auto; padding-bottom:14px;
  scroll-snap-type:x proximity; scrollbar-width:thin;
}
.rd-trilho > *{flex:0 0 clamp(210px,27vw,272px); scroll-snap-align:start}
.rd-ficha{
  border:1px solid var(--fio-esc); padding:20px 18px 18px;
  display:flex; flex-direction:column; gap:10px; min-height:176px; text-decoration:none;
  transition:border-color .2s, background .2s;
}
.rd-ficha:hover{border-color:var(--rosa); background:rgba(239,81,157,.07)}
.rd-ficha .eixo{font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; color:var(--azul)}
.rd-ficha h4{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 104,"wght" 700;
  font-size:1.02rem; line-height:1.14; letter-spacing:-.015em; color:var(--claro);
}
.rd-ficha .pe{margin-top:auto; font-size:.72rem; color:var(--claro-2); font-variant-numeric:tabular-nums}

/* ---------- números ---------- */
.rd-cifras{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  border-top:1px solid var(--fio);
}
.rd-cifra{
  padding:clamp(20px,2.6vw,28px) clamp(18px,2.4vw,26px);
  border-right:1px solid var(--fio); display:flex; flex-direction:column; gap:7px;
}
.rd-cifra:last-child{border-right:0}
.rd-cifra .n{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:1.95rem;
  line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.rd-cifra .n em{font-style:normal; color:var(--rosa)}
.rd-cifra p{margin:0; font-size:.85rem; color:var(--tinta-2); line-height:1.45}
.rd-noite .rd-cifras{border-top-color:var(--fio-esc)}
.rd-noite .rd-cifra{border-right-color:var(--fio-esc)}
.rd-noite .rd-cifra p{color:var(--claro-2)}

/* ---------- retratos: tratamento documental ----------
   As três fotos vieram de origens diferentes (rua ao pôr do sol, parede
   branca, estante em perfil). Enfileirar sem tratamento denuncia a diferença.
   Recorte quadrado fixo + moldura de papel + leve unificação de temperatura
   fazem as três lerem como uma série fotografada de propósito.            */
.rd-gente{display:grid; gap:clamp(30px,4vw,54px)}
.rd-pessoa{
  display:grid; grid-template-columns:clamp(180px,26vw,300px) minmax(0,1fr);
  gap:clamp(20px,3.4vw,44px); align-items:start;
}
.rd-pessoa:nth-child(even){direction:rtl}
.rd-pessoa:nth-child(even) > *{direction:ltr}
@media (max-width:700px){
  .rd-pessoa,.rd-pessoa:nth-child(even){grid-template-columns:1fr; direction:ltr}
}
.rd-retrato{
  position:relative; background:var(--papel-2);
  border:1px solid var(--fio); padding:9px;
}
.rd-retrato img{
  width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center 28%;
  filter:contrast(1.04) saturate(.88) sepia(.10);
}
.rd-retrato figcaption{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 82,"wght" 600;
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-3); padding:11px 2px 3px; display:flex; gap:8px;
}
.rd-retrato figcaption span{margin-left:auto; font-variation-settings:"wdth" 82,"wght" 400}
.rd-cred{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 84,"wght" 600;
  font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--rosa); margin:0 0 9px;
}
.rd-pessoa h3{margin:0 0 12px}
.rd-pessoa p{font-size:.98rem; color:#3E392F}
.rd-fala{
  border-left:2px solid var(--laranja); padding:2px 0 2px 16px; margin:16px 0 0;
  font-size:.98rem; color:var(--tinta-2);
}

/* ---------- lista de negativas (honestidade como recurso) ---------- */
.rd-nao{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0; margin-top:34px}
.rd-nao div{padding:22px 26px 22px 0; border-top:1px solid var(--fio-esc)}
.rd-nao h4{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 88,"wght" 700;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--laranja); margin:0 0 9px;
}
.rd-nao p{margin:0; font-size:.92rem}

/* ---------- rodapé ---------- */
.rd-rodape{background:var(--noite); color:var(--claro-2); padding:clamp(46px,6vw,74px) 0 30px}
.rd-rodape .rd-logo img{height:var(--logo-alt-rodape)}
/* A coluna de Contato é mais larga que as outras duas por um motivo só: o
   e-mail tem 31 caracteres e não tem onde quebrar. Com colunas iguais ele
   partia em duas linhas — e endereço partido ao meio o visitante não copia
   nem digita direito. Aqui ele cabe inteiro. */
.rd-rodape-grade{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,.85fr) minmax(0,1.15fr) minmax(0,.7fr);
  gap:clamp(22px,3vw,40px);
}
.rd-rodape h4{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 84,"wght" 700;
  font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--claro);
  margin:0 0 14px;
}
.rd-rodape ul{list-style:none; padding:0; margin:0; display:grid; gap:9px}
.rd-rodape a{text-decoration:none; font-size:.92rem; transition:color .18s}
.rd-rodape a:hover{color:var(--rosa)}
/* Um e-mail não tem espaço para quebrar. Sem isto ele estoura a coluna e
   invade a vizinha — foi o que aconteceu com redacao.dialogia@yahoo.com
   sobre o "Facebook" da coluna ao lado. */
/* "anywhere" quebrava o e-mail no meio de uma sílaba — contato@redacaoedialogia.co
   / m.br. "break-word" só parte dentro da palavra quando não há alternativa:
   o navegador tenta primeiro os pontos naturais, depois do @ e dos pontos.
   Fica "contato@" numa linha e "redacaoedialogia.com.br" na outra. */
.rd-rodape li, .rd-rodape a, .rd-rodape p{overflow-wrap:break-word}
/* O e-mail nunca quebra no meio de uma palavra: só no <wbr> depois do @,
   que rd_email_html() insere. Vale em qualquer lugar do site — rodapé,
   coluna de margem do Contato, o que vier. Corpo menor para caber inteiro
   na coluna estreita da margem; quando não couber, parte em "contato@" e
   "redacaoedialogia.com.br", que são duas linhas legíveis. */
/* Seletor forte de propósito: `.rd-nota a` já define word-break:break-word
   e tem especificidade maior que uma classe solta. Sem o `a` aqui, a regra
   da margem ganhava e o endereço voltava a partir no meio. */
/* COR, E O PORQUÊ DE ELA ESTAR AQUI: ao centralizar a impressão do e-mail
   eu troquei a classe do link e ele perdeu o estilo — passou a cair no
   padrão do navegador, que pinta link visitado de roxo-azulado. Sobre o
   preto da banda escura isso é quase ilegível, e nenhuma outra cor do site
   se parece com aquilo.

   Agora a cor é declarada, inclusive :visited, que é o estado que ninguém
   testa porque só aparece depois do primeiro clique. Laranja da marca sobre
   fundo escuro (9:1), rosa escurecido sobre papel (6:1). Nunca o padrão. */
.rd-email,
.rd-email:visited,
.rd-email:hover,
.rd-email:focus{
  color:var(--rosa-forte);
  text-decoration:none;
  border-bottom:1px solid currentColor;
}
.rd-email:hover,
.rd-email:focus{border-bottom-width:2px}

.rd-noite .rd-email,
.rd-noite .rd-email:visited,
.rd-rodape .rd-email,
.rd-rodape .rd-email:visited,
.escuro .rd-email,
.escuro .rd-email:visited{color:var(--laranja)}

.rd-email,
.rd-nota a.rd-email,
.rd-rodape a.rd-email{
  word-break:normal; overflow-wrap:normal;
  hyphens:none;   /* a nota "reta" liga hifenização automática, e ela parte
                     a palavra por sílaba mesmo com overflow-wrap:normal —
                     era daí que vinha "redacaoedialo-gia" a 1024px */
  font-size:.82rem; letter-spacing:-.005em;
}

/* O auto-fit da grade continuava cabendo duas colunas num celular de 360px:
   sobravam ~140px por coluna, estreito demais para "Página de contato" e
   fatal para o e-mail. Abaixo de 760 são duas colunas com a marca ocupando
   a linha inteira; abaixo de 430, uma só. */
/* 1024 e não 760: entre essas duas larguras as quatro colunas espremiam
   Contato para menos de 205px e o e-mail (208px) voltava a quebrar. Medido
   nas duas pontas da faixa. */
@media (max-width:1024px){
  .rd-rodape-grade{grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 20px}
  .rd-rodape-grade > :first-child{grid-column:1 / -1}
}
@media (max-width:430px){
  .rd-rodape-grade{grid-template-columns:1fr; gap:28px}
}
.rd-rodape-fim{
  display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center;
  border-top:1px solid var(--fio-esc); margin-top:clamp(32px,4vw,50px); padding-top:22px;
  font-size:.8rem;
}
/* .rd-rodape a impõe .92rem a TODO link do rodapé, o que fazia o link da
   política sair maior que o texto ao lado dele. Aqui a linha final manda:
   tudo herda os .8rem do contêiner. */
.rd-rodape-fim a{font-size:inherit; color:var(--claro-2)}
.rd-rodape-fim a:hover{color:var(--rosa)}
/* O crédito é o último item e vai para a direita. Antes essa regra pegava
   o "São Paulo" pelo :last-child — agora é por classe, então acrescentar
   qualquer coisa no fim do rodapé não desmonta o alinhamento. */
.rd-credito{margin-left:auto; color:var(--claro-2)}
.rd-credito a{
  color:var(--claro); border-bottom:1px solid var(--fio-esc);
  font-size:inherit; letter-spacing:.04em; font-weight:600;
}
.rd-credito a:hover{color:var(--rosa); border-bottom-color:var(--rosa)}
@media (max-width:700px){
  .rd-credito{margin-left:0; width:100%; padding-top:6px}
}

/* ---------- barra fixa no celular ----------
   REMOVIDA. Vista no celular, ela dividia a tela com o botão flutuante do
   Joinchat: dois elementos de WhatsApp sobrepostos, e a barra ainda comia
   78px de altura útil. O botão do Joinchat já é a chamada fixa do celular. */

/* ============================================================================
   BUSCA E FILTROS

   Estavam só em rd-acervo.css, que é carregado apenas nas páginas de tema.
   O blog usa exatamente os mesmos componentes e ficava sem estilo nenhum:
   campo quadrado, pastilhas retangulares e a ativa pintada por regra de
   outro lugar. Mesmo componente, um lugar só — aqui, que vale no site todo.
   ========================================================================= */

.rd-ferramentas{margin-bottom:24px}

.rd-busca{display:block; margin:0 0 18px}
.rd-busca input{
  width:100%; font-family:inherit; font-size:1rem; padding:15px 18px;
  border:1px solid var(--fio); border-radius:8px;
  background:#fff; color:var(--tinta);
}
.rd-busca input::placeholder{color:var(--tinta-3)}
.rd-busca input:focus-visible{outline:3px solid var(--azul); outline-offset:2px; border-color:transparent}

.rd-filtros{display:flex; flex-wrap:wrap; gap:10px}
.rd-chip{
  font-family:inherit; font-size:.83rem; font-weight:600;
  padding:9px 17px; border-radius:999px; line-height:1.3;
  border:1px solid var(--fio); background:#fff; color:var(--tinta-2);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
/* Hover preenche a pastilha e o texto vai a BRANCO — fundo e texto na mesma
   regra, para não sobrar a combinação rosa sobre rosa. A pastilha ATIVA não
   muda no hover: se mudasse, ninguém saberia qual filtro está ligado. */
.rd-chip:hover{background:var(--rosa-forte); border-color:var(--rosa-forte); color:#fff}
.rd-chip.on,
.rd-chip.on:hover{background:var(--tinta); border-color:var(--tinta); color:var(--papel)}
.rd-chip:focus-visible{outline:3px solid var(--azul); outline-offset:2px}

.rd-contagem{font-size:.86rem; color:var(--tinta-2); min-height:1.4em; margin:16px 0 20px}
.rd-vazio{color:var(--tinta-2); padding:40px 0}
.rd-vazio[hidden]{display:none!important}

/* ---------- migalhas e texto corrido ----------
   Estavam só no CSS do acervo, que não carrega nas páginas de vídeo.
   Aqui usam os tokens do sistema, então valem em qualquer template. */
.rd-migalhas{
  font-size:.84rem; color:var(--tinta-2); margin:0 0 22px;
  display:flex; flex-wrap:wrap; gap:8px; align-items:baseline;
}
.rd-migalhas a{text-decoration:none; border-bottom:1px solid var(--fio)}
.rd-migalhas a:hover{color:var(--rosa-forte); border-bottom-color:currentColor}

.rd-texto{font-size:1.02rem; color:#3E392F}
.rd-texto h2{font-size:clamp(1.3rem,2.6vw,1.7rem); margin:32px 0 12px}
.rd-texto h3{font-size:clamp(1.08rem,2vw,1.3rem); margin:26px 0 10px}
.rd-texto ul,.rd-texto ol{padding-left:1.15em; margin:0 0 18px}
.rd-texto li{margin-bottom:7px}
.rd-texto a{border-bottom:1px solid var(--rosa); text-decoration:none}
.rd-texto blockquote{
  margin:22px 0; padding:2px 0 2px 18px; border-left:2px solid var(--laranja);
  color:var(--tinta-2);
}

/* Antes eu rebaixava o .rd-h3 quando havia nome preenchido — o efeito era
   que cartões com nome e cartões sem nome viravam componentes diferentes na
   mesma grade. Agora a manchete do cartão de aprovado é SEMPRE o nome, e o
   título do vídeo não aparece: quem o quiser, abre a página. */

/* títulos de card que viraram link não devem mudar de cor */
.rd-video-txt h2 a{color:inherit}
.rd-video-txt h2 a:hover{color:var(--rosa)}

/* =============================================================================
   PLAYER E GRADE DE VÍDEOS

   Esta folha inteira faltava. O botão de play virava um retângulo vazio do
   navegador, e o iframe, sem largura declarada, caía no padrão de 300×150 —
   por isso o vídeo "encolhia" ao ser aberto.
   ========================================================================== */

.rd-videos{
  display:grid; gap:clamp(26px,3.4vw,42px);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}

/* A fachada é uma caixa 16:9 fixa. O iframe entra DENTRO dela, ocupando
   tudo — assim o tamanho não muda quando a capa vira vídeo. */
.rd-fachada{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--r, 10px); background:#0E0D0C; cursor:pointer;
  border:1px solid var(--fio);
}
.rd-fachada > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1), opacity .3s;
}
.rd-fachada:hover > img{transform:scale(1.035); opacity:.88}

.rd-fachada > iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}

/* Botão de play: o retângulo arredondado do YouTube, desenhado em CSS. */
.rd-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:66px; height:46px; padding:0; border:0; border-radius:12px;
  background:rgba(18,17,16,.72); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s ease, transform .18s ease;
}
.rd-fachada:hover .rd-play{background:var(--rosa,#E5486B); transform:translate(-50%,-50%) scale(1.06)}
.rd-play:focus-visible{outline:2px solid var(--rosa,#E5486B); outline-offset:3px}
.rd-play-tri{
  width:0; height:0; margin-left:3px;
  border-left:15px solid #fff;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
}

.rd-video-txt{padding-top:14px}
.rd-video-txt .rd-cred{margin:0 0 6px}
.rd-video-txt .rd-h3{margin:0; font-size:clamp(1.02rem,1.6vw,1.18rem); line-height:1.28}
.rd-video-resumo{margin:8px 0 0; font-size:.9rem; color:var(--tinta-2)}
.rd-video-pe{
  margin:10px 0 0; font-size:.78rem; color:var(--tinta-2);
  display:flex; flex-wrap:wrap; gap:12px; align-items:baseline;
}
/* O ponto separava data e duração. Sem a data, ele virava um "·" solto
   abrindo a linha — só entra quando há algo antes. */
.rd-video-pe :not(:first-child)::before{content:"·"; margin-right:12px; opacity:.5}

.rd-spotify{border-radius:var(--r,10px); overflow:hidden}
.rd-spotify iframe{display:block; width:100%; border:0}

/* Sem suporte a aspect-ratio (navegadores antigos), o velho truque do padding. */
@supports not (aspect-ratio: 16/9){
  .rd-fachada{height:0; padding-bottom:56.25%}
}

/* ---------- modos de trabalho (Quem somos) ---------- */
.rd-modos{
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.rd-modo{padding:24px 28px 26px 0; border-top:2px solid var(--tinta)}
.rd-modo .rd-h3{margin:0 0 12px; font-size:clamp(1.05rem,1.8vw,1.25rem)}
.rd-modo p{margin:0 0 12px; font-size:.93rem; color:var(--tinta-2)}
.rd-modo p:last-child{margin-bottom:0}
.rd-modo-n{
  display:block; font-family:"Bricolage Grotesque",Georgia,serif;
  font-size:.82rem; letter-spacing:.16em; color:var(--rosa);
  margin-bottom:10px; font-variant-numeric:tabular-nums;
}
/* na banda escura o fio e o texto invertem */
.rd-noite .rd-modo{border-top-color:var(--claro)}
.rd-noite .rd-modo p{color:var(--claro-2)}
.rd-noite .rd-modo-n{color:var(--azul)}

/* ---------- série histórica ---------- */
.rd-barras{
  display:flex; align-items:flex-end; gap:clamp(6px,1.4vw,16px);
  height:210px; padding-bottom:26px; border-bottom:1px solid var(--fio);
}
.rd-barra{
  flex:1; height:100%; position:relative;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
}
.rd-barra-h{
  width:100%; background:var(--azul); border-radius:3px 3px 0 0;
  transition:height .6s cubic-bezier(.2,.7,.3,1);
}
.rd-barra:last-child .rd-barra-h{background:var(--laranja)}
.rd-barra-n{
  font-size:.8rem; font-weight:700; color:var(--tinta); margin-bottom:5px;
  font-variant-numeric:tabular-nums;
}
.rd-barra-a{
  position:absolute; bottom:-24px; font-size:.72rem; color:var(--tinta-3);
  font-variant-numeric:tabular-nums;
}
.rd-serie figcaption{
  margin-top:34px; font-size:.78rem; color:var(--tinta-3); line-height:1.5;
}

/* ---------- perguntas frequentes ---------- */
.rd-faq details{border-top:1px solid var(--fio); padding:2px 0}
.rd-faq details:last-child{border-bottom:1px solid var(--fio)}
.rd-faq summary{
  cursor:pointer; padding:16px 30px 16px 0; position:relative;
  font-weight:600; font-size:1rem; list-style:none;
}
.rd-faq summary::-webkit-details-marker{display:none}
.rd-faq summary::after{
  content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  font-size:1.3rem; color:var(--rosa); line-height:1;
}
.rd-faq details[open] summary::after{content:"–"}
.rd-faq p{margin:0 0 18px; font-size:.95rem; color:var(--tinta-2)}

/* ---------- sumário da página ----------
   Serve a dois donos: dá ao leitor um caminho numa página longa e ao Google
   os âncoras que podem virar sitelink no resultado de busca. */
.rd-sumario{
  display:flex; flex-wrap:wrap; gap:0;
  margin-top:clamp(28px,4vw,44px); border-top:1px solid var(--fio);
}
.rd-sumario a{
  display:flex; align-items:baseline; gap:10px;
  padding:14px 26px 14px 0; text-decoration:none;
  font-size:.92rem; border-bottom:2px solid transparent;
  transition:border-color .2s ease, color .2s ease;
}
.rd-sumario a span{
  font-size:.72rem; letter-spacing:.14em; color:var(--tinta-3);
  font-variant-numeric:tabular-nums;
}
.rd-sumario a:hover{color:var(--rosa); border-bottom-color:var(--rosa)}
.rd-sumario a:hover span{color:var(--rosa)}

/* o âncora não pode parar embaixo do menu fixo */
[id]{scroll-margin-top:90px}

/* ---------- FAQ: o H3 dentro do summary não pode virar bloco ---------- */
.rd-faq summary h3{
  display:inline; margin:0; font-size:1rem; font-weight:600;
  font-family:inherit; letter-spacing:0;
}

/* ---------- série histórica na banda clara ---------- */
.rd-serie{margin:clamp(24px,3.4vw,38px) 0 clamp(26px,3.4vw,40px); max-width:760px}


/* ---------- avisos ---------- */
.rd-aviso{
  border-left:3px solid var(--azul); background:var(--papel-2);
  padding:16px 20px; margin-bottom:26px; border-radius:0 8px 8px 0;
  max-width:820px; font-size:.95rem;
}
.rd-aviso--ok{border-left-color:var(--azul)}
.rd-aviso--erro{border-left-color:var(--rosa)}

/* link secundário sobre fundo escuro */
.rd-link--claro{color:var(--claro-2); border-bottom-color:var(--fio-esc)}
.rd-link--claro:hover{color:var(--rosa); border-bottom-color:var(--rosa)}

/* =============================================================================
   FLUENT FORMS no sistema visual

   O plugin traz o visual dele: cantos, cinzas e um azul que não é daqui.
   Numa página desenhada, isso denuncia o plugin. Aqui os campos passam a usar
   os mesmos tokens do resto do site — mesma borda, mesmo foco, mesmo botão.
   ========================================================================== */
.fluentform{max-width:820px}
.fluentform .ff-el-group{margin-bottom:clamp(16px,2vw,22px)}

.fluentform .ff-el-input--label label{
  font-family:Asap,"Helvetica Neue",Arial,sans-serif;
  font-size:.83rem; font-weight:600; color:var(--tinta);
  letter-spacing:.02em; margin-bottom:7px;
}
.fluentform .ff-el-input--label.ff-el-is-required label::after{color:var(--rosa)}

.fluentform input[type=text],
.fluentform input[type=email],
.fluentform input[type=tel],
.fluentform input[type=url],
.fluentform input[type=number],
.fluentform select,
.fluentform textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--tinta);
  background:#fff; border:1px solid var(--fio); border-radius:8px;
  padding:13px 15px; box-shadow:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.fluentform textarea{min-height:150px; line-height:1.55; resize:vertical}

.fluentform input:focus,
.fluentform select:focus,
.fluentform textarea:focus{
  outline:0; border-color:var(--tinta);
  box-shadow:0 0 0 3px rgba(25,23,19,.06);
}
.fluentform input::placeholder,
.fluentform textarea::placeholder{color:var(--tinta-3)}

/* Botão: o mesmo do resto do site, não o azul do plugin. */
.fluentform .ff-btn-submit,
.fluentform .ff_btn_style{
  background:var(--tinta) !important; color:var(--papel) !important;
  border:0 !important; border-radius:8px !important;
  padding:14px 30px !important; font:inherit !important;
  font-size:.95rem !important; font-weight:600 !important;
  letter-spacing:.01em; cursor:pointer;
  transition:opacity .18s ease, transform .18s ease;
}
.fluentform .ff-btn-submit:hover{background:var(--rosa) !important; transform:translateY(-1px)}
.fluentform .ff-btn-submit:focus-visible{outline:2px solid var(--rosa); outline-offset:3px}

/* Mensagens do plugin, com a mesma régua dos avisos do tema. */
.ff-message-success,
.fluentform .ff-message-success{
  border:0; border-left:3px solid var(--azul); border-radius:0 8px 8px 0;
  background:var(--papel-2); color:var(--tinta);
  padding:16px 20px; font-size:.95rem;
}
.fluentform .ff-el-is-error input,
.fluentform .ff-el-is-error textarea{border-color:var(--rosa)}
.fluentform .error-text,
.fluentform .text-danger{color:var(--rosa); font-size:.82rem; margin-top:6px}

/* Duas colunas do plugin no respiro do sistema. */
.fluentform .ff-t-cell{padding-right:clamp(10px,1.6vw,18px)}
.fluentform .ff-t-cell:last-child{padding-right:0}
@media (max-width:600px){
  .fluentform .ff-t-container{display:block}
  .fluentform .ff-t-cell{padding-right:0}
}

/* =============================================================================
   FAIXA DE NEWSLETTER

   Banda escura estreita entre o conteúdo e o rodapé. Fica em todas as páginas,
   inclusive nas 228 de tema — que é onde ela realmente trabalha.
   ========================================================================== */
.rd-news{
  background:var(--noite); color:var(--claro);
  border-top:1px solid var(--fio-esc);
  padding:clamp(38px,5vw,60px) 0;
}
.rd-news-grade{
  display:grid; gap:clamp(24px,3.4vw,44px); align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(300px,.85fr);
}
@media (max-width:840px){
  .rd-news-grade{grid-template-columns:1fr}
}
.rd-news h2{margin:10px 0 10px; color:var(--claro); max-width:22ch}
.rd-news p{margin:0; color:var(--claro-2); font-size:.92rem; max-width:46ch}

/* Sobre fundo escuro o formulário inverte: campo claro, rótulo claro,
   botão rosa — que aqui é o único elemento que precisa saltar. */
.rd-news-forma .fluentform{max-width:none}
.rd-news-forma .ff-el-group{margin-bottom:12px}
.rd-news-forma .ff-el-input--label label{color:var(--claro-2); font-size:.78rem}
.rd-news-forma input[type=text],
.rd-news-forma input[type=email]{
  background:rgba(255,255,255,.06); border-color:var(--fio-esc); color:var(--claro);
}
.rd-news-forma input::placeholder{color:var(--claro-2); opacity:.75}
.rd-news-forma input:focus{
  border-color:var(--claro); background:rgba(255,255,255,.1);
  box-shadow:0 0 0 3px rgba(255,255,255,.08);
}
.rd-news-forma .ff-btn-submit{
  background:var(--rosa) !important; color:#fff !important; width:100%;
}
.rd-news-forma .ff-message-success{
  background:rgba(255,255,255,.07); border-left-color:var(--azul); color:var(--claro);
}
.rd-news-forma .ff-el-form-check label,
.rd-news-forma .ff-custom_html{color:var(--claro-2); font-size:.8rem}
.rd-news-forma .ff-custom_html a{color:var(--claro); border-bottom:1px solid var(--fio-esc)}

/* =============================================================================
   PÁGINA LONGA DE TEXTO LEGAL

   O resumo em destaque é o que faz a página ser lida. Fica com peso visual de
   citação, não de parágrafo: quem tem dois minutos lê só esses.
   ========================================================================== */
.rd-resumo{
  max-width:62ch; margin:18px 0 26px; padding:14px 0 14px 20px;
  border-left:3px solid var(--rosa);
  font-size:1.04rem; line-height:1.55; color:var(--tinta);
}
.rd-resumo--claro{border-left-color:var(--azul); color:var(--claro)}

/* Tabela que rola sozinha no celular, sem empurrar a página inteira. */
.rd-tabela-env{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin:6px 0 clamp(24px,3vw,36px);
  /* Dica visual de que há mais coisa à direita, no celular. */
  background:
    linear-gradient(90deg, var(--papel) 30%, rgba(247,244,237,0)) left / 28px 100% no-repeat,
    linear-gradient(270deg, var(--papel) 30%, rgba(247,244,237,0)) right / 28px 100% no-repeat;
}
.rd-tabela{
  width:100%; min-width:640px; border-collapse:collapse; border-spacing:0;
  font-size:.92rem; text-align:left; background:transparent;
}

/* O tema pai desenha filetes verticais nas células. Não combinam com este
   sistema, que separa por espaço e linha horizontal — e eram eles que
   encostavam no texto. Zerados aqui, de forma explícita: assim a tabela
   fica igual não importa qual tema pai esteja embaixo. */
.rd-tabela th, .rd-tabela td{
  border-left:0; border-right:0; border-top:0;
  border-bottom:1px solid var(--fio);
  padding:16px 26px 16px 0; vertical-align:top; background:transparent;
}
/* Respiro à esquerda em toda coluna que não seja a primeira. A primeira fica
   alinhada com o texto da página. */
.rd-tabela th + th, .rd-tabela th + td,
.rd-tabela td + td, .rd-tabela td + th{padding-left:26px}

.rd-tabela thead th{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-3); font-weight:700;
  border-bottom:2px solid var(--tinta);
  padding-top:0; padding-bottom:12px;
}
.rd-tabela tbody th{font-weight:600; color:var(--tinta); width:22%}
.rd-tabela td{color:var(--tinta-2)}
.rd-td-base{font-size:.84rem; color:var(--tinta-3)}

/* Arremate: a última linha fecha a tabela com o mesmo peso do topo.
   Sem isto ela não termina — apenas para. */
.rd-tabela tbody tr:last-child th,
.rd-tabela tbody tr:last-child td{border-bottom:2px solid var(--tinta)}

/* A linha inteira acende na passagem do mouse, o que ajuda a ler uma tabela
   de quatro colunas sem perder a linha no meio do caminho. */
.rd-tabela tbody tr{transition:background .15s ease}
.rd-tabela tbody tr:hover{background:var(--papel-2)}

@media (max-width:640px){
  .rd-tabela th, .rd-tabela td{padding:13px 16px 13px 0}
  .rd-tabela th + th, .rd-tabela th + td,
  .rd-tabela td + td, .rd-tabela td + th{padding-left:16px}
}

/* Lacuna que o cliente precisa preencher — visível de propósito, para não
   passar batido numa revisão. */
.rd-preencher{
  background:rgba(249,159,52,.22); border-bottom:1px dashed var(--laranja);
  padding:1px 5px; border-radius:3px;
}

.rd-corpo ul, .rd-estreito ul{padding-left:1.15em; margin:0 0 18px}
.rd-corpo li, .rd-estreito li{margin-bottom:9px}
.rd-nota a{color:inherit; text-decoration:none; border-bottom:1px solid rgba(239,81,157,.4)}
.rd-nota a:hover{border-bottom-color:currentColor}

/* =============================================================================
   BLOG — listagem e post

   Reusa a busca e as pastilhas do acervo de propósito: o site não deveria ter
   dois jeitos diferentes de filtrar uma lista.
   ========================================================================== */
.rd-posts{
  display:grid; gap:clamp(26px,3.4vw,40px);
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
}
.rd-post{display:flex; flex-direction:column}
/* Sem isto o filtro por categoria não escondia nada: o display:flex acima
   vence o [hidden] do navegador, e os cartões "ocultos" continuavam na tela. */
.rd-post[hidden]{display:none!important}

.rd-post-capa{
  display:block; aspect-ratio:16/9; overflow:hidden; border-radius:10px;
  background:var(--papel-2); border:1px solid var(--fio); position:relative;
}
.rd-post-capa img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.rd-post:hover .rd-post-capa img{transform:scale(1.04)}

/* Sem capa, a inicial do título vira a imagem. Melhor um caractere desenhado
   que um retângulo cinza pedindo desculpa. */
.rd-post-capa-vazia{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800;
  font-size:clamp(3rem,7vw,4.6rem); color:var(--rosa); opacity:.28;
  background:linear-gradient(135deg,var(--papel-2),var(--papel));
}

.rd-post-txt{padding-top:16px; display:flex; flex-direction:column; flex:1}
.rd-post-txt .rd-cred{margin:0 0 7px}
.rd-post-txt .rd-h3{margin:0; font-size:clamp(1.05rem,1.7vw,1.24rem); line-height:1.26}
.rd-post-txt .rd-h3 a{text-decoration:none; color:inherit}
.rd-post-txt .rd-h3 a:hover{color:var(--rosa-forte)}
.rd-post-resumo{margin:9px 0 0; font-size:.92rem; color:var(--tinta-2)}
.rd-post-pe{
  margin:14px 0 0; padding-top:12px; border-top:1px solid var(--fio);
  font-size:.76rem; color:var(--tinta-3);
  display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline;
}
.rd-post-pe span + span::before,
.rd-post-pe time + span::before{content:"·"; margin-right:14px; opacity:.55}

/* ---------- post ---------- */
.rd-post-destaque{margin:clamp(26px,3.4vw,38px) 0 0; max-width:860px}
.rd-post-destaque img{width:100%; height:auto; border-radius:10px; display:block}
.rd-post-destaque figcaption{
  margin-top:10px; font-size:.78rem; color:var(--tinta-3); line-height:1.5;
}
.rd-post-corpo{margin-top:clamp(24px,3vw,34px)}
.rd-post-corpo h2{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800;
  font-optical-sizing:auto; letter-spacing:-.024em;
  font-size:clamp(1.35rem,2.6vw,1.8rem); margin:38px 0 14px; line-height:1.18;
}
.rd-post-corpo h3{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:700;
  font-size:clamp(1.08rem,1.9vw,1.3rem); margin:28px 0 10px; letter-spacing:-.018em;
}
.rd-post-corpo figure{margin:26px 0}
.rd-post-corpo img{border-radius:10px; height:auto}
.rd-post-corpo iframe{width:100%; aspect-ratio:16/9; height:auto; border:0; border-radius:10px}
.rd-post-corpo .wp-block-embed__wrapper{position:relative}
.rd-post-corpo > *:first-child{margin-top:0}

/* Listas do Gutenberg vêm com classe própria; sem isto perdem o recuo. */
.rd-post-corpo ul.wp-block-list,
.rd-post-corpo ol.wp-block-list{padding-left:1.15em; margin:0 0 20px}
.rd-post-corpo li{margin-bottom:8px}
.rd-post-corpo li > strong{color:var(--tinta)}

/* Citação do Gutenberg — o editor não usa <blockquote> puro. */
.rd-post-corpo .wp-block-quote{
  margin:26px 0; padding:2px 0 2px 18px; border-left:2px solid var(--laranja);
  color:var(--tinta-2);
}
.rd-post-corpo .wp-block-quote p:last-child{margin-bottom:0}

/* TABELA DENTRO DO POST
   Faltava por inteiro: a tabela do bloco sai sem borda, sem respiro e
   empurrando a página para o lado no celular. O <figure> rola sozinho. */
.rd-post-corpo figure.wp-block-table{
  margin:clamp(26px,3.2vw,34px) 0; overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.rd-post-corpo table{
  width:100%; min-width:520px; border-collapse:collapse;
  font-size:.94rem; line-height:1.5;
  border-top:2px solid var(--tinta);
}
.rd-post-corpo th,
.rd-post-corpo td{
  padding:14px 22px 14px 0; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--fio); border-left:0; border-right:0; border-top:0;
}
.rd-post-corpo th + th, .rd-post-corpo th + td,
.rd-post-corpo td + td, .rd-post-corpo td + th{padding-left:22px}
.rd-post-corpo thead th{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:700;
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-3); padding-top:0;
}
.rd-post-corpo tbody td{color:var(--tinta-2)}
.rd-post-corpo tbody td:first-child{color:var(--tinta); font-weight:600}
.rd-post-corpo tbody tr:last-child td,
.rd-post-corpo tbody tr:last-child th{border-bottom:2px solid var(--tinta)}
.rd-post-corpo tbody tr{transition:background .15s ease}
.rd-post-corpo tbody tr:hover{background:var(--papel-2)}

@media (max-width:640px){
  .rd-post-corpo th, .rd-post-corpo td{padding:12px 15px 12px 0}
  .rd-post-corpo th + th, .rd-post-corpo th + td,
  .rd-post-corpo td + td, .rd-post-corpo td + th{padding-left:15px}
}

.rd-post-tags{
  margin-top:clamp(28px,3.4vw,40px); padding-top:20px;
  border-top:1px solid var(--fio); display:flex; flex-wrap:wrap; gap:9px;
}
.rd-post-tags a{
  font-size:.8rem; padding:7px 15px; border-radius:999px;
  border:1px solid var(--fio); text-decoration:none; color:var(--tinta-2);
  transition:background .18s, border-color .18s, color .18s;
}
.rd-post-tags a:hover{background:#C4306F; border-color:#C4306F; color:#fff}

/* ---------- paginação ---------- */
.rd-paginacao{margin-top:clamp(34px,4vw,52px)}
.rd-paginacao .nav-links{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.rd-paginacao a, .rd-paginacao .current{
  display:block; padding:9px 15px; border-radius:2px; text-decoration:none;
  border:1px solid var(--fio); font-size:.9rem; color:var(--tinta-2);
}
.rd-paginacao .current{background:var(--tinta); border-color:var(--tinta); color:var(--papel)}
.rd-paginacao a:hover{border-color:#C4306F; color:#C4306F}

/* =============================================================================
   COLEÇÕES DO ACERVO — /temas/

   Substitui a grade de 228 fichas. Cada card é uma pasta do Drive: nome,
   descrição e a lista do que tem dentro. A lista não é enfeite — é a única
   informação concreta que essas entradas têm, e é o que decide o clique.
   ========================================================================== */
.rd-pastas{
  display:grid; gap:clamp(18px,2.4vw,26px);
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
}
.rd-pasta{
  display:flex; flex-direction:column;
  padding:clamp(22px,2.6vw,30px);
  background:#fff; border:1px solid var(--fio); border-radius:12px;
  transition:border-color .18s ease, transform .18s ease;
}
.rd-pasta:hover{border-color:var(--tinta); transform:translateY(-2px)}
.rd-pasta .rd-h3{font-size:clamp(1.12rem,1.9vw,1.32rem); line-height:1.2}
.rd-pasta-txt{margin:12px 0 0; font-size:.94rem; color:var(--tinta-2); line-height:1.55}

.rd-pasta-rot{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 84,"wght" 700;
  font-size:.64rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--tinta-3); margin:20px 0 9px;
}
.rd-pasta-lista{
  list-style:none; padding:0; margin:0 0 22px;
  display:flex; flex-wrap:wrap; gap:7px;
}
.rd-pasta-lista li{
  font-size:.76rem; line-height:1.3; color:var(--tinta-2);
  padding:5px 11px; border:1px solid var(--fio); border-radius:999px;
  overflow-wrap:anywhere;
}
/* O botão desce para a base do card: com descrições de tamanhos diferentes,
   alinhar o rodapé é o que faz a fileira parecer um componente só. */
.rd-pasta-b{margin-top:auto; align-self:flex-start}

.rd-pastas-tudo{
  margin:clamp(30px,3.6vw,44px) 0 0; padding-top:22px;
  border-top:1px solid var(--fio); font-size:.95rem;
}

/* ---------- ponte entre as duas metades do acervo ----------
   /temas/ e /temas/notas-maximas/ são páginas irmãs. Quem chega numa e não
   acha o que procura precisa ver a outra sem voltar ao menu. */
.rd-outra{
  margin:clamp(30px,3.6vw,44px) 0 0; padding:clamp(22px,2.6vw,30px);
  background:var(--papel-2,#F6F3ED); border:1px solid var(--fio); border-radius:12px;
  max-width:62ch;
}
.rd-outra-rot{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 84,"wght" 700;
  font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--tinta-3); margin:0 0 8px;
}
.rd-outra-txt{margin:0 0 18px; font-size:.95rem; color:var(--tinta-2)}