/* ===== 01-tokens.css ===== */
/* ==========================================================================
   Vira Valor · tokens
   Conceito Fita de Liquidez, paleta Petróleo + Sálvia.
   Origem: outputs/vira-valor-fita-de-liquidez/data/brand-tokens.json
   ========================================================================== */

:root {
  /* --- Cor ---------------------------------------------------------------
     Contrastes medidos sobre Branco névoa:
     petróleo 11,78:1 · teal escuro 7,32:1 · teal 4,86:1 · sálvia 2,98:1.
     Sálvia e linha são decorativas: nunca carregam texto ou informação. */
  --cor-petroleo: #183a45;
  --cor-petroleo-profundo: #102e36;
  --cor-teal-escuro: #245c63;
  --cor-teal: #4b7774;
  --cor-salvia: #7d9990;
  --cor-nevoa: #dcebe6;
  --cor-branco-nevoa: #fafcfb;
  --cor-branco: #ffffff;
  --cor-linha: #b9d1cb;
  --cor-sucesso: #236448;
  --cor-erro: #a92d3d;

  /* Papéis semânticos */
  --texto: var(--cor-petroleo);
  --texto-suave: var(--cor-teal-escuro);
  --texto-inverso: var(--cor-branco-nevoa);
  --texto-inverso-suave: var(--cor-nevoa);
  --fundo: var(--cor-branco-nevoa);
  --fundo-superficie: var(--cor-branco);
  --fundo-nevoa: var(--cor-nevoa);
  --fundo-escuro: var(--cor-petroleo);
  --fundo-escuro-profundo: var(--cor-petroleo-profundo);
  --borda: var(--cor-linha);
  --borda-forte: var(--cor-salvia);
  --borda-inversa: rgba(220, 235, 230, 0.28);

  /* --- Tipografia --------------------------------------------------------
     Sem fonte remota. STIX Two Text e Avenir Next são usadas quando existem
     no sistema; os fallbacks foram escolhidos por legibilidade em corpo
     grande, não por semelhança métrica. Ver README para auto-hospedar. */
  --fonte-display: "STIX Two Text", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    "Times New Roman", serif;
  --fonte-texto: "Avenir Next", Avenir, "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    Arial, sans-serif;
  --fonte-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;

  /* Escala fluida. Mínimos pensados para leitura em 320 px sem zoom. */
  /* Escala reduzida em 31/07/2026, por pedido do cliente: a anterior estava
   * acima do padrão de mercado e era o que fazia as seções não caberem na tela.
   * Medido numa janela de 1000 px de largura, o corpo saiu de 18,28 px para
   * 16,58 px e os tamanhos de display caíram entre 16% e 20%.
   *
   * `--texto-pequeno` NÃO foi reduzido, e isso é trava, não esquecimento: o
   * mínimo dele é 15 px, que é o piso de texto corrido da marca, e ele tem 41
   * usos. A checagem de tamanho mínimo da suíte reprova parágrafo abaixo disso.
   *
   * `--texto-micro` fica em 13 px e continua valendo só para rótulo utilitário
   * curto, nunca para texto corrido. */
  --texto-micro: 0.8125rem; /* 13px, apenas rótulos utilitários */
  --texto-pequeno: clamp(0.9375rem, 0.91rem + 0.14vw, 1rem);
  --texto-base: clamp(1rem, 0.98rem + 0.09vw, 1.0625rem);
  --texto-medio: clamp(1.0625rem, 1.03rem + 0.18vw, 1.1875rem);
  --texto-guia: clamp(1.125rem, 1.07rem + 0.27vw, 1.3125rem);
  --texto-h3: clamp(1.1875rem, 1.12rem + 0.36vw, 1.4375rem);
  --texto-h2: clamp(1.5625rem, 1.29rem + 1.34vw, 2.5rem);
  --texto-h1: clamp(1.875rem, 1.48rem + 1.96vw, 3.25rem);
  --texto-display: clamp(2.125rem, 1.66rem + 2.32vw, 3.75rem);

  --entrelinha-texto: 1.62;
  --entrelinha-guia: 1.5;
  --entrelinha-titulo: 1.08;
  --medida-leitura: 66ch;
  --medida-curta: 46ch;

  /* --- Espaço ------------------------------------------------------------ */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;
  --e8: 64px;
  --e9: 96px;
  /* Ritmo vertical de seção, com teto em altura de viewport.
   *
   * A escala respondia só a `vw`. Numa janela larga e baixa, que é o laptop
   * comum, `vw` dizia "tela grande, padding generoso" e entregava 114px de
   * padding em cada ponta de uma tela de 650px: 35% da altura visível gasta em
   * espaço em branco, medido em 31/07/2026. Largura é o eixo errado para decidir
   * ritmo vertical.
   *
   * O `min()` só morde quando a tela é baixa. Em 1080px de altura os valores
   * ficam idênticos aos de antes, então o desenho em tela alta não muda. */
  --secao-y: min(clamp(56px, 3.5rem + 3vw, 96px), 10vh);
  --secao-y-ampla: min(clamp(72px, 4rem + 5vw, 128px), 12vh);

  /* --- Layout ------------------------------------------------------------ */
  --largura-container: 1180px;
  --largura-estreita: 760px;
  --largura-media: 940px;
  --margem-lateral: clamp(20px, 5vw, 40px);
  --altura-cabecalho: 76px;

  /* --- Forma ------------------------------------------------------------- */
  --raio-pequeno: 10px;
  --raio-medio: 18px;
  --raio-grande: 28px;
  --raio-pilula: 999px;
  --sombra-superficie: 0 18px 48px rgba(24, 58, 69, 0.09);
  --sombra-decisao: 0 26px 70px rgba(24, 58, 69, 0.14);
  --foco-halo: 0 0 0 4px rgba(125, 153, 144, 0.55);

  /* --- Alvo de toque ------------------------------------------------------
     WCAG 2.2 pede 24 px. O padrão da marca é 48 px, para destreza reduzida. */
  --alvo-minimo: 48px;

  /* --- Movimento ---------------------------------------------------------
     Easing e duração vêm do motion-spec de Fita de Liquidez. */
  --tempo-rapido: 180ms;
  --tempo-medio: 420ms;
  --tempo-reveal: 1000ms;
  --easing-fita: cubic-bezier(0.18, 0.9, 0.22, 1);
  --easing-suave: cubic-bezier(0.22, 0.82, 0.25, 1);
}

@media (min-width: 1024px) {
  :root {
    --altura-cabecalho: 88px;
  }
}

/* ===== 02-base.css ===== */
/* ==========================================================================
   Base: reset curto, tipografia, acessibilidade e primitivas de layout
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--altura-cabecalho) + 24px);
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: var(--texto-base);
  line-height: var(--entrelinha-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

[hidden] {
  display: none !important;
}

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

svg {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* --- Tipografia ---------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
  text-wrap: balance;
}

h1,
h2 {
  font-family: var(--fonte-display);
  line-height: var(--entrelinha-titulo);
  letter-spacing: -0.015em;
}

h1 {
  font-size: var(--texto-h1);
}

h2 {
  font-size: var(--texto-h2);
}

h3 {
  font-size: var(--texto-h3);
  font-weight: 650;
  letter-spacing: -0.008em;
  line-height: 1.24;
}

h4 {
  font-size: var(--texto-medio);
  font-weight: 650;
}

p {
  margin: 0 0 var(--e4);
  max-width: var(--medida-leitura);
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

strong,
b {
  font-weight: 650;
}

em {
  font-style: italic;
}

a {
  color: var(--cor-teal-escuro);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

a:hover {
  color: var(--cor-petroleo);
}

ul,
ol {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

dl,
dt,
dd {
  margin: 0;
}

.mono {
  font-family: var(--fonte-mono);
  /* 0,9em porque monoespaçada parece maior que proporcional no mesmo corpo, e o
   * `max` porque `em` é relativo: quando a escala de tipo foi reduzida em
   * 31/07/2026, o CNPJ e o endereço do painel de dados caíram para 14,6 px e
   * furaram o piso de 15 px da marca. A checagem de tamanho mínimo pegou.
   *
   * Com o `max`, qualquer redução futura da base para de arrastar este valor
   * abaixo do piso. Onde um rótulo utilitário quer ser menor de propósito, como
   * `.formulario__contexto`, a própria regra dele define o tamanho e vence pela
   * ordem da cascata. */
  font-size: max(0.9em, 0.9375rem);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* Sobrancelha: rótulo utilitário curto, nunca linguagem emocional. */
.sobrancelha {
  margin: 0 0 var(--e4);
  color: var(--texto-suave);
  font-family: var(--fonte-mono);
  font-size: var(--texto-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sobrancelha--clara {
  color: var(--texto-inverso-suave);
}

/* Pendência de dado oficial: visível, jamais confundível com dado real. */
.dado-pendente {
  display: inline-block;
  padding: 1px 8px;
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio-pequeno);
  background: rgba(125, 153, 144, 0.1);
  color: var(--texto-suave);
  font-family: var(--fonte-mono);
  font-size: 0.82em;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.secao--escura .dado-pendente,
.rodape .dado-pendente {
  border-color: rgba(220, 235, 230, 0.4);
  background: rgba(220, 235, 230, 0.08);
  color: var(--texto-inverso-suave);
}

/* --- Acessibilidade ------------------------------------------------------ */

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

:focus-visible {
  outline: 2px solid var(--cor-petroleo-profundo);
  outline-offset: 3px;
  box-shadow: var(--foco-halo);
  border-radius: 4px;
}

.secao--escura :focus-visible,
.rodape :focus-visible,
.chamada-final :focus-visible {
  outline-color: var(--cor-branco-nevoa);
}

main:focus {
  outline: none;
}

.pular-link {
  position: fixed;
  z-index: 200;
  top: 12px;
  left: 12px;
  padding: 12px 18px;
  border-radius: var(--raio-pequeno);
  background: var(--cor-petroleo-profundo);
  color: var(--texto-inverso);
  font-weight: 650;
  text-decoration: none;
  transform: translateY(-220%);
  transition: transform var(--tempo-rapido) var(--easing-suave);
}

.pular-link:focus {
  transform: translateY(0);
}

/* --- Layout -------------------------------------------------------------- */

.container {
  width: min(100% - (var(--margem-lateral) * 2), var(--largura-container));
  margin-inline: auto;
}

.coluna-media {
  max-width: var(--largura-media);
}

/* Cada seção ocupa ao menos a tela visível, e cresce quando o conteúdo precisa.
 *
 * `min-height`, não `height`, e `svh`, não `vh` nem `dvh`. As três escolhas são
 * deliberadas:
 *
 *   `min-height` deixa a seção crescer. Com `height` fixo, conteúdo maior que a
 *   caixa é cortado, e cortar reprova em WCAG 1.4.10 Reflow, que exige o
 *   conteúdo legível a 320px de largura e 256px de altura equivalente. O gate de
 *   zoom 200% desta suíte pega isso;
 *
 *   `svh` é o viewport pequeno, medido com a barra do navegador visível, então a
 *   seção cabe no primeiro carregamento em celular. `dvh` muda de valor conforme
 *   a barra entra e sai, o que produz tremor durante a rolagem;
 *
 *   `align-content: center` faz a seção curta usar o espaço em vez de se
 *   grudar no topo com um vão morto embaixo.
 *
 * Nada de `scroll-snap-type: mandatory` aqui. Ele impede o teclado de rolar
 * parcialmente uma seção e quebra buscar-na-página, seleção de texto e os
 * critérios 1.4.4, 1.4.10 e 1.4.12. Se algum dia entrar snap, `proximity`. */
.secao {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 100svh;
  padding-block: var(--secao-y);
}

.secao--claro {
  background: var(--fundo);
}

.secao--superficie {
  background: var(--fundo-superficie);
}

.secao--nevoa {
  background: var(--fundo-nevoa);
}

.secao--escura {
  background: var(--fundo-escuro);
  color: var(--texto-inverso);
}

.secao--escura h1,
.secao--escura h2,
.secao--escura h3{
  color: var(--texto-inverso);
}

.secao--escura p{
  color: var(--texto-inverso-suave);
}

.secao--escura a{
  color: var(--cor-nevoa);
}

.secao--ampla {
  padding-block: var(--secao-y-ampla);
}

.titulo-secao {
  max-width: var(--medida-leitura);
  margin-bottom: var(--e7);
}

.titulo-secao__apoio {
  margin-top: var(--e4);
  color: var(--texto-suave);
  font-size: var(--texto-medio);
}

.secao--escura .titulo-secao__apoio{
  color: var(--texto-inverso-suave);
}

/* Utilitários de espaço. Usados no lugar de style inline nas páginas. */
.espaco-topo-5 {
  margin-top: var(--e5);
}

.espaco-topo-6 {
  margin-top: var(--e6);
}

.espaco-topo-7 {
  margin-top: var(--e7);
}

.espaco-base-5 {
  margin-bottom: var(--e5);
}
/* Fallback do GTM sem atributo style inline, compatível com a CSP. */
.gtm-noscript {
  display: none;
  visibility: hidden;
}

/* ===== 03-componentes.css ===== */
/* ==========================================================================
   Componentes
   ========================================================================== */

/* --- Cabeçalho ------------------------------------------------------------ */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 252, 251, 0.94);
  border-bottom: 1px solid transparent;
  transition: border-color var(--tempo-rapido) linear, box-shadow var(--tempo-rapido) linear;
}

@supports (backdrop-filter: blur(6px)) {
  .cabecalho {
    backdrop-filter: blur(8px);
  }
}

.cabecalho[data-fixado="true"] {
  border-bottom-color: var(--borda);
  box-shadow: 0 8px 26px rgba(24, 58, 69, 0.06);
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  min-height: var(--altura-cabecalho);
}

.cabecalho__marca {
  display: block;
  flex: none;
  padding: 6px 4px;
  border-radius: var(--raio-pequeno);
}

/* `overflow` de <svg> é `hidden` por padrão, e foi esse padrão que cortou a
 * ponta do "r" de "Valor" em toda página do site até 31/07/2026, descoberto num
 * print de celular. O gerador agora dimensiona o viewBox medindo a bbox do
 * desenho, mas paridade exata entre dois contextos de rasterização não existe: o
 * gerador mede a 1:1 e o cabeçalho renderiza a 150 px, e o hinting da fonte muda
 * a tinta em unidades fracionárias.
 *
 * Com `visible`, um resíduo de 13 unidades em 2600, que dá 0,75 px na tela, é
 * desenhado em vez de cortado. Marca com a ponta da letra cortada é defeito
 * visível; transbordo sub-pixel não é.
 *
 * A checagem de SVG em qa/verificar.mjs reprova quando um SVG que recorta tem
 * desenho maior que o viewBox. Confirmado que ela reprova: com `hidden` aqui,
 * ela acusa 12,7u à direita no cabeçalho e 1,8u no topo do rodapé. */
.logo {
  overflow: visible;
}

.logo--cabecalho {
  /* O mínimo é o que ainda cabe ao lado do botão de menu em 320 px. */
  width: clamp(150px, 34vw, 228px);
}

.cabecalho__nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--e4), 2vw, var(--e6));
}

.cabecalho__lista {
  display: flex;
  align-items: center;
  gap: clamp(var(--e3), 1.8vw, var(--e6));
}

.cabecalho__lista a {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-minimo);
  padding-inline: 2px;
  color: var(--texto);
  font-size: var(--texto-pequeno);
  font-weight: 600;
  text-decoration: none;
}

.cabecalho__lista a:hover {
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

/* Página atual: sublinhado curto no lugar de cor, para não depender de cor. */
.cabecalho__lista a[aria-current="page"] {
  box-shadow: inset 0 -2px 0 0 var(--cor-teal-escuro);
}

.cabecalho__botao-menu {
  display: none;
  flex: none;
  align-items: center;
  gap: 10px;
  min-height: var(--alvo-minimo);
  padding: 10px 16px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pilula);
  background: var(--fundo-superficie);
  color: var(--texto);
  font-size: var(--texto-pequeno);
  font-weight: 650;
  cursor: pointer;
}

/* O ícone do menu são três faixas da fita. Ao abrir, elas se dobram: a
   do meio recua, como a dobra do símbolo. */
.cabecalho__botao-traco {
  position: relative;
  width: 20px;
  height: 14px;
}

.cabecalho__botao-traco::before,
.cabecalho__botao-traco::after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--cor-petroleo);
  content: "";
  transition: transform var(--tempo-rapido) var(--easing-suave);
}

.cabecalho__botao-traco::before {
  top: 0;
}

.cabecalho__botao-traco::after {
  bottom: 0;
}

.cabecalho__botao-menu[aria-expanded="true"] .cabecalho__botao-traco::before {
  transform: translateY(5px) scaleX(0.62);
  transform-origin: left center;
}

.cabecalho__botao-menu[aria-expanded="true"] .cabecalho__botao-traco::after {
  transform: translateY(-5px) scaleX(0.62);
  transform-origin: right center;
}

@media (max-width: 899px) {
  .cabecalho__botao-menu {
    display: inline-flex;
  }

  .cabecalho__nav {
    position: absolute;
    z-index: 90;
    top: 100%;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--e2);
    padding: var(--e4) var(--margem-lateral) var(--e6);
    border-bottom: 1px solid var(--borda);
    background: var(--fundo-superficie);
    box-shadow: 0 24px 44px rgba(24, 58, 69, 0.12);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 180ms cubic-bezier(0.22, 0.82, 0.25, 1),
      transform 180ms cubic-bezier(0.22, 0.82, 0.25, 1),
      visibility 0s linear 180ms;
  }

  .cabecalho__nav[data-aberto="true"] {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .cabecalho__lista {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .cabecalho__lista a {
    min-height: 56px;
    padding-inline: var(--e2);
    border-bottom: 1px solid var(--borda);
    font-size: var(--texto-base);
  }

  .cabecalho__lista a[aria-current="page"] {
    box-shadow: inset 3px 0 0 0 var(--cor-teal-escuro);
  }

  .cabecalho__nav .botao {
    margin-top: var(--e3);
    justify-content: center;
  }
}

/* --- Botões --------------------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: var(--alvo-minimo);
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: var(--raio-pequeno);
  font-size: var(--texto-pequeno);
  font-weight: 700;
  letter-spacing: 0.005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--tempo-rapido) linear, border-color var(--tempo-rapido) linear,
    color var(--tempo-rapido) linear, transform var(--tempo-rapido) var(--easing-suave);
}

.botao:active {
  transform: translateY(1px);
}

.botao--principal {
  background: var(--cor-petroleo);
  color: var(--cor-branco-nevoa);
}

.botao--principal:hover {
  background: var(--cor-petroleo-profundo);
  color: var(--cor-branco-nevoa);
}

.botao--secundario {
  border-color: var(--cor-petroleo);
  background: transparent;
  color: var(--cor-petroleo);
}

.botao--secundario:hover {
  background: var(--fundo-nevoa);
  color: var(--cor-petroleo);
}

.botao--nevoa {
  background: var(--cor-branco-nevoa);
  color: var(--cor-petroleo);
}

.botao--nevoa:hover {
  background: var(--cor-nevoa);
  color: var(--cor-petroleo-profundo);
}

.botao--discreto {
  border-color: var(--borda);
  background: transparent;
  color: var(--texto-suave);
}

.botao--discreto:hover {
  border-color: var(--cor-teal-escuro);
  color: var(--cor-petroleo);
}

.botao--compacto {
  min-height: 44px;
  padding: 10px 20px;
  font-size: var(--texto-pequeno);
}

.botao--grande {
  min-height: 56px;
  padding: 16px 34px;
  font-size: var(--texto-medio);
}

.botao[aria-disabled="true"],
.botao:disabled {
  opacity: 0.62;
  cursor: progress;
}

.par-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-top: var(--e6);
}

@media (max-width: 480px) {
  .par-ctas .botao {
    width: 100%;
  }
}

.link-texto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--cor-teal-escuro);
  font-weight: 650;
}

.link-texto::after {
  content: "→";
  transition: transform var(--tempo-rapido) var(--easing-suave);
}

.link-texto:hover::after {
  transform: translateX(3px);
}

/* --- Compromissos --------------------------------------------------------- */

.compromissos {
  display: grid;
  gap: var(--e3);
  margin-top: var(--e6);
}

.compromissos li {
  position: relative;
  padding-left: 26px;
  color: var(--texto-suave);
  font-size: var(--texto-pequeno);
  line-height: 1.5;
}

/* Marcador: o vão da passagem em miniatura, não um ícone de banco. */
.compromissos li::before {
  position: absolute;
  top: 0.52em;
  left: 0;
  width: 13px;
  height: 3px;
  background: var(--cor-teal);
  content: "";
}

@media (min-width: 700px) {
  .compromissos--duas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e3) var(--e6);
  }
}

/* --- Limiar entre seções -------------------------------------------------
   O corte entre as seções continua reto. Sobre ele passa um trecho da
   fita, metade em cada seção. Sálvia é a única cor legível sobre claro e
   sobre petróleo, então a marca não muda de cor com a seção. */

.limiar {
  position: relative;
  z-index: 2;
  height: 0;
  pointer-events: none;
}

.limiar__marca {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 92px;
  height: 45px;
  transform: translate(-50%, -50%);
}

.limiar__fita,
.limiar__dobra {
  fill: var(--cor-salvia);
}

.limiar__dobra {
  opacity: 0.72;
}

.limiar__oficio {
  fill: none;
  stroke: var(--cor-salvia);
  stroke-width: 5;
}

@media (max-width: 600px) {
  .limiar__marca {
    width: 72px;
    height: 35px;
  }
}

/* --- Marca de ofício ------------------------------------------------------
   Documento em miniatura com canto dobrado. Aparece onde a página precisa
   dizer "isto é um documento" sem escrever a palavra. */

.marca-oficio {
  width: 42px;
  height: 49px;
}

.marca-oficio__folha {
  fill: var(--fundo-superficie);
  stroke: var(--cor-petroleo);
  stroke-width: 3.5;
  stroke-linejoin: round;
}

.marca-oficio__canto {
  fill: var(--cor-nevoa);
  stroke: var(--cor-petroleo);
  stroke-width: 3.5;
  stroke-linejoin: round;
}

.marca-oficio__linhas {
  fill: none;
  stroke: var(--cor-teal);
  stroke-width: 4;
  stroke-linecap: round;
}

.secao--escura .marca-oficio__folha {
  fill: rgba(220, 235, 230, 0.12);
  stroke: var(--cor-nevoa);
}

.secao--escura .marca-oficio__canto {
  fill: rgba(220, 235, 230, 0.3);
  stroke: var(--cor-nevoa);
}

.secao--escura .marca-oficio__linhas {
  stroke: var(--cor-salvia);
}

/* --- Processo ------------------------------------------------------------- */

.processo {
  display: grid;
  gap: var(--e6);
  counter-reset: etapa;
}

.processo__etapa {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e4) var(--e5);
  padding-bottom: var(--e6);
  border-bottom: 1px solid var(--borda);
}

.processo__etapa:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.secao--escura .processo__etapa{
  border-bottom-color: var(--borda-inversa);
}

/* O marcador da etapa é a passagem: duas hastes com um vão numerado. */
.processo__marcador {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  font-family: var(--fonte-mono);
  font-size: var(--texto-pequeno);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.processo__marcador::before,
.processo__marcador::after {
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 7px;
  background: var(--cor-petroleo);
  content: "";
}

.processo__marcador::before {
  left: 0;
}

.processo__marcador::after {
  right: 0;
}

.secao--escura .processo__marcador::before,
.secao--escura .processo__marcador::after{
  background: var(--cor-salvia);
}

.processo__resumo {
  margin-top: var(--e2);
  color: var(--texto-suave);
  font-size: var(--texto-medio);
}

.secao--escura .processo__resumo{
  color: var(--texto-inverso-suave);
}

.processo__trocas {
  display: grid;
  gap: var(--e3);
  margin-top: var(--e5);
}

.processo__trocas > div {
  display: grid;
  gap: 2px;
  padding-left: var(--e4);
  border-left: 2px solid var(--borda);
}

.secao--escura .processo__trocas > div{
  border-left-color: var(--borda-inversa);
}

.processo__trocas dt {
  color: var(--texto-suave);
  font-family: var(--fonte-mono);
  font-size: var(--texto-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.secao--escura .processo__trocas dt{
  color: var(--cor-nevoa);
}

.processo__trocas dd {
  font-size: var(--texto-pequeno);
  line-height: 1.55;
}

.processo__nao {
  border-left-color: var(--cor-teal) !important;
}

.processo__nao dt {
  color: var(--cor-teal-escuro);
}

.secao--escura .processo__nao dt{
  color: var(--cor-nevoa);
}

@media (min-width: 900px) {
  .processo__trocas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e5);
  }
}

/* --- Documento demonstrativo ---------------------------------------------- */

/* O bloco de proposta é um ofício: canto superior direito dobrado, como
   no símbolo. Sem sombra pesada, sem simulação de papel. */
.documento {
  position: relative;
  padding: clamp(var(--e5), 3vw, var(--e7));
  border: 1px solid var(--borda);
  border-radius: var(--raio-medio);
  background: var(--fundo-superficie);
  box-shadow: var(--sombra-superficie);
  clip-path: polygon(0 0, calc(100% - 46px) 0, 100% 46px, 100% 100%, 0 100%);
}

.documento::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 46px;
  height: 46px;
  background: var(--cor-nevoa);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  content: "";
}

.documento__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
  padding-bottom: var(--e4);
  border-bottom: 2px solid var(--cor-petroleo);
}

.documento__etiqueta {
  font-family: var(--fonte-display);
  font-size: var(--texto-h3);
  font-weight: 600;
}

.documento__nota {
  color: var(--texto-suave);
  font-size: var(--texto-micro);
  letter-spacing: 0.1em;
}

.documento__campos {
  margin-top: var(--e5);
}

.documento__campo {
  display: grid;
  gap: 4px var(--e5);
  padding-block: var(--e4);
  border-bottom: 1px solid var(--borda);
}

.documento__campo:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.documento__campo dt {
  font-weight: 650;
}

.documento__campo dd {
  display: grid;
  gap: 4px;
}

.documento__marcador {
  color: var(--cor-teal);
  font-size: var(--texto-pequeno);
  letter-spacing: 0.14em;
}

.documento__explicacao {
  color: var(--texto-suave);
  font-size: var(--texto-pequeno);
  line-height: 1.5;
}

.documento__campo--destaque {
  position: relative;
  padding-left: var(--e4);
  margin-left: calc(var(--e4) * -1);
  border-left: 3px solid var(--cor-petroleo);
}

.documento__rodape {
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px dashed var(--borda);
  color: var(--texto-suave);
  font-size: var(--texto-pequeno);
}

@media (min-width: 720px) {
  .documento__campo {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: baseline;
  }
}

/* --- Alerta de fraude ------------------------------------------------------ */

.alerta-fraude {
  padding: clamp(var(--e5), 3vw, var(--e6));
  border-left: 6px solid var(--cor-erro);
  border-radius: var(--raio-medio);
  background: var(--fundo-superficie);
}

.secao--escura .alerta-fraude{
  background: rgba(220, 235, 230, 0.07);
}

.alerta-fraude__rotulo {
  margin-bottom: var(--e2);
  color: var(--cor-erro);
  font-family: var(--fonte-mono);
  font-size: var(--texto-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.secao--escura .alerta-fraude__rotulo{
  color: #f0b8bf;
}

.alerta-fraude__titulo {
  max-width: 34ch;
  font-family: var(--fonte-display);
  font-size: var(--texto-h3);
  font-weight: 600;
  line-height: 1.2;
}

.alerta-fraude__apoio {
  margin-top: var(--e3);
  color: var(--texto-suave);
  font-size: var(--texto-pequeno);
}

.secao--escura .alerta-fraude__apoio{
  color: var(--texto-inverso-suave);
}

/* --- Checklist ------------------------------------------------------------- */

.checklist {
  display: grid;
  gap: var(--e5);
}

.checklist__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e4);
  padding: var(--e5);
  border: 1px solid var(--borda);
  border-radius: var(--raio-medio);
  background: var(--fundo-superficie);
}

.checklist__numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--raio-pilula);
  background: var(--cor-petroleo);
  color: var(--cor-branco-nevoa);
  font-family: var(--fonte-mono);
  font-size: var(--texto-pequeno);
  font-weight: 700;
}

.checklist__item h3 {
  font-size: var(--texto-medio);
}

.checklist__item p {
  margin-top: 6px;
  color: var(--texto-suave);
  font-size: var(--texto-pequeno);
}

.checklist__dado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  margin-top: var(--e3);
  padding-top: var(--e3);
  border-top: 1px dashed var(--borda);
}

.checklist__dado-rotulo {
  font-family: var(--fonte-mono);
  font-size: var(--texto-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* --- Perguntas ------------------------------------------------------------- */

.perguntas {
  border-top: 1px solid var(--borda);
}

.pergunta {
  border-bottom: 1px solid var(--borda);
}

.pergunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  min-height: 64px;
  padding-block: var(--e4);
  cursor: pointer;
  list-style: none;
}

.pergunta summary::-webkit-details-marker {
  display: none;
}

.pergunta__titulo {
  font-family: var(--fonte-texto);
  font-size: var(--texto-medio);
  font-weight: 650;
  letter-spacing: 0;
}

/* O sinal é a dobra da fita: fechada, um vinco; aberta, plana. */
.pergunta__sinal {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
}

.pergunta__sinal::before,
.pergunta__sinal::after {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 3px;
  border-radius: 2px;
  background: var(--cor-teal-escuro);
  content: "";
  transition: transform var(--tempo-medio) var(--easing-fita);
}

.pergunta__sinal::before {
  left: 0;
  transform: translateY(-50%) rotate(52deg);
  transform-origin: right center;
}

.pergunta__sinal::after {
  right: 0;
  transform: translateY(-50%) rotate(-52deg);
  transform-origin: left center;
}

.pergunta[open] .pergunta__sinal::before {
  transform: translateY(-50%) rotate(0deg);
}

.pergunta[open] .pergunta__sinal::after {
  transform: translateY(-50%) rotate(0deg);
}

.pergunta__corpo {
  max-width: var(--medida-leitura);
  padding-bottom: var(--e5);
  color: var(--texto-suave);
}

.pergunta__corpo p + p {
  margin-top: var(--e3);
}

.pergunta[open] .pergunta__corpo {
  animation: faq-resposta-entra 180ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes faq-resposta-entra {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.pergunta__link {
  margin-top: var(--e4);
}

/* --- Painel de dados oficiais ---------------------------------------------- */

.painel-dados {
  padding: clamp(var(--e5), 3vw, var(--e6));
  border: 1px solid var(--borda);
  border-radius: var(--raio-grande);
  background: var(--fundo-superficie);
}

.secao--escura .painel-dados{
  border-color: var(--borda-inversa);
  background: rgba(220, 235, 230, 0.06);
}

.painel-dados__intro {
  margin-top: var(--e3);
  color: var(--texto-suave);
  font-size: var(--texto-pequeno);
}

.painel-dados dl {
  display: grid;
  gap: var(--e3);
  margin-top: var(--e5);
}

.painel-dados dl > div {
  display: grid;
  gap: 4px;
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--borda);
}

.secao--escura .painel-dados dl > div{
  border-bottom-color: var(--borda-inversa);
}

.painel-dados dt {
  color: var(--texto-suave);
  font-family: var(--fonte-mono);
  font-size: var(--texto-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.secao--escura .painel-dados dt{
  color: var(--cor-nevoa);
}

.painel-dados__aviso {
  margin-top: var(--e5);
  color: var(--texto-suave);
  font-size: var(--texto-pequeno);
}

@media (min-width: 640px) {
  .painel-dados dl > div {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: baseline;
    gap: var(--e4);
  }
}

/* --- Chamada final --------------------------------------------------------- */

.chamada-final {
  padding-block: var(--secao-y-ampla);
  background: var(--fundo-escuro-profundo);
  color: var(--texto-inverso);
  text-align: center;
}

.chamada-final__interno {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chamada-final h2 {
  max-width: 20ch;
  color: var(--texto-inverso);
  font-size: var(--texto-h2);
}

.chamada-final__apoio {
  max-width: 52ch;
  margin-top: var(--e5);
  color: var(--texto-inverso-suave);
  font-size: var(--texto-medio);
}

.chamada-final .botao {
  margin-top: var(--e6);
}

.chamada-final__nota {
  margin-top: var(--e5);
  color: var(--cor-nevoa);
  font-family: var(--fonte-mono);
  font-size: var(--texto-pequeno);
  letter-spacing: 0.03em;
}

/* --- Rodapé ---------------------------------------------------------------- */

.rodape {
  padding-top: var(--secao-y);
  padding-bottom: var(--e7);
  background: var(--fundo-escuro);
  color: var(--texto-inverso-suave);
  font-size: var(--texto-pequeno);
}

.rodape__grade {
  display: grid;
  gap: var(--e7);
}

.logo--rodape {
  width: 232px;
  margin-bottom: var(--e5);
}

.rodape__marca p {
  max-width: 44ch;
}

.rodape__institucional {
  margin-top: var(--e3);
  color: var(--cor-nevoa);
  font-size: var(--texto-pequeno);
}

.rodape h2 {
  margin-bottom: var(--e4);
  color: var(--cor-branco-nevoa);
  font-family: var(--fonte-texto);
  font-size: var(--texto-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rodape ul {
  display: grid;
  gap: 2px;
}

.rodape li {
  padding-block: 2px;
}

.rodape a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--cor-nevoa);
}

.rodape__dados li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--e2);
  padding-block: 6px;
}

.rodape__rotulo {
  display: block;
  width: 100%;
  color: var(--cor-nevoa);
  font-family: var(--fonte-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rodape__alerta {
  margin-top: var(--e4);
  padding: var(--e3) var(--e4);
  border-left: 3px solid #e2919b;
  background: rgba(169, 45, 61, 0.16);
  color: var(--cor-branco-nevoa);
  font-size: var(--texto-pequeno);
  line-height: 1.5;
}

.rodape__base {
  margin-top: var(--secao-y);
  padding-top: var(--e5);
  border-top: 1px solid var(--borda-inversa);
  color: var(--cor-nevoa);
  font-size: var(--texto-pequeno);
}

.rodape__base p {
  max-width: 76ch;
}

.rodape__base p + p {
  margin-top: var(--e2);
}

.dado-pendente--exemplo {
  font-size: 12px;
}

@media (min-width: 700px) {
  .rodape__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .rodape__grade {
    grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 0.9fr)) minmax(0, 1.3fr);
    gap: var(--e6);
  }
}

/* Aprofundamento de etapa: só em /como-funciona. */
.processo__detalhe {
  margin-top: var(--e4);
  padding-left: var(--e4);
  border-left: 2px solid var(--borda);
  color: var(--texto-suave);
  font-size: var(--texto-pequeno);
}

.secao--escura .processo__detalhe {
  border-left-color: var(--borda-inversa);
  color: var(--texto-inverso-suave);
}

/* --- Fotografia editorial -------------------------------------------------
   Regra de forma: sempre plana, sem sombra pesada e sem moldura decorativa,
   igual às peças da fita. A imagem entra como superfície do sistema, não
   como card destacado.

   height: auto anula o atributo height do HTML depois que o CSS carrega.
   Os dois juntos são o par que evita salto: o atributo segura a caixa antes
   do arquivo chegar, o CSS deixa a altura seguir a largura real depois. */

.fotografia {
  margin: 0;
}

/* Densidade em janela larga e baixa, o laptop comum. Mesma condição usada em
 * 04-formulario.css, e escopada por `min-width` pelo mesmo motivo: media query de
 * altura desanda em celular, onde a barra do navegador muda a altura do viewport
 * durante a rolagem.
 *
 * Medido em 1000x650 em 31/07/2026: a seção do processo tinha 2,00 viewports com
 * as quatro etapas em coluna única, e a do hero 1,87 com a foto de 493 px
 * empilhada sob o texto. Reduzir tipografia resolveu parte; o resto era arranjo,
 * não corpo de letra. */
@media (min-width: 900px) and (max-height: 950px) {
  /* O processo continua em coluna única, e isso foi medido, não suposto.
   *
   * Duas colunas parecem a resposta óbvia para uma lista de quatro itens numa
   * tela baixa, e não são: em 444 px de largura cada etapa passou de ~235 px
   * para 393-447 px, porque o texto quebra muito mais. A lista inteira caiu de
   * 942 px para 864 px, 8%, em troca de uma medida de leitura pior. Não vale.
   *
   * O que dá ganho real aqui é apertar o ritmo vertical, sem estreitar a
   * medida. */
  .processo {
    gap: var(--e4);
  }

  .processo__etapa {
    padding-bottom: var(--e4);
  }

  /* Teto de altura na foto, com recorte pelo ponto de foco que o catálogo já
     publica em `--foto-foco`. Os atributos `width` e `height` do <img> não
     mudam, então a checagem de proporção declarada contra o arquivo continua
     valendo: ela compara atributo com arquivo, não com a caixa renderizada. */
  .fotografia img {
    max-height: 40svh;
    object-fit: cover;
    object-position: var(--foto-foco, 50% 50%);
  }
}

.fotografia img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--raio-medio);
  /* A foto compartilha a moldura de 1px das outras superfícies claras.
     Sálvia e linha nunca carregam texto, mas como traço estão corretas. */
  border: 1px solid var(--borda);
  background-color: var(--cor-nevoa);
}

/* Coluna de apoio de /analise, em coluna única.
   A foto entra entre as garantias e o formulário: é o último trecho antes
   de a pessoa começar a digitar nome e telefone.

   Acima de 1000px ela sai, e isso é decisão, não esquecimento. Ali a página
   vira duas colunas com o formulário à direita e a coluna de apoio fixa por
   position: sticky. Medido: a coluna vai de 695px para 1306px com a foto,
   contra viewport de 900px. O sticky para de segurar, e a coluna passa a ser
   mais alta que o formulário, então o vão morto só troca de lado. Formulário
   é o que essa página faz; foto não passa na frente dele. */
.fotografia--apoio {
  margin-top: var(--e7);
}

@media (min-width: 1000px) {
  .fotografia--apoio {
    display: none;
  }
}

/* A 01 é vertical 4:5. Em coluna única ela ocupa a largura inteira, e a
   proporção do arquivo daria 863px de altura em 768px de tela: uma foto
   maior que a viewport, empurrando o formulário para fora. Recortamos para
   4:3 pelo topo, onde estão os rostos e o documento. Vale em toda largura
   em que a foto aparece, porque acima de 1000px ela não aparece. */
.fotografia--apoio img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: var(--foto-foco, 50% 50%);
}

/* Faixa larga ao pé de uma seção, depois do texto que ela ilustra.
   Nunca antes: a foto acompanha o argumento, não o substitui. */
.fotografia--larga {
  margin-top: clamp(var(--e7), 5vw, var(--e9));
}

/* Recorte por faixa de tela, sempre com object-fit: cover e o foco que a
   própria imagem declara em --foto-foco.

   Em tela estreita o arquivo 3:2 vira uma tira baixa demais para a cena ser
   lida: abrimos para 4:3. Em tela larga acontece o contrário: 3:2 na largura
   cheia do container dá 787px de altura contra uma viewport de 900px, e a
   foto vira parede em vez de ilustrar o texto acima dela. Fechamos para 2:1,
   que é onde a cena continua legível sem tomar a tela. */
.fotografia--larga img {
  object-fit: cover;
  object-position: var(--foto-foco, 50% 50%);
}

@media (max-width: 699px) {
  .fotografia--larga img {
    aspect-ratio: 4 / 3;
  }
}

@media (min-width: 700px) {
  .fotografia--larga img {
    aspect-ratio: 2 / 1;
  }
}

/* --- Botão flutuante de WhatsApp -----------------------------------------
 *
 * Fixo no canto inferior direito de toda página, decidido pelo dono da operação
 * em 03/08/2026. O desenho e as ressalvas estão em
 * docs/superpowers/specs/2026-08-03-whatsapp-flutuante-design.md.
 *
 * Cor da marca, não a verde do WhatsApp: o site é petróleo e teal em toda peça, e
 * um botão verde de terceiro seria o único elemento fora do sistema, numa página
 * cujo assunto é justamente "confira se este contato é nosso".
 *
 * z-index abaixo do 90 do menu móvel de propósito. Hoje eles não se cruzam,
 * porque o painel do menu é dropdown sob o cabeçalho e não sobreposição de tela
 * cheia, mas se um dia virar overlay, o menu tem que ganhar.
 */
.wa-flutuante {
  position: fixed;
  right: clamp(var(--e3), 3vw, var(--e5));
  bottom: clamp(var(--e3), 3vw, var(--e5));
  z-index: 80;
  /* Empilhado, com a etiqueta ACIMA do botão. Foi pedido assim em 04/08/2026, e
     tem consequência medida: o retângulo fixo cresce para cima, então ele passa a
     poder cobrir conteúdo que antes estava livre. A checagem 22 compara contra
     todo elemento interativo por causa disso, e não só contra o avançar. */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--e2);
  /* Não intercepta clique fora do próprio botão e da própria etiqueta: um
     contêiner fixo com área maior que os filhos engole toque de quem só quis
     tocar no conteúdo atrás dele. */
  pointer-events: none;
}

.wa-flutuante[hidden] {
  display: none;
}

.wa-flutuante > * {
  pointer-events: auto;
}

.wa-flutuante__botao {
  /* 56 px, acima do alvo de 48 px que é o padrão da marca e do dobro dos 24 px
     do WCAG 2.2. A checagem de alvo de toque mede o que a pessoa aciona. */
  display: grid;
  place-items: center;
  /* Acima do mínimo da marca de propósito: é o alvo mais isolado da página. */
  width: 56px;
  height: 56px;
  border-radius: var(--raio-pilula);
  background: var(--cor-petroleo);
  color: var(--texto-inverso);
  box-shadow: 0 6px 20px rgba(16, 46, 54, 0.28);
  transition: background-color var(--tempo-rapido) var(--easing-suave);
}

.wa-flutuante__botao:hover,
.wa-flutuante__botao:focus-visible {
  background: var(--cor-petroleo-profundo);
}

.wa-flutuante__botao:focus-visible {
  outline-color: var(--cor-petroleo-profundo);
}

.wa-flutuante__icone {
  width: 26px;
  height: 26px;
}

/* A etiqueta que aparece sozinha uma vez por sessão. Ela é aviso, não CTA: quem
   decide abrir a conversa é o botão ao lado. */
.wa-flutuante__etiqueta {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  max-width: min(19rem, calc(100vw - 96px));
  margin: 0;
  padding: var(--e3) var(--e3) var(--e3) var(--e4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-medio);
  background: var(--fundo-superficie);
  color: var(--texto);
  font-size: var(--texto-pequeno);
  line-height: 1.45;
  box-shadow: 0 4px 16px rgba(16, 46, 54, 0.16);
}

.wa-flutuante__etiqueta[hidden] {
  display: none;
}

/*
 * Dois estados no mesmo elemento.
 *
 * `completo` é a frase inteira, que aparece uma vez. `minimo` é a versão curta,
 * que fica. Encolher em vez de sumir foi pedido em 04/08/2026: o botão sozinho
 * não diz para onde leva, e o glifo do WhatsApp resolve isso só para quem já o
 * reconhece.
 *
 * A troca é de conteúdo, não de posição: os dois textos ocupam o mesmo lugar, e a
 * caixa encolhe em volta. Animar a altura de uma caixa fixa que tem conteúdo
 * interativo por baixo empurraria alvo de toque durante a animação.
 */
.wa-flutuante__etiqueta[data-estado='completo'] [data-wa-texto-minimo],
.wa-flutuante__etiqueta[data-estado='minimo'] [data-wa-texto-completo] {
  display: none;
}

.wa-flutuante__etiqueta[data-estado='minimo'] {
  padding: var(--e2) var(--e2) var(--e2) var(--e3);
  border-radius: var(--raio-pilula);
  font-weight: 600;
}

/* No estado curto o fechar encolhe: ele deixa de ser o alvo principal e vira
   descarte de uma etiqueta que já é discreta. Continua nos 48 px da marca por
   causa da margem negativa, que recolhe o espaço visual sem encolher a caixa. */
.wa-flutuante__etiqueta[data-estado='minimo'] .wa-flutuante__fechar svg {
  width: 14px;
  height: 14px;
}

.wa-flutuante__fechar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  /* O alvo é o mínimo da marca, e a margem negativa recolhe o espaço visual sem
     encolher o retângulo: a checagem de alvo mede o que a pessoa aciona. */
  width: var(--alvo-minimo);
  height: var(--alvo-minimo);
  margin: -8px -8px -8px 0;
  border: 0;
  border-radius: var(--raio-pequeno);
  background: transparent;
  color: var(--texto-suave);
  cursor: pointer;
}

.wa-flutuante__fechar svg {
  width: 18px;
  height: 18px;
}

/* Entrada da etiqueta. O botão nunca anima: ele está lá desde o primeiro paint,
   porque é HTML servido pelo servidor e não depende de JavaScript. */
@media (prefers-reduced-motion: no-preference) {
  .wa-flutuante__etiqueta[data-entrando] {
    animation: wa-etiqueta-entra var(--tempo-medio) var(--easing-suave) both;
  }

  @keyframes wa-etiqueta-entra {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* Tela estreita: a etiqueta não pode empurrar o botão fora da viewport nem criar
   rolagem horizontal, que é checagem da suíte de 320 px a 1440 px. */
@media (max-width: 30rem) {
  .wa-flutuante {
    max-width: calc(100vw - 2 * var(--e3));
  }

  .wa-flutuante__etiqueta {
    font-size: var(--texto-pequeno);
  }
}

/*
 * No formulário, o botão troca de canto, e isso foi medido, não escolhido.
 *
 * Em 1000x650, que é o laptop comum, o flutuante ocupa o retângulo
 * top 570, right 976, bottom 626, left 920. O botão de avançar de `/analise` cai
 * dentro desse retângulo em 5 das 6 etapas, e a checagem de altura NÃO pega isso:
 * ela mede a distância até a dobra, e um elemento por cima não muda distância
 * nenhuma. Um botão coberto é um formulário sem saída, do mesmo jeito que um
 * botão abaixo da dobra.
 *
 * Trocar de canto foi preferido a reservar espaço no formulário: reservar
 * empurraria o avançar para baixo, e a etapa já é medida contra 650 px de altura.
 * O custo de altura é zero aqui.
 */
/*
 * `/analise` é a única rota onde o botão não cabe em canto nenhum sem conta, e as
 * duas medidas estão em 1000x650, que é o laptop comum:
 *
 *   canto direito    cobre o botão de avançar em 5 das 6 etapas
 *   canto esquerdo   cobre o link "Como verificar se o contato é da Vira Valor",
 *                    que aponta para /seguranca
 *
 * O segundo é pior que o primeiro. Um botão de WhatsApp tapando o link antifraude,
 * numa página que promete que a empresa pode ser verificada, é a contradição mais
 * cara que este site conseguiria publicar.
 *
 * Então: esquerda, acima do link. À direita não existe altura livre, porque o
 * cartão do formulário ocupa a coluna inteira e tudo dentro dele é acionável.
 */
[data-rota='/analise/'] .wa-flutuante {
  right: auto;
  left: clamp(var(--e3), 3vw, var(--e5));
  bottom: calc(var(--e9) + var(--e2));
  align-items: flex-start;
}
.fotografia--proposta-clara,
.fotografia--comparacao-humana {
  --foto-foco: 50% 50%;
}

.fotografia--proposta-por-escrito {
  --foto-foco: 50% 70%;
}

.fotografia--decisao-acompanhada {
  --foto-foco: 50% 45%;
}

/* ===== 04-formulario.css ===== */
/* ==========================================================================
   Formulário de análise
   Alvos generosos, rótulos sempre visíveis, erro específico junto do campo.
   ========================================================================== */

.formulario {
  padding: clamp(var(--e5), 3.2vw, var(--e7));
  border: 1px solid var(--borda);
  border-radius: var(--raio-grande);
  background: var(--fundo-superficie);
  box-shadow: var(--sombra-decisao);
}

.formulario__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e3);
}

.formulario__contexto {
  margin: 0;
  color: var(--texto-suave);
  font-size: var(--texto-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.formulario__etapa {
  margin: 4px 0 0;
  font-family: var(--fonte-display);
  font-size: var(--texto-h3);
  font-weight: 600;
}

.formulario__duracao {
  margin: 0;
  padding: 5px 12px;
  border-radius: var(--raio-pilula);
  background: var(--fundo-nevoa);
  color: var(--texto-suave);
  font-size: var(--texto-micro);
}

/* --- Progresso -----------------------------------------------------------
   Quatro segmentos separados por vãos: o próprio espaço negativo da marca
   marca a divisão das etapas. O preenchimento cresce da esquerda para a
   direita. A informação está no texto "Etapa X de 4"; a barra reforça. */

.progresso {
  margin-top: var(--e5);
}

.progresso__trilha {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 10px;
}

.progresso__segmento {
  position: relative;
  height: 8px;
  border-radius: 2px;
  background: var(--fundo-nevoa);
  overflow: hidden;
}

.progresso__segmento::before {
  position: absolute;
  inset: 0;
  background: var(--cor-petroleo);
  content: "";
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--tempo-medio) var(--easing-fita);
}

.progresso__segmento[data-estado="concluido"]::before {
  transform: scaleX(1);
}

.progresso__segmento[data-estado="atual"]::before {
  transform: scaleX(0.42);
}

/* --- Etapas ---------------------------------------------------------------- */

.etapa {
  min-inline-size: 0;
  padding: 0;
  border: 0;
  margin: var(--e6) 0 0;
}

.etapa__legenda {
  padding: 0;
  font-family: var(--fonte-display);
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  font-weight: 600;
  line-height: 1.18;
}

.etapa__ajuda {
  margin-top: var(--e3);
  color: var(--texto-suave);
  font-size: var(--texto-pequeno);
}

.etapa__nota {
  margin-top: var(--e5);
  padding: var(--e4);
  border-radius: var(--raio-pequeno);
  background: var(--fundo-nevoa);
  color: var(--texto-suave);
  font-size: var(--texto-pequeno);
}

.etapa__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-top: var(--e6);
}

.etapa__acoes .botao--principal {
  flex: 1 1 220px;
}

/* --- Escolhas -------------------------------------------------------------- */

.escolhas {
  display: grid;
  gap: var(--e3);
  margin-top: var(--e5);
}

.escolhas--duas {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}

.escolha {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--e4);
  min-height: 64px;
  padding: var(--e4) var(--e5);
  border: 1px solid var(--borda);
  border-radius: var(--raio-medio);
  background: var(--fundo-superficie);
  cursor: pointer;
  transition: border-color var(--tempo-rapido) linear, background-color var(--tempo-rapido) linear;
}

.escolha:hover {
  border-color: var(--cor-teal);
  background: var(--cor-branco-nevoa);
}

.escolha input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* A marca de seleção é a fita dobrando para dentro do círculo. */
.escolha__marca {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border: 2px solid var(--borda-forte);
  border-radius: 50%;
  background: var(--fundo-superficie);
  transition: border-color var(--tempo-rapido) linear;
}

.escolha__marca::before,
.escolha__marca::after {
  position: absolute;
  top: 4px;
  width: 5px;
  height: 12px;
  background: var(--cor-petroleo);
  content: "";
  opacity: 0;
  transition: transform var(--tempo-medio) var(--easing-fita), opacity var(--tempo-rapido) linear;
}

.escolha__marca::before {
  left: 5px;
  transform: translateY(-8px) skewX(16deg);
}

.escolha__marca::after {
  right: 5px;
  height: 8px;
  background: var(--cor-teal);
  transform: translateY(-8px) skewX(-16deg);
}

.escolha input:checked ~ .escolha__marca::before {
  transform: translateY(0) skewX(16deg);
}

.escolha input:checked ~ .escolha__marca::after {
  transform: translateY(4px) skewX(-16deg);
}

.escolha input:checked ~ .escolha__marca {
  border-color: var(--cor-petroleo);
}

.escolha input:checked ~ .escolha__marca::before,
.escolha input:checked ~ .escolha__marca::after {
  opacity: 1;
}

.escolha input:focus-visible ~ .escolha__marca {
  outline: 2px solid var(--cor-petroleo-profundo);
  outline-offset: 3px;
  box-shadow: var(--foco-halo);
}

.escolha:has(input:checked) {
  border-color: var(--cor-petroleo);
  background: var(--cor-branco-nevoa);
  box-shadow: inset 3px 0 0 0 var(--cor-petroleo);
}

.escolha__texto {
  display: grid;
  gap: 3px;
}

.escolha__titulo {
  font-size: var(--texto-base);
  font-weight: 650;
}

.escolha__detalhe {
  color: var(--texto-suave);
  font-size: var(--texto-pequeno);
  line-height: 1.45;
}

/* --- Campos ---------------------------------------------------------------- */

.campo {
  margin-top: var(--e5);
}

.campo--grupo {
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

/* Rótulo de campo simples.
 *
 * Era `.campo label`, e o seletor descendente do invólucro (0,1,1) vencia a
 * classe de todo componente que também usa <label> (0,1,0). Consequência
 * medida em produção em 31/07/2026: `.opcao-linha` perdia `display: inline-flex`
 * e `padding: 10px 20px`, então o texto ficava a 1px da borda de uma pílula com
 * raio de 999px e aparecia cortado; e `.consentimento` perdia `display: grid`,
 * o que desligava a blockificação de `.consentimento__marca`, que voltava a ser
 * inline e renderizava 4px de largura em vez de 28. A caixa de consentimento
 * ficou invisível na tela.
 *
 * Agora o rótulo simples se declara, em vez de ser inferido pela vizinhança.
 * Nada de seletor descendente aqui: <label> é usado por três componentes
 * diferentes dentro de .campo, e cada um traz a própria caixa. */
.campo__rotulo,
.campo legend {
  display: block;
  padding: 0;
  margin-bottom: var(--e2);
  font-size: var(--texto-base);
  font-weight: 650;
}

.campo__opcional {
  margin-left: 6px;
  color: var(--texto-suave);
  font-family: var(--fonte-mono);
  font-size: var(--texto-micro);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.campo__dica {
  margin-bottom: var(--e2);
  color: var(--texto-suave);
  font-size: var(--texto-pequeno);
}

.campo input[type="text"],
.campo input[type="tel"],
.campo input[type="email"],
.campo select {
  width: 100%;
  min-height: 56px;
  padding: 13px 16px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  background: var(--fundo-superficie);
  font-size: var(--texto-base);
}

.campo select {
  color: var(--texto-principal);
  cursor: pointer;
}

.campo input::placeholder {
  color: #8fa7a1;
}

.campo input[aria-invalid="true"] {
  border-color: var(--cor-erro);
  border-width: 2px;
  background: #fdf6f7;
}

.campo select[aria-invalid="true"] {
  border-color: var(--cor-erro);
  border-width: 2px;
  background-color: #fdf6f7;
}

.campo__erro {
  display: none;
  max-width: none;
  margin: var(--e2) 0 0;
  color: var(--cor-erro);
  font-size: var(--texto-pequeno);
  font-weight: 600;
}

.campo__erro:not(:empty) {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.campo__erro:not(:empty)::before {
  flex: none;
  width: 4px;
  height: 1.3em;
  border-radius: 2px;
  background: var(--cor-erro);
  content: "";
}

.opcoes-linha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e2);
}

.opcao-linha {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-minimo);
  padding: 10px 20px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pilula);
  background: var(--fundo-superficie);
  cursor: pointer;
  font-size: var(--texto-pequeno);
  font-weight: 600;
}

.opcao-linha input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.opcao-linha:has(input:checked) {
  border-color: var(--cor-petroleo);
  background: var(--cor-petroleo);
  color: var(--cor-branco-nevoa);
}

.opcao-linha:has(input:focus-visible) {
  outline: 2px solid var(--cor-petroleo-profundo);
  outline-offset: 3px;
  box-shadow: var(--foco-halo);
}

/* --- Densidade em janela larga e baixa ------------------------------------- */

/* O laptop comum é largo e baixo, e é o pior caso de um ritmo vertical calculado
 * a partir de largura. Medido em 1000x650 em 31/07/2026: o botão de avançar da
 * etapa 1 caía 198px abaixo da dobra, e a pessoa via um formulário sem saída.
 *
 * Escopado por `min-width` de propósito. Media query de altura desanda em
 * celular, onde a barra do navegador entra e sai e muda a altura do viewport
 * durante a rolagem, o que faria o layout pular. Em tela estreita o ritmo normal
 * continua valendo, e em tela alta esta regra nem se aplica.
 *
 * Nenhum alvo de toque desce abaixo dos 48px da marca: `.escolha` para em 52 e
 * `.opcao-linha` não é tocada. A checagem de alvo de toque guarda isso. */
@media (min-width: 900px) and (max-height: 950px) {
  :root {
    --secao-y: var(--e4);
    --secao-y-ampla: var(--e4);
  }

  .formulario {
    padding: var(--e3);
  }

  /* Colapsa o topo do cartão de duas linhas para uma. Nada é escondido: o
     contexto, o indicador de etapa e a duração continuam legíveis, lado a lado
     em vez de empilhados. Esconder qualquer um deles seria perda de informação,
     que é o que WCAG 1.4.10 proíbe. */
  .formulario__topo {
    gap: var(--e2) var(--e4);
    align-items: baseline;
  }

  .formulario__topo > div {
    display: flex;
    align-items: baseline;
    gap: var(--e3);
  }

  .etapa {
    margin-top: var(--e3);
  }

  .etapa__ajuda {
    margin-top: var(--e1);
  }

  .etapa__acoes {
    margin-top: var(--e3);
  }

  .escolhas {
    gap: var(--e1);
  }

  .escolha {
    min-height: 48px;
    padding: var(--e3) var(--e4);
  }

  .campo--consentimento {
    padding-top: var(--e4);
  }

  /* O campo é a unidade que mais se repete, então cada pixel aqui multiplica.
     O input para em 50px, acima do alvo mínimo de 48 da marca, e `.opcao-linha`
     não é tocada: ela usa --alvo-minimo e é onde o piso realmente vale. */
  /* O vão entre campos se repete três vezes no subpasso de preferência, então
     ele é o maior custo por unidade que sobrou. */
  .campo {
    margin-top: var(--e3);
  }

  .campo__rotulo,
  .campo--grupo legend {
    margin-bottom: var(--e1);
  }

  .campo input {
    min-height: 50px;
    padding-block: 10px;
  }

  .campo__dica {
    margin-bottom: var(--e1);
  }

  .opcoes-linha {
    margin-top: var(--e1);
  }
}

/* --- Consentimento --------------------------------------------------------- */

.campo--consentimento {
  padding-top: var(--e5);
  border-top: 1px solid var(--borda);
}

.consentimento {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e4);
  align-items: start;
  margin: 0;
  font-size: var(--texto-pequeno);
  font-weight: 400;
  line-height: 1.55;
  cursor: pointer;
}

.consentimento input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.consentimento__marca {
  position: relative;
  /* Explícito de propósito. `width` e `height` não se aplicam a inline não
     substituído, e este é um <span>. A caixa existia só porque o pai era grid
     e blockificava o filho: no dia em que o pai perdeu o `grid` numa disputa de
     cascata, a caixa virou 4px e ninguém viu. A marca não depende mais do modo
     de layout do pai para ter tamanho. */
  display: block;
  width: 28px;
  height: 28px;
  border: 2px solid var(--borda-forte);
  border-radius: 6px;
  background: var(--fundo-superficie);
}

.consentimento__marca::before,
.consentimento__marca::after {
  position: absolute;
  top: 5px;
  width: 5px;
  height: 14px;
  background: var(--cor-petroleo);
  content: "";
  opacity: 0;
  transition: transform var(--tempo-medio) var(--easing-fita), opacity var(--tempo-rapido) linear;
}

.consentimento__marca::before {
  left: 5px;
  transform: translateY(-9px) skewX(16deg);
}

.consentimento__marca::after {
  right: 5px;
  height: 9px;
  background: var(--cor-teal);
  transform: translateY(-9px) skewX(-16deg);
}

.consentimento input:checked ~ .consentimento__marca {
  border-color: var(--cor-petroleo);
}

.consentimento input:checked ~ .consentimento__marca {
  background: var(--cor-branco-nevoa);
}

.consentimento input:checked ~ .consentimento__marca::before {
  opacity: 1;
  transform: translateY(0) skewX(16deg);
}

.consentimento input:checked ~ .consentimento__marca::after {
  opacity: 1;
  transform: translateY(5px) skewX(-16deg);
}

.consentimento input:focus-visible ~ .consentimento__marca {
  outline: 2px solid var(--cor-petroleo-profundo);
  outline-offset: 3px;
  box-shadow: var(--foco-halo);
}

/* Honeypot: fora da tela, invisível para pessoas e para leitores de tela. */
.antispam {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Revisão --------------------------------------------------------------- */

.revisao {
  display: grid;
  gap: var(--e3);
  margin-top: var(--e5);
}

.revisao > div {
  display: grid;
  gap: 2px;
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--borda);
}

.revisao dt {
  color: var(--texto-suave);
  font-family: var(--fonte-mono);
  font-size: var(--texto-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.revisao dd {
  font-size: var(--texto-base);
  font-weight: 600;
}

@media (min-width: 560px) {
  .revisao > div {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    align-items: baseline;
    gap: var(--e4);
  }
}

/* --- Estados --------------------------------------------------------------- */

.formulario__aviso {
  display: none;
  max-width: none;
  margin: var(--e5) 0 0;
  padding: var(--e4);
  border-left: 4px solid var(--cor-erro);
  border-radius: var(--raio-pequeno);
  background: #fdf6f7;
  color: var(--cor-erro);
  font-size: var(--texto-pequeno);
  font-weight: 600;
}

.formulario__aviso:not(:empty) {
  display: block;
}

.formulario__estado {
  margin-top: var(--e6);
  padding: var(--e5);
  border-radius: var(--raio-medio);
  background: var(--fundo-nevoa);
}

.formulario__estado--erro {
  border-left: 4px solid var(--cor-erro);
  background: #fdf6f7;
}

.formulario__estado h2,
.formulario__estado h3 {
  margin-bottom: var(--e2);
}

.botao__carregando {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar 720ms linear infinite;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

.formulario__demonstracao {
  max-width: none;
  margin-top: var(--e6);
  padding: var(--e4);
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio-pequeno);
  background: rgba(125, 153, 144, 0.09);
  color: var(--texto-suave);
  font-size: var(--texto-pequeno);
}

.campo--arquivo-oficio {
  margin-block: var(--e5);
  padding: var(--e4);
  border: 1px dashed var(--cor-linha);
  border-radius: var(--raio-medio);
  background: var(--cor-nevoa);
}

.campo--arquivo-oficio input[type='file'] {
  width: 100%;
  margin-top: var(--e3);
  padding: var(--e3);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-pequeno);
  background: var(--fundo-superficie);
  color: var(--cor-petroleo);
}

.campo--arquivo-oficio input[type='file']:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--cor-teal) 30%, transparent);
  outline-offset: 2px;
}

.campo__arquivo-status {
  margin: var(--e2) 0 0;
  color: var(--texto-suave);
  font-size: var(--texto-pequeno);
}

.campo__arquivo-status:empty {
  display: none;
}

/* Sem JavaScript o formulário continua legível: todas as etapas visíveis. */
.formulario:not([data-interativo="true"]) .progresso,
.formulario:not([data-interativo="true"]) .formulario__etapa,
.formulario:not([data-interativo="true"]) [data-voltar],
.formulario:not([data-interativo="true"]) [data-continuar],
.formulario:not([data-interativo="true"]) [data-etapa="revisao"] {
  display: none;
}

.formulario:not([data-interativo="true"]) .etapa[hidden] {
  display: block !important;
}

.formulario:not([data-interativo="true"])::after {
  display: block;
  margin-top: var(--e6);
  color: var(--texto-suave);
  font-size: var(--texto-pequeno);
  content: "Este formulário precisa de JavaScript para o envio. Se preferir, use os canais oficiais publicados no rodapé.";
}

/* --- Jornada expressa ----------------------------------------------------- */

.formulario--expresso .formulario__perguntas {
  display: grid;
  gap: var(--e5);
  margin-top: var(--e4);
}

.formulario--expresso .campo--grupo-expresso {
  margin-top: 0;
}

.formulario--expresso .campo--grupo-expresso .campo__rotulo,
.formulario--expresso .campo--grupo-expresso .campo__dica {
  margin-bottom: var(--e1);
}

.formulario--expresso .campo--grupo-expresso select {
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  background: var(--fundo-superficie);
  font-size: var(--texto-base);
}

.formulario--expresso .campo--grupo-expresso .escolhas {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: var(--e2);
  margin-top: var(--e3);
}

.formulario--expresso .escolha--compacta {
  min-height: 58px;
  gap: var(--e3);
  padding: var(--e3);
}

.formulario--expresso .escolha--compacta .escolha__titulo {
  font-size: var(--texto-pequeno);
}

.formulario--expresso .escolha--compacta .escolha__detalhe {
  font-size: var(--texto-micro);
}

.formulario--expresso .etapa__acoes--direita {
  justify-content: flex-end;
}

.formulario--expresso .etapa__acoes--direita .botao--principal {
  flex: 0 1 260px;
}

.formulario__contato-expresso {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e4);
}

.formulario--expresso .campo--arquivo-oficio {
  margin-block: var(--e4);
}

.formulario--expresso .campo--consentimento {
  padding-top: var(--e4);
}

.formulario--expresso .etapa__nota {
  margin-top: var(--e4);
  padding: var(--e3) var(--e4);
}

@media (max-width: 620px) {
  .formulario__contato-expresso {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .formulario--expresso .campo--grupo-expresso .escolhas {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 900px) and (max-height: 950px) {
  .formulario--expresso .formulario__perguntas {
    gap: var(--e3);
    margin-top: var(--e2);
  }

  .formulario--expresso .campo--arquivo-oficio {
    margin-block: var(--e3);
    padding: var(--e3);
  }

  .formulario--expresso .campo--arquivo-oficio input[type='file'] {
    margin-top: var(--e2);
    padding: var(--e2);
  }

  .formulario--expresso .consentimento {
    line-height: 1.4;
  }
}

/* ===== 05-paginas.css ===== */
/* ==========================================================================
   Páginas
   ========================================================================== */

/* --- Hero ------------------------------------------------------------------ */

.hero {
  overflow: hidden;
  padding-top: clamp(40px, 4.5vw, 72px);
  padding-bottom: clamp(48px, 5vw, 80px);
  background: var(--fundo);
}

.hero__grade {
  display: grid;
  gap: clamp(var(--e7), 5vw, var(--e9));
  align-items: center;
}

.hero h1 {
  font-size: var(--texto-display);
  max-width: 13ch;
}

/* Uma única palavra em itálico serifado marca a virada da frase. */
.hero h1 em {
  color: var(--cor-teal-escuro);
  font-style: italic;
}

.hero__guia {
  margin-top: var(--e5);
  max-width: 50ch;
  color: var(--texto-suave);
  font-size: var(--texto-guia);
  line-height: var(--entrelinha-guia);
}

.hero__texto .par-ctas {
  margin-top: var(--e6);
}

.hero__nota {
  max-width: 58ch;
  margin-top: var(--e5);
  padding-left: var(--e4);
  border-left: 3px solid var(--cor-teal);
  color: var(--texto-suave);
  font-size: var(--texto-pequeno);
  line-height: 1.5;
}

.hero__visual {
  position: relative;
  width: min(100%, 520px);
  justify-self: center;
  padding: 0 clamp(12px, 2vw, 24px) clamp(24px, 3vw, 40px) 0;
}

.hero__visual::before {
  position: absolute;
  z-index: 0;
  top: clamp(20px, 4vw, 46px);
  right: 0;
  bottom: 0;
  left: clamp(24px, 4vw, 52px);
  border-radius: var(--raio-grande) 0 var(--raio-grande) var(--raio-grande);
  background: var(--cor-nevoa);
  content: "";
}

.fotografia--hero {
  position: relative;
  z-index: 1;
  margin: 0;
}

.fotografia--hero img {
  max-height: none;
  aspect-ratio: 4 / 5;
  border-radius: var(--raio-grande) var(--raio-grande) 0 var(--raio-grande);
  box-shadow: var(--sombra-decisao);
  object-fit: cover;
  object-position: var(--foto-foco);
}

.hero__cartao {
  position: absolute;
  z-index: 2;
  right: clamp(0px, 1.5vw, 18px);
  bottom: clamp(0px, 1.5vw, 18px);
  display: grid;
  gap: var(--e2);
  width: min(78%, 310px);
  padding: clamp(var(--e4), 2.4vw, var(--e5));
  border-left: 5px solid var(--cor-teal);
  background: var(--cor-petroleo);
  box-shadow: var(--sombra-superficie);
  color: var(--texto-inverso);
}

.hero__cartao-rotulo {
  color: var(--texto-inverso-suave);
  font-family: var(--fonte-mono);
  font-size: var(--texto-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero__cartao strong {
  font-family: var(--fonte-display);
  font-size: var(--texto-h3);
  font-weight: 600;
  line-height: 1.2;
}

@media (min-width: 1024px) {
  .hero__grade {
    grid-template-columns: minmax(0, 1.03fr) minmax(400px, 0.97fr);
  }

  .hero__visual {
    justify-self: end;
  }

  .fotografia--hero img {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 640px) {
  .hero__visual {
    padding-right: 10px;
  }

  .hero__cartao {
    width: min(84%, 300px);
  }
}

/* --- Objeto do hero: a fita que vira ofício -------------------------------
   Uma faixa desce ao lado do percurso e, no último trecho, dobra e vira
   documento. É o mesmo gesto do símbolo, em escala de página. */

.fita-hero {
  position: relative;
  margin: 0;
  padding-left: clamp(56px, 9vw, 96px);
  isolation: isolate;
}

/* A fita desce em petróleo, dobra em teal na altura do ofício e termina
   em corte diagonal, como a ponta da fita no símbolo. */
.fita-hero__trilho {
  position: absolute;
  z-index: -1;
  top: 6px;
  bottom: 78px;
  left: 0;
  width: clamp(26px, 4vw, 44px);
  background: linear-gradient(
    var(--cor-petroleo) 0 62%,
    var(--cor-teal) 62% 100%
  );
  clip-path: polygon(0 0, 100% 0, 100% 86%, 58% 100%, 0 100%);
}

.percurso {
  display: grid;
  gap: var(--e4);
}

.percurso__item {
  display: grid;
  gap: 3px;
  padding: var(--e5);
  background: var(--cor-nevoa);
}

.percurso__rotulo {
  color: var(--cor-teal-escuro);
  font-family: var(--fonte-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.percurso__titulo {
  font-size: var(--texto-medio);
  font-weight: 650;
  line-height: 1.25;
}

.percurso__detalhe {
  color: var(--texto-suave);
  font-size: var(--texto-pequeno);
  line-height: 1.45;
}

/* A última faixa é a única que é documento: canto dobrado, linhas de
   informação e superfície branca. */
.percurso__item--oficio {
  position: relative;
  padding-bottom: calc(var(--e5) + 26px);
  border: 1px solid var(--borda);
  background: var(--cor-branco);
  clip-path: polygon(0 0, calc(100% - 38px) 0, 100% 38px, 100% 100%, 0 100%);
}

.percurso__item--oficio::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 38px;
  height: 38px;
  background: var(--cor-nevoa);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  content: "";
}

/* Linhas de informação do ofício, iguais às do símbolo. */
.percurso__item--oficio::after {
  position: absolute;
  right: var(--e5);
  bottom: var(--e5);
  left: var(--e5);
  height: 14px;
  background:
    linear-gradient(var(--cor-salvia), var(--cor-salvia)) left bottom / 68% 3px no-repeat,
    linear-gradient(var(--cor-salvia), var(--cor-salvia)) left calc(bottom - 8px) / 52% 3px no-repeat;
  content: "";
  opacity: 0.85;
}

.fita-hero figcaption {
  max-width: 44ch;
  margin-top: var(--e5);
  color: var(--texto-suave);
  font-size: var(--texto-pequeno);
  line-height: 1.5;
}

/* --- Faixa de confiança ---------------------------------------------------- */

.faixa-confianca {
  padding-block: clamp(var(--e6), 4vw, var(--e8));
  background: var(--cor-nevoa);
}

.faixa-confianca__grade {
  display: grid;
  gap: var(--e6);
}

.faixa-confianca__item {
  display: grid;
  gap: var(--e2);
  padding-top: var(--e4);
  border-top: 3px solid var(--cor-petroleo);
}

.faixa-confianca__item strong {
  font-family: var(--fonte-display);
  font-size: var(--texto-h3);
  font-weight: 600;
}

.faixa-confianca__item span {
  color: var(--texto-suave);
  font-size: var(--texto-pequeno);
}

@media (min-width: 780px) {
  .faixa-confianca__grade {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e7);
  }
}

/* --- Blocos editoriais ------------------------------------------------------ */

.editorial {
  display: grid;
  gap: clamp(var(--e6), 4vw, var(--e8));
  align-items: start;
}

@media (min-width: 900px) {
  .editorial--dividido {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
}

.editorial__texto > * + * {
  margin-top: var(--e4);
}

.editorial__texto p {
  font-size: var(--texto-medio);
}

/* Termo explicado: a definição vem colada ao termo, não em glossário. */
.definicao {
  margin-top: var(--e5);
  padding: var(--e5);
  border-left: 4px solid var(--cor-teal);
  border-radius: 0 var(--raio-medio) var(--raio-medio) 0;
  background: var(--fundo-superficie);
}

.definicao dt {
  font-family: var(--fonte-display);
  font-size: var(--texto-h3);
  font-weight: 600;
}

.definicao dd {
  margin-top: var(--e3);
  color: var(--texto-suave);
  font-size: var(--texto-base);
}

.definicao + .definicao {
  margin-top: var(--e4);
}

/* --- Listas de fazer e não fazer -------------------------------------------- */

.papel {
  display: grid;
  gap: var(--e7);
}

.papel__coluna h3 {
  padding-bottom: var(--e3);
  border-bottom: 2px solid var(--cor-petroleo);
}

.papel__coluna--nao h3 {
  border-bottom-color: var(--cor-teal);
}

.papel__coluna ul {
  display: grid;
  gap: var(--e4);
  margin-top: var(--e5);
}

.papel__coluna li {
  position: relative;
  padding-left: 30px;
  color: var(--texto-suave);
  font-size: var(--texto-base);
  line-height: 1.5;
}

.papel__coluna li::before {
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 14px;
  height: 3px;
  background: var(--cor-petroleo);
  content: "";
}

/* Marcador da coluna negativa: a passagem fechada, duas superfícies
   encostadas. Nunca um check ou um X, que confundem a leitura da lista. */
.papel__coluna--nao li::before {
  width: 14px;
  height: 3px;
  background:
    linear-gradient(var(--cor-salvia), var(--cor-salvia)) left / 6px 100% no-repeat,
    linear-gradient(var(--cor-salvia), var(--cor-salvia)) right / 6px 100% no-repeat;
}

@media (min-width: 860px) {
  .papel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e8);
  }
}

/* --- Lista de negativas curtas ---------------------------------------------- */

.nunca {
  display: grid;
  gap: var(--e3);
  margin-top: var(--e6);
}

.nunca li {
  padding: var(--e4) var(--e5);
  border-radius: var(--raio-pequeno);
  background: rgba(220, 235, 230, 0.09);
  color: var(--texto-inverso);
  font-size: var(--texto-pequeno);
  font-weight: 600;
}

@media (min-width: 780px) {
  .nunca {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Página de análise ------------------------------------------------------- */

.analise__grade {
  display: grid;
  gap: clamp(var(--e6), 4vw, var(--e8));
  align-items: start;
}

@media (min-width: 1000px) {
  .analise__grade {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  }

  /* Com o apoio reduzido a três linhas, a coluna ficou muito mais baixa que o
   * formulário e passou a pender do topo com vão morto embaixo. É o mesmo
   * problema que já derrubou a foto desta coluna, na direção contrária: lá ela
   * ficou alta demais e o sticky parou de segurar.
   *
   * `align-content: center` faz o conteúdo usar a altura que a coluna tem, em
   * vez de se grudar no topo. O sticky continua, para o apoio acompanhar a
   * rolagem enquanto a pessoa responde. */
  .analise__apoio {
    position: sticky;
    top: calc(var(--altura-cabecalho) + var(--e5));
    display: grid;
    align-content: center;
    min-height: 62svh;
  }
}

.analise__apoio h1 {
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  max-width: 16ch;
}

/* Microprovas do cabeçalho: custo, compromisso e controle. Pílulas de traço, não
   de preenchimento: elas informam, não pedem clique, e preenchimento sólido aqui
   competiria com o botão de avançar do formulário. */
.microprovas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e4);
  padding: 0;
  list-style: none;
}

.microprovas li {
  padding: 4px 12px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pilula);
  color: var(--cor-teal-escuro);
  font-family: var(--fonte-mono);
  font-size: var(--texto-micro);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Três linhas, sem título e sem detalhe. Era uma lista de quatro garantias com
   título mais detalhe, e ela somava 707 px medidos numa coluna que precisa ser
   apoio, não conteúdo concorrente. */
.analise__lista {
  display: grid;
  gap: var(--e3);
  margin-top: var(--e5);
  padding: var(--e4) var(--e4) var(--e4) 0;
  border-top: 1px solid var(--borda);
  list-style: none;
}

.analise__lista li {
  position: relative;
  padding-left: 20px;
  color: var(--texto-suave);
  font-size: var(--texto-pequeno);
  line-height: 1.45;
}

/* O marcador é o vão da fita em miniatura, como no resto do site. */
.analise__lista li::before {
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 11px;
  height: 2px;
  background: var(--cor-teal);
  content: "";
}

.analise__apoio-link {
  margin-top: var(--e2);
}

/* --- Confirmação -------------------------------------------------------------- */

.confirmacao {
  padding-block: var(--secao-y-ampla);
}

/* Ritmo do cartão apertado em 31/07/2026, por pedido do cliente: a tela de
 * confirmação estava com 1087 px em 1000x650, ou 1,72 viewport, e o orçamento
 * medido mostrou onde estava a massa. A lista de próximos passos era 427 px, 39%
 * do cartão, e o resto era margem de 32 px entre blocos.
 *
 * Aqui não é condicional a media query: o cartão tinha entre 1087 e 1159 px em
 * TODA largura testada, de 1000 a 1920. Alto em todo lugar não é problema de
 * tela baixa. */
.confirmacao__cartao {
  max-width: var(--largura-estreita);
  padding: clamp(var(--e5), 2.6vw, var(--e6));
  border: 1px solid var(--borda);
  border-radius: var(--raio-grande);
  background: var(--fundo-superficie);
  box-shadow: var(--sombra-superficie);
}

/* A marca de conclusão é a fita já dobrada em ofício. */
.confirmacao__marca {
  position: relative;
  width: 44px;
  height: 54px;
  margin-bottom: var(--e4);
  border: 2px solid var(--cor-petroleo);
  background: var(--fundo-superficie);
  clip-path: polygon(0 0, 68% 0, 100% 28%, 100% 100%, 0 100%);
}

.confirmacao__marca::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 32%;
  height: 28%;
  background: var(--cor-nevoa);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  content: "";
}

.confirmacao__marca::after {
  position: absolute;
  right: 9px;
  bottom: 10px;
  left: 9px;
  height: 15px;
  background:
    linear-gradient(var(--cor-teal), var(--cor-teal)) left top / 100% 3px no-repeat,
    linear-gradient(var(--cor-teal), var(--cor-teal)) left bottom / 66% 3px no-repeat;
  content: "";
}

.confirmacao__proximos {
  display: grid;
  gap: var(--e3);
  margin-top: var(--e4);
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
  counter-reset: proximo;
}

.confirmacao__proximos li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e3);
  align-items: start;
}

/* O parágrafo de abertura do cartão não precisa do corpo de guia de hero: aqui
   ele confirma um envio, não abre uma página. */
.confirmacao__cartao .hero__guia {
  margin-top: var(--e3);
  margin-bottom: var(--e2);
  font-size: var(--texto-medio);
}

/* A nota de interrupção vinha com 48 px acima, por `.espaco-topo-7`. Num cartão
   que já usa borda e fundo para separar blocos, 48 px é vão morto. */
.confirmacao__cartao .etapa__nota {
  margin-top: var(--e4);
}

.confirmacao__cartao .par-ctas {
  margin-top: var(--e4);
}

.confirmacao__proximos li::before {
  counter-increment: proximo;
  content: counter(proximo);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--cor-petroleo);
  border-radius: var(--raio-pilula);
  font-family: var(--fonte-mono);
  font-size: var(--texto-micro);
  font-weight: 700;
}

.confirmacao__demo {
  margin-top: var(--e5);
  padding: var(--e4);
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio-pequeno);
  background: rgba(125, 153, 144, 0.09);
  color: var(--texto-suave);
  font-size: var(--texto-pequeno);
}

/* --- Leitora de proposta, em /comparar-proposta ---------------------------- */

/* Reaproveita `.campo` do formulário: mesmo rótulo sempre visível, mesma dica,
   mesma altura de alvo. Duas ferramentas com aparência de campo diferente no
   mesmo site é ruído, e aqui a familiaridade ajuda. */
.leitora {
  padding: clamp(var(--e5), 3.2vw, var(--e7));
  border: 1px solid var(--borda);
  border-radius: var(--raio-grande);
  background: var(--fundo-superficie);
  box-shadow: var(--sombra-decisao);
}

.leitora__rotulo {
  margin: 0;
  font-family: var(--fonte-display);
  font-size: var(--texto-h3);
  font-weight: 600;
  line-height: 1.2;
}

.leitora__saida:empty {
  display: none;
}

.leitora__saida {
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
}

.leitora__linha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e4);
  justify-content: space-between;
  align-items: baseline;
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--borda);
}

.leitora__linha--destaque {
  border-bottom-color: var(--borda-forte);
}

.leitora__linha--destaque strong {
  font-size: var(--texto-medio);
  color: var(--cor-petroleo);
}

.leitora__rotulo-linha {
  color: var(--texto-suave);
  font-size: var(--texto-pequeno);
}

/* A conclusão diz o que o número NÃO significa, e é a parte que impede a
   ferramenta de virar julgamento sobre proposta de terceiro. */
.leitora__conclusao {
  margin: var(--e4) 0 0;
  padding: var(--e3) var(--e4);
  border-radius: var(--raio-pequeno);
  background: var(--fundo-nevoa);
  color: var(--texto-suave);
  font-size: var(--texto-pequeno);
}

.leitora__erro {
  margin: 0;
  padding-left: var(--e3);
  border-left: 3px solid var(--cor-erro);
  color: var(--cor-erro);
  font-size: var(--texto-pequeno);
  font-weight: 650;
}

/* A ação no resultado. Tem peso visual de propósito: é o único bloco da página
   com fundo petróleo, e ele aparece exatamente quando a pessoa tem o número na
   mão. Fim de página não pega esse instante. */
.leitora__acao {
  display: grid;
  gap: var(--e3);
  margin-top: var(--e5);
  padding: var(--e5);
  border-radius: var(--raio-medio);
  background: var(--cor-petroleo);
  color: var(--cor-branco-nevoa);
  text-align: center;
}

.leitora__acao-texto {
  margin: 0;
  font-family: var(--fonte-display);
  font-size: var(--texto-h3);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}

.leitora__acao .botao {
  justify-self: center;
  min-width: min(100%, 280px);
}

.leitora__acao .botao--principal {
  background: var(--cor-branco-nevoa);
  color: var(--cor-petroleo);
}

.leitora__acao .botao--principal:hover {
  background: var(--cor-nevoa);
  color: var(--cor-petroleo-profundo);
}

/* Névoa, não teal escuro: sobre petróleo o teal fica em 2,4:1 e some. */
.leitora__acao-apoio {
  margin: 0;
  color: var(--cor-nevoa);
  font-size: var(--texto-pequeno);
}

.leitora__nota {
  margin: var(--e4) 0 0;
  color: var(--texto-suave);
  font-size: var(--texto-pequeno);
}

/* --- Verificador de contato, em /seguranca --------------------------------- */

.verificador {
  margin-top: var(--e6);
  padding: var(--e5);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-medio);
  background: var(--fundo-superficie);
}

.verificador__rotulo {
  margin: 0 0 var(--e4);
  font-family: var(--fonte-display);
  font-size: var(--texto-h3);
  font-weight: 600;
  line-height: 1.2;
}

.verificador__linha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  align-items: flex-end;
}

.verificador__campo {
  flex: 1 1 260px;
  display: grid;
  gap: var(--e2);
  min-width: 0;
  font-size: var(--texto-pequeno);
  font-weight: 650;
}

.verificador__campo input {
  width: 100%;
  min-height: var(--alvo-minimo);
  padding: 12px var(--e4);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  background: var(--fundo-superficie);
  font-family: var(--fonte-mono);
  font-size: var(--texto-base);
  font-weight: 400;
}

.verificador__linha .botao {
  flex: 0 0 auto;
}

/* O veredito. Nunca só cor: cada estado tem faixa lateral e texto próprio, e o
   negativo diz "não é nosso", nunca "é golpe". */
.verificador__saida:empty {
  display: none;
}

.verificador__saida {
  margin: var(--e4) 0 0;
  padding: var(--e3) var(--e4);
  border-left: 3px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  background: var(--fundo-nevoa);
  font-size: var(--texto-pequeno);
  font-weight: 650;
}

.verificador__saida[data-veredito="confere"] {
  border-left-color: var(--cor-teal-escuro);
}

.verificador__saida[data-veredito="nao-confere"],
.verificador__saida[data-veredito="sem-referencia"] {
  border-left-color: var(--cor-erro);
  color: var(--cor-erro);
}

/* `--texto-pequeno`, não `--texto-micro`: isto é frase, não rótulo utilitário, e
   o piso de 15 px de texto corrido da marca vale aqui. A checagem de tamanho
   mínimo pegou os 13 px na primeira tentativa. */
.verificador__nota {
  margin: var(--e3) 0 0;
  color: var(--texto-suave);
  font-size: var(--texto-pequeno);
}

/* Linha de expectativa: o que a pessoa pode conferir no primeiro contato.
   Fica entre o parágrafo de confirmação e a lista, e usa borda em vez de fundo
   para não competir com o bloco do PIX, que é o único alerta da página. */
.confirmacao__expectativa {
  margin-top: var(--e4);
  padding-left: var(--e3);
  border-left: 3px solid var(--cor-teal);
  color: var(--texto-suave);
  font-size: var(--texto-pequeno);
}

/* Bloco do PIX: o único elemento de alerta do cartão, então ele pode ter fundo
   próprio. Sálvia como traço, nunca carregando texto, e o texto em petróleo. */
.confirmacao__pix {
  margin-top: var(--e4);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno);
  background: var(--fundo-nevoa);
  font-size: var(--texto-pequeno);
}

/* Atalho para o WhatsApp da empresa, na confirmação.
   Nasce oculto pelo atributo `hidden` no HTML; o script revela quando há
   registro de conclusão nesta sessão e existe número configurado. */
.confirmacao__whatsapp {
  margin-top: var(--e6);
}

.confirmacao__whatsapp .botao {
  width: 100%;
}

.confirmacao__whatsapp .etapa__nota {
  margin-top: var(--e3);
}

/* --- Páginas de texto legal ------------------------------------------------- */

.documento-legal {
  max-width: 72ch;
}

.documento-legal h2 {
  margin-top: var(--e8);
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2.125rem);
  scroll-margin-top: calc(var(--altura-cabecalho) + 24px);
}

.documento-legal h2:first-of-type {
  margin-top: var(--e6);
}

.documento-legal h3 {
  margin-top: var(--e6);
  font-size: var(--texto-medio);
}

.documento-legal p,
.documento-legal li {
  color: var(--texto-suave);
}

.documento-legal p {
  margin-top: var(--e4);
}

.documento-legal ul {
  display: grid;
  gap: var(--e3);
  margin-top: var(--e4);
}

.documento-legal ul li {
  position: relative;
  padding-left: 24px;
  font-size: var(--texto-pequeno);
  line-height: 1.6;
}

.documento-legal ul li::before {
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 11px;
  height: 3px;
  background: var(--cor-teal);
  content: "";
}

.documento-legal__meta {
  padding: var(--e5);
  border-left: 4px solid var(--cor-teal);
  border-radius: 0 var(--raio-medio) var(--raio-medio) 0;
  background: var(--fundo-superficie);
  font-size: var(--texto-pequeno);
}

.documento-legal__meta p {
  margin-top: var(--e2);
  color: var(--texto-suave);
}

.documento-legal__meta p:first-child {
  margin-top: 0;
}

.indice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e6);
  padding: var(--e4) 0;
  border-block: 1px solid var(--borda);
}

.indice a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 4px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pilula);
  font-size: var(--texto-micro);
  font-weight: 600;
  text-decoration: none;
}

.indice a:hover {
  border-color: var(--cor-teal-escuro);
  background: var(--fundo-superficie);
}

/* --- 404 ---------------------------------------------------------------------- */

.erro-404 {
  display: grid;
  align-content: center;
  min-height: 58vh;
  padding-block: var(--secao-y-ampla);
}

/* A fita que se interrompe: dois trechos e uma dobra que não chega a
   virar documento. */
.erro-404__codigo {
  display: inline-flex;
  align-items: flex-end;
  gap: 7px;
  margin-bottom: var(--e5);
}

.erro-404__codigo span {
  width: 15px;
  height: 58px;
  background: var(--cor-petroleo);
  transform: skewX(-14deg);
}

.erro-404__codigo span:nth-child(2) {
  height: 38px;
  background: var(--cor-teal);
}

.erro-404__codigo span:nth-child(3) {
  height: 18px;
  background: var(--cor-salvia);
}

.erro-404 .par-ctas {
  margin-top: var(--e7);
}

.erro-404__atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e5);
  margin-top: var(--e7);
  padding-top: var(--e5);
  border-top: 1px solid var(--borda);
}

/* --- Cartões de apoio --------------------------------------------------------- */

.cartoes {
  display: grid;
  gap: var(--e5);
  margin-top: var(--e7);
}

.cartao {
  display: grid;
  gap: var(--e2);
  padding: var(--e5);
  border: 1px solid var(--borda);
  border-radius: var(--raio-medio);
  background: var(--fundo-superficie);
}

.cartao__rotulo {
  color: var(--texto-suave);
  font-family: var(--fonte-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cartao p {
  color: var(--texto-suave);
  font-size: var(--texto-pequeno);
}

@media (min-width: 820px) {
  .cartoes--tres {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cartoes--duas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Blocos com aparte lateral ------------------------------------------------ */

.com-aparte {
  display: grid;
  gap: clamp(var(--e6), 4vw, var(--e8));
  align-items: start;
}

@media (min-width: 940px) {
  .com-aparte {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .com-aparte--estreito {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

/* --- Cartões dentro de seções escuras ------------------------------------------
   Superfície translúcida no lugar de branca: dentro do petróleo, um cartão
   branco quebra o contraste do texto herdado e a continuidade da seção. */

.secao--escura .cartao{
  border-color: var(--borda-inversa);
  background: rgba(220, 235, 230, 0.07);
  color: var(--texto-inverso);
}

.secao--escura .cartao h3{
  color: var(--texto-inverso);
}

.secao--escura .cartao p{
  color: var(--texto-inverso-suave);
}

.secao--escura .cartao__rotulo{
  color: var(--cor-nevoa);
}

.secao--escura .documento-legal li{
  color: var(--texto-inverso-suave);
}

/* ===== 06-motion.css ===== */
/* ==========================================================================
   Movimento
   Movimento editorial: progressão do formulário e reveal discreto de blocos.
   Propriedades animadas: transform, opacity, clip-path e stroke-dashoffset.
   ========================================================================== */

/* --- Reveal discreto -------------------------------------------------------
   O estado inicial só é aplicado quando o JavaScript confirma que vai
   observar os elementos. Sem JavaScript, nada fica escondido. */

html[data-motion="pronto"] [data-revelar] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--tempo-reveal) var(--easing-fita),
    transform var(--tempo-reveal) var(--easing-fita);
}

html[data-motion="pronto"] [data-revelar][data-visivel="true"] {
  opacity: 1;
  transform: none;
}

/* --- Abertura do hero -------------------------------------------------------
   A fita corre de cima a baixo e o percurso aparece ao lado dela, um
   estado de cada vez. O ofício é o último a chegar. */

html[data-motion="pronto"] .fita-hero .fita-hero__desce,
html[data-motion="pronto"] .fita-hero .fita-hero__dobra {
  animation: trilho-corre 1s both var(--easing-fita);
}

html[data-motion="pronto"] .fita-hero .fita-hero__dobra {
  animation-delay: 0.44s;
  animation-duration: 0.6s;
}

html[data-motion="pronto"] .fita-hero .percurso__item {
  animation: percurso-entra 0.62s both var(--easing-suave);
  animation-delay: calc(0.3s + var(--indice) * 0.22s);
}

@keyframes trilho-corre {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes percurso-entra {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- Transição entre etapas do formulário ----------------------------------- */

html[data-motion="pronto"] .formulario[data-interativo="true"] .etapa:not([hidden]) {
  animation: etapa-entra var(--tempo-medio) both var(--easing-fita);
}

@keyframes etapa-entra {
  from {
    opacity: 0;
    clip-path: inset(0 8% 0 8%);
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: none;
  }
}

/* --- Preferência por menos movimento ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cabecalho__nav {
    transition: none !important;
  }

  html[data-motion="pronto"] [data-revelar],
  html[data-motion="pronto"] [data-revelar][data-visivel="true"] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}
.percurso__item--ordem-1 { --indice: 0; }
.percurso__item--ordem-2 { --indice: 1; }
.percurso__item--ordem-3 { --indice: 2; }

/* ===== 07-marketing-v2.css ===== */
/* Direção aprovada para a home e as landing pages. O @scope impede que esta
   camada altere as páginas institucionais que continuam no sistema anterior. */
@scope (.marketing-v2) {
:scope {
  --petroleo: #183a45;
  --petroleo-profundo: #102e36;
  --teal-escuro: #245c63;
  --teal: #4b7774;
  --salvia: #7d9990;
  --nevoa: #dcebe6;
  --branco-nevoa: #fafcfb;
  --branco: #ffffff;
  --linha: #b9d1cb;
  --erro: #a92d3d;
  --display: "STIX Two Text", "Iowan Old Style", Palatino, Georgia, serif;
  --texto: "Avenir Next", Avenir, "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, monospace;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --container: 1180px;
  --gutter: clamp(20px, 4vw, 40px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--petroleo);
  background: var(--branco-nevoa);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select { font: inherit; }

.container {
  width: min(calc(100% - (var(--gutter) * 2)), var(--container));
  margin-inline: auto;
}

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

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  height: 88px;
  color: var(--petroleo);
}

.site-header--dark { color: var(--branco-nevoa); }

.site-header__inner {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
}

.brand img { width: 206px; height: auto; }
.site-header--dark .brand img { filter: brightness(0) invert(1); }

.nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-weight: 650;
  flex: 0 0 auto;
}

.nav a {
  text-decoration: none;
  font-size: 0.95rem;
  white-space: nowrap;
}

.nav__link { opacity: 0.78; transition: opacity 160ms ease-out; }
.nav__link:hover { opacity: 1; }

.button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 23px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--petroleo);
  color: var(--branco-nevoa);
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 150ms var(--ease-out), background-color 180ms ease, border-color 180ms ease;
}

.button:active { transform: scale(0.97); }
.button--small { min-height: 44px; padding-inline: 18px; border-radius: 10px; }
.button--sage { background: var(--nevoa); color: var(--petroleo-profundo); }
.button--light { background: var(--branco-nevoa); color: var(--petroleo-profundo); }
.button--outline { border-color: currentColor; background: transparent; color: var(--petroleo); }
.button--outline-light { border-color: rgba(250, 252, 251, 0.5); background: transparent; color: var(--branco-nevoa); }
.button--full { width: 100%; }
.button svg { width: 18px; height: 18px; }

@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--petroleo-profundo); }
  .button--sage:hover { background: var(--branco); }
  .button--light:hover { background: var(--nevoa); }
  .button--outline:hover { background: var(--petroleo); color: var(--branco-nevoa); }
  .button--outline-light:hover { background: var(--branco-nevoa); color: var(--petroleo-profundo); }
}

.eyebrow {
  margin: 0 0 20px;
  color: var(--teal-escuro);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero--dark .eyebrow,
.section--dark .eyebrow { color: var(--nevoa); }

h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--display); font-weight: 650; letter-spacing: -0.025em; }
h1 { margin-bottom: 24px; font-size: clamp(3rem, 5.3vw, 5.3rem); line-height: 0.98; }
h2 { margin-bottom: 20px; font-size: clamp(2.15rem, 3.4vw, 3.75rem); line-height: 1.04; }
h3 { margin-bottom: 10px; font-size: 1.15rem; line-height: 1.25; }

.lead {
  max-width: 620px;
  margin-bottom: 30px;
  color: var(--teal-escuro);
  font-size: clamp(1.08rem, 1.6vw, 1.32rem);
  line-height: 1.55;
}

.hero--dark .lead { color: var(--nevoa); }

.hero {
  min-height: 760px;
  display: flex;
  align-items: center;
  padding: 132px 0 72px;
  overflow: hidden;
}

.hero--dark {
  color: var(--branco-nevoa);
  background: var(--petroleo-profundo);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr);
  align-items: center;
  gap: clamp(42px, 6vw, 86px);
}

.hero__copy { position: relative; z-index: 2; }
.hero__copy h1 em { color: var(--salvia); font-weight: inherit; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.microproof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  color: var(--teal-escuro);
  font-size: 0.93rem;
}

.hero--dark .microproof { color: rgba(250, 252, 251, 0.78); }
.microproof li { display: flex; align-items: center; gap: 8px; }
.microproof li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--salvia); }

.hero__media { position: relative; }
.hero__image {
  width: 100%;
  aspect-ratio: 1.05 / 1;
  object-fit: cover;
  border-radius: 32px 4px 32px 32px;
  box-shadow: 0 32px 80px rgba(4, 20, 25, 0.28);
}

.hero__media-card {
  position: absolute;
  right: -18px;
  bottom: 28px;
  width: min(300px, 72%);
  padding: 20px 22px;
  border: 1px solid rgba(185, 209, 203, 0.6);
  border-radius: 18px 0 18px 18px;
  background: rgba(250, 252, 251, 0.94);
  color: var(--petroleo);
  box-shadow: 0 18px 54px rgba(16, 46, 54, 0.2);
  backdrop-filter: blur(12px);
}

.hero__media-card span { display: block; margin-bottom: 6px; color: var(--teal-escuro); font: 700 0.68rem/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.hero__media-card strong { display: block; font-family: var(--display); font-size: 1.3rem; line-height: 1.2; }

@media (min-width: 981px) {
  :scope.home-v2 .hero {
    min-height: 0;
    padding: 112px 0 40px;
  }

  :scope.home-v2 .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(400px, .82fr);
    gap: clamp(36px, 5vw, 68px);
  }

  :scope.home-v2 .hero__copy h1 {
    max-width: 10.5ch;
    margin-bottom: 18px;
    font-size: clamp(3.25rem, 4.55vw, 4.8rem);
    font-optical-sizing: auto;
    letter-spacing: -.035em;
    line-height: .96;
  }

  :scope.home-v2 .hero .lead { margin-bottom: 20px; }
  :scope.home-v2 .microproof { margin-top: 18px; }
  :scope.home-v2 .hero__media { width: min(100%, 520px); justify-self: end; }
  :scope.home-v2 .hero__image {
    max-height: calc(100svh - 176px);
    aspect-ratio: 4 / 5;
    object-position: 50% 38%;
  }
  :scope.home-v2 .hero__media-card { right: -12px; bottom: 20px; }
}

@media (min-width: 981px) and (max-height: 820px) {
  :scope.home-v2 .hero { padding-top: 104px; padding-bottom: 28px; }
  :scope.home-v2 .hero__copy h1 { font-size: clamp(3rem, 4.2vw, 4.35rem); }
  :scope.home-v2 .hero .lead { font-size: 1.05rem; line-height: 1.45; }
  :scope.home-v2 .hero__media { width: min(100%, 480px); }
  :scope.home-v2 .hero__media-card { padding: 16px 18px; }
}

.trust-strip { border-bottom: 1px solid var(--linha); background: var(--branco); }
.trust-strip--dark { border-color: rgba(220, 235, 230, 0.18); background: var(--petroleo); color: var(--branco-nevoa); }
.trust-strip__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.trust-strip__item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 25px 30px;
  border-right: 1px solid var(--linha);
}
.trust-strip--dark .trust-strip__item { border-color: rgba(220, 235, 230, 0.18); }
.trust-strip__item:first-child { padding-left: 0; }
.trust-strip__item:last-child { border-right: 0; }
.trust-strip__item strong { display: block; margin-bottom: 3px; font-size: 1rem; }
.trust-strip__item span { color: var(--teal-escuro); font-size: 0.9rem; }
.trust-strip--dark .trust-strip__item span { color: var(--nevoa); }
.trust-strip__mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(36, 92, 99, 0.25);
  border-radius: 50%;
  background: var(--nevoa);
  color: var(--petroleo-profundo) !important;
  font: 800 1rem/1 var(--texto) !important;
  letter-spacing: -0.03em;
}
.trust-strip--dark .trust-strip__mark {
  border-color: rgba(220, 235, 230, 0.28);
  background: rgba(220, 235, 230, 0.12);
  color: var(--branco-nevoa) !important;
}

.section { padding: clamp(74px, 9vw, 118px) 0; }
.section--white { background: var(--branco); }
.section--mist { background: var(--nevoa); }
.section--dark { background: var(--petroleo); color: var(--branco-nevoa); }
.section__head { max-width: 760px; margin-bottom: 48px; }
.section__head p { max-width: 650px; color: var(--teal-escuro); font-size: 1.08rem; }
.section--dark .section__head p { color: var(--nevoa); }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cards--two { grid-template-columns: repeat(2, 1fr); margin-top: 18px; }
.card {
  min-height: 220px;
  padding: 30px;
  border: 1px solid var(--linha);
  border-radius: 20px 0 20px 20px;
  background: var(--branco);
}
.card__number { display: block; margin-bottom: 30px; color: var(--teal); font: 700 0.76rem/1 var(--mono); letter-spacing: 0.12em; }
.card p { margin-bottom: 0; color: var(--teal-escuro); }

.outcomes { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(38px, 7vw, 96px); align-items: start; }
.outcomes__list { display: grid; gap: 0; border-top: 1px solid var(--linha); }
.outcome { display: grid; grid-template-columns: 58px 1fr; gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--linha); }
.outcome__icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--nevoa); font-family: var(--display); font-size: 1.25rem; }
.outcome p { margin: 0; color: var(--teal-escuro); }

.process { counter-reset: step; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid rgba(220,235,230,.28); }
.process--four { grid-template-columns: repeat(4, 1fr); }
.process__step { counter-increment: step; padding: 30px 28px 0 0; border-right: 1px solid rgba(220,235,230,.28); min-height: 240px; }
.process__step + .process__step { padding-left: 28px; }
.process__step:last-child { border-right: 0; }
.process__step::before { content: "0" counter(step); display: block; margin-bottom: 40px; color: var(--salvia); font: 700 0.78rem/1 var(--mono); }
.process__step p { color: var(--nevoa); }
.process--three { grid-template-columns: repeat(3, 1fr); }

.eligibility__head { max-width: 800px; }
.coverage-checker {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: 18px;
  margin-bottom: 22px;
}
.coverage-checker__form,
.coverage-result {
  min-width: 0;
  min-height: 144px;
  padding: 25px;
  border: 1px solid var(--linha);
  border-radius: 20px 0 20px 20px;
  background: var(--branco);
}
.coverage-checker__form label {
  display: block;
  margin-bottom: 12px;
  font-size: .88rem;
  font-weight: 800;
}
.coverage-checker__control { min-width: 0; display: flex; align-items: center; gap: 14px; }
.coverage-checker__control select {
  min-width: 0;
  height: 52px;
  flex: 1;
  padding: 0 42px 0 14px;
  border: 1px solid var(--linha);
  border-radius: 11px;
  background: var(--branco);
  color: var(--petroleo);
  outline: none;
}
.coverage-checker__control select:focus { border-color: var(--teal-escuro); box-shadow: 0 0 0 4px rgba(125,153,144,.24); }
.coverage-checker__count {
  flex: 0 0 auto;
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--nevoa);
  color: var(--petroleo-profundo);
  font: 750 .72rem/1 var(--mono);
  white-space: nowrap;
}
.coverage-result {
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: 16px;
  background: var(--petroleo);
  color: var(--branco-nevoa);
}
.coverage-result__mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(220,235,230,.14);
  color: var(--nevoa);
  font-weight: 850;
}
.coverage-result strong { display: block; margin-bottom: 4px; }
.coverage-result p { margin: 0; color: var(--nevoa); font-size: .9rem; line-height: 1.45; }
.coverage-result[data-status="yes"] .coverage-result__mark { background: var(--nevoa); color: var(--petroleo-profundo); }
.coverage-result[data-status="no"] { background: var(--branco); color: var(--petroleo); }
.coverage-result[data-status="no"] .coverage-result__mark { background: #f7e8e9; color: var(--erro); }
.coverage-result[data-status="no"] p { color: var(--teal-escuro); }

.credit-catalog {
  overflow: hidden;
  border: 1px solid var(--linha);
  border-radius: 26px 0 26px 26px;
  background: var(--branco);
}
.credit-catalog__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 27px 28px;
  border-bottom: 1px solid var(--linha);
}
.credit-catalog__toolbar h3 { margin-bottom: 4px; font-family: var(--display); font-size: 1.42rem; }
.credit-catalog__toolbar p { margin: 0; color: var(--teal-escuro); font-size: .88rem; }
.catalog-search { position: relative; min-width: min(100%, 330px); }
.catalog-search input {
  width: 100%;
  height: 48px;
  padding: 0 44px 0 14px;
  border: 1px solid var(--linha);
  border-radius: 11px;
  background: var(--branco-nevoa);
  color: var(--petroleo);
  outline: none;
}
.catalog-search input:focus { border-color: var(--teal-escuro); box-shadow: 0 0 0 4px rgba(125,153,144,.24); }
.catalog-search > span:not(.sr-only) { position: absolute; top: 50%; right: 15px; color: var(--teal); font-size: 1.2rem; transform: translateY(-50%); }
.credit-table-wrap { overflow-x: auto; }
.credit-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.credit-table th {
  padding: 13px 18px;
  background: rgba(220,235,230,.38);
  color: var(--teal);
  font: 750 .68rem/1.3 var(--mono);
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
}
.credit-table td { padding: 17px 18px; border-top: 1px solid rgba(185,209,203,.72); vertical-align: top; }
.credit-table tbody tr:first-child td { border-top: 0; }
.credit-table td:nth-child(1) { width: 25%; }
.credit-table td:nth-child(2) { width: 18%; color: var(--teal-escuro); }
.credit-table td:nth-child(3) { width: 41%; color: var(--teal-escuro); }
.credit-table td:nth-child(4) { width: 16%; }
.credit-table tr[hidden] { display: none; }
.eligibility-status { display: inline-flex; padding: 7px 9px; border-radius: 999px; font-size: .7rem; font-weight: 800; white-space: nowrap; }
.eligibility-status--yes { background: var(--nevoa); color: var(--petroleo-profundo); }
.eligibility-status--review { background: #f4f1e7; color: #685a2f; }
.credit-empty { margin: 0; padding: 32px; color: var(--teal-escuro); text-align: center; }
.criteria-details { border-top: 1px solid var(--linha); }
.criteria-details summary { padding: 20px 28px; cursor: pointer; font-weight: 800; list-style: none; }
.criteria-details summary::-webkit-details-marker { display: none; }
.criteria-details summary::after { float: right; content: "+"; font-size: 1.2rem; font-weight: 400; }
.criteria-details[open] summary::after { content: "−"; }
.criteria-details__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--linha); }
.criteria-details__grid span { padding: 18px 28px; border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); color: var(--teal-escuro); font-size: .86rem; }
.criteria-details__grid span:nth-child(3n) { border-right: 0; }
.eligibility__note { max-width: 870px; margin: 20px 0 0; color: var(--teal-escuro); font-size: .8rem; }

.documents__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(430px, 1.08fr); gap: clamp(44px, 7vw, 94px); align-items: start; }
.documents__intro { position: sticky; top: 32px; }
.documents__callout {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 13px;
  margin-top: 28px;
  padding: 18px;
  border: 1px solid var(--linha);
  border-radius: 16px 0 16px 16px;
  background: var(--branco-nevoa);
}
.documents__callout > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--nevoa); font-weight: 800; }
.documents__callout p { margin: 0; color: var(--teal-escuro); font-size: .9rem; }
.documents-panel { overflow: hidden; border: 1px solid var(--linha); border-radius: 26px 0 26px 26px; background: var(--branco); box-shadow: 0 22px 64px rgba(24,58,69,.08); }
.documents-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 7px; border-bottom: 1px solid var(--linha); background: var(--branco-nevoa); }
.documents-tabs button { min-height: 46px; border: 0; border-radius: 10px; background: transparent; color: var(--teal-escuro); font-weight: 800; cursor: pointer; }
.documents-tabs button[aria-selected="true"] { background: var(--petroleo); color: var(--branco-nevoa); box-shadow: 0 7px 18px rgba(24,58,69,.14); }
.documents-tabs button:focus-visible { outline: 2px solid var(--teal-escuro); outline-offset: 2px; }
.documents-panels { display: grid; }
.documents-panels > .documents-list { grid-area: 1 / 1; }
.documents-list[data-ativo="false"] {
  visibility: hidden;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 180ms var(--ease-out),
    transform 180ms var(--ease-out),
    visibility 0s linear 180ms;
}
.documents-list[data-ativo="true"] {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 180ms var(--ease-out),
    transform 180ms var(--ease-out),
    visibility 0s linear 0s;
}
.documents-list { padding: 29px 30px 25px; }
.documents-list__label { color: var(--teal); font: 750 .7rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.documents-list ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.documents-list li { position: relative; padding: 15px 0 15px 34px; border-bottom: 1px solid var(--linha); }
.documents-list li:last-child { border-bottom: 0; }
.documents-list li::before { position: absolute; top: 16px; left: 0; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--nevoa); content: "✓"; font-size: .68rem; font-weight: 850; }
.documents-extra { border-top: 1px solid var(--linha); background: rgba(220,235,230,.24); }
.documents-extra summary { padding: 18px 30px; cursor: pointer; font-size: .86rem; font-weight: 800; list-style: none; }
.documents-extra summary::-webkit-details-marker { display: none; }
.documents-extra summary::after { float: right; content: "+"; font-size: 1.15rem; font-weight: 400; }
.documents-extra[open] summary::after { content: "−"; }
.documents-extra p { margin: 0; padding: 0 30px 24px; color: var(--teal-escuro); font-size: .84rem; }

.cta-panel {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 44px;
  padding: clamp(38px, 6vw, 70px);
  border-radius: 32px 0 32px 32px;
  background: var(--petroleo-profundo);
  color: var(--branco-nevoa);
}
.cta-panel h2 { margin-bottom: 14px; }
.cta-panel p { margin: 0; color: var(--nevoa); font-size: 1.05rem; }
.cta-panel__action { display: flex; justify-content: flex-end; }

.form-card {
  width: 100%;
  min-width: 0;
  padding: 28px;
  border: 1px solid rgba(185, 209, 203, 0.72);
  border-radius: 24px 0 24px 24px;
  background: rgba(250, 252, 251, 0.97);
  color: var(--petroleo);
  box-shadow: 0 28px 80px rgba(4, 20, 25, 0.28);
}
.form-card__head { margin-bottom: 22px; }
.form-card__head strong { display: block; margin-bottom: 5px; font-family: var(--display); font-size: 1.55rem; line-height: 1.2; }
.form-card__head span { color: var(--teal-escuro); font-size: 0.9rem; }
.form-grid { display: grid; gap: 14px; }
.field { display: grid; gap: 7px; }
.field--split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field label { font-size: 0.82rem; font-weight: 750; }
.field input, .field select {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: var(--branco);
  color: var(--petroleo);
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.field input:focus, .field select:focus { border-color: var(--teal-escuro); box-shadow: 0 0 0 4px rgba(125,153,144,.24); }
.file-field { position: relative; min-width: 0; }
.file-field__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.file-field__label {
  min-height: 76px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px dashed var(--linha);
  border-radius: 12px;
  background: rgba(220, 235, 230, 0.28);
  cursor: pointer;
  transition: border-color 150ms ease-out, background-color 150ms ease-out, box-shadow 150ms ease-out;
}
.file-field__input:focus-visible + .file-field__label {
  border-color: var(--teal-escuro);
  box-shadow: 0 0 0 4px rgba(125, 153, 144, 0.24);
}
.file-field__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 9px 2px 9px 9px;
  background: var(--petroleo);
  color: var(--branco-nevoa);
  font: 800 0.65rem/1 var(--mono);
  letter-spacing: 0.06em;
}
.file-field__copy { min-width: 0; }
.file-field__copy strong,
.file-field__copy span { display: block; }
.file-field__copy strong {
  margin-bottom: 3px;
  overflow: hidden;
  font-size: 0.84rem;
  line-height: 1.25;
}
.file-field__copy small {
  color: var(--teal);
  font-size: 0.7rem;
  font-weight: 750;
  text-transform: uppercase;
}
.file-field__copy span { color: var(--teal-escuro); font-size: 0.74rem; line-height: 1.35; }
.file-field__action {
  color: var(--teal-escuro);
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}
.file-field[data-file-selected] .file-field__label {
  border-style: solid;
  border-color: var(--salvia);
  background: var(--nevoa);
}
.file-field__error {
  display: none;
  margin-top: 6px;
  color: var(--erro);
  font-size: 0.75rem;
  line-height: 1.35;
}
.file-field[data-file-invalid] .file-field__label { border-color: var(--erro); }
.file-field[data-file-invalid] .file-field__error { display: block; }
.form-note { margin: 2px 0 0; color: var(--teal-escuro); font-size: 0.78rem; line-height: 1.45; }
.form-consent {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: var(--teal-escuro);
  font-size: .78rem;
  line-height: 1.45;
}
.form-consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--petroleo); }
.form-consent a { font-weight: 750; }
.form-status { display: none; margin: 4px 0 0; padding: 11px 12px; border-radius: 9px; background: var(--nevoa); color: var(--petroleo-profundo); font-size: 0.86rem; }
.form-status[data-visible] { display: block; }
.button:disabled { cursor: wait; opacity: 0.76; }

.hero--form .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(390px, 0.72fr); }
.hero--form .hero__copy h1 { font-size: clamp(2.9rem, 4.9vw, 4.9rem); }
.hero--image-bg { position: relative; isolation: isolate; }
.hero--image-bg::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--petroleo-profundo) var(--hero-image) center right / cover no-repeat; }
.hero--federal { --hero-image: url('/assets/hero-federal-960.jpg'); }
.hero--estadual { --hero-image: url('/assets/hero-estadual-960.jpg'); }
.hero--image-bg::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(16,46,54,.98) 0%, rgba(16,46,54,.91) 44%, rgba(16,46,54,.28) 78%, rgba(16,46,54,.16) 100%); }
.hero--image-bg .hero__copy { max-width: 680px; }

.comparison-grid { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: clamp(40px, 7vw, 94px); align-items: center; }
.comparison-grid > * { min-width: 0; }
.comparison-image { overflow: hidden; border-radius: 28px 0 28px 28px; box-shadow: 0 24px 70px rgba(24,58,69,.13); }
.comparison-image img { width: 100%; min-height: 520px; object-fit: cover; }
.checklist { display: grid; gap: 14px; padding: 0; list-style: none; }
.checklist li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.checklist li::before { content: "✓"; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--nevoa); color: var(--petroleo); font-size: 0.78rem; font-weight: 800; }

.metric-example { padding: 30px; border: 1px solid var(--linha); border-radius: 22px 0 22px 22px; background: var(--branco); }
.metric-example__label { margin-bottom: 20px; color: var(--teal-escuro); font: 700 0.7rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.metric-row { display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--linha); }
.metric-row:last-child { border: 0; padding-bottom: 0; }
.metric-row span { color: var(--teal-escuro); }
.metric-row strong { font-size: 1.05rem; }
.metric-example__note { margin: 18px 0 0; color: var(--teal-escuro); font-size: .78rem; }

.faq { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(42px, 7vw, 92px); }
.faq__items { border-top: 1px solid var(--linha); }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary { padding: 22px 38px 22px 0; cursor: pointer; font-weight: 750; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 20px; font-size: 1.25rem; font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 36px 22px 0; margin: 0; color: var(--teal-escuro); }

.lp-compare .hero { background: var(--branco); }
.lp-compare .site-header { border-bottom: 1px solid rgba(185,209,203,.6); }
.lp-compare .hero__image { aspect-ratio: 1.02 / 1; }
.lp-compare .hero__media::before { content: "COLOQUE A VIRA VALOR NA DISPUTA"; position: absolute; z-index: 2; top: 18px; left: -18px; padding: 10px 13px; border-radius: 8px; background: var(--petroleo); color: var(--branco-nevoa); font: 700 .65rem/1.2 var(--mono); letter-spacing: .1em; }

:scope.lp-lawyer .hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(34px, 5vw, 68px); }
:scope.lp-lawyer .hero { min-height: min(680px, 100svh); padding: 104px 0 44px; }
:scope.lp-lawyer .hero__copy h1 { font-size: clamp(2.7rem, 4vw, 4.1rem); }
:scope.lp-lawyer .hero__image { height: auto; aspect-ratio: 3 / 2; object-position: center; }
:scope.lp-lawyer #potencial > .container > .cards:not(.cards--two) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:scope.lp-lawyer .cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:scope.lp-lawyer .partner-bar { display: grid; grid-template-columns: 1.2fr repeat(3, .75fr); align-items: stretch; border: 1px solid var(--linha); border-radius: 18px 0 18px 18px; overflow: hidden; background: var(--branco); }
:scope.lp-lawyer .partner-summary { padding-block: 46px; }
:scope.lp-lawyer .partner-bar > * { padding: 24px; border-right: 1px solid var(--linha); }
:scope.lp-lawyer .partner-bar > *:last-child { border-right: 0; }
:scope.lp-lawyer .partner-bar p { margin: 0; color: var(--teal-escuro); }
:scope.lp-lawyer .partner-bar strong { display: block; margin-bottom: 4px; }
:scope.lp-lawyer p > a:not(.button) { display: inline-flex; align-items: center; min-height: 24px; }
:scope.lp-lawyer .partner-role-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
:scope.lp-lawyer .partner-role-card { padding: 30px; border: 1px solid var(--linha); border-radius: 20px 0 20px 20px; background: var(--branco); box-shadow: var(--sombra-card); }
:scope.lp-lawyer .partner-role-card > span { color: var(--teal-escuro); font: 750 .7rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
:scope.lp-lawyer .partner-role-card h3 { margin: 10px 0 18px; font-family: var(--display); font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.12; }
:scope.lp-lawyer .partner-role-card .checklist { margin-top: 0; }
:scope.lp-lawyer .partner-principles { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(40px, 7vw, 96px); align-items: start; }
:scope.lp-lawyer .partner-principles .checklist { margin-top: 0; }
:scope.lp-lawyer .form-consent--conditional { border: 1px solid color-mix(in srgb, var(--teal) 38%, var(--linha)); border-radius: 12px; padding: 14px; background: color-mix(in srgb, var(--sage) 18%, var(--branco)); }
:scope.lp-lawyer .form-consent--conditional[hidden] { display: none; }

.site-footer { padding: 44px 0 98px; border-top: 1px solid var(--linha); background: var(--branco-nevoa); }
.site-footer__inner { display: flex; justify-content: space-between; gap: 24px; color: var(--teal-escuro); font-size: .86rem; }
.site-footer a { font-weight: 700; }

.entrance > * { opacity: 0; transform: translateY(10px); animation: reveal 500ms var(--ease-out) forwards; }
.entrance > *:nth-child(2) { animation-delay: 50ms; }
.entrance > *:nth-child(3) { animation-delay: 100ms; }
.entrance > *:nth-child(4) { animation-delay: 150ms; }
.entrance > *:nth-child(5) { animation-delay: 200ms; }
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 980px) {
  .nav__link { display: none; }
  .hero { min-height: auto; }
  .hero__grid, .hero--form .hero__grid, :scope.lp-lawyer .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { max-width: 760px; }
  .hero__media { max-width: 720px; }
  .hero__image, :scope.lp-lawyer .hero__image { aspect-ratio: 16 / 10; }
  :scope.home-v2 .hero__image { object-position: 50% 34%; }
  :scope.lp-lawyer .hero { padding: 100px 0 44px; }
  :scope.lp-lawyer .hero__grid { gap: 30px; }
  :scope.lp-lawyer .hero__image { aspect-ratio: 3 / 2; object-position: center; }
  .cards { grid-template-columns: 1fr 1fr; }
  .cards .card:last-child { grid-column: 1 / -1; }
  .outcomes, .comparison-grid, .faq { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr 1fr; }
  .process__step { border-top: 1px solid rgba(220,235,230,.28); }
  .process__step:nth-child(2n) { border-right: 0; }
  .coverage-checker, .documents__grid { grid-template-columns: 1fr; }
  .documents__intro { position: static; }
  .criteria-details__grid { grid-template-columns: 1fr 1fr; }
  .criteria-details__grid span:nth-child(3n) { border-right: 1px solid var(--linha); }
  .criteria-details__grid span:nth-child(2n) { border-right: 0; }
  :scope.lp-lawyer #potencial > .container > .cards:not(.cards--two) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :scope.lp-lawyer .cards--two { grid-template-columns: 1fr; }
  :scope.lp-lawyer .partner-role-grid, :scope.lp-lawyer .partner-principles { grid-template-columns: 1fr; }
  :scope.lp-lawyer .partner-bar { grid-template-columns: 1fr 1fr; }
  :scope.lp-lawyer .partner-bar > *:nth-child(2) { border-right: 0; }
  :scope.lp-lawyer .partner-bar > *:nth-child(n+3) { border-top: 1px solid var(--linha); }
}

@media (max-width: 1160px) {
  .nav__link { display: none; }
}

@media (max-width: 680px) {
  html { scroll-behavior: auto; }
  .site-header, .site-header__inner { height: 74px; min-height: 74px; }
  .brand img { width: 164px; }
  .nav { gap: 0; }
  .nav .button { min-height: 42px; padding-inline: 14px; font-size: .84rem; }
  .hero { padding: 112px 0 58px; }
  .hero__grid { gap: 38px; }
  h1 { font-size: clamp(2.55rem, 12vw, 3.55rem); }
  h2 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .lead { font-size: 1.05rem; }
  .hero__actions { align-items: stretch; flex-direction: column; }
  .hero__actions .button { width: 100%; }
  .hero__image, :scope.lp-lawyer .hero__image { aspect-ratio: .96 / 1; border-radius: 24px 0 24px 24px; }
  :scope.lp-lawyer .hero { min-height: 0; padding: 92px 0 44px; }
  :scope.lp-lawyer .hero__grid { gap: 28px; }
  :scope.lp-lawyer .hero__copy h1 { font-size: clamp(2.35rem, 11vw, 3.1rem); }
  :scope.lp-lawyer .hero__image { aspect-ratio: 3 / 2; object-position: center; }
  :scope.lp-lawyer #potencial > .container > .cards:not(.cards--two), :scope.lp-lawyer .partner-role-grid { grid-template-columns: 1fr; }
  :scope.lp-lawyer .hero__actions .button { width: 100%; }
  .hero__media-card { right: 10px; bottom: -18px; }
  .microproof { display: grid; }
  .trust-strip__grid { grid-template-columns: 1fr; }
  .trust-strip__item, .trust-strip__item:first-child { padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--linha); }
  .trust-strip__item:last-child { border-bottom: 0; }
  .cards { grid-template-columns: 1fr; }
  .cards--two { grid-template-columns: 1fr; }
  .cards .card:last-child { grid-column: auto; }
  .section { padding-block: 68px; }
  .outcome { grid-template-columns: 48px 1fr; }
  .coverage-checker__control, .credit-catalog__toolbar { align-items: stretch; flex-direction: column; }
  .coverage-checker__count { align-self: flex-start; }
  .catalog-search { min-width: 100%; }
  .credit-table, .credit-table tbody, .credit-table tr, .credit-table td { display: block; width: 100% !important; }
  .credit-table thead { display: none; }
  .credit-table tr { padding: 18px 20px; border-top: 1px solid var(--linha); }
  .credit-table tbody tr:first-child { border-top: 0; }
  .credit-table td { padding: 5px 0; border: 0; }
  .credit-table td:nth-child(2)::before { content: "Cobertura: "; font-weight: 800; }
  .credit-table td:nth-child(3) { padding-block: 9px; }
  .criteria-details__grid { grid-template-columns: 1fr; }
  .criteria-details__grid span, .criteria-details__grid span:nth-child(3n), .criteria-details__grid span:nth-child(2n) { border-right: 0; }
  .documents-list { padding: 24px 20px 20px; }
  .documents-tabs { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr; }
  .process__step, .process__step + .process__step { min-height: auto; padding: 25px 0; border-right: 0; border-top: 1px solid rgba(220,235,230,.28); }
  .process__step::before { margin-bottom: 20px; }
  .cta-panel { grid-template-columns: 1fr; padding: 34px 24px; }
  .cta-panel__action { justify-content: stretch; }
  .cta-panel__action .button { width: 100%; }
  .field--split { grid-template-columns: 1fr; }
  .file-field__label { grid-template-columns: 42px minmax(0, 1fr); }
  .file-field__action { grid-column: 2; justify-self: start; margin-top: -5px; }
  .button--full { min-height: 52px; height: auto; padding-block: 11px; white-space: normal; text-align: center; }
  .form-card { padding: 22px 18px; }
  .hero--image-bg::after { background: linear-gradient(180deg, rgba(16,46,54,.96) 0%, rgba(16,46,54,.9) 68%, rgba(16,46,54,.58) 100%); }
  .hero--image-bg::before { background-position: 64% center; }
  .comparison-image img { min-height: 360px; }
  :scope.lp-lawyer .partner-bar { grid-template-columns: 1fr; }
  :scope.lp-lawyer .partner-bar > * { border-right: 0; border-bottom: 1px solid var(--linha); }
  :scope.lp-lawyer .partner-bar > *:last-child { border-bottom: 0; }
  .site-footer__inner { flex-direction: column; }
  .entrance > * { opacity: 1; transform: none; animation: none; }
}

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

/* O cabeçalho e o rodapé reais permanecem no documento. Aqui eles recebem a
   mesma direção visual dos mockups sem duplicar navegação ou dados oficiais. */
:scope .cabecalho {
  position: absolute;
  inset: 0 0 auto;
  z-index: 40;
  height: 88px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
:scope .cabecalho__interno { min-height: 88px; }
:scope .logo--cabecalho { width: 206px; }
:scope .cabecalho__lista { gap: 30px; }
:scope .cabecalho__lista a { font-size: .95rem; font-weight: 650; }
:scope .cabecalho .botao--compacto {
  min-height: 44px;
  padding-inline: 18px;
  border-radius: 10px;
  background: var(--nevoa);
  color: var(--petroleo-profundo);
}
:scope.marketing-v2--dark .cabecalho { color: var(--branco-nevoa); }
:scope.marketing-v2--dark .cabecalho__marca { filter: brightness(0) invert(1); }
:scope.marketing-v2--dark .cabecalho__lista a { color: var(--branco-nevoa); opacity: .8; }
:scope.marketing-v2--dark .cabecalho__lista a:hover { opacity: 1; }
:scope.marketing-v2--dark .cabecalho__botao-menu { color: var(--branco-nevoa); }
:scope .rodape { margin-top: 0; }

@media (max-width: 760px) {
  :scope .cabecalho,
  :scope .cabecalho__interno { height: 74px; min-height: 74px; }
  :scope .logo--cabecalho { width: 164px; }
  :scope.marketing-v2--dark .cabecalho__nav {
    background: var(--petroleo-profundo);
    color: var(--branco-nevoa);
  }
}
}

/* O seletor continua restrito à família marketing, mas fica fora de @scope
   para que a animação nativa de details funcione também em navegadores que
   ainda não resolvem nomes de keyframe dentro de um escopo CSS. */
.marketing-v2 .faq details[open] > p {
  animation: faq-resposta-entra 180ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

/* ===== 08-cabecalho-translucido.css ===== */
/* Cabeçalho fixo e material progressivo das páginas marketing. */
@scope (.marketing-v2) {
  :scope .cabecalho {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    height: 88px;
    border: 0;
    border-bottom: 1px solid rgba(231, 242, 239, 0);
    background: rgba(16, 46, 54, 0);
    box-shadow: 0 12px 36px rgba(5, 25, 31, 0);
    -webkit-backdrop-filter: blur(0) saturate(100%);
    backdrop-filter: blur(0) saturate(100%);
    transition:
      background-color 220ms var(--easing-suave),
      border-color 220ms var(--easing-suave),
      box-shadow 220ms var(--easing-suave),
      -webkit-backdrop-filter 220ms var(--easing-suave),
      backdrop-filter 220ms var(--easing-suave);
  }

  :scope .cabecalho[data-fixado="true"] {
    border-bottom-color: rgba(231, 242, 239, 0.18);
    background: rgba(16, 46, 54, 0.76);
    box-shadow: 0 12px 36px rgba(5, 25, 31, 0.18);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
  }

  :scope .cabecalho__interno {
    height: 88px;
    min-height: 88px;
  }

  :scope .logo--cabecalho { width: 206px; }
  :scope .cabecalho__lista { gap: 30px; }
  :scope .cabecalho__lista a { font-size: .95rem; font-weight: 650; }

  :scope .cabecalho .botao--compacto {
    min-height: 44px;
    padding-inline: 18px;
    border-radius: 10px;
    background: var(--nevoa);
    color: var(--petroleo-profundo);
  }

  :scope.marketing-v2--dark .cabecalho,
  :scope .cabecalho[data-fixado="true"] {
    color: var(--branco-nevoa);
  }

  :scope .cabecalho__marca { filter: none; }
  :scope .logo--cabecalho-clara { display: none; }
  :scope.marketing-v2--dark .logo--cabecalho-escura,
  :scope .cabecalho[data-fixado="true"] .logo--cabecalho-escura { display: none; }
  :scope.marketing-v2--dark .logo--cabecalho-clara,
  :scope .cabecalho[data-fixado="true"] .logo--cabecalho-clara { display: block; }

  :scope.marketing-v2--dark .cabecalho__lista a,
  :scope .cabecalho[data-fixado="true"] .cabecalho__lista a {
    color: var(--branco-nevoa);
    opacity: .82;
  }

  :scope.marketing-v2--dark .cabecalho__lista a:hover,
  :scope .cabecalho[data-fixado="true"] .cabecalho__lista a:hover {
    opacity: 1;
  }

  @media (max-width: 899px) {
    :scope .cabecalho,
    :scope .cabecalho__interno {
      height: 74px;
      min-height: 74px;
    }

    :scope .logo--cabecalho { width: 164px; }

    :scope .cabecalho__botao-menu {
      background: rgba(231, 242, 239, 0.96);
      color: var(--petroleo-profundo);
    }

    :scope.marketing-v2--dark .cabecalho__botao-menu,
    :scope .cabecalho[data-fixado="true"] .cabecalho__botao-menu {
      color: var(--petroleo-profundo);
    }

    :scope .cabecalho__nav {
      border-bottom-color: rgba(231, 242, 239, 0.16);
      background: rgba(16, 46, 54, 0.96);
      color: var(--branco-nevoa);
      -webkit-backdrop-filter: blur(24px) saturate(145%);
      backdrop-filter: blur(24px) saturate(145%);
    }

    :scope .cabecalho__nav .cabecalho__lista a {
      color: var(--branco-nevoa);
    }
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :scope .cabecalho[data-fixado="true"] {
      background: rgba(16, 46, 54, 0.96);
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    :scope .cabecalho[data-fixado="true"] {
      background: rgba(16, 46, 54, 0.98);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }

  @media (prefers-contrast: more) {
    :scope .cabecalho[data-fixado="true"] {
      border-bottom-color: var(--branco-nevoa);
      background: var(--petroleo-profundo);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }

  @media (max-width: 899px) and (prefers-reduced-transparency: reduce) {
    :scope .cabecalho__nav {
      background: rgba(16, 46, 54, 0.98);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }

  @media (max-width: 899px) and (prefers-contrast: more) {
    :scope .cabecalho__nav {
      border-bottom-color: var(--branco-nevoa);
      background: var(--petroleo-profundo);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }
}

/* O restante do site usa o mesmo material progressivo. O espaço reservado no
   main substitui a altura que o cabeçalho sticky ocupava no fluxo. */
body:not(.marketing-v2) .cabecalho {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 88px;
  border: 0;
  border-bottom: 1px solid rgba(231, 242, 239, 0);
  background: rgba(16, 46, 54, 0);
  box-shadow: 0 12px 36px rgba(5, 25, 31, 0);
  -webkit-backdrop-filter: blur(0) saturate(100%);
  backdrop-filter: blur(0) saturate(100%);
  transition:
    background-color 220ms var(--easing-suave),
    border-color 220ms var(--easing-suave),
    box-shadow 220ms var(--easing-suave),
    -webkit-backdrop-filter 220ms var(--easing-suave),
    backdrop-filter 220ms var(--easing-suave);
}

body:not(.marketing-v2) main { padding-top: 88px; }

body:not(.marketing-v2) .cabecalho__interno {
  height: 88px;
  min-height: 88px;
}

body:not(.marketing-v2) .cabecalho[data-fixado="true"] {
  border-bottom-color: rgba(231, 242, 239, 0.18);
  background: rgba(16, 46, 54, 0.76);
  color: #fafcfb;
  box-shadow: 0 12px 36px rgba(5, 25, 31, 0.18);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}

body:not(.marketing-v2) .cabecalho__marca { filter: none; }
body:not(.marketing-v2) .logo--cabecalho-clara { display: none; }
body:not(.marketing-v2) .cabecalho[data-fixado="true"] .logo--cabecalho-escura { display: none; }
body:not(.marketing-v2) .cabecalho[data-fixado="true"] .logo--cabecalho-clara { display: block; }

body:not(.marketing-v2) .cabecalho[data-fixado="true"] .cabecalho__lista a {
  color: #fafcfb;
  opacity: .82;
}

body:not(.marketing-v2) .cabecalho[data-fixado="true"] .cabecalho__lista a:hover {
  opacity: 1;
}

body:not(.marketing-v2) .cabecalho[data-fixado="true"] .cabecalho__lista a[aria-current="page"] {
  box-shadow: inset 0 -2px 0 0 #dcebe6;
}

body:not(.marketing-v2) .cabecalho[data-fixado="true"] .botao--compacto {
  background: #dcebe6;
  color: #102e36;
}

@media (max-width: 899px) {
  body:not(.marketing-v2) .cabecalho,
  body:not(.marketing-v2) .cabecalho__interno {
    height: 74px;
    min-height: 74px;
  }

  body:not(.marketing-v2) main { padding-top: 74px; }

  body:not(.marketing-v2) .logo--cabecalho { width: 164px; }

  body:not(.marketing-v2) .cabecalho__botao-menu {
    background: rgba(231, 242, 239, 0.96);
    color: #102e36;
  }

  body:not(.marketing-v2) .cabecalho__nav {
    border-bottom-color: rgba(231, 242, 239, 0.16);
    background: rgba(16, 46, 54, 0.96);
    color: #fafcfb;
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    backdrop-filter: blur(24px) saturate(145%);
  }

  body:not(.marketing-v2) .cabecalho__nav .cabecalho__lista a {
    color: #fafcfb;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body:not(.marketing-v2) .cabecalho[data-fixado="true"] {
    background: rgba(16, 46, 54, 0.96);
  }
}

@media (prefers-reduced-transparency: reduce) {
  body:not(.marketing-v2) .cabecalho[data-fixado="true"] {
    background: rgba(16, 46, 54, 0.98);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  body:not(.marketing-v2) .cabecalho[data-fixado="true"] {
    border-bottom-color: #fafcfb;
    background: #102e36;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ===== 08-sobre-v2.css ===== */
/* Página institucional editorial. Todo o escopo fica restrito a /sobre/. */
.sobre-v2 {
  --sobre-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --sobre-ease-continuity: cubic-bezier(0.18, 0.9, 0.22, 1);
}

.sobre-v2 .cabecalho:not([data-fixado="true"]) {
  color: var(--branco-nevoa);
}

.sobre-v2 .cabecalho:not([data-fixado="true"]) .logo--cabecalho-escura { display: none; }
.sobre-v2 .cabecalho:not([data-fixado="true"]) .logo--cabecalho-clara { display: block; }

.sobre-v2 .cabecalho:not([data-fixado="true"]) .cabecalho__lista a {
  color: var(--branco-nevoa);
  opacity: 0.82;
}

.sobre-v2 .cabecalho:not([data-fixado="true"]) .cabecalho__lista a:hover {
  opacity: 1;
}

.sobre-v2 .sobre-hero {
  padding: clamp(144px, 17vw, 230px) 0 clamp(76px, 10vw, 132px);
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 15%, rgba(135, 177, 165, 0.18), transparent 30%),
    var(--petroleo-profundo);
  color: var(--branco-nevoa);
}

.sobre-v2 .sobre-hero__interno,
.sobre-v2 .sobre-copy {
  max-width: 820px;
}

.sobre-v2 .sobre-hero h1 {
  max-width: 940px;
  margin: 14px 0 22px;
  color: inherit;
  font-size: clamp(3rem, 7.4vw, 6.7rem);
  line-height: 0.94;
  letter-spacing: -0.055em;
}

.sobre-v2 .sobre-hero .lead {
  max-width: 760px;
  color: var(--nevoa);
}

.sobre-v2 .sobre-hero .eyebrow,
.sobre-v2 .sobre-section--dark .eyebrow {
  color: var(--salvia);
}

.sobre-v2 .sobre-missao .eyebrow {
  color: var(--branco-nevoa);
}

.sobre-v2 .sobre-section {
  padding-block: clamp(76px, 9vw, 124px);
}

.sobre-v2 .sobre-section h2,
.sobre-v2 .sobre-missao h2 {
  margin: 10px 0 22px;
}

.sobre-v2 .sobre-section--white {
  background: var(--branco);
}

.sobre-v2 .sobre-section--mist {
  background: var(--branco-nevoa);
}

.sobre-v2 .sobre-section--dark {
  background: var(--petroleo-profundo);
  color: var(--branco-nevoa);
}

.sobre-v2 .sobre-credenciais {
  border-bottom: 1px solid var(--linha);
  background: var(--branco);
}

.sobre-v2 .sobre-credenciais__lista,
.sobre-v2 .sobre-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.sobre-v2 .sobre-credenciais__lista > li {
  min-width: 0;
  padding: 28px;
  border-right: 1px solid var(--linha);
}

.sobre-v2 .sobre-credenciais__lista > li:last-child {
  border-right: 0;
}

.sobre-v2 .sobre-credenciais strong {
  display: block;
  margin-bottom: 6px;
  color: var(--petroleo-profundo);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1;
}

.sobre-v2 .sobre-credenciais span {
  color: var(--teal-escuro);
}

.sobre-v2 .sobre-narrativa {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(42px, 8vw, 108px);
  align-items: start;
}

.sobre-v2 .sobre-narrativa__texto {
  max-width: 760px;
}

.sobre-v2 .sobre-narrativa__texto p + p,
.sobre-v2 .sobre-section--dark p + p {
  margin-top: 1em;
}

.sobre-v2 .sobre-continuity {
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr) auto;
  align-items: center;
  gap: 22px;
  margin-top: 42px;
  padding: 22px 0;
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}

.sobre-v2 .sobre-continuity__brand {
  color: var(--petroleo-profundo);
  font-weight: 800;
}

.sobre-v2 .sobre-continuity__line {
  height: 2px;
  background: var(--salvia);
}

.sobre-v2 .sobre-timeline {
  position: relative;
  margin-top: 58px;
}

.sobre-v2 .sobre-timeline::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--salvia);
  content: "";
}

.sobre-v2 .sobre-timeline__lista {
  display: grid;
  gap: 42px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sobre-v2 .sobre-timeline__item {
  position: relative;
  width: calc(50% - 34px);
}

.sobre-v2 .sobre-timeline__item:nth-child(even) {
  margin-left: calc(50% + 34px);
}

.sobre-v2 .sobre-timeline__item article {
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid var(--linha);
  border-radius: 24px 0 24px 24px;
  background: var(--branco);
  box-shadow: 0 18px 50px rgba(24, 58, 69, 0.06);
}

.sobre-v2 .sobre-timeline__item::before {
  position: absolute;
  top: 32px;
  width: 12px;
  height: 12px;
  border: 3px solid var(--branco-nevoa);
  border-radius: 50%;
  background: var(--teal);
  content: "";
}

.sobre-v2 .sobre-timeline__item:nth-child(odd)::before {
  right: -41px;
}

.sobre-v2 .sobre-timeline__item:nth-child(even)::before {
  left: -41px;
}

.sobre-v2 .sobre-timeline__periodo {
  margin-bottom: 8px;
  color: var(--teal);
  font: 750 0.72rem/1.3 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sobre-v2 .sobre-timeline__item h3 {
  margin: 0 0 12px;
}

.sobre-v2 .sobre-timeline__marca {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--linha);
  font-weight: 800;
}

.sobre-v2 .sobre-timeline__marca img {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

.sobre-v2 .sobre-missao {
  padding-block: clamp(70px, 9vw, 118px);
  background: var(--petroleo);
  color: var(--branco-nevoa);
}

.sobre-v2 .sobre-missao h2 {
  max-width: 980px;
  color: inherit;
}

.sobre-v2 .sobre-copy + .sobre-cards {
  margin-top: 46px;
}

.sobre-v2 .sobre-cards {
  gap: 18px;
}

.sobre-v2 .sobre-cards > li {
  min-width: 0;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--linha);
  border-radius: 20px 0 20px 20px;
  background: var(--branco);
}

.sobre-v2 .sobre-cards h3 {
  margin: 0 0 12px;
}

.sobre-v2 .sobre-section--dark h2 {
  color: inherit;
}

.sobre-v2 .sobre-section--dark p {
  color: var(--nevoa);
}

.sobre-v2 .sobre-oficiais__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(420px, 1.2fr);
  gap: clamp(42px, 7vw, 90px);
  align-items: start;
}

.sobre-v2 .sobre-oficiais .painel-dados {
  margin: 0;
}

.sobre-v2 .sobre-cta-note {
  margin: 0;
  padding: 18px var(--margem-lateral);
  background: var(--nevoa);
  color: var(--petroleo-profundo);
  text-align: center;
}

html[data-motion="pronto"] .sobre-v2 [data-sobre-timeline] {
  --sobre-timeline-duration: 700ms;
  opacity: 1;
  transform: none;
  transition: none;
}

html[data-motion="pronto"] .sobre-v2 [data-sobre-timeline]::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 700ms var(--sobre-ease-continuity);
}

html[data-motion="pronto"] .sobre-v2 [data-sobre-timeline] .sobre-timeline__item {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 420ms var(--sobre-ease-continuity),
    transform 420ms var(--sobre-ease-continuity);
  transition-delay: calc(var(--indice) * 70ms);
}

html[data-motion="pronto"] .sobre-v2 [data-sobre-timeline][data-visivel="true"]::before {
  transform: scaleY(1);
}

html[data-motion="pronto"] .sobre-v2 [data-sobre-timeline][data-visivel="true"] .sobre-timeline__item {
  opacity: 1;
  transform: none;
}

html[data-motion="pronto"] .sobre-v2 [data-sobre-continuity] {
  --sobre-continuity-duration: 500ms;
  opacity: 1;
  transform: none;
  transition: none;
}

html[data-motion="pronto"] .sobre-v2 [data-sobre-continuity] .sobre-continuity__line {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--sobre-ease-continuity);
}

html[data-motion="pronto"] .sobre-v2 [data-sobre-continuity][data-visivel="true"] .sobre-continuity__line {
  transform: scaleX(1);
}

html[data-motion="pronto"] .sobre-v2 .sobre-cards[data-revelar] {
  opacity: 1;
  transform: none;
  transition: none;
}

html[data-motion="pronto"] .sobre-v2 .sobre-cards[data-revelar] li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms var(--sobre-ease), transform 420ms var(--sobre-ease);
  transition-delay: calc(var(--indice) * 50ms);
}

html[data-motion="pronto"] .sobre-v2 .sobre-cards[data-revelar][data-visivel="true"] li {
  opacity: 1;
  transform: none;
}

@media (max-width: 980px) {
  .sobre-v2 .sobre-cards,
  .sobre-v2 .sobre-credenciais__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sobre-v2 .sobre-credenciais__lista > li:nth-child(2) {
    border-right: 0;
  }

  .sobre-v2 .sobre-credenciais__lista > li:nth-child(-n + 2) {
    border-bottom: 1px solid var(--linha);
  }

  .sobre-v2 .sobre-narrativa,
  .sobre-v2 .sobre-oficiais__grid {
    grid-template-columns: 1fr;
  }

  .sobre-v2 .sobre-timeline::before {
    left: 6px;
  }

  .sobre-v2 .sobre-timeline__lista {
    padding-left: 42px;
  }

  .sobre-v2 .sobre-timeline__item,
  .sobre-v2 .sobre-timeline__item:nth-child(even) {
    width: 100%;
    margin-left: 0;
  }

  .sobre-v2 .sobre-timeline__item:nth-child(odd)::before,
  .sobre-v2 .sobre-timeline__item:nth-child(even)::before {
    left: -41px;
    right: auto;
  }
}

@media (max-width: 680px) {
  .sobre-v2 .sobre-hero {
    padding-top: 124px;
  }

  .sobre-v2 .sobre-cards,
  .sobre-v2 .sobre-credenciais__lista {
    grid-template-columns: 1fr;
  }

  .sobre-v2 .sobre-credenciais__lista > li,
  .sobre-v2 .sobre-credenciais__lista > li:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid var(--linha);
  }

  .sobre-v2 .sobre-credenciais__lista > li:last-child {
    border-bottom: 0;
  }

  .sobre-v2 .sobre-continuity {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .sobre-v2 .sobre-continuity__line {
    width: 100%;
  }

  .sobre-v2 .hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .sobre-v2 .hero__actions .button {
    width: 100%;
  }

  .sobre-v2 .sobre-timeline__lista {
    padding-left: 30px;
  }

  .sobre-v2 .sobre-timeline__item:nth-child(odd)::before,
  .sobre-v2 .sobre-timeline__item:nth-child(even)::before {
    left: -29px;
  }

  .sobre-v2 .sobre-timeline__marca {
    grid-template-columns: 1fr;
  }

  .sobre-v2 .sobre-timeline__marca img {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-motion="reduzido"] .sobre-v2 .entrance > * {
    opacity: 1;
    transform: none;
    animation: sobre-opacity-only 120ms linear both !important;
  }

  html[data-motion="reduzido"] .sobre-v2 [data-revelar] {
    opacity: 0;
    transform: none;
    transition: opacity 120ms linear !important;
  }

  html[data-motion="reduzido"] .sobre-v2 [data-revelar][data-visivel="true"] {
    opacity: 1;
  }

  html[data-motion="reduzido"] .sobre-v2 [data-revelar] *,
  html[data-motion="reduzido"] .sobre-v2 [data-revelar]::before,
  html[data-motion="reduzido"] .sobre-v2 [data-revelar]::after {
    opacity: 1;
    transform: none;
    transition: none !important;
  }
}

@keyframes sobre-opacity-only {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===== 09-marketing-v2-qa.css ===== */
/* Ajustes de legibilidade e robustez revelados pela verificação em navegador. */
@scope (.marketing-v2) {
  :scope .coverage-result p,
  :scope .eligibility__note,
  :scope .documents__callout p,
  :scope .documents-extra p,
  :scope .form-note,
  :scope .form-consent,
  :scope .metric-example__note {
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  :scope .form-consent a {
    display: inline-block;
    margin-block: -4px;
    padding-block: 4px;
  }

  :scope.lp-compare .hero__copy h1 em {
    color: #5f7d75;
  }

  :scope .file-field__copy small { color: #4d7470; }

  :scope .coverage-result[data-status="review"] {
    background: #f4f1e7;
    color: var(--petroleo);
  }

  :scope .coverage-result[data-status="review"] .coverage-result__mark {
    background: #e6dcc0;
    color: #685a2f;
  }

  :scope .coverage-result[data-status="review"] p { color: var(--teal-escuro); }

  @media (max-width: 680px) {
    :scope .cta-panel > *,
    :scope .cta-panel__action .button {
      min-width: 0;
    }

    :scope .cta-panel__action .button {
      white-space: normal;
    }
  }
}
/* A marca tem arquivos próprios para fundos claros e escuros. Nunca aplique
   filtro ao conjunto: isso apaga o contorno do ofício no símbolo. */
.cabecalho__marca {
  position: relative;
  display: grid;
  filter: none !important;
}

.cabecalho__marca .logo--cabecalho {
  grid-area: 1 / 1;
}

/* ===== 10-consentimento-analytics.css ===== */
.analytics-consent {
  position: fixed;
  z-index: 1000;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  left: max(16px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  max-width: 980px;
  margin-inline: auto;
  padding: 20px;
  color: #f8fbfa;
  background: #102e36;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(16, 46, 54, 0.28);
}

.analytics-consent[hidden],
.analytics-consent__settings[hidden] {
  display: none;
}

.analytics-consent h2 {
  margin: 0 0 6px;
  color: inherit;
  font-size: clamp(1rem, 2vw, 1.15rem);
}

.analytics-consent p {
  max-width: 70ch;
  margin: 0;
  color: rgba(248, 251, 250, 0.84);
  font-size: 1rem;
  line-height: 1.5;
}

.analytics-consent a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: #d9e8df;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.analytics-consent__actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.analytics-consent__accept,
.analytics-consent__reject,
.analytics-consent__settings {
  min-height: 44px;
  padding: 10px 16px;
  font: inherit;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
}

.analytics-consent__accept {
  color: #102e36;
  background: #d9e8df;
  border: 1px solid #d9e8df;
}

.analytics-consent__reject {
  color: #f8fbfa;
  background: transparent;
  border: 1px solid rgba(248, 251, 250, 0.55);
}

.analytics-consent__settings {
  position: fixed;
  z-index: 900;
  /* Divide a faixa inferior com o WhatsApp sem cobri-lo. O recuo repete a
     margem responsiva do flutuante, soma os 56 px do botão e mantém um espaço
     visual entre os dois controles. Em `/analise/`, o WhatsApp fica à esquerda
     e esta posição continua válida. */
  right: calc(clamp(var(--e3), 3vw, var(--e5)) + 56px + var(--e2));
  bottom: max(12px, env(safe-area-inset-bottom));
  min-height: 36px;
  padding: 7px 11px;
  color: #f8fbfa;
  background: #102e36;
  border: 1px solid rgba(248, 251, 250, 0.35);
  font-size: 0.76rem;
}

.analytics-consent button:focus-visible,
.analytics-consent__settings:focus-visible {
  outline: 3px solid #f0a369;
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .analytics-consent {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 17px;
  }

  .analytics-consent__actions {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .analytics-consent,
  .analytics-consent__settings {
    scroll-behavior: auto;
  }
}

/* ===== 11-conteudos.css ===== */
.conteudos-home { border-top: 1px solid var(--linha); }
.conteudos-home__grade { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.conteudos-home__intro { max-width: 34rem; }
.conteudos-home__intro h2 { max-width: 12ch; }
.conteudos-home__destaque { padding: clamp(24px, 4vw, 42px); border: 1px solid var(--linha); border-radius: 24px 0 24px 24px; background: var(--nevoa); }
.conteudos-home__destaque h3 { margin: 10px 0 14px; font-size: clamp(1.45rem, 2.4vw, 2.1rem); }
.conteudos-home__destaque h3 a::after { content: ""; position: absolute; inset: 0; }
.conteudos-home__destaque { position: relative; }
.conteudos-card__tipo, .conteudos-card__meta { color: var(--teal-escuro); font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.conteudos-home__atalhos { grid-column: 2; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.conteudos-home__atalhos a { display: grid; gap: 6px; min-height: 96px; padding: 18px; border: 1px solid var(--linha); border-radius: 14px; }
.conteudos-home__atalhos span { color: var(--teal-escuro); font-size: .88rem; }
.conteudos-home .text-link, .breadcrumb a, .artigo__sumario a { display: inline-flex; align-items: center; min-height: 24px; }
@media (max-width: 760px) {
  .conteudos-home__grade { grid-template-columns: 1fr; }
  .conteudos-home__atalhos { grid-column: auto; grid-template-columns: 1fr; }
}

.conteudos-hero { padding: clamp(112px, 9vw, 128px) 0 clamp(48px, 5vw, 64px); background: var(--petroleo-profundo); color: var(--branco-nevoa); }
.conteudos-hero__grade { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .68fr); gap: clamp(36px, 6vw, 78px); align-items: end; }
.conteudos-hero h1 { max-width: 15ch; margin-bottom: 20px; font-size: clamp(3.3rem, 5.1vw, 4.8rem); font-optical-sizing: auto; letter-spacing: -.035em; line-height: .98; }
.conteudos-hero .eyebrow, .conteudos-hero .lead, .conteudos-hero .conteudos-card__tipo { color: var(--nevoa); }
.conteudos-metodo { display: grid; gap: 10px; padding: 22px; border: 1px solid rgba(220,235,230,.3); border-radius: 20px 0 20px 20px; }
.conteudos-metodo__marca { display: flex; align-items: center; width: fit-content; padding: 10px 12px; border-radius: 10px; background: var(--branco-nevoa); }
.conteudos-metodo__marca img { display: block; width: 148px; height: auto; }
.conteudos-metodo span, .conteudos-proveniencia p { color: var(--nevoa); }
.conteudos-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.conteudos-grade .conteudos-card:first-child:last-child { grid-column: span 2; }
.conteudos-card { position: relative; min-height: 210px; padding: 26px; border: 1px solid var(--linha); border-radius: 20px 0 20px 20px; background: var(--branco); }
.conteudos-card h3 { margin: 10px 0 14px; font-size: clamp(1.25rem, 2vw, 1.65rem); }
.conteudos-card h3 a { display: inline-flex; align-items: center; min-height: 44px; }
.conteudos-card h3 a::after { content: ""; position: absolute; inset: 0; }
.conteudos-card a:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
.conteudos-proveniencia .container { max-width: 850px; }
@media (max-width: 900px) {
  .conteudos-hero__grade, .conteudos-grade { grid-template-columns: 1fr; }
  .conteudos-grade .conteudos-card:first-child:last-child { grid-column: auto; }
}
@media (min-width: 901px) and (max-height: 820px) {
  .conteudos-hero { padding-top: 104px; padding-bottom: 42px; }
  .conteudos-hero h1 { font-size: clamp(3.15rem, 4.7vw, 4.35rem); }
}

.artigo { padding: clamp(104px, 9vw, 124px) 0 96px; }
.artigo__cabecalho, .artigo__grade { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.artigo__cabecalho { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 280px); gap: clamp(36px, 6vw, 72px); align-items: end; }
.artigo__cabecalho h1 { max-width: 17ch; margin-bottom: 18px; font-size: clamp(3.25rem, 5vw, 4.65rem); font-optical-sizing: auto; letter-spacing: -.035em; line-height: .98; }
.artigo__cabecalho .lead { margin-bottom: 18px; }
.artigo__assinatura { display: grid; gap: 10px; padding: 20px; border: 1px solid var(--linha); border-radius: 18px 0 18px 18px; background: var(--nevoa); }
.artigo__assinatura-marca { display: flex; align-items: center; width: fit-content; padding: 9px 10px; border-radius: 9px; background: var(--branco); }
.artigo__assinatura img { display: block; width: 142px; height: auto; }
.artigo__assinatura > span:last-child { color: var(--teal-escuro); font-size: .9rem; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; color: var(--teal-escuro); font-size: .82rem; }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; }
.breadcrumb--light,
.breadcrumb--light a { color: rgba(250, 252, 251, .82); }
.breadcrumb--light a:focus-visible { outline-color: var(--salvia-clara); }
.artigo__grade { display: grid; grid-template-columns: minmax(0, 760px) minmax(220px, 1fr); gap: clamp(40px, 7vw, 90px); margin-top: 40px; align-items: start; }
.artigo__sumario { grid-column: 2; grid-row: 1; position: sticky; top: 116px; padding-left: 22px; border-left: 1px solid var(--linha); }
.artigo__corpo { grid-column: 1; grid-row: 1; min-width: 0; }
.artigo__corpo section { scroll-margin-top: 112px; margin-bottom: 54px; }
.artigo__corpo p, .artigo__corpo li { font-size: 1.05rem; line-height: 1.75; }
.artigo__resposta, .artigo__cta, .artigo__proveniencia { padding: clamp(24px, 4vw, 38px); border-radius: 22px 0 22px 22px; }
.artigo__resposta { background: var(--nevoa); }
.artigo__cta { margin: 56px 0; background: var(--petroleo); color: var(--branco-nevoa); }
.artigo__proveniencia { border: 1px solid var(--linha); background: var(--branco); }
.artigo__frente-visual { margin: 24px 0 44px; overflow: hidden; border-radius: 24px 0 24px 24px; background: var(--petroleo); }
.artigo__frente-visual img { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.artigo__frente-visual figcaption { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 18px 20px; color: var(--branco-nevoa); }
.artigo__frente-visual strong { color: var(--verde-claro); }
.artigo__proveniencia img { width: 150px; height: auto; margin-bottom: 24px; }
.artigo__sumario h2 { font-size: 1rem; }
.artigo__sumario ol { display: grid; gap: 12px; padding-left: 18px; }
.artigo__fontes a { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid var(--linha); }
.artigo__relacionados-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.artigo__relacionados-grade a { min-height: 82px; padding: 18px; border: 1px solid var(--linha); border-radius: 14px; font-weight: 750; }
@media (max-width: 900px) {
  .artigo__cabecalho { grid-template-columns: 1fr; }
  .artigo__assinatura { max-width: 420px; }
  .artigo__grade { grid-template-columns: 1fr; }
  .artigo__sumario { grid-column: 1; grid-row: 1; position: static; padding: 22px; border: 1px solid var(--linha); border-radius: 16px; }
  .artigo__corpo { grid-column: 1; grid-row: 2; }
  .artigo__relacionados-grade { grid-template-columns: 1fr; }
}
@media (min-width: 901px) and (max-height: 920px) {
  .artigo { padding-top: 100px; }
  .artigo__cabecalho h1 { font-size: clamp(3.05rem, 4.6vw, 4.2rem); }
  .artigo__grade { margin-top: 34px; }
}
@media (max-width: 420px) {
  .artigo__cabecalho, .artigo__grade { width: min(100% - 28px, 1160px); }
  .artigo__cabecalho h1 { font-size: clamp(2.25rem, 11vw, 3rem); }
}