/*! 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);

  /* Duas sombras: o anel laranja e a sombra de sempre.

     O atalho é verde-900 e flutua sobre o que estiver passando embaixo. Sobre
     o creme das seções claras, a própria cor já o separa. Sobre as seções de
     fundo verde-900 — a do anuário, o rodapé — ele encosta num fundo da
     mesma cor e some: sobra a sombra, que num fundo escuro quase não aparece,
     e o botão vira um retângulo de texto solto no ar.

     Anel, e não `border`: borda entra na caixa e empurraria os 42px dos
     botões. `box-shadow` desenha por fora, acompanhando o mesmo raio, sem
     mexer em medida nenhuma. E como é a primeira sombra da lista, fica
     colada no elemento, com a sombra de profundidade atrás. */
  box-shadow:
    0 0 0 1.5px var(--laranja-500),
    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;
}

/* O PONTO SEPARADOR NASCE DENTRO DO ITEM, E NÃO AO LADO DELE

   Era um <span> irmão. Num container `flex-wrap`, cada filho quebra por conta
   própria — e o ponto sobrava sozinho no fim da linha: "NOTÍCIAS ·" com a data
   embaixo. Oito linhas de meta da home já estavam assim antes de alguém
   reparar; o selo da edição só tornou o defeito mais frequente.

   Como `::before` do próprio item, o ponto pertence à caixa dele e quebra
   junto: ou os dois ficam na linha, ou os dois descem. A margem à direita
   repõe o espaço que o `gap` do flex dava quando o ponto era um filho.

   `:not(:first-child)` porque quem abre a linha não leva ponto — vale para a
   editoria à frente da meta da matéria e para o tipo à frente da do evento. */
/* A cadeia de atribuição: editoria · município · data.

   `inline-flex` e não `contents`: precisa ser uma caixa de verdade para que
   o flex de fora a trate como um item único e quebre a linha ANTES dela, e
   não no meio. Ver o comentário em metaMateria(), componentes/cards.js.

   A cadeia PODE quebrar entre os itens; o que não pode é um item quebrar por
   dentro. Tentei o contrário — `nowrap` na cadeia — e o resultado foi pior:
   em card estreito, "SUSTENTABILIDADE · 08 AGO 2026" não cabia, e a data se
   partia em "08 AGO" numa linha e "2026" na outra. Data partida ao meio é
   defeito de leitura; o ponto abrindo a linha de baixo é só um detalhe
   tipográfico. Entre os dois, escolhe-se o detalhe.

   O `white-space: nowrap` dos itens abaixo é o que garante isso: cada item
   se move inteiro para a linha seguinte, levando o próprio ponto junto. */
.meta__cadeia {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-2);
  min-width: 0;
}

/* Nenhum item da meta se parte por dentro: ou cabe na linha, ou desce inteiro. */
.meta__cadeia > * {
  white-space: nowrap;
}

.meta__cadeia .meta__item:not(:first-child)::before,
.meta__item:not(:first-child)::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-inline-end: var(--e-2);
  border-radius: var(--r-full);
  background: var(--cinza-300);
  vertical-align: middle;
}

.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);
}

/* Edição do anuário. Laranja claro com borda, e não o laranja cheio de
   `--plantao`: os dois apareceriam lado a lado na mesma linha, e dois blocos
   sólidos de laranja brigam. Aqui o preenchimento é suave e a borda faz o
   contorno — mesma paleta do selo grande na abertura da matéria, para que se
   reconheçam como a mesma coisa. */
.selo--edicao {
  background: var(--laranja-50);
  color: var(--laranja-700);
  border: 1px solid var(--laranja-100);
}

/* Selo sobreposto à imagem. */
/* Os selos sobre a foto, no canto superior esquerdo.

   Contêiner e não selo solto: uma matéria pode ser plantão E do anuário, e
   dois absolutos no mesmo top/left ficariam empilhados um sobre o outro.
   Num flex eles convivem, e o segundo desce sozinho quando a foto é estreita
   demais para os dois lado a lado.

   `max-width` para o selo não sangrar pela direita da imagem numa foto
   estreita — sem isso, "Edição 2027" ao lado de "Plantão" atravessava a
   borda em card de 4 colunas. */
.midia__selos {
  position: absolute;
  left: var(--e-3);
  top: var(--e-3);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  max-width: calc(100% - var(--e-3) * 2);
}

.midia__selos .selo {
  box-shadow: var(--sombra-sutil);
}

/* Na miniatura de 132px o recuo cheio come a foto: encosta mais na borda,
   e o selo aperta a fonte e o espaçamento para caber sem virar a imagem. */
.midia__selos--mini {
  left: var(--e-2);
  top: var(--e-2);
  max-width: calc(100% - var(--e-2) * 2);
}

.midia__selos--mini .selo {
  gap: 3px;
  padding: 2px 5px;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
}

.midia__selos--mini .selo .icone {
  width: 11px;
  height: 11px;
}

/* O selo da edição sobre foto precisa de fundo opaco: o laranja claro que
   ele usa na linha de meta some sobre uma imagem clara. */
.midia__selos .selo--edicao {
  background: var(--branco);
  border-color: var(--laranja-500);
  color: var(--laranja-700);
}

.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));
}

/* O palco das fotos da série.

   A moldura é que manda no tamanho, e não a foto. `aspect-ratio: 4/5` aqui
   em cima, com `object-fit: cover` nas imagens: retrato, paisagem ou
   quadrada, todas preenchem a mesma área e a seção não muda de altura a cada
   troca do carrossel. Sem isto, cada foto nova empurraria o texto ao lado. */
.serie-foto {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-sm);
  overflow: hidden;
}

/* Todos os quadros ocupam o mesmo lugar; só a opacidade muda.
   `visibility` junto com `opacity` para o quadro apagado sair também do
   alcance do ponteiro — só `opacity: 0` deixaria uma foto invisível
   interceptando o clique da que está à vista. */
.serie-foto__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.serie-foto__slide.ativo {
  opacity: 1;
  visibility: visible;
}

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

.serie-bloco__midia img {
  width: 100%;
  height: 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 ---------- */

/* ============================================================
   A EDIÇÃO DIGITAL EM TIRA

   Uma edição por cartão, correndo para o lado. Substituiu a chamada de
   uma edição só, que mostrava a atual e escondia o acervo — e o acervo é
   metade do que o anuário é: quem chega em 2027 quer poder abrir 2024.

   O QUE FAZ O LEITOR SABER QUE TEM MAIS

   O cartão seguinte aparecendo pela metade. É o único sinal que funciona
   sem instrução: seta pode ser decoração, ponto pode ser enfeite, mas
   coisa cortada na beira da tela só significa uma coisa. Por isso a tira
   sai do container e corre até a borda da janela — cortada no meio da
   tela, pareceria defeito de layout.
   ============================================================ */

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

.edicao-tira {
  /* A conta repete a do container (max-width 1320, padding lateral): assim o
     primeiro cartão nasce alinhado com o título acima, em qualquer largura. */
  --recuo: max(2.3rem, calc((100vw - 82.5rem) / 2 + 2.3rem));

  /* Sem isto, o encaixe do scroll-snap leva o primeiro cartão até a borda da
     tela e engole o recuo — o cartão descola do título que está logo acima.
     `scroll-padding` é o que diz ao rolador onde fica o "começo". */
  scroll-padding-inline: var(--recuo);

  /* Rola por dentro, sem barra à vista: quem arrasta não precisa dela, e
     numa faixa escura ela vira um risco cinza atravessado. */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;

  /* `mandatory`: o gesto SEMPRE termina com um cartão enquadrado.

     Era `proximity`, pelo receio de que arrastar meio cartão puxasse de
     volta e o gesto parecesse recusado. O preço foi pior do que o receio:
     com proximity o navegador só encaixa se a rolagem morrer perto de um
     ponto, então soltar no meio do caminho deixava o cartão cortado ao
     acaso — nem o atual inteiro, nem o seguinte inteiro.

     Com mandatory o encaixe vai para o ponto mais próximo: passou da
     metade, avança; não passou, volta. Não há posição intermediária em
     que a tira possa parar. */
  scroll-snap-type: x mandatory;

  cursor: grab;
}

.edicao-tira::-webkit-scrollbar { width: 0; height: 0; }

.esta-arrastando-tira { cursor: grabbing; }

.edicao-tira__trilho {
  display: flex;
  /* O gap é variável porque o espaçador do `::after` precisa cancelar
     exatamente este valor — e ele muda no celular. Com o número escrito à
     mão nos dois lugares, mexer num e esquecer o outro desalinha o recuo
     final sem que nada mais quebre. Aconteceu: 11px de folga no fim contra
     19 no começo. */
  --tira-gap: var(--e-5);
  gap: var(--tira-gap);
  margin: 0;
  list-style: none;

  /* Recuo da esquerda: padding. Da direita: o espaçador do `::after` logo
     abaixo — porque padding e margem no fim NÃO entram na área rolável.

     Medido nesta página: com `padding: 0.5rem var(--recuo)`, `scrollWidth`
     dava 1429 onde a soma dos filhos mais o padding dá 1466 — exatamente os
     37px do recuo faltando. Trocar por margem no último item dá no mesmo; o
     motor descarta os dois. O efeito visível era o último cartão terminar
     rente à borda da tela, com o botão encostado no fim, o que lê como
     cartão cortado — que é justamente o que a tira deveria evitar.

     A conta de `--recuo` repete a do container (max-width 1320, padding
     lateral): assim o primeiro cartão nasce alinhado com o título acima,
     em qualquer largura de tela. */
  padding: 0.5rem 0 0.5rem var(--recuo);
}

/* O recuo do fim da tira, como ITEM e não como espaço.

   Item de flex o navegador conta na área rolável; padding e margem no fim,
   não. É a única forma que sobrevive à medição — ver o comentário acima.

   A margem negativa anula o `gap` que o trilho põe antes de cada item: sem
   ela o espaço final sairia `gap + recuo`, e o último cartão ficaria mais
   afastado da borda do que o primeiro. */
.edicao-tira__trilho::after {
  content: '';
  flex: 0 0 var(--recuo);
  margin-inline-start: calc(-1 * var(--tira-gap));
}

.edicao-tira__item {
  /* UM CARTÃO E MEIO NA TELA

     A largura sai da conta que produz esse enquadramento: descontado o
     recuo dos dois lados, o que sobra cabe uma vez e meia. O meio cartão
     seguinte é o que diz que há mais para o lado — sinal que funciona sem
     legenda, porque coisa cortada na beira só significa uma coisa.

     O teto de 46rem existe para telas largas: sem ele, o cartão cresceria
     com a janela e a capa viraria pôster. */
  flex: 0 0 min(46rem, calc((100% - var(--recuo) - var(--tira-gap)) / 1.5));
  scroll-snap-align: start;
}

.edicao-tira__item:last-child {
  /* O último encaixa pelo FIM, não pelo começo.

     Com `start`, o ponto de encaixe do último cartão fica além do curso da
     rolagem — para alinhá-lo à esquerda seria preciso rolar mais do que
     existe. Com `mandatory`, um ponto inalcançável não é ignorado: o
     navegador escolhe o alcançável mais próximo, que é o zero. Com duas
     edições a tira ficava intrasável — arrastava e voltava sozinha.

     `end` põe o ponto no fim do curso, que é sempre alcançável por
     definição, e é onde o último cartão aparece inteiro. */
  scroll-snap-align: end;
}

/* ---------- O cartão ----------
   Mesmo desenho da chamada que existia antes: capa à esquerda, texto e
   botões à direita. O que mudou é que agora há um por edição, e não um só
   com a edição atual. */

.edicao-cartao {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(var(--e-5), 3vw, var(--e-7));
  align-items: center;
  height: 100%;
}

.edicao-cartao__capa {
  position: relative;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.25);
  box-shadow: var(--sombra-alta);
}

.edicao-cartao__capa img {
  display: block;
  width: 100%;
  height: auto;
  /* Sem proporção imposta e sem `object-fit: cover`: a capa é peça
     gráfica, e cortar a borda come o ano no alto e a faixa de
     patrocinadores no pé. Mesma decisão de .edicao__capa, em 06-cards.css. */
}

.edicao-cartao__fita {
  position: absolute;
  z-index: 2;
  top: var(--e-3);
  left: var(--e-3);
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--laranja-700);
  color: var(--branco);
  font-family: var(--fonte-ui);
  font-size: var(--t-micro);
  font-weight: var(--peso-forte);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.edicao-cartao__corpo {
  min-width: 0;
}

.edicao-cartao__ano {
  margin: 0 0 var(--e-2);
  font-family: var(--fonte-ui);
  font-size: var(--t-kicker);
  font-weight: var(--peso-forte);
  letter-spacing: 0.16em;
  color: var(--laranja-400);
}

.edicao-cartao__titulo {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--branco);
}

.edicao-cartao__resumo {
  /* Limite de medida, como em todo texto corrido do site: linha mais longa
     que isto cansa de ler. */
  max-width: 34ch;
  margin: var(--e-3) 0 0;
  color: rgba(255, 255, 255, 0.82);
}

/* Na largura do cartao os dois botoes nao cabem lado a lado e quebram a
   linha. Quebrando com largura natural, um sai com 246px e o outro com 218:
   uma escadinha. Ocupando a linha inteira, viram uma pilha alinhada com o
   texto acima. */
.edicao-cartao__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-5);
}

.edicao-cartao__acoes > * {
  flex: 1 1 100%;
  justify-content: center;
}

/* ---------- Setas ----------
   O arrasto é o gesto principal, mas quem está no mouse não tem como
   adivinhá-lo. As setas existem para isso e para o teclado; o script as
   revela só quando há o que rolar. */

.edicao-tira__controles {
  display: flex;
  justify-content: flex-end;
  gap: var(--e-2);
  margin-top: var(--e-5);
}

.edicao-tira__seta {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: transparent;
  color: var(--branco);
  cursor: pointer;
  transition: background var(--transicao-rapida), border-color var(--transicao-rapida);
}

.edicao-tira__seta:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
}

.edicao-tira__seta:disabled { opacity: 0.3; cursor: default; }

.edicao-tira__seta .icone { width: 18px; height: 18px; }

@media (max-width: 768px) {
  .edicao-tira { --recuo: 1.2rem; }
  .edicao-tira__trilho { --tira-gap: var(--e-4); }

  /* No celular o cartao empilha: capa em cima, texto embaixo. Lado a lado,
     numa largura de 300px, sobrariam duas colunas de 140px — nenhuma das
     duas serve nem para a capa nem para o texto. */
  .edicao-cartao { grid-template-columns: minmax(0, 1fr); gap: var(--e-4); }
  .edicao-cartao__resumo { max-width: none; }
  .edicao-cartao__acoes > * { flex: 1 1 100%; justify-content: center; }
  /* 84vw deixava so 25px do proximo cartao aparecendo — pedaco fino
     demais para ler como "tem mais", e facil de confundir com margem.
     Em 78vw sobram 48px, que ja se veem como cartao cortado. */
  .edicao-tira__item { flex-basis: 78vw; }
  /* No celular o dedo já arrasta; a seta seria botão para o que ninguém
     vai usar, ocupando a única coisa escassa ali, que é altura. */
  .edicao-tira__controles { display: none; }
}


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

  /* A capa ocupa a coluna inteira.

     Havia um teto de 260px, e numa tela de 375 isso deixava a capa numa
     coluna de 338: ela terminava 78px antes do texto e dos botões logo
     abaixo. Uma borda desalinhada no meio de uma pilha em que todo o
     resto casa — e era o que se via no celular. */
  .anuario-chamada__capa { max-width: none; }

  /* Os dois botões não cabem lado a lado e quebram a linha. Quebrando com
     largura natural, um saía com 246px e o outro com 218: uma escadinha.
     Ocupando a linha toda, viram uma pilha alinhada com a capa. */
  .anuario-chamada__acoes > * {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* ===== 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. */
/* Selo da edição do anuário, na abertura da matéria.

   Fala a mesma língua dos outros selos do site — versalete, entrelinha larga,
   pílula — mas é link, e por isso ganha o laranja da marca em vez do verde
   discreto de `.selo--serie`: quem lê precisa perceber que dali se vai a
   algum lugar. O ícone de livro repete o da edição digital no cabeçalho, para
   que as duas portas para o anuário se pareçam.

   Centralizado porque o cabeçalho da matéria inteiro é centralizado. */
.materia__edicao {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  margin-bottom: var(--e-3);
  padding: 4px var(--e-3);
  border: 1px solid var(--laranja-100);
  border-radius: var(--r-full);
  background: var(--laranja-50);
  color: var(--laranja-700);
  font-family: var(--fonte-ui);
  font-size: 0.66rem;
  font-weight: var(--peso-forte);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: background var(--transicao-rapida), border-color var(--transicao-rapida),
    color var(--transicao-rapida);
}

.materia__edicao:hover {
  border-color: var(--laranja-500);
  background: var(--laranja-500);
  color: var(--branco);
}

.materia__edicao .icone {
  width: 15px;
  height: 15px;
}

.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;
}