/* Paginas de documento (contato, politica de privacidade, erro 404) na
   linguagem da pagina principal, sem as animacoes: aqui o foco e so leitura. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url("/assets/fontes/archivo-400-800.97b2fb35e7.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fontes/plex-mono-normal-500.01d2854474.woff2") format("woff2");
}

@font-face {
  font-family: "ASPM Serif Italico";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fontes/serif-italico.d22841e772.woff2") format("woff2");
}

:root {
  --noite: #050f24;
  --painel: #0a1c3d;
  --ceu: #39a9e3;
  --ceu-claro: #8fd3f5;
  --texto: #eaf1f8;
  --texto-corpo: #c3d1e2;
  --texto-suave: #93a9c4;
  --linha: rgba(143, 211, 245, 0.14);
  --linha-forte: rgba(143, 211, 245, 0.32);
  --tinta-botao: #04122b;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --serifa: "ASPM Serif Italico", Georgia, serif;
  --margem: clamp(20px, 4.4vw, 56px);
  --t-voz: clamp(1.5rem, 1.15rem + 1.2vw, 2.6rem);
  --t-pequeno: 1rem;
  --superficie: linear-gradient(158deg, rgba(18, 46, 92, 0.78), rgba(7, 21, 50, 0.62)) padding-box,
    linear-gradient(140deg, rgba(143, 211, 245, 0.42), rgba(143, 211, 245, 0.06) 38%, rgba(143, 211, 245, 0.04) 62%, rgba(57, 169, 227, 0.3)) border-box;
}

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

html { -webkit-text-size-adjust: 100%; background: var(--noite); }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(90% 60% at 85% 0%, rgba(13, 57, 130, 0.45), transparent 70%),
    var(--noite);
  color: var(--texto-corpo);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
}

a { color: var(--ceu-claro); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--ceu); outline-offset: 4px; }

.pular {
  position: absolute;
  left: 16px;
  top: -100px;
  padding: 12px 18px;
  background: var(--ceu);
  color: var(--tinta-botao);
  font-weight: 600;
  /* Acima do topo fixo das paginas de projeto (z-index 30). */
  z-index: 60;
}
.pular:focus { top: 12px; }

.envelope { width: 100%; max-width: calc(1240px + 2 * var(--margem)); margin: 0 auto; padding: 0 var(--margem); }
.envelope-texto { max-width: calc(760px + 2 * var(--margem)); }

.topo { border-bottom: 1px solid var(--linha); }
.topo-linha { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; }
.marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-height: 44px; }
.marca .marca-icone { width: 42px; height: auto; }
.marca .marca-nome { width: 190px; height: auto; }
.lg-nome { fill: #ffffff; }
.lg-tagline { fill: var(--ceu-claro); stroke: var(--ceu-claro); }
.lg-folha[fill="#ffffff"] { fill: var(--noite); }
.lg-folha[fill="#0d3982"] { fill: #1c4c9c; }
.lg-orbita { fill: #ffffff; }
/* Link de navegacao do cabecalho: sem sublinhado (em maiusculas espacadas
   ele cortava o texto), com seta e cor que acende no hover. */
.voltar { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; color: var(--texto-corpo); font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; transition: color 0.2s ease; }
.voltar-seta { color: var(--ceu); font-family: "Archivo", system-ui, sans-serif; letter-spacing: 0; transition: transform 0.25s ease; }
.voltar:hover { color: var(--ceu-claro); }
.voltar:hover .voltar-seta { transform: translateX(-3px); }
/* Em tela estreita o logo ja leva ao inicio, e o texto quebraria em tres linhas. */
@media (max-width: 560px) { .voltar { display: none; } }

main { flex: 1; }

.documento { padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 8vw, 112px); }

.rotulo {
  display: block;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ceu-claro);
}

h1 {
  margin: 0 0 0.6em;
  color: var(--texto);
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* O destaque do titulo fica no Archivo, em azul; a voz serifada italica e
   reservada para a citacao do STF e as frases da pagina principal. */
h1 em { font-style: normal; font-weight: 500; font-stretch: 100%; color: var(--ceu-claro); }

h2 {
  margin: 2.4em 0 0.7em;
  color: var(--texto);
  font-size: 1.25rem;
  font-weight: 700;
  font-stretch: 108%;
}

p, li { margin: 0 0 1em; text-wrap: pretty; }
ul { padding-left: 1.2em; }
li::marker { color: var(--ceu); }

.nota { color: var(--texto-suave); font-family: var(--mono); font-size: 0.875rem; letter-spacing: 0.04em; }

.botao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  margin-top: 12px;
  padding: 14px 26px;
  background: var(--ceu);
  color: var(--tinta-botao);
  font-weight: 600;
  text-decoration: none;
}

/* overflow: o mapa de fundo passa da borda direita e, em tela estreita,
   viraria rolagem lateral. */
.erro { position: relative; display: grid; align-content: center; padding: 14vh 0; overflow: clip; isolation: isolate; }
.erro-codigo { font-family: var(--mono); color: var(--ceu-claro); letter-spacing: 0.16em; }

/* Rodape completo, o mesmo em todas as paginas. Fonte unica: o build cola
   este arquivo no <style> da pagina principal e em assets/documento.css.
   So usa variaveis que as duas folhas declaram. */
.rodape-colunas { position: relative; padding: clamp(48px, 6vw, 80px) 0 28px; border-top: 1px solid var(--linha); color: var(--texto-suave); font-size: 0.9375rem; line-height: 1.6; }
.rodape-grade { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 4vw, 64px); }
.rodape-coluna p { margin: 0 0 4px; }
.rodape-aspm .marca-completo { display: block; width: 190px; height: auto; margin-bottom: 18px; }
/* O logotipo ja traz o nome completo; embaixo, so o CNPJ, que e o que se
   procura para conferir a empresa. */
.rodape-cnpj { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.08em; }
.rodape-titulo { margin: 0 0 10px; color: var(--ceu-claro); font-family: var(--mono); font-size: 0.75rem; font-weight: 500; font-stretch: 100%; line-height: 1.4; letter-spacing: 0.16em; text-transform: uppercase; }
.rodape-lista { margin: 0; padding: 0; list-style: none; }
.rodape-lista li { margin: 0; }
.rodape-colunas a { display: inline-flex; align-items: center; min-height: 44px; color: var(--texto-corpo); text-decoration: none; transition: color 0.2s ease; }
.rodape-colunas a[aria-current="page"] { color: var(--ceu-claro); }
.rodape-contato { display: grid; gap: 8px; margin: 0; }
.rodape-contato dt { color: var(--texto-suave); font-size: 0.8125rem; }
.rodape-contato dd { margin: 0; color: var(--texto-corpo); overflow-wrap: anywhere; }
.rodape-final { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px; margin-top: clamp(32px, 4vw, 56px); padding-top: 12px; border-top: 1px solid var(--linha); font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.08em; }

@media (hover: hover) {
  .rodape-colunas a:hover { color: var(--ceu-claro); }
}

@media (max-width: 1080px) {
  .rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .rodape-grade { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

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

/* WhatsApp flutuante: so existe quando ha numero em config/site.json. Um
   circulo com o icone; com cursor, o nome aparece ao lado. Na pagina
   principal some enquanto o contato ou o rodape estao na tela, onde o mesmo
   link ja aparece. O rodape ganha folga embaixo para o circulo nunca cobrir
   a ultima linha. */
.zap-ancora { position: fixed; right: 24px; bottom: 24px; z-index: 30; transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.zap-ancora.oculto { opacity: 0; transform: translate3d(0, 16px, 0); pointer-events: none; }
.zap { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ceu); color: var(--tinta-botao); text-decoration: none; box-shadow: 0 12px 28px -12px rgba(1, 5, 14, 0.95); }
.zap-icone { width: 24px; height: 24px; flex-shrink: 0; }
.zap-texto { position: absolute; right: calc(100% + 10px); top: 50%; padding: 8px 12px; border: 1px solid rgba(143, 211, 245, 0.32); background: rgba(5, 15, 36, 0.94); color: #eaf1f8; font-size: 0.875rem; font-weight: 600; white-space: nowrap; opacity: 0; transform: translate3d(8px, -50%, 0); transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; }
.zap:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
@media (hover: hover) {
  .zap:hover .zap-texto { opacity: 1; transform: translate3d(0, -50%, 0); }
}
body:has(.zap-ancora) .rodape-colunas { padding-bottom: 104px; }
@media (max-width: 640px) {
  .zap-ancora { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .zap { width: 52px; height: 52px; }
}
@media print { .zap-ancora { display: none; } }
@media (prefers-reduced-motion: reduce) { .zap-ancora, .zap-texto { transition: none; } }

/* ---------------------------------------------------------------- contato */

/* Contato: dados, formulario e visto de envio. Vale para a secao de
   contato da pagina principal e para a pagina /contato. */

.contato-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 104px); align-items: start; }
.contato-texto { display: grid; gap: 24px; }
.contato-abertura { font-size: var(--t-lead); line-height: 1.6; color: var(--texto-corpo); }
.dados { display: grid; margin: 10px 0 0; border-top: 1px solid var(--linha); }
.dados div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--linha); }
.dados dt { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-suave); padding-top: 4px; }
.dados dd { margin: 0; color: var(--texto); }
.dados a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; color: var(--ceu-claro); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.dados a:hover { color: var(--texto); }

.formulario { display: grid; gap: 20px; padding: clamp(24px, 4vw, 48px); }
.formulario-titulo { font-size: 1.5rem; font-weight: 760; font-stretch: 118%; color: var(--texto); }
.campo-duplo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.campo { display: grid; align-content: start; }
/* Rotulo em 16 px, na letra do texto e em caixa normal: quem preenche e
   secretario ou servidor, muitas vezes com leitura cansada, e o mono em
   caixa alta de 12 px pedia esforco. O peso e a largura mantem o tom dos
   titulos. */
.campo label { margin-bottom: 8px; font-size: 1rem; font-weight: 640; font-stretch: 108%; line-height: 1.35; color: var(--texto); }
.formulario .campo-ajuda { margin: -4px 0 8px; font-size: 0.9375rem; line-height: 1.45; color: var(--texto-suave); }
/* Erro junto do campo, com sinal alem da cor. */
.formulario .campo-erro { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; font-size: 0.9375rem; font-weight: 600; line-height: 1.45; color: #ffb3a8; }
.campo-erro::before {
  content: "!";
  content: "!" / "";
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 1px;
  border-radius: 50%;
  background: #ffb3a8;
  color: var(--noite);
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1;
}
.formulario .consentimento + .campo-erro { margin-top: -12px; padding-left: 36px; }

/* Lado a lado, as caixas da mesma linha ficam alinhadas mesmo quando so
   uma tem texto de apoio ou erro: rotulo, apoio, caixa e erro ocupam a
   mesma faixa nas duas colunas. Sem subgrid, cada coluna segue a sua. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 641px) {
    .campo-duplo { grid-template-rows: repeat(4, auto); row-gap: 0; }
    .campo-duplo .campo { grid-row: span 4; grid-template-rows: subgrid; }
    .campo-duplo .campo label { grid-row: 1; }
    .campo-duplo .campo-ajuda { grid-row: 2; }
    .campo-duplo .campo input { grid-row: 3; }
    .campo-duplo .campo-erro { grid-row: 4; }
  }
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--linha-forte);
  border-radius: 2px;
  background: rgba(5, 15, 36, 0.72);
  color: var(--texto);
  font: inherit;
  font-size: 1rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.campo textarea { min-height: 140px; resize: vertical; }
.campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ceu) 50%), linear-gradient(135deg, var(--ceu) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus { border-color: var(--ceu); outline: none; box-shadow: 0 0 0 1px var(--ceu), 0 0 24px -6px rgba(57, 169, 227, 0.6); }
.campo-oculto { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.consentimento { display: flex; gap: 14px; align-items: flex-start; font-size: var(--t-pequeno); line-height: 1.55; }
.consentimento input { width: 22px; height: 22px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--ceu); }
.consentimento a { color: var(--ceu-claro); text-underline-offset: 3px; }
.formulario .botao { justify-self: start; }
.formulario .status { justify-self: start; }
.status { min-height: 1.6em; font-size: var(--t-pequeno); font-weight: 600; }
.status[data-estado="erro"] { color: #ffb3a8; }
.status a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.campo [aria-invalid="true"] { border-color: #ffb3a8; box-shadow: 0 0 0 1px #ffb3a8; }
.campo [aria-invalid="true"]:focus { border-color: #ffb3a8; box-shadow: 0 0 0 1px #ffb3a8, 0 0 0 4px rgba(255, 179, 168, 0.3); }
.consentimento input[aria-invalid="true"] { outline: 2px solid #ffb3a8; outline-offset: 2px; }

/* Envio do formulario: o visto do logo se desenha onde estava o botao. */
.envio { position: relative; justify-self: start; }
.visto-envio { position: absolute; left: 6px; top: 50%; width: 62px; height: auto; overflow: visible; opacity: 0; transform: translateY(-50%); pointer-events: none; }
.visto-traco { fill: var(--ceu); fill-opacity: 0; stroke: var(--ceu-claro); stroke-width: 4; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.formulario.enviado [data-botao-envio] { opacity: 0; transform: scale(0.96); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; }
.formulario.enviado .visto-envio { opacity: 1; }
.formulario.enviado .visto-traco { stroke-dashoffset: 0; fill-opacity: 1; transition: stroke-dashoffset 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.2s, fill-opacity 0.4s ease 1.05s; }

@media (hover: hover) {
  .campo input:not([aria-invalid="true"]):hover,
  .campo select:not([aria-invalid="true"]):hover,
  .campo textarea:not([aria-invalid="true"]):hover { border-color: var(--texto-suave); }
}

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

@media (max-width: 640px) {
  .campo-duplo { grid-template-columns: minmax(0, 1fr); }
  .dados div { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .formulario.enviado .visto-traco,
  .formulario.enviado [data-botao-envio] { transition: none; }
}
.superficie { position: relative; background: var(--superficie); border: 1px solid transparent; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 28px -18px rgba(1, 5, 14, 0.85); }
.contato-texto .rotulo,
.contato-texto h1 { margin: 0; }
/* O espaco entre os campos vem do gap da grade; a margem que o documento da
   a todo paragrafo somaria a ele. */
.formulario p { margin: 0; }
button.botao { margin-top: 0; border: 0; font: inherit; font-weight: 600; cursor: pointer; }

/* ---------------------------------------------------------------- projeto */

.topo-nav { display: flex; align-items: center; gap: 24px; }
.botao-pequeno { min-height: 44px; margin: 0; padding: 10px 18px; font-size: 0.9375rem; white-space: nowrap; }
/* Em 320 px fica so o icone da marca, para o botao caber numa linha; o
   link mantem o nome completo no aria-label. */
@media (max-width: 359px) {
  .topo .marca .marca-nome { display: none; }
}

/* Faixa dos projetos: as quatro siglas logo abaixo do cabecalho, a do
   projeto aberto marcada. Se nao couber, rola dentro dela mesma, nunca a
   pagina. */
.faixa { border-bottom: 1px solid var(--linha); }
.faixa-lista { display: flex; gap: clamp(20px, 3vw, 40px); margin: 0; padding: 0; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.faixa-lista::-webkit-scrollbar { display: none; }
.faixa-lista li { flex: none; margin: 0; }
.faixa-lista a { display: flex; align-items: baseline; gap: 10px; min-height: 52px; padding: 15px 0 13px; border-bottom: 2px solid transparent; color: var(--texto-suave); text-decoration: none; white-space: nowrap; }
.faixa-lista a:hover { color: var(--ceu-claro); }
.faixa-lista a[aria-current="page"] { border-bottom-color: var(--ceu); color: var(--texto-corpo); }
.faixa-sigla { color: var(--texto); font-weight: 700; font-stretch: 118%; letter-spacing: 0.02em; }
.faixa-lista a[aria-current="page"] .faixa-sigla { color: var(--ceu-claro); }
.faixa-sub { font-size: 0.875rem; }
/* Abaixo disso as quatro com subtitulo nao cabem: ficam so as siglas, e a
   marcada continua a vista sem precisar rolar a faixa. */
@media (max-width: 1180px) { .faixa-sub { display: none; } }

/* Trilha: de onde a pagina vem, acima do titulo do projeto. */
.trilha ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 14px 0 0; list-style: none; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }
.trilha li { display: inline-flex; align-items: center; margin: 0; }
.trilha a { display: inline-flex; align-items: center; min-height: 44px; color: var(--texto-suave); text-decoration: none; }
.trilha a:hover { color: var(--ceu-claro); }
.trilha a[aria-current="page"] { color: var(--ceu-claro); }
.trilha-sep { padding: 0 12px; color: var(--texto-suave); }

.pp-capa { position: relative; overflow: clip; padding: clamp(56px, 9vw, 128px) 0 clamp(48px, 7vw, 96px); border-bottom: 1px solid var(--linha); }
/* O mesmo Brasil de pontos da pagina principal, recuado a direita: o
   elemento-assinatura do site tambem nas paginas de projeto. */
.pp-capa::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -2%;
  width: min(70vh, 640px);
  aspect-ratio: 1400 / 1368;
  background: url("/assets/mapa-municipios-celular.db13062ec0.webp") center / 100% 100% no-repeat;
  opacity: 0.42;
  transform: translateY(-50%);
  pointer-events: none;
}
@media (max-width: 960px) {
  .pp-capa::before { right: -34%; width: 110vw; opacity: 0.14; }
}
.pp-capa .envelope { position: relative; }
/* Com a trilha logo acima, a capa desce menos: o titulo fica onde estava. */
.trilha + .pp-capa { padding-top: clamp(24px, 5vw, 72px); }
.pp-estacao { display: flex; align-items: center; gap: 14px; }
.pp-fio { width: 56px; height: 1px; background: var(--ceu); }
.pp-capa h1 { font-size: clamp(2.5rem, 1.3rem + 4.6vw, 6rem); max-width: 16ch; }
.pp-capa h1 em { display: block; margin-top: 0.18em; font-size: 0.5em; line-height: 1.2; }
.pp-sintese { max-width: 60ch; margin-top: 8px; font-size: clamp(1.125rem, 1.02rem + 0.5vw, 1.4375rem); line-height: 1.62; color: var(--texto); }
.pp-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.pp-acoes .botao { margin-top: 0; }
/* Acao secundaria (baixar a apresentacao): vazada, para nao competir com o contato. */
.botao-vazado { background: transparent; border: 1px solid rgba(143, 211, 245, 0.45); color: var(--texto); }
.botao-vazado:hover { border-color: var(--ceu-claro); }

.pp-grade { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(40px, 6vw, 112px); padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(48px, 7vw, 96px); }
.pp-lateral { position: sticky; top: 24px; align-self: start; }
.pp-indice, .pp-outros { list-style: none; margin: 0 0 36px; padding: 0; border-top: 1px solid var(--linha); }
.pp-indice li, .pp-outros li { margin: 0; }
.pp-indice a, .pp-outros a { display: flex; gap: 12px; align-items: baseline; min-height: 44px; padding: 10px 0; border-bottom: 1px solid var(--linha); color: var(--texto-corpo); text-decoration: none; }
.pp-indice a:hover, .pp-outros a:hover { color: var(--ceu-claro); }
.pp-outros a[aria-current="page"] { color: var(--ceu-claro); }
.outro-sigla { min-width: 4.4em; font-weight: 700; font-stretch: 118%; color: var(--texto); }

.pp-corpo { display: grid; gap: clamp(56px, 6vw, 88px); }
.pp-bloco { scroll-margin-top: 24px; }
.pp-bloco h2 { margin-top: 0; font-size: clamp(1.75rem, 1.3rem + 1.5vw, 3rem); font-weight: 800; font-stretch: 112%; line-height: 1.1; }
.pp-fim h2 em { font-style: normal; color: var(--ceu-claro); }
/* Sumario de um item so nao orienta nada: some, com o rotulo. */
.pp-lateral:has(.pp-indice > li:only-child) > .rotulo:first-child,
.pp-indice:has(> li:only-child) { display: none; }
/* Fontes oficiais: endereco permanente da norma ou da decisao. */
.pp-fontes-titulo { margin: 32px 0 10px; font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-suave); }
.pp-fontes { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pp-fontes a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ceu-claro); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.pp-fontes a:hover { color: var(--texto); }
.pp-bloco > p { max-width: 68ch; font-size: 1.125rem; }

.pp-citacao { margin: 32px 0 0; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--linha); background: rgba(10, 28, 61, 0.6); }
.pp-citacao blockquote { margin: 0; }
.pp-citacao p { max-width: 46ch; margin: 0; font-family: var(--serifa); font-style: italic; font-size: clamp(1.25rem, 1rem + 1vw, 1.9rem); line-height: 1.4; color: var(--texto); }
.pp-citacao figcaption { margin-top: 18px; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ceu-claro); }

.pp-etapas { position: relative; list-style: none; margin: 0; padding: 0 0 0 28px; }
.pp-etapas li { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; margin: 0; padding: 22px 0; border-top: 1px solid var(--linha); }
.pp-numero { font-size: 0.9375rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; line-height: 1.6; color: var(--ceu); }
.pp-etapas h3, .pp-sub h3 { margin: 0 0 6px; color: var(--texto); font-size: 1.125rem; font-weight: 700; font-stretch: 108%; }
.pp-etapas p { max-width: 68ch; margin: 0; }

.pp-subprojetos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pp-sub { padding: 24px; border: 1px solid var(--linha); background: rgba(10, 28, 61, 0.6); }
.pp-sub .rotulo { margin-bottom: 10px; }
.pp-sub dl { margin: 14px 0 0; }
.pp-sub dt { margin-top: 12px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-suave); }
.pp-sub dd { margin: 4px 0 0; }

.pp-fim { border-top: 1px solid var(--linha); padding: clamp(56px, 8vw, 112px) 0; }
.pp-fim h2 { max-width: 20ch; margin: 0; font-size: clamp(2rem, 1.35rem + 2.3vw, 4rem); font-weight: 800; font-stretch: 112%; line-height: 1.08; color: var(--texto); }
.pp-vizinhos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(48px, 6vw, 80px); }
.pp-vizinhos a { display: grid; gap: 6px; padding: 20px 0; border-top: 1px solid var(--linha); color: var(--texto); font-size: 1.25rem; font-weight: 700; font-stretch: 112%; text-decoration: none; }
.pp-vizinhos .rotulo { margin: 0; }
.pp-vizinhos a:last-child { text-align: right; }
.pp-vizinhos a:hover { color: var(--ceu-claro); }


@media (max-width: 860px) {
  .pp-grade { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pp-lateral { position: static; }
  .pp-outros-rotulo, .pp-outros { display: none; }
}

/* Em coluna estreita, palavra longa ("previdenciarios") deixa buraco no fim
   da linha; a hifenizacao do portugues fecha o texto. */
@media (max-width: 640px) {
  p, li, dd { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 8 4 3; }
  .pp-subprojetos, .pp-vizinhos { grid-template-columns: minmax(0, 1fr); }
  .pp-vizinhos a:last-child { text-align: left; }
  .topo-nav .voltar { display: none; }
}

@media print {
  html, body { background: #ffffff !important; color: #111111 !important; }
  .topo-nav, .faixa, .trilha, .pp-acoes, .pp-lateral, .pp-vizinhos, .zap, .pular, .formulario { display: none !important; }
  .pp-capa::before { display: none; }
  .pp-grade { display: block; }
  h1, h2, h3, p, li, dt, dd, blockquote, figcaption, .rotulo, em { color: #111111 !important; }
  .pp-citacao, .pp-sub { background: none !important; border-color: #999999 !important; }
  .lg-nome, .lg-tagline { fill: #0d3982 !important; stroke: #0d3982 !important; }
  .pp-etapas li, .pp-sub, .pp-citacao { break-inside: avoid; }
  a { color: #111111 !important; }
}

/* Em celular estreito o logo e o botao de contato precisam caber na mesma
   linha do cabecalho. */
@media (max-width: 420px) {
  .topo-linha { gap: 12px; }
  /* O nome da marca cede espaco ao botao; largura fixa dependia da medida
     exata da fonte e estourava 2 px em outro Chromium. */
  .topo-linha .marca { gap: 8px; min-width: 0; flex-shrink: 1; }
  .marca .marca-icone { width: 34px; flex-shrink: 0; }
  .marca .marca-nome { width: 150px; min-width: 0; flex-shrink: 1; }
  .topo-nav { flex-shrink: 0; }
  .botao-pequeno { padding: 10px 12px; font-size: 0.875rem; }
}

/* ---------------------------------------------------------------- animacoes */

/* Transicao entre paginas: o navegador interpola de um documento ao outro. */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: 0.42s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.32s; }

/* Pagina de projeto: cabecalho fixo no topo, para a barra de leitura e o
   atalho de contato acompanharem a leitura. */
.pagina-projeto .topo { position: sticky; top: 0; z-index: 30; background: var(--noite); }
.pagina-projeto .pp-lateral { top: 100px; }
.pagina-projeto .pp-bloco { scroll-margin-top: 100px; }
.topo-leitura { display: none; }

/* Espinha das etapas: sempre desenhada; a animacao so acende. */
/* --eixo e o centro da linha; o ponto fica preso ao numero, centrado nele. */
/* Cada etapa vira camada propria quando a entrada anima; ela sobe acima da
   espinha, para a linha passar por tras dos nos e nao por cima deles. */
.pp-etapas { --eixo: 7px; isolation: isolate; }
.pp-etapas li { z-index: 1; }
.pp-etapas::before { content: ""; position: absolute; left: calc(var(--eixo) - 0.5px); top: 30px; bottom: 30px; z-index: 0; width: 1px; background: rgba(143, 211, 245, 0.32); }
.pp-numero { position: relative; align-self: start; }
.pp-numero::after { content: ""; position: absolute; left: calc(var(--eixo) - 28px); top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--ceu); box-shadow: 0 0 14px rgba(57, 169, 227, 0.7); }

/* Tudo o que se move nestas paginas depende do proprio navegador ligar a
   animacao a rolagem. Sem suporte, ou com movimento reduzido, a pagina fica
   inteira e parada: nada nasce invisivel. */
@media (prefers-reduced-motion: no-preference) {
  .pp-capa .envelope > * { animation: pp-chegar 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .pp-capa .envelope > :nth-child(2) { animation-delay: 0.08s; }
  .pp-capa .envelope > :nth-child(3) { animation-delay: 0.16s; }
  .pp-capa .envelope > :nth-child(4) { animation-delay: 0.24s; }

  @supports (animation-timeline: scroll()) {
    .pagina-projeto .topo-leitura {
      display: block;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 2px;
      background: var(--ceu);
      transform-origin: 0 50%;
      animation: pp-ler linear both;
      animation-timeline: scroll(root);
    }
  }

  @supports (animation-timeline: view()) {
    .pp-bloco > h2,
    .pp-bloco > p,
    .pp-citacao,
    .pp-etapas li,
    .pp-sub,
    .pp-fim h2,
    .pp-vizinhos {
      animation: pp-chegar linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    /* A espinha acende de cima para baixo enquanto a lista passa pela tela. */
    .pp-etapas::after {
      content: "";
      position: absolute;
      left: calc(var(--eixo) - 1px);
      top: 30px;
      bottom: 30px;
      z-index: 0;
      width: 2px;
      background: var(--ceu);
      transform-origin: 50% 0;
      animation: pp-descer linear both;
      animation-timeline: view();
      animation-range: entry 40% cover 75%;
    }
    .pp-numero::after {
      animation: pp-no linear both;
      animation-timeline: view();
      animation-range: entry 60% cover 45%;
    }
    .pp-numero {
      animation: pp-acender linear both;
      animation-timeline: view();
      animation-range: entry 60% cover 45%;
    }
  }
}

@keyframes pp-chegar { from { opacity: 0; transform: translate3d(0, 28px, 0); } }
@keyframes pp-ler { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pp-descer { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* O no nunca fica transparente (a espinha apareceria por dentro): apagado
   e escuro com contorno, aceso e azul cheio. */
@keyframes pp-no { from { background-color: var(--noite); box-shadow: inset 0 0 0 1.5px var(--ceu); transform: scale(0.8); } to { background-color: var(--ceu); box-shadow: 0 0 14px rgba(57, 169, 227, 0.7); transform: none; } }
/* O numero acende pela cor, nao pela transparencia: o no mora dentro dele. */
@keyframes pp-acender { from { color: rgba(57, 169, 227, 0.45); } to { color: var(--ceu); } }

/* 404: o mesmo Brasil de pontos da pagina principal, apagado a direita e
   por tras do texto, que fica sobre a parte escura. */
.erro::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -4%;
  z-index: -1;
  width: min(62vh, 560px);
  aspect-ratio: 1400 / 1368;
  background: url("/assets/mapa-municipios-celular.db13062ec0.webp") center / 100% 100% no-repeat;
  opacity: 0.5;
  transform: translateY(-50%);
  pointer-events: none;
}
@media (max-width: 640px) {
  .erro::before { right: -30%; width: 110vw; opacity: 0.16; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}