/* =====================================================================
   FDM SERVIÇOS EMPRESARIAIS — Folha de estilo principal
   ---------------------------------------------------------------------
   Sistema visual derivado do Manual de Marca v1.0 (2026).
   Para trocar a identidade visual, altere apenas os tokens em :root.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. TIPOGRAFIA DA MARCA — fontes hospedadas no próprio domínio
   Space Grotesk e IBM Plex Mono, ambas sob SIL Open Font License 1.1.
   Licenças em /assets/fontes/. Hospedar localmente evita a transferência
   do IP dos visitantes para servidores de terceiros (relevante para LGPD)
   e elimina uma conexão externa no carregamento.
   --------------------------------------------------------------------- */
@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fontes/SpaceGrotesk-variable.woff2") format("woff2-variations"),
       url("/assets/fontes/SpaceGrotesk-variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fontes/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fontes/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------
   1. TOKENS DA MARCA
   --------------------------------------------------------------------- */
:root {
  /* Cores institucionais — Manual de Marca, seção 05 */
  --azul: #0F1E2E;            /* Azul institucional — PANTONE 5395 C */
  --latao: #C69A63;           /* Latão — apenas detalhes e elementos gráficos */
  --papel: #F7F6F3;           /* Fundo padrão */
  --branco: #FFFFFF;
  --texto: #12181E;

  --azul-60: #2C516B;
  --azul-40: #6B8BA2;
  --azul-15: #C6D3DD;

  /* Neutros derivados */
  --linha: #E4E2DD;           /* bordas sobre papel */
  --linha-forte: #D2CFC8;
  --texto-suave: #4A5561;
  --texto-claro: #6E7883;

  /* Sobre fundo azul */
  --sobre-azul-suave: rgba(247, 246, 243, 0.72);
  --sobre-azul-linha: rgba(247, 246, 243, 0.16);

  /* Tipografia — Manual de Marca, seção 06 */
  --fonte-titulo: "Space Grotesk", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* Escala de espaçamento */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 64px;
  --e-9: 96px;
  --e-10: 128px;

  --raio: 2px;
  --raio-card: 3px;
  --container: 1160px;
  --gutter: 24px;
  --header-h: 76px;

  --transicao: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --sombra-card: 0 1px 2px rgba(15, 30, 46, 0.04);
  --sombra-card-hover: 0 10px 30px -12px rgba(15, 30, 46, 0.18);
}

/* ---------------------------------------------------------------------
   2. RESET E BASE
   --------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  color: var(--azul);
  margin: 0 0 var(--e-4);
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.35rem + 3.2vw, 3.6rem); line-height: 1.1; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.4rem); line-height: 1.18; letter-spacing: -0.02em; }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); line-height: 1.3; letter-spacing: -0.015em; }
h4 { font-size: 1.02rem; line-height: 1.4; letter-spacing: -0.01em; }

p { margin: 0 0 var(--e-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--azul);
  text-decoration-color: var(--azul-15);
  text-underline-offset: 3px;
  transition: color var(--transicao), text-decoration-color var(--transicao);
}
a:hover { color: var(--azul-60); text-decoration-color: var(--latao); }

ul, ol { margin: 0 0 var(--e-4); padding-left: 1.15em; }
li { margin-bottom: var(--e-2); }
li:last-child { margin-bottom: 0; }

hr { border: 0; border-top: 1px solid var(--linha); margin: var(--e-7) 0; }

strong { font-weight: 600; }

code {
  font-family: var(--fonte-mono);
  font-size: 0.86em;
  background: rgba(15, 30, 46, 0.06);
  border-radius: 2px;
  padding: 1px 5px;
}

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

/* Foco visível — acessibilidade */
:focus-visible {
  outline: 2px solid var(--azul-60);
  outline-offset: 3px;
  border-radius: 1px;
}
.secao--escura :focus-visible,
.rodape :focus-visible { outline-color: var(--latao); }

/* Link "pular para o conteúdo" */
.skip-link {
  position: absolute;
  left: var(--e-5);
  top: -100px;
  z-index: 200;
  background: var(--azul);
  color: var(--papel);
  padding: var(--e-3) var(--e-5);
  font-size: 0.9rem;
  text-decoration: none;
  transition: top 150ms ease;
}
.skip-link:focus { top: var(--e-3); color: var(--papel); }

/* ---------------------------------------------------------------------
   3. LAYOUT
   --------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--estreito { max-width: 780px; }
.container--medio { max-width: 940px; }

.secao { padding-block: clamp(52px, 6.2vw, 84px); }

/* A última seção escura e o rodapé têm o mesmo azul: a soma dos dois respiros
   vira um vazio único de ~150px. Reduz o fecho da seção e marca a transição
   com um filete, mantendo respiro sem área morta. */
main > .secao--escura:last-child { padding-bottom: clamp(40px, 4vw, 56px); }
.secao--compacta { padding-block: clamp(36px, 4.4vw, 56px); }
.secao--branca { background: var(--branco); }
.secao--escura { background: var(--azul); color: var(--sobre-azul-suave); }
.secao--escura h2,
.secao--escura h3,
.secao--escura h4 { color: var(--papel); }
.secao--escura a { color: var(--papel); text-decoration-color: rgba(198, 154, 99, 0.6); }
.secao--escura a:hover { color: var(--latao); }
/* Botões mantêm a própria cor de texto dentro de seções escuras.
   Ordem importa: a regra do botão claro precisa vir depois da genérica. */
.secao--escura a.btn,
.secao--escura a.btn:hover,
.secao--escura a.btn--contorno-claro,
.secao--escura a.btn--contorno-claro:hover { color: var(--papel); }
.secao--escura a.btn--claro,
.secao--escura a.btn--claro:hover,
.rodape a.btn--claro { color: var(--azul); }
.secao + .secao--branca,
.secao--branca + .secao { border-top: 1px solid var(--linha); }

.grid { display: grid; gap: var(--e-5); }
@media (min-width: 700px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.split { display: grid; gap: var(--e-6); }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
  .split--igual { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------
   4. ELEMENTOS TIPOGRÁFICOS DA MARCA
   --------------------------------------------------------------------- */

/* Rótulo — IBM Plex Mono, caixa alta, +16% entreletra */
.rotulo {
  display: block;
  font-family: var(--fonte-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--azul-60);
  margin-bottom: var(--e-4);
}
.secao--escura .rotulo,
.rodape .rotulo { color: var(--latao); }

.rotulo--numerado::before {
  content: attr(data-num) " — ";
  color: var(--latao);
}

.olho {
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.18rem);
  color: var(--texto-suave);
  max-width: 62ch;
}
.secao--escura .olho { color: var(--sobre-azul-suave); }

.texto-mono {
  font-family: var(--fonte-mono);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.cabecalho-secao { max-width: 66ch; margin-bottom: clamp(30px, 3.4vw, 48px); }

/* Filete latão — elemento gráfico da marca */
.filete {
  width: 56px;
  height: 3px;
  background: var(--latao);
  border: 0;
  margin: 0 0 var(--e-5);
  transform: skewX(-16deg);
}

/* Placeholder de conteúdo a preencher */
.preencher {
  font-family: var(--fonte-mono);
  font-size: 0.82em;
  letter-spacing: 0.04em;
  background: rgba(198, 154, 99, 0.16);
  border-bottom: 1px dashed var(--latao);
  padding: 1px 5px;
  overflow-wrap: anywhere;
  color: var(--texto);
}
.secao--escura .preencher,
.rodape .preencher { color: var(--papel); background: rgba(198, 154, 99, 0.22); }

/* ---------------------------------------------------------------------
   5. BOTÕES
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  font-family: var(--fonte-titulo);
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  padding: 15px 26px;
  border: 1px solid var(--azul);
  border-radius: var(--raio);
  background: var(--azul);
  color: var(--papel);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao),
              border-color var(--transicao), transform var(--transicao);
}
.btn:hover { background: #16293c; border-color: #16293c; color: var(--papel); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--contorno { background: transparent; color: var(--azul); border-color: var(--linha-forte); }
.btn--contorno:hover { background: transparent; color: var(--azul); border-color: var(--azul); }

.btn--claro { background: var(--papel); border-color: var(--papel); color: var(--azul); }
.btn--claro:hover { background: var(--branco); border-color: var(--branco); color: var(--azul); }

.btn--contorno-claro { background: transparent; color: var(--papel); border-color: var(--sobre-azul-linha); }
.btn--contorno-claro:hover { background: transparent; color: var(--papel); border-color: var(--latao); }

.btn--bloco { width: 100%; }
.btn--pequeno { padding: 10px 16px; font-size: 0.85rem; }

.botoes { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* Link com seta */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--azul);
}
.link-seta::after {
  content: "";
  width: 16px;
  height: 1px;
  background: var(--latao);
  transition: width var(--transicao);
}
.link-seta:hover::after { width: 26px; }

/* ---------------------------------------------------------------------
   6. CABEÇALHO
   --------------------------------------------------------------------- */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 246, 243, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--linha);
}
.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  min-height: var(--header-h);
}

/* Assinatura FDM Serviços Empresariais — nome em Space Grotesk 600 com
   descritivo em IBM Plex Mono, seguindo o padrão de assinatura do manual. */
.marca { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
.marca__simbolo { width: 30px; height: auto; flex-shrink: 0; }
.marca__texto { display: flex; flex-direction: column; }
.marca__nome {
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--azul);
  white-space: nowrap;
}
.marca__descritivo {
  font-family: var(--fonte-mono);
  font-size: 0.58rem;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-claro);
  margin-top: 3px;
  white-space: nowrap;
}
.rodape .marca__nome { color: var(--papel); }
.rodape .marca__descritivo { color: rgba(247, 246, 243, 0.6); }
@media (max-width: 420px) {
  .marca__nome { font-size: 1.05rem; }
  .marca__descritivo { font-size: 0.54rem; letter-spacing: 0.13em; }
}

.nav { display: flex; align-items: center; gap: var(--e-5); }
.nav__lista { display: flex; align-items: center; gap: var(--e-5); list-style: none; margin: 0; padding: 0; }
.nav__lista li { margin: 0; }
.nav__link {
  font-size: 0.93rem;
  font-weight: 400;
  color: var(--texto-suave);
  text-decoration: none;
  padding: 6px 0;
  position: relative;
  white-space: nowrap;
}
.nav__link:hover { color: var(--azul); }
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--latao);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicao);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--azul); font-weight: 500; }

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

.menu-botao {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  cursor: pointer;
}
.menu-botao__barras { display: block; width: 18px; height: 12px; position: relative; }
.menu-botao__barras span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--azul);
  transition: transform var(--transicao), opacity var(--transicao);
}
.menu-botao__barras span:nth-child(1) { top: 0; }
.menu-botao__barras span:nth-child(2) { top: 5px; }
.menu-botao__barras span:nth-child(3) { top: 10px; }
.menu-botao[aria-expanded="true"] .menu-botao__barras span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-botao[aria-expanded="true"] .menu-botao__barras span:nth-child(2) { opacity: 0; }
.menu-botao[aria-expanded="true"] .menu-botao__barras span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1000px) {
  .menu-botao { display: inline-flex; }
  .cabecalho__acoes .btn { display: none; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    display: block;
    background: var(--papel);
    border-bottom: 1px solid var(--linha);
    padding: var(--e-5) var(--gutter) var(--e-7);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
  }
  .nav[data-aberto="true"] { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav__lista { display: block; }
  .nav__lista li { border-bottom: 1px solid var(--linha); }
  .nav__link { display: block; padding: 14px 0; font-size: 1.02rem; }
  .nav__link::after { display: none; }
  .nav__link[aria-current="page"] { color: var(--azul); }
  .nav__cta { margin-top: var(--e-5); }
  .nav__cta .btn { width: 100%; }
}
@media (min-width: 1001px) {
  .nav__cta { display: none; }
}

/* ---------------------------------------------------------------------
   7. HERO
   --------------------------------------------------------------------- */
.hero {
  background: var(--azul);
  color: var(--sobre-azul-suave);
  position: relative;
  overflow: hidden;
  padding-block: clamp(60px, 8vw, 112px);
}
.hero::after {
  content: "";
  position: absolute;
  right: 4%;
  top: 46%;
  width: 38%;
  max-width: 480px;
  aspect-ratio: 58.3 / 40;
  transform: translateY(-50%);
  background: url("/assets/logo/simbolo-claro.svg") no-repeat center / contain;
  opacity: 0.085;
  pointer-events: none;
}
@media (max-width: 900px) { .hero::after { display: none; } }

.hero__conteudo { position: relative; z-index: 1; max-width: 44ch; }
.hero h1 { color: var(--papel); }
.hero__texto {
  font-size: clamp(1.02rem, 0.96rem + 0.4vw, 1.2rem);
  color: var(--sobre-azul-suave);
  max-width: 56ch;
  margin-bottom: var(--e-6);
}
.hero .botoes { margin-top: var(--e-6); }

.hero--interno { padding-block: clamp(48px, 6vw, 84px); }
.hero--interno h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); }
.hero--interno .hero__conteudo { max-width: 46ch; }

/* Trilha de navegação */
.trilha { font-family: var(--fonte-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--e-5); }
.trilha ol { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; margin: 0; padding: 0; }
.trilha li { margin: 0; color: rgba(247, 246, 243, 0.55); }
.trilha li + li::before { content: "/"; margin-right: var(--e-2); color: rgba(198, 154, 99, 0.75); }
.trilha a { color: rgba(247, 246, 243, 0.75); text-decoration: none; }
.trilha a:hover { color: var(--latao); }

/* Trilha sobre fundo claro */
.trilha--clara li { color: var(--texto-claro); }
.trilha--clara li + li::before { color: var(--latao); }
.trilha--clara a { color: var(--texto-suave); }
.trilha--clara a:hover { color: var(--azul); }

/* Métricas do hero */
.hero__indicadores {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-6);
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: var(--e-5);
  border-top: 1px solid var(--sobre-azul-linha);
}
.hero__indicador { min-width: 150px; }
.hero__indicador dt {
  font-family: var(--fonte-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--latao);
  margin-bottom: var(--e-2);
}
.hero__indicador dd { margin: 0; color: var(--papel); font-size: 0.98rem; font-weight: 500; }

/* ---------------------------------------------------------------------
   8. CARDS
   --------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-card);
  padding: clamp(24px, 3vw, 32px);
  box-shadow: var(--sombra-card);
  transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.card__num {
  font-family: var(--fonte-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--latao);
  margin-bottom: var(--e-4);
}
.card h3 { margin-bottom: var(--e-3); }
.card p { color: var(--texto-suave); font-size: 0.97rem; }
.card .link-seta { margin-top: auto; padding-top: var(--e-5); }

.card--interativo { text-decoration: none; color: inherit; }
.card--interativo:hover {
  border-color: var(--azul-15);
  box-shadow: var(--sombra-card-hover);
  transform: translateY(-2px);
  color: inherit;
}
.card--interativo:hover h3 { color: var(--azul-60); }

.card--plano { background: transparent; border: 0; box-shadow: none; padding: 0; }
.card--plano-linha {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-top: 1px solid var(--linha);
  border-radius: 0;
  padding: var(--e-5) 0 0;
}

.secao--escura .card {
  background: rgba(247, 246, 243, 0.04);
  border-color: var(--sobre-azul-linha);
  box-shadow: none;
}
.secao--escura .card p { color: var(--sobre-azul-suave); }
.secao--escura .card--interativo:hover { border-color: rgba(198, 154, 99, 0.5); transform: translateY(-2px); }
.secao--escura .link-seta { color: var(--papel); }

/* Lista de atributos dentro dos cards */
.lista-marcada { list-style: none; padding: 0; margin: var(--e-4) 0 0; }
.lista-marcada li {
  position: relative;
  padding-left: 20px;
  font-size: 0.95rem;
  color: var(--texto-suave);
  margin-bottom: var(--e-3);
}
.lista-marcada li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 10px;
  height: 2px;
  background: var(--latao);
  transform: skewX(-16deg);
}
.secao--escura .lista-marcada li { color: var(--sobre-azul-suave); }

/* Etiqueta de status */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fonte-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 9px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  color: var(--texto-suave);
  background: var(--papel);
}
.etiqueta::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--azul-40); }
.etiqueta--ativo::before { background: #3F7A5B; }
.etiqueta--desenvolvimento::before { background: var(--latao); }
.etiqueta--estudo::before { background: var(--azul-40); }

/* ---------------------------------------------------------------------
   9. BLOCOS DE CONTEÚDO
   --------------------------------------------------------------------- */
.pilares { display: grid; gap: 0; border-top: 1px solid var(--linha); }
@media (min-width: 800px) { .pilares { grid-template-columns: repeat(3, 1fr); } }
.pilar { padding: var(--e-6) 0; border-bottom: 1px solid var(--linha); }
@media (min-width: 800px) {
  .pilar { padding: var(--e-6) var(--e-6) var(--e-6) 0; border-bottom: 0; border-right: 1px solid var(--linha); }
  .pilar:last-child { border-right: 0; }
  .pilar + .pilar { padding-left: var(--e-6); }
}
.pilar h3 { margin-bottom: var(--e-2); }
.pilar p { color: var(--texto-suave); font-size: 0.96rem; margin: 0; }

/* Declarações curtas — usadas no bloco de posicionamento da Home */
.declaracoes { margin: var(--e-6) 0 0; padding: 0; list-style: none; }
.declaracoes li {
  position: relative;
  padding: var(--e-3) 0 var(--e-3) 26px;
  margin: 0;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--azul);
  border-top: 1px solid var(--linha);
}
.declaracoes li:last-child { border-bottom: 1px solid var(--linha); }
.declaracoes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.35em;
  width: 14px;
  height: 2px;
  background: var(--latao);
  transform: skewX(-16deg);
}

/* Bloco de destaque / chamada final */
.chamada { text-align: left; }
.chamada h2 { max-width: 26ch; }

/* Aviso técnico (protótipo, backend pendente) */
.aviso {
  border: 1px solid var(--linha-forte);
  border-left: 3px solid var(--latao);
  border-radius: var(--raio);
  background: var(--branco);
  padding: var(--e-5);
  font-size: 0.93rem;
  color: var(--texto-suave);
}
.aviso__titulo {
  display: block;
  font-family: var(--fonte-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azul);
  margin-bottom: var(--e-2);
}
.secao--escura .aviso {
  background: rgba(247, 246, 243, 0.05);
  border-color: var(--sobre-azul-linha);
  border-left-color: var(--latao);
  color: var(--sobre-azul-suave);
}
.secao--escura .aviso__titulo { color: var(--latao); }

/* Conteúdo textual longo (páginas legais) */
.prosa h2 { margin-top: var(--e-8); }
.prosa h2:first-child { margin-top: 0; }
.prosa h3 { margin-top: var(--e-6); }
.prosa ul { margin-bottom: var(--e-5); }
.prosa li { color: var(--texto-suave); }
.prosa p { color: var(--texto-suave); }

.indice {
  border: 1px solid var(--linha);
  background: var(--branco);
  border-radius: var(--raio-card);
  padding: var(--e-5);
  margin-bottom: var(--e-7);
}
.indice ol { margin: 0; padding-left: 1.2em; }
.indice li { font-size: 0.94rem; }

/* ---------------------------------------------------------------------
   10. FORMULÁRIOS
   --------------------------------------------------------------------- */
.formulario { display: grid; gap: var(--e-5); }
.campos { display: grid; gap: var(--e-5); }
@media (min-width: 640px) { .campos--2 { grid-template-columns: repeat(2, 1fr); } }

.campo { display: flex; flex-direction: column; gap: 7px; }
.campo label {
  font-family: var(--fonte-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azul-60);
}
.campo .opcional { color: var(--texto-claro); letter-spacing: 0.1em; }

.campo input,
.campo select,
.campo textarea {
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  color: var(--texto);
  background: var(--branco);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 13px 14px;
  width: 100%;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo textarea { min-height: 150px; resize: vertical; }
.campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--azul-60) 50%), linear-gradient(135deg, var(--azul-60) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--azul-60);
  box-shadow: 0 0 0 3px rgba(44, 81, 107, 0.14);
}
.campo input::placeholder,
.campo textarea::placeholder { color: var(--texto-claro); }

.campo--erro input,
.campo--erro select,
.campo--erro textarea { border-color: #A4453C; }
.campo__erro {
  font-family: var(--fonte-mono);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: #A4453C;
  min-height: 0;
}
.campo__erro:empty { display: none; }

.campo--aceite { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: var(--e-3); }
.campo--aceite .campo__erro { flex-basis: 100%; }
.campo--aceite input { width: 18px; height: 18px; margin-top: 4px; flex-shrink: 0; accent-color: var(--azul); }
.campo--aceite label {
  font-family: var(--fonte-titulo);
  font-size: 0.92rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--texto-suave);
  line-height: 1.55;
  flex: 1 1 240px;
  min-width: 0;
}

.formulario__estado {
  font-size: 0.93rem;
  padding: var(--e-4);
  border: 1px solid var(--linha-forte);
  border-left: 3px solid var(--latao);
  border-radius: var(--raio);
  background: var(--branco);
  color: var(--texto-suave);
}
.formulario__estado:empty { display: none; }

/* Área de autenticação */
.painel-acesso {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-card);
  padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--sombra-card);
  max-width: 460px;
  width: 100%;
}
.painel-acesso__topo { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-6); }
.painel-acesso__topo img { width: 32px; }
.acesso-extra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); font-size: 0.9rem; }
.acesso-extra .campo--aceite { flex-wrap: nowrap; }
.acesso-extra .campo--aceite label { font-size: 0.9rem; flex: 0 1 auto; }

.centralizar-painel { display: flex; justify-content: center; }

/* ---------------------------------------------------------------------
   11. PORTAL DE DOCUMENTOS (demonstração visual)
   --------------------------------------------------------------------- */
.portal-barra {
  display: grid;
  gap: var(--e-4);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-card);
  padding: var(--e-5);
  margin-bottom: var(--e-6);
}
@media (min-width: 860px) {
  .portal-barra { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); align-items: end; }
}

.tabela-envolucro {
  overflow-x: auto;
  border: 1px solid var(--linha);
  border-radius: var(--raio-card);
  background: var(--branco);
  -webkit-overflow-scrolling: touch;
}
.tabela { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 0.94rem; }
.tabela caption { text-align: left; padding: var(--e-5) var(--e-5) 0; color: var(--texto-claro); font-size: 0.85rem; }
.tabela th {
  font-family: var(--fonte-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azul-60);
  text-align: left;
  padding: var(--e-4) var(--e-5);
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}
.tabela td { padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--linha); color: var(--texto-suave); vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: var(--papel); }
.tabela__nome { color: var(--texto); font-weight: 500; }
.tabela__acoes { display: flex; gap: var(--e-2); justify-content: flex-end; }
.tabela__vazio { padding: var(--e-7) var(--e-5); text-align: center; color: var(--texto-claro); }

.categorias { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-5); }
.categoria {
  font-family: var(--fonte-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 13px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  background: var(--branco);
  color: var(--texto-suave);
  cursor: pointer;
  transition: all var(--transicao);
}
.categoria:hover { border-color: var(--azul-40); color: var(--azul); }
.categoria[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: var(--papel); }

/* ---------------------------------------------------------------------
   12. RODAPÉ
   --------------------------------------------------------------------- */
.rodape {
  background: var(--azul);
  color: var(--sobre-azul-suave);
  border-top: 1px solid var(--sobre-azul-linha);
  padding-block: clamp(40px, 4.5vw, 56px) var(--e-6);
  font-size: 0.93rem;
}
.rodape a { color: rgba(247, 246, 243, 0.8); text-decoration: none; }
.rodape a:hover { color: var(--latao); }
.rodape__topo { display: grid; gap: var(--e-7); }
@media (min-width: 860px) { .rodape__topo { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--e-6); } }
.rodape__marca p { color: var(--sobre-azul-suave); max-width: 34ch; margin-top: var(--e-4); font-size: 0.92rem; }
.rodape__titulo--espaco { margin-top: 28px; }
.rodape__titulo {
  font-family: var(--fonte-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--latao);
  margin-bottom: var(--e-4);
}
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: var(--e-3); }
.rodape__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4) var(--e-5);
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: var(--e-5);
  border-top: 1px solid var(--sobre-azul-linha);
  font-family: var(--fonte-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(247, 246, 243, 0.55);
}
.rodape__base ul { display: flex; flex-wrap: wrap; gap: var(--e-4); }
.rodape__base li { margin: 0; }

/* ---------------------------------------------------------------------
   13. ANIMAÇÕES DISCRETAS
   --------------------------------------------------------------------- */
.revelar {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.revelar.revelado { opacity: 1; transform: none; }

@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;
    scroll-behavior: auto !important;
  }
  .revelar { opacity: 1; transform: none; }
}

/* Sem JavaScript: nada fica escondido */
.no-js .revelar { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------
   13B. AJUSTE ESPECÍFICO DE CELULAR

   Não é responsividade automática: são valores escolhidos para a tela
   pequena. O objetivo é leitura confortável e menos fadiga de rolagem,
   preservando o espaço em branco que sustenta a identidade.
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  :root {
    --gutter: 22px;
    --header-h: 68px;
  }

  body { font-size: 16.5px; line-height: 1.6; }

  /* Títulos menores: no celular o tamanho do desktop vira parede de texto */
  h1 { font-size: 1.9rem; line-height: 1.15; letter-spacing: -0.025em; }
  h2 { font-size: 1.5rem; line-height: 1.22; }
  h3 { font-size: 1.08rem; }

  /* Ritmo vertical mais curto entre seções */
  .secao { padding-block: 46px; }
  .secao--compacta { padding-block: 34px; }
  main > .secao--escura:last-child { padding-bottom: 38px; }
  .hero { padding-block: 52px 44px; }
  .hero--interno { padding-block: 38px 34px; }
  .cabecalho-secao { margin-bottom: 28px; }
  .margem-topo { margin-top: var(--e-5); }
  .margem-topo-g { margin-top: var(--e-6); }
  hr { margin: var(--e-6) 0; }

  /* Hero */
  .hero__texto { font-size: 1rem; margin-bottom: var(--e-5); }
  .hero .botoes { margin-top: var(--e-5); }
  .hero__indicadores { gap: var(--e-5); margin-top: 34px; padding-top: var(--e-4); }
  .hero__indicador { min-width: 0; }
  .hero__indicador dd { font-size: 0.94rem; }

  /* Cards mais curtos e com menos espaço entre eles */
  .card { padding: 22px; }
  .card .link-seta { padding-top: var(--e-4); }
  .grid { gap: var(--e-4); }
  .split { gap: var(--e-5); }
  .pilar { padding: 22px 0; }
  .olho { font-size: 1rem; }

  /* Áreas clicáveis: mínimo confortável para o polegar */
  .btn { padding: 15px 22px; min-height: 48px; }
  .btn--pequeno { padding: 12px 16px; min-height: 44px; }
  .categoria { padding: 12px 14px; min-height: 44px; }
  .link-seta { padding-block: 4px; }
  .botoes { gap: var(--e-3); }
  .botoes .btn { flex: 1 1 auto; }

  /* Formulários */
  .campos { gap: var(--e-4); }
  .formulario { gap: var(--e-4); }
  .campo textarea { min-height: 120px; }

  /* Rodapé mais compacto */
  .rodape { padding-block: 40px var(--e-5); font-size: 0.9rem; }
  .rodape__topo { gap: var(--e-6); }
  .rodape__base { margin-top: var(--e-6); gap: var(--e-3) var(--e-4); }
  .rodape li { margin-bottom: var(--e-2); }

  /* A tabela do portal é mais larga que a tela e rola dentro do próprio
     contêiner. A dica abaixo torna esse gesto visível, sem alterar o HTML. */
  .tabela-envolucro { position: relative; }
  .tabela-envolucro::before {
    content: "Deslize para o lado para ver todas as colunas";
    display: block;
    position: sticky;
    left: 0;
    font-family: var(--fonte-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--texto-claro);
    padding: var(--e-3) var(--e-4) 0;
  }

  /* Linhas mais curtas na tabela do portal */
  .tabela { font-size: 0.88rem; }
  .tabela th { padding: var(--e-3) var(--e-4); }
  .tabela td { padding: var(--e-3) var(--e-4); }
  .tabela caption { padding: var(--e-3) var(--e-4) 0; font-size: 0.8rem; }

  /* Prosa das páginas legais */
  .prosa h2 { margin-top: var(--e-7); }
  .prosa h3 { margin-top: var(--e-5); }
  .indice { padding: var(--e-4); }
}

@media (max-width: 380px) {
  :root { --gutter: 18px; }
  h1 { font-size: 1.78rem; }
}

/* ---------------------------------------------------------------------
   14. UTILITÁRIOS
   --------------------------------------------------------------------- */
.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.sem-margem { margin: 0; }
.texto-tenue { color: var(--texto-claro); }
.margem-topo { margin-top: var(--e-6); }
.margem-topo-g { margin-top: var(--e-7); }
.texto-centro { text-align: center; }

@media print {
  .cabecalho, .rodape, .botoes, .menu-botao { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .secao { padding-block: 12pt; }
}