/* Renova UDESC — o site público, sem tema nem construtor de página.
   Um arquivo só: a casca (header/rodapé/telas), depois o conteúdo que veio do
   WordPress (as classes wp-block-*), depois as telas pequenas. */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap");

:root {
  --rv-verde: #006437;
  --rv-verde-fundo: #004d2a;
  --rv-verde-claro: #0a7a45;
  /* Verde vivo do lema. Mais claro que isto perde contraste no branco: 3,4:1 é o
     mínimo para texto grande, e o lema é o H1 da home. */
  --rv-verde-vivo: #0e9350;
  --rv-verde-lavado: #eaf5ef;
  --rv-tinta: #10241a;
  --rv-cinza: #4d6357;
  --rv-branco: #fff;
  --rv-papel: #f6faf7;
  --rv-linha: #d8e7de;
  --rv-max: 1140px;
  /* Medida de leitura: 66 caracteres é o alvo clássico para texto corrido (a faixa
     confortável vai de 45 a 75). O artigo media 85–98 antes disto. */
  --rv-leitura: 66ch;

  /* Escala tipográfica de razão 1.25 a partir de 17px. Antes havia 17,6 / 17,3 / 16
     convivendo — três tamanhos quase iguais não são hierarquia, são ruído. */
  --t-pequeno: 0.8125rem;   /* 13px — metadados, legendas */
  --t-menor:   0.9375rem;   /* 15px — apoio */
  --t-base:    1.0625rem;   /* 17px — corpo da interface */
  --t-corpo:   1.1875rem;   /* 19px — texto de matéria */
  --t-medio:   1.375rem;    /* 22px — título de cartão grande */
  --t-grande:  1.75rem;     /* 28px — título de seção */
  --t-titulo:  2.25rem;     /* 36px — h1 de página */

  /* Espaçamento em passos de 4px: sem uma escala, cada bloco inventa o seu e o
     ritmo vertical se perde. */
  --e1: 4px;  --e2: 8px;   --e3: 12px;  --e4: 16px;
  --e5: 24px; --e6: 32px;  --e7: 48px;  --e8: 64px;  --e9: 96px;

  /* Toque: 44px é o mínimo recomendado para o dedo (WCAG 2.5.5 / Apple HIG). */
  --toque: 44px;

  --rv-raio: 14px;
  --rv-raio-p: 10px;
  /* Sombras em duas camadas: uma rente para definir a borda, outra difusa para a
     profundidade. Uma sombra só sempre parece adesivo. */
  --rv-sombra: 0 1px 2px rgba(6, 40, 24, .06), 0 4px 12px rgba(6, 40, 24, .06);
  --rv-sombra-alta: 0 2px 4px rgba(6, 40, 24, .07), 0 16px 34px rgba(6, 40, 24, .14);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* O cabeçalho é fixo: sem isto, pular para uma âncora esconde o título embaixo dele. */
:target { scroll-margin-top: calc(var(--rv-header, 72px) + var(--e4)); }

body.rv {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: Montserrat, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: var(--t-base);
  color: var(--rv-tinta);
  background: var(--rv-branco);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Evita a última linha sozinha e a palavra órfã no fim do parágrafo. */
.rv p, .rv li { text-wrap: pretty; }

.rv a { color: inherit; text-decoration: none; }
/* `hidden` tem de ganhar de qualquer `display` nosso — sem isto, o filtro da busca
   marcava os cartões como escondidos e eles continuavam na tela (`display: flex`). */
.rv [hidden] { display: none !important; }
.rv img { max-width: 100%; height: auto; display: block; }
.rv button, .rv input, .rv select, .rv textarea { font: inherit; color: inherit; }
.rv h1, .rv h2, .rv h3 { line-height: 1.25; margin: 0 0 .5em; letter-spacing: -.01em; }
.rv :focus-visible {
  outline: 3px solid var(--rv-verde-claro); outline-offset: 3px; border-radius: 4px;
}

.rv-pular {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--rv-branco); color: var(--rv-verde); padding: 12px 18px; font-weight: 700;
}
.rv-pular:focus { left: 8px; top: 8px; }

.rv-wrap { max-width: var(--rv-max); margin: 0 auto;
  padding: var(--e7) var(--e5) var(--e8); }
.rv-wrap-estreito { max-width: 780px; }

/* ── Cabeçalho ────────────────────────────────────────────────────────────── */
.rv-header {
  position: sticky; top: 0; z-index: 50;
  /* Verde quase opaco sobre um vidro desfocado: o conteúdo aparece embaçado ao
     rolar por baixo. Sem suporte a backdrop-filter, os .88 de opacidade ainda
     cobrem o texto — o blur é enfeite, não muleta. */
  background: rgba(0, 100, 55, .88); color: var(--rv-branco);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  backdrop-filter: blur(14px) saturate(1.35);
  box-shadow: 0 2px 14px rgba(0, 40, 20, .2);
}
.rv-header-inner {
  max-width: var(--rv-max); margin: 0 auto; padding: 10px 20px;
  min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.rv-logo img { height: 44px; width: auto; }
.rv-nav { display: flex; align-items: center; gap: 4px 20px; flex-wrap: wrap; justify-content: flex-end; }
.rv-nav a {
  color: rgba(255, 255, 255, .9); font-size: var(--t-menor); font-weight: 600;
  /* 44px de altura mínima: é o alvo de toque recomendado, e o menu virava uma fileira
     de links de 38px no celular. */
  min-height: var(--toque); display: inline-flex; align-items: center;
  padding: 0 2px; border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.rv-nav a:hover { color: var(--rv-branco); border-bottom-color: rgba(255, 255, 255, .5); }
.rv-nav a.is-atual { color: var(--rv-branco); border-bottom-color: var(--rv-branco); }
.rv-menu-btn {
  display: none; background: rgba(255, 255, 255, .1); color: var(--rv-branco);
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 12px;
  width: var(--toque); min-height: var(--toque); padding: 0;
  cursor: pointer; place-items: center;
}
.rv-menu-icone {
  display: grid; gap: 5px; width: 18px;
}
.rv-menu-icone span {
  display: block; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
  transform-origin: center;
}
.rv-menu-btn.is-open .rv-menu-icone span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.rv-menu-btn.is-open .rv-menu-icone span:nth-child(2) { opacity: 0; }
.rv-menu-btn.is-open .rv-menu-icone span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Faixa de destaque da home. Precisa ser `a.rv-faixa`: `.rv a { color: inherit }` lá
   em cima tem especificidade maior e pintava o texto de verde-escuro sobre verde-escuro. */
a.rv-faixa {
  display: block; background: var(--rv-verde-fundo); color: var(--rv-branco);
  text-align: center; padding: 12px 20px; font-size: 1rem; font-weight: 700;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 2px; text-decoration-color: rgba(255, 255, 255, .45);
  transition: background .18s, text-decoration-color .18s;
}
a.rv-faixa:hover { background: #063d22; text-decoration-color: var(--rv-branco); }

.rv-main { flex: 1; }

/* ── Botões ───────────────────────────────────────────────────────────────── */
/* `a.rv-btn`: `.rv a { color: inherit }` tem especificidade maior e pintava o
   texto do botão sólido de verde-escuro sobre verde — o botão "Faça parte" saía
   ilegível. O `a.` aqui empata e vence por ordem. */
a.rv-btn, .rv-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rv-verde); color: var(--rv-branco);
  border: 1.5px solid var(--rv-verde); border-radius: 999px;
  min-height: var(--toque); padding: var(--e3) var(--e5);
  font-weight: 600; font-size: var(--t-menor); cursor: pointer;
  letter-spacing: .01em;
  transition: background .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s;
}
a.rv-btn:hover, .rv-btn:hover {
  background: var(--rv-verde-fundo); border-color: var(--rv-verde-fundo); color: var(--rv-branco);
  transform: translateY(-1px); box-shadow: var(--rv-sombra);
}
a.rv-btn-ghost, .rv-btn-ghost {
  background: transparent; color: var(--rv-verde); border-color: rgba(0, 100, 55, .35);
}
a.rv-btn-ghost:hover, .rv-btn-ghost:hover {
  background: var(--rv-verde-lavado); color: var(--rv-verde-fundo);
  border-color: var(--rv-verde);
}
.rv-botoes { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; }
.rv-mais { color: var(--rv-verde); font-weight: 700; font-size: var(--t-menor); }
/* Links soltos ("Ver todas", "leia mais", compartilhar) mediam 23px de altura: o
   dedo erra. O padding vertical negativo na margem mantém o desenho igual. */
a.rv-mais, .rv-secao-topo .rv-mais, .rv-compartilhar a, .rv-compartilhar button,
.rv-limpar, .rv-migalha a {
  display: inline-flex; align-items: center; min-height: var(--toque);
}
.rv-secao-topo .rv-mais, .rv-cartao-corpo .rv-mais { min-height: 0; }

/* ── Home: o hero ─────────────────────────────────────────────────────────── */
/* O lema à esquerda (na mesma coluna das seções), com as bandeiras nascendo
   atrás dele num gradiente branco suave — imagem mais baixa, centrada. */
.rv-hero {
  position: relative; overflow: clip;
  background: radial-gradient(58% 46% at 82% 16%, rgba(14, 147, 80, .07), transparent 70%);
}
.rv-lema-secao {
  position: relative; z-index: 2;   /* o texto passa POR CIMA da faixa de bandeiras */
  max-width: var(--rv-max); margin: 0 auto;
  padding: clamp(36px, 5vw, 68px) var(--e5) 0;
  text-align: left;
}
/* Halo branco sob o bloco do lema: legibilidade sobre as bandeiras sem "caixa". */
.rv-lema-secao::before {
  content: ""; position: absolute; pointer-events: none; z-index: -1;
  left: -4%; top: -8%; width: min(720px, 78%); height: 118%;
  background: radial-gradient(ellipse 70% 65% at 28% 42%,
    rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .72) 42%,
    rgba(255, 255, 255, .28) 68%, transparent 82%);
  filter: blur(18px);
}
.rv-lema {
  margin: 0 0 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.08;
  font-size: clamp(2.15rem, 5.6vw, 3.7rem);
  text-align: left;
  /* Óptica: Montserrat + perspective deixavam um “vão” antes do C. Âncora à
     esquerda e um puxão mínimo alinham o glifo com os botões. */
  transform-origin: left center;
  margin-left: -0.04em;
  /* Sombra branca sob o título: o verde "pousa" no branco, não no céu da foto. */
  text-shadow:
    0 1px 0 #fff,
    0 0 22px rgba(255, 255, 255, .95),
    0 10px 36px rgba(255, 255, 255, .85),
    0 22px 60px rgba(255, 255, 255, .55);
  /* O tilt 3D vem do script da home, que só escreve estas duas variáveis. Sem
     JavaScript elas valem 0 e o lema se desenha igual, parado. */
  --rv-tilt-x: 0; --rv-tilt-y: 0;
  transform: perspective(950px) rotateX(calc(var(--rv-tilt-x) * 1deg))
             rotateY(calc(var(--rv-tilt-y) * 1deg));
  transform-style: preserve-3d;
}
.rv-lema span { display: block; padding: 0; margin: 0; }
/* A segunda linha flutua um plano à frente da primeira: é isso que faz o tilt ler
   como profundidade de verdade, e não como um cartão virando. */
.rv-lema-a, .rv-lema-b { transform-origin: left center; }
.rv-lema-a { color: var(--rv-verde-vivo); transform: translateZ(14px); }
.rv-lema-b { color: var(--rv-verde-fundo); transform: translateZ(34px); }

/* Botões do hero: mais finos, menos "pílula gorda", sem sombra alta no hover. */
.rv-hero .rv-botoes { gap: 10px; }
.rv-hero a.rv-btn {
  min-height: 40px; padding: 8px 18px; font-size: .875rem; font-weight: 600;
  border-width: 1.5px; box-shadow: none;
}
.rv-hero a.rv-btn:hover { transform: translateY(-1px); box-shadow: none; }
.rv-hero a.rv-btn-ghost {
  background: rgba(255, 255, 255, .55); border-color: rgba(0, 100, 55, .28);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.rv-hero a.rv-btn-ghost:hover {
  background: rgba(255, 255, 255, .85); border-color: var(--rv-verde);
}

/* Faixa das bandeiras — mais baixa, centrada. A máscara linear no CONTAINER a
   faz nascer do branco (e sumir embaixo). A máscara radial da imagem some nas
   laterais. Elementos diferentes → as duas se somam sem `mask-composite`. */
.rv-bandeiras {
  position: relative; z-index: 0; overflow: hidden;
  height: clamp(130px, 16vw, 240px);
  margin-top: clamp(-72px, -5.5vw, -28px);
  margin-bottom: clamp(4px, 1.5vw, 18px);
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0, 0, 0, .18) 14%, rgba(0, 0, 0, .7) 38%,
    #000 58%, rgba(0, 0, 0, .55) 82%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0, 0, 0, .18) 14%, rgba(0, 0, 0, .7) 38%,
    #000 58%, rgba(0, 0, 0, .55) 82%, transparent 100%);
}
.rv-bandeiras::before {
  content: ""; position: absolute; inset: -12%;
  background: var(--bandeiras) center center / cover no-repeat;
  filter: blur(28px) saturate(1.12); opacity: .42; transform: scale(1.05);
}
.rv-bandeiras img {
  position: relative; width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  -webkit-mask-image: radial-gradient(62% 80% at 55% 50%, #000 30%, rgba(0, 0, 0, .5) 62%, transparent 100%);
  mask-image: radial-gradient(62% 80% at 55% 50%, #000 30%, rgba(0, 0, 0, .5) 62%, transparent 100%);
}

.rv-secao { max-width: var(--rv-max); margin: 0 auto; padding: var(--e8) var(--e5); }
.rv-secao-clara { max-width: none; background: var(--rv-papel); border-block: 1px solid var(--rv-linha); }
.rv-secao-clara > * { max-width: var(--rv-max); margin-inline: auto; }
.rv-secao-titulo { font-size: var(--t-grande); font-weight: 800; letter-spacing: -.015em; }
.rv-secao-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* `.rv h2 { margin }` lá em cima tem especificidade maior — daí o `.rv` aqui. */
.rv .rv-centro { text-align: center; margin: 40px 0 26px; }
/* Hero mais baixo: o título "Nossos valores" não precisa do mesmo respiro de antes. */
.rv-valores { padding-top: var(--e6); }

/* Quem somos — fecha a home, mesma linguagem da chamada (borda verde, fundo lavado). */
.rv-sobre { padding-top: var(--e6); }
.rv-sobre-caixa {
  max-width: 720px;
  border-left: 5px solid var(--rv-verde);
  background: var(--rv-papel);
  border-radius: 0 var(--rv-raio) var(--rv-raio) 0;
  padding: clamp(28px, 4vw, 40px) clamp(22px, 3vw, 36px);
  box-shadow: var(--rv-sombra);
}
.rv-sobre .rv-sobretitulo { margin: 0 0 6px; }
.rv-sobre .rv-secao-titulo { margin: 0 0 .6em; color: var(--rv-verde-fundo); }
.rv-sobre-lead {
  margin: 0 0 var(--e4); font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  color: var(--rv-tinta); font-weight: 700; line-height: 1.4; letter-spacing: -.01em;
}
.rv-sobre-texto {
  margin: 0 0 var(--e4); color: var(--rv-cinza); font-size: var(--t-base); line-height: 1.65;
}
.rv-sobre-fecho {
  margin: 0 0 var(--e5); color: var(--rv-verde-fundo); font-weight: 800;
  font-size: var(--t-base); letter-spacing: -.01em;
}

/* Valores: sem cartão. O ícone é o peso visual, o texto respira — como no site
   antigo, que os apresentava soltos sobre o branco. */
.rv-valores-grid { display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--e7) var(--e5); }
.rv-valor { text-align: center; }
.rv-valor h3 { font-size: var(--t-base); color: var(--rv-verde-fundo);
  margin-bottom: .4em; letter-spacing: -.005em; }
.rv-valor p { margin: 0 auto; color: var(--rv-cinza); font-size: var(--t-menor);
  line-height: 1.6; max-width: 34ch; }
.rv-valor-icone {
  height: 52px; margin: 0 auto 16px; color: var(--rv-verde);
  display: grid; place-items: center;
  transition: transform .25s ease, color .25s ease;
}
.rv-valor-icone .rv-valor-svg { width: 48px; height: 48px; }
.rv-valor-bandeira {
  width: 52px; height: 35px; object-fit: cover; object-position: center;
  border-radius: 8px; display: block;
  opacity: .55; box-shadow: none;
}
.rv-valor:hover .rv-valor-icone { transform: translateY(-4px) scale(1.06); color: var(--rv-verde-vivo); }

.rv-chamada {
  background: var(--rv-verde); color: var(--rv-branco); border-radius: var(--rv-raio);
  padding: 40px; text-align: center; margin-top: 40px;
}
.rv-chamada h2 { font-size: 1.5rem; }
.rv-chamada p { color: rgba(255, 255, 255, .86); max-width: 60ch; margin: 0 auto 22px; }
.rv-chamada .rv-botoes { justify-content: center; }
/* Dentro da caixa verde o botão padrão ficaria verde sobre verde — inverte. */
.rv-chamada a.rv-btn { background: var(--rv-branco); color: var(--rv-verde); border-color: var(--rv-branco); }
.rv-chamada a.rv-btn:hover { background: var(--rv-verde-lavado); border-color: var(--rv-verde-lavado); color: var(--rv-verde-fundo); }
.rv-chamada a.rv-btn-ghost { background: transparent; color: var(--rv-branco); border-color: rgba(255, 255, 255, .6); }
.rv-chamada a.rv-btn-ghost:hover { background: rgba(255, 255, 255, .14); color: var(--rv-branco); }

/* ── Grade de denúncias ───────────────────────────────────────────────────── */
.rv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e5);
  margin-top: var(--e6); }
.rv-cartao {
  display: flex; flex-direction: column; background: var(--rv-branco);
  border: 1px solid var(--rv-linha); border-radius: var(--rv-raio); overflow: hidden;
  box-shadow: var(--rv-sombra);
  transition: transform .2s cubic-bezier(.22, .8, .3, 1), box-shadow .2s, border-color .2s;
}
/* A capa aproxima de leve no hover — o corte `overflow: hidden` do cartão segura. */
.rv-cartao-img img { transition: transform .35s cubic-bezier(.22, .8, .3, 1); }
.rv-cartao:hover .rv-cartao-img img { transform: scale(1.035); }
.rv-cartao:hover { transform: translateY(-4px); box-shadow: var(--rv-sombra-alta);
  border-color: #bcd9c8; }
.rv-cartao-img { aspect-ratio: 16 / 9; background: var(--rv-verde-lavado); overflow: hidden; }
.rv-cartao-img img { width: 100%; height: 100%; object-fit: cover; }
.rv-cartao-vazio {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-size: 3rem; font-weight: 800; color: rgba(0, 100, 55, .25);
}
.rv-cartao-corpo { padding: var(--e5); display: flex; flex-direction: column;
  gap: var(--e2); flex: 1; }
.rv-cartao-corpo time { font-size: var(--t-pequeno); color: var(--rv-cinza);
  letter-spacing: .02em; }
.rv-cartao-corpo h3 { font-size: var(--t-medio); margin: 0; line-height: 1.25;
  letter-spacing: -.012em; }
.rv-cartao-corpo p { margin: 0; color: var(--rv-cinza); font-size: var(--t-menor);
  flex: 1; line-height: 1.55; }

/* ── Cabeçalhos de página, busca, avisos ──────────────────────────────────── */
.rv-cabecalho { margin-bottom: var(--e7); }
.rv-cabecalho h1 { font-size: clamp(1.9rem, 3.2vw, var(--t-titulo)); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.rv-cabecalho > p { color: var(--rv-cinza); max-width: 62ch; margin: 0; font-size: var(--t-base); }
.rv-sobretitulo { color: var(--rv-verde); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-size: .82rem; margin: 0 0 6px; }
.rv-migalha { font-size: .85rem; color: var(--rv-cinza); margin-bottom: 18px; }
.rv-migalha a { color: var(--rv-verde); font-weight: 700; }
.rv-migalha span { margin: 0 6px; }

.rv-busca { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.rv-busca input {
  flex: 1; min-width: 220px; min-height: var(--toque); padding: var(--e3) var(--e5);
  border: 1px solid var(--rv-linha); border-radius: 999px; background: var(--rv-papel);
  font-size: var(--t-base);
}
.rv-busca input:focus { background: var(--rv-branco); }
.rv-limpar { color: var(--rv-cinza); font-size: .88rem; text-decoration: underline; }
.rv-resultado { color: var(--rv-cinza); font-size: .9rem; }
.rv-vazio { text-align: center; padding: 56px 20px; color: var(--rv-cinza); }
.rv-vazio p { margin-bottom: 18px; }

.rv-msg { border-radius: 12px; padding: 14px 18px; margin-bottom: 20px; font-size: .95rem; }
.rv-msg-ok { background: var(--rv-verde-lavado); color: var(--rv-verde-fundo); border: 1px solid #b9dfc9; }
.rv-msg-erro { background: #fdecec; color: #93231f; border: 1px solid #f3c4c2; }
.rv-nota { font-size: .82rem; color: var(--rv-cinza); margin: 12px 0 0; }
.rv-selo {
  display: inline-block; background: #efe3c4; color: #6b4f0d; border-radius: 999px;
  padding: 3px 12px; font-size: .76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: 10px;
}

/* ── Matéria ──────────────────────────────────────────────────────────────── */
/* Medida: o texto corrido fica em ~66 caracteres; imagens, galerias e blocos de
   coluna continuam usando a largura toda. Antes o artigo media 85–98 caracteres,
   bem acima da faixa confortável de leitura. */
.rv-artigo-wrap { max-width: 820px; }
.rv-artigo > p, .rv-artigo > ul, .rv-artigo > ol, .rv-artigo > blockquote,
.rv-artigo > h2, .rv-artigo > h3, .rv-artigo > h4 { max-width: var(--rv-leitura); }
.rv-artigo-topo h1 { font-size: clamp(2rem, 3.6vw, 2.6rem); font-weight: 800;
  letter-spacing: -.022em; line-height: 1.12; text-wrap: balance; }
.rv-meta { color: var(--rv-cinza); font-size: var(--t-menor); margin: 0; }
.rv-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; }
.rv-tags span {
  background: var(--rv-verde-lavado); color: var(--rv-verde-fundo);
  border-radius: 999px; padding: 3px 12px; font-size: .78rem; font-weight: 600;
}
.rv-artigo-capa { margin: 26px 0; }
.rv-artigo-capa img { width: 100%; border-radius: var(--rv-raio); box-shadow: var(--rv-sombra); }
.rv-artigo { font-size: var(--t-corpo); line-height: 1.7; }
.rv-artigo > :first-child { margin-top: 0; }

.rv-artigo-fim { margin-top: 44px; border-top: 1px solid var(--rv-linha); padding-top: 22px; }
.rv-compartilhar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: .9rem; }
.rv-compartilhar span { color: var(--rv-cinza); }
.rv-compartilhar a, .rv-copiar {
  color: var(--rv-verde); font-weight: 700; background: none; border: 0;
  cursor: pointer; text-decoration: underline;
  /* min-width junto: o link "X" tinha 10px de largura e era quase impossível
     de acertar no dedo. */
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--toque); min-width: 44px; padding: 0 var(--e2);
}
.rv-vizinhos { display: flex; gap: 16px; margin-top: 26px; flex-wrap: wrap; }
.rv-vizinho {
  flex: 1; min-width: 240px; border: 1px solid var(--rv-linha); border-radius: var(--rv-raio);
  padding: 16px 18px; background: var(--rv-papel);
}
.rv-vizinho:hover { border-color: var(--rv-verde); }
.rv-vizinho span { display: block; font-size: .8rem; color: var(--rv-cinza); margin-bottom: 4px; }
.rv-vizinho strong { font-size: .96rem; }
.rv-vizinho-dir { text-align: right; }

/* ── Conselho ─────────────────────────────────────────────────────────────── */
/* Atalhos para os documentos: linha fina, sem cartão — eles apoiam a página, não
   disputam atenção com os eleitos. */
.rv-atalhos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px;
  border-top: 1px solid var(--rv-linha); border-bottom: 1px solid var(--rv-linha);
  padding: 4px 0; margin-bottom: 12px;
}
.rv-atalho {
  display: block; padding: 18px 4px; border-right: 1px solid var(--rv-linha);
  transition: background .18s;
}
.rv-atalho:last-child { border-right: 0; }
.rv-atalho:hover { background: var(--rv-papel); }
.rv-atalho-titulo {
  display: block; font-weight: 700; font-size: .98rem; color: var(--rv-verde);
  margin-bottom: 4px;
}
.rv-atalho-titulo span { display: inline-block; transition: transform .18s; }
.rv-atalho:hover .rv-atalho-titulo span { transform: translateX(4px); }
.rv-atalho-texto { display: block; color: var(--rv-cinza); font-size: .86rem; line-height: 1.5; }

.rv-blocos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.rv-bloco {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--rv-branco); border: 1px solid var(--rv-linha);
  border-left: 5px solid var(--rv-verde); border-radius: var(--rv-raio);
  padding: 24px; box-shadow: var(--rv-sombra); transition: transform .16s, box-shadow .16s;
}
.rv-bloco:hover { transform: translateY(-3px); box-shadow: var(--rv-sombra-alta); }
.rv-bloco h3 { font-size: 1.1rem; margin: 0; }
.rv-bloco p { margin: 0; color: var(--rv-cinza); font-size: .93rem; flex: 1; }

/* Os cinco eleitos cabem numa linha no computador e viram dois no celular — foto
   menor, para a página ser sobre o conjunto, não sobre cada retrato. */
.rv-conselheiros {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px;
  margin-bottom: 8px;
}
.rv-cons {
  background: var(--rv-verde); color: var(--rv-branco); border-radius: 12px;
  overflow: hidden; box-shadow: var(--rv-sombra);
  transition: transform .2s ease, box-shadow .2s ease;
}
.rv-cons:hover { transform: translateY(-4px); box-shadow: var(--rv-sombra-alta); }
.rv-cons img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.rv-cons-txt { padding: 14px 14px 16px; }
.rv-cons h3 { font-size: .98rem; margin: 0 0 4px; }
.rv-cons p { margin: 0; font-size: .77rem; line-height: 1.45; color: rgba(255, 255, 255, .82); }
.rv-cons-redes { display: flex; gap: 8px; margin-top: 12px !important; }
.rv-cons-redes a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .45); color: var(--rv-branco);
  transition: background .18s, border-color .18s;
}
.rv-cons-redes a:hover { background: rgba(255, 255, 255, .18); border-color: var(--rv-branco); }
.rv-cons-redes svg { width: 17px; height: 17px; }

/* ── Formulários ──────────────────────────────────────────────────────────── */
.rv-form { display: flex; flex-direction: column; gap: 20px; }
.rv-campo { display: flex; flex-direction: column; gap: 7px; border: 0; padding: 0; margin: 0; }
.rv-campo label, .rv-campo legend { font-weight: 700; font-size: .92rem; padding: 0; }
.rv-campo input, .rv-campo select, .rv-campo textarea {
  border: 1px solid var(--rv-linha); border-radius: var(--rv-raio-p);
  min-height: var(--toque); padding: var(--e3) var(--e4);
  background: var(--rv-papel); width: 100%; font-size: var(--t-base);
  transition: border-color .15s, background .15s;
}
.rv-campo input:focus, .rv-campo select:focus, .rv-campo textarea:focus {
  border-color: var(--rv-verde);
}
/* Caixas de marcar minúsculas são as piores no dedo. */
.rv-checks label { min-height: 32px; }
.rv-checks input { width: 20px; height: 20px; }
.rv-campo input:focus, .rv-campo select:focus, .rv-campo textarea:focus { background: var(--rv-branco); }
.rv-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 18px; }
.rv-checks label { display: flex; align-items: flex-start; gap: 8px; font-weight: 500; font-size: .92rem; }
.rv-checks input { width: auto; accent-color: var(--rv-verde); margin-top: 3px; }
.rv-opcional { color: var(--rv-cinza); font-weight: 500; }
.rv-form .rv-btn { align-self: flex-start; }
/* Campo-isca para robô de spam: sai da tela sem sumir para quem preenche por teclado. */
.rv-isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Propostas e petições ─────────────────────────────────────────────────── */
/* Capa em cima e texto embaixo: as capas das propostas são faixas largas (~1,8:1)
   com arte nas duas pontas — na coluna estreita de antes o corte comia justamente o
   número do processo de um lado e a imagem do outro.

   A trilha tem teto (300px): com `1fr` puro, duas propostas esticavam para meia tela
   cada e o cartão virava um bloco do tamanho de uma seção. Cartão é chamada, não
   página. */
.rv-peticoes { display: grid; gap: var(--e5); grid-template-columns: repeat(auto-fill, minmax(240px, 300px)); }
.rv-peticao {
  display: flex; flex-direction: column;
  border: 1px solid var(--rv-linha); border-radius: var(--rv-raio); overflow: hidden;
  background: var(--rv-branco); box-shadow: var(--rv-sombra);
}
.rv-peticao.is-encerrada { opacity: .92; }
.rv-peticao-img { display: block; aspect-ratio: 1.82 / 1; background: var(--rv-verde-lavado); }
.rv-peticao-img img { width: 100%; height: 100%; object-fit: cover; }
/* Coluna: o botão desce para a base do cartão, e dois cartões lado a lado terminam
   alinhados mesmo com resumos de tamanhos diferentes. */
.rv-peticao-corpo { padding: var(--e4) 18px 18px; display: flex; flex-direction: column; flex: 1; }
.rv-peticao-corpo h2 { font-size: 1.08rem; line-height: 1.25; margin-bottom: .4em; }
.rv-peticao-corpo p { color: var(--rv-cinza); font-size: var(--t-menor); }
.rv-peticao-corpo .rv-btn { align-self: flex-start; margin-top: auto; padding: 9px 18px; font-size: var(--t-menor); }
.rv-contador { color: var(--rv-verde) !important; font-weight: 600; }
.rv-contador strong { font-size: 1.5rem; }

/* O número do processo é a prova de que a proposta existe fora do site: fica em
   evidência no cartão e ao lado da data na ficha. */
.rv-processo {
  color: var(--rv-verde) !important; font-weight: 700; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .05em; margin: 0 0 6px;
}
.rv-meta .rv-processo { display: inline; margin-left: 10px; }


.rv-peticao-layout { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }
/* A petição já tem a coluna de assinatura ao lado: o texto dela lê melhor inteiro do
   que repartido de novo nas colunas que vieram do WordPress. (Precisa dos três
   seletores: com dois, empata em especificidade com `.rv-artigo .wp-block-columns`
   lá embaixo — e quem vem depois no arquivo ganharia.) */
.rv-peticao-texto .rv-artigo .wp-block-columns { grid-template-columns: 1fr; gap: 0; }
.rv-assinar { position: sticky; top: 96px; }
.rv-assinar-caixa {
  border: 1px solid var(--rv-linha); border-top: 5px solid var(--rv-verde);
  border-radius: var(--rv-raio); padding: 24px; background: var(--rv-papel);
  box-shadow: var(--rv-sombra);
}
.rv-assinar-caixa h2 { font-size: 1.15rem; }
.rv-contador-grande { margin: 0 0 14px; color: var(--rv-cinza); }
.rv-contador-grande strong { display: block; font-size: 2.4rem; color: var(--rv-verde); line-height: 1; }
.rv-por-centro { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 6px; font-size: .84rem; }
.rv-por-centro li { display: grid; grid-template-columns: 62px 1fr 32px; align-items: center; gap: 8px; }
.rv-por-centro b { text-align: right; color: var(--rv-cinza); font-weight: 600; }
.rv-barra { height: 8px; border-radius: 999px; background: #dceae2; display: block; }
.rv-barra::before { content: ""; display: block; height: 100%; width: var(--p, 0%);
  border-radius: 999px; background: var(--rv-verde); }

.rv-lista-assinaturas { margin-top: 56px; border-top: 1px solid var(--rv-linha); padding-top: 32px; }
.rv-assinaturas {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 24px;
}
.rv-assinaturas li {
  border-bottom: 1px dashed var(--rv-linha); padding: 8px 0; font-size: .92rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
}
.rv-assinaturas .rv-centro {
  background: var(--rv-verde-lavado); color: var(--rv-verde-fundo); margin: 0;
  border-radius: 999px; padding: 1px 9px; font-size: .74rem; font-weight: 700;
}
.rv-comentario { flex-basis: 100%; margin: 2px 0 0; color: var(--rv-cinza); font-size: .86rem; font-style: italic; }

/* ── Transparência ────────────────────────────────────────────────────────── */
.rv-pix {
  margin-top: 40px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
  background: var(--rv-papel); border: 1px solid var(--rv-linha);
  border-radius: var(--rv-raio); padding: 30px;
}
.rv-pix h2 { font-size: 1.3rem; }
.rv-pix p { color: var(--rv-cinza); margin-top: 0; }
.rv-pix-codigo { display: flex; gap: 10px; flex-wrap: wrap; }
.rv-pix-codigo input {
  flex: 1; min-width: 220px; border: 1px solid var(--rv-linha); border-radius: 10px;
  padding: 12px 14px; background: var(--rv-branco); font-size: .82rem; color: var(--rv-cinza);
}
.rv-qr { border-radius: 12px; border: 1px solid var(--rv-linha); background: var(--rv-branco); padding: 8px; }

/* Planilhas e painéis embutidos */
.rv-quadro {
  border: 1px solid var(--rv-linha); border-radius: var(--rv-raio); overflow: hidden;
  background: var(--rv-branco); box-shadow: var(--rv-sombra);
}
.rv-quadro iframe { width: 100%; height: 640px; border: 0; display: block; }
.rv-quadro-alto iframe { height: 86vh; min-height: 560px; }

/* ── Erro ─────────────────────────────────────────────────────────────────── */
.rv-erro { text-align: center; padding: 60px 0; }
.rv-erro-codigo { font-size: 4.5rem; font-weight: 800; color: var(--rv-verde-lavado); margin: 0; line-height: 1; }
.rv-erro h1 { font-size: 1.7rem; }
.rv-erro p { color: var(--rv-cinza); max-width: 52ch; margin: 0 auto 22px; }
.rv-erro .rv-botoes { justify-content: center; }

/* ── Rodapé ───────────────────────────────────────────────────────────────── */
.rv-footer { background: var(--rv-verde-fundo); color: rgba(255, 255, 255, .82); margin-top: auto; }
.rv-footer-inner {
  max-width: var(--rv-max); margin: 0 auto; padding: 36px 20px 24px;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px 28px;
}
.rv-footer-marca img { height: 46px; width: auto; margin-bottom: 12px; }
.rv-footer-redes { display: flex; gap: 10px; }
.rv-footer-redes a {
  width: var(--toque); height: var(--toque); border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .38); color: var(--rv-branco);
  transition: background .18s, transform .18s, border-color .18s;
}
.rv-footer-redes a:hover {
  background: rgba(255, 255, 255, .16); border-color: var(--rv-branco); transform: translateY(-2px);
}
.rv-footer-redes svg { width: 19px; height: 19px; }
.rv-footer-links { display: flex; flex-direction: column; gap: 2px; }
.rv-footer-links h2 {
  color: var(--rv-branco); font-size: .82rem; text-transform: uppercase;
  letter-spacing: .07em; margin: 0 0 6px;
}
.rv-footer-links a { font-size: var(--t-menor); min-height: 28px;
  display: inline-flex; align-items: center; }
.rv-footer-links a:hover { color: var(--rv-branco); text-decoration: underline; }
.rv-footer-fim {
  border-top: 1px solid rgba(255, 255, 255, .16); margin: 0;
  padding: 14px 20px; font-size: .8rem;
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
}
.rv-footer-fim img { border-radius: 3px; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }

.rv-atalhos-preview {
  position: fixed; right: var(--e4); bottom: var(--e4); z-index: 60;
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
}
.rv-back-dash {
  display: inline-flex; align-items: center; min-height: var(--toque);
  background: var(--rv-tinta); color: var(--rv-branco); border-radius: 999px;
  padding: 0 var(--e4); font-size: var(--t-pequeno); font-weight: 700;
  box-shadow: var(--rv-sombra-alta); opacity: .85;
}
a.rv-back-dash { color: var(--rv-branco); }
.rv-back-dash:hover { opacity: 1; }

/* Página /renova/config — formulário enxuto, só no preview logado. */
.rv-config-nota {
  background: var(--rv-papel); border: 1px solid var(--rv-linha);
  border-radius: var(--rv-raio); padding: var(--e4) var(--e5);
  color: var(--rv-cinza); font-size: var(--t-menor); margin-bottom: var(--e5);
}
.rv-config-grupo {
  border: 1px solid var(--rv-linha); border-radius: var(--rv-raio);
  padding: var(--e5); margin-bottom: var(--e5); background: var(--rv-branco);
}
.rv-config-grupo h2 {
  font-size: var(--t-base); margin: 0 0 var(--e4); color: var(--rv-verde-fundo);
}
.rv-check-linha {
  display: flex; align-items: center; gap: 10px; font-weight: 600;
  min-height: var(--toque); margin-bottom: var(--e3);
}
.rv-check-linha input { width: 20px; height: 20px; accent-color: var(--rv-verde); }

/* ── Conteúdo vindo do WordPress ──────────────────────────────────────────── */
.rv-artigo p, .rv-artigo ul, .rv-artigo ol { margin: 0 0 1.35em; }
.rv-artigo h2, .rv-artigo h3, .rv-artigo h4 { margin: 1.8em 0 .5em; font-weight: 800; }
.rv-artigo h2 { font-size: var(--t-grande); }
.rv-artigo h3 { font-size: var(--t-medio); }
.rv-artigo a { color: var(--rv-verde); font-weight: 600; text-decoration: underline; }
.rv-artigo li { margin-bottom: .4em; }
.rv-artigo figure { margin: 26px 0; }
.rv-artigo img { border-radius: 10px; margin-inline: auto; }
.rv-artigo figcaption { font-size: .84rem; color: var(--rv-cinza); text-align: center; margin-top: 8px; }
.rv-artigo hr, .rv-artigo .wp-block-separator {
  border: 0; border-top: 1px solid var(--rv-linha); margin: 32px auto; max-width: 220px;
}
.rv-artigo blockquote, .rv-artigo .wp-block-quote {
  margin: 26px 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--rv-verde);
  color: var(--rv-cinza); font-style: italic;
}
.rv-artigo table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 22px 0; }
.rv-artigo th, .rv-artigo td { border: 1px solid var(--rv-linha); padding: 9px 12px; text-align: left; }
.rv-artigo th { background: var(--rv-verde-lavado); }
.rv-artigo .wp-block-table { overflow-x: auto; }

.rv-artigo .wp-block-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.rv-artigo .wp-block-columns .wp-block-columns { grid-template-columns: 1fr; }
.rv-artigo .wp-block-gallery {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px;
}
.rv-artigo .wp-block-gallery figure { margin: 0; }
.rv-artigo .wp-block-gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.rv-artigo .has-small-font-size { font-size: .88rem; }
.rv-artigo .has-medium-font-size { font-size: 1.18rem; }
.rv-artigo .wp-block-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0; }
.rv-artigo .wp-block-button a {
  display: inline-block; background: var(--rv-verde); color: var(--rv-branco);
  border-radius: 999px; padding: 11px 24px; font-weight: 700; text-decoration: none;
}
.rv-artigo .wp-block-button a:hover { background: var(--rv-verde-fundo); }

/* ── Programa da Chapa 3 ao DCE (2025) ────────────────────────────────────────
   São 35 propostas: em lista corrida viram uma parede que ninguém lê. A hierarquia
   é blocos → eixos → itens, e o peso visual é MENOR que o dos cartões das propostas
   ao CONSUNI de propósito — o principal da página são as resoluções protocoladas. */
.rv-programa { margin-top: var(--e9); }
.rv-programa-topo { max-width: var(--rv-leitura); margin-bottom: var(--e6); }
.rv-programa-topo h2 {
  font-size: clamp(1.6rem, 2.6vw, var(--t-titulo)); font-weight: 800;
  letter-spacing: -.02em; margin: 0 0 var(--e3); text-wrap: balance;
}
.rv-programa-topo .rv-sobretitulo { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.rv-programa-intro { color: var(--rv-cinza); margin: 0; }
.rv-selo-chapa {
  background: var(--rv-verde); color: var(--rv-branco); border-radius: 999px;
  padding: 3px 12px; font-size: .72rem; letter-spacing: .04em;
}

/* Faixa de números: dá a dimensão do programa antes de qualquer leitura. */
.rv-numeros {
  display: flex; flex-wrap: wrap; gap: var(--e6); margin: var(--e5) 0 var(--e4);
  padding: var(--e4) 0; border-top: 1px solid var(--rv-linha);
  border-bottom: 1px solid var(--rv-linha);
}
.rv-numeros div { display: flex; flex-direction: column; }
.rv-numeros dt {
  font-size: 1.8rem; font-weight: 800; color: var(--rv-verde); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.rv-numeros dd {
  margin: 0; font-size: var(--t-pequeno); color: var(--rv-cinza);
  text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
}

.rv-bloco-programa + .rv-bloco-programa { margin-top: var(--e8); }
.rv-bloco-cabeca { margin-bottom: var(--e5); }
.rv-bloco-cabeca h3 {
  font-size: var(--t-medio); font-weight: 800; margin: 0 0 var(--e1);
  /* A barrinha à esquerda amarra o bloco inteiro sem precisar de caixa em volta. */
  padding-left: var(--e3); border-left: 4px solid var(--rv-verde);
}
.rv-bloco-cabeca p { margin: 0 0 0 calc(var(--e3) + 4px); color: var(--rv-cinza); max-width: 62ch; }

/* Cor por eixo. Ela é DECORATIVA — cada eixo também tem ícone, título e número, e
   nada aqui é informação que só a cor carrega. Sete tons de saturação e claridade
   parecidas para lerem como uma família; o fundo é a versão lavada do mesmo tom, e o
   texto sempre o tom escuro sobre ele. */
.cor-1 { --acento: #00512c; --acento-fraco: #e6f1ea; }
.cor-2 { --acento: #8a6209; --acento-fraco: #fbf2e1; }
.cor-3 { --acento: #135b70; --acento-fraco: #e6f0f4; }
.cor-4 { --acento: #0b6c3c; --acento-fraco: #e6f2ea; }
.cor-5 { --acento: #8f3d1e; --acento-fraco: #fbeee8; }
.cor-6 { --acento: #474391; --acento-fraco: #ecebf8; }
.cor-7 { --acento: #0d6b62; --acento-fraco: #e5f1ef; }

/* `align-items: start`: sem isso o eixo de 2 itens esticava até a altura do de 6 e
   ficava com meio cartão vazio ao lado. */
.rv-eixos {
  display: grid; gap: var(--e5); align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
}

/* Índice dos eixos: o mapa da seção, em chips que saltam para cada cartão. */
.rv-indice-eixos { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e6); }
.rv-indice-eixos .rv-chip {
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: 7px 14px; border-radius: 999px; text-decoration: none;
  background: var(--acento-fraco); color: var(--acento);
  border: 1px solid transparent; font-size: var(--t-menor); font-weight: 600;
  transition: border-color .15s, transform .15s;
}
.rv-indice-eixos .rv-chip span {
  font-size: .72rem; font-weight: 800; opacity: .72; font-variant-numeric: tabular-nums;
}
.rv-indice-eixos .rv-chip:hover { border-color: currentColor; transform: translateY(-1px); }
.rv-eixo {
  background: var(--rv-branco); border: 1px solid var(--rv-linha);
  border-radius: var(--rv-raio); padding: var(--e5); box-shadow: var(--rv-sombra);
  container-type: inline-size;
}
/* O eixo comprido ocupa a linha inteira: um cartão de 10 itens ao lado de um de 2
   deixaria um vão enorme. É a única regra de layout por media query aqui — dentro do
   cartão, quem decide é a consulta de container mais abaixo. */
@media (min-width: 900px) {
  .rv-eixo.is-largo { grid-column: 1 / -1; }
}
/* O filete do topo é a marca de cor do eixo — some no cartão inteiro se for fundo. */
.rv-eixo::before {
  content: ""; display: block; height: 3px; width: 56px; border-radius: 3px;
  background: var(--acento); margin-bottom: var(--e4);
}
.rv-eixo-topo { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e4); }
.rv-eixo-icone {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: 12px; color: var(--acento);
  background: var(--acento-fraco);
}
.rv-eixo-icone svg { width: 24px; height: 24px; }
.rv-eixo-topo h4 {
  margin: 0; font-size: 1.05rem; font-weight: 800; line-height: 1.25;
  letter-spacing: -.01em; text-wrap: balance; flex: 1;
}
.rv-eixo-conta {
  flex: none; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px;
  display: grid; place-items: center; background: var(--acento-fraco);
  color: var(--acento); font-size: .78rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Numeração 01, 02… por contador do CSS: o HTML não repete número nenhum, e
   acrescentar um item no YAML não desalinha a contagem. */
.rv-eixo-itens { margin: 0; display: grid; gap: 0; counter-reset: proposta; }
.rv-eixo-itens > div { padding: var(--e3) 0; border-top: 1px solid var(--rv-linha); counter-increment: proposta; }
.rv-eixo-itens > div:first-child { border-top: 0; padding-top: 0; }
.rv-eixo-itens dt {
  font-weight: 700; color: var(--rv-tinta); margin-bottom: 2px;
  display: flex; align-items: baseline; gap: var(--e2);
}
.rv-eixo-itens dt::before {
  content: counter(proposta, decimal-leading-zero);
  flex: none; color: var(--acento); opacity: .55; font-size: .74rem; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.rv-eixo-itens dd { margin: 0 0 0 calc(1.6em + var(--e2)); color: var(--rv-cinza); font-size: var(--t-menor); }

/* Item de abertura: o primeiro de cada eixo em corpo maior e sobre o tom do eixo —
   é o ponto de entrada que faltava para o olho não bater numa lista plana. */
.rv-eixo-itens > div:first-child {
  background: var(--acento-fraco); border-radius: var(--rv-raio-p);
  padding: var(--e4); margin-bottom: var(--e3);
}
.rv-eixo-itens > div:first-child dt { font-size: 1.06rem; }
.rv-eixo-itens > div:first-child dd { color: var(--rv-tinta); }
.rv-eixo-itens > div:first-child dt::before { opacity: .8; }

/* Selo do que virou resolução: o pedaço do programa que já saiu do papel. */
.rv-selo-virou { margin-top: var(--e2) !important; }
.rv-selo-virou a {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  padding: 3px 10px 3px 12px; border-radius: 999px; font-size: .74rem; font-weight: 800;
  letter-spacing: .02em; background: var(--acento); color: var(--rv-branco);
}
.rv-selo-virou a:hover { filter: brightness(1.15); }
.rv-selo-virou svg { width: 13px; height: 13px; transition: transform .15s; }
.rv-selo-virou a:hover svg { transform: translateX(2px); }

/* Consulta de container: dentro de um eixo largo, os itens viram duas colunas.
   É a medida do CARTÃO que decide, não a da janela — o mesmo eixo cabe em uma
   coluna no celular e em duas no desktop sem media query nenhuma. */
@container (min-width: 520px) {
  .rv-eixo-itens { grid-template-columns: 1fr 1fr; column-gap: var(--e5); }
  /* O item de abertura atravessa as duas colunas: em meia largura, ele deixava o
     vizinho de cima flutuando sozinho num vão. */
  .rv-eixo-itens > div:first-child { grid-column: 1 / -1; }
  .rv-eixo-itens > div:nth-child(2), .rv-eixo-itens > div:nth-child(3) {
    border-top: 0; padding-top: 0;
  }
}

/* O lema da campanha, logo abaixo da capa: sem peso próprio ele lia como uma linha
   solta de texto no meio do artigo. */
.rv-artigo .rv-slogan {
  font-size: 1.22rem; font-weight: 800; color: var(--rv-verde-fundo);
  letter-spacing: -.01em; margin-bottom: var(--e5);
}

/* ── Blocos de leitura dentro da matéria/proposta ─────────────────────────────
   Texto de resolução é denso por natureza. Estes três blocos existem para quebrar a
   parede de parágrafos sem tirar informação: um destaque (callout), uma grade de
   pilares e o cartãozinho que leva à denúncia citada. */
.rv-artigo .rv-callout {
  background: var(--rv-verde-lavado); border-left: 4px solid var(--rv-verde);
  border-radius: var(--rv-raio-p); padding: var(--e4) 20px; margin: var(--e5) 0;
}
.rv-artigo .rv-callout > :last-child { margin-bottom: 0; }
.rv-artigo .rv-callout p { font-size: var(--t-base); }
.rv-callout-titulo {
  display: block; font-weight: 800; color: var(--rv-verde-fundo); font-size: .76rem;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--e2);
}
/* Variante âmbar para o diagnóstico ("o problema hoje"): mesma forma, outra cor, para
   o olho separar o que é denúncia do que é solução. */
.rv-artigo .rv-callout-alerta { background: #fdf6e6; border-left-color: #d8a33a; }
.rv-callout-alerta .rv-callout-titulo { color: #6b4f0d; }

/* Barras de votação por centro (denúncia de cotas). Só CSS + um script curto
   no HTML: o estático da HostGator não carrega Chart.js.
   Coral (a favor, negativo) no topo → verde (contra) na base.
   --pct-favor / --pct-contra = 0–100. */
.rv-artigo .rv-votos {
  --voto-fav: #ff8f7a;
  --voto-fav-2: #ffc8bc;
  --voto-ctr: #2db56a;
  --voto-ctr-2: #8ee4b0;
  margin: 28px 0 36px; padding: 22px 20px 16px;
  background: linear-gradient(180deg, #fff3f0 0%, #f7faf8 48%, #e7f6ee 100%);
  border: 1px solid var(--rv-linha);
  border-radius: var(--rv-raio); max-width: none;
}
.rv-votos-placar {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px;
}
.rv-votos-card {
  text-align: center; padding: 12px 8px; border-radius: 12px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 8px 22px rgba(16, 36, 26, .05);
}
.rv-votos-card span {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--rv-cinza);
}
.rv-votos-card strong { display: block; font-size: 1.7rem; font-weight: 800; margin-top: 2px; }
.rv-votos-ctr strong { color: #1a8f52; }
.rv-votos-fav strong { color: #e06a58; }
.rv-votos-aus strong { color: #6b7280; }
.rv-votos-legenda {
  display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 0 0 18px;
  font-size: .78rem; font-weight: 700;
}
.rv-votos-chip { display: inline-flex; align-items: center; gap: 7px; color: var(--rv-cinza); }
.rv-votos-chip::before {
  content: ""; width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0;
}
.rv-votos-chip-ctr::before {
  background: linear-gradient(135deg, var(--voto-ctr), var(--voto-ctr-2));
}
.rv-votos-chip-fav::before {
  background: linear-gradient(135deg, var(--voto-fav), var(--voto-fav-2));
}
.rv-votos-eixo {
  display: grid; grid-template-columns: minmax(0, 1fr) 148px;
  gap: 14px 16px; align-items: start;
}
.rv-votos-lista {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding-left: 12px;
}
.rv-votos-lista::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--voto-fav), #f4d4a4 48%, var(--voto-ctr));
}
.rv-votos-linha {
  display: grid; grid-template-columns: minmax(140px, 1.1fr) minmax(80px, 2fr) 52px;
  grid-template-areas: "nome barra pct" "n n n";
  gap: 4px 12px; align-items: center;
}
.rv-votos-nome { grid-area: nome; font-size: .92rem; line-height: 1.25; }
.rv-votos-nome strong { font-weight: 800; }
.rv-votos-barra {
  grid-area: barra; display: flex; height: 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .7); overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(16, 36, 26, .06);
}
.rv-votos-fill-ctr, .rv-votos-fill-fav {
  display: block; height: 100%; font-style: normal;
}
.rv-votos-fill-fav {
  width: calc(var(--pct-favor) * 1%);
  background: linear-gradient(90deg, var(--voto-fav), var(--voto-fav-2));
}
.rv-votos-fill-ctr {
  width: calc(var(--pct-contra) * 1%);
  background: linear-gradient(90deg, var(--voto-ctr), var(--voto-ctr-2));
}
.rv-votos-pct {
  grid-area: pct; font-weight: 800; font-size: .95rem; text-align: right;
  font-variant-numeric: tabular-nums;
  color: #c45b4c;
  color: color-mix(in oklab, var(--voto-fav) calc(var(--pct-favor) * 1%), var(--voto-ctr));
}
.rv-votos-n {
  grid-area: n; font-size: .78rem; color: var(--rv-cinza); padding-left: 0;
}
.rv-votos-nota {
  margin: 18px 0 0; font-size: .78rem; color: var(--rv-cinza);
}
.rv-votos-balao {
  --p: .2;
  position: sticky; top: 28vh; z-index: 2;
  padding: 14px 14px 12px;
  background: linear-gradient(180deg, #fff 0%, #fff6f4 100%);
  border: 1px solid #ffd4cb; border-radius: 18px 18px 18px 6px;
  box-shadow: 0 14px 32px rgba(224, 106, 88, .16);
  color: #6b3a32;
  transform: translate3d(0, calc((var(--p) - .35) * 28px), 0)
             rotate(calc((var(--p) - .4) * -5deg));
  transition: transform .12s linear;
}
.rv-votos-balao-seta {
  display: block; font-size: 1.15rem; line-height: 1; color: #e06a58;
  margin-bottom: 4px;
}
.rv-votos-balao strong {
  display: block; font-size: .78rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: #c45b4c; margin-bottom: 4px;
}
.rv-votos-balao p {
  margin: 0; font-size: .78rem; line-height: 1.35; font-weight: 600;
  color: #6b3a32;
}
@media (max-width: 720px) {
  .rv-votos-eixo { grid-template-columns: 1fr; }
  .rv-votos-balao {
    position: sticky; top: 12px; order: -1;
    border-radius: 14px;
    transform: none;
  }
}
@media (max-width: 560px) {
  .rv-votos-placar { grid-template-columns: 1fr; }
  .rv-votos-linha {
    grid-template-columns: 1fr 48px;
    grid-template-areas: "nome pct" "barra barra" "n n";
  }
}
@media (prefers-reduced-motion: reduce) {
  .rv-votos-balao { transform: none; transition: none; }
}

.rv-artigo .rv-pilares {
  list-style: none; margin: var(--e5) 0; padding: 0;
  display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.rv-artigo .rv-pilares li {
  margin: 0; background: var(--rv-branco); border: 1px solid var(--rv-linha);
  border-radius: var(--rv-raio-p); padding: var(--e4) 18px; font-size: var(--t-menor);
}
.rv-pilar-titulo { display: block; font-weight: 800; color: var(--rv-tinta); margin-bottom: var(--e1); }

/* Cartãozinho da denúncia citada: quase inline, mas com moldura e miniatura para
   anunciar que é clicável. Precisa do seletor com `.rv-artigo` porque `.rv-artigo a`
   (0-1-1) sublinha e pinta de verde tudo o que for link aqui dentro. */
.rv-refs { display: flex; flex-wrap: wrap; gap: var(--e2); margin: var(--e4) 0; }
.rv-artigo a.rv-ref, a.rv-ref {
  display: inline-flex; align-items: center; gap: var(--e3); max-width: 100%;
  padding: 5px 16px 5px 5px; border: 1px solid var(--rv-linha); border-radius: 999px;
  background: var(--rv-branco); color: var(--rv-tinta); text-decoration: none;
  box-shadow: var(--rv-sombra); transition: border-color .15s, background .15s;
}
.rv-artigo a.rv-ref:hover, a.rv-ref:hover {
  border-color: var(--rv-verde); background: var(--rv-verde-lavado);
}
.rv-artigo .rv-ref img, .rv-ref img {
  width: 46px; height: 46px; flex: none; margin: 0; border-radius: 999px; object-fit: cover;
}
.rv-ref-txt { display: flex; flex-direction: column; min-width: 0; }
.rv-ref-tipo {
  font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: var(--rv-verde);
}
.rv-ref-nome { font-size: var(--t-menor); font-weight: 600; line-height: 1.25; }

.rv-anexo { margin: 18px 0; }
/* O seletor precisa do elemento e da matéria: `a.rv-btn` (fundo verde) e
   `.rv-artigo a` (texto verde) valem 0-1-1 cada um e venciam `.rv-btn-doc`, que vale
   0-1-0 — o botão do anexo saía verde sobre verde, com o rótulo invisível. */
.rv-artigo a.rv-btn-doc, a.rv-btn-doc, .rv-btn-doc {
  background: var(--rv-verde-lavado); color: var(--rv-verde-fundo);
  border-color: var(--rv-verde-lavado); text-decoration: none;
}
.rv-artigo a.rv-btn-doc:hover, a.rv-btn-doc:hover, .rv-btn-doc:hover {
  background: var(--rv-verde); color: var(--rv-branco); border-color: var(--rv-verde);
}

/* Lista de PDFs: cara de arquivo, descrição no mesmo bloco do link. */
.rv-artigo .rv-docs {
  list-style: none; margin: 8px 0 28px; padding: 0;
  border: 1px solid var(--rv-linha); border-radius: var(--rv-raio);
  background: var(--rv-branco); overflow: hidden;
}
.rv-artigo .rv-docs li { margin: 0; }
.rv-artigo .rv-docs li + li { border-top: 1px solid var(--rv-linha); }
.rv-artigo a.rv-docs-item {
  display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center;
  padding: 12px 14px; color: var(--rv-tinta); text-decoration: none; font-weight: 500;
}
.rv-artigo a.rv-docs-item:hover { background: var(--rv-papel); }
.rv-docs-ico {
  display: grid; place-items: center; width: 44px; height: 52px;
  border-radius: 4px 10px 4px 4px;
  background: linear-gradient(180deg, #f4faf6, #e4f0e8);
  border: 1px solid #cfe0d5; color: var(--rv-verde-fundo);
  font-size: .62rem; font-weight: 800; letter-spacing: .06em;
  box-shadow: 0 1px 0 rgba(16, 36, 26, .06);
}
.rv-docs-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rv-docs-meta strong {
  font-size: .95rem; font-weight: 700; color: var(--rv-tinta); line-height: 1.25;
}
.rv-docs-meta small {
  font-size: .78rem; color: var(--rv-cinza); font-weight: 500; line-height: 1.35;
}

.rv-artigo .rv-tempo {
  list-style: none; margin: 8px 0 22px; padding: 0 0 0 18px;
  border-left: 2px solid var(--rv-linha);
}
.rv-artigo .rv-tempo li {
  position: relative; margin: 0 0 18px; padding: 0 0 0 16px;
}
.rv-artigo .rv-tempo li::before {
  content: ""; position: absolute; left: -22px; top: .45em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rv-verde); box-shadow: 0 0 0 3px var(--rv-verde-lavado);
}
.rv-tempo time {
  display: block; font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--rv-verde); margin-bottom: 4px;
}
.rv-artigo .rv-tempo p { margin: 0; font-size: var(--t-menor); line-height: 1.5; }
.rv-tempo-fonte { font-size: .78rem; color: var(--rv-cinza); }
.rv-video { position: relative; padding-top: 56.25%; margin: 24px 0; border-radius: 12px; overflow: hidden; }
.rv-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Short do YouTube é vertical (9:16) — a moldura 16:9 o espremia entre duas tarjas. */
.rv-video-vertical { padding-top: 0; aspect-ratio: 9 / 16; max-width: 340px; }
.rv-video-vertical iframe { position: static; height: 100%; }

/* ── Telas pequenas ───────────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .rv-conselheiros { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 960px) {
  .rv-valores-grid, .rv-grid, .rv-blocos { grid-template-columns: repeat(2, 1fr); }
  .rv-atalhos { grid-template-columns: 1fr; gap: 0; }
  .rv-atalho { border-right: 0; border-bottom: 1px solid var(--rv-linha); }
  .rv-atalho:last-child { border-bottom: 0; }
  .rv-peticao-layout { grid-template-columns: 1fr; }
  .rv-assinar { position: static; }
  .rv-assinaturas { grid-template-columns: repeat(2, 1fr); }
  .rv-footer-inner { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .rv-footer-marca { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  /* No dedo: alvos de 44px — exceto o mapa do rodapé, onde a lista densa
     ficava interminável; lá o alvo fica em ~32px. */
  .rv-secao-topo .rv-mais, .rv-cartao-corpo .rv-mais,
  .rv-cons-redes a, .rv-limpar, .rv-migalha a, .rv-atalho {
    min-height: var(--toque);
  }
  .rv-cons-redes a { width: var(--toque); height: var(--toque); }
  .rv-secao-topo .rv-mais, .rv-cartao-corpo .rv-mais { display: inline-flex; align-items: center; }

  .rv-menu-btn { display: grid; }
  .rv-nav {
    display: none; width: 100%; flex-direction: column; align-items: stretch;
    gap: 0; padding: 8px 0 12px;
  }
  .rv-nav.is-open { display: flex; }
  .rv-nav a { padding: 11px 4px; border-bottom: 1px solid rgba(255, 255, 255, .16); }
  .rv-nav a.is-atual { border-bottom-color: var(--rv-branco); }
  .rv-header-inner { flex-wrap: wrap; }

  .rv-valores-grid, .rv-grid, .rv-blocos,
  .rv-assinaturas { grid-template-columns: 1fr; }
  /* Rodapé no celular: marca em cima, links em duas colunas — sem a torre
     de uma coluna com alvos de 44px que alongava o mapa. */
  .rv-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px; padding: 24px 16px 16px;
  }
  .rv-footer-marca { grid-column: 1 / -1; margin-bottom: 2px; }
  .rv-footer-marca img { height: 40px; margin-bottom: 10px; }
  .rv-footer-links { gap: 0; }
  .rv-footer-links h2 { margin: 0 0 4px; font-size: .72rem; }
  .rv-footer-links a { min-height: 32px; font-size: .8rem; line-height: 1.25; }
  .rv-footer-fim { padding: 12px 16px; gap: 8px; }
  /* Dois eleitos por linha no celular: um só deixaria a página interminável. */
  .rv-conselheiros { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .rv-cons h3 { font-size: .92rem; }
  .rv-cons p { font-size: .72rem; }
  /* No celular a trilha com teto deixaria uma faixa vazia à direita. */
  .rv-peticoes { grid-template-columns: 1fr; }
  .rv-artigo .rv-pilares { grid-template-columns: 1fr; }
  /* Faixa de números: com o vão de 32px, cada número ia para uma linha. */
  .rv-numeros { gap: var(--e4) var(--e5); }
  .rv-numeros dt { font-size: 1.5rem; }
  .rv-pix { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .rv-artigo .wp-block-columns { grid-template-columns: 1fr; }
  .rv-quadro iframe { height: 78vh; }
  .rv-vizinho-dir { text-align: left; }
  .rv-wrap { padding: 28px 16px 48px; }

  /* Hero no celular: lema cabe em duas linhas sem esmagar, faixa baixa e centrada. */
  .rv-lema-secao { padding-top: 28px; }
  .rv-lema { font-size: clamp(1.85rem, 8.2vw, 2.4rem); }
  .rv-lema-secao::before { width: 92%; left: -6%; filter: blur(14px); }
  .rv-bandeiras {
    height: clamp(110px, 32vw, 170px);
    margin-top: clamp(-48px, -8vw, -22px);
  }
  .rv-hero .rv-botoes { flex-direction: column; align-items: flex-start; }
  .rv-hero a.rv-btn { width: auto; }
}

/* ── Entrada ao rolar ─────────────────────────────────────────────────────── */
/* Animação ligada à rolagem, em CSS puro. Por que não JavaScript: a versão com
   IntersectionObserver começava com `opacity: 0` e, se o observer não disparasse,
   a seção FICAVA invisível — aconteceu duas vezes na conferência. Aqui o estado
   escondido só existe dentro da animação: onde não há suporte (Safari, Firefox) ou
   onde o visitante pede menos movimento, tudo aparece normalmente, parado. */
@keyframes rv-entrar {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rv-valor, .rv-cartao, .rv-cons, .rv-bloco, .rv-atalho, .rv-peticao, .rv-chamada,
    .rv-eixo {
      animation: rv-entrar .01s linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 22%;
    }
  }
}

/* O hero se despede ao rolar: o texto sobe e some, as bandeiras afundam devagar e
   desvanecem — o fundo "reage" à navegação. Mesma regra da entrada: estado inicial
   intacto sem suporte (Safari/Firefox) e sem movimento para quem pediu menos. */
@keyframes rv-hero-texto {
  to { opacity: 0; transform: translateY(-22px); }
}
@keyframes rv-hero-bandeiras {
  to { opacity: 0; transform: translateY(28px); }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .rv-lema-secao {
      animation: rv-hero-texto .01s linear both;
      animation-timeline: scroll();
      animation-range: 0 340px;
    }
    .rv-hero .rv-bandeiras {
      animation: rv-hero-bandeiras .01s linear both;
      animation-timeline: scroll();
      animation-range: 0 400px;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .rv *, .rv *::before, .rv *::after { transition: none !important; animation: none !important; }
}