/*! ANUAGRO — folha de estilo */
/* ===== 00-fontes.css ===== */
/* ============================================================
   Fontes self-hosted — geradas por ferramentas/baixar-fontes.js
   Source Serif 4 e Archivo: SIL Open Font License (OFL).
   Nao editar a mao: rode o script novamente para regenerar.
   ============================================================ */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fontes/archivo-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fontes/archivo-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fontes/archivo-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fontes/archivo-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fontes/archivo-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fontes/archivo-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fontes/archivo-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fontes/archivo-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fontes/source-serif-4-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fontes/source-serif-4-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fontes/source-serif-4-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fontes/source-serif-4-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fontes/source-serif-4-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fontes/source-serif-4-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fontes/source-serif-4-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fontes/source-serif-4-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== 01-tokens.css ===== */
/* ============================================================
   ANUAGRO — Design tokens
   Verde institucional + laranja de destaque + neutros editoriais.
   O laranja e cor de acento (editoria, data, link, hover, numero),
   nunca cor de fundo dominante.
   ============================================================ */

:root {
  /* ---------- Paleta: verde institucional ---------- */
  --verde-900: #0e2e1e;
  --verde-800: #12492e;
  --verde-700: #17603c;
  --verde-600: #1e7a4c;
  --verde-500: #2a9663;
  --verde-200: #b9d5c4;
  --verde-100: #ddebe2;
  --verde-50: #eef5f0;

  /* ---------- Paleta: laranja de destaque ---------- */
  --laranja-800: #8f3809;
  --laranja-700: #b4470f;
  --laranja-600: #d4550f;
  --laranja-500: #e9660f;
  --laranja-400: #f5822e;
  --laranja-100: #fbe3d2;
  --laranja-50: #fdf1e7;

  /* ---------- Neutros ---------- */
  --grafite-900: #14171a;
  --grafite-800: #1e2226;
  --grafite-700: #33393f;
  --cinza-600: #5c666f;
  --cinza-500: #767f87;
  --cinza-400: #8c959d;
  --cinza-300: #c3c9cd;
  --cinza-200: #dce0e3;
  --cinza-100: #edeff1;
  --offwhite: #f7f6f2;
  --branco: #ffffff;

  /* ---------- Papeis semanticos ---------- */
  --cor-texto: var(--grafite-900);
  --cor-texto-medio: var(--grafite-700);
  --cor-texto-suave: var(--cinza-600);
  --cor-texto-tenue: var(--cinza-500);
  --cor-fundo: var(--branco);
  --cor-fundo-alt: var(--offwhite);
  --cor-fundo-escuro: var(--verde-900);
  --cor-marca: var(--verde-800);
  --cor-marca-forte: var(--verde-900);
  --cor-destaque: var(--laranja-500);
  --cor-destaque-forte: var(--laranja-700);
  --cor-borda: var(--cinza-200);
  --cor-borda-suave: var(--cinza-100);
  --cor-foco: var(--laranja-500);

  /* Tema do miniportal Agro e Escola: laranja assume o papel institucional. */
  --escola-primaria: var(--laranja-700);
  --escola-clara: var(--laranja-50);

  /* ---------- Tipografia ---------- */
  --fonte-titulo: 'Source Serif 4', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia,
    'Times New Roman', serif;
  --fonte-texto: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --fonte-ui: 'Archivo', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* Escala tipografica editorial (fluida entre 360px e 1440px) */
  --t-display: clamp(2.75rem, 1.6rem + 5.1vw, 6rem);
  --t-h1: clamp(2rem, 1.25rem + 3.3vw, 3.75rem);
  --t-h2: clamp(1.5rem, 1.15rem + 1.55vw, 2.5rem);
  --t-h3: clamp(1.25rem, 1.08rem + 0.75vw, 1.75rem);
  --t-h4: clamp(1.08rem, 1rem + 0.36vw, 1.3rem);
  --t-corpo-g: clamp(1.06rem, 1rem + 0.28vw, 1.22rem);
  --t-corpo: 1rem;
  --t-pequeno: 0.875rem;
  --t-micro: 0.78rem;
  --t-kicker: 0.72rem;

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-forte: 700;

  --altura-apertada: 1.08;
  --altura-titulo: 1.16;
  --altura-media: 1.4;
  --altura-texto: 1.72;

  /* ---------- Espacamento (base 4px) ---------- */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 2.5rem;
  --e-8: 3rem;
  --e-9: 4rem;
  --e-10: 5rem;
  --e-11: 6.5rem;
  --e-12: 8rem;

  /* Respiro vertical entre secoes — o portal e generoso em espaco branco. */
  --secao-y: clamp(3rem, 1.5rem + 5vw, 6rem);

  /* ---------- Layout ---------- */
  --largura-max: 1320px;
  --largura-conteudo: 1120px;
  --largura-texto: 42rem;
  --recuo-lateral: clamp(1.15rem, 0.6rem + 2.4vw, 3rem);
  --coluna-gap: clamp(1.25rem, 0.8rem + 1.6vw, 2.5rem);

  /* ---------- Formas ---------- */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 12px;
  --r-xl: 20px;
  --r-full: 999px;

  --sombra-sutil: 0 1px 2px rgba(20, 23, 26, 0.05);
  --sombra-card: 0 2px 14px rgba(20, 23, 26, 0.07);
  --sombra-alta: 0 18px 48px rgba(20, 23, 26, 0.16);

  /* ---------- Movimento ---------- */
  --transicao-rapida: 140ms cubic-bezier(0.4, 0, 0.2, 1);
  --transicao: 240ms cubic-bezier(0.4, 0, 0.2, 1);
  --transicao-lenta: 480ms cubic-bezier(0.22, 1, 0.36, 1);

  --z-base: 1;
  --z-flutuante: 40;
  --z-cabecalho: 60;
  --z-menu: 80;
  --z-overlay: 100;
}

/* Cores por editoria — usadas nos kickers e nas bordas de secao. */
[data-editoria='producao'],
[data-editoria='noticias'],
[data-editoria='cooperativismo'],
[data-editoria='tecnologia'],
[data-editoria='sustentabilidade'] {
  --cor-editoria: var(--verde-700);
}

[data-editoria='gente-do-agro'],
[data-editoria='eventos'] {
  --cor-editoria: var(--laranja-700);
}

[data-editoria='agro-e-escola'] {
  --cor-editoria: var(--escola-primaria);
}

/* ===== 02-base.css ===== */
/* ============================================================
   Base — reset moderado, tipografia de origem e superficies do navegador.
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Compensa o cabecalho fixo ao pular para ancoras. */
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: var(--t-corpo);
  line-height: var(--altura-media);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-forte);
  line-height: var(--altura-titulo);
  letter-spacing: -0.021em;
  /* Evita orfas em titulos editoriais. */
  text-wrap: balance;
}

p {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

input, textarea, select {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Numerais alinhados em tudo que e data, hora, contagem ou medida. */
time,
.numero,
.tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ---------- Superficies do navegador ---------- */

::selection {
  background: var(--laranja-100);
  color: var(--verde-900);
}

body {
  caret-color: var(--laranja-600);
  scrollbar-color: var(--cinza-300) var(--offwhite);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: var(--offwhite);
}

::-webkit-scrollbar-thumb {
  background: var(--cinza-300);
  border: 3px solid var(--offwhite);
  border-radius: var(--r-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--cinza-400);
}

/* Foco visivel e coerente com a marca, sem aparecer em clique de mouse. */
:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Sublinhado editorial: descolado da linha de base, espessura controlada. */
.link-texto,
.materia-corpo a {
  text-decoration: underline;
  text-decoration-color: var(--laranja-400);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
  transition: text-decoration-color var(--transicao-rapida), color var(--transicao-rapida);
}

.link-texto:hover,
.materia-corpo a:hover {
  color: var(--laranja-700);
  text-decoration-color: var(--laranja-700);
}

/* ---------- Acessibilidade ---------- */

.pular-para-conteudo {
  position: absolute;
  left: var(--e-4);
  top: var(--e-4);
  z-index: var(--z-overlay);
  transform: translateY(-200%);
  background: var(--verde-800);
  color: var(--branco);
  padding: var(--e-3) var(--e-5);
  border-radius: var(--r-md);
  font-family: var(--fonte-ui);
  font-size: var(--t-pequeno);
  font-weight: var(--peso-semi);
  transition: transform var(--transicao);
}

.pular-para-conteudo:focus {
  transform: translateY(0);
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== 03-layout.css ===== */
/* ============================================================
   Layout — container, grids e ritmo vertical das secoes.
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--recuo-lateral);
}

.container-estreito {
  width: 100%;
  max-width: var(--largura-conteudo);
  margin-inline: auto;
  padding-inline: var(--recuo-lateral);
}

.secao {
  padding-block: var(--secao-y);
}

.secao--compacta {
  padding-block: calc(var(--secao-y) * 0.6);
}

.secao--papel {
  background: var(--cor-fundo-alt);
}

.secao--escura {
  background: var(--verde-900);
  color: var(--branco);
}

.secao--escura .secao-titulo,
.secao--escura h2,
.secao--escura h3 {
  color: var(--branco);
}

/* Filete que separa secoes sem criar caixas. */
.secao--filete {
  border-top: 1px solid var(--cor-borda);
}

/* ---------- Cabecalho de secao ---------- */

.secao-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
  margin-bottom: var(--e-6);
  padding-bottom: var(--e-3);
  border-bottom: 2px solid var(--grafite-900);
}

.secao--escura .secao-topo {
  border-bottom-color: rgba(255, 255, 255, 0.35);
}

.secao-titulo {
  font-size: var(--t-h2);
  letter-spacing: -0.025em;
  margin: 0;
}

.secao-descricao {
  margin-top: var(--e-3);
  max-width: 56ch;
  color: var(--cor-texto-suave);
  font-size: var(--t-corpo-g);
  line-height: 1.55;
}

.secao-ver-todas {
  font-family: var(--fonte-ui);
  font-size: var(--t-micro);
  font-weight: var(--peso-semi);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--laranja-700);
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  white-space: nowrap;
  transition: gap var(--transicao-rapida), color var(--transicao-rapida);
}

.secao-ver-todas:hover {
  color: var(--laranja-800);
  gap: var(--e-3);
}

.secao--escura .secao-ver-todas {
  color: var(--laranja-400);
}

.secao-ver-todas .icone {
  width: 14px;
  height: 14px;
}

/* ---------- Grids editoriais ---------- */

.grade {
  display: grid;
  gap: var(--coluna-gap);
}

.grade--2 { grid-template-columns: repeat(2, 1fr); }
.grade--3 { grid-template-columns: repeat(3, 1fr); }
.grade--4 { grid-template-columns: repeat(4, 1fr); }

/* Reportagem principal + coluna de apoio. */
.grade--principal-apoio {
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  align-items: start;
}

/* Conteudo + trilho lateral (publicidade, mais lidas). */
.grade--com-trilho {
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
}

.trilho {
  position: sticky;
  top: 6.5rem;
  display: grid;
  gap: var(--e-6);
}

@media (max-width: 1024px) {
  .grade--4 { grid-template-columns: repeat(2, 1fr); }
  .grade--com-trilho,
  .grade--principal-apoio { grid-template-columns: minmax(0, 1fr); }
  .trilho { position: static; }
}

@media (max-width: 768px) {
  .grade--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .grade--2,
  .grade--3,
  .grade--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Revelacao na entrada ---------- */

.revelar {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 640ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 640ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--atraso, 0ms);
}

.revelar.visivel {
  opacity: 1;
  transform: none;
}

/* Sem JS ou com movimento reduzido, o conteudo ja nasce visivel. */
.sem-js .revelar,
.sem-observer .revelar {
  opacity: 1;
  transform: none;
}

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

/* ===== 04-cabecalho.css ===== */
/* ============================================================
   Cabecalho — barra utilitaria, masthead, navegacao, mega menu,
   menu mobile, busca e o ticker de ultimas.
   ============================================================ */

.cabecalho {
  position: relative;
  z-index: var(--z-cabecalho);
  background: var(--cor-fundo);
}

/* ---------- Barra utilitaria ---------- */

.barra-utilitaria {
  background: var(--verde-900);
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--fonte-ui);
  font-size: var(--t-micro);
}

.barra-utilitaria__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: 38px;
  padding-block: var(--e-2);
}

.barra-utilitaria__data {
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.barra-utilitaria__acoes {
  display: flex;
  align-items: center;
  gap: var(--e-5);
}

.barra-utilitaria__link {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  color: var(--branco);
  font-weight: var(--peso-medio);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color var(--transicao-rapida);
}

.barra-utilitaria__link:hover {
  color: var(--laranja-400);
}

.barra-utilitaria__social {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}

.barra-utilitaria__social a {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-full);
  color: rgba(255, 255, 255, 0.72);
  transition: color var(--transicao-rapida), background var(--transicao-rapida);
}

.barra-utilitaria__social a:hover {
  color: var(--branco);
  background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 860px) {
  .barra-utilitaria__data { display: none; }
  .barra-utilitaria__interno { justify-content: center; }
}

/* ---------- Masthead ---------- */

.masthead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--e-5);
  padding-block: clamp(var(--e-5), 3vw, var(--e-8));
}

.masthead__esquerda,
.masthead__direita {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}

.masthead__direita {
  justify-content: flex-end;
}

.masthead__marca {
  display: grid;
  justify-items: center;
  gap: var(--e-2);
  text-align: center;
}

/* O wordmark em texto foi substituído pelo SVG oficial da marca.
   Estilos da logo em 11-marca.css. */

.marca-assinatura {
  font-family: var(--fonte-ui);
  font-size: clamp(0.62rem, 0.5rem + 0.35vw, 0.78rem);
  font-weight: var(--peso-medio);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
  padding-left: 0.34em;
}

@media (max-width: 860px) {
  .masthead {
    grid-template-columns: auto 1fr auto;
    padding-block: var(--e-4);
  }
  .masthead__marca { justify-items: start; text-align: left; }
  .marca-assinatura { letter-spacing: 0.2em; }
}

/* ---------- Navegacao principal ---------- */

.nav-principal {
  border-top: 1px solid var(--cor-borda);
  border-bottom: 2px solid var(--grafite-900);
  background: var(--cor-fundo);
}

/* O container e o contexto de posicionamento dos mega menus: ancorados ao item,
   os menus das pontas estouravam a largura da janela e criavam scroll horizontal. */
.nav-principal .container {
  position: relative;
}

.nav-principal__interno {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(var(--e-3), 1.6vw, var(--e-6));
}

.nav-item {
  display: flex;
  align-items: center;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-4) var(--e-1);
  font-family: var(--fonte-ui);
  font-size: 0.83rem;
  font-weight: var(--peso-semi);
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--grafite-800);
  white-space: nowrap;
  transition: color var(--transicao-rapida);
}

/* Indicador ativo/hover: filete que cresce a partir do centro. */
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background: var(--laranja-500);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transicao) cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-item:hover .nav-link,
.nav-link:focus-visible,
.nav-link[aria-current='page'] {
  color: var(--verde-800);
}

.nav-item:hover .nav-link::after,
.nav-link:focus-visible::after,
.nav-link[aria-current='page']::after {
  transform: scaleX(1);
}

.nav-link[data-tema='escola'] {
  color: var(--laranja-700);
}

.nav-link__seta {
  width: 11px;
  height: 11px;
  opacity: 0.5;
  transition: transform var(--transicao-rapida);
}

.nav-item:hover .nav-link__seta {
  transform: rotate(180deg);
}

/* ---------- Mega menu ---------- */

.mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  /* 100% = largura do container, nunca da janela — mantem o menu dentro da grade. */
  width: min(100%, 940px);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-top: 3px solid var(--verde-800);
  box-shadow: var(--sombra-alta);
  padding: var(--e-6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
  z-index: var(--z-menu);
}

.nav-item:hover .mega,
.nav-item:focus-within .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.mega__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e-5) var(--e-6);
}

.mega__coluna-titulo {
  font-family: var(--fonte-ui);
  font-size: var(--t-kicker);
  font-weight: var(--peso-forte);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--laranja-700);
  margin-bottom: var(--e-3);
  padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--cor-borda);
}

.mega__lista {
  list-style: none;
  display: grid;
  gap: var(--e-2);
}

.mega__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  font-family: var(--fonte-ui);
  font-size: 0.86rem;
  color: var(--grafite-700);
  padding-block: 2px;
  transition: color var(--transicao-rapida), transform var(--transicao-rapida);
}

.mega__link:hover {
  color: var(--laranja-700);
  transform: translateX(3px);
}

.mega__contagem {
  font-size: var(--t-micro);
  color: var(--cinza-400);
  font-variant-numeric: tabular-nums;
}

.mega__destaque {
  border-left: 1px solid var(--cor-borda);
  padding-left: var(--e-6);
}

.mega__destaque-rotulo {
  font-family: var(--fonte-ui);
  font-size: var(--t-kicker);
  font-weight: var(--peso-forte);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--laranja-700);
  margin-bottom: var(--e-3);
  display: block;
}

.mega__destaque-titulo {
  font-size: 1.02rem;
  line-height: 1.3;
  margin-top: var(--e-3);
}

.mega__destaque:hover .mega__destaque-titulo {
  color: var(--laranja-700);
}

.mega__destaque img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-sm);
}

@media (max-width: 1100px) {
  /* Abaixo do limite, o menu vira faixa rolavel. A mascara na borda direita
     sinaliza que ha mais itens, em vez de cortar a palavra no meio. */
  .nav-principal .container {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 42px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 42px), transparent);
  }

  .nav-principal__interno {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    padding-right: var(--e-8);
  }

  .nav-principal__interno::-webkit-scrollbar { display: none; }
  .nav-item { scroll-snap-align: start; }
  .mega { display: none; }
  .nav-link__seta { display: none; }
}

/* ---------- Cabecalho compacto (sticky) ---------- */

.cabecalho-fixo {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-cabecalho);
  display: flex;
  align-items: center;
  gap: var(--e-5);
  min-height: 60px;
  padding-block: var(--e-2);
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--cor-borda);
  box-shadow: 0 4px 20px rgba(20, 23, 26, 0.07);
  transform: translateY(-102%);
  transition: transform var(--transicao) cubic-bezier(0.16, 1, 0.3, 1);
}

.cabecalho-fixo.visivel {
  transform: translateY(0);
}

/* Linha interna: herda o recuo lateral do .container.
   Antes isso era estilo inline com padding:0, que zerava o recuo e
   grudava a marca na borda da janela. */
.cabecalho-fixo__interno {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  width: 100%;
}

.cabecalho-fixo__acoes {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  margin-left: auto;
}

.cabecalho-fixo__nav {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  margin-left: auto;
  overflow: hidden;
}

.cabecalho-fixo__link {
  font-family: var(--fonte-ui);
  font-size: 0.78rem;
  font-weight: var(--peso-semi);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--grafite-700);
  white-space: nowrap;
  transition: color var(--transicao-rapida);
}

.cabecalho-fixo__link:hover {
  color: var(--laranja-700);
}

/* Barra de progresso de leitura — so aparece nas paginas de materia. */
.progresso-leitura {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--progresso, 0));
  transform-origin: left;
  background: var(--laranja-500);
}

@media (max-width: 900px) {
  .cabecalho-fixo__nav { display: none; }
}

/* ---------- Botoes de icone ---------- */

.botao-icone {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  color: var(--grafite-800);
  transition: background var(--transicao-rapida), color var(--transicao-rapida);
}

.botao-icone:hover {
  background: var(--cinza-100);
  color: var(--verde-800);
}

.botao-icone .icone {
  width: 20px;
  height: 20px;
}

.botao-menu {
  display: none;
}

@media (max-width: 1100px) {
  .botao-menu { display: grid; }
}

/* ---------- Ticker de ultimas ---------- */

.ticker {
  display: flex;
  align-items: stretch;
  background: var(--verde-800);
  color: var(--branco);
  overflow: hidden;
}

.ticker__rotulo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  flex-shrink: 0;
  padding: var(--e-3) var(--e-5) var(--e-3) var(--recuo-lateral);
  background: var(--laranja-600);
  font-family: var(--fonte-ui);
  font-size: var(--t-kicker);
  font-weight: var(--peso-forte);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Recorte diagonal — assinatura do bloco, herdada da linguagem de jornal. */
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  padding-right: calc(var(--e-5) + 14px);
}

.ticker__ponto {
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: var(--branco);
  animation: pulso 2.4s ease-in-out infinite;
}

@keyframes pulso {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.28; }
}

.ticker__viewport {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

.ticker__trilha {
  display: flex;
  align-items: center;
  gap: var(--e-6);
  white-space: nowrap;
  padding-left: var(--e-5);
  animation: correr 46s linear infinite;
  will-change: transform;
}

.ticker:hover .ticker__trilha,
.ticker:focus-within .ticker__trilha {
  animation-play-state: paused;
}

@keyframes correr {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  font-family: var(--fonte-ui);
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.94);
  transition: color var(--transicao-rapida);
}

.ticker__item:hover {
  color: var(--laranja-400);
}

.ticker__hora {
  font-size: var(--t-micro);
  font-weight: var(--peso-forte);
  color: var(--laranja-400);
  letter-spacing: 0.05em;
}

@media (prefers-reduced-motion: reduce) {
  .ticker__trilha { animation: none; }
  .ticker__viewport { overflow-x: auto; }
}

@media (max-width: 560px) {
  .ticker__rotulo {
    font-size: 0.62rem;
    padding-inline: var(--recuo-lateral) calc(var(--e-4) + 14px);
  }
}

/* ===== 05-navegacao-mobile.css ===== */
/* ============================================================
   Navegacao mobile, overlay de busca e o atalho flutuante.
   ============================================================ */

/* ---------- Painel mobile ---------- */

.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  visibility: hidden;
  pointer-events: none;
}

.menu-mobile.aberto {
  visibility: visible;
  pointer-events: auto;
}

.menu-mobile__fundo {
  position: absolute;
  inset: 0;
  background: rgba(14, 46, 30, 0.55);
  opacity: 0;
  transition: opacity var(--transicao);
}

.menu-mobile.aberto .menu-mobile__fundo {
  opacity: 1;
}

.menu-mobile__painel {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: min(92vw, 420px);
  background: var(--cor-fundo);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transicao-lenta);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu-mobile.aberto .menu-mobile__painel {
  transform: translateX(0);
}

.menu-mobile__topo {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
  background: var(--verde-900);
  color: var(--branco);
}

.menu-mobile__topo .botao-icone {
  color: var(--branco);
}

.menu-mobile__topo .botao-icone:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--branco);
}

.menu-mobile__busca {
  padding: var(--e-4) var(--e-5) 0;
}

.menu-mobile__corpo {
  padding: var(--e-4) var(--e-5) var(--e-9);
}

.menu-mobile__lista {
  list-style: none;
  display: grid;
}

.menu-mobile__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--cor-borda-suave);
  font-family: var(--fonte-ui);
  font-size: 1.02rem;
  font-weight: var(--peso-semi);
  color: var(--grafite-900);
  transition: color var(--transicao-rapida);
}

.menu-mobile__link:hover,
.menu-mobile__link[aria-current='page'] {
  color: var(--laranja-700);
}

.menu-mobile__link .icone {
  width: 15px;
  height: 15px;
  color: var(--cinza-400);
}

/* Grupos secundarios em acordeao. */
.menu-mobile__grupo {
  border-bottom: 1px solid var(--cor-borda-suave);
}

.menu-mobile__grupo-botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--e-3);
  padding: var(--e-4) 0;
  font-family: var(--fonte-ui);
  font-size: 1.02rem;
  font-weight: var(--peso-semi);
  color: var(--grafite-900);
  text-align: left;
}

.menu-mobile__grupo-botao .icone {
  width: 16px;
  height: 16px;
  color: var(--cinza-400);
  transition: transform var(--transicao);
}

.menu-mobile__grupo-botao[aria-expanded='true'] .icone {
  transform: rotate(180deg);
  color: var(--laranja-600);
}

.menu-mobile__sublista {
  list-style: none;
  display: grid;
  gap: var(--e-1);
  padding: 0 0 var(--e-4) var(--e-3);
}

.menu-mobile__sublista[hidden] {
  display: none;
}

.menu-mobile__sublink {
  display: block;
  padding: var(--e-2) 0;
  font-family: var(--fonte-ui);
  font-size: 0.9rem;
  color: var(--cor-texto-suave);
  transition: color var(--transicao-rapida), transform var(--transicao-rapida);
}

.menu-mobile__sublink:hover {
  color: var(--laranja-700);
  transform: translateX(3px);
}

.menu-mobile__rodape {
  margin-top: var(--e-6);
  padding-top: var(--e-5);
  border-top: 2px solid var(--grafite-900);
  display: grid;
  gap: var(--e-4);
}

/* ---------- Overlay de busca ---------- */

.busca-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  justify-items: center;
  align-content: start;
  padding-top: clamp(4rem, 12vh, 9rem);
  background: rgba(14, 46, 30, 0.62);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transicao), visibility var(--transicao);
}

.busca-overlay.aberto {
  opacity: 1;
  visibility: visible;
}

.busca-overlay__caixa {
  width: min(94vw, 720px);
  background: var(--cor-fundo);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-alta);
  overflow: hidden;
  transform: translateY(-12px) scale(0.985);
  transition: transform var(--transicao-lenta);
}

.busca-overlay.aberto .busca-overlay__caixa {
  transform: none;
}

.busca-overlay__campo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-5);
  border-bottom: 1px solid var(--cor-borda);
}

.busca-overlay__campo .icone {
  width: 20px;
  height: 20px;
  color: var(--cinza-400);
  flex-shrink: 0;
}

.busca-overlay__input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  color: var(--grafite-900);
}

.busca-overlay__input::placeholder {
  color: var(--cinza-500);
}

.busca-overlay__resultados {
  max-height: min(52vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.busca-overlay__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-5);
  background: var(--cor-fundo-alt);
  border-top: 1px solid var(--cor-borda);
  font-family: var(--fonte-ui);
  font-size: var(--t-micro);
  color: var(--cor-texto-suave);
}

.tecla {
  display: inline-block;
  min-width: 20px;
  padding: 2px 6px;
  border: 1px solid var(--cor-borda);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  background: var(--branco);
  font-family: var(--fonte-ui);
  font-size: 0.7rem;
  font-weight: var(--peso-semi);
  color: var(--grafite-700);
  text-align: center;
}

/* Item de resultado — compartilhado entre overlay e pagina /busca/ */
.resultado {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: var(--e-4);
  align-items: center;
  padding: var(--e-3) var(--e-5);
  border-bottom: 1px solid var(--cor-borda-suave);
  transition: background var(--transicao-rapida);
}

.resultado:hover,
.resultado.ativo {
  background: var(--laranja-50);
}

.resultado__imagem {
  width: 68px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--cinza-100);
}

.resultado__meta {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--fonte-ui);
  font-size: var(--t-kicker);
  font-weight: var(--peso-semi);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--laranja-700);
  margin-bottom: 3px;
}

.resultado__titulo {
  font-size: 0.98rem;
  line-height: 1.32;
  font-weight: var(--peso-semi);
  color: var(--grafite-900);
}

.resultado mark {
  background: var(--laranja-100);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}

.busca-vazio {
  padding: var(--e-7) var(--e-5);
  text-align: center;
  color: var(--cor-texto-suave);
}

.busca-vazio__titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.1rem;
  color: var(--grafite-900);
  margin-bottom: var(--e-2);
}

/* ---------- Atalho flutuante ---------- */

.atalho-flutuante {
  position: fixed;
  left: 50%;
  bottom: var(--e-5);
  transform: translate(-50%, 140%);
  z-index: var(--z-flutuante);
  display: flex;
  align-items: center;
  gap: var(--e-1);
  padding: var(--e-1);
  background: var(--verde-900);
  border-radius: var(--r-full);
  box-shadow: 0 10px 34px rgba(14, 46, 30, 0.34);
  transition: transform var(--transicao-lenta);
}

.atalho-flutuante.visivel {
  transform: translate(-50%, 0);
}

.atalho-flutuante__botao {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  height: 42px;
  padding-inline: var(--e-4);
  border-radius: var(--r-full);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--fonte-ui);
  font-size: var(--t-micro);
  font-weight: var(--peso-semi);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: background var(--transicao-rapida), color var(--transicao-rapida);
}

.atalho-flutuante__botao:hover {
  background: rgba(255, 255, 255, 0.13);
  color: var(--branco);
}

.atalho-flutuante__botao .icone {
  width: 17px;
  height: 17px;
}

.atalho-flutuante__separador {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.22);
}

@media (max-width: 560px) {
  .atalho-flutuante__botao span { display: none; }
  .atalho-flutuante__botao { padding-inline: var(--e-3); }
}

@media print {
  .atalho-flutuante,
  .cabecalho-fixo,
  .ticker { display: none; }
}

/* ===== 06-cards.css ===== */
/* ============================================================
   Sistema de cards editoriais.

   Variacoes: destaque | padrao | horizontal | compacto | retrato |
              evento | dado | edicao
   Cards sao pecas editoriais, nao caixas: sem moldura, separados por
   filete e espaco. Nunca card dentro de card.
   ============================================================ */

/* ---------- Peças comuns ---------- */

.midia {
  position: relative;
  overflow: hidden;
  background: var(--cinza-100);
  border-radius: var(--r-sm);
}

.midia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transicao-lenta);
}

.card:hover .midia img,
.destaque:hover .midia img {
  transform: scale(1.035);
}

.prop-16x9 { aspect-ratio: 16 / 9; }
.prop-3x2 { aspect-ratio: 3 / 2; }
.prop-4x3 { aspect-ratio: 4 / 3; }
.prop-4x5 { aspect-ratio: 4 / 5; }
.prop-1x1 { aspect-ratio: 1 / 1; }

/* Linha de metadados: editoria · município · data */
.meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-2);
  font-family: var(--fonte-ui);
  font-size: var(--t-kicker);
  font-weight: var(--peso-semi);
  letter-spacing: 0.105em;
  text-transform: uppercase;
  line-height: 1.2;
}

.meta__editoria {
  color: var(--cor-editoria, var(--laranja-700));
  transition: color var(--transicao-rapida);
}

a.meta__editoria:hover {
  color: var(--laranja-800);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.meta__separador {
  width: 3px;
  height: 3px;
  border-radius: var(--r-full);
  background: var(--cinza-300);
}

.meta__item {
  color: var(--cor-texto-tenue);
  font-weight: var(--peso-medio);
  letter-spacing: 0.07em;
}

a.meta__item:hover {
  color: var(--verde-700);
}

.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: 3px var(--e-2);
  border-radius: var(--r-sm);
  font-family: var(--fonte-ui);
  font-size: 0.62rem;
  font-weight: var(--peso-forte);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.selo--patrocinado {
  background: var(--cinza-100);
  color: var(--grafite-700);
  border: 1px solid var(--cor-borda);
}

.selo--plantao {
  background: var(--laranja-600);
  color: var(--branco);
}

.selo--serie {
  background: var(--verde-50);
  color: var(--verde-800);
}

/* Selo sobreposto à imagem. */
.midia__selo {
  position: absolute;
  left: var(--e-3);
  top: var(--e-3);
  z-index: 2;
  box-shadow: var(--sombra-sutil);
}

.midia__legenda-galeria {
  position: absolute;
  right: var(--e-3);
  bottom: var(--e-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: 3px var(--e-2);
  border-radius: var(--r-sm);
  background: rgba(14, 23, 26, 0.72);
  color: var(--branco);
  font-family: var(--fonte-ui);
  font-size: 0.66rem;
  font-weight: var(--peso-semi);
}

.midia__legenda-galeria .icone {
  width: 12px;
  height: 12px;
}

/* ---------- Card padrão ---------- */

.card {
  display: grid;
  gap: var(--e-3);
  align-content: start;
}

.card__titulo {
  font-size: var(--t-h4);
  line-height: 1.28;
  letter-spacing: -0.018em;
  transition: color var(--transicao-rapida);
}

.card:hover .card__titulo,
.card__link:focus-visible .card__titulo {
  color: var(--laranja-700);
}

.card__resumo {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--cor-texto-suave);
}

/* Toda a área do card é clicável, mas o link real envolve só o título
   (o resto usa ::after) — mantém o texto selecionável e o link legível. */
.card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.card--ligado {
  position: relative;
}

/* ---------- Destaque (manchete) ---------- */

.destaque {
  position: relative;
  display: grid;
  gap: var(--e-4);
}

.destaque__titulo {
  font-size: var(--t-h1);
  line-height: var(--altura-apertada);
  letter-spacing: -0.028em;
  transition: color var(--transicao-rapida);
}

.destaque:hover .destaque__titulo {
  color: var(--verde-800);
}

.destaque__olho {
  font-size: var(--t-corpo-g);
  line-height: 1.5;
  color: var(--cor-texto-suave);
  max-width: 54ch;
}

/* Manchete com cartão de texto sobreposto à imagem. */
.destaque--sobreposto {
  gap: 0;
}

.destaque--sobreposto .midia {
  border-radius: var(--r-sm);
}

.destaque--sobreposto .destaque__cartao {
  position: relative;
  z-index: 2;
  width: min(100%, 720px);
  margin: -5.5rem var(--e-6) 0;
  padding: var(--e-6) var(--e-6) var(--e-5);
  background: var(--cor-fundo);
  border-top: 3px solid var(--laranja-500);
  box-shadow: var(--sombra-card);
  display: grid;
  gap: var(--e-3);
}

@media (max-width: 768px) {
  .destaque--sobreposto .destaque__cartao {
    margin: -2.5rem var(--e-3) 0;
    padding: var(--e-5) var(--e-4) var(--e-4);
  }
}

/* ---------- Horizontal (imagem lateral) ---------- */

.card--horizontal {
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: var(--e-4);
  align-items: start;
  padding-block: var(--e-4);
  border-bottom: 1px solid var(--cor-borda-suave);
}

.card--horizontal .midia {
  grid-column: 2;
  grid-row: 1 / span 3;
}

/* O título usa a mesma escala dos demais cards (--t-h4). Antes havia uma
   redução para 1.02rem que deixava os destaques do hero pequenos demais
   para o peso editorial que eles têm na página. */
.card--horizontal .card__titulo {
  line-height: 1.28;
}

.card--horizontal:last-child {
  border-bottom: none;
}

@media (max-width: 430px) {
  .card--horizontal { grid-template-columns: minmax(0, 1fr) 96px; }
}

/* ---------- Compacto (timeline de últimas) ---------- */

.compacta {
  list-style: none;
  display: grid;
}

.compacta__item {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: var(--e-4);
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--cor-borda-suave);
  transition: background var(--transicao-rapida);
}

.compacta__item:hover {
  background: linear-gradient(to right, var(--laranja-50), transparent 70%);
}

.compacta__hora {
  font-family: var(--fonte-ui);
  font-size: 0.9rem;
  font-weight: var(--peso-forte);
  color: var(--laranja-600);
  letter-spacing: -0.01em;
  padding-top: 1px;
}

.compacta__data {
  display: block;
  font-size: 0.62rem;
  font-weight: var(--peso-medio);
  letter-spacing: 0.1em;
  color: var(--cinza-400);
  text-transform: uppercase;
  margin-top: 2px;
}

.compacta__titulo {
  font-size: 1.01rem;
  line-height: 1.34;
  font-weight: var(--peso-semi);
  transition: color var(--transicao-rapida);
}

.compacta__item:hover .compacta__titulo {
  color: var(--laranja-700);
}

.compacta__meta {
  margin-top: var(--e-2);
}

/* Marcador da linha do tempo. */
.compacta__item::before {
  content: '';
  position: absolute;
  left: 58px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--cor-borda);
  transform: translateX(-11px);
}

.compacta__item::after {
  content: '';
  position: absolute;
  left: 58px;
  top: 1.45rem;
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: var(--branco);
  border: 2px solid var(--cinza-300);
  transform: translateX(-14px);
  transition: border-color var(--transicao-rapida), background var(--transicao-rapida);
}

.compacta__item:hover::after {
  border-color: var(--laranja-500);
  background: var(--laranja-500);
}

@media (max-width: 430px) {
  .compacta__item { grid-template-columns: 48px minmax(0, 1fr); gap: var(--e-3); }
  .compacta__item::before { left: 48px; }
  .compacta__item::after { left: 48px; }
}

/* ---------- Retrato (séries de pessoas) ---------- */

.card--retrato .midia {
  border-radius: var(--r-sm);
}

.card--retrato .card__nome {
  font-family: var(--fonte-ui);
  font-size: var(--t-kicker);
  font-weight: var(--peso-forte);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--laranja-700);
}

.card--retrato .card__titulo {
  font-size: 1.12rem;
}

/* ---------- Evento ---------- */

.evento {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--e-4);
  align-items: start;
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--cor-borda-suave);
}

.evento__data {
  display: grid;
  place-items: center;
  padding: var(--e-2) var(--e-1);
  background: var(--verde-800);
  color: var(--branco);
  border-radius: var(--r-sm);
  line-height: 1;
}

.evento__dia {
  font-family: var(--fonte-ui);
  font-size: 1.5rem;
  font-weight: var(--peso-forte);
  letter-spacing: -0.03em;
}

.evento__mes {
  font-family: var(--fonte-ui);
  font-size: 0.62rem;
  font-weight: var(--peso-semi);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 3px;
  opacity: 0.86;
}

.evento__nome {
  font-size: 1.05rem;
  line-height: 1.3;
  transition: color var(--transicao-rapida);
}

.evento:hover .evento__nome {
  color: var(--laranja-700);
}

.evento__local {
  margin-top: var(--e-2);
}

.evento--destaque .evento__data {
  background: var(--laranja-600);
}

/* ---------- Dado (números editoriais) ---------- */

.dados {
  display: grid;
  gap: var(--e-5);
  padding: var(--e-6);
  background: var(--verde-50);
  border-top: 3px solid var(--verde-800);
}

.dados__titulo {
  font-family: var(--fonte-ui);
  font-size: var(--t-kicker);
  font-weight: var(--peso-forte);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--verde-800);
}

.dados__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: var(--e-5);
}

.dado__valor {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: var(--peso-forte);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--verde-900);
  font-variant-numeric: tabular-nums;
}

.dado__rotulo {
  display: block;
  margin-top: var(--e-2);
  font-family: var(--fonte-ui);
  font-size: var(--t-micro);
  color: var(--cor-texto-suave);
  line-height: 1.35;
}

.dados__nota {
  font-family: var(--fonte-ui);
  font-size: 0.72rem;
  color: var(--cor-texto-tenue);
  font-style: italic;
  padding-top: var(--e-3);
  border-top: 1px solid var(--verde-200);
}

/* ---------- Edição (anuário) ---------- */

.edicao {
  position: relative;
  display: grid;
  gap: var(--e-4);
  align-content: start;
}

/* A CAPA TEM A FORMA DO PDF, E NÃO UMA FORMA DECIDIDA AQUI

   O 3/4 fixo com  cortava a capa para caber na caixa.
   Anuário é peça gráfica: o que está na borda — ano, chamada, faixa de
   patrocinadores no pé — é justamente o que sumia.

   Sem proporção imposta, a caixa toma a forma da imagem. O  e o
    que o HTML já traz reservam o espaço antes de a foto chegar,
   então nada pula quando ela carrega. */
/* A CAPA TEM A FORMA DO PDF, E NÃO UMA FORMA DECIDIDA AQUI

   Havia um `aspect-ratio: 3 / 4` com `object-fit: cover`, e o cover corta o
   que não couber. Anuário é peça gráfica, e o que fica na borda — o ano no
   alto, a faixa de patrocinadores no pé — era justamente o que sumia. A
   diferença parecia pequena no papel (0,725 do arquivo contra 0,75 da
   caixa) e comia uma tira inteira da capa.

   Sem proporção imposta, a caixa toma a forma da imagem. O `width` e o
   `height` que o HTML já traz reservam o espaço antes de a foto chegar,
   então nada pula quando ela carrega. */
.edicao__capa {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--verde-800);
  box-shadow: var(--sombra-card);
  transition: transform var(--transicao-lenta), box-shadow var(--transicao-lenta);
}

.edicao:hover .edicao__capa {
  transform: translateY(-5px);
  box-shadow: var(--sombra-alta);
}

.edicao__capa img {
  display: block;
  width: 100%;
  height: auto;
}

.edicao__ano {
  font-family: var(--fonte-ui);
  font-size: var(--t-kicker);
  font-weight: var(--peso-forte);
  letter-spacing: 0.16em;
  color: var(--laranja-700);
  text-transform: uppercase;
}

.edicao__titulo {
  font-size: 1.15rem;
  line-height: 1.25;
}

/* Fita de "edição atual". */
.edicao__fita {
  position: absolute;
  top: var(--e-3);
  right: 0;
  z-index: 2;
  padding: 4px var(--e-3);
  background: var(--laranja-600);
  color: var(--branco);
  font-family: var(--fonte-ui);
  font-size: 0.62rem;
  font-weight: var(--peso-forte);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ===== 07-secoes.css ===== */
/* ============================================================
   Secoes da home e blocos editoriais reutilizaveis.
   ============================================================ */

/* ---------- Hero jornalistico ---------- */

/* O respiro inferior é bem menor que o superior de propósito. Abaixo do hero
   vem o bloco de anúncio, que traz o próprio espaçamento, e a coluna de
   destaques costuma ser mais alta que a do carrossel — os três somados
   abriam um vão de 131px. */
.hero {
  padding-block: clamp(var(--e-6), 4vw, var(--e-9)) var(--e-5);
}

/* Anúncio logo após o hero: dispensa o respiro cheio, que duplicaria o
   espaço que o hero já deixou. */
.hero + .container .secao--compacta {
  padding-top: var(--e-5);
}

.hero__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: var(--coluna-gap);
  align-items: start;
}

.hero__principal {
  position: relative;
  min-width: 0;
}

/* Carrossel — o momento de movimento autoral do portal. */
.carrossel {
  position: relative;
}

.carrossel__palco {
  position: relative;
}

.carrossel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.carrossel__slide.ativo {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.carrossel__controles {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  margin-top: var(--e-5);
  padding-left: var(--e-6);
}

.carrossel__pontos {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.carrossel__ponto {
  position: relative;
  width: 34px;
  height: 3px;
  background: var(--cinza-200);
  border-radius: var(--r-full);
  overflow: hidden;
  transition: background var(--transicao-rapida);
}

.carrossel__ponto:hover {
  background: var(--cinza-300);
}

.carrossel__ponto[aria-current='true'] {
  background: var(--cinza-200);
}

/* Preenchimento que acompanha o tempo do slide. */
.carrossel__ponto[aria-current='true']::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--laranja-500);
  transform-origin: left;
  animation: preencher var(--duracao-slide, 7s) linear forwards;
}

.carrossel.pausado .carrossel__ponto[aria-current='true']::after {
  animation-play-state: paused;
}

@keyframes preencher {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .carrossel__ponto[aria-current='true']::after {
    animation: none;
    transform: scaleX(1);
  }
}

.carrossel__navegacao {
  display: flex;
  gap: var(--e-2);
  margin-left: auto;
}

.carrossel__seta {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--r-full);
  color: var(--grafite-800);
  transition: background var(--transicao-rapida), border-color var(--transicao-rapida),
    color var(--transicao-rapida);
}

.carrossel__seta:hover {
  background: var(--verde-800);
  border-color: var(--verde-800);
  color: var(--branco);
}

.carrossel__seta .icone {
  width: 16px;
  height: 16px;
}

/* Coluna lateral do hero: destaques secundarios. */
.hero__lateral {
  display: grid;
  gap: var(--e-2);
  min-width: 0;
}

.hero__lateral-titulo {
  font-family: var(--fonte-ui);
  font-size: var(--t-kicker);
  font-weight: var(--peso-forte);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--verde-800);
  padding-bottom: var(--e-3);
  border-bottom: 2px solid var(--grafite-900);
  margin-bottom: var(--e-2);
}

@media (max-width: 1024px) {
  .hero__grade { grid-template-columns: minmax(0, 1fr); }
  .carrossel__controles { padding-left: var(--e-3); }
}

/* ---------- Faixa de últimas + trilho ---------- */

.ultimas__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
}

/* ---------- Municípios ---------- */

.municipios__intro {
  max-width: 60ch;
  margin-bottom: var(--e-7);
}

.municipios__grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1px;
  background: var(--cor-borda);
  border: 1px solid var(--cor-borda);
}

.municipio-celula {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: var(--e-5);
  min-height: 158px;
  padding: var(--e-5);
  background: var(--cor-fundo);
  transition: background var(--transicao);
}

.municipio-celula:hover {
  background: var(--verde-50);
}

.municipio-celula__nome {
  font-size: 1.22rem;
  line-height: 1.15;
  letter-spacing: -0.022em;
  transition: color var(--transicao-rapida);
}

.municipio-celula:hover .municipio-celula__nome {
  color: var(--verde-800);
}

.municipio-celula__regiao {
  display: block;
  margin-top: var(--e-2);
  font-family: var(--fonte-ui);
  font-size: var(--t-kicker);
  font-weight: var(--peso-medio);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cor-texto-tenue);
}

.municipio-celula__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
}

.municipio-celula__total {
  font-family: var(--fonte-ui);
  font-size: var(--t-micro);
  color: var(--cor-texto-suave);
  font-variant-numeric: tabular-nums;
}

.municipio-celula__seta {
  width: 16px;
  height: 16px;
  color: var(--cinza-300);
  transition: transform var(--transicao), color var(--transicao);
}

.municipio-celula:hover .municipio-celula__seta {
  transform: translateX(4px);
  color: var(--laranja-600);
}

/* ---------- Mapa esquematico dos municipios ----------
   Cor codifica regiao e nunca muda; interacao se expressa em tamanho, anel e
   peso do rotulo. Assim o laranja de hover do resto do site nao se confunde
   com o laranja que aqui significa "Norte Pioneiro". */

.mapa {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-7);
  align-items: start;
}

@media (min-width: 900px) {
  .mapa {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 20rem);
    gap: var(--e-9);
  }
}

.mapa__quadro {
  background: var(--verde-50);
  padding: var(--e-4);
}

.mapa__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ---------- Pontos ---------- */

.mapa__ponto {
  cursor: pointer;
}

.mapa__halo {
  fill: transparent;
  stroke: transparent;
  stroke-width: 2;
  transition: stroke var(--transicao-rapida);
}

.mapa__disco {
  fill: var(--verde-700);
  stroke: var(--verde-50);
  stroke-width: 1.5;
  transition:
    fill var(--transicao-rapida),
    r var(--transicao-rapida);
}

.mapa__ponto[data-regiao='norte-pioneiro'] .mapa__disco {
  fill: var(--laranja-600);
}

/* Municipio ainda sem materia: anel vazado, nao disco cheio. */
.mapa__ponto--vazio .mapa__disco {
  fill: var(--verde-50);
  stroke: var(--verde-500);
  stroke-width: 1.6;
}

.mapa__ponto--vazio[data-regiao='norte-pioneiro'] .mapa__disco {
  stroke: var(--laranja-400);
}

.mapa__rotulo {
  font-family: var(--fonte-ui);
  font-size: 11px;
  font-weight: var(--peso-medio);
  fill: var(--cinza-600);
  transition:
    fill var(--transicao-rapida),
    font-weight var(--transicao-rapida);
  pointer-events: none;
}

.mapa__ponto:hover .mapa__halo,
.mapa__ponto:focus-visible .mapa__halo,
.mapa__ponto.esta-ativo .mapa__halo {
  stroke: var(--verde-600);
}

.mapa__ponto[data-regiao='norte-pioneiro']:hover .mapa__halo,
.mapa__ponto[data-regiao='norte-pioneiro']:focus-visible .mapa__halo,
.mapa__ponto[data-regiao='norte-pioneiro'].esta-ativo .mapa__halo {
  stroke: var(--laranja-600);
}

.mapa__ponto:hover .mapa__rotulo,
.mapa__ponto:focus-visible .mapa__rotulo,
.mapa__ponto.esta-ativo .mapa__rotulo {
  fill: var(--grafite-900);
  font-weight: var(--peso-semi);
}

.mapa__ponto:focus {
  outline: none;
}

.mapa__ponto:focus-visible .mapa__halo {
  stroke: var(--cor-foco);
  stroke-width: 2.5;
}

/* ---------- Lateral: legenda, painel e nota ---------- */

.mapa__lateral {
  display: grid;
  gap: var(--e-5);
}

/* O quadro passa de 800px de altura: a lateral acompanha a rolagem para o painel
   nao sumir enquanto se percorre o mapa. Mesma convencao do .trilho. */
@media (min-width: 900px) {
  .mapa__lateral {
    position: sticky;
    top: 6.5rem;
  }
}

.mapa__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
}

.mapa__chave {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--fonte-ui);
  font-size: var(--t-micro);
  color: var(--cor-texto-medio);
}

.mapa__chave-disco {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--verde-700);
}

.mapa__chave[data-regiao='norte-pioneiro'] .mapa__chave-disco {
  background: var(--laranja-600);
}

.mapa__painel {
  min-height: 15rem;
  padding: var(--e-5);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
}

.mapa__vazio-titulo,
.mapa__ficha-regiao {
  font-family: var(--fonte-ui);
  font-size: var(--t-kicker);
  font-weight: var(--peso-semi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--verde-700);
  margin-bottom: var(--e-2);
}

.mapa__ficha[data-regiao='norte-pioneiro'] .mapa__ficha-regiao {
  color: var(--laranja-700);
}

/* 01-nucleo.js troca sem-js por com-js no <html> logo no carregamento. */
.com-js .mapa__sem-js,
.sem-js .mapa__com-js {
  display: none;
}

.mapa__vazio-texto {
  font-size: var(--t-pequeno);
  color: var(--cor-texto-suave);
}

.mapa__ficha-nome {
  font-family: var(--fonte-titulo);
  font-size: var(--t-h3);
  line-height: 1.15;
  margin-bottom: var(--e-3);
}

.mapa__ficha-resumo {
  font-size: var(--t-pequeno);
  color: var(--cor-texto-medio);
  margin-bottom: var(--e-4);
}

.mapa__ficha-cadeias {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-bottom: var(--e-4);
}

.mapa__ficha-cadeia {
  font-family: var(--fonte-ui);
  font-size: var(--t-kicker);
  padding: 0.2em 0.6em;
  background: var(--verde-50);
  color: var(--verde-800);
}

.mapa__ficha[data-regiao='norte-pioneiro'] .mapa__ficha-cadeia {
  background: var(--laranja-50);
  color: var(--laranja-800);
}

.mapa__ficha-link {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--fonte-ui);
  font-size: var(--t-micro);
  font-weight: var(--peso-semi);
}

.mapa__nota {
  font-size: var(--t-kicker);
  line-height: 1.5;
  color: var(--cor-texto-tenue);
}

@media (max-width: 899px) {
  /* Encolher o mapa ate caber na tela levaria o rotulo a ~7px reais. Aumentar a
     fonte tambem nao serve: os rotulos foram posicionados no servidor com uma
     metrica fixa e passariam a colidir. Entao o quadro mantem uma largura minima
     legivel e rola na horizontal — a rolagem fica presa ao quadro, nunca na pagina. */
  .mapa__quadro {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .mapa__svg {
    min-width: 500px;
  }

  /* Alvo de toque maior. Mesmo assim nao chega aos 44px recomendados: 23 pontos
     nesta area nao comportam. Por isso o mapa e apoio, e a grade de municipios
     acima continua sendo o caminho principal. */
  .mapa__halo {
    r: 16;
  }

  .mapa__rotulo {
    font-size: 12px;
  }

  .mapa__painel {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mapa__halo,
  .mapa__disco,
  .mapa__rotulo {
    transition: none;
  }
}

/* ---------- Produção (cadeias com fotografia) ---------- */

.cadeias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--coluna-gap);
}

.cadeia {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--verde-900);
}

.cadeia img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  opacity: 0.82;
  transition: transform var(--transicao-lenta), opacity var(--transicao);
}

.cadeia:hover img {
  transform: scale(1.05);
  opacity: 0.62;
}

.cadeia__texto {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--e-5) var(--e-4) var(--e-4);
  background: linear-gradient(to top, rgba(14, 46, 30, 0.92), rgba(14, 46, 30, 0));
  color: var(--branco);
}

.cadeia__nome {
  font-size: 1.16rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.cadeia__total {
  display: block;
  margin-top: var(--e-1);
  font-family: var(--fonte-ui);
  font-size: var(--t-micro);
  color: rgba(255, 255, 255, 0.76);
  font-variant-numeric: tabular-nums;
}

/* ---------- Bloco de série editorial ---------- */

.serie-bloco {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(var(--e-6), 4vw, var(--e-9));
  align-items: center;
}

.serie-bloco__marca {
  font-family: var(--fonte-ui);
  font-size: var(--t-kicker);
  font-weight: var(--peso-forte);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--laranja-500);
}

.serie-bloco__titulo {
  font-size: var(--t-h2);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin-top: var(--e-3);
}

.serie-bloco__chamada {
  margin-top: var(--e-4);
  font-size: var(--t-corpo-g);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  max-width: 48ch;
}

.serie-bloco__historia {
  margin-top: var(--e-6);
  padding-top: var(--e-5);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.serie-bloco__historia-titulo {
  font-size: var(--t-h3);
  line-height: 1.2;
  transition: color var(--transicao-rapida);
}

.serie-bloco__historia:hover .serie-bloco__historia-titulo {
  color: var(--laranja-400);
}

.serie-bloco__lista {
  list-style: none;
  display: grid;
  gap: var(--e-1);
  margin-top: var(--e-5);
}

.serie-bloco__item {
  padding: var(--e-3) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 1rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.86);
  transition: color var(--transicao-rapida);
}

/* O deslocamento vive no link interno via transform: animar padding
   forcaria recalculo de layout a cada quadro. */
.serie-bloco__item > a {
  display: block;
  transition: transform var(--transicao-rapida);
}

.serie-bloco__item:hover {
  color: var(--laranja-400);
}

.serie-bloco__item:hover > a {
  transform: translateX(var(--e-2));
}

.serie-bloco__midia img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-sm);
}

@media (max-width: 860px) {
  .serie-bloco { grid-template-columns: minmax(0, 1fr); }
  .serie-bloco__midia { order: -1; }
}

/* ---------- Agro é Escola (miniportal) ---------- */

.escola-bloco {
  --cor-editoria: var(--escola-primaria);
  background: var(--escola-clara);
  border-top: 4px solid var(--escola-primaria);
}

.escola-bloco__topo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--coluna-gap);
  align-items: end;
  margin-bottom: var(--e-7);
}

.escola-bloco__marca {
  font-family: var(--fonte-ui);
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem);
  font-weight: var(--peso-forte);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--escola-primaria);
  line-height: 1;
}

.escola-bloco__headline {
  font-size: var(--t-h3);
  line-height: 1.25;
  color: var(--grafite-900);
  margin-top: var(--e-3);
}

.escola-bloco__texto {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--cor-texto-medio);
  max-width: 52ch;
}

/* Intro do hub: o texto assume a liderança da seção, já que o headline
   vive na capa, sob a logo. Medida de leitura curta e corpo maior. */
.escola-bloco__intro {
  font-size: var(--t-corpo-g);
  line-height: 1.65;
  color: var(--cor-texto-medio);
  max-width: 62ch;
  margin-bottom: var(--e-7);
}

.escola-acessos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 1px;
  background: var(--laranja-100);
  border: 1px solid var(--laranja-100);
  margin-bottom: var(--e-7);
}

.escola-acesso {
  display: grid;
  gap: var(--e-1);
  padding: var(--e-4);
  background: var(--branco);
  transition: background var(--transicao-rapida);
}

.escola-acesso:hover {
  background: var(--laranja-50);
}

.escola-acesso__rotulo {
  font-family: var(--fonte-ui);
  font-size: 0.92rem;
  font-weight: var(--peso-semi);
  color: var(--grafite-900);
}

.escola-acesso:hover .escola-acesso__rotulo {
  color: var(--laranja-700);
}

.escola-acesso__descricao {
  font-family: var(--fonte-ui);
  font-size: var(--t-micro);
  color: var(--cor-texto-suave);
  line-height: 1.35;
}

@media (max-width: 768px) {
  .escola-bloco__topo { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* ---------- Newsletter ---------- */

.newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(var(--e-5), 4vw, var(--e-8));
  align-items: center;
  padding: clamp(var(--e-6), 4vw, var(--e-8));
  background: var(--verde-900);
  color: var(--branco);
  border-radius: var(--r-sm);
}

.newsletter__titulo {
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.newsletter__texto {
  margin-top: var(--e-4);
  font-size: var(--t-corpo-g);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
  max-width: 46ch;
}

.newsletter__form {
  display: grid;
  gap: var(--e-3);
}

.campo {
  display: grid;
  gap: var(--e-2);
}

.campo__rotulo {
  font-family: var(--fonte-ui);
  font-size: var(--t-micro);
  font-weight: var(--peso-semi);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.campo__entrada {
  width: 100%;
  padding: var(--e-4);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--r-sm);
  color: var(--branco);
  font-family: var(--fonte-ui);
  font-size: 1rem;
  transition: border-color var(--transicao-rapida), background var(--transicao-rapida);
}

.campo__entrada::placeholder {
  color: rgba(255, 255, 255, 0.52);
}

.campo__entrada:focus {
  outline: none;
  border-color: var(--laranja-400);
  background: rgba(255, 255, 255, 0.11);
}

.campo__entrada[aria-invalid='true'] {
  border-color: var(--laranja-400);
}

.campo__erro {
  font-family: var(--fonte-ui);
  font-size: var(--t-micro);
  color: var(--laranja-400);
  min-height: 1.1em;
}

.newsletter__aviso {
  font-family: var(--fonte-ui);
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.45;
}

.newsletter__sucesso {
  display: grid;
  gap: var(--e-2);
  padding: var(--e-5);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(245, 130, 46, 0.5);
  border-radius: var(--r-sm);
}

.newsletter__sucesso-titulo {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--fonte-ui);
  font-weight: var(--peso-semi);
  color: var(--laranja-400);
}

.newsletter__sucesso-titulo .icone {
  width: 18px;
  height: 18px;
}

@media (max-width: 860px) {
  .newsletter { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Botoes ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: var(--e-4) var(--e-6);
  border-radius: var(--r-sm);
  font-family: var(--fonte-ui);
  font-size: 0.86rem;
  font-weight: var(--peso-semi);
  letter-spacing: 0.075em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background var(--transicao-rapida), color var(--transicao-rapida),
    border-color var(--transicao-rapida), transform var(--transicao-rapida);
}

.botao:active {
  transform: translateY(1px);
}

.botao--destaque {
  background: var(--laranja-600);
  color: var(--branco);
}

.botao--destaque:hover {
  background: var(--laranja-700);
}

.botao--marca {
  background: var(--verde-800);
  color: var(--branco);
}

.botao--marca:hover {
  background: var(--verde-900);
}

.botao--contorno {
  border: 1px solid var(--cor-borda);
  color: var(--grafite-800);
  background: var(--branco);
}

.botao--contorno:hover {
  border-color: var(--verde-800);
  color: var(--verde-800);
}

.botao--claro {
  border: 1px solid rgba(255, 255, 255, 0.34);
  color: var(--branco);
}

.botao--claro:hover {
  background: rgba(255, 255, 255, 0.12);
}

.botao[disabled],
.botao[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.botao .icone {
  width: 16px;
  height: 16px;
}

/* ---------- Publicidade ---------- */

.anuncio {
  display: grid;
  gap: var(--e-2);
  justify-items: center;
  text-align: center;
}

.anuncio__rotulo {
  font-family: var(--fonte-ui);
  font-size: 0.62rem;
  font-weight: var(--peso-medio);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cinza-400);
}

.anuncio__area {
  display: grid;
  place-items: center;
  width: 100%;
  /* Recuo só na horizontal. Padding vertical entraria na conta do min-height
     (box-sizing: border-box) e comeria o espaço reservado para o criativo:
     um bloco de 120px sobraria com 70px úteis, e a página saltaria quando o
     anúncio real carregasse — justamente o que reservar espaço evita. */
  padding-inline: var(--e-5);
  padding-block: 0;
  background: var(--cinza-100);
  /* outline no lugar de border pelo mesmo motivo: não ocupa espaço de layout.
     É marcação de placeholder e sai quando o ad server assumir. */
  outline: 1px solid var(--cor-borda);
  outline-offset: -1px;
  border-radius: var(--r-sm);
  color: var(--cor-texto-tenue);
  font-family: var(--fonte-ui);
  font-size: var(--t-micro);
  text-align: center;
  line-height: 1.5;
}

/* A altura reservada vem inline, do formato definido em componentes/secoes.js.
   Mantê-la aqui também criaria duas fontes da mesma medida. */

.anuncio__dimensao {
  display: block;
  margin-top: var(--e-1);
  font-size: 0.68rem;
  color: var(--cinza-400);
}

/* Faixa de conteudo patrocinado — identificacao explicita e inegociavel. */
.patrocinado-faixa {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  background: var(--cinza-100);
  border-left: 1px solid var(--laranja-500);
  border-radius: var(--r-sm);
  font-family: var(--fonte-ui);
  font-size: var(--t-micro);
  color: var(--cor-texto-medio);
  line-height: 1.45;
}

.patrocinado-faixa .icone {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--laranja-700);
}

/* ---------- Chamada do anuário ---------- */

.anuario-chamada {
  display: grid;
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr);
  gap: clamp(var(--e-6), 4vw, var(--e-9));
  align-items: center;
}

/* Mesma razão do cartão: a capa mantém a forma do PDF. Ver 06-cards.css. */
/* Mesma razão do cartão: a capa mantém a forma do arquivo, sem corte.
   Ver .edicao__capa em 06-cards.css. */
.anuario-chamada__capa img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  box-shadow: var(--sombra-alta);
}

.anuario-chamada__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-6);
}

@media (max-width: 768px) {
  .anuario-chamada { grid-template-columns: minmax(0, 1fr); }
  .anuario-chamada__capa { max-width: 260px; }
}

/* ===== 08-materia.css ===== */
/* ============================================================
   Pagina de materia — experiencia de leitura.
   Medida de 66-72ch, hierarquia declarada, imagens em largura maior
   que o texto para manter o protagonismo fotografico.
   ============================================================ */

/* ---------- Breadcrumbs ---------- */

.trilha {
  padding-block: var(--e-4);
  border-bottom: 1px solid var(--cor-borda-suave);
}

.trilha__lista {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-2);
  font-family: var(--fonte-ui);
  font-size: var(--t-micro);
  color: var(--cor-texto-tenue);
}

.trilha__item {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.trilha__item a {
  color: var(--cor-texto-suave);
  transition: color var(--transicao-rapida);
}

.trilha__item a:hover {
  color: var(--laranja-700);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.trilha__item[aria-current='page'] {
  color: var(--grafite-900);
  font-weight: var(--peso-medio);
}

.trilha__sep {
  width: 10px;
  height: 10px;
  color: var(--cinza-300);
  flex-shrink: 0;
}

/* ---------- Cabecalho da materia ---------- */

.materia {
  padding-bottom: var(--secao-y);
}

.materia__cabecalho {
  max-width: 52rem;
  margin-inline: auto;
  padding-block: clamp(var(--e-6), 4vw, var(--e-9)) var(--e-6);
  text-align: center;
}

.materia__editoria {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--fonte-ui);
  font-size: var(--t-kicker);
  font-weight: var(--peso-forte);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cor-editoria, var(--laranja-700));
}

.materia__editoria:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Editoria e chapéu na mesma linha, separados por um ponto — a forma que
   jornal usa há um século. O chapéu é opcional; sem ele, a linha é só a
   editoria e nada muda. */
.materia__linha-editoria {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: 0;
}

.materia__chapeu {
  font-family: var(--fonte-ui);
  font-size: var(--t-kicker);
  font-weight: var(--peso-medio);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.materia__chapeu::before {
  content: '·';
  margin-right: var(--e-2);
  color: var(--cinza-400, #9aa0a6);
}

/* Sob o título e acima do olho: é a linha que continua a manchete, e por
   isso vem em serifada como ela, não na fonte de interface. */
.materia__subtitulo {
  max-width: 46rem;
  margin: var(--e-3) auto 0;
  font-family: var(--fonte-titulo);
  font-size: var(--t-subtitulo, 1.375rem);
  font-weight: var(--peso-normal);
  line-height: 1.35;
  color: var(--cor-texto);
  text-align: center;
}

.materia__titulo {
  margin-top: var(--e-4);
  font-size: var(--t-h1);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.materia__olho {
  margin-top: var(--e-5);
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.42rem);
  line-height: 1.48;
  font-weight: var(--peso-normal);
  color: var(--cor-texto-suave);
  max-width: 60ch;
  margin-inline: auto;
  text-wrap: pretty;
}

.materia__assinatura {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-4);
  margin-top: var(--e-6);
  padding-top: var(--e-5);
  border-top: 1px solid var(--cor-borda);
  font-family: var(--fonte-ui);
  font-size: var(--t-micro);
  color: var(--cor-texto-suave);
}

.materia__assinatura strong {
  font-weight: var(--peso-semi);
  color: var(--grafite-900);
}

.materia__assinatura a:hover {
  color: var(--laranja-700);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.materia__assinatura-grupo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
}

.materia__assinatura .icone {
  width: 14px;
  height: 14px;
  color: var(--cinza-400);
}

/* ---------- Figura principal ---------- */

.materia__figura {
  margin: 0 0 var(--e-7);
}

.materia__figura img {
  width: 100%;
  border-radius: var(--r-sm);
}

/* ---------- Gatilho de ampliar ----------
   Envolve a imagem da abertura e a dos blocos do corpo. É <button> para entrar
   na ordem de tabulação, mas não pode parecer botão: zera tudo que o navegador
   desenha e mantém a imagem exatamente onde estava. */

.ampliar {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  /* Sem isto o <button> vira contexto de linha e sobra um respiro embaixo da
     imagem, deslocando a legenda. */
  line-height: 0;
}

.ampliar img {
  width: 100%;
  height: auto;
  transition: opacity var(--transicao);
}

.ampliar:hover img {
  opacity: 0.94;
}

.ampliar:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .ampliar img { transition: none; }
}

.legenda {
  display: flex;
  gap: var(--e-3);
  margin-top: var(--e-3);
  padding-top: var(--e-3);
  border-top: 1px solid var(--cor-borda-suave);
  font-family: var(--fonte-ui);
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--cor-texto-suave);
}

.legenda::before {
  content: '';
  flex-shrink: 0;
  width: 22px;
  height: 2px;
  margin-top: 0.55em;
  background: var(--laranja-500);
}

/* Crédito da foto. Vem depois da legenda, um tom mais apagado — é atribuição
   obrigatória, não parte do texto que descreve a cena. Quando não há legenda,
   ele ocupa a linha sozinho. */
.legenda__credito {
  color: var(--cor-texto-tenue);
  white-space: nowrap;
}

.legenda__credito:not(:only-child) {
  margin-left: var(--e-2);
}

/* ---------- Corpo ---------- */

.materia__corpo {
  max-width: 40rem; /* ~68ch na fonte de corpo */
  margin-inline: auto;
}

.materia-corpo > * + * {
  margin-top: var(--e-5);
}

.materia-corpo p {
  font-size: var(--t-corpo-g);
  line-height: var(--altura-texto);
  color: var(--grafite-800);
  text-wrap: pretty;
}

/* Entrada de leitura: primeira linha em versalete. */
.materia-corpo > p:first-child::first-line {
  font-variant-caps: small-caps;
  letter-spacing: 0.015em;
}

.materia-corpo h2 {
  margin-top: var(--e-8);
  font-size: var(--t-h3);
  line-height: 1.2;
  letter-spacing: -0.022em;
}

.materia-corpo h2 + p {
  margin-top: var(--e-4);
}

.materia-corpo ul {
  list-style: none;
  display: grid;
  gap: var(--e-3);
  padding: var(--e-5) var(--e-6);
  background: var(--cor-fundo-alt);
  border-radius: var(--r-sm);
}

.materia-corpo ul li {
  position: relative;
  padding-left: var(--e-5);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--grafite-800);
}

.materia-corpo ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: var(--laranja-500);
}

.lista-titulo {
  font-family: var(--fonte-ui);
  font-size: var(--t-kicker);
  font-weight: var(--peso-forte);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde-800);
  margin-bottom: var(--e-2);
}

/* Citacao — componente reutilizavel. */
.citacao {
  margin-block: var(--e-8);
  padding-left: var(--e-6);
  border-left: 1px solid var(--laranja-500);
}

.citacao__texto {
  font-size: clamp(1.28rem, 1.1rem + 0.9vw, 1.72rem);
  line-height: 1.32;
  font-weight: var(--peso-semi);
  letter-spacing: -0.02em;
  color: var(--verde-900);
  text-wrap: pretty;
}

.citacao__autor {
  display: block;
  margin-top: var(--e-4);
  font-family: var(--fonte-ui);
  font-size: var(--t-micro);
  font-weight: var(--peso-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grafite-900);
  font-style: normal;
}

.citacao__cargo {
  display: block;
  margin-top: 3px;
  font-family: var(--fonte-ui);
  font-size: var(--t-micro);
  color: var(--cor-texto-suave);
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: var(--peso-normal);
}

/* Imagem intermediaria — extravasa a medida do texto. */
.materia-corpo figure {
  margin: var(--e-8) 0;
  width: min(100vw - 2 * var(--recuo-lateral), 52rem);
  margin-inline: calc(50% - min(50vw - var(--recuo-lateral), 26rem));
}

.materia-corpo figure img {
  width: 100%;
  border-radius: var(--r-sm);
}

/* Box de dados dentro da reportagem. */
.materia-corpo .dados {
  margin-block: var(--e-8);
}

/* ---------- Galeria ---------- */

.galeria {
  margin-block: var(--e-8);
}

.galeria__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--e-3);
}

.galeria__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--cinza-100);
  cursor: zoom-in;
}

.galeria__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--transicao-lenta);
}

.galeria__item:hover img {
  transform: scale(1.05);
}

.galeria__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(14, 46, 30, 0);
  transition: background var(--transicao);
}

.galeria__item:hover::after {
  background: rgba(14, 46, 30, 0.14);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgba(10, 18, 14, 0.95);
  opacity: 0;
  visibility: hidden;
  /* Ao FECHAR, a visibilidade espera o fade terminar — senão o overlay some de
     supetão no meio da transição. `0s linear var(--transicao)` é duração zero
     com atraso, não uma animação de visibilidade. */
  transition: opacity var(--transicao), visibility 0s linear var(--transicao);
}

.lightbox.aberto {
  opacity: 1;
  visibility: visible;
  /* Ao ABRIR, sem atraso nenhum: o navegador recusa focar elemento invisível,
     e com a visibilidade dentro da transição o botão de fechar ainda não era
     focável no instante em que o JS tentava. O foco ficava no corpo da página,
     atrás do overlay — Tab passeava pelo conteúdo escondido. */
  transition: opacity var(--transicao), visibility 0s;
}

.lightbox__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--fonte-ui);
  font-size: var(--t-micro);
}

.lightbox__topo .botao-icone {
  color: var(--branco);
}

.lightbox__topo .botao-icone:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--branco);
}

.lightbox__palco {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--e-4);
  min-height: 0;
}

.lightbox__palco img {
  max-width: min(94vw, 1200px);
  max-height: 74vh;
  width: auto;
  object-fit: contain;
  border-radius: var(--r-sm);
}

.lightbox__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.12);
  color: var(--branco);
  transition: background var(--transicao-rapida);
}

.lightbox__seta:hover {
  background: rgba(255, 255, 255, 0.24);
}

.lightbox__seta--anterior { left: var(--e-4); }
.lightbox__seta--proxima { right: var(--e-4); }

.lightbox__seta .icone { width: 20px; height: 20px; }

.lightbox__rodape {
  padding: var(--e-4) var(--e-6) var(--e-7);
  text-align: center;
  color: rgba(255, 255, 255, 0.76);
  font-family: var(--fonte-ui);
  font-size: var(--t-micro);
  line-height: 1.5;
  max-width: 62ch;
  margin-inline: auto;
}

/* ---------- Rodape da materia ---------- */

.materia__rodape {
  max-width: 40rem;
  margin: var(--e-8) auto 0;
  display: grid;
  gap: var(--e-7);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--r-full);
  font-family: var(--fonte-ui);
  font-size: var(--t-micro);
  color: var(--cor-texto-medio);
  transition: background var(--transicao-rapida), border-color var(--transicao-rapida),
    color var(--transicao-rapida);
}

.tag:hover {
  background: var(--verde-800);
  border-color: var(--verde-800);
  color: var(--branco);
}

.compartilhar {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex-wrap: wrap;
  padding-block: var(--e-5);
  border-block: 1px solid var(--cor-borda);
}

.compartilhar__rotulo {
  font-family: var(--fonte-ui);
  font-size: var(--t-kicker);
  font-weight: var(--peso-forte);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
  margin-right: auto;
}

.compartilhar__botao {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--r-full);
  color: var(--grafite-700);
  transition: background var(--transicao-rapida), border-color var(--transicao-rapida),
    color var(--transicao-rapida);
}

.compartilhar__botao:hover {
  background: var(--verde-800);
  border-color: var(--verde-800);
  color: var(--branco);
}

.compartilhar__botao .icone { width: 17px; height: 17px; }

.autor-caixa {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--e-4);
  align-items: start;
  padding: var(--e-5);
  background: var(--cor-fundo-alt);
  border-radius: var(--r-sm);
}

.autor-caixa__inicial {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-full);
  background: var(--verde-800);
  color: var(--branco);
  font-family: var(--fonte-ui);
  font-size: 1.24rem;
  font-weight: var(--peso-forte);
}

.autor-caixa__nome {
  font-family: var(--fonte-ui);
  font-size: 1rem;
  font-weight: var(--peso-semi);
}

.autor-caixa__nome:hover { color: var(--laranja-700); }

.autor-caixa__cargo {
  font-family: var(--fonte-ui);
  font-size: var(--t-micro);
  color: var(--laranja-700);
  margin-top: 2px;
}

.autor-caixa__bio {
  margin-top: var(--e-3);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--cor-texto-suave);
}

/* Aviso de conteudo demonstrativo. */
.aviso-demo {
  display: flex;
  gap: var(--e-3);
  padding: var(--e-4);
  background: var(--laranja-50);
  border: 1px solid var(--laranja-100);
  border-radius: var(--r-sm);
  font-family: var(--fonte-ui);
  font-size: var(--t-micro);
  line-height: 1.55;
  color: var(--laranja-800);
}

.aviso-demo .icone {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ---------- Relacionadas ---------- */

.relacionadas {
  border-top: 1px solid var(--cor-borda);
  padding-top: var(--secao-y);
  margin-top: var(--secao-y);
}

/* ===== 09-paginas.css ===== */
/* ============================================================
   Templates de pagina: capa de secao, listagens, municipio,
   cadeia produtiva, anuario, busca, colecoes e estados.
   ============================================================ */

/* ---------- Capa de pagina ---------- */

.capa {
  padding-block: clamp(var(--e-7), 5vw, var(--e-10)) var(--e-7);
  border-bottom: 1px solid var(--cor-borda);
}

.capa--papel { background: var(--cor-fundo-alt); }

.capa--escura {
  background: var(--verde-900);
  color: var(--branco);
  border-bottom: none;
}

.capa--escola {
  background: var(--escola-clara);
  border-bottom: 4px solid var(--escola-primaria);
}

.capa__interno {
  display: grid;
  gap: var(--e-4);
  max-width: 68ch;
}

.capa__rotulo {
  font-family: var(--fonte-ui);
  font-size: var(--t-kicker);
  font-weight: var(--peso-forte);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--laranja-700);
}

.capa--escura .capa__rotulo { color: var(--laranja-400); }

.capa__titulo {
  font-size: var(--t-h1);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.capa__descricao {
  font-size: var(--t-corpo-g);
  line-height: 1.6;
  color: var(--cor-texto-suave);
  max-width: 62ch;
}

.capa--escura .capa__descricao { color: rgba(255, 255, 255, 0.78); }

.capa__indicadores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-5);
  margin-top: var(--e-3);
  font-family: var(--fonte-ui);
  font-size: var(--t-micro);
  color: var(--cor-texto-suave);
}

.capa__indicador {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
}

.capa__indicador strong {
  font-size: 1.05rem;
  font-weight: var(--peso-forte);
  color: var(--grafite-900);
  font-variant-numeric: tabular-nums;
}

.capa--escura .capa__indicador strong { color: var(--branco); }

/* ---------- Filtros / navegacao de subsecao ---------- */

.filtros {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex-wrap: wrap;
  padding-block: var(--e-4);
  border-bottom: 1px solid var(--cor-borda);
}

.filtro {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-4);
  border: 1px solid var(--cor-borda);
  border-radius: var(--r-full);
  font-family: var(--fonte-ui);
  font-size: var(--t-micro);
  font-weight: var(--peso-medio);
  color: var(--cor-texto-medio);
  white-space: nowrap;
  transition: background var(--transicao-rapida), border-color var(--transicao-rapida),
    color var(--transicao-rapida);
}

.filtro:hover {
  border-color: var(--verde-700);
  color: var(--verde-800);
}

.filtro[aria-current='page'],
.filtro.ativo {
  background: var(--verde-800);
  border-color: var(--verde-800);
  color: var(--branco);
}

.filtro__contagem {
  font-variant-numeric: tabular-nums;
  opacity: 0.65;
}

/* ---------- Listagem de materias ---------- */

.listagem {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: var(--e-8) var(--coluna-gap);
}

.listagem--densa {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* Paginacao */
.paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  margin-top: var(--secao-y);
  padding-top: var(--e-6);
  border-top: 1px solid var(--cor-borda);
}

.paginacao__link {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--e-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--r-sm);
  font-family: var(--fonte-ui);
  font-size: var(--t-pequeno);
  font-weight: var(--peso-medio);
  color: var(--grafite-700);
  font-variant-numeric: tabular-nums;
  transition: background var(--transicao-rapida), border-color var(--transicao-rapida),
    color var(--transicao-rapida);
}

.paginacao__link:hover {
  border-color: var(--verde-800);
  color: var(--verde-800);
}

.paginacao__link[aria-current='page'] {
  background: var(--verde-800);
  border-color: var(--verde-800);
  color: var(--branco);
}

.paginacao__link[aria-disabled='true'] {
  opacity: 0.4;
  pointer-events: none;
}

.paginacao__reticencias {
  padding-inline: var(--e-2);
  color: var(--cinza-400);
}

/* ---------- Municipio ---------- */

.municipio-hero {
  position: relative;
  overflow: hidden;
  background: var(--verde-900);
  color: var(--branco);
}

.municipio-hero__fundo {
  position: absolute;
  inset: 0;
}

.municipio-hero__fundo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}

.municipio-hero__conteudo {
  position: relative;
  z-index: 2;
  padding-block: clamp(var(--e-8), 7vw, var(--e-11));
  display: grid;
  gap: var(--e-4);
  max-width: 62ch;
}

.municipio-hero__regiao {
  font-family: var(--fonte-ui);
  font-size: var(--t-kicker);
  font-weight: var(--peso-forte);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--laranja-400);
}

.municipio-hero__nome {
  font-size: var(--t-display);
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.municipio-hero__resumo {
  font-size: var(--t-corpo-g);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

.municipio-hero__cadeias {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-3);
}

.municipio-hero__cadeia {
  padding: var(--e-2) var(--e-3);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--r-full);
  font-family: var(--fonte-ui);
  font-size: var(--t-micro);
  color: rgba(255, 255, 255, 0.9);
  transition: background var(--transicao-rapida), border-color var(--transicao-rapida);
}

.municipio-hero__cadeia:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.6);
}

/* ---------- Colecoes genericas (escolas, professores, projetos, materiais) ---------- */

.colecao {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 1px;
  background: var(--cor-borda);
  border: 1px solid var(--cor-borda);
}

.colecao__item {
  display: grid;
  gap: var(--e-2);
  align-content: start;
  padding: var(--e-5);
  background: var(--cor-fundo);
  transition: background var(--transicao-rapida);
}

a.colecao__item:hover { background: var(--cor-fundo-alt); }

.colecao__rotulo {
  font-family: var(--fonte-ui);
  font-size: var(--t-kicker);
  font-weight: var(--peso-semi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--laranja-700);
}

.colecao__titulo {
  font-size: 1.1rem;
  line-height: 1.25;
}

a.colecao__item:hover .colecao__titulo { color: var(--laranja-700); }

.colecao__texto {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--cor-texto-suave);
}

.colecao__marcas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-2);
}

.colecao__marca {
  padding: 2px var(--e-2);
  background: var(--verde-50);
  border-radius: var(--r-sm);
  font-family: var(--fonte-ui);
  font-size: 0.7rem;
  color: var(--verde-800);
}

/* ---------- Semeaduras ---------- */

.trabalho {
  display: grid;
  gap: var(--e-3);
  align-content: start;
}

.trabalho__imagem {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
}

.trabalho__imagem img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--transicao-lenta);
}

.trabalho:hover .trabalho__imagem img { transform: scale(1.04); }

.trabalho__posicao {
  position: absolute;
  left: var(--e-3);
  top: var(--e-3);
  z-index: 2;
  padding: 3px var(--e-3);
  border-radius: var(--r-sm);
  font-family: var(--fonte-ui);
  font-size: 0.64rem;
  font-weight: var(--peso-forte);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.trabalho__posicao--vencedor {
  background: var(--laranja-600);
  color: var(--branco);
}

.trabalho__posicao--finalista {
  background: var(--branco);
  color: var(--grafite-800);
  border: 1px solid var(--cor-borda);
}

.trabalho__titulo { font-size: 1.06rem; line-height: 1.28; }

.trabalho__ficha {
  display: grid;
  gap: 3px;
  font-family: var(--fonte-ui);
  font-size: var(--t-micro);
  color: var(--cor-texto-suave);
}

.trabalho__ficha strong {
  color: var(--grafite-800);
  font-weight: var(--peso-medio);
}

/* ---------- Anuario ---------- */

.anuario-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr);
  gap: clamp(var(--e-6), 5vw, var(--e-10));
  align-items: center;
}

/* Mesma razão do cartão: a capa mantém a forma do PDF. Ver 06-cards.css. */
/* Mesma razão do cartão: a capa mantém a forma do arquivo, sem corte.
   Ver .edicao__capa em 06-cards.css. */
.anuario-hero__capa img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  box-shadow: var(--sombra-alta);
}

.anuario-hero__destaques {
  list-style: none;
  display: grid;
  gap: var(--e-3);
  margin-top: var(--e-6);
}

.anuario-hero__destaques li {
  position: relative;
  padding-left: var(--e-5);
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.84);
}

.anuario-hero__destaques li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 12px;
  height: 2px;
  background: var(--laranja-500);
}

.anuario-hero__ficha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-5);
  margin-top: var(--e-6);
  padding-top: var(--e-5);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-family: var(--fonte-ui);
  font-size: var(--t-micro);
  color: rgba(255, 255, 255, 0.66);
}

@media (max-width: 768px) {
  .anuario-hero { grid-template-columns: minmax(0, 1fr); }
  .anuario-hero__capa { max-width: 250px; }
}

/* ---------- Pagina de busca ---------- */

.busca-pagina__campo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-5);
  background: var(--branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--r-sm);
  box-shadow: var(--sombra-sutil);
  max-width: 40rem;
}

.busca-pagina__campo:focus-within {
  border-color: var(--verde-700);
}

.busca-pagina__campo .icone {
  width: 20px;
  height: 20px;
  color: var(--cinza-400);
}

.busca-pagina__input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-family: var(--fonte-titulo);
  font-size: 1.15rem;
}

.busca-pagina__contagem {
  margin-top: var(--e-5);
  font-family: var(--fonte-ui);
  font-size: var(--t-pequeno);
  color: var(--cor-texto-suave);
}

.busca-pagina__resultados {
  margin-top: var(--e-6);
  border-top: 1px solid var(--cor-borda);
}

.busca-pagina__resultados .resultado {
  padding-inline: 0;
  grid-template-columns: 96px minmax(0, 1fr);
}

.busca-pagina__resultados .resultado__imagem { width: 96px; }

.busca-pagina__resultados .resultado__resumo {
  margin-top: var(--e-2);
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--cor-texto-suave);
}

.busca-sugestoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-4);
}

/* ---------- Estados ---------- */

.estado-vazio {
  display: grid;
  justify-items: center;
  gap: var(--e-4);
  padding-block: var(--e-10);
  text-align: center;
}

.estado-vazio__icone {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: var(--r-full);
  background: var(--cor-fundo-alt);
  color: var(--cinza-400);
}

.estado-vazio__icone .icone { width: 26px; height: 26px; }

.estado-vazio__titulo {
  font-size: var(--t-h3);
  letter-spacing: -0.02em;
}

.estado-vazio__texto {
  max-width: 46ch;
  color: var(--cor-texto-suave);
  line-height: 1.6;
}

.estado-vazio__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  justify-content: center;
  margin-top: var(--e-2);
}

/* Pagina 404 */
.erro-404 {
  display: grid;
  justify-items: center;
  gap: var(--e-5);
  padding-block: clamp(var(--e-9), 10vw, var(--e-12));
  text-align: center;
}

.erro-404__codigo {
  font-family: var(--fonte-ui);
  font-size: clamp(4rem, 2rem + 12vw, 9rem);
  font-weight: var(--peso-forte);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--verde-800);
  font-variant-numeric: tabular-nums;
}

/* ---------- Paginas institucionais ---------- */

.pagina-texto {
  max-width: 40rem;
  margin-inline: auto;
}

.pagina-texto > * + * { margin-top: var(--e-5); }

.pagina-texto p {
  font-size: var(--t-corpo-g);
  line-height: var(--altura-texto);
  color: var(--grafite-800);
}

.pagina-texto h2 {
  margin-top: var(--e-8);
  font-size: var(--t-h3);
  letter-spacing: -0.022em;
}

.pagina-texto ul {
  display: grid;
  gap: var(--e-3);
  padding-left: var(--e-5);
  list-style: none;
}

.pagina-texto ul li {
  position: relative;
  padding-left: var(--e-4);
  line-height: 1.6;
}

.pagina-texto ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--laranja-500);
}

/* Formulario de contato / anuncie */
.formulario {
  display: grid;
  gap: var(--e-5);
  max-width: 34rem;
}

.formulario .campo__rotulo {
  color: var(--grafite-800);
}

.formulario .campo__entrada {
  background: var(--branco);
  border-color: var(--cor-borda);
  color: var(--grafite-900);
}

.formulario .campo__entrada:focus {
  border-color: var(--verde-700);
  background: var(--branco);
}

.formulario .campo__erro { color: var(--laranja-700); }

.formulario textarea.campo__entrada {
  min-height: 150px;
  resize: vertical;
  font-family: var(--fonte-texto);
  line-height: 1.6;
}

.ficha-contato {
  display: grid;
  gap: var(--e-5);
  align-content: start;
}

.ficha-contato__item {
  display: grid;
  gap: var(--e-1);
}

.ficha-contato__rotulo {
  font-family: var(--fonte-ui);
  font-size: var(--t-kicker);
  font-weight: var(--peso-forte);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--laranja-700);
}

.ficha-contato__valor {
  font-size: 1.05rem;
  color: var(--grafite-900);
}

a.ficha-contato__valor:hover { color: var(--laranja-700); }

/* Tabela de formatos publicitarios */
.tabela {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--fonte-ui);
  font-size: var(--t-pequeno);
}

.tabela th,
.tabela td {
  padding: var(--e-3) var(--e-4);
  text-align: left;
  border-bottom: 1px solid var(--cor-borda);
}

.tabela th {
  font-size: var(--t-kicker);
  font-weight: var(--peso-forte);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--verde-800);
  border-bottom: 2px solid var(--grafite-900);
}

.tabela td { color: var(--cor-texto-medio); }

.tabela tr:hover td { background: var(--cor-fundo-alt); }

.tabela-envolvente {
  width: 100%;
  overflow-x: auto;
}

/* ===== 10-rodape.css ===== */
/* ============================================================
   Rodape.
   ============================================================ */

.rodape {
  background: var(--verde-900);
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--fonte-ui);
  font-size: var(--t-pequeno);
}

.rodape__topo {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 2.6fr);
  gap: clamp(var(--e-6), 5vw, var(--e-9));
  padding-block: clamp(var(--e-8), 6vw, var(--e-10));
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.rodape__assinatura {
  display: block;
  margin-top: var(--e-2);
  font-size: 0.62rem;
  font-weight: var(--peso-medio);
  /* O espaçamento era 0.26em e sozinho somava ~87px de largura, fazendo a
     assinatura quebrar em duas linhas dentro da coluna de 244px. Pela metade,
     ela cabe em uma linha só. */
  letter-spacing: 0.13em;
  text-transform: uppercase;
  /* Opacidade sobe junto: texto menor com o mesmo contraste anterior ficaria
     abaixo do mínimo legível sobre o verde escuro. */
  color: rgba(255, 255, 255, 0.62);
}

.rodape__sobre {
  margin-top: var(--e-5);
  max-width: 38ch;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
}

.rodape__social {
  display: flex;
  gap: var(--e-2);
  margin-top: var(--e-6);
}

.rodape__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-full);
  color: rgba(255, 255, 255, 0.78);
  transition: background var(--transicao-rapida), border-color var(--transicao-rapida),
    color var(--transicao-rapida);
}

.rodape__social a:hover {
  background: var(--laranja-600);
  border-color: var(--laranja-600);
  color: var(--branco);
}

.rodape__social .icone { width: 17px; height: 17px; }

.rodape__colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: var(--e-6) var(--coluna-gap);
}

.rodape__coluna-titulo {
  font-size: var(--t-kicker);
  font-weight: var(--peso-forte);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--branco);
  padding-bottom: var(--e-3);
  margin-bottom: var(--e-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.rodape__lista {
  list-style: none;
  display: grid;
  gap: var(--e-3);
}

.rodape__link {
  color: rgba(255, 255, 255, 0.72);
  transition: color var(--transicao-rapida), transform var(--transicao-rapida);
  display: inline-block;
}

.rodape__link:hover {
  color: var(--laranja-400);
  transform: translateX(3px);
}

.rodape__contato {
  display: grid;
  gap: var(--e-4);
  padding-block: var(--e-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.rodape__contato-item {
  display: grid;
  gap: var(--e-1);
}

.rodape__contato-rotulo {
  font-size: var(--t-kicker);
  font-weight: var(--peso-semi);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.rodape__contato-valor {
  color: var(--branco);
  font-size: 0.95rem;
}

a.rodape__contato-valor:hover { color: var(--laranja-400); }

.rodape__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
  /* O recuo inferior maior libera a faixa ocupada pelo atalho flutuante,
     que e fixo e cobriria a ultima linha do rodape. */
  padding-block: var(--e-5) var(--e-10);
  font-size: var(--t-micro);
  color: rgba(255, 255, 255, 0.45);
}

.rodape__base-links {
  display: flex;
  gap: var(--e-5);
  flex-wrap: wrap;
}

.rodape__base a { transition: color var(--transicao-rapida); }
.rodape__base a:hover { color: var(--laranja-400); }

.voltar-topo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-micro);
  font-weight: var(--peso-semi);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  transition: color var(--transicao-rapida);
}

.voltar-topo:hover { color: var(--laranja-400); }
.voltar-topo .icone { width: 14px; height: 14px; }

@media (max-width: 900px) {
  .rodape__topo { grid-template-columns: minmax(0, 1fr); }
}

/* ===== 11-marca.css ===== */
/* ============================================================
   Logotipo ANUAGRO
   Wordmark 1193.76 x 155.84 — proporção 7,66:1.
   Dimensionado por largura; a altura acompanha sozinha.
   ============================================================ */

:root {
  /* Cores oficiais, extraídas do arquivo da marca.
     Ficam separadas dos tokens de interface de propósito: a logo tem
     cor fixa, a interface tem papéis (--cor-marca, --cor-destaque). */
  --marca-verde: #007450;
  --marca-laranja: #f18702;
}

.logo {
  display: block;
  width: 100%;
  height: auto;
}

.logo__anu {
  fill: var(--marca-verde);
  transition: fill var(--transicao-rapida);
}

.logo__agro {
  fill: var(--marca-laranja);
  transition: fill var(--transicao-rapida);
}

/* Sobre fundo escuro o verde da marca não sobrevive — o "ANU" some.
   Nesses contextos ele vira branco e o laranja permanece, preservando
   a leitura em duas partes que a marca propõe. */
.logo--clara .logo__anu {
  fill: var(--branco);
}

/* ---------- Tamanhos por contexto ---------- */

/* Masthead: o elemento de maior presença da página. */
.logo--masthead {
  width: clamp(15rem, 34vw, 30rem);
}

/* Cabeçalho compacto fixo. */
.logo--compacta {
  width: 9.25rem;
}

/* Topo do menu mobile. */
.logo--menu {
  width: 8.75rem;
}

/* Rodapé. */
.logo--rodape {
  width: 13.5rem;
}

@media (max-width: 860px) {
  .logo--masthead {
    width: clamp(12.5rem, 52vw, 18rem);
  }
}

@media (max-width: 430px) {
  .logo--masthead {
    width: min(64vw, 15rem);
  }
}

/* ---------- Link que envolve a logo ---------- */

.marca-link {
  display: inline-block;
  line-height: 0;
  transition: opacity var(--transicao-rapida);
}

.marca-link:hover {
  opacity: 0.82;
}

.marca-link:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 6px;
  border-radius: var(--r-sm);
}

/* Assinatura sob a logo do masthead. */
.masthead__marca {
  gap: var(--e-3);
}

/* ============================================================
   Logo do Agro é Escola
   Lockup 283.66 x 125.84 — proporção 2,25:1.
   Só aparece sobre fundos claros, por isso vem como arquivo externo
   (e não inline): é baixada uma vez e reaproveitada nas páginas do miniportal.
   ============================================================ */

.logo-escola {
  display: block;
  width: clamp(11.25rem, 24vw, 17.5rem);
  height: auto;
}

/* Capa do miniportal — presença maior. */
.logo-escola--capa {
  width: clamp(12.5rem, 28vw, 20rem);
}

@media (max-width: 560px) {
  .logo-escola,
  .logo-escola--capa {
    width: min(58vw, 13.75rem);
  }
}

/* O h1 da capa envolve a logo: o texto fica acessível a leitores de tela
   e a buscadores, sem aparecer duas vezes na tela. */
.capa__titulo--logo {
  margin: 0;
}

@media print {
  .logo__anu,
  .logo__agro {
    fill: #000;
  }
}

/* ===== 12-video.css ===== */
/* ============================================================
   Vídeo — clipe hospedado aqui e reportagem incorporada.
   Ver DESIGN.md, seção "Vídeo".
   ============================================================ */

/* ---------- Clipe curto de abertura ----------
   Ocupa o mesmo contentor da fotografia, com a mesma proporção declarada.
   Nada aqui muda o layout: o vídeo entra no lugar exato da imagem. */

/* A classe vem no próprio <video>, e não do contentor: o clipe aparece na
   figura da matéria, no cartão e na prévia do mega-menu, e nem todos esses
   pontos passam por midia(). Marcar o elemento alcança todos. */
.clipe {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Os controles esperam o cursor chegar — mas SÓ onde existe cursor.

   A versão anterior escondia sempre e revelava no hover. Em aparelho de toque
   não há hover: os controles ficavam invisíveis para sempre, e como opacity 0
   ainda recebe clique, o leitor tocava num botão que não via. Pior que ausente.

   `hover: hover` e `pointer: fine` juntos descrevem mouse ou trackpad. Em
   celular e tablet a consulta não casa e os controles ficam visíveis o tempo
   todo, que é o único jeito de o vídeo ser assistível ali. */

@media (hover: hover) and (pointer: fine) {
  .clipe::-webkit-media-controls {
    opacity: 0;
    transition: opacity var(--transicao);
  }

  .clipe:hover::-webkit-media-controls,
  .clipe:focus::-webkit-media-controls,
  .clipe:focus-visible::-webkit-media-controls {
    opacity: 1;
  }

  /* Movimento reduzido: 09-video.js desfaz o autoplay, então o pôster fica
     parado. Esconder os controles aí deixaria um quadro estático sem saída. */
  @media (prefers-reduced-motion: reduce) {
    .clipe::-webkit-media-controls {
      opacity: 1;
    }
  }
}

/* O clipe é focável pelo teclado — sem isto, quem navega por Tab não alcança
   os controles nem o vídeo. */
.clipe:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 3px;
}

/* ---------- Reportagem incorporada ----------
   Enquanto o leitor não pede, não existe iframe: só pôster, título e botão. */

.incorporado {
  position: relative;
  margin: var(--e-8) 0;
  overflow: hidden;
  background: var(--verde-900);
}

.incorporado__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Escurece o pôster para o texto por cima ter contraste sem caixa opaca. */
  filter: brightness(0.55);
}

.incorporado__frente {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--e-4);
  min-height: 100%;
  padding: var(--e-7) var(--e-5);
  text-align: center;
}

.incorporado__titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--t-h3);
  line-height: 1.2;
  color: var(--branco);
  max-width: 24ch;
  text-wrap: balance;
}

.incorporado__botao {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0.7em 1.4em;
  font-family: var(--fonte-ui);
  font-size: var(--t-pequeno);
  font-weight: var(--peso-semi);
  color: var(--verde-900);
  background: var(--branco);
  border: none;
  cursor: pointer;
  transition: background var(--transicao), transform var(--transicao);
}

.incorporado__botao:hover {
  background: var(--laranja-400);
}

.incorporado__botao .icone {
  width: 1.1em;
  height: 1.1em;
}

/* A nota de cookie não é letra miúda escondida: é o motivo de existir este
   passo intermediário, e precisa ser legível antes do clique. */
.incorporado__nota {
  font-family: var(--fonte-ui);
  font-size: var(--t-kicker);
  line-height: 1.5;
  color: var(--verde-200);
  max-width: 44ch;
}

.incorporado__link {
  color: var(--branco);
  font-family: var(--fonte-ui);
  font-size: var(--t-pequeno);
}

/* Depois do consentimento, o iframe substitui a frente por completo. */
.incorporado.esta-tocando .incorporado__frente,
.incorporado.esta-tocando .incorporado__poster {
  display: none;
}

.incorporado iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .incorporado__botao {
    transition: none;
  }
}

/* ===== 13-publicidade.css ===== */
/* ============================================================
   Publicidade — a peça dentro do espaço reservado.
   ============================================================ */

/* Espaço vendido perde o tracejado e o texto de reservado: o placeholder
   existe para mostrar que o lugar está livre, não para emoldurar o anúncio. */
.anuncio.esta-vendido .anuncio__area {
  outline: none;
  padding: 0;
  background: none;
}

.anuncio__peca {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

.anuncio.esta-vendido a {
  display: block;
  line-height: 0;
}

/* Meia página acompanha a rolagem da coluna — é o que justifica o preço dela.
   Só onde há espaço lateral; em tela estreita volta a ser estático. */
@media (min-width: 1024px) {
  .anuncio--meia-pagina {
    position: sticky;
    top: 6.5rem;
  }
}

/* ===== 14-revista.css ===== */
/* ============================================================
   Revista digital — o leitor do anuário.

   A REGRA DE OURO DESTE ARQUIVO

   O CSS não decide o tamanho da revista. Quem mede o palco e calcula a
   maior página que cabe é assets/js/12-revista.js, que escreve o
   resultado em --pagina-largura e --pagina-altura.

   A versão anterior tentava resolver isso com `max-height: calc(78vh -
   8rem)`. Deu nos dois defeitos que este arquivo existe para não repetir:
   a revista ocupava um terço da largura disponível, perdida no vazio, e o
   zoom não fazia nada — o canvas crescia e esta folha o cortava de volta.

   Fundo escuro de propósito: a página do PDF é branca e vira a única
   fonte de luz, como numa sala de leitura.
   ============================================================ */

.revista {
  --pagina-largura: 300px;
  --pagina-altura: 420px;

  --revista-tinta: #eef1f3;
  --revista-suave: #9aa4ac;
  --revista-vidro: rgba(22, 26, 30, 0.82);

  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  height: clamp(26rem, 82vh, 60rem);
  overflow: hidden;
  border-radius: 6px;
  background: #0f1113;
  color: var(--revista-tinta);
  isolation: isolate;
}

.revista:fullscreen {
  height: 100vh;
  border-radius: 0;
}

/* ============================================================
   FUNDO

   A própria página, minúscula, esticada e desfocada. É o que tira a
   revista do retângulo chapado e a põe num ambiente.
   ============================================================ */

.revista__fundo {
  position: absolute;
  inset: -12%;
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: blur(64px) saturate(1.5) brightness(0.55);
  opacity: 0.85;
  transition: background-image 400ms ease;
}

/* Escurece o miolo para a revista se destacar do próprio halo. */
.revista__fundo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 70% at 50% 50%, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.72) 100%);
}

/* ============================================================
   CABEÇALHO
   ============================================================ */

.revista__cabecalho {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem clamp(0.75rem, 2vw, 1.25rem);
}

.revista__voltar {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem 0.4rem 0.45rem;
  border-radius: 999px;
  background: var(--revista-vidro);
  backdrop-filter: blur(8px);
  color: var(--revista-tinta);
  font-size: 0.8125rem;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.10);
}
.revista__voltar:hover { background: rgba(38,44,50,0.9); color: #fff; }
.revista__voltar svg { width: 16px; height: 16px; }

/* A ficha da edição e o portal inteiro: dois destinos, dois botões. */
.revista__saidas {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.5vw, 1rem);
}

/* É um h1 — o título desta página é a edição. O tamanho é de etiqueta
   porque quem manda na tela é a revista, não o cabeçalho; a hierarquia
   quem carrega é a marcação, não o corpo da letra. Daí `font-weight`
   explícito: h1 vem em negrito por padrão do navegador. */
.revista__nome {
  font-size: 0.75rem;
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--revista-suave);
  margin: 0;
}

@media (max-width: 560px) {
  .revista__nome { display: none; }
  /* Tela estreita: os dois botões não cabem com texto. O de voltar ao
     portal fica só com o ícone de casa, que já diz para onde vai — e o
     rótulo continua lá para o leitor de tela. */
  .revista__voltar--portal span {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .revista__voltar--portal { padding: 0.4rem 0.5rem; }
}

/* ============================================================
   PALCO E LIVRO

   O palco centra; o livro tem o tamanho que o JS mediu. Com zoom o
   livro fica maior que o palco e o palco rola — que é o único jeito de
   um zoom significar alguma coisa.
   ============================================================ */

.revista__palco {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  /* Margem estreita de propósito: com a tela inteira à disposição, cada
     rem de folga aqui sai da largura da página do anuário. As laterais
     guardam só o espaço das setas; o rodapé, o da barra flutuante. */
  /* Margem lateral estreita: cada rem de folga sai da largura da página do
     anuário, e a página é diagramada para A4 impresso.

     Embaixo é diferente — ali mora a barra flutuante, e o mínimo precisa
     ser a altura dela mais o afastamento do pé, senão o rodapé da página
     do anuário fica coberto pela barra. */
  padding: clamp(0.5rem, 1.6vh, 1.25rem) clamp(2.5rem, 4.5vw, 4.5rem) clamp(5rem, 8vh, 6rem);
  /* SEM BARRA DE ROLAGEM, NUNCA.

     O palco era `overflow: auto`, e no tamanho normal a página cabe com
     folga — mas bastava um pixel de arredondamento, uma folha em
     movimento ou um sistema de barras que ocupam espaço para as duas
     barras aparecerem por cima da revista. Numa tela de leitura elas não
     são recurso nenhum: são moldura de janela dentro do livro.

     Ampliada, o palco continua rolando — só que pela mão, não por barra:
     ver `arrastarPalco` em 12-revista.js. É o gesto que o cursor de mão
     já prometia e que antes não existia. */
  overflow: hidden;
  min-height: 0;
}

.esta-ampliada .revista__palco {
  overflow: auto;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* Edge legado */
}

.esta-ampliada .revista__palco::-webkit-scrollbar { width: 0; height: 0; }

.esta-ampliada .revista__palco { cursor: grab; }
.esta-movendo .revista__palco { cursor: grabbing; }

.revista__livro {
  position: relative;
  display: flex;
  align-items: stretch;
  /* A sombra é do conjunto, não de cada página: por isso drop-shadow no
     invólucro, e não box-shadow nos dois canvas — que desenharia uma
     sombra no meio, entre as páginas, onde não existe borda nenhuma. */
  filter: drop-shadow(0 18px 40px rgba(0,0,0,0.55)) drop-shadow(0 3px 8px rgba(0,0,0,0.4));
  cursor: pointer;
  /* A centragem da capa e da contracapa é feita por transformação, e só
     muda com a folha já assentada — daí ser seguro animá-la. Ver
     centralizar() em 12-revista.js. */
  transition: transform 340ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* No primeiro desenho a posição não tem de onde vir: sem isto a revista
   entra deslizando de lado, como se estivesse consertando um erro. */
.revista:not(.esta-pronta) .revista__livro { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .revista__livro { transition: none; }
}

/* O cursor diz o que a mão pode fazer.
   Perto de um canto livre, a página é pegável; durante o arrasto, ela
   está presa. É a única pista que o leitor recebe antes de tentar — o
   canto levantado só aparece depois que o ponteiro já chegou lá. */
.tem-canto { cursor: grab; }
.esta-arrastando .revista__palco,
.esta-arrastando .revista__livro,
.esta-arrastando .tem-canto { cursor: grabbing; }

/* Enquanto a folha está na mão, nada de seleção de texto nem de arrasto
   nativo de imagem atrapalhando o gesto. */
.esta-arrastando { user-select: none; -webkit-user-select: none; }
.esta-arrastando .revista__canvas { pointer-events: none; }

.revista__lado {
  position: relative;
  width: var(--pagina-largura);
  height: var(--pagina-altura);
  background: #fff;
  flex: 0 0 auto;
}

.revista__lado--vazio { display: none; }

/* Lado vazio que continua ocupando espaço.
   Vale só durante a virada: sem ele, chegar à capa fazia o livro encolher
   com a folha ainda no ar, e a folha — desenhada nas coordenadas antigas
   do palco — ficava solta enquanto o resto pulava para o lado. */
.revista__lado--reservado {
  background: transparent;
  box-shadow: none;
}
.revista__lado--reservado::after { display: none; }

/* Cantos externos arredondados, como papel aparado. O lado da costura
   fica reto — ali o papel entra na lombada. */
.revista__lado[data-lado="esquerda"] { border-radius: 3px 0 0 3px; }
.revista__lado[data-lado="direita"] { border-radius: 0 3px 3px 0; }
.revista__palco--simples .revista__lado { border-radius: 3px; }

.revista__canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

/* ---------- Miolo ----------
   A sombra da costura não é uma linha: é um degradê que abre por uns 9%
   da página. box-shadow não aceita várias paradas, então é sobreposto. */

.revista__lado::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9%;
  pointer-events: none;
  z-index: 2;
}

.revista__lado[data-lado="esquerda"]::after {
  right: 0;
  background: linear-gradient(to right,
    rgba(0,0,0,0) 0%, rgba(0,0,0,0.04) 55%, rgba(0,0,0,0.24) 92%, rgba(0,0,0,0.38) 100%);
}

.revista__lado[data-lado="direita"]::after {
  left: 0;
  background: linear-gradient(to left,
    rgba(0,0,0,0) 0%, rgba(0,0,0,0.04) 55%, rgba(0,0,0,0.24) 92%, rgba(0,0,0,0.38) 100%);
}

.revista__palco--simples .revista__lado::after { display: none; }

/* ---------- Espessura ----------
   As folhas não lidas empilham de um lado e as lidas do outro. Sem isso
   o objeto não tem massa: são duas imagens lado a lado. As proporções
   vêm do JS em --folhas-esq / --folhas-dir. */

.revista__livro::before,
.revista__livro::after {
  content: '';
  position: absolute;
  top: 0.6%;
  bottom: 0.6%;
  width: calc(var(--espessura, 0) * 13px);
  background: repeating-linear-gradient(to right,
    rgba(255,255,255,0.94) 0 1px,
    rgba(168,173,178,0.9) 1px 2px);
  pointer-events: none;
  /* Sem transição de propósito. A espessura muda uma vez por virada, e a
     virada dura quase um segundo com o olho na folha que dobra — ninguém
     olha para 13px de borda. Animar `width` custaria layout por quadro
     para um efeito que não se vê, e escalar em vez disso borraria as
     linhas de 1px que fazem a pilha parecer papel. */
}

.revista__livro::before {
  --espessura: var(--folhas-esq, 0);
  right: 100%;
  border-radius: 2px 0 0 2px;
}

.revista__livro::after {
  --espessura: var(--folhas-dir, 0);
  left: 100%;
  border-radius: 0 2px 2px 0;
}

.revista__palco--simples .revista__livro::before,
.revista__palco--simples .revista__livro::after { display: none; }

/* ---------- A folha em movimento ----------
   Só a tela. A geometria, a curva, a luz e a sombra são desenhadas em
   JavaScript. Não há transição aqui de propósito: transição interpola um
   valor entre dois estados, e a folha muda de forma a cada quadro. */

.revista__curva {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  pointer-events: none;
}

/* ============================================================
   SETAS

   Grandes e nas bordas: no computador o alvo confortável é a margem da
   tela, não um botão pequeno na barra. Somem no toque, onde o gesto é
   arrastar e o polegar não alcança a borda.
   ============================================================ */

.revista__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 46px;
  height: 84px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 8px;
  background: rgba(20, 24, 28, 0.42);
  color: rgba(255,255,255,0.62);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, opacity 180ms ease;
}

.revista__seta svg { width: 26px; height: 26px; }
.revista__seta:hover:not(:disabled) { background: rgba(28,34,40,0.86); color: #fff; }
.revista__seta:disabled { opacity: 0; pointer-events: none; }
.revista__seta:focus-visible { outline: 2px solid #7fb096; outline-offset: 3px; }

.revista__seta--esq { left: clamp(0.25rem, 1.5vw, 1rem); }
.revista__seta--dir { right: clamp(0.25rem, 1.5vw, 1rem); }

@media (hover: none), (max-width: 700px) {
  .revista__seta { display: none; }
}

/* Sem as setas laterais, a margem que existia para elas é largura jogada
   fora — e no celular largura é tudo: a página do anuário é diagramada
   para A4, e cada milímetro conta para o texto ficar legível.

   Com a margem de desktop, a página saía com 295px numa tela de 375.
   Sem ela, passa de 350. */
@media (max-width: 700px) {
  .revista__palco { padding-inline: 0.5rem; }
}

/* ============================================================
   BARRA FLUTUANTE

   Sobre a revista, não abaixo dela: assim o palco fica com toda a altura
   e a barra some do caminho da leitura.
   ============================================================ */

.revista__barra {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: clamp(0.75rem, 2.5vh, 1.5rem);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.3rem 0.45rem;
  border-radius: 999px;
  background: var(--revista-vidro);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  max-width: calc(100% - 1.5rem);
}

.revista__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--revista-tinta);
  cursor: pointer;
  text-decoration: none;
  transition: background 160ms ease, opacity 160ms ease;
}

.revista__botao svg { width: 19px; height: 19px; }
.revista__botao:hover:not(:disabled) { background: rgba(255,255,255,0.12); }
.revista__botao:disabled { opacity: 0.28; cursor: default; }
.revista__botao:focus-visible { outline: 2px solid #7fb096; outline-offset: -2px; }

.revista__contador {
  padding: 0 0.6rem;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--revista-suave);
  white-space: nowrap;
}

.revista__separador {
  width: 1px;
  height: 20px;
  margin: 0 0.25rem;
  background: rgba(255,255,255,0.14);
}

@media (max-width: 420px) {
  .revista__barra { gap: 0; padding: 0.25rem 0.3rem; }
  .revista__botao { width: 34px; height: 34px; }
  .revista__separador { display: none; }
}

/* ============================================================
   SUMÁRIO
   ============================================================ */

.revista__sumario {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 7;
  width: min(300px, 84vw);
  display: flex;
  flex-direction: column;
  background: rgba(16, 19, 22, 0.94);
  backdrop-filter: blur(12px);
  border-left: 1px solid rgba(255,255,255,0.08);
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.esta-com-sumario .revista__sumario { transform: translateX(0); }

.revista__sumario-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.5rem 0.75rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.revista__sumario-topo p {
  margin: 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--revista-suave);
}

.revista__miniaturas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 0.6rem;
  padding: 1rem;
  overflow-y: auto;
}

.miniatura {
  display: grid;
  gap: 0.3rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--revista-suave);
  font: inherit;
  font-size: 0.6875rem;
}

.miniatura__quadro {
  display: block;
  background: rgba(255,255,255,0.06);
  border: 2px solid transparent;
  border-radius: 2px;
  overflow: hidden;
}

.miniatura__quadro canvas { display: block; width: 100%; height: auto; }
.miniatura:hover .miniatura__quadro { border-color: rgba(255,255,255,0.3); }
.miniatura.esta-ativo .miniatura__quadro { border-color: #f18702; }
.miniatura.esta-ativo { color: var(--revista-tinta); }

/* ============================================================
   ESTADOS

   Nunca uma tela branca: carregando tem barra, erro tem frase que diz o
   que houve, e os dois ocupam o lugar da revista.

   O [hidden] precisa do !important porque as regras de classe acima
   vencem a do navegador por especificidade — sem isto o painel de
   carregamento fica por cima da revista pronta, e o leitor parece
   travado. Foi exatamente o que aconteceu na primeira versão.
   ============================================================ */

[hidden] { display: none !important; }

.revista__estado {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
  background: #0f1113;
}

.revista__estado-texto { color: var(--revista-suave); max-width: 36ch; margin: 0; }
.revista__estado-texto a { color: #f18702; }
.revista__estado--erro .revista__estado-texto { color: #f0a878; }

.revista__barra-progresso {
  width: min(300px, 70vw);
  height: 3px;
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
  overflow: hidden;
}

/* Escala em vez de largura: a barra tem cor sólida, então esticar dá o
   mesmo desenho sem pedir layout a cada atualização de progresso — que
   chega dezenas de vezes durante o download de um anuário. */
.revista__barra-progresso::after {
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(var(--progresso, 0));
  transform-origin: left center;
  background: #f18702;
  transition: transform 200ms ease;
}

/* Enquanto carrega, o palco não pisca conteúdo pela metade. */
.revista:not(.esta-pronta) .revista__palco,
.revista:not(.esta-pronta) .revista__barra,
.revista:not(.esta-pronta) .revista__seta { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .revista__sumario,
  .revista__livro::before,
  .revista__livro::after,
  .revista__fundo { transition: none; }
}

/* ============================================================
   A PÁGINA QUE HOSPEDA O LEITOR
   ============================================================ */

/* ============================================================
   O LEITOR OCUPA O QUE SOBRA DA TELA

   O portal continua inteiro nesta página: cabeçalho em cima, rodapé
   embaixo. O que muda é que a revista não recebe uma altura arbitrária —
   ela recebe TODA a altura que sobra da janela depois do cabeçalho.

   Por que isso importa: a página do anuário é diagramada para A4
   impresso. Espremida num quadro de altura fixa, saía com 410px de
   largura, e ler ali é decifrar. Com o que sobra da janela, passa de
   500px.

   Quem escreve --revista-altura é assets/js/12-revista.js, que mede o
   espaço de verdade. Nenhum valor em `vh` sabe a altura do cabeçalho.

   O rodapé fica logo abaixo da dobra, a uma rolagem de distância — que é
   onde rodapé de site deve estar mesmo.
   ============================================================ */

/* O cabeçalho fica, em versão de leitura.

   A barra utilitária (data e redes) e a assinatura sob o logotipo custam
   144px do alto da janela — e aqui esses 144px são largura de página do
   anuário, porque a revista cresce com o que sobra. A marca e o menu
   inteiro continuam onde estão; some só o que não é navegação. */

.corpo-revista .barra-utilitaria { display: none; }
.corpo-revista .masthead { padding-block: var(--e-3); }
.corpo-revista .marca-assinatura { display: none; }

.corpo-revista .revista {
  height: var(--revista-altura, 82vh);
  max-height: none;
}

.secao--revista {
  padding-block: var(--e-3) var(--e-5);
}

.secao--revista > .revista { margin-inline: auto; max-width: 100rem; }

.revista-nota {
  margin: var(--e-3) auto 0;
  font-size: 0.8125rem;
  color: var(--cor-texto-suave);
  text-align: center;
}