/* ==========================================================================
   COMPONENTES — Jacson Montenegro
   ========================================================================== */

:root {
  --pincelada: url("../svg/pincelada.svg");
  --sublinhado: url("../svg/sublinhado.svg");
  --mapa-bahia: url("../svg/bahia.svg");
  --mapa-bahia-linha: url("../svg/bahia-linha.svg");
}

/* ==========================================================================
   MAPA DA BAHIA (malha oficial do IBGE)
   Aplicado como máscara para que a cor venha do CSS, e não do arquivo.
   ========================================================================== */

.mapa-bahia {
  display: block;
  aspect-ratio: 1000 / 1091;
  background: currentColor;
  -webkit-mask: var(--mapa-bahia) no-repeat center / contain;
  mask: var(--mapa-bahia) no-repeat center / contain;
}
.mapa-bahia--linha {
  -webkit-mask-image: var(--mapa-bahia-linha);
  mask-image: var(--mapa-bahia-linha);
}

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

.cabecalho {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-cabecalho);
  height: var(--topo);
  display: flex;
  align-items: center;
  transition: background var(--tempo-medio) var(--curva),
              box-shadow var(--tempo-medio) var(--curva),
              backdrop-filter var(--tempo-medio) var(--curva);
}
.cabecalho::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 24, 51, 0.75) 0%, rgba(2, 24, 51, 0) 100%);
  opacity: 1;
  transition: opacity var(--tempo-medio) var(--curva);
  pointer-events: none;
}
.cabecalho.rolado {
  background: rgba(2, 24, 51, 0.94);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--linha-escura), 0 12px 32px rgba(2, 24, 51, 0.28);
}
.cabecalho.rolado::after { opacity: 0; }

.cabecalho__envelope {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--goteira);
  display: flex;
  align-items: center;
  gap: var(--e5);
  position: relative;
  z-index: 1;
}

/* ---------- Assinatura (monograma + nome) ---------- */
.assinatura {
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  flex: 0 0 auto;
  color: var(--branco);
}
.assinatura__marca {
  width: 42px; height: 42px;
  border-radius: 11px;
  flex: 0 0 auto;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.assinatura__texto { display: flex; flex-direction: column; line-height: 1; }
.assinatura__nome {
  font-family: var(--fonte-display);
  font-variation-settings: 'wght' 800, 'wdth' 88;
  font-size: 1.06rem;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.assinatura__cargo {
  font-size: 0.6rem;
  font-weight: var(--peso-extra);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--amarelo);
  margin-top: 4px;
}

/* ---------- Navegação ---------- */
.navegacao { display: none; margin-left: auto; }
.navegacao__lista { display: flex; align-items: center; gap: clamp(0.5rem, 1.4vw, 1.5rem); }
.navegacao__link {
  position: relative;
  display: inline-block;
  padding: var(--e2) var(--e1);
  font-size: 0.925rem;
  font-weight: var(--peso-semi);
  color: rgba(255, 255, 255, 0.86);
  transition: color var(--tempo-rapido) var(--curva);
}
.navegacao__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--amarelo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tempo-medio) var(--curva);
}
.navegacao__link:hover { color: var(--branco); }
.navegacao__link:hover::after,
.navegacao__link[aria-current="page"]::after { transform: scaleX(1); }
.navegacao__link[aria-current="page"] { color: var(--branco); }

.cabecalho__acao { display: none; }

/* 1140px: abaixo disso a navegação de seis itens + CTA quebra em duas linhas,
   então o menu em tela cheia assume. */
@media (min-width: 1140px) {
  .navegacao, .cabecalho__acao { display: block; }
  .cabecalho__acao { margin-left: var(--e4); }
}

/* ---------- Botão sanduíche ---------- */
.sanduiche {
  margin-left: auto;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--raio-m);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--branco);
  background: rgba(255, 255, 255, 0.06);
}
.sanduiche__barras { display: block; width: 20px; height: 14px; position: relative; }
.sanduiche__barras span {
  position: absolute; left: 0;
  width: 100%; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--tempo-medio) var(--curva), opacity var(--tempo-rapido) var(--curva);
}
.sanduiche__barras span:nth-child(1) { top: 0; }
.sanduiche__barras span:nth-child(2) { top: 6px; }
.sanduiche__barras span:nth-child(3) { top: 12px; }
.sanduiche[aria-expanded="true"] .sanduiche__barras span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sanduiche[aria-expanded="true"] .sanduiche__barras span:nth-child(2) { opacity: 0; }
.sanduiche[aria-expanded="true"] .sanduiche__barras span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 1140px) { .sanduiche { display: none; } }

/* ---------- Menu em tela cheia ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  padding: calc(var(--topo) + var(--e5)) var(--goteira) var(--e7);
  background:
    radial-gradient(120% 80% at 88% 0%, rgba(10, 114, 201, 0.4) 0%, transparent 60%),
    linear-gradient(160deg, var(--azul-noite) 0%, var(--azul-tinta) 100%);
  color: var(--branco);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--tempo-medio) var(--curva),
              transform var(--tempo-medio) var(--curva),
              visibility var(--tempo-medio) var(--curva);
}
.menu[data-aberto="true"] { opacity: 1; visibility: visible; transform: none; }
.menu__lista { display: flex; flex-direction: column; gap: var(--e1); }
.menu__link {
  display: flex;
  align-items: baseline;
  gap: var(--e4);
  padding: var(--e4) 0;
  border-bottom: 1px solid var(--linha-escura);
  font-family: var(--fonte-display);
  font-variation-settings: 'wght' 800, 'wdth' 90;
  font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.25rem);
  text-transform: uppercase;
  letter-spacing: -0.015em;
}
.menu__link span {
  font-family: var(--fonte-texto);
  font-size: 0.75rem;
  font-weight: var(--peso-extra);
  letter-spacing: 0.14em;
  color: var(--amarelo);
}
.menu__rodape { margin-top: auto; padding-top: var(--e6); }

@media (min-width: 1140px) { .menu { display: none; } }

/* ==========================================================================
   BOTÕES
   ========================================================================== */

.botao {
  --botao-fundo: var(--amarelo);
  --botao-tinta: var(--azul-noite);
  --botao-borda: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 52px;
  padding: 0 var(--e6);
  border-radius: var(--raio-pilula);
  border: 2px solid var(--botao-borda);
  background: var(--botao-fundo);
  color: var(--botao-tinta);
  font-size: var(--t-base);
  font-weight: var(--peso-extra);
  letter-spacing: 0.005em;
  text-align: center;
  cursor: pointer;
  transition: transform var(--tempo-rapido) var(--curva),
              box-shadow var(--tempo-medio) var(--curva),
              background var(--tempo-rapido) var(--curva),
              color var(--tempo-rapido) var(--curva);
}
.botao:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.botao:active { transform: translateY(0); }
.botao svg { width: 1.15em; height: 1.15em; flex: 0 0 auto; }

.botao--primario { --botao-fundo: var(--amarelo); --botao-tinta: #241a00; }
.botao--primario:hover { --botao-fundo: #ffd230; }

.botao--verde { --botao-fundo: var(--verde-forte); --botao-tinta: var(--branco); }
.botao--verde:hover { --botao-fundo: var(--verde-escuro); }

.botao--azul { --botao-fundo: var(--azul); --botao-tinta: var(--branco); }
.botao--azul:hover { --botao-fundo: #004c8d; }

.botao--contorno {
  --botao-fundo: transparent;
  --botao-tinta: var(--branco);
  --botao-borda: rgba(255, 255, 255, 0.45);
}
.botao--contorno:hover { --botao-fundo: rgba(255, 255, 255, 0.1); --botao-borda: var(--branco); }

.botao--contorno-escuro {
  --botao-fundo: transparent;
  --botao-tinta: var(--azul);
  --botao-borda: var(--azul);
}
.botao--contorno-escuro:hover { --botao-fundo: var(--azul); --botao-tinta: var(--branco); }

.botao--compacto { min-height: 44px; padding: 0 var(--e5); font-size: var(--t-mini); }
.botao--largo { width: 100%; }

.link-seta {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-weight: var(--peso-extra);
  color: var(--azul);
  border-bottom: 2px solid transparent;
  transition: gap var(--tempo-rapido) var(--curva), border-color var(--tempo-rapido) var(--curva);
}
.link-seta:hover { gap: var(--e3); border-bottom-color: currentColor; }
.link-seta svg { width: 1em; height: 1em; }
.sobre-escuro .link-seta, .faixa-escura .link-seta { color: var(--amarelo); }

/* ==========================================================================
   HERÓI
   ========================================================================== */

.heroi {
  position: relative;
  min-height: min(100svh, 900px);
  /* grid com linha elástica em cima: ancora o conteúdo embaixo sem que o texto
     transborde por cima do cabeçalho quando ele é mais alto que a viewport
     (o que acontece com flex + align-items:flex-end). */
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: calc(var(--topo) + var(--e6));
  padding-bottom: var(--e7);
  overflow: hidden;
  background:
    radial-gradient(120% 85% at 78% 4%, rgba(10, 114, 201, 0.42) 0%, transparent 58%),
    linear-gradient(158deg, var(--azul-noite) 0%, var(--azul-tinta) 55%, #06457e 100%);
  color: var(--branco);
  isolation: isolate;
}

.heroi__mapa {
  position: absolute;
  z-index: -2;
  top: -6%;
  right: -12%;
  height: 118%;
  width: auto;
  aspect-ratio: 1000 / 1091;
  color: rgba(207, 226, 245, 0.13);
  pointer-events: none;
}

/* Fita da bandeira: fica atrás do conteúdo e em opacidade baixa, para nunca
   disputar legibilidade com o texto branco por cima. */
.heroi__fita {
  position: absolute;
  z-index: -2;
  left: 0; bottom: 0;
  width: min(34%, 380px);
  aspect-ratio: 1 / 1;
  pointer-events: none;
  background:
    linear-gradient(to top right, var(--amarelo) 0 18%, transparent 18.4%),
    linear-gradient(to top right, var(--verde) 0 34%, transparent 34.4%);
  opacity: 0.22;
}
/* Fio tricolor rente à base do herói — assinatura gráfica sem prejudicar texto */
.heroi::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 7px;
  background: linear-gradient(90deg,
    var(--verde) 0 34%, var(--amarelo) 34% 67%, var(--azul-vivo) 67% 100%);
  z-index: 2;
  pointer-events: none;
}

/* A figura vive DENTRO do envelope, em coluna própria do grid. Posicioná-la
   absoluta fazia ela invadir o texto entre 760px e 1100px. */
.heroi__figura {
  display: block;
  width: min(94%, 420px);
  margin: var(--e6) auto calc(var(--e7) * -1);
  filter: drop-shadow(-14px 20px 40px rgba(0, 10, 24, 0.5));
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.heroi__figura img { width: 100%; height: auto; }

.heroi__envelope {
  grid-row: 2;
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--goteira);
}

.heroi__conteudo { max-width: 44rem; }

.heroi__selo {
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e2) var(--e4) var(--e2) var(--e2);
  margin-bottom: var(--e5);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: var(--raio-pilula);
  font-size: var(--t-mini);
  font-weight: var(--peso-extra);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.heroi__selo img { height: 22px; width: auto; }
.heroi__selo .numero-urna { font-size: 1.05rem; letter-spacing: 0; }

.heroi__titulo {
  font-family: var(--fonte-display);
  /* wdth 73: com 78 a linha "UNIDOS PARA" pedia 689px numa coluna de 674px
     e quebrava em quatro linhas no desktop. */
  font-variation-settings: 'wght' 900, 'wdth' 73;
  font-size: var(--t-display-xl);
  line-height: 0.9;
  letter-spacing: -0.028em;
  text-transform: uppercase;
  margin-bottom: var(--e5);
  text-wrap: balance;
}
.heroi__titulo .pincel { color: var(--amarelo); }

.heroi__apoio {
  font-size: var(--t-guia);
  line-height: 1.5;
  color: var(--azul-claro);
  max-width: 34rem;
  margin-bottom: var(--e6);
}

.heroi__acoes { display: flex; flex-wrap: wrap; gap: var(--e3); }

.heroi__nome {
  margin-top: var(--e6);
  padding-top: var(--e5);
  border-top: 1px solid var(--linha-escura);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e2) var(--e4);
}
.heroi__nome strong {
  font-family: var(--fonte-display);
  font-variation-settings: 'wght' 900, 'wdth' 84;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.heroi__nome span {
  font-size: var(--t-mini);
  font-weight: var(--peso-extra);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amarelo);
}

/* Abaixo de 900px o herói empilha: texto e, embaixo, a figura centralizada. */
@media (max-width: 899px) {
  .heroi {
    display: block;
    min-height: auto;
    padding-top: calc(var(--topo) + var(--e5));
    padding-bottom: 0;
  }
  .heroi__figura { margin-bottom: 0; }
  .heroi__mapa { height: 54%; top: 6%; right: -26%; color: rgba(207, 226, 245, 0.09); }
  .heroi__fita { width: 58%; opacity: 0.18; }
  .heroi__titulo { font-size: clamp(2.75rem, 2.1rem + 5.4vw, 4.25rem); }
  .heroi__acoes .botao { width: 100%; }
}

/* A partir de 900px, duas colunas: o texto nunca cruza a figura. */
@media (min-width: 900px) {
  .heroi__envelope {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
    align-items: end;
    column-gap: var(--e5);
  }
  .heroi__conteudo { max-width: none; }
  .heroi__figura {
    width: 100%;
    max-width: 520px;
    justify-self: end;
    margin: 0 0 calc(var(--e7) * -1);
  }
}
/* No desktop grande a coluna de texto precisa caber "UNIDOS PARA" em uma linha.
   A figura ganha largura estourando a própria coluna para a direita — o herói
   tem overflow:hidden, então o excedente é aparado na borda. */
@media (min-width: 1200px) {
  .heroi__envelope { grid-template-columns: minmax(0, 1fr) minmax(0, 430px); }
  .heroi__figura { width: 620px; max-width: none; margin-right: -150px; }
}
@media (min-width: 1400px) {
  .heroi__envelope { grid-template-columns: minmax(0, 1fr) minmax(0, 470px); }
  .heroi__figura { width: 680px; margin-right: -170px; }
}

/* ==========================================================================
   MANIFESTO / FAIXA DE DECLARAÇÃO
   ========================================================================== */

.manifesto { position: relative; overflow: hidden; }
.manifesto__frase {
  font-family: var(--fonte-display);
  font-variation-settings: 'wght' 900, 'wdth' 82;
  font-size: clamp(1.875rem, 1.1rem + 3.4vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  max-width: 20ch;
}
.manifesto__assinatura {
  margin-top: var(--e6);
  display: flex;
  align-items: center;
  gap: var(--e4);
  font-size: var(--t-mini);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: var(--peso-extra);
  color: var(--azul-claro);
}
.manifesto__assinatura::before {
  content: "";
  width: 46px; height: 3px;
  background: var(--amarelo);
  border-radius: var(--raio-pilula);
}

/* ==========================================================================
   CARTÕES
   ========================================================================== */

.cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  background: var(--sup-cartao);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-1);
  transition: transform var(--tempo-medio) var(--curva), box-shadow var(--tempo-medio) var(--curva);
}
.cartao--elevavel:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }

.faixa-escura .cartao {
  background: var(--sup-cartao-escuro);
  border-color: var(--linha-escura);
  box-shadow: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.cartao__icone {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--raio-m);
  background: var(--azul-nevoa);
  color: var(--azul);
  flex: 0 0 auto;
}
.cartao__icone svg { width: 26px; height: 26px; }
.faixa-escura .cartao__icone { background: rgba(253, 195, 0, 0.14); color: var(--amarelo); }

.cartao__numero {
  font-family: var(--fonte-display);
  font-variation-settings: 'wght' 900, 'wdth' 88;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--linha);
}
.faixa-escura .cartao__numero { color: rgba(255, 255, 255, 0.2); }

.cartao__titulo { font-size: var(--t-t3); font-variation-settings: 'wght' 800, 'wdth' 96; }
.cartao__texto { color: var(--tinta-suave); font-size: var(--t-base); margin: 0; }
.faixa-escura .cartao__texto { color: var(--azul-claro); }

/* Pilar com barra de cor da bandeira */
.pilar { border-top: 4px solid var(--azul); }
.pilar:nth-child(2) { border-top-color: var(--verde); }
.pilar:nth-child(3) { border-top-color: var(--amarelo); }

/* ==========================================================================
   RETRATO EDITORIAL
   ========================================================================== */

.retrato {
  position: relative;
  border-radius: var(--raio-g);
  overflow: hidden;
  box-shadow: var(--sombra-3);
}
.retrato img { width: 100%; height: 100%; object-fit: cover; }
.retrato::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: inherit;
  pointer-events: none;
}
/* Moldura decorativa: precisa de um invólucro próprio porque .retrato recorta
   o que passa das bordas (overflow: hidden) e engoliria o bloco de cor. */
.moldura { position: relative; }
.moldura::before {
  content: "";
  position: absolute;
  right: -16px;
  bottom: -16px;
  width: 56%;
  height: 46%;
  border-radius: var(--raio-g);
  background: linear-gradient(135deg, var(--verde) 0%, var(--amarelo) 100%);
}
.moldura::after {
  content: "";
  position: absolute;
  left: -16px;
  top: -16px;
  width: 34%;
  height: 30%;
  border-radius: var(--raio-g);
  border: 2px solid var(--azul);
  opacity: 0.35;
}
.moldura > .retrato { position: relative; z-index: 1; }
@media (max-width: 640px) {
  .moldura::before, .moldura::after { display: none; }
}

.duo-retrato {
  display: grid;
  gap: var(--e5);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .duo-retrato { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--e8); }
  .duo-retrato--invertido > *:first-child { order: 2; }
}

/* ==========================================================================
   ACORDEÃO (divulgação progressiva — fechado por padrão)
   ========================================================================== */

.acordeao { display: flex; flex-direction: column; gap: var(--e3); }

.bloco {
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  background: var(--branco);
  overflow: hidden;
  transition: border-color var(--tempo-rapido) var(--curva), box-shadow var(--tempo-medio) var(--curva);
}
.bloco[open] { border-color: var(--azul); box-shadow: var(--sombra-1); }
.faixa-escura .bloco { background: var(--sup-cartao-escuro); border-color: var(--linha-escura); }
.faixa-escura .bloco[open] { border-color: var(--amarelo); }

.bloco__titulo {
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: var(--e4) var(--e5);
  cursor: pointer;
  list-style: none;
  font-family: var(--fonte-display);
  font-variation-settings: 'wght' 700, 'wdth' 98;
  font-size: var(--t-t3);
  letter-spacing: -0.008em;
}
.bloco__titulo::-webkit-details-marker { display: none; }
.bloco__titulo:hover { background: var(--azul-nevoa); }
.faixa-escura .bloco__titulo:hover { background: rgba(255, 255, 255, 0.06); }

.bloco__icone {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--raio-p);
  background: var(--azul-nevoa);
  color: var(--azul);
  flex: 0 0 auto;
}
.bloco__icone svg { width: 22px; height: 22px; }
.faixa-escura .bloco__icone { background: rgba(253, 195, 0, 0.14); color: var(--amarelo); }

.bloco__sinal {
  margin-left: auto;
  width: 28px; height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--linha);
  color: var(--azul);
  transition: transform var(--tempo-medio) var(--curva), border-color var(--tempo-rapido) var(--curva);
}
.bloco__sinal::before, .bloco__sinal::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 2px;
}
.bloco__sinal::before { width: 12px; height: 2px; }
.bloco__sinal::after { width: 2px; height: 12px; transition: transform var(--tempo-medio) var(--curva); }
.bloco[open] .bloco__sinal { border-color: var(--azul); }
.bloco[open] .bloco__sinal::after { transform: scaleY(0); }
.faixa-escura .bloco__sinal { border-color: var(--linha-escura); color: var(--amarelo); }
.faixa-escura .bloco[open] .bloco__sinal { border-color: var(--amarelo); }

.bloco__corpo {
  padding: 0 var(--e5) var(--e5);
  color: var(--tinta-suave);
  font-size: var(--t-base);
}
.faixa-escura .bloco__corpo { color: var(--azul-claro); }
.bloco__corpo > * + * { margin-top: var(--e3); }
.bloco__lista li {
  position: relative;
  padding-left: var(--e5);
  margin-top: var(--e2);
}
.bloco__lista li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.68em;
  width: 10px; height: 3px;
  background: var(--verde);
  border-radius: var(--raio-pilula);
}

/* ==========================================================================
   TEMAS / BANDEIRAS
   ========================================================================== */

.tema {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  padding: var(--e5);
  border-radius: var(--raio-m);
  background: var(--branco);
  border: 1px solid var(--linha);
  transition: transform var(--tempo-medio) var(--curva), box-shadow var(--tempo-medio) var(--curva);
}
.tema:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); }
.tema__icone { width: 44px; height: 44px; color: var(--azul); }
.tema__icone svg { width: 100%; height: 100%; }
.tema__titulo { font-size: 1.0625rem; font-variation-settings: 'wght' 800, 'wdth' 100; }
.tema__texto { font-size: var(--t-mini); color: var(--tinta-suave); margin: 0; }

/* ==========================================================================
   ESTATÍSTICAS / DESTAQUES
   ========================================================================== */

.destaques { display: grid; gap: var(--e5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.destaque { padding-left: var(--e4); border-left: 3px solid var(--amarelo); }
.destaque__valor {
  font-family: var(--fonte-display);
  font-variation-settings: 'wght' 900, 'wdth' 88;
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.destaque__rotulo {
  margin-top: var(--e2);
  font-size: var(--t-mini);
  font-weight: var(--peso-semi);
  color: var(--tinta-suave);
}
.faixa-escura .destaque__rotulo { color: var(--azul-claro); }

/* ==========================================================================
   CHAMADA FINAL
   ========================================================================== */

.chamada {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio-xg);
  padding: clamp(2rem, 1.2rem + 3.4vw, 4rem);
  background:
    radial-gradient(110% 120% at 88% 0%, rgba(10, 114, 201, 0.5) 0%, transparent 62%),
    linear-gradient(150deg, var(--azul-noite) 0%, #063e73 100%);
  color: var(--branco);
  isolation: isolate;
}
.chamada__mapa {
  position: absolute;
  z-index: -1;
  right: -6%;
  top: -18%;
  height: 150%;
  width: auto;
  aspect-ratio: 1000 / 1091;
  color: rgba(207, 226, 245, 0.1);
  pointer-events: none;
}

/* ==========================================================================
   FORMULÁRIO
   ========================================================================== */

.formulario { display: grid; gap: var(--e4); }
.campo { display: flex; flex-direction: column; gap: var(--e2); }
.campo__rotulo { font-size: var(--t-mini); font-weight: var(--peso-extra); letter-spacing: 0.01em; }
.campo__dica { font-size: var(--t-micro); color: var(--tinta-suave); }
.faixa-escura .campo__dica { color: var(--azul-claro); }

.campo__entrada,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 52px;
  padding: var(--e3) var(--e4);
  border: 2px solid var(--linha);
  border-radius: var(--raio-m);
  background: var(--branco);
  color: var(--tinta);
  font-size: var(--t-base);
  transition: border-color var(--tempo-rapido) var(--curva), box-shadow var(--tempo-rapido) var(--curva);
}
.campo textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.campo__entrada:hover, .campo select:hover, .campo textarea:hover { border-color: #b9c9dc; }
.campo__entrada:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 4px rgba(0, 92, 169, 0.16);
  outline: none;
}
.campo__entrada[aria-invalid="true"] { border-color: var(--erro); }
.campo__erro { font-size: var(--t-micro); font-weight: var(--peso-semi); color: var(--erro); }
.campo__erro:empty { display: none; }

.campo-duplo { display: grid; gap: var(--e4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .campo-duplo { grid-template-columns: 1fr 1fr; } }

.consentimento {
  display: flex;
  gap: var(--e3);
  align-items: flex-start;
  font-size: var(--t-mini);
  color: var(--tinta-suave);
  line-height: 1.5;
}
.consentimento input {
  width: 22px; height: 22px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--azul);
}
.consentimento a { color: var(--azul); text-decoration: underline; text-underline-offset: 2px; }

.aviso {
  display: flex;
  gap: var(--e3);
  padding: var(--e4);
  border-radius: var(--raio-m);
  font-size: var(--t-mini);
  line-height: 1.5;
}
.aviso--sucesso { background: #e8f6ee; color: #0b4a24; border: 1px solid #bfe3cd; }
.aviso--erro { background: #fdeceb; color: #7c1a15; border: 1px solid #f3c6c3; }
.aviso[hidden] { display: none; }

/* ==========================================================================
   VAZIO ACOLHEDOR
   ========================================================================== */

.vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e4);
  text-align: center;
  padding: var(--e8) var(--e5);
  border: 1px dashed var(--linha);
  border-radius: var(--raio-g);
  background: var(--azul-nevoa);
}
.vazio__icone {
  width: 64px; height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--branco);
  color: var(--azul);
  box-shadow: var(--sombra-1);
}
.vazio__icone svg { width: 30px; height: 30px; }
.vazio__titulo { font-size: var(--t-t3); font-variation-settings: 'wght' 800, 'wdth' 98; }
.vazio__texto { color: var(--tinta-suave); max-width: 44ch; margin: 0; }

/* ==========================================================================
   RODAPÉ
   ========================================================================== */

.rodape {
  background: var(--azul-noite);
  color: var(--azul-claro);
  padding-block: var(--e8) var(--e6);
  font-size: var(--t-mini);
}
.rodape__grade {
  display: grid;
  gap: var(--e6);
  grid-template-columns: 1fr;
  padding-bottom: var(--e6);
  border-bottom: 1px solid var(--linha-escura);
}
@media (min-width: 760px) { .rodape__grade { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1000px) { .rodape__grade { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }

.rodape__titulo {
  font-family: var(--fonte-texto);
  font-size: var(--t-micro);
  font-weight: var(--peso-extra);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--branco);
  margin-bottom: var(--e4);
}
.rodape__lista { display: flex; flex-direction: column; gap: var(--e3); }
.rodape a { transition: color var(--tempo-rapido) var(--curva); }
.rodape a:hover { color: var(--amarelo); }

.rodape__marcas { display: flex; align-items: center; gap: var(--e5); flex-wrap: wrap; margin-top: var(--e5); }
.rodape__marcas img { height: 30px; width: auto; opacity: 0.92; }

.rodape__legal {
  padding-top: var(--e5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3) var(--e5);
  justify-content: space-between;
  color: rgba(207, 226, 245, 0.7);
  font-size: var(--t-micro);
  line-height: 1.6;
}

.redes { display: flex; gap: var(--e3); flex-wrap: wrap; }
.redes a {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--linha-escura);
  color: var(--branco);
  transition: background var(--tempo-rapido) var(--curva),
              border-color var(--tempo-rapido) var(--curva),
              transform var(--tempo-rapido) var(--curva);
}
.redes a:hover { background: var(--amarelo); color: var(--azul-noite); border-color: var(--amarelo); transform: translateY(-2px); }
.redes svg { width: 20px; height: 20px; }

/* ==========================================================================
   BOTÃO FLUTUANTE / VOLTAR AO TOPO
   ========================================================================== */

.zap {
  position: fixed;
  right: var(--e4);
  bottom: var(--e4);
  z-index: 90;
  width: 58px; height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* verde escurecido em relação ao verde do WhatsApp para o ícone branco
     atingir 3:1 de contraste (WCAG 1.4.11, objetos gráficos) */
  background: #159a48;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  transition: transform var(--tempo-rapido) var(--curva);
}
.zap:hover { transform: scale(1.06); }
.zap svg { width: 30px; height: 30px; }

.ao-topo {
  position: fixed;
  right: var(--e4);
  bottom: calc(var(--e4) + 70px);
  z-index: 90;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(2, 24, 51, 0.86);
  color: var(--branco);
  border: 1px solid var(--linha-escura);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--tempo-medio) var(--curva),
              transform var(--tempo-medio) var(--curva),
              visibility var(--tempo-medio) var(--curva);
}
.ao-topo.visivel { opacity: 1; visibility: visible; transform: none; }
.ao-topo svg { width: 20px; height: 20px; }

/* ==========================================================================
   REVELAÇÃO AO ROLAR
   ========================================================================== */

.revela {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--tempo-lento) var(--curva-suave),
              transform var(--tempo-lento) var(--curva-suave);
}
.revela.visto { opacity: 1; transform: none; }

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

/* ==========================================================================
   MIGALHAS E CAPA INTERNA
   ========================================================================== */

.capa {
  position: relative;
  padding-top: calc(var(--topo) + var(--e7));
  padding-bottom: var(--e7);
  overflow: hidden;
  background:
    radial-gradient(115% 90% at 84% 0%, rgba(10, 114, 201, 0.4) 0%, transparent 60%),
    linear-gradient(158deg, var(--azul-noite) 0%, var(--azul-tinta) 100%);
  color: var(--branco);
  isolation: isolate;
}
.capa__mapa {
  position: absolute;
  z-index: -1;
  right: -8%;
  top: -30%;
  height: 190%;
  width: auto;
  aspect-ratio: 1000 / 1091;
  color: rgba(207, 226, 245, 0.09);
  pointer-events: none;
}
.capa__titulo { max-width: 22ch; }

.migalhas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  margin-bottom: var(--e5);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: var(--peso-semi);
  color: rgba(255, 255, 255, 0.66);
}
.migalhas a:hover { color: var(--amarelo); }
.migalhas li + li::before { content: "/"; margin-right: var(--e2); opacity: 0.5; }
.migalhas li { display: inline-flex; align-items: center; }

/* ==========================================================================
   ÍNDICE LATERAL (páginas longas)
   ========================================================================== */

.indice { display: none; }
@media (min-width: 1100px) {
  .indice {
    display: block;
    position: sticky;
    top: calc(var(--topo) + var(--e5));
    align-self: start;
  }
  .indice__lista { display: flex; flex-direction: column; gap: var(--e2); border-left: 2px solid var(--linha); }
  .indice__lista a {
    display: block;
    padding: var(--e2) var(--e4);
    margin-left: -2px;
    border-left: 2px solid transparent;
    font-size: var(--t-mini);
    font-weight: var(--peso-semi);
    color: var(--tinta-suave);
    transition: color var(--tempo-rapido) var(--curva), border-color var(--tempo-rapido) var(--curva);
  }
  .indice__lista a:hover, .indice__lista a.ativo { color: var(--azul); border-left-color: var(--azul); }
  .com-indice { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--e8); }
}