/* ===========================================================================
   Juliana Benicio 4550 — sistema de design do site
   Fonte unica de verdade da identidade. Deriva do "Guia para utilizacao da
   marca e identidade visual" (manual 4550). Nao usar cor, fonte ou raio solto
   em nenhuma pagina: tudo sai dos tokens abaixo.
   =========================================================================== */

/* ------------------------------------------------------------------ fontes */
/* Sora Bold nos titulos, Inter Regular no corpo (manual, p. 3). Auto-hospedadas:
   fonte em CDN custa requisicao a terceiro e atrapalha o LCP. */
@font-face { font-family: "Sora"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/sora-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: "Sora"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/sora-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: "Sora"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/sora-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: "Sora"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/sora-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: "Sora"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/sora-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: "Sora"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/sora-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: "Sora"; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/sora-800-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: "Sora"; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/sora-800-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: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/inter-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: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/inter-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: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/inter-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: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/inter-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: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/inter-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: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/inter-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: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/inter-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: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/inter-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; }

/* ------------------------------------------------------------------ tokens */
:root {
  /* Paleta oficial (manual, p. 1). Nao inventar tom fora daqui. */
  --verde: #57a32f;
  --azul: #162e7a;
  --amarelo: #fcf252;
  --creme: #F8F6EF;

  /* Derivados de uso — sempre a partir das quatro acima. */
  --azul-escuro: #0f2159;
  --azul-claro: #2a49a8;
  --verde-escuro: #468626;
  --creme-fundo: #F8F6EF;

  /* Dois derivados do Verde Vibrante existem por LEGIBILIDADE, medida, nao por
     gosto. O verde do manual e uma cor de PREENCHIMENTO: como texto pequeno
     sobre creme ele da 2,9:1 e como fundo de texto branco da 3,14:1 — os dois
     reprovam no minimo 4,5:1 da WCAG AA.
       --verde-texto    (#3F7C1E) sobre creme .......... 4,74:1  OK
       branco sobre --verde-profundo (#44821D) ......... 4,72:1  OK
     O Verde Vibrante puro (--verde) continua em tudo que e area de cor, faixa,
     botao, grafismo e titulo grande — ou seja, na cara da marca. */
  --verde-texto: #3f7c1e;
  --verde-profundo: #44821d;
  --tinta: var(--azul);
  --tinta-suave: #4a5b93;
  --linha: rgba(22, 46, 122, 0.14);
  --linha-forte: rgba(22, 46, 122, 0.28);

  /* Tipografia */
  --fonte-titulo: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-corpo: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Teto de 4,5rem nao e timidez: acima disso "Dignidade humana." alcanca a
     foto e as ultimas letras somem atras dela. */
  --t-display: clamp(2.35rem, 1.25rem + 3.8vw, 4rem);
  --t-h1: clamp(2.15rem, 1.3rem + 3.2vw, 3.85rem);
  --t-h2: clamp(1.75rem, 1.2rem + 2.1vw, 2.9rem);
  --t-h3: clamp(1.15rem, 1.03rem + 0.5vw, 1.45rem);
  --t-corpo: 1.0625rem;
  --t-pequeno: 0.9375rem;
  --t-etiqueta: 0.78rem;

  /* Ritmo */
  --largura: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.75rem);
  --secao-y: clamp(4rem, 8.5vw, 8.5rem);
  --pilha: clamp(1rem, 2vw, 1.5rem);

  /* Forma — o canto grande arredondado e assinatura da marca (faixa azul do
     manual). Raio de cartao menor, botao sempre pilula. */
  --raio-cartao: 20px;
  --raio-midia: 16px;
  --raio-faixa: clamp(64px, 11vw, 168px);
  --pilula: 999px;

  --sombra-cartao: 0 1px 2px rgba(22, 46, 122, 0.04), 0 10px 30px -14px rgba(22, 46, 122, 0.22);
  --sombra-flutua: 0 2px 6px rgba(22, 46, 122, 0.07), 0 30px 60px -22px rgba(22, 46, 122, 0.38);

  --transicao: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transicao-lenta: 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* header fixo nao pode cobrir a secao ancorada */
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  font-size: var(--t-corpo);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; }
/* figure tem margin: 1em 40px no navegador — dentro de um grid isso encolhe o
   item e abre buracos na composicao. */
figure, blockquote, dl, dd { margin: 0; }

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

:focus-visible {
  outline: 3px solid var(--verde);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--amarelo); color: var(--azul); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------- utilitarios */
.container {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.pular-para-conteudo {
  position: absolute; left: 50%; top: 0; z-index: 200;
  transform: translate(-50%, -110%);
  background: var(--azul); color: #fff;
  padding: 0.75rem 1.5rem; border-radius: 0 0 12px 12px;
  font-weight: 600;
  transition: transform var(--transicao);
}
.pular-para-conteudo:focus { transform: translate(-50%, 0); }

/* GRAFISMO — SO NO HERO.
   O balao do "B" chegou a ser ladrilhado em todas as secoes e ficou pesado: em
   vez de textura, virava desenho competindo com o conteudo em cada tela. O
   manual pede o contrario — "de forma sutil, preservando a legibilidade" e
   "evitando excesso de repeticao" (p. 4). Uma aparicao, na abertura, resolve.
   NAO reintroduzir em secao, bloco, capa ou rodape. */
/* Fica APENAS atras da foto, nao no hero inteiro. Ancorado a direita com o
   mesmo referencial da foto (.hero__grade), so que um pouco mais largo e mais
   curto, para o padrao emoldurar a candidata em vez de forrar a secao. */
.hero__grafismo {
  position: absolute;
  z-index: 0;
  top: 0;
  /* Centrado na foto, nao empurrado para a borda: o padrao tem de aparecer dos
     DOIS lados dela, como na referencia. A foto fica em right:7vw (max 9,5rem)
     e tem ~306px; este bloco e ~100px mais largo e sobra metade para cada lado. */
  right: calc(var(--gutter) * 1.3);
  width: min(46%, 400px);
  height: min(72%, 340px);
  pointer-events: none;
  -webkit-mask-image: url(../img/grafismo.svg);
  mask-image: url(../img/grafismo.svg);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: 120px 192px;
  mask-size: 120px 192px;
  background-color: #fff;
  /* Fio de 0,9px precisa de mais opacidade que traco grosso para nao sumir. */
  opacity: 0.26;
}
@media (max-width: 860px) {
  /* No mobile, o padrão fica apenas atrás do retrato: duas colunas verticais
     repetidas e encerradas antes da faixa azul. */
  .hero__grafismo {
    right: 50%;
    translate: 50% 0;
    top: auto;
    bottom: var(--hero-faixa-altura);
    width: 190px;
    height: min(42%, 300px);
    -webkit-mask-repeat: repeat-y;
    mask-repeat: repeat-y;
    -webkit-mask-size: 95px 152px;
    mask-size: 95px 152px;
    -webkit-mask-position: center top;
    mask-position: center top;
    opacity: 0.22;
  }
}

/* ------------------------------------------------------------------ botoes */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.1rem 2.4rem;
  border: 2px solid transparent;
  border-radius: var(--pilula);
  font-family: var(--fonte-corpo);
  font-size: var(--t-pequeno);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao),
              border-color var(--transicao), transform var(--transicao),
              box-shadow var(--transicao);
}
.botao:hover { transform: translateY(-2px); }
.botao:active { transform: translateY(0); }

/* Amarelo Aberto sobre Azul Profundo: e o par do manual e da 10,6:1, folgado
   para texto pequeno. */
.botao--azul { background: var(--azul); color: var(--amarelo); }
.botao--azul:hover { background: var(--azul-escuro); box-shadow: var(--sombra-flutua); }

.botao--verde { background: var(--verde); color: #fff; }
.botao--verde:hover { background: var(--verde-escuro); box-shadow: var(--sombra-flutua); }

/* O fundo translucido escuro nao e enfeite: branco puro sobre o Verde Vibrante
   da 3,14:1 e reprova para texto de botao. Com este veu o par vai a 4,8:1. */
.botao--contorno-claro {
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
  background: rgba(15, 33, 89, 0.45);
}
.botao--contorno-claro:hover { background: #fff; color: var(--azul); border-color: #fff; }

/* Link de continuidade ("Saiba mais >>", "Leia mais »") — o site original usa
   muito esse padrao, entao ele merece um componente proprio. */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  font-size: var(--t-pequeno);
  color: var(--azul);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: color var(--transicao), border-color var(--transicao), gap var(--transicao);
}
.link-seta::after { content: "\203A\203A"; letter-spacing: -0.08em; font-size: 1.15em; line-height: 1; }
.link-seta:hover { color: var(--verde-texto); border-color: var(--verde-texto); gap: 0.75rem; }
.link-seta--claro { color: #fff; }
.link-seta--claro:hover { color: var(--amarelo); border-color: var(--amarelo); }

/* ------------------------------------------------------------------ header */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--creme);
  border-bottom: 1px solid var(--linha);
  transition: box-shadow var(--transicao);
}
.cabecalho[data-rolado="sim"] { box-shadow: 0 6px 24px -12px rgba(22, 46, 122, 0.35); }

.cabecalho__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 84px;
}

/* min-height de 44px: a logo tem 36px de altura util e vira um alvo de toque
   pequeno demais no celular. */
.marca { display: inline-flex; align-items: center; min-height: 44px; flex-shrink: 0; }
.marca img { width: clamp(168px, 20vw, 240px); height: auto; }

/* --- navegacao --- */
.nav__lista {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.75rem);
  list-style: none;
}
.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.35rem;
  font-size: var(--t-pequeno);
  font-weight: 500;
  color: var(--azul);
  border-bottom: 2px solid transparent;
  transition: color var(--transicao), border-color var(--transicao);
  white-space: nowrap;
}
.nav__link:hover,
.nav__link[aria-expanded="true"],
.nav__item--ativo > .nav__link {
  color: var(--verde-texto);
  border-color: var(--verde);
}

.nav__seta { width: 10px; height: 10px; flex-shrink: 0; transition: transform var(--transicao); }
.nav__link[aria-expanded="true"] .nav__seta { transform: rotate(180deg); }

.nav__submenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  translate: -50% 0;
  min-width: 260px;
  padding: 0.5rem;
  margin: 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-flutua);
  opacity: 0;
  visibility: hidden;
  translate: -50% 8px;
  transition: opacity var(--transicao), translate var(--transicao), visibility var(--transicao);
}
.nav__item:hover > .nav__submenu,
.nav__item:focus-within > .nav__submenu,
.nav__submenu[data-aberto="sim"] {
  opacity: 1;
  visibility: visible;
  translate: -50% 0;
}
.nav__submenu a {
  display: block;
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  font-size: var(--t-pequeno);
  color: var(--azul);
  transition: background var(--transicao), color var(--transicao);
}
.nav__submenu a:hover { background: var(--creme); color: var(--verde-texto); }

.hamburguer {
  display: none;
  width: 46px; height: 46px;
  padding: 0;
  background: transparent;
  border: 2px solid var(--linha-forte);
  border-radius: 12px;
  cursor: pointer;
  color: var(--azul);
  align-items: center;
  justify-content: center;
}
.hamburguer span {
  display: block; width: 20px; height: 2px;
  background: currentColor; border-radius: 2px;
  position: relative;
  transition: background var(--transicao);
}
.hamburguer span::before,
.hamburguer span::after {
  content: ""; position: absolute; left: 0;
  width: 20px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform var(--transicao), top var(--transicao);
}
.hamburguer span::before { top: -6px; }
.hamburguer span::after { top: 6px; }
.hamburguer[aria-expanded="true"] span { background: transparent; }
.hamburguer[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.hamburguer[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1023px) {
  .hamburguer { display: inline-flex; }
  .nav {
    position: fixed;
    inset: 84px 0 0;
    background: var(--creme);
    padding: 1.5rem var(--gutter) 3rem;
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--transicao-lenta), visibility var(--transicao-lenta);
  }
  .nav[data-aberto="sim"] { transform: translateX(0); visibility: visible; }
  .nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-bottom: 1px solid var(--linha); }
  .nav__link {
    justify-content: space-between;
    width: 100%;
    padding: 1rem 0.25rem;
    font-size: 1.0625rem;
    font-weight: 600;
    border-bottom: 0;
  }
  .nav__submenu {
    position: static;
    translate: none;
    min-width: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0 0 0.75rem 0.75rem;
    display: none;
    opacity: 1;
    visibility: visible;
  }
  .nav__item:hover > .nav__submenu { display: none; }
  .nav__submenu[data-aberto="sim"] { display: block; }
}

/* -------------------------------------------------------------------- hero */
/* Composicao prescrita no mockup WEBSITE do manual (p. 6): fundo verde com
   grafismo, chamada branca + amarela, botao pilula azul, foto recortada a
   direita e faixa azul no rodape com o canto grande arredondado. */
.hero {
  position: relative;
  /* A hero preserva a arte e a composição verde originais. O #F8F6EF pertence
     ao fundo geral das páginas, não a esta abertura institucional. */
  background-color: var(--verde);
  background-image: linear-gradient(168deg, var(--verde) 0%, var(--verde) 52%, #4d9329 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  /* ~18% da altura do hero, como na referencia. Em 11vw ela comia um terco da
     faixa verde. */
  --hero-faixa-altura: clamp(62px, 6vw, 100px);
}

/* O "4550" gigante das pecas impressas do manual NAO entra no hero: aqui ele
   cai justamente onde ficam os botoes, e marca-d'agua atras de CTA e ruido.
   Ele vive nas capas das internas (.capa__numero), onde ha area livre. */

/* A foto sai do fluxo (posicionada em absoluto, abaixo) e a altura do hero
   passa a ser decidida pelo texto. Enquanto ela era item de grid, aumentar a
   foto esticava o hero para 1.100px e jogava o slogan para fora da tela. */
.hero__grade {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  /* Proporcao da referencia: faixa larga e baixa, perto de 3,2:1. Por isso a
     altura acompanha a LARGURA (vw) e nao a altura da janela (vh). */
  min-height: clamp(400px, 31vw, 520px);
  padding-top: clamp(2rem, 4vw, 3.25rem);
}

/* O respiro embaixo do texto e DERIVADO da altura da faixa azul. Com valor
   solto os botoes caiam dentro da faixa toda vez que a faixa crescia.
   O max-width guarda a distancia da foto: sem ele o slogan corre por baixo. */
.hero__texto {
  padding-bottom: calc(var(--hero-faixa-altura) + clamp(1.5rem, 3.5vw, 3rem));
  /* Largura suficiente para o slogan caber numa linha e para o botao e os
     icones ficarem lado a lado. Em 600px eles quebravam por 3px. */
  max-width: min(100%, 700px);
}

/* O numero na urna e o elemento mais importante de uma peca de campanha. No
   manual ele aparece grande em TODA peca impressa; aqui abre o hero, em Branco
   Visivel, acima do slogan — mesma ordem das pecas. */
/* O lockup completo (JULIANA / Benicio 4550 / DEPUTADA FEDERAL) abre o hero, na
   versao clara — o 4550 vem dentro dele. `alt` vazio de proposito: a logo do
   cabecalho ja anuncia o mesmo texto e repetir vira ruido no leitor de tela. */
.hero__marca {
  width: clamp(225px, 30vw, 470px);
  height: auto;
  margin-bottom: clamp(1.1rem, 2.4vw, 1.9rem);
}

/* Uma linha so: as duas frases correm lado a lado. Em tela estreita quebram
   sozinhas, sem virar duas linhas fixas. */
.hero__chamada {
  font-size: clamp(1.1rem, 0.62rem + 1.5vw, 1.85rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-bottom: clamp(1.4rem, 2.8vw, 2.3rem);
  text-shadow: 0 2px 20px rgba(15, 33, 89, 0.18);
  /* Sem `text-wrap: balance`: ele equilibrava as duas frases em duas linhas,
     e a referencia pede as duas correndo na MESMA linha. */
}
.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.85rem, 2vw, 1.75rem);
}

.hero__chamada span { display: inline; }
/* Branco na primeira linha, Amarelo Aberto na segunda: e exatamente o slogan
   como o manual desenha em todas as pecas. */
.hero__chamada .linha-1 { color: #fff; }
.hero__chamada .linha-2 { color: var(--amarelo); }

/* A foto passa POR CIMA da faixa azul e sangra para a direita, como nas pecas
   do manual: ela e o assunto, nao um adorno no canto. */
/* A foto sangra para a direita E invade a coluna de texto pela esquerda: e o
   que tira a composicao do "duas caixas lado a lado" e a aproxima das pecas
   impressas. O recorte tem fundo transparente, entao a invasao nao tampa nada. */
/* Altura amarrada a do hero (105% para encostar no topo sem sobrar), largura
   livre. Assim a foto e a maior possivel sem mandar no tamanho da secao. */
/* Ancorada no TOPO e mais alta que o hero: a cabeca fica inteira em cima e o
   corte acontece embaixo, atras da faixa azul — como na referencia. Ancorar
   embaixo cortaria o alto da cabeca, que e o que nunca se corta. */
.hero__foto {
  position: absolute;
  right: clamp(1rem, 7vw, 9.5rem);
  top: 0;
  bottom: auto;
  z-index: 4;
  height: 128%;
  display: flex;
  align-items: flex-start;
  pointer-events: none;
}
.hero__foto img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 30px 60px rgba(15, 33, 89, 0.34));
}

/* Faixa azul do rodape do hero, com o canto grande arredondado da marca. */
.hero__faixa {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--hero-faixa-altura);
  background: var(--azul);
  border-top-right-radius: var(--raio-faixa);
  z-index: 2;
}

/* A arte fornecida é a composição oficial para desktop: mantém a relação
   tipografia/retrato da peça e reserva a faixa azul para ações e redes. */
.hero__banner { display: none; }
@media (min-width: 861px) {
  .hero--banner {
    position: relative;
    overflow: hidden;
    background: var(--verde);
  }
  .hero--banner .hero__banner {
    display: block;
    width: 100%;
    height: auto;
    min-height: clamp(400px, 31vw, 520px);
    object-fit: cover;
    object-position: center;
  }
  .hero--banner .hero__faixa,
  .hero--banner .hero__grafismo,
  .hero--banner .hero__foto,
  .hero--banner .hero__marca,
  .hero--banner .hero__chamada {
    display: none;
  }
  .hero--banner .hero__grade {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    min-height: 0;
    padding: 0;
    max-width: none;
  }
  .hero--banner .hero__texto {
    position: absolute;
    left: max(var(--gutter), calc((100% - var(--largura)) / 2 + var(--gutter)));
    bottom: clamp(5.75rem, 8vw, 8.75rem);
    z-index: 4;
    padding: 0;
    max-width: none;
  }
  .hero--banner .hero__acoes { gap: clamp(0.75rem, 1.5vw, 1.4rem); }
  .hero--banner .redes--hero .rede { color: #fff; }
  .hero--banner .redes--hero .rede[aria-label="YouTube"],
  .hero--banner .redes--hero .rede[aria-label="YouTube"] svg {
    color: #fff !important;
    fill: #fff !important;
  }
}

@media (max-width: 860px) {
  .hero { --hero-faixa-altura: clamp(52px, 12vw, 76px); }
  /* Em tela estreita nao ha coluna livre ao lado do texto: a foto VOLTA para o
     fluxo, embaixo. Deixada em absoluto, ela cobria o slogan e os botoes. */
  .hero__grade {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    min-height: 0;
    padding-top: clamp(2rem, 6vw, 3rem);
  }
  .hero__texto {
    max-width: none;
    padding-bottom: clamp(1.5rem, 4vw, 2rem);
  }
  /* `text-align: center` nao centraliza imagem: sem a margem automatica o
     lockup ficava encostado a esquerda com o resto centrado. */
  .hero__marca { margin-inline: auto; }
  .hero__chamada { text-wrap: balance; }
  .hero__acoes { justify-content: center; }
  .hero__foto {
    position: static;
    height: auto;
    width: min(78vw, 340px);
    margin: 0 auto -1px;
    justify-content: center;
  }
  .hero__foto img { height: auto; width: 100%; }
  .botao { padding: 0.85rem 1.5rem; font-size: 0.875rem; }
}

/* Cabecalho de pagina interna: mesma logica do hero, em versao curta. */
.capa {
  position: relative;
  background: var(--azul);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(4rem, 9vw, 8rem) clamp(5rem, 11vw, 9.5rem);
}
/* Mesma marca-d'agua do hero, em escala menor: amarra as internas a capa. */
.capa__numero {
  position: absolute;
  z-index: 1;
  right: clamp(1rem, 6vw, 5rem);
  left: auto;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: clamp(5.5rem, 15vw, 15rem);
  line-height: 0.72;
  letter-spacing: -0.045em;
  color: #fff;
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
}
/* Verde profundo: a capa carrega a etiqueta de 12px, que sobre o Verde
   Vibrante ficaria em 2,69:1. Ver a nota nos tokens. */
.capa--verde { background: var(--verde-profundo); }
/* max-width no proprio .container faria o bloco centralizar (ele tem
   margin-inline:auto). O texto da capa alinha a esquerda, com o 4550 a direita. */
.capa__conteudo { position: relative; z-index: 2; }
.capa__conteudo > * { max-width: 34ch; }
.capa__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--fonte-corpo);
  font-size: var(--t-etiqueta);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--amarelo);
  margin-bottom: 1.25rem;
}
.capa__etiqueta::before {
  content: "";
  width: 34px; height: 2px;
  background: currentColor;
  border-radius: 2px;
}
/* Sobre verde, a etiqueta de 12px fica branca (4,72:1); em amarelo daria
   4,03:1 e reprovaria por pouco. Sobre azul o amarelo passa folgado (10,6:1). */
.capa--verde .capa__etiqueta { color: #fff; }
.capa__titulo { font-size: var(--t-h1); font-weight: 800; letter-spacing: -0.04em; line-height: 0.98; }
/* Manchete de post e muito mais longa que nome de secao: em corpo de capa ela
   viraria uma parede de cinco linhas gigantes. */
.capa--artigo .capa__conteudo > * { max-width: 26ch; }
.capa--artigo .capa__titulo { font-size: clamp(1.85rem, 1.15rem + 2.4vw, 3rem); letter-spacing: -0.03em; line-height: 1.05; }
.capa__linha { font-size: 1.125rem; line-height: 1.65; margin-top: 1.25rem; color: rgba(255, 255, 255, 0.88); }
/* Curva de assinatura no pe da capa. */
.capa::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: clamp(28px, 4vw, 52px);
  background: var(--creme);
  border-top-left-radius: var(--raio-faixa);
  z-index: 3;
}

/* ------------------------------------------------------------------ secoes */
.secao { position: relative; padding-block: var(--secao-y); }
.secao--creme { background: var(--creme); }
.secao--branca { background: var(--creme-fundo); }
.secao--azul { background: var(--azul); color: #fff; }
/* Superficie verde que carrega TEXTO CORRIDO usa o verde profundo — ver a nota
   nos tokens. Hero, capa e botao seguem no Verde Vibrante puro. */
.secao--verde { background: var(--verde-profundo); color: #fff; }
.secao--azul .link-seta { color: #fff; }
.secao--azul .link-seta:hover { color: var(--amarelo); border-color: var(--amarelo); }

/* Encaixe entre secoes de cor diferente: repete o canto grande da marca. */
.secao--curva-topo { border-top-left-radius: var(--raio-faixa); margin-top: calc(var(--raio-faixa) * -0.02); }
.secao--curva-base { border-bottom-right-radius: var(--raio-faixa); }

.secao > .container { position: relative; z-index: 2; }

.secao__cabecalho { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.secao__cabecalho--centro { margin-inline: auto; text-align: center; }

/* O tracinho fica verde (e decoracao, sem exigencia de contraste) e a palavra
   fica azul: o verde da marca em 12px sobre creme da 2,9:1 e reprova em AA. */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-etiqueta);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--azul);
  margin-bottom: 0.9rem;
}
.etiqueta::before {
  content: "";
  width: 28px; height: 2px;
  background: var(--verde);
  border-radius: 2px;
}
.secao--azul .etiqueta, .secao--verde .etiqueta { color: var(--amarelo); }
.secao--azul .etiqueta::before, .secao--verde .etiqueta::before { background: var(--amarelo); }

.titulo-secao { font-size: var(--t-h2); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; }
.titulo-display { font-size: var(--t-h1); font-weight: 800; letter-spacing: -0.045em; line-height: 0.96; }

/* --------------------------------------------------------------- conteudo  */
.prosa { display: grid; gap: 1.15rem; max-width: 68ch; }
.prosa p { line-height: 1.75; }
.prosa a:not(.botao):not(.link-seta) {
  color: var(--verde-texto);
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  transition: color var(--transicao);
}
.prosa a:not(.botao):not(.link-seta):hover { color: var(--azul); }
.secao--azul .prosa a:not(.botao):not(.link-seta) { color: var(--amarelo); }

/* Texto em duas colunas, como os blocos do site original. Colapsa sozinho.
   `display: block` e obrigatorio: multi-coluna NAO funciona em container grid,
   e .prosa e grid — sem isto o texto sai numa coluna so, sem erro nenhum. */
.prosa--duas-colunas {
  display: block;
  max-width: none;
  columns: 2;
  column-gap: clamp(2rem, 4vw, 3.5rem);
}
.prosa--duas-colunas p { break-inside: avoid; margin-bottom: 1.15rem; }
.prosa--duas-colunas p:last-child { margin-bottom: 0; }
@media (max-width: 760px) { .prosa--duas-colunas { columns: 1; } }

/* ---------------------------------------------------------------- cartoes  */
.cartao {
  position: relative;
  background: var(--creme);
  border: 0;
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-cartao);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transicao), box-shadow var(--transicao);
}
/* Fio interno em vez de borda: segura o cartao no fundo claro sem engrossar a
   silhueta, e some no fundo escuro. */
.cartao::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(22, 46, 122, 0.07);
  pointer-events: none;
}
a.cartao:hover, .cartao--interativo:hover { transform: translateY(-6px); box-shadow: var(--sombra-flutua); }

.cartao__midia { position: relative; aspect-ratio: 3 / 2; background: var(--linha); overflow: hidden; }
.cartao__midia img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transicao-lenta); }
a.cartao:hover .cartao__midia img, .cartao--interativo:hover .cartao__midia img { transform: scale(1.04); }
.cartao__midia--contem { background: var(--creme); }
.cartao__midia--contem img { object-fit: contain; padding: 1rem; }

.cartao__corpo { display: flex; flex-direction: column; gap: 0.65rem; padding: clamp(1.3rem, 2.4vw, 1.85rem); flex: 1; }
.cartao__titulo {
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--azul);
  /* Manchete de post e longa; sem teto ela desalinha os cartoes da fileira. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cartao__data {
  font-size: 0.75rem;
  color: var(--tinta-suave);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  order: -1; /* a data vem antes do titulo, como em capa de jornal */
}
.cartao__resumo {
  font-size: var(--t-pequeno);
  color: var(--tinta-suave);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cartao__rodape { margin-top: auto; padding-top: 0.35rem; }

/* Cartao sozinho dentro de um bloco largo: em pe ele deixa metade do bloco
   vazia. Deitado, a foto puxa o olho e o texto ocupa o resto. */
@media (min-width: 760px) {
  .cartao--horizontal { flex-direction: row; align-items: stretch; }
  /* Com aspect-ratio:auto a altura vinha da imagem e o cartao ficava com meia
     coluna de texto vazia. 4/3 fixa a altura do conjunto. */
  .cartao--horizontal .cartao__midia { flex: 0 0 44%; aspect-ratio: 4 / 3; }
  .cartao--horizontal .cartao__corpo { justify-content: center; gap: 0.8rem; padding: clamp(1.5rem, 3vw, 2.5rem); }
  .cartao--horizontal .cartao__resumo { -webkit-line-clamp: 6; line-clamp: 6; }
}
/* O cartao tem fundo claro proprio. Sem este reset ele herda o "texto branco"
   da secao azul em volta e o "Leia mais" some (branco sobre creme, 1:1). */
.cartao, .cartao__rodape { color: var(--tinta); }
.cartao .link-seta { color: var(--azul); }
.cartao .link-seta:hover { color: var(--verde-texto); border-color: var(--verde-texto); }

/* O CARTAO INTEIRO e o alvo de toque. O link do titulo tinha 23px de altura —
   metade do minimo confortavel no celular. Esticando o link sobre o cartao, a
   area de toque passa a ser o cartao todo, sem duplicar link no leitor de tela
   (o "Leia mais" continua sendo o mesmo destino). */
.cartao__titulo a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
/* Fica acima do link esticado para nao virar area morta. */
.cartao__rodape { position: relative; z-index: 2; }

/* Bloco de conteudo grande (paginas de secao): cartao largo com faixa de cor. */
/* Cada bloco repete o canto grande da marca, alternando o lado a cada um: e o
   que da ritmo a uma pagina longa em vez de uma pilha de retangulos iguais. */
.bloco {
  position: relative;
  border-radius: var(--raio-cartao);
  border-top-left-radius: var(--raio-faixa);
  overflow: hidden;
  scroll-margin-top: 110px;
}
.bloco:nth-child(even) {
  border-top-left-radius: var(--raio-cartao);
  border-bottom-right-radius: var(--raio-faixa);
}
.bloco + .bloco { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.bloco--azul { background: var(--azul); color: #fff; }
/* As superfícies claras usam o creme institucional informado, mantendo a
   separação dos blocos por sombra suave e contorno discreto. */
.bloco--creme {
  background: var(--creme);
  border: 0;
  box-shadow: var(--sombra-cartao), inset 0 0 0 1px rgba(22, 46, 122, 0.06);
}
.bloco--verde { background: var(--verde-profundo); color: #fff; }
.bloco__conteudo { position: relative; z-index: 2; padding: clamp(1.85rem, 4.5vw, 4rem); }
.bloco__titulo {
  font-size: var(--t-h2);
  font-weight: 800;
  margin-bottom: 1.75rem;
  letter-spacing: -0.035em;
  line-height: 1.02;
  max-width: 20ch;
}
.bloco--azul .bloco__titulo, .bloco--verde .bloco__titulo { color: #fff; }
.bloco--creme .bloco__titulo { color: var(--azul); }
.bloco--azul .prosa, .bloco--verde .prosa { color: rgba(255, 255, 255, 0.92); }
/* Textos curtos não precisam de colunas, mas não devem parecer uma faixa estreita
   perdida dentro do bloco: ocupam toda a largura útil da composição. */
.bloco .prosa:not(.prosa--duas-colunas) { max-width: none; }
.bloco__depois--centro { margin-inline: auto; text-align: center; }
/* Família pede leitura linear, sem quebra de frase entre as duas colunas. */
.bloco--familia .prosa--duas-colunas { columns: 1; max-width: 70ch; }

/* Galeria de bloco: as fotos que o site original carregava como
   "background slideshow" e que nunca chegavam a aparecer (o JS do Elementor
   nao existe no export). Aqui elas viram uma faixa de fotos em CSS puro. */
.galeria {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.6rem, 1.4vw, 1rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.galeria__item {
  aspect-ratio: 4 / 3;
  border-radius: var(--raio-midia);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}
.galeria__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transicao-lenta); }
.galeria__item:hover img { transform: scale(1.05); }
/* Numero de colunas fixado por quantidade de fotos, para a ultima fileira
   fechar sempre. Com auto-fit sobrava uma foto orfa quando a galeria tinha 5. */
@media (min-width: 720px) {
  .galeria[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galeria[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .galeria[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* 5 fotos: a primeira ocupa duas colunas de tres -> 6 celulas, 2 fileiras. */
  .galeria[data-n="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .galeria[data-n="5"] .galeria__item:first-child { grid-column: span 2; aspect-ratio: 8 / 3; }
}

/* ---------------------------------------------------------------- grades   */
.grade { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grade--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grade--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
/* Par fixo: dois cartões lado a lado mesmo em coluna estreita (carrossel da
   home). Com auto-fit eles empilhavam e o painel virava uma torre. */
.grade--1 { grid-template-columns: minmax(0, 1fr); }
.grade--par { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .grade--par { grid-template-columns: 1fr; } }

/* Duas colunas assimetricas: texto a esquerda, mídia a direita (mockup p. 6) */
.duas-colunas {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
.duas-colunas--inverso { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.duas-colunas--iguais { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Coluna curta ao lado de mosaico alto: sem isto sobra um vazio enorme
   embaixo do texto. */
.duas-colunas--centro { align-items: center; }
@media (max-width: 900px) {
  .duas-colunas, .duas-colunas--inverso { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------- carrossel  */
/* Rolagem nativa com scroll-snap: zero JS para funcionar, o JS so sincroniza
   os pontinhos. Se o JS falhar, o carrossel continua navegavel. */
.carrossel { position: relative; }
.carrossel__trilho {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }
.carrossel__slide { scroll-snap-align: start; min-width: 0; }

.carrossel__pontos {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  list-style: none;
}
/* O BOTAO e o alvo (40x44) e o ponto e so desenho, feito no ::before.
   O caminho inverso — ponto de 10px com area ampliada por ::after — fazia as
   areas de botoes vizinhos se sobreporem, e o toque caia no ponto errado. */
.carrossel__ponto {
  width: 40px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.carrossel__ponto::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--linha-forte);
  transition: background var(--transicao), width var(--transicao);
}
.carrossel__ponto[aria-current="true"]::before {
  background: var(--azul);
  width: 26px;
  border-radius: var(--pilula);
}

/* --------------------------------------------------------------- mosaico   */
/* O site original tem um mosaico de fotos ao lado do "Quem sou eu".
   Grade CSS pura: sem JS, sem legenda sob a foto. */
.mosaico {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense;
  gap: clamp(0.5rem, 1.2vw, 0.85rem);
}
/* Na largura toda cabem 5 colunas: as 11 fotos (destaque 2x2 + larga 2x1 + 9)
   ocupam exatamente 15 celulas, ou seja 3 fileiras cheias, sem buraco. */
@media (min-width: 901px) {
  .mosaico--largo { grid-template-columns: repeat(5, 1fr); }
}
.mosaico__item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--raio-midia);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}
.mosaico__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transicao-lenta);
}
.mosaico__item:hover img { transform: scale(1.06); }
/* Uma peca maior quebra a simetria e evita cara de grade de gerador. */
.mosaico__item--destaque { grid-column: span 2; grid-row: span 2; aspect-ratio: 1; }
/* A peca larga fecha a ultima fileira: 11 fotos em 3 colunas deixariam um
   buraco no fim. Sem aspect-ratio proprio — estica na altura da fileira. */
.mosaico__item--largo { grid-column: span 2; aspect-ratio: auto; }
@media (max-width: 560px) {
  .mosaico { grid-template-columns: repeat(2, 1fr); }
  .mosaico__item--destaque { grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 10; }
  .mosaico__item--largo { grid-column: span 2; aspect-ratio: 16 / 10; }
}

/* ------------------------------------------------------------- instagram   */
.reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.5rem, 1.2vw, 0.85rem); }
.reel {
  position: relative;
  aspect-ratio: 4 / 5; /* proporcao do reel: em 1:1 a legenda do video era cortada */
  border-radius: var(--raio-midia);
  overflow: hidden;
  background: var(--linha);
  display: block;
}
.reel img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transicao-lenta); }
.reel:hover img { transform: scale(1.06); }
.reel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 33, 89, 0.45), transparent 55%);
  opacity: 0;
  transition: opacity var(--transicao);
}
.reel:hover::after { opacity: 1; }
.reel__play {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  color: var(--azul);
  z-index: 2;
  transition: transform var(--transicao), background var(--transicao);
}
.reel:hover .reel__play { transform: translate(-50%, -50%) scale(1.1); background: #fff; }
@media (max-width: 560px) { .reels { grid-template-columns: repeat(2, 1fr); } }

/* -------------------------------------------------------------- redes      */
.redes { display: flex; flex-wrap: wrap; gap: 0.75rem; list-style: none; }
.rede {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--azul);
  color: #fff;
  transition: background var(--transicao), transform var(--transicao), color var(--transicao);
}
.rede:hover { background: var(--verde); transform: translateY(-3px); }
.rede svg { width: 20px; height: 20px; fill: currentColor; }
.secao--azul .rede { background: rgba(255, 255, 255, 0.14); }
.secao--azul .rede:hover { background: var(--amarelo); color: var(--azul); }

/* No hero os icones sao so o glifo em branco, sem caixa — do jeito da
   referencia. Os 44px de caixa continuam existindo como area de toque. */
.redes--hero { gap: 0.35rem; }
.redes--hero .rede {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: transparent;
  color: #fff;
}
.redes--hero .rede:hover { background: transparent; color: var(--amarelo); transform: translateY(-2px); }
.redes--hero .rede svg { width: 24px; height: 24px; }

/* ------------------------------------------------------------- formulario  */
.formulario { display: grid; gap: 1rem; }
.campo { display: grid; gap: 0.45rem; }
.campo__rotulo { font-size: var(--t-pequeno); font-weight: 600; color: var(--azul); }
.campo input, .campo textarea {
  width: 100%;
  padding: 0.9rem 1.1rem;
  font-family: var(--fonte-corpo);
  font-size: var(--t-corpo);
  color: var(--azul);
  background: var(--creme-fundo);
  border: 1.5px solid var(--linha-forte);
  border-radius: 12px;
  transition: border-color var(--transicao), background var(--transicao), box-shadow var(--transicao);
}
.campo textarea { min-height: 140px; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--tinta-suave); opacity: 0.7; }
.campo input:focus, .campo textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--verde);
  box-shadow: 0 0 0 4px rgba(87, 163, 47, 0.16);
}

/* ------------------------------------------------------------------ artigo */
.artigo { max-width: 72ch; margin-inline: auto; }
.artigo__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
  font-size: var(--t-pequeno); color: var(--tinta-suave);
  margin-bottom: 1.25rem;
}
.artigo__meta time { font-weight: 500; }
.artigo__capa { border-radius: var(--raio-cartao); overflow: hidden; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); box-shadow: var(--sombra-cartao); }
.artigo__capa img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.artigo__corpo { display: grid; gap: 1.25rem; }
.artigo__corpo h2 { font-size: var(--t-h3); font-weight: 700; margin-top: 1rem; color: var(--azul); }
.artigo__corpo ul { display: grid; gap: 0.7rem; padding-left: 1.35rem; list-style: none; }
.artigo__corpo ul li { position: relative; }
.artigo__corpo ul li::before {
  content: "";
  position: absolute; left: -1.35rem; top: 0.68em;
  width: 8px; height: 8px;
  background: var(--verde);
  border-radius: 2px 8px 8px 8px; /* eco do balao do grafismo */
}
.artigo__corpo a { color: var(--verde-texto); font-weight: 600; border-bottom: 1px solid currentColor; word-break: break-word; }
.artigo__corpo a:hover { color: var(--azul); }
.artigo__fonte { font-size: var(--t-pequeno); color: var(--tinta-suave); }

/* Lista simples com marcador do grafismo (usada em "Apoio aos Projetos"). */
.lista-marcada { display: grid; gap: 0.85rem; list-style: none; }
.lista-marcada li { position: relative; padding-left: 1.75rem; }
.lista-marcada li::before {
  content: "";
  position: absolute; left: 0; top: 0.6em;
  width: 10px; height: 10px;
  background: var(--verde);
  border-radius: 2px 10px 10px 10px;
}
.secao--azul .lista-marcada li::before, .bloco--azul .lista-marcada li::before { background: var(--amarelo); }

/* ------------------------------------------------------------------ rodape */
.rodape {
  position: relative;
  background: var(--azul);
  color: rgba(255, 255, 255, 0.86);
  border-top-left-radius: var(--raio-faixa);
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(2.75rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2rem);
}
.rodape > .container { position: relative; z-index: 2; }
.rodape__topo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
@media (max-width: 760px) { .rodape__topo { grid-template-columns: 1fr; } }
.rodape__marca img { width: clamp(230px, 29vw, 330px); }
.rodape__slogan {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(1.18rem, 1rem + 0.45vw, 1.45rem);
  line-height: 1.3;
  margin-top: 1.1rem;
  max-width: 26ch;
}
.rodape__slogan span { color: var(--amarelo); display: block; }
.rodape__identificacao {
  display: grid;
  gap: 0.15rem;
  margin-top: 1.35rem;
  font-size: var(--t-pequeno);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.84);
}
.rodape__identificacao p:last-child { color: var(--amarelo); font-weight: 700; }
.rodape__links { display: grid; gap: 0.55rem; list-style: none; font-size: var(--t-pequeno); }
.rodape__links a { color: rgba(255, 255, 255, 0.86); transition: color var(--transicao); }
.rodape__links a:hover { color: var(--amarelo); }
.rodape__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  font-size: var(--t-pequeno);
  color: rgba(255, 255, 255, 0.7);
}
.rodape__base > div { display: grid; gap: 0.45rem; }
.rodape__base a { color: inherit; }
.rodape__base a:hover { color: var(--amarelo); }
.rodape__institucional {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.85rem 1.15rem;
  list-style: none;
}
@media (max-width: 760px) { .rodape__institucional { justify-content: flex-start; } }

/* ---------------------------------------------------- documentos públicos */
.documento { max-width: 800px; display: grid; gap: clamp(2rem, 4vw, 3.25rem); }
.documento__introducao { font-family: var(--fonte-titulo); font-weight: 600; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem); line-height: 1.45; color: var(--azul); }
.documento__secao { display: grid; gap: 0.85rem; padding-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--linha); }
.documento__secao h2 { font-size: var(--t-h3); color: var(--verde-texto); }
.documento__secao p { line-height: 1.75; }
.documento__aviso { font-size: var(--t-pequeno); color: var(--tinta-suave); border-left: 3px solid var(--amarelo); padding-left: 1rem; }

.voltar-ao-topo {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--azul);
  color: #fff;
  border: 0; border-radius: 50%;
  box-shadow: var(--sombra-flutua);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--transicao), transform var(--transicao),
              visibility var(--transicao), background var(--transicao);
}
.voltar-ao-topo[data-visivel="sim"] { opacity: 1; visibility: visible; transform: translateY(0); }
.voltar-ao-topo:hover { background: var(--verde); }
.voltar-ao-topo svg { width: 20px; height: 20px; fill: currentColor; }

/* ---------------------------------------------------------------- animacao */
/* Entrada suave presa a rolagem, 100% em CSS.
   REGRA DURA: a animacao NUNCA mexe em opacity nem em visibility — so desloca.
   Se o navegador nao suportar, se o JS falhar, se a timeline congelar (print,
   captura de pagina inteira, leitor de tela), o pior caso e um deslocamento de
   14px imperceptivel. O site antigo apagava secoes inteiras porque a
   visibilidade dependia de script; aqui isso e impossivel por construcao. */
.revela { transform: none; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .revela {
      animation: revelar linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
}
@keyframes revelar {
  from { transform: translateY(14px); }
  to { transform: none; }
}

/* ------------------------------------------------------------------ print  */
@media print {
  .cabecalho, .voltar-ao-topo, .carrossel__pontos, .hero__foto { display: none; }
  body { background: #fff; color: #000; }
}