/* ==========================================================================
   Corpus Soluções em Informática — site institucional
   Conceito: "A rede converge, o núcleo governa". Zero dependência externa, zero build.
   ========================================================================== */

/* ---------- Fontes (locais, self-hosted; WOFF primeiro -- ~53% mais leve que o TTF,
   TTF preservado como fallback para o navegador raro sem suporte a WOFF) ---------- */
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/PlayfairDisplay-Variable.woff') format('woff'),
       url('../fonts/PlayfairDisplay-Variable.ttf') format('truetype-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.woff') format('woff'),
       url('../fonts/Inter-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Medium.woff') format('woff'),
       url('../fonts/Inter-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-SemiBold.woff') format('woff'),
       url('../fonts/Inter-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Bold.woff') format('woff'),
       url('../fonts/Inter-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-Regular.woff') format('woff'),
       url('../fonts/IBMPlexMono-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-Bold.woff') format('woff'),
       url('../fonts/IBMPlexMono-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Tokens (fonte única: manual de marca vigente da Corpus) ---------- */
:root {
  /* cor — lei do manual, nunca inventar hex novo */
  --c-petroleo: #0F3D34;
  --c-petroleo-800: #0B2E27;
  --c-petroleo-900: #071F1A;
  --c-branco: #FFFFFF;
  --c-papel: #FAF8F4;
  --c-chumbo: #3A3A38;
  --c-ambar: #B98B4E;
  --c-ambar-soft: rgba(185, 139, 78, .16);

  /* tipografia */
  --f-display: 'Playfair Display', Georgia, serif;
  --f-corpo: 'Inter', -apple-system, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --fs-kicker: .8125rem;
  --fs-body: clamp(1rem, .95rem + .2vw, 1.0625rem);
  --fs-lede: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --fs-h1: clamp(2.25rem, 1.7rem + 2.6vw, 4.25rem);
  --fs-h2: clamp(1.75rem, 1.5rem + 1.3vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.15rem + .5vw, 1.5rem);

  --tracking-kicker: .16em;

  /* espaçamento / grade */
  --wrap: 1180px;
  --pad: clamp(20px, 4vw, 56px);
  --gap: clamp(20px, 3vw, 40px);
  --section-py: clamp(64px, 9vw, 132px);
  --radius: 14px;
  --radius-sm: 8px;

  /* movimento — sóbrio, a serviço da hierarquia, nunca firula.
     Régua de durações por categoria de gesto: interação (hover/press) fica curta e
     imediata, transição de elemento entrando/saindo fica na faixa intermediária, e só a
     revelação de conteúdo grande no scroll usa tempo longo. Curvas dedicadas para painel
     assentando na tela (bold) e para hover/fade pontual (practical). */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-out-bold: cubic-bezier(0, .4, 0, 1);        /* painel/virada assentando na tela */
  --ease-out-practical: cubic-bezier(.4, 1, .6, 1);   /* hover, fade pontual, popup */
  --dur-interaction: 130ms;   /* hover / press */
  --dur-fast: 180ms;
  --dur-transition: 260ms;    /* elemento entrando/saindo (header condensa, menu mobile) */
  --dur-base: 420ms;
  --dur-slow: 720ms;
  --dur-cinematic: 900ms;     /* assentamento único da virada tonal */
  --stagger-step: 70ms;       /* coreografia escalonada em grupos (cards, linha do tempo) */
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
}

html, body { max-width: 100%; overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--f-corpo);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-chumbo);
  background: var(--c-branco);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
/* overflow-wrap+word-break: rede de segurança contra estouro horizontal em telas
   estreitas -- medido em QA mobile (390px): a palavra "sob" do H1 da home ultrapassava
   a borda em vez de quebrar linha (fonte display larga + clamp no limite). Preferível a
   reduzir o clamp do H1, porque preserva a escala tipográfica em todas as larguras. */
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 700; line-height: 1.12; overflow-wrap: break-word; word-break: break-word; }
p { margin: 0 0 1em; overflow-wrap: break-word; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
input, textarea { font: inherit; }

:focus-visible {
  outline: 2px solid var(--c-ambar);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Anel de foco casado com a forma do elemento -- pílula recebe anel redondo, nunca o
   retângulo genérico por cima de um contorno arredondado (desalinho óptico). */
.btn:focus-visible,
.menu__cta:focus-visible {
  outline-offset: 4px;
  border-radius: 999px;
}

/* Seleção de texto e barra de rolagem na paleta -- craft que a UI padrão do navegador
   deixaria em cinza genérico. */
::selection { background: var(--c-ambar); color: var(--c-petroleo-900); }
html { scrollbar-color: var(--c-ambar) var(--c-papel); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--c-papel); }
::-webkit-scrollbar-thumb { background: var(--c-petroleo); border-radius: 999px; border: 2px solid var(--c-papel); }
::-webkit-scrollbar-thumb:hover { background: var(--c-ambar); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.mono { font-family: var(--f-mono); }
.h-display { font-size: var(--fs-h2); max-width: 22ch; }
.lede { font-size: var(--fs-lede); color: var(--c-chumbo); max-width: 58ch; opacity: .92; }

/* Ambar e acento pontual (regra do manual, seção 6) -- nunca cor de texto corrido:
   medido nesta obra, #B98B4E como TEXTO fica abaixo de AA 4.5:1 tanto sobre o papel
   claro (2.9:1) quanto sobre o petróleo escuro (4.0:1). Onde o design pede destaque
   ambar, o texto vai em branco/petróleo (alto contraste) e o ambar vira PONTO --
   um marcador de 5-6px antes do texto, nunca o glifo em si. */
.kicker {
  display: flex; align-items: center; gap: .55em;
  font-family: var(--f-mono);
  font-size: var(--fs-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
  margin: 0 0 1em;
}
.kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c-ambar); flex: none; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--c-ambar); color: var(--c-petroleo-900);
  padding: 12px 18px; border-radius: 0 0 8px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .95em 1.7em;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  transition: transform var(--dur-interaction) var(--ease-out-practical),
              background var(--dur-interaction) var(--ease-out-practical),
              box-shadow var(--dur-interaction) var(--ease-out-practical);
}
.btn--primary {
  background: var(--c-ambar);
  color: var(--c-petroleo-900);
  box-shadow: 0 0 0 0 rgba(11, 46, 39, 0);
}
.btn--primary:hover { transform: translateY(-2px); background: #c99a5e; box-shadow: 0 10px 24px -12px rgba(11, 46, 39, .55); }
.btn--primary:active { transform: translateY(0); box-shadow: 0 4px 12px -8px rgba(11, 46, 39, .5); }

/* Botão secundário -- derivado do primário (mesma pílula, mesmo ritmo de hover), em
   contorno para CTA de segunda prioridade sobre fundo claro (ex.: seção Cartórios). */
.btn--secondary {
  background: transparent;
  color: var(--c-petroleo);
  border: 2px solid var(--c-petroleo);
  padding: .85em 1.6em;
}
.btn--secondary:hover { transform: translateY(-2px); background: var(--c-petroleo); color: var(--c-branco); }
.btn--secondary:active { transform: translateY(0); }

/* Botão secundário para fundo ESCURO (hero, manifesto, cta-band) -- o .btn--secondary
   acima usa petróleo no texto/borda, ilegível sobre petróleo-900. Esta variante inverte
   a lógica: contorno branco translúcido, preenche de branco no hover. */
.btn--outline-light {
  background: transparent;
  color: var(--c-branco);
  border: 2px solid rgba(255, 255, 255, .55);
  padding: .85em 1.6em;
}
.btn--outline-light:hover { transform: translateY(-2px); background: var(--c-branco); color: var(--c-petroleo-900); border-color: var(--c-branco); }
.btn--outline-light:active { transform: translateY(0); }

/* ---------- Selo "a confirmar" — cerca de fato, nunca escondido ---------- */
.selo-confirmar {
  display: flex; align-items: baseline; gap: .6em;
  font-size: .875rem; color: var(--c-chumbo); opacity: .85;
  border-left: 2px solid var(--c-ambar);
  padding-left: .8em;
  margin-top: 1em;
}
.selo-confirmar__badge {
  display: inline-flex; align-items: center; gap: .4em;
  flex: none;
  font-family: var(--f-mono);
  font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase;
  color: inherit;
  border: 1px solid currentColor;
  opacity: .92;
  border-radius: 999px;
  padding: .2em .7em .2em .55em;
}
.selo-confirmar__badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--c-ambar); flex: none; }

/* ---------- Revelação por rolagem (movimento a serviço da hierarquia, nunca firula) ----------
   Blindagem sem-JS: o estado oculto só existe quando <html class="js"> (setado por
   script inline no <head>) — se o JS falhar/for bloqueado, o conteúdo nasce visível. */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js .rv.in { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   HEADER
   ========================================================================== */
/* Nota de robustez: o blur vive num ::before, nunca direto no .site-header.
   backdrop-filter num ancestral cria containing block para descendentes
   position:fixed (spec) -- se ficasse no .site-header, o overlay do menu
   mobile (fixed, filho do header) colapsaria de altura (bug medido nesta
   obra: rect.height=56 em vez de preencher a tela). O ::before é irmão do
   .menu na árvore de containing block, não ancestral filtrante dele. */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.site-header::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: rgba(7, 31, 26, .58);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: background var(--dur-transition) var(--ease-out-bold);
}
.site-header.is-stuck::before { background: rgba(7, 31, 26, .82); }

.site-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  height: 80px;
}
/* Marca desmembrada (ordem do dono 2026-09-03): a versao anterior era UMA imagem
   raster/SVG monolitica com a tagline embutida no proprio arquivo -- em qualquer
   tamanho pequeno o texto interno virava ruim de ler ou sumia (historico: 34px sem
   tagline -> 60px so pra tornar o texto embutido legivel). A correcao estrutural,
   nao cosmetica: o simbolo entra como SVG isolado (unico elemento de imagem) e
   "Corpus" + "Governanca Tecnologica" viram texto HTML real, nitido em qualquer
   tela/zoom -- texto de logotipo perde legibilidade em raster pequeno, texto HTML
   nao. Geometria/cor do simbolo e a familia tipografica (Playfair Display/Inter)
   permanecem exatamente as do manual de marca.

   `.marca-composta` e UMA UNICA peca (estrutura/alinhamento/hierarquia/tipografia),
   consumida tanto no header quanto no rodape -- nunca duas implementacoes paralelas
   que podem divergir. A UNICA coisa que muda entre os dois lugares e a ESCALA, via
   variavel CSS (--marca-mark/--marca-nome-fs/--marca-tag-fs/--marca-gap), redefinida
   pelo seletor de contexto (`.site-footer .marca-composta`) -- nao por classe/markup
   duplicado. `text-align:left` e `align-items:flex-start` sao explicitos aqui porque
   o rodape e um `.site-footer__inner` centralizado (text-align:center) -- sem isto a
   mesma peca ficaria alinhada à esquerda no header e centralizada no rodape, que é
   exatamente a divergência visual que este componente existe para impedir.

   REFINAMENTO 2026-09-03 (mesma sessao, ordem do dono ao vivo sobre a definicao acima):
   "a logo ainda parece muito junta ... aumentar o simbolo ... 30% maior e de 15 a 25% mais
   grossa" -- tres eixos independentes, aplicados juntos:
   1. --marca-gap sobe (mais respiro entre simbolo e bloco de texto -- a folga que o proprio
      dono disse que a logo precisava antes de crescer);
   2. --marca-mark sobe ~30% em cada contexto (header 46->60, condensado 38->50 na MESMA
      proporcao, rodape 56->73);
   3. o TRACO do simbolo (nao o tamanho) engorda ~20% NA FONTE do SVG -- ver
      `assets/img/logo/Corpus_Simbolo_Negativo_TracoReforcado.svg` e a nota espelho no
      brandpack (`branding/Brandpack_Corpus/README.md`) -- por isso o `<img>` no HTML aponta
      pra esse arquivo novo, nao pro `_Transparente.svg` original.
   Wordmark "Corpus" desce de peso 700 pra 500 (fonte variavel Playfair Display, mesmo
   arquivo) -- balanco contra o simbolo agora mais grosso, pedido explicito do dono
   ("mantem a letra mais fina como antes"; 500 comparado contra 600 e contra o peso 700
   anterior antes de aplicar, fora da pagina viva). Tamanho da fonte do nome/tagline NAO
   mudou -- so peso. */
.marca-composta {
  --marca-mark: 60px;
  --marca-nome-fs: 1.75rem; /* ~28px -- protagonista, escala de presenca (tamanho intocado) */
  --marca-tag-fs: .6875rem; /* ~11px */
  --marca-gap: 1.05em;
  display: flex; align-items: center; gap: var(--marca-gap);
  text-align: left;
}
.brand.marca-composta { text-decoration: none; }

.marca-composta__mark {
  height: var(--marca-mark); width: auto; flex: none;
  transition: height var(--dur-transition) var(--ease-out-bold);
}
.marca-composta__type {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 3px; line-height: 1;
}
.marca-composta__nome {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--marca-nome-fs);
  color: var(--c-branco);
  letter-spacing: -.01em;
  transition: font-size var(--dur-transition) var(--ease-out-bold);
}
/* Tagline em BRANCO, nao ambar: medido nesta mesma obra (ver nota do .menu__cta
   abaixo) que #B98B4E como texto cai a ~3.2-4.0:1 sobre o header translucido --
   abaixo de AA 4.5:1. Como texto de logotipo vira texto HTML real, deixa de valer
   a excecao WCAG 1.4.3 para logotipos (que cobria o SVG antigo) -- por isso o
   ambar fica de fora aqui, mesma disciplina ja aplicada a .kicker/.menu__cta.
   Medido por pixel real (screenshot + decodificacao PNG) no ponto mais claro do
   header translucido: contraste texto-composto vs fundo composto = ~13,9:1, folga
   grande sobre o minimo AA 4,5:1. */
.marca-composta__tag {
  font-family: var(--f-corpo);
  font-weight: 600;
  font-size: var(--marca-tag-fs);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88); /* mesma opacidade ja usada em .menu a, sobre o mesmo fundo */
}

.site-header.is-stuck .marca-composta { --marca-mark: 50px; --marca-nome-fs: 1.5rem; }

/* Rodape: mesma peca, escala propria (maior, sozinha na tela, sem navegacao ao lado). */
.site-footer .marca-composta {
  --marca-mark: 73px;
  --marca-nome-fs: 2rem;
  --marca-tag-fs: .75rem;
  --marca-gap: 1.2em;
}
.site-footer .marca-composta__mark { opacity: .92; }

.menu { display: none; }
@media (min-width: 900px) {
  .menu { display: flex; align-items: center; gap: clamp(20px, 2vw, 34px); }
  .menu a {
    position: relative;
    color: var(--c-branco); text-decoration: none; font-size: .9375rem; font-weight: 500;
    opacity: .88; transition: opacity var(--dur-interaction) var(--ease-out-practical);
  }
  .menu a:hover { opacity: 1; }
  /* Sublinhado que nasce do centro -- microtransição de hover/foco, nunca decoração parada. */
  .menu a:not(.menu__cta)::after {
    content: ''; position: absolute; left: 50%; right: 50%; bottom: -6px; height: 1px;
    background: var(--c-ambar);
    transition: left var(--dur-interaction) var(--ease-out-practical), right var(--dur-interaction) var(--ease-out-practical);
  }
  .menu a:not(.menu__cta):hover::after,
  .menu a:not(.menu__cta):focus-visible::after { left: 0; right: 0; }
  /* texto branco (nao ambar): medido nesta obra -- ambar como TEXTO sobre o header
     translucido cai a ~3.2:1 no pior caso (header sobre secao clara), abaixo de AA
     4.5:1; o ambar fica só na borda (uso grafico, exige apenas 3:1 -- passa). */
  .menu__cta {
    opacity: 1 !important;
    border: 1px solid var(--c-ambar); border-radius: 999px; padding: .55em 1.3em;
    color: var(--c-branco) !important;
  }
  .menu__cta:hover { background: var(--c-ambar); color: var(--c-petroleo-900) !important; }
}

.burger {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0; align-items: center;
}
@media (min-width: 900px) { .burger { display: none; } }
.burger span { width: 22px; height: 2px; background: var(--c-branco); transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
body.menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 899px) {
  .menu {
    display: flex; flex-direction: column; gap: 4px;
    position: fixed; inset: 80px 0 0 0;
    background: var(--c-petroleo-900);
    padding: 28px var(--pad);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  }
  body.menu-open .menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .menu a {
    color: var(--c-branco); text-decoration: none; font-size: 1.25rem; font-weight: 600;
    padding: 16px 4px; border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .menu__cta { color: var(--c-ambar) !important; }
}

/* Lastro escuro para o cabeçalho translúcido em páginas SEM subhero/hero escuro logo
   abaixo (artigo de guia, política de privacidade): sem isto, o header composita contra
   branco e vira um verde baço/opaco em vez do vidro escuro do resto do site (bug medido
   em QA). Ocupa exatamente a altura do header fixo, em fluxo normal. */
.header-backdrop { height: 80px; background: var(--c-petroleo-900); }

.site-header__progress {
  height: 2px; background: var(--c-ambar);
  transform-origin: left; transform: scaleX(0);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: 80px;
  overflow: clip;
  background: var(--c-petroleo-900);
}
.hero__media {
  position: absolute; inset: 0; overflow: hidden;
}
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 38%;
  transform: translateY(0) scale(1.06);
  will-change: transform;
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 31, 26, .35) 0%, rgba(7, 31, 26, .55) 42%, rgba(7, 31, 26, .96) 100%),
    linear-gradient(90deg, rgba(7, 31, 26, .55) 0%, rgba(7, 31, 26, .1) 55%);
}
.hero__content {
  position: relative; z-index: 2;
  padding-top: clamp(80px, 16vh, 160px);
  padding-bottom: clamp(48px, 6vw, 72px);
  max-width: 880px;
}
.hero__title {
  color: var(--c-branco);
  font-size: var(--fs-h1);
  letter-spacing: -.01em;
  margin-bottom: .5em;
}
.hero__lede {
  color: rgba(255, 255, 255, .82);
  font-size: var(--fs-lede);
  max-width: 46ch;
  margin-bottom: 1.6em;
}

.facts-strip {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 28px;
  padding-block: clamp(24px, 4vw, 40px);
  border-top: 1px solid rgba(255, 255, 255, .14);
}
@media (min-width: 760px) { .facts-strip { grid-template-columns: repeat(4, 1fr); } }
.facts-strip li { display: flex; flex-direction: column; gap: 6px; border-left: 2px solid var(--c-ambar); padding-left: 12px; }
.facts-strip__num {
  font-family: var(--f-mono); font-weight: 700; color: var(--c-branco);
  font-size: clamp(1.05rem, .95rem + .5vw, 1.4rem);
}
.facts-strip__label { color: rgba(255, 255, 255, .72); font-size: .8125rem; line-height: 1.4; max-width: 22ch; }

/* ==========================================================================
   AS CAMADAS
   ========================================================================== */
.layers { background: var(--c-petroleo); color: rgba(255, 255, 255, .92); padding-block: var(--section-py); }
.layers .h-display, .layers h3 { color: var(--c-branco); }
.layers .lede { color: rgba(255, 255, 255, .78); }

.layers__grid { display: grid; gap: clamp(40px, 6vw, 80px); }
@media (min-width: 980px) {
  .layers__grid { grid-template-columns: 340px 1fr; align-items: start; }
}

.layers__intro { position: sticky; top: 110px; }
@media (max-width: 979px) { .layers__intro { position: static; } }

.spine { margin-top: clamp(28px, 4vw, 44px); display: none; }
@media (min-width: 980px) { .spine { display: block; } }
.spine__item { border-left: 2px solid rgba(255, 255, 255, .14); transition: border-color var(--dur-base) var(--ease-out); }
.spine__item.is-on { border-left-color: var(--c-ambar); }
.spine__item button {
  display: flex; align-items: baseline; gap: 12px;
  padding: 12px 0 12px 18px; width: 100%; text-align: left;
  color: rgba(255, 255, 255, .55); font-size: .9375rem;
  transition: color var(--dur-interaction) var(--ease-out-practical);
}
.spine__item button:hover { color: rgba(255, 255, 255, .82); }
.spine__item.is-on button { color: var(--c-branco); font-weight: 600; }
.spine__n { font-family: var(--f-mono); color: rgba(255, 255, 255, .6); font-size: .8125rem; }
.spine__item.is-on .spine__n { color: var(--c-branco); }

.layers__list { display: flex; flex-direction: column; gap: clamp(48px, 7vw, 96px); }
.layer { display: grid; gap: 28px; }
@media (min-width: 640px) { .layer { grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(28px, 4vw, 56px); } }
.layer:nth-child(even) .layer__media { order: 2; }
@media (max-width: 639px) { .layer:nth-child(even) .layer__media { order: 0; } }

.layer__media {
  border-radius: var(--radius); overflow: hidden; background: var(--c-petroleo-800);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.layer__media img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3;
  transform: scale(1); transition: transform var(--dur-base) var(--ease-out-practical);
}
.layer:hover .layer__media img { transform: scale(1.035); }

.layer__n { display: flex; align-items: center; gap: .5em; font-family: var(--f-mono); color: rgba(255, 255, 255, .68); font-size: .875rem; letter-spacing: .08em; margin-bottom: .6em; }
.layer__n::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c-ambar); }
.layer__body h3 { font-size: var(--fs-h3); margin-bottom: .5em; }
.layer__body p { color: rgba(255, 255, 255, .78); max-width: 46ch; }
.layer .selo-confirmar { color: rgba(255, 255, 255, .78); border-left-color: var(--c-ambar); max-width: 46ch; }

/* ==========================================================================
   CARTÓRIOS — a virada tonal
   ========================================================================== */
.cartorios { background: var(--c-papel); color: var(--c-chumbo); position: relative; }
.cartorios .h-display { color: var(--c-petroleo); }

.cartorios__banner {
  width: 100%; max-height: 62vh; overflow: hidden;
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
/* Virada tonal como segundo momento cinematográfico do site -- o mesmo gesto de
   assentamento (zoom que resolve, luz que normaliza) já usado no hero, chamado de volta
   aqui para rimar visualmente os dois únicos planos de mídia em tela cheia da página.
   .cartorios__banner é observado como .rv (ver HTML); a própria seção não ganha o
   translateY genérico -- um banner de sangria total "subindo" ao lado da máscara
   pareceria um glitch, então aqui ela só ganha opacidade, e quem assenta é a imagem. */
.js .cartorios__banner.rv { transform: none; transition: opacity var(--dur-slow) var(--ease-out-bold); }
.cartorios__banner img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 32%;
  transform: scale(1.08); filter: saturate(.92) brightness(.95);
  transition: transform var(--dur-cinematic) var(--ease-out-bold), filter var(--dur-cinematic) var(--ease-out-bold);
}
.cartorios__banner.in img { transform: scale(1); filter: saturate(1) brightness(1); }

.cartorios__grid {
  display: grid; gap: clamp(32px, 5vw, 56px);
  padding-top: clamp(20px, 4vw, 40px);
  padding-bottom: var(--section-py);
}
@media (min-width: 860px) { .cartorios__grid { grid-template-columns: 1.1fr .9fr; align-items: start; } }

/* Linha do tempo regulatória como TABELA: mesma convenção estrutural já usada na
   seção "A Corpus" (dado em par ano/marco), agora com uma terceira coluna (o que
   muda para o leitor). Desktop: tabela real,
   cabeçalho mono discreto, regra fina entre linhas. Abaixo de 640px a tabela vira
   pilha de cartões (thead escondido por acessibilidade, rótulo de cada campo via
   `data-th`), sem perder a hierarquia ano→norma→efeito em tela estreita. */
.timeline-table { width: 100%; border-collapse: collapse; }
.timeline-table thead th {
  text-align: left;
  font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-chumbo); opacity: .6;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(15, 61, 52, .16);
}
.timeline-table tbody td {
  padding: 16px 14px 16px 0;
  border-bottom: 1px solid rgba(15, 61, 52, .12);
  vertical-align: top;
}
.timeline-table tbody tr:last-child td { border-bottom: none; }
.timeline-table td.mono { color: var(--c-petroleo); font-weight: 700; font-size: 1rem; white-space: nowrap; width: 4.5ch; }
.timeline-table td:nth-child(2) { font-weight: 600; color: var(--c-petroleo); white-space: nowrap; }
.timeline-table td:nth-child(3) { max-width: 40ch; }

@media (max-width: 639px) {
  .timeline-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .timeline-table, .timeline-table tbody, .timeline-table tr, .timeline-table td { display: block; width: 100%; }
  .timeline-table tbody tr { padding: 14px 0; border-bottom: 1px solid rgba(15, 61, 52, .12); }
  .timeline-table tbody tr:last-child { border-bottom: none; }
  .timeline-table tbody td { padding: 2px 0; border-bottom: none; white-space: normal; }
  .timeline-table td::before {
    content: attr(data-th);
    display: block;
    font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--c-chumbo); opacity: .55; margin-bottom: 2px;
  }
  .timeline-table td.mono { font-size: 1rem; }
}

/* Coreografia escalonada: grupo de itens revela em
   sequência, não em bloco. O wrapper .cartorios__timeline.rv deixa de ser a própria
   unidade de fade (fica neutro) e delega o movimento a cada item -- a linha da tabela
   e o selo, cada um com seu atraso incremental. */
.js .cartorios__timeline.rv { opacity: 1; transform: none; }
.js .cartorios__timeline .timeline-table tbody tr,
.js .cartorios__timeline > .selo-confirmar {
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.cartorios__timeline.in .timeline-table tbody tr,
.cartorios__timeline.in > .selo-confirmar { opacity: 1; transform: none; }
.cartorios__timeline.in .timeline-table tbody tr:nth-child(1) { transition-delay: 0ms; }
.cartorios__timeline.in .timeline-table tbody tr:nth-child(2) { transition-delay: var(--stagger-step); }
.cartorios__timeline.in > .selo-confirmar { transition-delay: calc(var(--stagger-step) * 2); }

.cartorios__stat {
  grid-column: 1 / -1;
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  color: var(--c-petroleo);
  border-top: 1px solid rgba(15, 61, 52, .16);
  padding-top: clamp(24px, 3vw, 36px);
}

.cartorios__cta { grid-column: 1 / -1; margin-top: -8px; }

/* ==========================================================================
   CLIENTES
   ========================================================================== */
.clients { background: var(--c-branco); padding-block: var(--section-py); }
.clients .h-display { color: var(--c-petroleo); }

/* Subtítulo de grupo (Empresas / Cartórios), dentro de "Clientes ativos com contrato
   recorrente" -- ajuste factual 2026-09-05, ação #5412. */
.clients__subtitulo {
  font-family: var(--f-display); font-weight: 600; color: var(--c-petroleo);
  font-size: var(--fs-h3);
}

/* Uma coluna abaixo de 640px (ordem do dono, 2026-09-08, verbatim "continua quebrando
   a linha no celular. tem que jogar os cards pra baixo, um em cima do outro quando
   conectar pelo celular"): 2 colunas em 390px real (medido) espremia nomes longos
   ("Hotel Natureza Eco Lodge, Reserva Águia Branca", "Cartório do 1º Ofício de Venda
   Nova do Imigrante") em ~170px uteis, forçando quebra ruim. 640px é o mesmo breakpoint
   ja usado por este componente (a regra de 3 colunas abaixo ja vivia em min-width:640px)
   e o mesmo par mobile/desktop usado em outros pontos do arquivo (.layer, .timeline-table,
   ambos em 639px/640px) -- reaproveita o vocabulario existente, nao inventa numero novo.
   .client-card ganha aspect-ratio:auto no mesmo breakpoint (ver regra abaixo) para a
   altura ficar livre, guiada pelo conteudo, em vez de presa a proporcao 16:9 da largura
   cheia do card em 1 coluna. */
.clients__grid {
  margin-top: clamp(32px, 5vw, 52px);
  display: grid; grid-template-columns: 1fr; gap: 14px;
}
@media (min-width: 640px) { .clients__grid { grid-template-columns: repeat(3, 1fr); } }

/* Coreografia escalonada: os seis cartões chegam em sequência, não em bloco -- o
   próprio .clients__grid.rv fica neutro (só os cartões animam), com atraso por posição.
   A revelação usa `transform` (translateY) e o hover usa `translate` (propriedade CSS
   separada) -- assim os dois gestos nunca competem pela mesma duração/curva: entrada é
   dur-base/ease-out (uma vez), hover é dur-interaction/ease-out-practical (todo hover). */
.js .clients__grid.rv { opacity: 1; transform: none; }
.js .clients__grid > .client-card { opacity: 0; transform: translateY(16px); }
.clients__grid.in > .client-card { opacity: 1; transform: none; }
.clients__grid.in > .client-card:nth-child(1) { transition-delay: 0ms; }
.clients__grid.in > .client-card:nth-child(2) { transition-delay: calc(var(--stagger-step) * 1); }
.clients__grid.in > .client-card:nth-child(3) { transition-delay: calc(var(--stagger-step) * 2); }
.clients__grid.in > .client-card:nth-child(4) { transition-delay: calc(var(--stagger-step) * 3); }
.clients__grid.in > .client-card:nth-child(5) { transition-delay: calc(var(--stagger-step) * 4); }
.clients__grid.in > .client-card:nth-child(6) { transition-delay: calc(var(--stagger-step) * 5); }
/* Grupo Cartórios (ajuste factual 2026-09-05, ação #5412) tem 11 cartões -- estende o
   mesmo escalonamento para nth-child(7..11), mesmo tratamento visual do grupo Empresas. */
.clients__grid.in > .client-card:nth-child(7) { transition-delay: calc(var(--stagger-step) * 6); }
.clients__grid.in > .client-card:nth-child(8) { transition-delay: calc(var(--stagger-step) * 7); }
.clients__grid.in > .client-card:nth-child(9) { transition-delay: calc(var(--stagger-step) * 8); }
.clients__grid.in > .client-card:nth-child(10) { transition-delay: calc(var(--stagger-step) * 9); }
.clients__grid.in > .client-card:nth-child(11) { transition-delay: calc(var(--stagger-step) * 10); }

/* Restauração literal da anatomia v1 (2026-09-08, ordem do dono, ação .11/#5610,
   verbatim "pqp, vc nao tem o card antigo? a versão que estava antes de eu pedir pra
   colocar as logo"): a ação #5610 tinha reconstruído o card do zero (anatomia v3,
   client-card__nome sem kicker) em vez de restaurar do git. Estas regras são
   restauração fiel, medida no commit 0517530b7 (estado de app.css imediatamente
   anterior à ação #5434 que introduziu logos) -- aspect-ratio 16:9, padding uniforme,
   client-card--text + client-card__kicker (Empresa/Cartório) e a regra .client-card
   img preservada como estava (sem uso hoje -- nenhum client_card atual gera <img>).
   As anatomias v2 (moldura .client-card__mark com hexágono, 2026-09-05) e v3
   (client-card__nome sem kicker, 2026-09-07) seguem revogadas; nenhum logo volta. */
.client-card {
  aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  border: 1px solid rgba(15, 61, 52, .14);
  border-radius: var(--radius-sm);
  background: var(--c-papel);
  translate: 0 0;
  box-shadow: 0 0 0 0 rgba(15, 61, 52, 0);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              translate var(--dur-interaction) var(--ease-out-practical),
              box-shadow var(--dur-interaction) var(--ease-out-practical),
              border-color var(--dur-interaction) var(--ease-out-practical);
}
/* Altura livre em 1 coluna (max-width:639px, par do min-width:640px acima): sem isso, a
   proporcao 16:9 aplicada a largura cheia do mobile (~350px uteis) prende a altura a
   ~197px por regra de proporcao, em vez de deixar o card crescer com o conteudo (nome
   de 2-3 linhas + filete). Nao mexe em cor, borda, fundo nem no filete. */
@media (max-width: 639px) {
  .client-card { aspect-ratio: auto; min-height: 112px; }
}
.client-card:hover {
  translate: 0 -3px;
  border-color: rgba(185, 139, 78, .4);
  box-shadow: 0 14px 26px -18px rgba(15, 61, 52, .45);
}
.client-card img { max-height: 46px; width: auto; object-fit: contain; filter: grayscale(1) contrast(1.05); opacity: .82; transition: filter var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.client-card:hover img { filter: none; opacity: 1; }
.client-card--text { flex-direction: column; gap: 6px; }
.client-card--text span:last-child {
  font-family: var(--f-display); font-weight: 600; color: var(--c-petroleo);
  text-align: center; font-size: clamp(.9375rem, .9rem + .3vw, 1.0625rem);
}
/* [2026-09-08] Ordem do dono (ação .12/#5628, procedência DECLARADA): o TEXTO do kicker
   ("Empresa"/"Cartório") sai dos 16 cards -- já há título de grupo (h3.clients__subtitulo)
   acima separando os dois blocos, o rótulo por card virou redundante. O FILETE dourado
   permanece como elemento gráfico puro, no mesmo lugar onde estava o sublinhado do
   kicker: mesma cor (var(--c-ambar)) e mesma espessura (2px) de antes, agora como
   barra própria (não mais border-bottom de texto) com largura fixa e coerente nos 16
   cards -- antes a largura variava com o comprimento da palavra ("Empresa" x
   "Cartório"), o que não fazia mais sentido sem texto. O markup (gerar_site.py) segue
   emitindo <span class="client-card__kicker" aria-hidden="true"></span> vazio. */
.client-card__kicker {
  display: block;
  width: 32px;
  height: 2px;
  background: var(--c-ambar);
}

/* ==========================================================================
   A CORPUS — manifesto
   ========================================================================== */
.manifesto { position: relative; background: var(--c-petroleo-900); color: rgba(255, 255, 255, .92); padding-block: var(--section-py); overflow: clip; }
.manifesto .h-display { color: var(--c-branco); }

.manifesto__texture { position: absolute; inset: 0; opacity: .22; pointer-events: none; }
.manifesto__texture img { width: 100%; height: 100%; object-fit: cover; }

.manifesto__grid { position: relative; z-index: 1; display: grid; gap: clamp(40px, 6vw, 72px); }
@media (min-width: 900px) { .manifesto__grid { grid-template-columns: 1.3fr .7fr; } }

.manifesto__body p { color: rgba(255, 255, 255, .82); max-width: 62ch; }

.timeline-compact { display: flex; flex-direction: column; gap: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.timeline-compact li { display: flex; gap: 18px; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); border-left: 2px solid var(--c-ambar); padding-left: 14px; }
.timeline-compact span { flex: none; color: var(--c-branco); font-weight: 700; min-width: 4.5ch; }
.timeline-compact p { margin: 0; color: rgba(255, 255, 255, .78); font-size: .9375rem; }

/* Variante clara: .timeline-compact nasceu para fundo escuro (petróleo-900) -- em seção
   clara (ex.: "Trajetória" de /casos-e-credenciais/) precisa do inverso, senão o texto
   branco some sobre fundo branco (bug medido em QA: lista aparentava vazia). */
.pillars--light .timeline-compact,
.article .timeline-compact { border-top-color: rgba(15, 61, 52, .16); }
.pillars--light .timeline-compact li,
.article .timeline-compact li { border-bottom-color: rgba(15, 61, 52, .14); }
.pillars--light .timeline-compact span,
.article .timeline-compact span { color: var(--c-petroleo); }
.pillars--light .timeline-compact p,
.article .timeline-compact p { color: var(--c-chumbo); }

/* Coreografia escalonada: os quatro marcos da linha do tempo chegam em sequência. */
.js .timeline-compact.rv { opacity: 1; transform: none; }
.js .timeline-compact > li { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.timeline-compact.in > li { opacity: 1; transform: none; }
.timeline-compact.in > li:nth-child(1) { transition-delay: 0ms; }
.timeline-compact.in > li:nth-child(2) { transition-delay: calc(var(--stagger-step) * 1); }
.timeline-compact.in > li:nth-child(3) { transition-delay: calc(var(--stagger-step) * 2); }
.timeline-compact.in > li:nth-child(4) { transition-delay: calc(var(--stagger-step) * 3); }

/* ==========================================================================
   CONTATO
   ========================================================================== */
.contact { background: var(--c-petroleo); color: rgba(255, 255, 255, .92); padding-block: var(--section-py); }
.contact .h-display { color: var(--c-branco); }
.contact .lede { color: rgba(255, 255, 255, .78); }
.contact__nota {
  font-size: .875rem; color: rgba(255, 255, 255, .78);
  border-left: 2px solid var(--c-ambar);
  padding-left: .8em;
  margin-top: -.4em;
  max-width: 46ch;
}

.contact__grid { display: grid; gap: clamp(40px, 6vw, 72px); }
@media (min-width: 900px) { .contact__grid { grid-template-columns: 1fr 1fr; align-items: start; } }

.contact__direct { margin-top: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; gap: 20px; }
.contact__direct dt { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin-bottom: .3em; }
.contact__direct dd { margin: 0; }
.contact__direct a { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); font-weight: 700; text-decoration: none; color: var(--c-branco); border-bottom: 2px solid transparent; transition: border-color var(--dur-interaction) var(--ease-out-practical); }
.contact__direct a:hover, .contact__direct a:focus-visible { border-color: var(--c-ambar); }

.form { display: flex; flex-direction: column; gap: 18px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius); padding: clamp(22px, 3vw, 34px); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: .8125rem; color: rgba(255, 255, 255, .68); }
.field input, .field textarea {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-sm);
  color: var(--c-branco);
  padding: .85em 1em;
  resize: vertical;
  transition: border-color var(--dur-interaction) var(--ease-out-practical), box-shadow var(--dur-interaction) var(--ease-out-practical);
}
.field input:focus, .field textarea:focus { border-color: var(--c-ambar); box-shadow: 0 0 0 3px var(--c-ambar-soft); }
.form .btn--primary { align-self: flex-start; }
.form-status { margin: 0; font-size: .875rem; min-height: 1.2em; }
/* Ambar e acento pontual (regra do manual, seção 6) -- nunca cor de texto corrido:
   mesma disciplina de .kicker/.kicker::before acima. Texto em branco (alto contraste),
   ambar rebaixado a marcador de 6px antes do texto. */
.form-status.ok { display: flex; align-items: center; gap: .55em; color: var(--c-branco); }
.form-status.ok::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c-ambar); flex: none; }
/* Vermelho neutro (hue puro, sem viés laranja) -- longe da família coral/terracota
   aposentada (#F26C4F, #E39B7A). Contraste ~4.79:1 sobre --c-petroleo (AA). */
.form-status.err { color: #FF7A7A; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--c-petroleo-900); color: rgba(255, 255, 255, .6); padding-block: 44px; }
.site-footer__inner { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }

/* `.site-footer__brand` e so o CONTEXTO (seletor de escala + centralizacao no rodape);
   a composicao em si (`.marca-composta` e filhos) esta definida uma unica vez, junto
   do header, na secao HEADER acima -- ver nota ali sobre por que a peca e unica. */

.site-footer__line { margin: 0; font-size: .875rem; color: rgba(255, 255, 255, .75); }
.site-footer__copy { margin: 0; font-size: .75rem; font-family: var(--f-mono); color: rgba(255, 255, 255, .4); }

/* ==========================================================================
   FOOTER -- links institucionais (site-v3, multipagina)
   ========================================================================== */
.site-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 4px 0; }
.site-footer__nav a { font-size: .8125rem; color: rgba(255, 255, 255, .68); text-decoration: none; }
.site-footer__nav a:hover, .site-footer__nav a:focus-visible { color: var(--c-branco); }

/* ==========================================================================
   BREADCRUMB / KICKER DE PAGINA
   ========================================================================== */
.crumb { display: block; font-family: var(--f-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 1.4em; }
.crumb a { color: rgba(255,255,255,.72); text-decoration: none; }
.crumb a:hover, .crumb a:focus-visible { color: var(--c-branco); text-decoration: underline; }
.crumb--dark { color: rgba(15,61,52,.62); }
.crumb--dark a { color: var(--c-petroleo); }

/* ==========================================================================
   SUBHERO -- abertura das paginas internas (mais curta que o hero da home)
   ========================================================================== */
.subhero {
  position: relative; overflow: clip;
  background: var(--c-petroleo-900);
  padding-top: calc(80px + clamp(64px, 12vh, 120px));
  padding-bottom: clamp(56px, 8vw, 96px);
}
.subhero__media { position: absolute; inset: 0; z-index: 0; }
.subhero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; opacity: .34; }
.subhero__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,31,26,.55) 0%, rgba(7,31,26,.94) 100%);
}
.subhero__content { position: relative; z-index: 1; max-width: 760px; }
.subhero__title { color: var(--c-branco); font-size: var(--fs-h1); letter-spacing: -.01em; margin-bottom: .5em; }
.subhero__lede { color: rgba(255,255,255,.82); font-size: var(--fs-lede); max-width: 56ch; margin-bottom: 1.4em; }
.subhero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* ==========================================================================
   AVISO -- observacao profissional / disclaimer, distinto do selo "a confirmar"
   (este e conteudo definitivo, nao um placeholder de dado pendente)
   ========================================================================== */
.aviso {
  display: flex; gap: .8em; align-items: flex-start;
  font-size: .9375rem; line-height: 1.6;
  border-left: 2px solid var(--c-ambar);
  padding: .2em 0 .2em 1em;
  max-width: 62ch;
}
.aviso p { margin: 0; }
.aviso strong { color: inherit; }
.aviso--dark { color: rgba(255,255,255,.82); }
.aviso--claro { color: var(--c-chumbo); }

/* ==========================================================================
   CHOOSER -- escolha de perfil (home): dois cartoes grandes
   ========================================================================== */
.chooser { background: var(--c-papel); padding-block: var(--section-py); }
.chooser__grid { display: grid; gap: clamp(20px, 3vw, 28px); }
@media (min-width: 760px) { .chooser__grid { grid-template-columns: 1fr 1fr; } }

.chooser-card {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--c-branco);
  border: 1px solid rgba(15,61,52,.14);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 44px);
  text-decoration: none; color: inherit;
  transition: transform var(--dur-interaction) var(--ease-out-practical),
              box-shadow var(--dur-interaction) var(--ease-out-practical),
              border-color var(--dur-interaction) var(--ease-out-practical);
}
.chooser-card:hover, .chooser-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(185,139,78,.5);
  box-shadow: 0 20px 40px -26px rgba(15,61,52,.4);
}
/* Ambar nunca e cor de texto corrido (disciplina do .kicker acima) -- corrigido pelo gate do
   Banner de 2026-09-05 (emenda 1, parecer-banner-2026-09-05.md): 3.06:1 sobre branco reprovava
   o piso AA de 4.5:1. O ponto (::before) continua ambar como marcador, nao como glifo. */
.chooser-card__kicker { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-petroleo); display: flex; align-items: center; gap: .5em; }
.chooser-card__kicker::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c-ambar); }
.chooser-card h3 { font-size: var(--fs-h3); color: var(--c-petroleo); max-width: 24ch; }
.chooser-card p { color: var(--c-chumbo); max-width: 40ch; margin: 0; }
.chooser-card__cta { margin-top: auto; padding-top: 8px; font-weight: 600; color: var(--c-petroleo); display: inline-flex; align-items: center; gap: .4em; }
.chooser-card__cta::after { content: '\2192'; transition: transform var(--dur-interaction) var(--ease-out-practical); }
.chooser-card:hover .chooser-card__cta::after { transform: translateX(4px); }

/* ==========================================================================
   PILLARS -- grade generica de pilares/estrutura (empresas, cartorios)
   ========================================================================== */
.pillars { padding-block: var(--section-py); }
.pillars--dark { background: var(--c-petroleo); color: rgba(255,255,255,.92); }
.pillars--dark .h-display, .pillars--dark h3 { color: var(--c-branco); }
.pillars--dark .lede { color: rgba(255,255,255,.78); }
.pillars--light { background: var(--c-branco); }
.pillars--light .h-display { color: var(--c-petroleo); }
.pillars--light .lede { color: var(--c-chumbo); }
/* .kicker nasceu para fundo escuro (texto branco) -- em seção clara precisa do inverso,
   senão o texto some (branco sobre branco), sobrando só o ponto âmbar (bug medido em QA). */
.pillars--light .kicker, .hub .kicker, .article .kicker { color: var(--c-petroleo); }

.pillars__grid { margin-top: clamp(32px, 5vw, 52px); display: grid; gap: 20px; }
@media (min-width: 700px) { .pillars__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .pillars__grid--3 { grid-template-columns: repeat(3, 1fr); } }

.pillar {
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.14);
}
.pillars--light .pillar { border-color: rgba(15,61,52,.14); background: var(--c-papel); }
/* Ambar nunca e cor de texto corrido (disciplina do .kicker). Corrigido pelo gate do Banner de
   2026-09-05 (emenda 2, parecer-banner-2026-09-05.md): 3.95:1 sobre petroleo reprovava o piso
   AA de 4.5:1 para texto pequeno. Branco a 92% (mesma cor do .kicker em fundo escuro). */
.pillar__n { font-family: var(--f-mono); color: rgba(255,255,255,.92); font-size: .8125rem; letter-spacing: .08em; margin-bottom: .6em; display: block; }
/* Em secao clara (cartorios) o branco desapareceria -- inverte para petroleo, espelhando a
   correcao ja feita para .pillars--light .kicker (linha acima). Corrigido pelo gate do Banner
   de 2026-09-05 (emenda 3): 2.88:1 sobre papel reprovava o piso AA. */
.pillars--light .pillar__n { color: var(--c-petroleo); }
.pillar h3 { font-size: 1.15rem; margin-bottom: .5em; }
.pillar p { margin: 0; max-width: 42ch; }
.pillars--dark .pillar p { color: rgba(255,255,255,.78); }
.pillars--light .pillar p { color: var(--c-chumbo); }

/* Dores (empresas) -- lista de problemas, formato mais simples de linha com marcador */
.dores { display: flex; flex-direction: column; gap: 0; margin-top: clamp(24px, 4vw, 36px); border-top: 1px solid rgba(255,255,255,.14); max-width: 62ch; }
.pillars--light .dores { border-top-color: rgba(15,61,52,.14); }
.dores li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.pillars--light .dores li { border-bottom-color: rgba(15,61,52,.12); }
.dores li::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--c-ambar); margin-top: .55em; }
.dores li p { margin: 0; }

/* ==========================================================================
   JORNADA -- "Como trabalhamos" em quatro etapas
   ========================================================================== */
.jornada { padding-block: var(--section-py); background: var(--c-papel); }
.jornada .h-display { color: var(--c-petroleo); }
.jornada__grid { margin-top: clamp(32px, 5vw, 52px); display: grid; gap: 0; }
@media (min-width: 860px) { .jornada__grid { grid-template-columns: repeat(4, 1fr); gap: 0; } }

.etapa {
  position: relative;
  padding: clamp(20px, 3vw, 28px) clamp(16px, 2vw, 24px) clamp(20px, 3vw, 28px) 0;
  border-top: 2px solid var(--c-ambar);
}
@media (min-width: 860px) {
  .etapa { border-top: none; border-left: 2px solid var(--c-ambar); padding-left: clamp(18px, 2vw, 26px); padding-top: 0; }
}
.etapa__n { font-family: var(--f-display); font-size: 2.25rem; font-weight: 700; color: var(--c-petroleo); display: block; margin-bottom: .3em; }
.etapa h3 { font-size: 1.1rem; color: var(--c-petroleo); margin-bottom: .4em; }
.etapa p { margin: 0; color: var(--c-chumbo); max-width: 32ch; }

/* Condensada (usada na home, dentro da secao .layers escura) */
.jornada--condensada { background: transparent; padding-block: 0; }
.jornada--condensada .etapa { border-left-color: rgba(255,255,255,.3); }
.jornada--condensada .etapa__n { color: var(--c-branco); }
.jornada--condensada .etapa h3 { color: var(--c-branco); }
.jornada--condensada .etapa p { color: rgba(255,255,255,.78); }

/* ==========================================================================
   CTA-BAND -- faixa de conversao de fechamento de pagina
   ========================================================================== */
.cta-band { background: var(--c-petroleo-900); color: var(--c-branco); padding-block: clamp(56px, 8vw, 96px); text-align: center; }
.cta-band__inner { max-width: 640px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cta-band h2 { color: var(--c-branco); font-size: var(--fs-h2); }
.cta-band p { color: rgba(255,255,255,.78); margin: 0; max-width: 52ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 6px; }

/* ==========================================================================
   CONTEUDOS -- hub de guias/artigos
   ========================================================================== */
.hub { background: var(--c-branco); padding-block: var(--section-py); }
.hub .h-display { color: var(--c-petroleo); }
.hub__grid { margin-top: clamp(28px, 4vw, 44px); display: grid; gap: 18px; }
@media (min-width: 760px) { .hub__grid { grid-template-columns: repeat(2, 1fr); } }

.hub-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid rgba(15,61,52,.14);
  border-radius: var(--radius);
  background: var(--c-papel);
  text-decoration: none; color: inherit;
  transition: transform var(--dur-interaction) var(--ease-out-practical), box-shadow var(--dur-interaction) var(--ease-out-practical);
}
.hub-card:hover, .hub-card:focus-visible { transform: translateY(-3px); box-shadow: 0 16px 30px -22px rgba(15,61,52,.4); }
.hub-card__kicker { font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-petroleo); opacity: .7; }
.hub-card h3 { font-size: 1.15rem; color: var(--c-petroleo); }
.hub-card p { margin: 0; color: var(--c-chumbo); }
.hub-card__link { margin-top: auto; font-weight: 600; color: var(--c-petroleo); display: inline-flex; align-items: center; gap: .4em; }
.hub-card__link::after { content: '\2192'; }
.hub-card--disabled { opacity: .55; cursor: default; }
.hub-card--disabled:hover { transform: none; box-shadow: none; }

/* ==========================================================================
   ARTIGO -- layout de leitura longa (guia/checklist) e pagina institucional
   (Sobre, Politica de Privacidade)
   ========================================================================== */
.article { background: var(--c-branco); padding-block: var(--section-py); }
.article__wrap { max-width: 760px; margin-inline: auto; padding-inline: var(--pad); }
.article__wrap .h-display, .article h1 { color: var(--c-petroleo); max-width: none; }
.article__meta { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-chumbo); opacity: .6; margin-bottom: 1.2em; }
.article__body { font-size: 1.0625rem; line-height: 1.75; color: var(--c-chumbo); }
.article__body h2 { font-size: 1.4rem; color: var(--c-petroleo); margin: 1.6em 0 .6em; }
.article__body h3 { font-size: 1.15rem; color: var(--c-petroleo); margin: 1.3em 0 .5em; }
.article__body p { margin: 0 0 1.1em; }
.article__body ul, .article__body ol { list-style: none; margin: 0 0 1.3em; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.article__body li { display: flex; gap: 12px; align-items: flex-start; }
.article__body li::before { content: ''; flex: none; width: 9px; height: 9px; margin-top: .45em; border-radius: 2px; border: 2px solid var(--c-ambar); }
.article__body strong { color: var(--c-petroleo); }
.article__body .aviso { margin: 1.6em 0; }

/* ==========================================================================
   CASOS E CREDENCIAIS -- certificacoes (texto, sem uso de marca de terceiro)
   ========================================================================== */
.certs { padding-block: var(--section-py); background: var(--c-petroleo); color: rgba(255,255,255,.92); }
.certs .h-display { color: var(--c-branco); }
.certs .lede { color: rgba(255,255,255,.78); }
.certs__grid { margin-top: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 700px) { .certs__grid { grid-template-columns: repeat(3, 1fr); } }
.cert-badge { display: flex; align-items: center; justify-content: center; text-align: center; padding: 18px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-sm); font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .04em; color: rgba(255,255,255,.86); }

/* ==========================================================================
   FORMULARIO -- campos adicionais (select, honeypot) e pagina /contato/
   ========================================================================== */
.field select {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-sm);
  color: var(--c-branco);
  padding: .85em 1em;
  appearance: none;
}
.field select:focus { border-color: var(--c-ambar); box-shadow: 0 0 0 3px var(--c-ambar-soft); }
.field select option { color: var(--c-chumbo); }
.field--hp { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.field-row { display: grid; gap: 18px; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.contact-page .contact__grid { align-items: start; }