/* ==========================================================================
   Saber Nomes - estilo tech editorial
   CSS puro, sem dependencias externas.
   As cores base sao reinjetadas pelo config.php no <head> (o bloco :root
   daqui funciona como fallback e como fonte dos tons derivados).
   ========================================================================== */

/* ==========================================================================
   FONTE
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("/assets/fontes/Inter-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fontes/Inter-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fontes/Inter-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fontes/Inter-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   TOKENS
   ========================================================================== */

:root {
  /* Paleta - fallback. O config.php sobrescreve estas onze variaveis. */
  --marca: #0F2A3D;
  --marca-escura: #0A1D2B;
  --link: #1B6DC1;
  --link-hover: #12508F;
  --tinta: #111417;
  --tinta-suave: #33414D;
  --fundo: #FFFFFF;
  --fundo-alt: #F5F7F9;
  --linha: #DFE4E9;
  --linha-forte: #C2CBD3;
  --invertido: #FFFFFF;

  /* Tons derivados. A primeira declaracao e o fallback estatico; a segunda
     recalcula a partir da paleta real quando o navegador suporta color-mix. */
  --marca-fraca: #EDF1F4;
  --marca-fraca: color-mix(in srgb, var(--marca) 7%, var(--fundo));
  --marca-media: #C9D3DB;
  --marca-media: color-mix(in srgb, var(--marca) 26%, var(--fundo));
  --link-fraco: #E8F0F9;
  --link-fraco: color-mix(in srgb, var(--link) 9%, var(--fundo));
  --linha-sutil: #ECEFF2;
  --linha-sutil: color-mix(in srgb, var(--linha) 55%, var(--fundo));

  /* Espacamento - escala de 4px. */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 20px;
  --e6: 24px;
  --e7: 32px;
  --e8: 40px;
  --e9: 48px;

  /* Ritmo vertical das secoes e do container. */
  --secao-y: 40px;
  --container-max: 1180px;
  --container-x: 24px;
  --lateral-l: 300px;
  --coluna-gap: 44px;
  /* Altura da faixa de busca do cabecalho: 10px + campo de 42px + 10px + a
     linha de 1px. O cabecalho sticky usa esse valor negativo em top para
     deixar so a linha principal fixa. */
  --faixa-busca-h: 63px;
  --cabecalho-h: 69px;

  /* Cantos. */
  --r1: 6px;
  --r2: 10px;
  --r3: 14px;
  --r-pill: 999px;

  /* Sombras discretas: profundidade sem perder o ar editorial. */
  --sombra-1: 0 1px 2px rgba(15, 42, 61, .05);
  --sombra-2: 0 2px 4px -2px rgba(15, 42, 61, .08), 0 6px 16px -8px rgba(15, 42, 61, .14);
  --sombra-3: 0 8px 20px -10px rgba(15, 42, 61, .20), 0 2px 6px -3px rgba(15, 42, 61, .10);

  /* Anel de foco e transicao padrao. */
  --anel: 0 0 0 3px rgba(27, 109, 193, .20);
  --transicao: .18s cubic-bezier(.4, 0, .2, 1);

  /* Tipografia. */
  --fonte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-micro: .68rem;
  --fs-mini: .78rem;
  --fs-pequeno: .875rem;
  --fs-corpo: .96rem;
  --fs-medio: 1.06rem;
  --fs-grande: 1.2rem;
  --ls-rotulo: .12em;
}

/* ==========================================================================
   RESET E BASE
   ========================================================================== */

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

/* O atributo hidden precisa vencer as classes que definem display. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Folga ao pular para as ancoras do indice. */
  scroll-padding-top: var(--e6);
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 17px;
  line-height: 1.62;
  font-feature-settings: "kern" 1, "liga" 1, "cv05" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--transicao);
}
a:hover, a:focus-visible { color: var(--link-hover); text-decoration: underline; }

h1, h2, h3, h4 {
  color: var(--marca);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.16;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0 0 var(--e4); }
ul, ol { margin: 0 0 var(--e4); padding-left: 1.15rem; }
li { margin-bottom: var(--e1); }
li::marker { color: var(--marca-media); }
strong { font-weight: 700; color: var(--tinta); }

:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: var(--r1);
}

::selection { background: var(--link); color: var(--invertido); }

.oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pular {
  position: absolute; left: -9999px; top: 0;
  background: var(--marca); color: var(--invertido);
  padding: var(--e3) var(--e5); z-index: 200;
  font-weight: 700; font-size: var(--fs-pequeno);
  border-radius: 0 0 var(--r1) 0;
}
.pular:focus { left: 0; text-decoration: none; color: var(--invertido); }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-x);
}
/* ==========================================================================
   CABECALHO
   ========================================================================== */

/* Fixo no topo. Sem sombra permanente - so a linha fina de baixo marca a
   transicao para o conteudo, mesmo sem rolagem. */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--fundo);
  border-bottom: 1px solid var(--linha);
}

.cabecalho-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e5);
  min-height: 68px;
}

.marca {
  display: flex;
  align-items: center;
  gap: var(--e3);
  color: var(--marca);
  text-decoration: none;
  flex-shrink: 0;
}
.marca:hover,
.marca:focus-visible { text-decoration: none; color: var(--marca); }

.marca-logo {
  width: 40px;
  height: 40px;
  border-radius: var(--r1);
  box-shadow: var(--sombra-1);
  object-fit: cover;
  flex-shrink: 0;
}

.marca-texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.15;
  text-align: left;
}

.marca-nome {
  font-size: var(--fs-medio);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--marca);
}

.marca-slogan {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-top: 2px;
}

/* Navegacao principal: sublinhado animado em vez de borda que empurra
   o layout. O pseudo-elemento fica ancorado na base da caixa, entao
   nenhum item muda de altura no hover ou no estado ativo. */
.nav-desktop ul {
  display: flex;
  align-items: center;
  gap: var(--e6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-desktop li { margin: 0; }

.nav-desktop a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 68px;
  color: var(--tinta);
  font-size: var(--fs-pequeno);
  font-weight: 600;
  text-decoration: none;
}
.nav-desktop a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 18px;
  width: 0;
  height: 2px;
  background: var(--marca);
  transition: width var(--transicao);
}
.nav-desktop a:hover {
  color: var(--link);
  text-decoration: none;
}
.nav-desktop a:hover::after { width: 100%; background: var(--link); }
.nav-desktop a.ativo { color: var(--marca); font-weight: 700; }
.nav-desktop a.ativo::after { width: 100%; background: var(--marca); }

/* Ocultos por padrao - a fatia responsiva decide quando aparecem. */
.btn-menu,
.btn-fechar {
  display: none;
  font: inherit;
  font-size: var(--fs-mini);
  font-weight: 700;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--marca);
  background: var(--fundo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r1);
  padding: var(--e2) var(--e4);
  cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao), color var(--transicao);
}
.btn-menu:hover,
.btn-fechar:hover {
  border-color: var(--marca);
  background: var(--marca-fraca);
}
/* Dentro do painel lateral o botao de fechar precisa ficar sempre
   visivel, independente do breakpoint que controla o btn-menu. */
.menu-lateral .btn-fechar { display: inline-flex; align-items: center; }

/* Segunda faixa: busca + paginas institucionais, compacta e alinhada
   pelo centro vertical com a linha principal. */
.cabecalho-busca {
  border-top: 1px solid var(--linha);
  background: var(--fundo-alt);
}

.cabecalho-busca-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--e2) var(--e6);
  /* O recuo lateral precisa ser repetido: este seletor tem a mesma
     especificidade de .container e vem depois, entao o shorthand
     apagaria o padding horizontal do container. */
  padding: 10px var(--container-x);
}

.busca-inline {
  display: flex;
  align-items: center;
  gap: var(--e2);
  width: 100%;
  max-width: 400px;
}

.nav-institucional ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e1) var(--e5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-institucional li { margin: 0; }

.nav-institucional a {
  color: var(--tinta-suave);
  font-size: var(--fs-mini);
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
}
.nav-institucional a:hover { color: var(--link); text-decoration: underline; }
.nav-institucional a.ativo { color: var(--marca); font-weight: 700; }

/* ==========================================================================
   MENU LATERAL (MOBILE)
   ========================================================================== */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(15, 42, 61, .5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: opacity var(--transicao);
}

.menu-lateral {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 86vw;
  height: 100%;
  background: var(--fundo);
  border-radius: var(--r2) 0 0 var(--r2);
  box-shadow: var(--sombra-3);
  z-index: 100;
  padding: var(--e5) var(--e6) var(--e8);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--transicao);
  visibility: hidden;
}
.menu-lateral.aberto { transform: translateX(0); visibility: visible; }

.menu-lateral-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--linha);
  margin-bottom: var(--e4);
}

.menu-lateral-titulo {
  font-size: var(--fs-medio);
  font-weight: 800;
  color: var(--marca);
}

.busca-lateral {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin-bottom: var(--e5);
}

.menu-lateral-secao {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: var(--e5) 0 var(--e2);
}

.menu-lateral ul {
  list-style: none;
  margin: 0 0 var(--e2);
  padding: 0;
}
.menu-lateral li { margin: 0; }

/* Area de toque de 44px, sem linhas divisorias rigidas: o realce vem
   de um leve deslocamento e um fundo suave no hover. */
.menu-lateral li a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--e2);
  border-radius: var(--r1);
  color: var(--tinta);
  font-size: var(--fs-pequeno);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transicao), color var(--transicao), padding var(--transicao);
}
.menu-lateral li a:hover {
  background: var(--marca-fraca);
  color: var(--link);
  padding-left: var(--e4);
}

/* ==========================================================================
   RODAPE
   ========================================================================== */

.rodape {
  background: var(--marca);
  color: var(--invertido);
  padding: var(--e8) 0 var(--e6);
}

.rodape-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: var(--e7);
  padding-bottom: var(--e6);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.rodape-col-marca { min-width: 0; }

.rodape-marca {
  display: flex;
  align-items: center;
  gap: var(--e3);
  color: var(--invertido);
  text-decoration: none;
  font-size: var(--fs-medio);
  font-weight: 800;
  line-height: 1;
  margin-bottom: var(--e4);
}
.rodape-marca:hover,
.rodape-marca:focus-visible { color: var(--invertido); text-decoration: none; }

.rodape-marca img {
  width: 36px;
  height: 36px;
  border-radius: var(--r1);
  background: var(--invertido);
  object-fit: cover;
}

.rodape-texto {
  font-size: var(--fs-pequeno);
  color: var(--invertido);
  opacity: .85;
  max-width: 44ch;
  margin: 0 0 var(--e3);
}

.rodape-contato {
  margin: 0;
  font-size: var(--fs-pequeno);
}

/* Titulos das colunas de links: mesma linha de base da marca acima
   (mesmo margin-bottom e line-height 1), mesma altura de partida no grid. */
.rodape-titulo {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--invertido);
  opacity: .72;
  line-height: 1;
  margin: 0 0 var(--e4);
}

.rodape-col ul { list-style: none; margin: 0; padding: 0; }
.rodape-col li { margin: 0 0 var(--e3); }

.rodape-col li a {
  color: var(--invertido);
  font-size: var(--fs-pequeno);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  opacity: .85;
  transition: opacity var(--transicao), text-decoration-color var(--transicao);
}
.rodape-col li a:hover {
  color: var(--invertido);
  opacity: 1;
  text-decoration-color: var(--invertido);
}

.rodape-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding-top: var(--e5);
}

.rodape-copy {
  font-size: var(--fs-mini);
  color: var(--invertido);
  opacity: .8;
  margin: 0;
}

.btn-topo {
  font: inherit;
  font-size: var(--fs-mini);
  font-weight: 700;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--invertido);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: var(--r-pill);
  padding: var(--e2) var(--e5);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.btn-topo:hover {
  background: var(--invertido);
  color: var(--marca);
  border-color: var(--invertido);
}

/* ==========================================================================
   COOKIES
   ========================================================================== */

.cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 110;
  padding: 0 var(--container-x);
}

.cookies-caixa {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  background: var(--fundo);
  box-shadow: var(--sombra-3);
  border-radius: var(--r2) var(--r2) 0 0;
  padding: var(--e5) var(--e6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
}

.cookies-texto { flex: 1 1 260px; min-width: 260px; }

.cookies-titulo {
  font-size: var(--fs-pequeno);
  font-weight: 800;
  color: var(--marca);
  margin: 0 0 var(--e1);
}

.cookies-acoes {
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex-shrink: 0;
}
/* ==========================================================================
   CAMPOS E BOTOES
   altura de 42px em inputs e botoes via line-height + borda (nao "height"),
   para nao quebrar o <a class="botao">.
   ========================================================================== */

input[type="search"],
input[type="email"],
input[type="text"] {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: var(--fs-corpo);
  line-height: 40px;
  color: var(--tinta);
  background: var(--fundo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r1);
  padding: 0 var(--e4);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

input[type="search"]::placeholder,
input[type="email"]::placeholder,
input[type="text"]::placeholder {
  color: var(--tinta-suave);
  opacity: 1;
}

input[type="search"]:focus,
input[type="email"]:focus,
input[type="text"]:focus {
  border-color: var(--link);
  outline: none;
  box-shadow: var(--anel);
}

.botao,
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: var(--fs-mini);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 40px;
  color: var(--marca);
  background: var(--fundo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r1);
  padding: 0 var(--e5);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transicao), background var(--transicao),
    border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.botao:hover,
button[type="submit"]:hover {
  border-color: var(--marca);
  background: var(--marca-fraca);
  color: var(--marca);
  text-decoration: none;
}

/* .botao-solido precisa vencer button[type="submit"] em especificidade igual;
   a ordem das regras (este bloco vem depois) e o que decide o empate. */
.botao-solido,
button.botao-solido,
.busca-inline button[type="submit"] {
  background: var(--marca);
  border-color: var(--marca);
  color: var(--invertido);
  box-shadow: var(--sombra-1);
}
.botao-solido:hover,
button.botao-solido:hover,
.busca-inline button[type="submit"]:hover {
  background: var(--marca-escura);
  border-color: var(--marca-escura);
  color: var(--invertido);
  box-shadow: var(--sombra-2);
  transform: translateY(-1px);
}

.botao-mini {
  font-size: var(--fs-micro);
  line-height: 32px;
  padding: 0 var(--e3);
}

/* ==========================================================================
   TAG DE CATEGORIA
   ========================================================================== */

.tag-cat {
  display: inline-flex;
  align-items: center;
  align-self: flex-start; /* impede o esticamento dentro do card flex */
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--link);
  background: var(--link-fraco);
  border: none;
  border-radius: var(--r-pill);
  padding: var(--e1) var(--e3);
  margin-bottom: var(--e3);
  text-decoration: none;
  transition: color var(--transicao), background var(--transicao);
}
a.tag-cat:hover {
  color: var(--invertido);
  background: var(--link);
  text-decoration: none;
}
.tag-cat-estatica {
  color: var(--tinta-suave);
  background: var(--fundo-alt);
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  padding: var(--e9) 0 var(--e8);
  background: linear-gradient(180deg, var(--marca-fraca), var(--fundo));
  border-bottom: 1px solid var(--linha);
}

.hero-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--e7);
  align-items: start;
}

.hero-texto { min-width: 0; }

.hero-rotulo {
  font-size: var(--fs-mini);
  font-weight: 700;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--link);
  margin: 0 0 var(--e3);
}

.hero-titulo {
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 var(--e4);
}

.hero-desc {
  font-size: var(--fs-medio);
  color: var(--tinta-suave);
  max-width: 52ch;
  margin-bottom: var(--e6);
}

.hero-busca {
  display: flex;
  gap: var(--e3);
  max-width: 520px;
  margin-bottom: var(--e4);
}

.hero-num { font-size: var(--fs-pequeno); color: var(--tinta-suave); margin: 0; }
.hero-num strong { color: var(--marca); font-weight: 800; }

.hero-lado {
  position: relative;
  overflow: hidden; /* mantem a faixa superior dentro do border-radius */
  border: 1px solid var(--linha);
  border-radius: var(--r2);
  padding: var(--e5) var(--e6);
  background: var(--fundo);
  box-shadow: var(--sombra-1);
}
.hero-lado::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--marca);
}

.hero-lado-titulo {
  font-size: var(--fs-mini);
  font-weight: 700;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--marca);
  margin: 0 0 var(--e3);
}

.hero-lista { list-style: none; margin: 0; padding: 0; }
.hero-lista li { margin: 0; border-top: 1px solid var(--linha); }
.hero-lista li:first-child { border-top: 0; }
.hero-lista a {
  display: flex;
  align-items: center;
  padding: var(--e3) var(--e2);
  border-radius: var(--r1);
  font-size: var(--fs-corpo);
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
  transition: color var(--transicao), background var(--transicao);
}
.hero-lista a::after {
  content: "\203A";
  margin-left: auto;
  color: var(--tinta-suave);
}
.hero-lista a:hover {
  color: var(--link);
  background: var(--marca-fraca);
  text-decoration: none;
}

/* ==========================================================================
   SECOES
   ========================================================================== */

.secao { padding: var(--secao-y) 0; }
/* separador fino so entre secoes coladas; a primeira nao carrega borda */
.secao + .secao { border-top: 1px solid var(--linha); }

.secao-cabeca {
  position: relative;
  padding-top: var(--e4);
  margin-bottom: var(--e6);
}
.secao-cabeca::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--link);
}

.secao-titulo { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin: 0 0 var(--e2); }

.secao-sub { font-size: var(--fs-corpo); color: var(--tinta-suave); margin: 0; max-width: 68ch; }

.secao-acao { margin: var(--e6) 0 0; }

.vazio {
  color: var(--tinta-suave);
  border: 1px dashed var(--linha-forte);
  border-radius: var(--r2);
  padding: var(--e6);
  text-align: center;
  margin: 0;
}

/* ==========================================================================
   CABECA DE PAGINA
   ========================================================================== */

.cabeca-pagina {
  padding: var(--e7) 0 var(--e6);
  border-bottom: 1px solid var(--linha);
  margin-bottom: var(--e2);
}

.cabeca-rotulo {
  font-size: var(--fs-mini);
  font-weight: 700;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--link);
  margin: 0 0 var(--e3);
}

.cabeca-titulo {
  font-size: clamp(1.9rem, 4.2vw, 2.85rem);
  letter-spacing: -0.03em;
  margin: 0 0 var(--e3);
}

.cabeca-desc {
  font-size: var(--fs-medio);
  color: var(--tinta-suave);
  max-width: 74ch;
  margin: 0 0 var(--e3);
}

.cabeca-num { font-size: var(--fs-pequeno); color: var(--tinta-suave); margin: 0; }
.cabeca-num strong { color: var(--marca); }

.cabeca-datas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e5);
  font-size: var(--fs-mini);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: var(--e3) 0 0;
}

.busca-pagina {
  display: flex;
  gap: var(--e3);
  max-width: 540px;
  margin-top: var(--e5);
}

.busca-contagem { font-size: var(--fs-corpo); color: var(--tinta-suave); margin: 0 0 var(--e5); }
.busca-contagem strong { color: var(--marca); }

/* ==========================================================================
   TRILHA (breadcrumb)
   ========================================================================== */

.trilha { padding: var(--e4) 0 0; }
.trilha ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
}
.trilha li {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: var(--fs-mini);
  font-weight: 600;
  color: var(--tinta-suave);
}
.trilha li + li::before {
  content: "\203A";
  margin-right: var(--e2);
  color: var(--linha-forte);
}
.trilha a { color: var(--tinta-suave); text-decoration: none; }
.trilha a:hover { color: var(--link); text-decoration: underline; }

/* ==========================================================================
   PAGINACAO
   ========================================================================== */

.paginacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  margin: var(--e7) 0 var(--e3);
  padding-top: var(--e6);
  border-top: 1px solid var(--linha);
}

.paginacao a,
.pag-atual,
.pag-inativo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--e3);
  font-size: var(--fs-pequeno);
  font-weight: 700;
  color: var(--tinta);
  background: var(--fundo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r1);
  text-decoration: none;
  transition: color var(--transicao), background var(--transicao), border-color var(--transicao);
}
.paginacao a:hover {
  border-color: var(--link);
  color: var(--link);
  background: var(--link-fraco);
  text-decoration: none;
}

.pag-atual { background: var(--marca); border-color: var(--marca); color: var(--invertido); }
.pag-inativo { color: var(--tinta-suave); border-color: var(--linha); opacity: .6; }
.pag-nav { min-width: 76px; }
.pag-reticencia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  color: var(--tinta-suave);
  padding: 0 var(--e1);
}
.pag-info { font-size: var(--fs-mini); color: var(--tinta-suave); margin: var(--e2) 0 0; }

/* ==========================================================================
   AVISO
   ========================================================================== */

.aviso {
  font-size: var(--fs-pequeno);
  color: var(--tinta-suave);
  background: var(--fundo-alt);
  border-left: 3px solid var(--link);
  border-radius: var(--r2);
  padding: var(--e3) var(--e4);
  margin: var(--e4) 0 0;
  max-width: none;
}
.aviso strong { color: var(--marca); }
.aviso-ia { margin: var(--e6) 0; }
/* ==========================================================================
   CARDS
   ========================================================================== */

.grade-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--e5);
}

.card {
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--r2);
  box-shadow: var(--sombra-1);
  padding: var(--e5);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.card:hover {
  border-color: var(--marca-media);
  box-shadow: var(--sombra-2);
  transform: translateY(-2px);
}

/* o destaque ocupa duas colunas, mas mantem o mesmo padding do card
   comum para nao desalinhar a grade */
.card-destaque { grid-column: span 2; }

.card-titulo {
  font-size: var(--fs-grande);
  margin: 0 0 var(--e2);
  letter-spacing: -0.022em;
}
.card-destaque .card-titulo { font-size: 1.5rem; }

.card-titulo a { color: var(--marca); text-decoration: none; }
.card-titulo a:hover { color: var(--link); text-decoration: none; }

/* cresce para empurrar a meta ate o rodape do card */
.card-resumo {
  font-size: var(--fs-pequeno);
  color: var(--tinta-suave);
  margin: 0 0 var(--e4);
  flex: 1;
}
.card-destaque .card-resumo { font-size: var(--fs-corpo); }

/* ancorado no rodape do card - garante que todas as metas da mesma
   fileira fiquem na mesma altura, mesmo com resumos de tamanhos diferentes */
.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--e2);
  margin: 0;
  margin-top: auto;
  padding-top: var(--e3);
  border-top: 1px solid var(--linha-sutil);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.card-meta span { display: inline-flex; align-items: center; }
.card-meta span + span::before {
  content: "\00b7";
  margin-right: var(--e2);
  color: var(--marca-media);
  font-weight: 700;
}

/* ==========================================================================
   SELETOR DE CATEGORIAS
   ========================================================================== */

.seletor-cat {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  padding: var(--e4) 0;
  margin-bottom: var(--e1);
}

.seletor-cat a {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  height: 36px;
  font-size: var(--fs-mini);
  font-weight: 700;
  color: var(--tinta);
  background: var(--fundo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-pill);
  padding: 0 var(--e4);
  text-decoration: none;
  transition: color var(--transicao), background var(--transicao), border-color var(--transicao);
}
.seletor-cat a:hover { border-color: var(--link); color: var(--link); text-decoration: none; }
.seletor-cat a.ativo {
  background: var(--marca);
  border-color: var(--marca);
  color: var(--invertido);
}

.seletor-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--tinta-suave);
  background: var(--marca-fraca);
  border-radius: var(--r-pill);
  padding: var(--e1) var(--e2);
  line-height: 1;
}
.seletor-cat a.ativo .seletor-num {
  color: var(--invertido);
  background: rgba(255, 255, 255, .22);
}

.seletor-cat-compacto { flex-direction: column; padding: 0; margin: 0; gap: var(--e2); }
.seletor-cat-compacto a { width: 100%; justify-content: flex-start; }
.seletor-cat-compacto .seletor-num { margin-left: auto; }

/* ==========================================================================
   CARTOES DE CATEGORIA
   ========================================================================== */

.cat-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--e5);
}

.cat-cartao {
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--r2);
  box-shadow: var(--sombra-1);
  padding: var(--e5);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.cat-cartao:hover {
  border-color: var(--marca-media);
  box-shadow: var(--sombra-2);
  transform: translateY(-2px);
}

.cat-cartao h2, .cat-cartao h3 { font-size: var(--fs-grande); margin: 0 0 var(--e2); }
.cat-cartao h2 a, .cat-cartao h3 a { color: var(--marca); text-decoration: none; }
.cat-cartao h2 a:hover, .cat-cartao h3 a:hover { color: var(--link); }

.cat-cartao-titulo { font-size: var(--fs-pequeno); font-weight: 700; color: var(--tinta); margin: 0 0 var(--e2); }
.cat-cartao p { font-size: var(--fs-pequeno); color: var(--tinta-suave); }

/* ancorado no rodape do cartao para os links de toda a fileira alinharem */
.cat-cartao-link { margin: var(--e2) 0 0; margin-top: auto; padding-top: var(--e3); font-size: var(--fs-mini); font-weight: 700; }

/* ==========================================================================
   LISTA SIMPLES (recentes)
   ========================================================================== */

.lista-simples { list-style: none; margin: 0; padding: 0; }

.lista-simples li {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr auto;
  gap: var(--e5);
  align-items: center;
  padding: var(--e4) 0;
  padding-inline: var(--e3);
  margin: 0;
  margin-inline: calc(var(--e3) * -1);
  border-bottom: 1px solid var(--linha-sutil);
  border-radius: var(--r1);
  transition: background var(--transicao);
}
.lista-simples li:hover { background: var(--marca-fraca); }
.lista-simples li:last-child { border-bottom: 0; }

.lista-simples-nome { font-size: var(--fs-medio); font-weight: 800; color: var(--marca); text-decoration: none; letter-spacing: -0.02em; }
.lista-simples-nome:hover { color: var(--link); text-decoration: none; }
.lista-simples-desc { font-size: var(--fs-pequeno); color: var(--tinta-suave); }
.lista-simples-data {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--tinta-suave);
  white-space: nowrap;
}

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */

.newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--e7);
  align-items: center;
  background: var(--marca);
  border-radius: var(--r3);
  box-shadow: var(--sombra-2);
  padding: var(--e7) var(--e8);
}

.newsletter-titulo { color: var(--invertido); font-size: 1.5rem; margin: 0 0 var(--e2); }
.newsletter-texto p { color: var(--invertido); opacity: .88; margin: 0; font-size: var(--fs-corpo); }

.newsletter-campos { display: flex; gap: var(--e3); }
.newsletter-campos input[type="email"] {
  background: var(--marca-escura);
  border: 1px solid rgba(255, 255, 255, .3);
  color: var(--invertido);
}
.newsletter-campos input[type="email"]::placeholder { color: rgba(255, 255, 255, .6); }
.newsletter-campos input[type="email"]:focus { border-color: var(--invertido); }
.newsletter-campos .botao-solido {
  background: var(--invertido);
  border-color: var(--invertido);
  color: var(--marca);
}
.newsletter-campos .botao-solido:hover { background: var(--fundo-alt); border-color: var(--fundo-alt); color: var(--marca); }

.newsletter-aviso { color: var(--invertido); opacity: .78; font-size: var(--fs-mini); margin: var(--e3) 0 0; }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq-lista { border-top: 0; }

.faq-item {
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--r2);
  margin-bottom: var(--e3);
  overflow: hidden;
}
.faq-item:last-child { margin-bottom: 0; }

.faq-pergunta {
  display: flex;
  align-items: center;
  gap: var(--e3);
  font-size: var(--fs-medio);
  font-weight: 700;
  color: var(--marca);
  cursor: pointer;
  padding: var(--e4) var(--e5);
  list-style: none;
  transition: background var(--transicao), color var(--transicao);
}
.faq-pergunta::-webkit-details-marker { display: none; }
.faq-pergunta::after {
  content: "-";
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--link-fraco);
  font-size: 1rem;
  font-weight: 700;
  color: var(--link);
}
.faq-item:not([open]) .faq-pergunta::after { content: "+"; }
.faq-item[open] .faq-pergunta { background: var(--fundo-alt); }
.faq-pergunta:hover { color: var(--link); }

.faq-resposta { padding: 0 var(--e5) var(--e4); }
.faq-resposta p { color: var(--tinta-suave); margin: 0; max-width: 82ch; margin-top:10px; }

/* ==========================================================================
   CAIXA DE CONTATO
   ========================================================================== */

.caixa-contato {
  position: relative;
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--r2);
  box-shadow: var(--sombra-1);
  padding: var(--e6);
  margin: var(--e7) 0;
  overflow: hidden;
}
.caixa-contato::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--marca);
}

.caixa-contato h2 { font-size: var(--fs-grande); margin: 0 0 var(--e4); }
.caixa-contato-acao { margin: var(--e4) 0 0; }
/* ==========================================================================
   LAYOUT DE ARTIGO
   ========================================================================== */

.layout-artigo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--lateral-l);
  gap: var(--coluna-gap);
  align-items: start;
  padding-bottom: var(--secao-y);
}

.artigo, .artigo-inst { min-width: 0; }

.artigo-cabeca { padding: var(--e6) 0 var(--e2); }

.artigo-titulo {
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  letter-spacing: -0.03em;
  margin: 0 0 var(--e4);
}

.artigo-resumo {
  font-size: var(--fs-medio);
  line-height: 1.55;
  color: var(--tinta-suave);
  border-left: 3px solid var(--link);
  padding-left: var(--e5);
  max-width: 70ch;
  margin: 0 0 var(--e5);
}

.artigo-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e2) var(--e5);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--tinta-suave);
  padding: var(--e3) 0;
  border-top: 1px solid var(--linha-sutil);
  border-bottom: 1px solid var(--linha-sutil);
}

.artigo-meta span + span::before {
  content: "\00b7";
  display: inline-block;
  margin-right: var(--e5);
  color: var(--linha-forte);
}

.artigo-meta-autor a { color: var(--marca); }
.artigo-meta-autor a:hover, .artigo-meta-autor a:focus-visible { color: var(--link); }

/* ==========================================================================
   ACOES
   ========================================================================== */

.acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  padding-top: var(--e4);
}

.acoes-aviso {
  font-size: var(--fs-mini);
  font-weight: 700;
  color: var(--link);
}

.acoes-redes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  margin-top: var(--e4);
  padding: var(--e4);
  background: var(--fundo-alt);
  border: 1px solid var(--linha);
  border-radius: var(--r2);
}

.acoes-redes-titulo {
  width: 100%;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0 0 var(--e1);
}

/* ==========================================================================
   IMAGEM SOCIAL GERADA DINAMICAMENTE
   ========================================================================== */

.artigo-imagem {
  margin: var(--e6) 0 0;
  padding: 0;
}

.artigo-imagem img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r2);
  border: 1px solid var(--linha);
  box-shadow: var(--sombra-1);
}

.artigo-imagem figcaption {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--e2);
}

/* ==========================================================================
   FICHA E ÍNDICE
   ========================================================================== */

.ficha {
  position: relative;
  overflow: hidden;
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--r2);
  box-shadow: var(--sombra-1);
  padding: var(--e6);
  margin: var(--e7) 0;
}

.ficha::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--marca);
}

.ficha-titulo {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--marca);
  margin: 0 0 var(--e4);
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--linha-sutil);
}

.indice {
  background: var(--fundo-alt);
  border: 1px solid var(--linha);
  border-radius: var(--r2);
  padding: var(--e5) var(--e6);
  margin: var(--e7) 0;
}

.indice-titulo {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--marca);
  margin: 0 0 var(--e3);
}

.indice ol {
  margin: 0;
  padding-left: 1.1rem;
  columns: 2;
  column-gap: var(--e7);
}

.indice li {
  font-size: var(--fs-pequeno);
  font-weight: 600;
  break-inside: avoid;
}

.indice li::marker { color: var(--marca-media); }

.indice a:hover, .indice a:focus-visible { color: var(--link); }

/* ==========================================================================
   PROSA
   ========================================================================== */

.prosa { padding-top: var(--e1); }

.prosa section {
  padding: var(--e7) 0;
  border-top: 1px solid var(--linha-sutil);
}

.prosa section:first-child {
  border-top: 0;
  padding-top: var(--e3);
}

.prosa h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  letter-spacing: -0.024em;
  margin: 0 0 var(--e3);
}

.prosa h3 {
  font-size: var(--fs-medio);
  font-weight: 700;
  color: var(--tinta);
  margin: var(--e6) 0 var(--e2);
}

.prosa p, .prosa li { max-width: 74ch; }
.prosa p { color: var(--tinta-suave); }
.prosa li { color: var(--tinta-suave); }
.prosa strong { color: var(--tinta); }

/* ==========================================================================
   DADOS (dl)
   ========================================================================== */

.dados { margin: 0; }

.dados-linha {
  display: grid;
  grid-template-columns: minmax(120px, 190px) 1fr;
  gap: var(--e5);
  align-items: baseline;
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--linha-sutil);
}
.dados-linha:last-child { border-bottom: 0; }

.dados dt {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--marca);
}

.dados dd {
  margin: 0;
  font-size: var(--fs-corpo);
  color: var(--tinta);
}

/* ==========================================================================
   TABELAS
   ========================================================================== */

.tabela-envolvente {
  overflow-x: auto;
  border: 1px solid var(--linha);
  border-radius: var(--r2);
  margin: 0 0 var(--e5);
}

.tabela {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-pequeno);
  min-width: 320px;
}

.tabela th {
  text-align: left;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--marca);
  background: var(--marca-fraca);
  padding: var(--e3) var(--e4);
  white-space: nowrap;
}

.tabela th:first-child { border-top-left-radius: var(--r2); }
.tabela th:last-child { border-top-right-radius: var(--r2); }

.tabela td {
  padding: var(--e3) var(--e4);
  border-top: 1px solid var(--linha-sutil);
  color: var(--tinta);
}

.tabela tbody tr:nth-child(even) { background: var(--fundo-alt); }

/* ==========================================================================
   BARRAS
   ========================================================================== */

.barras { margin: 0 0 var(--e5); }

.barra-linha {
  display: grid;
  grid-template-columns: 72px 1fr 88px;
  align-items: center;
  gap: var(--e4);
  padding: var(--e2) 0;
}

.barra-rotulo {
  font-size: var(--fs-mini);
  font-weight: 700;
  color: var(--marca);
}

.barra-trilho {
  display: block;
  height: 10px;
  background: var(--fundo-alt);
  border: 1px solid var(--linha);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.barra-preenchida {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--marca), var(--link));
}

.barra-valor {
  font-size: var(--fs-pequeno);
  font-weight: 600;
  color: var(--tinta-suave);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   LISTAS ESPECIFICAS
   ========================================================================== */

.lista-raiz strong { color: var(--marca); }

.lista-famosos {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lista-famosos li {
  margin: 0;
  max-width: none;
  padding: var(--e4) 0;
  border-bottom: 1px solid var(--linha-sutil);
}
.lista-famosos li:last-child { border-bottom: 0; }

.famoso-nome {
  font-size: var(--fs-medio);
  font-weight: 700;
  color: var(--marca);
  margin: 0 0 var(--e1);
}

.famoso-meta {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0 0 var(--e2);
}

.lista-nomes-rel {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}

.lista-nomes-rel li {
  margin: 0;
  max-width: none;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--linha);
  border-radius: var(--r-pill);
  padding: var(--e2) var(--e4);
  font-size: var(--fs-pequeno);
  font-weight: 600;
  transition: background var(--transicao), border-color var(--transicao);
}
.lista-nomes-rel li:hover { background: var(--marca-fraca); }

.rel-tipo {
  display: inline-block;
  margin-left: var(--e2);
  padding-left: var(--e2);
  border-left: 1px solid var(--linha);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* ==========================================================================
   REFERENCIAS
   ========================================================================== */

.referencias {
  padding: var(--e7) 0;
  border-top: 1px solid var(--linha-sutil);
}

.referencias h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  letter-spacing: -0.024em;
  margin: 0 0 var(--e3);
}

.referencias ol { padding-left: 1.2rem; }

.referencias li {
  font-size: var(--fs-pequeno);
  color: var(--tinta-suave);
  margin-bottom: var(--e2);
}

.ref-autor, .ref-data {
  display: inline-block;
  margin-left: var(--e2);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* ==========================================================================
   AUTOR
   ========================================================================== */

.autor-box {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--e5);
  background: var(--fundo-alt);
  border-radius: var(--r2);
  box-shadow: var(--sombra-1);
  padding: var(--e6);
  margin: var(--e7) 0;
}

.autor-foto {
  width: 64px;
  height: 64px;
  border-radius: var(--r-pill);
  border: 2px solid var(--fundo);
  box-shadow: var(--sombra-1);
  object-fit: cover;
}

.autor-rotulo {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0 0 var(--e1);
}

.autor-nome { font-size: var(--fs-grande); font-weight: 800; margin: 0 0 var(--e1); }
.autor-nome a { color: var(--marca); }
.autor-nome a:hover, .autor-nome a:focus-visible { color: var(--link); }

.autor-cargo {
  font-size: var(--fs-pequeno);
  font-weight: 600;
  color: var(--tinta-suave);
  margin: 0 0 var(--e3);
}

.autor-bio { font-size: var(--fs-corpo); color: var(--tinta-suave); margin: 0 0 var(--e3); }

.autor-tags {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--marca);
  margin: 0 0 var(--e3);
}

.autor-link { font-size: var(--fs-pequeno); font-weight: 700; margin: 0; }

.autor-perfil {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: var(--e6);
  background: var(--fundo-alt);
  border-radius: var(--r2);
  box-shadow: var(--sombra-1);
  padding: var(--e6);
  margin: var(--e7) 0;
}

.autor-perfil-foto {
  width: 104px;
  height: 104px;
  border-radius: var(--r-pill);
  border: 2px solid var(--fundo);
  box-shadow: var(--sombra-1);
  object-fit: cover;
}

.autor-perfil-nome { font-size: var(--fs-grande); font-weight: 800; color: var(--marca); margin: 0 0 var(--e1); }
.autor-perfil-cargo { font-size: var(--fs-pequeno); font-weight: 600; color: var(--tinta-suave); margin: 0 0 var(--e3); }
.autor-perfil-bio { font-size: var(--fs-corpo); color: var(--tinta-suave); margin: 0; }

/* ==========================================================================
   NAVEGACAO ENTRE POSTS
   ========================================================================== */

.nav-posts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e4);
  margin: var(--e7) 0;
}

.nav-post {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 78px;
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--r2);
  box-shadow: var(--sombra-1);
  padding: var(--e5);
  transition: box-shadow var(--transicao), transform var(--transicao), border-color var(--transicao);
}
.nav-post:hover, .nav-post:focus-visible {
  box-shadow: var(--sombra-2);
  transform: translateY(-2px);
  text-decoration: none;
}

.nav-post-prox { align-items: flex-end; text-align: right; }
.nav-post-vazio { background: var(--fundo-alt); box-shadow: none; }

.nav-post-rotulo {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: var(--e2);
}

.nav-post-nome {
  display: block;
  font-size: var(--fs-medio);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--marca);
}
.nav-post:hover .nav-post-nome { color: var(--link); }

/* ==========================================================================
   LATERAL
   ========================================================================== */

.lateral {
  min-width: 0;
  position: sticky;
  top: 88px;
  align-self: start;
}

.lateral-caixa {
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--r2);
  box-shadow: var(--sombra-1);
  padding: var(--e5);
  margin-bottom: var(--e4);
}
.lateral-caixa:last-child { margin-bottom: 0; }

.lateral-titulo {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--marca);
  margin: 0 0 var(--e3);
  padding-bottom: var(--e2);
  border-bottom: 1px solid var(--linha-sutil);
}

.lateral-lista { list-style: none; margin: 0; padding: 0; }
.lateral-lista li { margin: 0; }

.lateral-lista a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--e2);
  margin: 0 calc(var(--e2) * -1);
  border-radius: var(--r1);
  font-size: var(--fs-pequeno);
  font-weight: 600;
  color: var(--tinta);
  transition: background var(--transicao), color var(--transicao);
}
.lateral-lista a:hover, .lateral-lista a:focus-visible {
  background: var(--marca-fraca);
  color: var(--link);
  text-decoration: none;
}
.lateral-lista a.ativo { color: var(--marca); font-weight: 800; background: var(--marca-fraca); }

.lateral .dados-linha {
  grid-template-columns: 1fr;
  gap: var(--e1);
  padding: var(--e2) 0;
}
/* ==========================================================================
   AJUSTES DE COSTURA
   Correcoes de contato entre as fatias: casos que so aparecem quando os
   blocos convivem no mesmo arquivo.
   ========================================================================== */

/* O cabecalho tem duas faixas (132px). Fixa-lo comeria um setimo da tela,
   e como a faixa de busca vem DEPOIS da linha da marca no HTML, um top
   negativo fixaria justamente a faixa errada. Fica no fluxo. */
.cabecalho { position: static; }

/* Link de e-mail sobre o fundo escuro do rodape: a cor de link padrao
   (azul) nao tem contraste ali. */
.rodape-contato a {
  color: var(--invertido);
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: .9;
}
.rodape-contato a:hover { color: var(--invertido); opacity: 1; }

/* O paragrafo do aviso de cookies herdaria a margem inferior do base. */
.cookies-texto p {
  margin: 0;
  font-size: var(--fs-mini);
  color: var(--tinta-suave);
  max-width: 82ch;
}

/* Marca um pouco maior que o corpo do menu, sem virar titulo. */
.marca-nome { font-size: 1.14rem; }

/* Rodape colado no fim da tela em paginas curtas (busca sem resultado,
   categoria com poucos nomes). Menu lateral, overlay e cookies sao
   posicionados fora do fluxo e nao entram na coluna flex. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > #conteudo { flex: 1 0 auto; }
body > .rodape { flex-shrink: 0; }

/* Com o cabecalho no fluxo, a lateral fixa so precisa de uma folga do topo. */
.lateral { top: var(--e6); }

/* A caixa do autor segue a mesma moldura dos demais cartoes. */
.autor-box, .autor-perfil { border: 1px solid var(--linha); }

/* O painel de compartilhamento e o unico bloco fora da grade de leitura;
   sem isso os botoes encostam na borda do artigo. */
.acoes-redes .botao { flex: 0 0 auto; }

/* Listas do artigo herdam a largura de leitura da prosa, menos as que
   sao grades ou pilulas. */
.lista-famosos, .lista-nomes-rel { max-width: none; }

/* Separador das linhas de meta: fica no fim do item anterior, e nao no
   inicio do proximo. Quando a linha quebra, a nova comeca com texto em
   vez de comecar com um ponto solto. */
.artigo-meta span + span::before,
.card-meta span + span::before { content: none; }

.artigo-meta span:not(:last-child)::after,
.card-meta span:not(:last-child)::after {
  content: "\00b7";
  color: var(--linha-forte);
  font-weight: 700;
}
.artigo-meta span:not(:last-child)::after { margin-left: var(--e5); }
.card-meta span:not(:last-child)::after { margin-left: var(--e2); }
/* ==========================================================================
   RESPONSIVO
   Consolidado no final: as fatias acima nascem fluidas (clamp, auto-fit,
   flex-wrap) e aqui ficam apenas as quebras estruturais de layout.
   ========================================================================== */

@media (max-width: 1080px) {
  :root {
    --coluna-gap: 32px;
    --lateral-l: 264px;
  }
}

@media (max-width: 900px) {
  :root {
    --secao-y: 34px;
    --container-x: 20px;
  }

  /* No mobile a navegacao inteira vive na sidebar. */
  .nav-desktop, .nav-institucional { display: none; }
  .btn-menu { display: inline-flex; }
  .busca-inline { max-width: none; }
  .cabecalho-busca-linha { justify-content: stretch; }

  .hero { padding: var(--e7) 0 var(--e7); }
  .hero-grade { grid-template-columns: 1fr; gap: var(--e6); }

  /* A lateral deixa de ser sticky quando vira rodape do artigo. */
  .layout-artigo { grid-template-columns: 1fr; gap: 0; }
  .lateral {
    position: static;
    padding-top: var(--e5);
    border-top: 1px solid var(--linha);
    margin-top: var(--e7);
  }

  .rodape-grade { grid-template-columns: 1fr 1fr; gap: var(--e6) var(--e7); }
  .rodape-col-marca { grid-column: 1 / -1; }

  .newsletter { grid-template-columns: 1fr; gap: var(--e5); padding: var(--e6); }

  .card-destaque { grid-column: span 1; }
  .card-destaque .card-titulo { font-size: 1.3rem; }
  .card-destaque .card-resumo { font-size: var(--fs-corpo); }

  .indice ol { columns: 1; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }

  :root {
    --container-x: 18px;
    --secao-y: 30px;
  }

  .cabecalho-linha { min-height: 60px; }
  .marca-slogan { display: none; }
  .marca-logo { width: 34px; height: 34px; }
  .marca-nome { font-size: 1.08rem; }

  /* Campo e botao empilhados ocupam a largura toda e continuam alinhados. */
  .hero-busca, .busca-pagina, .newsletter-campos { flex-direction: column; align-items: stretch; }
  .hero-busca .botao, .busca-pagina .botao, .newsletter-campos .botao-solido { width: 100%; }

  .lista-simples li { grid-template-columns: 1fr; gap: var(--e1); align-items: start; }
  .lista-simples-data { justify-self: start; }

  .grade-cards { grid-template-columns: 1fr; gap: var(--e4); }
  .cat-cartoes { grid-template-columns: 1fr; gap: var(--e4); }

  .dados-linha { grid-template-columns: 1fr; gap: var(--e1); }
  .lateral .dados-linha { grid-template-columns: 1fr; }

  .autor-box { grid-template-columns: 1fr; gap: var(--e4); }
  .autor-perfil { grid-template-columns: 1fr; gap: var(--e4); }

  .nav-posts { grid-template-columns: 1fr; }
  .nav-post-prox { text-align: left; }
  .nav-post-vazio { display: none; }

  .rodape-grade { grid-template-columns: 1fr; gap: var(--e6); }
  .rodape-base { flex-direction: column; align-items: flex-start; }

  /* Em coluna, o flex-basis de 260px viraria ALTURA minima do bloco de
     texto e esticaria o aviso ate um terco da tela. */
  .cookies-caixa { flex-direction: column; align-items: stretch; }
  .cookies-texto { flex: 0 0 auto; min-width: 0; }
  .cookies-acoes .botao { flex: 1; }

  .barra-linha { grid-template-columns: 56px 1fr 72px; gap: var(--e3); }
  .acoes .botao { flex: 1 1 auto; }

  /* No celular a meta do artigo sempre quebraria; empilhada em coluna ela
     fica alinhada pela esquerda e dispensa os separadores. */
  .artigo-meta { flex-direction: column; align-items: flex-start; gap: var(--e1); }
  .artigo-meta span:not(:last-child)::after { content: none; }
}

/* ==========================================================================
   IMPRESSAO
   ========================================================================== */

@media print {
  .cabecalho, .rodape, .cookies, .menu-lateral, .menu-overlay,
  .acoes, .acoes-redes, .nav-posts, .lateral, .trilha,
  .newsletter, .paginacao, .pular, .btn-topo { display: none !important; }

  body { font-size: 12pt; color: #000000; background: #FFFFFF; }
  .layout-artigo { grid-template-columns: 1fr; }
  .container { max-width: none; padding: 0; }
  .prosa section, .secao { break-inside: avoid; }
  a { color: #000000; text-decoration: none; }
  .artigo-titulo { font-size: 22pt; }
  .prosa h2 { font-size: 14pt; }

  /* Sombras e fundos nao imprimem bem: viram contorno. */
  .card, .cat-cartao, .ficha, .indice, .lateral-caixa, .autor-box, .caixa-contato,
  .faq-item, .tabela-envolvente {
    box-shadow: none !important;
    background: #FFFFFF !important;
    border: 1px solid #999999 !important;
  }
}

/* ==========================================================================
   PREFERENCIA DE MOVIMENTO REDUZIDO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .card:hover, .cat-cartao:hover, .nav-post:hover, .botao-solido:hover { transform: none; }
}