/* ==========================================================================
   lp.css — BASE E COMPONENTES DA LANDING PAGE
   --------------------------------------------------------------------------
   ESTE ARQUIVO **VAI** PARA A LANDING PAGE, junto com tokens.css e lp.js.
   Aqui mora tudo que a página de venda usa: reset, tipografia, moldura,
   navbar, botões, cards, etapas, cifras, bullets, investimento, rodapé,
   ícones e as animações. Nada de andaime de documentação (isso é docs.css).

   Todo valor sai de tokens.css. Se você precisar de um número novo, ele
   nasce lá — não aqui.

   RESPONSIVO POR CONTAINER, NÃO POR VIEWPORT
   A página declara `container-name: pagina` e todas as regras responsivas
   são @container. Motivo prático: a doc precisa mostrar o hero rodando a
   390px dentro de uma moldura, num monitor de 1440px. Com @media isso é
   impossível; com @container o componente responde à largura real que
   recebeu, na moldura da doc ou na janela do aparelho.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fontes — self-hosted, zero requisição externa
   --------------------------------------------------------------------------
   Três arquivos, duas famílias, 92 KB somados. Todos no mesmo subset latin,
   que cobre 100% do português do Brasil (á à â ã ç é ê í ó ô õ ú ü e as
   maiúsculas), mais — – · … “ ” ‘ ’ × º ª. Símbolos fora dele (≈ → ✓) NÃO
   se escrevem como texto: vêm do sprite de ícones.

   A DUPINCEL veio do kit de marca em .ttf e foi convertida — TTF não se
   serve na web: é o formato de desktop, sem compressão, e os dois pesos
   pesavam 352 KB. Subsetados para latin e recomprimidos em WOFF2 ficaram
   em 22 KB cada. A conversão está registrada no STACK.md.

   `font-display: swap` — o texto aparece na hora, na fonte de fallback, e
   troca quando o arquivo chega. O fallback da display é serifado, então a
   manchete não muda de personalidade no meio do carregamento.
   Nunca embutir fonte em base64 no CSS: dobraria em disco o que já está em
   assets/fonts/.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/*  Dois arquivos, dois pesos REAIS. Declarar só o Regular e pedir 700 faria
    o navegador engordar o desenho sozinho — o mesmo defeito de peso
    sintético que a v2 já tinha apontado no `font-bold` da referência. Numa
    serifada de alto contraste o falso negrito é pior ainda: ele engrossa a
    hairline junto com a haste e mata o contraste que é a fonte inteira. */
@font-face {
  font-family: 'Dupincel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dupincel-regular-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Dupincel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/dupincel-bold-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Reset curto e base
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-base);
  font-size: var(--tipo-corpo);
  font-weight: var(--peso-normal);
  line-height: var(--altura-corpo);
  letter-spacing: var(--tracking-corpo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
/*  list-style: none faz o Safari + VoiceOver parar de anunciar a lista como
    lista. Toda lista que carrega informação estruturada leva role="list" no
    markup para devolver a semântica — vale para qualquer lista nova. */
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; }

::selection { background: var(--cor-texto); color: var(--cor-fundo); }

/*  Foco visível único do sistema. Só no teclado — o clique de mouse não
    acende o anel, e o anel nunca some sem substituto. */
:focus-visible {
  outline: var(--foco-largura) solid var(--cor-foco);
  outline-offset: var(--foco-desloca);
}

/* --------------------------------------------------------------------------
   3. Moldura da página e ritmo de seção
   --------------------------------------------------------------------------
   Herdado do digital-architect: um container de 1400px com fio de 1px nas
   laterais, e capítulos separados por fio — nunca por sombra.
   -------------------------------------------------------------------------- */

.lp {
  container-type: inline-size;
  container-name: pagina;
}

.moldura {
  max-width: var(--largura-max);
  margin-inline: auto;
  border-inline: var(--fio) solid var(--cor-borda);
  background: var(--cor-fundo);
}

.secao {
  padding: var(--esp-10) var(--esp-5);
  border-top: var(--fio) solid var(--cor-borda);
}

.secao--clara { background: var(--cor-superficie); }
.secao--sem-fio { border-top: 0; }
.secao--ar { padding-block: var(--esp-12); }

.secao__cabeca {
  display: grid;
  gap: var(--esp-4);
  max-width: var(--largura-leitura);
  margin-bottom: var(--esp-9);
}

/*  O título de seção é o segundo e último papel da Dupincel na página. Ele
    e a manchete são os dois lugares onde o tipo é grande o bastante para a
    hairline da serifada existir; do h3 para baixo tudo volta para a Inter.
    O peso é o LEVE: o sólido da Dupincel fica reservado à cláusula grifada
    da manchete, e é isso que faz aquele trecho ser o único da página que
    aparece em negrito editorial. */
.secao__titulo {
  font-family: var(--fonte-display);
  font-size: var(--tipo-h2);
  font-weight: var(--peso-display-leve);
  line-height: var(--altura-apertada);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.secao__linha {
  color: var(--cor-texto-2);
  font-size: var(--tipo-corpo-g);
  line-height: var(--altura-corpo);
}

@container pagina (min-width: 48rem) {
  .secao { padding-inline: var(--esp-8); }
}

/* --------------------------------------------------------------------------
   3.1 PRIMEIRA DOBRA — a manchete grifada
   --------------------------------------------------------------------------
   A v2 abria por escopo: uma faixa de campos (o que é · prazo · para quem ·
   o que sai), depois a manchete, depois duas linhas de prova. Somava treze
   blocos de texto no celular. A v4 desce a ficha, a nota, o link secundário
   e o segundo número para o corpo da página, e a dobra fica com SETE:

     logo · CTA da barra · manchete · uma frase · CTA · um número · a fonte

   Duas bandas, e não três:
     B. CORPO — manchete de largura inteira, uma frase e a ação
     C. PROVA — uma LINHA de rodapé: número, filete, rótulo com a fonte

   As regras da dobra que a v2 fixou continuam valendo, e a v4 acrescenta
   uma quarta:

   1. NENHUM ALGARISMO EM DISPLAY ACIMA DA DOBRA. A prova é 30px contra uma
      manchete de até 104px.
   2. A BANDA DE PROVA É INERTE E MONOCROMÁTICA. Sem superfície própria, sem
      ícone, sem badge, sem hover, sem cursor e sem foco. Ela também não usa
      o accent: acima da dobra o accent é papel de CTA e de mais nada.
   3. A UNIDADE E A ATRIBUIÇÃO MORAM NA PRIMEIRA LINHA DO RÓTULO, para a
      dobra poder cortar a banda sem levar informação embora.
   4. TETO DE SETE BLOCOS DE TEXTO. Rótulo e valor contam separado. Quem
      quiser acrescentar um bloco tem que tirar outro — não há folga.
   -------------------------------------------------------------------------- */

.hero {
  display: grid;
  /*  Duas linhas para dois filhos: corpo e prova. O 1fr fica no CORPO, que é
      quem absorve a folga — assim a prova encosta no rodapé da dobra em
      qualquer altura de tela. */
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: var(--hero-alt);
}

/* B. Corpo ---------------------------------------------------------------- */

/*  align-content: end e não center: o vazio que sobrou com a saída da ficha
    fica INTEIRO em cima, entre a barra e a manchete, em vez de dividido em
    dois meios silêncios. É a composição pagando o preço do corte de uma vez
    só — e é a outra metade da resposta ao contraste, junto com o peso
    sólido da cláusula. */
.hero__corpo {
  display: grid;
  gap: var(--esp-5);
  align-content: end;
  /*  Respiro curto em cima: com align-content: end quem faz o vazio superior
      é a folga da grade, não o padding. Um padding grande aqui somaria ao
      vazio em vez de criá-lo, e empurraria a manchete para fora da dobra. */
  padding: var(--esp-6) var(--hero-margem);
}

/*  A manchete ocupa a largura inteira e para numa medida travada: o rag à
    direita fica vazio de propósito. É esse vazio que diz que a página não
    tem coluna de números ao lado do título. */
.hero__manchete {
  /*  min() é obrigatório: 19ch a 40px dá ~412px, mais largo que a coluna de
      um aparelho de 390px, e a manchete vazaria para fora da moldura. */
  max-width: min(var(--hero-medida), 100%);
  font-family: var(--fonte-display);
  font-size: var(--tipo-display);
  font-weight: var(--peso-display-leve);
  line-height: var(--altura-display);
  letter-spacing: var(--tracking-display);
  hyphens: none;
}

/* --------------------------------------------------------------------------
   3.2 A CLÁUSULA EM PESO SÓLIDO — e a regra do sublinhado
   --------------------------------------------------------------------------
   A cláusula que carrega a promessa, "não depende de indicação", é a única
   parte da página em Dupincel Bold; todo o resto da manchete é Regular.
   Numa grotesca, 400 contra 600 seria um empurrão; numa serifada de alto
   contraste é um salto, porque o Regular tem hairline e o Bold não. Custo
   em elementos novos: zero.

   NÃO HÁ SUBLINHADO AQUI, e isso é regra do sistema, não omissão. A versão
   anterior desenhava um traço de caneta por baixo desta cláusula — um
   pseudo-elemento com transbordo, inclinação e entrada animada. Ele saiu
   por decisão do Gustavo, e o que ficou no lugar vale para a página
   inteira: nenhum texto deste sistema é sublinhado, nem por
   text-decoration, nem por borda inferior, nem por traço desenhado. Os
   recursos de ênfase que restam são peso, escala, cor e vazio — e a dobra
   usa três deles.

   O <span class="enfase"> continua ENVOLVENDO a máscara, e não o
   contrário: a máscara tem overflow: hidden para recortar a linha que
   sobe, e o peso precisa valer para a linha inteira, inclusive enquanto
   ela sobe. display: block mantém uma linha por caixa — dois inline
   cairiam lado a lado e desfariam a quebra manual da manchete, que é o
   que sustenta a revelação mascarada.
   -------------------------------------------------------------------------- */
.enfase {
  display: block;
  font-weight: var(--peso-display-solido);
}

/*  A frase única que explica a manchete. Uma frase, não um parágrafo. */
.hero__sub {
  max-width: var(--largura-leitura);
  color: var(--cor-texto-2);
  font-size: var(--tipo-corpo-g);
  line-height: var(--altura-corpo);
}

/*  A ressalva do hero. NÃO ESTÁ MAIS NA DOBRA: desceu para o corpo da
    página, onde ela é argumento para quem já está lendo. A regra fica
    porque o componente continua existindo. */
.hero__nota {
  display: grid;
  gap: var(--esp-2);
  max-width: var(--largura-leitura);
}

.hero__nota-fio {
  width: var(--prova-fio);
  height: var(--fio);
  background: var(--cor-borda-forte);
}

.hero__nota-texto {
  color: var(--cor-texto);
  font-size: var(--tipo-corpo-p);
  line-height: var(--altura-corpo);
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-4);
  align-items: center;
  margin-top: var(--esp-2);
}

/* A ficha — não está mais na dobra ---------------------------------------
   Os quatro campos secos (o que é, prazo, para quem, o que sai) abrem agora
   a primeira seção depois da dobra. O componente é o mesmo; só o lugar
   mudou. Ele custava quatro blocos de texto no celular — dois rótulos e
   dois valores — e era o corte mais barato disponível: escopo é o que o
   leitor procura DEPOIS de decidir que a promessa lhe interessa. */

.ficha {
  display: grid;
  gap: var(--fio);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block: var(--fio) solid var(--cor-borda);
  background: var(--cor-borda);
}

.ficha__campo {
  display: grid;
  gap: var(--esp-2);
  align-content: start;
  padding: var(--esp-3) var(--hero-margem);
  background: var(--cor-fundo);
}

.ficha__rotulo {
  color: var(--cor-texto-2);
  font-size: var(--tipo-nano);
  font-weight: var(--peso-semi);
  letter-spacing: var(--tracking-label);
  line-height: var(--altura-solta);
  text-transform: uppercase;
}

.ficha__valor {
  color: var(--cor-texto);
  font-size: var(--tipo-corpo);
  font-weight: var(--peso-medio);
  line-height: var(--altura-titulo);
  letter-spacing: var(--tracking-h3);
}

/* C. Prova ---------------------------------------------------------------- */

.prova {
  display: grid;
  gap: var(--fio);
  border-top: var(--fio) solid var(--cor-borda);
  background: var(--cor-borda);
}

.prova__linha {
  display: grid;
  gap: var(--esp-2);
  align-content: center;
  padding: var(--esp-5) var(--hero-margem);
  background: var(--cor-fundo);
}

/*  Número e rótulo na MESMA linha de base, ligados por um filete. O filete
    é pseudo-elemento do número para não brigar com o alinhamento: inline
    block com vertical-align em em cai no meio da altura-x. */
.prova__num {
  color: var(--cor-texto);
  font-size: var(--prova-num);
  font-weight: var(--peso-medio);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--tracking-h3);
  line-height: var(--altura-rente);
}

.prova__num::after {
  content: '';
  display: inline-block;
  width: var(--prova-fio);
  height: var(--fio);
  margin-inline: var(--esp-3);
  vertical-align: var(--prova-fio-alinha);
  background: var(--cor-borda-forte);
}

.prova__rotulo {
  color: var(--cor-texto-2);
  font-size: var(--tipo-nano);
  font-weight: var(--peso-semi);
  letter-spacing: var(--tracking-label);
  line-height: var(--altura-solta);
  text-transform: uppercase;
}

/*  A atribuição vive DENTRO do rótulo, como continuação da mesma frase — é
    um bloco de texto só, não dois. O nowrap é a regra 3 da dobra virando
    CSS: a fonte do número nunca se parte em duas linhas, então em 390px o
    rótulo quebra antes dela e "Stédile Advocacia" fica inteiro. */
.prova__fonte { white-space: nowrap; }

@container pagina (min-width: 48rem) {
  /*  Os tokens são redeclarados em .hero, não em .lp: uma @container não
      pode estilizar o próprio container que ela consulta — só descendentes. */
  .hero { --hero-margem: var(--esp-8); --hero-alt: var(--hero-alt-g); }

  .hero__corpo { gap: var(--esp-6); padding-block: var(--esp-9); }

  .ficha { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ficha__campo { padding-block: var(--esp-5); }
  .ficha__valor { font-size: var(--tipo-h6); }

  .prova__linha { padding-block: var(--esp-6); }
}

@container pagina (min-width: 64rem) {
  .prova__linha { display: flex; align-items: baseline; gap: var(--esp-3); }
}

/* --------------------------------------------------------------------------
   4. Micro-label, badge e nota — o papel que o mono cumpria na referência
   -------------------------------------------------------------------------- */

.rotulo {
  display: inline-flex;
  gap: var(--esp-2);
  align-items: center;
  color: var(--cor-texto-2);
  font-size: var(--tipo-micro);
  font-weight: var(--peso-semi);
  letter-spacing: var(--tracking-label);
  line-height: var(--altura-solta);
  text-transform: uppercase;
}

.rotulo--accent { color: var(--cor-accent); }
.rotulo--inverso { color: var(--cor-texto-2-inv); }

.badge {
  display: inline-flex;
  gap: var(--esp-2);
  align-items: center;
  padding: var(--esp-1) var(--esp-3);
  border: var(--fio) solid var(--cor-badge);
  border-radius: var(--raio-pilula);
  color: var(--cor-badge);
  font-size: var(--tipo-nano);
  font-weight: var(--peso-semi);
  letter-spacing: var(--tracking-label);
  line-height: var(--altura-solta);
  text-transform: uppercase;
}

/*  O badge cheio existe, mas é raro de propósito: terracota preenchida
    dentro da mesma dobra de um CTA laranja cria duas manchas quentes
    disputando o olho. Use só onde não houver botão por perto. */
.badge--cheio {
  background: var(--cor-badge);
  border-color: var(--cor-badge);
  color: var(--cor-superficie);
}

.nota {
  color: var(--cor-texto-2);
  font-size: var(--tipo-nano);
  line-height: var(--altura-corpo);
}

.nota--recuada {
  padding-left: var(--esp-4);
  border-left: var(--fio) solid var(--cor-borda);
}

/* --------------------------------------------------------------------------
   5. Ícones — sistema do green-museum, servido por sprite SVG local
   --------------------------------------------------------------------------
   O green-museum usa <iconify-icon>, que baixa cada SVG de uma API em
   tempo de execução. Aqui isso vira um <svg><symbol> inline no HTML: o
   mesmo catálogo, os mesmos tamanhos, a mesma herança de cor — e zero
   requisição. O ícone NUNCA tem cor própria: herda currentColor do pai.
   -------------------------------------------------------------------------- */

.ico {
  width: var(--icone);
  height: var(--icone);
  flex: none;
  fill: none;
  stroke: currentcolor;
  stroke-width: var(--icone-traco);
  stroke-linecap: round;
  stroke-linejoin: round;
  color: inherit;
}

.ico--p { width: var(--icone-p); height: var(--icone-p); }
.ico--m { width: var(--icone-m); height: var(--icone-m); }
.ico--g { width: var(--icone-g); height: var(--icone-g); }
.ico--gg { width: var(--icone-gg); height: var(--icone-gg); }

/*  Ícone de marca (WhatsApp, Instagram, Meta, Google): MONOCROMIA
    PERMANENTE. Herda a cor do container e fica nela — não existe estado
    que revele a cor original. Revelar quatro cores de marca no hover
    quebraria a regra do accent único em um único gesto.
    A classe não é decorativa: ela é a TRAVA. Reafirma traço e preenchimento
    em currentColor e é o único lugar do projeto onde um símbolo de marca
    pode ser pintado — quem for adicionar cor de marca vai ter que passar
    por aqui, e ler isto antes. */
.ico--marca,
.ico--marca:hover,
.ico--marca:focus-visible {
  fill: none;
  stroke: currentcolor;
  color: inherit;
}

/* --------------------------------------------------------------------------
   6. Botões — sistema único, herdado do futureui
   --------------------------------------------------------------------------
   Rótulo de 12px em caixa alta com tracking largo, e a mecânica que vale a
   herança: um preenchimento que DESLIZA de baixo para cima em 300ms. Sem
   glow, sem sombra, sem escala.

   CANTO RETO, NUNCA PÍLULA. O `rounded-full` do futureui foi testado e
   recusado: numa página que vende sobriedade operacional para advogado, o
   canto totalmente arredondado deixa o botão com cara de plástico e é o
   único elemento do sistema que não obedece à régua de fio reto —
   --raio-caixa é 0 em card, ficha, prova e faixa. --raio-botao é 2px: o
   canto de um carimbo, o bastante para o botão não ficar afiado.
   -------------------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  gap: var(--esp-2);
  align-items: center;
  justify-content: center;
  min-height: var(--btn-alt);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: var(--fio) solid transparent;
  border-radius: var(--raio-botao);
  background: transparent;
  font-size: var(--tipo-micro);
  font-weight: var(--peso-semi);
  letter-spacing: var(--tracking-label);
  line-height: var(--altura-solta);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    color var(--mov-medio) var(--mov-suave),
    border-color var(--mov-medio) var(--mov-suave),
    transform var(--mov-instante) var(--mov-suave);
}

/*  O preenchimento deslizante. Fica atrás do rótulo (z-index) e sobe. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateY(100%);
  transition: transform var(--mov-medio) var(--mov-saida);
}

.btn__seta { transition: transform var(--mov-medio) var(--mov-saida); }

.btn:hover:not(:disabled)::before,
.btn:focus-visible:not(:disabled)::before { transform: translateY(0); }

.btn:hover:not(:disabled) .btn__seta { transform: translateX(var(--desloca-seta)); }

.btn:active:not(:disabled) { transform: translateY(var(--desloca-ativo)); }
.btn--secundario:active:not(:disabled) { color: var(--cor-fundo); }

.btn:disabled {
  cursor: not-allowed;
  transform: none;
}

.btn:disabled::before { transform: translateY(100%); }

/* Primário — o único elemento da página que pode ser laranja cheio */
.btn--primario {
  border-color: var(--cor-accent);
  background: var(--cor-accent);
  color: var(--cor-superficie);
}

.btn--primario::before { background: var(--cor-accent-hover); }
.btn--primario:hover:not(:disabled) { border-color: var(--cor-accent-hover); }

/* Secundário — contorno neutro. Não usa uma segunda cor de destaque:
   dois botões coloridos lado a lado é exatamente o erro que a direção
   estética proíbe. */
.btn--secundario {
  /* Cada variante declara o próprio destino de hover, para que a vitrine da
     documentação possa forçar o estado sem inventar valor no markup. */
  --btn-fundo-hover: var(--cor-texto);
  --btn-texto-hover: var(--cor-fundo);
  --btn-borda-hover: var(--cor-texto);
  --btn-fundo-ativo: var(--cor-texto);
  --btn-borda-ativo: var(--cor-texto);
  border-color: var(--cor-texto);
  color: var(--cor-texto);
}

.btn--secundario::before { background: var(--cor-texto); }

/*  :focus-visible junto com :hover, e isto não é detalhe: o preenchimento
    sobe nos dois estados, então se só o hover trocasse a cor do rótulo, o
    botão focado pelo teclado ficaria com texto escuro sobre fundo escuro —
    rótulo invisível para quem navega sem mouse. */
.btn--secundario:hover:not(:disabled),
.btn--secundario:focus-visible:not(:disabled) { color: var(--btn-texto-hover); }

/*  Texto — ações de terceira ordem (ver mais, ler a conta completa).
    Em repouso ele é NEUTRO, com um fio embaixo, e só vira accent no hover.
    Se ele nascesse laranja, a primeira dobra teria três manchas de accent
    (o CTA da barra, o CTA do corpo e este link) e a regra do accent único
    viraria conversa. Sublinhado em vez de cor é o que mantém a affordance. */
.btn--texto {
  min-height: auto;
  padding: var(--esp-1) 0;
  border-radius: var(--raio-caixa);
  color: var(--cor-texto);
  border-bottom: var(--fio) solid var(--cor-borda-forte);
  overflow: visible;
  transition:
    color var(--mov-rapido) var(--mov-suave),
    border-color var(--mov-rapido) var(--mov-suave);
}

.btn--texto::before { content: none; }

.btn--texto:hover:not(:disabled) {
  color: var(--cor-accent-hover);
  border-color: var(--cor-accent-hover);
}

.inverso .btn--texto { color: var(--cor-texto-inv); border-color: var(--cor-borda-inv); }

/*  O botão pequeno encolhe o padding e o rótulo, nunca o alvo de dedo:
    44px é o piso da WCAG 2.5.5, e este é o único botão da barra em 390px. */
.btn--pequeno {
  min-height: var(--btn-alt-p);
  padding: var(--esp-2) var(--esp-4);
  font-size: var(--tipo-nano);
}

.btn--largo { width: 100%; }

.btn:disabled.btn--primario,
.btn:disabled.btn--secundario {
  border-color: var(--cor-borda);
  background: var(--cor-borda);
  color: var(--cor-inativo);
}

/*  Botão sobre fundo escuro (bloco invertido) */
.inverso .btn--secundario { border-color: var(--cor-borda-inv); color: var(--cor-texto-inv); }
.inverso .btn--secundario::before { background: var(--cor-fundo); }
.inverso .btn--secundario:hover:not(:disabled),
.inverso .btn--secundario:focus-visible:not(:disabled) { color: var(--cor-texto); }

/*  O anel de foco muda de cor aqui: laranja sobre #2B2B2B dá 2,52:1. */
.inverso { --cor-foco: var(--cor-fundo); }

/* --------------------------------------------------------------------------
   7. Navbar — logo à esquerda, CTA à direita, e mais nada
   --------------------------------------------------------------------------
   A v2 tinha quatro links de seção na barra (as seis peças · como funciona ·
   resultados · investimento). Saíram os quatro, e a barra ficou com dois
   elementos. São quatro blocos de texto a menos de uma vez só — quase um
   terço do corte que a dobra precisava — e não custam navegação nenhuma:
   a página é uma leitura contínua de cima para baixo, não um site com
   seções para consultar fora de ordem. Quem quer conhecer as seções rola.
   -------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  gap: var(--esp-5);
  align-items: center;
  justify-content: space-between;
  padding: var(--esp-4) var(--esp-5);
  border-bottom: var(--fio) solid var(--cor-borda);
  background: var(--cor-fundo);
}

.nav__marca {
  display: flex;
  align-items: center;
  /*  Área de respiro proporcional à altura da logo — a marca não encosta em
      texto nem em fio. O padding vem SEM margem negativa de compensação: uma
      margem negativa de mesmo valor devolveria a caixa ao tamanho original e
      a zona livre deixaria de existir de fato. O custo é a logo começar 14px
      adentro da margem da barra, e isso é o preço certo. */
  padding: var(--respiro-logo);
}

/*  A logo NUNCA leva filter, mix-blend-mode ou recolorização: a variante
    correta já vem na cor certa. Só altura; a largura é automática. */
.nav__logo { height: var(--logo-alt-nav); width: auto; }

/*  O rótulo do CTA da navbar tem duas versões. Em container estreito o
    rótulo longo somaria ~264px ao lado da logo e estouraria a barra; a
    troca é de conteúdo, não de tamanho de fonte — encolher o rótulo até
    caber é o caminho que deixa o botão ilegível. */
.nav__cta-longo { display: none; }
.nav__cta-curto { display: inline; }

@container pagina (min-width: 30rem) {
  .nav__cta-longo { display: inline; }
  .nav__cta-curto { display: none; }
}

@container pagina (min-width: 64rem) {
  .nav { padding-inline: var(--esp-8); }
}

/* --------------------------------------------------------------------------
   8. Card — e o card numerado (01, 02…) do digital-architect
   --------------------------------------------------------------------------
   Grade sem goteira: os cards se separam por fio de 1px, encostados, como
   uma planta. O hover troca a superfície (creme → branco) e escurece o
   fio — a inversão cromática total do futureui foi guardada para um lugar
   só da página (o bloco de CTA), porque seis retângulos pretos piscando
   numa página creme leem como efeito, não como sobriedade.
   -------------------------------------------------------------------------- */

.grade-cards {
  display: grid;
  gap: var(--fio);
  background: var(--cor-borda);
  border: var(--fio) solid var(--cor-borda);
}

.card {
  display: grid;
  gap: var(--esp-4);
  align-content: start;
  padding: var(--esp-6);
  background: var(--cor-fundo);
  transition:
    background var(--mov-medio) var(--mov-suave),
    color var(--mov-medio) var(--mov-suave);
}

.secao--clara .card { background: var(--cor-superficie); }
.secao--clara .grade-cards { background: var(--cor-borda); }

.card:hover { background: var(--cor-superficie); }
.secao--clara .card:hover { background: var(--cor-fundo); }

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

/*  O CARD NÃO TEM NUMERAÇÃO, e a ausência é a decisão.
    O digital-architect numera todo card 01/02/03, e a v2 herdou isso. Mas
    numerar só carrega informação quando o conteúdo É uma sequência. As seis
    peças do funil não são: o produto de entrada, a vitrine, a campanha, a
    IA, o CRM e o fechamento COEXISTEM — a IA não vem depois da vitrine,
    elas rodam juntas, e um "05" ao lado do CRM promete uma ordem que não
    existe. As quatro etapas, essas sim, são sequência datada (semanas 1–2,
    2–3, 3–5, 4–8) e continuam numeradas em .etapa__num.
    O traço fica: ele não afirma ordem, só abre o card e responde ao hover. */
.card__traco {
  flex: none;
  width: var(--esp-6);
  height: var(--fio);
  background: var(--cor-borda-forte);
  transition: width var(--mov-medio) var(--mov-saida);
}

.card:hover .card__traco { width: var(--esp-9); }

.card__titulo {
  font-size: var(--tipo-h5);
  font-weight: var(--peso-semi);
  line-height: var(--altura-titulo);
  letter-spacing: var(--tracking-h3);
}

.card__texto {
  max-width: var(--largura-estreita);
  color: var(--cor-texto-2);
  font-size: var(--tipo-corpo-p);
  line-height: var(--altura-corpo);
}

.card__icone { color: var(--cor-texto); }

@container pagina (min-width: 40rem) {
  .grade-cards { grid-template-columns: repeat(2, 1fr); }
}

@container pagina (min-width: 64rem) {
  .grade-cards { grid-template-columns: repeat(3, 1fr); }
  .card { padding: var(--esp-8); }
}

/* --------------------------------------------------------------------------
   9. Lista de etapas cronológicas — número + período + título + descrição
   --------------------------------------------------------------------------
   Um dos três componentes que a página mais usa. Não é card: é FAIXA de
   largura total, colada na seguinte por um fio — o padrão de "tabela
   contínua" do digital-architect. Cada faixa recompõe internamente uma
   grade de três colunas (número · período+título · descrição) alinhadas
   pela linha de base, e o eixo do tempo aparece como um fio vertical que
   atravessa a numeração.
   -------------------------------------------------------------------------- */

.etapas {
  display: grid;
  border-top: var(--fio) solid var(--cor-borda);
}

.etapa {
  /*  O respiro da faixa é token local: o numeral e o eixo do tempo se
      penduram nele, senão o numeral fica para trás quando a faixa cresce. */
  --etapa-respiro: var(--esp-6);
  position: relative;
  display: grid;
  gap: var(--esp-3);
  padding: var(--etapa-respiro) 0 var(--etapa-respiro) var(--esp-8);
  border-bottom: var(--fio) solid var(--cor-borda);
  transition: background var(--mov-medio) var(--mov-suave);
}

.etapa:hover { background: var(--cor-superficie); }
.secao--clara .etapa:hover { background: var(--cor-fundo); }

/*  O eixo do tempo: um fio vertical alinhado ao centro do numeral, que
    começa na primeira etapa e termina na última. */
.etapa::before {
  content: '';
  position: absolute;
  left: calc(var(--esp-4) - var(--fio) / 2);
  top: 0;
  bottom: 0;
  width: var(--fio);
  background: var(--cor-borda);
}

.etapa:first-child::before { top: var(--etapa-respiro); }
.etapa:last-child::before { bottom: calc(100% - var(--etapa-respiro) - var(--esp-2)); }

.etapa__num {
  position: absolute;
  left: 0;
  top: var(--etapa-respiro);
  display: grid;
  place-items: center;
  width: var(--esp-6);
  height: var(--esp-6);
  border-radius: var(--raio-pilula);
  background: var(--cor-fundo);
  color: var(--cor-accent);
  font-size: var(--tipo-micro);
  font-weight: var(--peso-semi);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-cod);
  transition: background var(--mov-medio) var(--mov-suave), color var(--mov-medio) var(--mov-suave);
}

.secao--clara .etapa__num { background: var(--cor-superficie); }
.etapa:hover .etapa__num { background: var(--cor-accent); color: var(--cor-superficie); }

.etapa__periodo {
  color: var(--cor-texto-2);
  font-size: var(--tipo-micro);
  font-weight: var(--peso-semi);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.etapa__titulo {
  font-size: var(--tipo-h5);
  font-weight: var(--peso-semi);
  line-height: var(--altura-titulo);
  letter-spacing: var(--tracking-h3);
}

.etapa__texto {
  max-width: var(--largura-leitura);
  color: var(--cor-texto-2);
  font-size: var(--tipo-corpo-p);
  line-height: var(--altura-corpo);
}

/*  A partir de 48rem a faixa vira grade de três colunas com alinhamento
    pela linha de base — o padrão "rótulo → conteúdo → valor" que a página
    reusa em specs, planos e entregas. */
@container pagina (min-width: 48rem) {
  .etapa {
    grid-template-columns: minmax(0, var(--col-etapa)) minmax(0, 1fr);
    gap: var(--esp-8);
    align-items: baseline;
    --etapa-respiro: var(--esp-8);
  }

  .etapa__cabeca { display: grid; gap: var(--esp-2); }
  .etapa__texto { padding-right: var(--esp-9); }
}

/* --------------------------------------------------------------------------
   10. Bloco de números grandes (cases) — valor em destaque + legenda
   --------------------------------------------------------------------------
   O segundo dos três componentes críticos. Grade sem goteira, separada por
   fios: os números formam uma régua horizontal, não um conjunto de cards.
   A cifra usa tabular-nums para os algarismos ficarem alinhados entre si e
   fica um degrau abaixo do display — número nenhum disputa a manchete.
   -------------------------------------------------------------------------- */

.case {
  display: grid;
  gap: var(--esp-6);
  padding-block: var(--esp-8);
  border-top: var(--fio) solid var(--cor-borda);
}

.case__cabeca { display: grid; gap: var(--esp-3); max-width: var(--largura-leitura); }

.case__quem {
  font-size: var(--tipo-h4);
  font-weight: var(--peso-semi);
  line-height: var(--altura-titulo);
  letter-spacing: var(--tracking-h3);
}

.case__linha { color: var(--cor-texto-2); font-size: var(--tipo-corpo-p); line-height: var(--altura-corpo); }

.cifras {
  display: grid;
  gap: var(--fio);
  background: var(--cor-borda);
  border-block: var(--fio) solid var(--cor-borda);
}

.cifra {
  display: grid;
  gap: var(--esp-2);
  align-content: start;
  padding: var(--esp-5) var(--esp-5) var(--esp-6);
  background: var(--cor-fundo);
  transition: background var(--mov-medio) var(--mov-suave);
}

.secao--clara .cifra { background: var(--cor-superficie); }
.cifra:hover { background: var(--cor-superficie); }
.secao--clara .cifra:hover { background: var(--cor-fundo); }

/*  Qualificador que não cabe na cifra ("menos de") entra DENTRO do valor,
    na mesma linha, a 30% do corpo. Numa linha própria acima ele empurraria
    só as células que o têm e desalinharia a régua: as cifras vizinhas
    ficariam em linhas de base diferentes, que é o defeito que mais
    denuncia uma régua mal feita. */
.cifra__prefixo {
  color: var(--cor-texto-2);
  font-size: var(--cifra-prefixo);
  font-weight: var(--peso-semi);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.cifra__valor {
  color: var(--cor-accent);
  font-size: var(--tipo-cifra);
  font-weight: var(--peso-semi);
  font-variant-numeric: tabular-nums;
  line-height: var(--altura-rente);
  /*  Tracking da INTER, não o da Dupincel: a cifra é número, e número nesta
      página é sempre Inter. É o único lugar em que a Inter ainda ocupa um
      corpo de display. */
  letter-spacing: var(--tracking-display-inter);
  white-space: nowrap;
}


/*  Duas cifras irmãs na mesma célula (os dois honorários fechados): empilham
    no tamanho menor, em vez de espremer as duas numa linha só. */
.cifra__valor--par { display: grid; gap: var(--esp-1); font-size: var(--tipo-cifra-p); }

/*  Unidade e prefixo (R$, mil, dias) entram menores e em peso médio, para que
    o algarismo continue sendo o que o olho pega primeiro. */
.cifra__unidade {
  font-size: var(--cifra-unidade);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tracking-corpo);
}

.cifra__legenda {
  max-width: var(--largura-estreita);
  color: var(--cor-texto-2);
  font-size: var(--tipo-corpo-p);
  line-height: var(--altura-solta);
  text-wrap: balance;
}

@container pagina (min-width: 34rem) {
  .cifras { grid-template-columns: repeat(2, 1fr); }
}

@container pagina (min-width: 64rem) {
  .cifras { grid-template-columns: repeat(4, 1fr); }
  .case { grid-template-columns: minmax(0, var(--col-case)) minmax(0, 1fr); gap: var(--esp-9); }
  .case__cabeca { padding-right: var(--esp-6); }
}

/* --------------------------------------------------------------------------
   11. Lista de bullets longos
   --------------------------------------------------------------------------
   O terceiro componente crítico: item com afirmação curta em negrito e um
   parágrafo de explicação embaixo — é o formato de "o que o escritório
   precisa colocar" e de "o que a gente não faz". Não usa marcador redondo:
   o marcador é um ícone de 20px alinhado à primeira linha, e o item se
   apoia num fio, para aguentar 4 a 6 itens sem virar parede de texto.
   -------------------------------------------------------------------------- */

.bullets { display: grid; }

.bullet {
  display: grid;
  grid-template-columns: var(--esp-7) minmax(0, 1fr);
  gap: var(--esp-2) var(--esp-3);
  padding-block: var(--esp-5);
  border-bottom: var(--fio) solid var(--cor-borda);
}

.bullet:first-child { border-top: var(--fio) solid var(--cor-borda); }

.bullet__marca {
  grid-row: span 2;
  display: flex;
  justify-content: flex-start;
  padding-top: var(--esp-1);
  color: var(--cor-accent);
}

.bullet__titulo {
  font-size: var(--tipo-corpo-g);
  font-weight: var(--peso-semi);
  line-height: var(--altura-titulo);
  letter-spacing: var(--tracking-h3);
  text-wrap: balance;
}

.bullet__texto {
  grid-column: 2;
  max-width: var(--largura-leitura);
  color: var(--cor-texto-2);
  font-size: var(--tipo-corpo-p);
  line-height: var(--altura-corpo);
}

/*  Variante "anti-oferta": a lista do que a gente NÃO faz. Muda o ícone e
    a cor do marcador para o tom de badge — nunca para uma cor nova. */
.bullets--limite .bullet__marca { color: var(--cor-badge); }

@container pagina (min-width: 48rem) {
  .bullet {
    grid-template-columns: var(--esp-7) minmax(0, var(--col-bullet)) minmax(0, 1fr);
    gap: var(--esp-5);
    align-items: baseline;
    padding-block: var(--esp-6);
  }

  /*  O marcador sai do span de duas linhas: em três colunas tudo cabe numa
      linha só, e o span deixava uma segunda linha vazia cobrando a goteira
      inteira embaixo de cada item. */
  .bullet__marca { grid-row: auto; }
  .bullet__texto { grid-column: 3; }
}

/* --------------------------------------------------------------------------
   12. Bloco de investimento
   --------------------------------------------------------------------------
   Estrutura "rótulo → conteúdo → valor" alinhada à direita, o padrão de
   lista de spec do digital-architect. Sem card, sem cor de fundo: o preço
   é uma linha de tabela honesta, não um plano de SaaS em destaque.
   -------------------------------------------------------------------------- */

.investimento { display: grid; }

.investimento__linha {
  display: grid;
  gap: var(--esp-1) var(--esp-5);
  padding-block: var(--esp-5);
  border-bottom: var(--fio) solid var(--cor-borda);
}

.investimento__linha:first-child { border-top: var(--fio) solid var(--cor-borda); }

.investimento__nome {
  font-size: var(--tipo-h6);
  font-weight: var(--peso-semi);
  line-height: var(--altura-titulo);
}

.investimento__detalhe { color: var(--cor-texto-2); font-size: var(--tipo-corpo-p); line-height: var(--altura-corpo); }

.investimento__valor {
  color: var(--cor-texto);
  font-size: var(--tipo-h4);
  font-weight: var(--peso-semi);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-h3);
}

.investimento__valor small {
  color: var(--cor-texto-2);
  font-size: var(--tipo-corpo-p);
  font-weight: var(--peso-medio);
}

@container pagina (min-width: 48rem) {
  .investimento__linha {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
  }

  .investimento__detalhe { grid-column: 1; }
  .investimento__valor { grid-row: span 2; text-align: right; }
}

/* --------------------------------------------------------------------------
   13. Bloco invertido — a inversão cromática do futureui, uma vez só
   -------------------------------------------------------------------------- */

.inverso {
  padding: var(--esp-9) var(--esp-5);
  background: var(--cor-texto);
  color: var(--cor-texto-inv);
}

.inverso .secao__titulo { color: var(--cor-texto-inv); }
.inverso .secao__linha,
.inverso .nota { color: var(--cor-texto-2-inv); }

.inverso__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-4); margin-top: var(--esp-7); }

@container pagina (min-width: 48rem) {
  .inverso { padding: var(--esp-11) var(--esp-8); }
}

/* --------------------------------------------------------------------------
   14. Rodapé
   -------------------------------------------------------------------------- */

.rodape {
  display: grid;
  gap: var(--esp-6);
  padding: var(--esp-9) var(--esp-5);
  border-top: var(--fio) solid var(--cor-borda);
}

.rodape__marca { display: grid; gap: var(--esp-4); }

/*  32px de altura e opacidade 0.7 — o tamanho de rodapé do brand-guide.
    Opacidade não é recolorir: a variante da logo continua sendo a certa. */
.rodape__logo {
  height: var(--logo-alt-rodape);
  width: auto;
  opacity: var(--logo-op-rodape);
  padding: calc(var(--logo-alt-rodape) * var(--logo-respiro));
  margin-block: calc(var(--logo-alt-rodape) * var(--logo-respiro) * -1);
  box-sizing: content-box;
}

.rodape__texto { color: var(--cor-texto-2); font-size: var(--tipo-corpo-p); line-height: var(--altura-corpo); max-width: var(--largura-estreita); }

.rodape__links { display: flex; flex-wrap: wrap; gap: var(--esp-5); }

.rodape__link {
  display: inline-flex;
  gap: var(--esp-2);
  align-items: center;
  color: var(--cor-texto-2);
  font-size: var(--tipo-micro);
  font-weight: var(--peso-semi);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  transition: color var(--mov-rapido) var(--mov-suave);
}

.rodape__link:hover { color: var(--cor-accent); }

.rodape__fim {
  padding-top: var(--esp-5);
  border-top: var(--fio) solid var(--cor-borda);
  color: var(--cor-texto-2);
  font-size: var(--tipo-nano);
  line-height: var(--altura-corpo);
}

@container pagina (min-width: 48rem) {
  .rodape { grid-template-columns: minmax(0, 1fr) auto; padding-inline: var(--esp-8); align-items: start; }
  .rodape__fim { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   15. Animações
   --------------------------------------------------------------------------
   Quatro classes, e só. Toda entrada é fade + deslocamento curto; todo
   hover é troca de superfície ou deslocamento de 8px. Nada em loop, nada
   de glow, beam, blur ou fundo animado.

   Eram cinco: a quinta desenhava o traço por baixo da manchete e saiu
   junto com ele. Nenhuma das quatro que ficaram desenha linha alguma sob
   texto — .fio-cresce é o fio de estrutura da página, e ele separa blocos,
   nunca sublinha uma frase.
   -------------------------------------------------------------------------- */

/*  (a) .revela — a entrada padrão. O observer em lp.js acrescenta
    .revela--ativo quando o elemento cruza a viewport. O atraso sai de
    `--i` (posição na fila), calculado aqui, não escrito no nome da classe. */
.revela {
  opacity: 0;
  transform: translateY(var(--desloca-revela));
  transition:
    opacity var(--mov-lento) var(--mov-saida),
    transform var(--mov-lento) var(--mov-saida);
  transition-delay: calc(var(--i, 0) * var(--mov-passo));
}

.revela--ativo { opacity: 1; transform: none; }

/*  (b) .mascara — revelação de título por máscara: a linha sobe de dentro
    de um retângulo que a recorta. É a animação mais visível do sistema e
    por isso EXISTE SÓ NO HERO. Repetida em outras seções vira maneirismo.
    Cada linha do título é um .mascara com um .mascara__linha dentro. */
.mascara { display: block; overflow: hidden; }

.mascara__linha {
  display: block;
  transform: translateY(var(--desloca-mascara));
  opacity: 0;
  transition:
    transform var(--mov-mascara) var(--mov-saida),
    opacity var(--mov-mascara) var(--mov-saida);
  transition-delay: calc(var(--i, 0) * var(--mov-passo));
}

.mascara--ativo .mascara__linha { transform: translateY(0); opacity: 1; }

/*  (c) .fio-cresce — o fio de 1px que abre uma seção cresce da esquerda
    para a direita. É o único movimento decorativo do sistema, e ele
    desenha exatamente o elemento que já estrutura a página. */
/*  display: block e obrigatorio: em <span> inline nao substituido o CSS
    ignora width e height, e o fio simplesmente nao existe na tela. */
.fio-cresce {
  display: block;
  height: var(--fio);
  background: var(--cor-borda-forte);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--mov-lento) var(--mov-saida);
  transition-delay: calc(var(--i, 0) * var(--mov-passo));
}

.revela--ativo.fio-cresce,
.revela--ativo .fio-cresce { transform: scaleX(1); }

/*  (d) .conta — o número da cifra sobe um degrau curto ao entrar. Mesma
    mecânica da revelação, com deslocamento menor: a cifra é pesada e um
    salto de 32px nela chamaria atenção para o movimento, não para o dado. */
.conta {
  opacity: 0;
  transform: translateY(var(--desloca-conta));
  transition:
    opacity var(--mov-lento) var(--mov-saida),
    transform var(--mov-lento) var(--mov-saida);
  transition-delay: calc(var(--i, 0) * var(--mov-passo));
}

.revela--ativo .conta,
.conta.revela--ativo { opacity: 1; transform: none; }

/*  Sem JS, nada fica invisível: a página inteira aparece. */
.sem-js .revela,
.sem-js .conta,
.sem-js .mascara__linha { opacity: 1; transform: none; }

.sem-js .fio-cresce { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   16. Sem utilitários
   --------------------------------------------------------------------------
   Este arquivo não tem camada de utilitários (.pilha, .acoes, .medida e
   companhia). Cada uma delas seria uma classe que carrega layout no nome,
   que é a mesma doença do .delay-200 da referência, só que em outra
   propriedade. Quando um componente precisa de empilhamento ou de medida de
   leitura, ele declara isso na própria regra, com os tokens.
   -------------------------------------------------------------------------- */