/* ════════════════════════════════════════════════════════════════════════
   LANDING · a vitrine pública (index.html)
   Lei: 03 (tokens, nada hardcoded) · 04 (mobile-first) · 29 (vocabulário)
   Só esta folha + tokens.css — a landing não carrega o CSS do app para não
   se acorrentar a ele (e vice-versa).
   ════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
/* A landing nao carrega o base.css, entao a trava de arrasto lateral
   (lei de app de verdade, 20/08) precisa existir aqui tambem. */
html, body {
  max-width: 100%;
  /* ⚠️ A ORDEM IMPORTA. `hidden` cria contêiner de rolagem e MATA o
     position:sticky da barra de cima; `clip` corta igual sem criar.
     Navegador que não conhece clip fica no hidden e só perde a barra grudada. */
  overflow-x: hidden;
  overflow-x: clip;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }

.lp-wrap { max-width: var(--container-landing); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 768px)  { .lp-wrap { padding: 0 var(--gutter-tablet); } }
@media (min-width: 1024px) { .lp-wrap { padding: 0 var(--gutter-desktop); } }

/* A altura da topbar mora no :root porque a CENA precisa dela para subir
   por trás — e a cena é IRMÃ da topbar, não filha: não herdaria daqui. */
:root { --lp-topbar-h: 68px; }
@media (max-width: 767px) { :root { --lp-topbar-h: 60px; } }

/* ── Topbar ─────────────────────────────────────────────────────────── */
/* Clara, seguindo o tema do site. Fica POR CIMA da fotografia da cena (a
   cena sobe por trás dela pela margem negativa), translúcida com desfoque,
   separada por um fio. Zero JavaScript: nada de ouvinte de rolagem trocando
   classe, que é onde esse padrão costuma piscar. */
.lp-topbar {
  --lp-texto:   #171717;
  --lp-sec:     #605d57;
  --lp-superf:  rgba(23, 23, 23, 0.05);
  --lp-borda:   #e7e2da;

  position: sticky; top: 0; z-index: var(--z-dropdown);
  color: var(--lp-texto);
  background: #faf3eb;   /* navegador antigo sem color-mix cai aqui */
  background: color-mix(in srgb, #faf3eb 76%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  /* O fio precisa ser translúcido junto: linha sólida sobre vidro é o que
     faz a barra parecer colada por cima em vez de flutuar. */
  border-bottom: 1px solid color-mix(in srgb, var(--lp-borda) 70%, transparent);
}
.lp-topbar__linha {
  display: flex; align-items: center; gap: var(--space-4);
  height: var(--lp-topbar-h);
}
/* ── O logo ──
   Dois arquivos, duas alturas. A escrita fica em MEIA altura do símbolo.

   Foi de 57% para 50% em 22/09, depois de comparar as quatro alturas lado
   a lado: o símbolo tem volume 3D e laranja, e a 57% a escrita ENCARAVA
   ele de igual em vez de acompanhar. Num lockup com um símbolo forte, a
   escrita é coadjuvante — quando ela empata, o conjunto parece estourado,
   que foi exatamente a palavra que o Marcelo usou.
   Altura fixa e largura automática: nenhum dos dois distorce se o recorte
   mudar. A escrita leva o alt="Venda Fácil"; o símbolo vai com alt vazio,
   senão o leitor de tela anuncia a marca duas vezes. */
.lp-logo {
  /* 6px e não 9: o símbolo tem volume 3D e a sombra dele já ocupa alguns
     pixels à direita — o espaço ÓPTICO era maior que o medido. */
  display: flex; align-items: center; gap: 6px;
  text-decoration: none;
}
.lp-logo__simbolo { height: 28px; width: auto; }
.lp-logo__escrita { height: 14px; width: auto; }

@media (max-width: 767px) {
  .lp-logo { gap: 5px; }
  .lp-logo__simbolo { height: 25px; }
  .lp-logo__escrita { height: 13px; }
}
@media (max-width: 460px) {
  .lp-logo { gap: 5px; }
  .lp-logo__simbolo { height: 22px; }
  .lp-logo__escrita { height: 12px; }
}
/* Abaixo de 420px a escrita sai e fica so o simbolo. A conta a 360px:
   logo 128 + acoes 239 = 367px para 320px uteis — estourava em 47px e
   empurrava a pagina de lado. So o simbolo derruba o logo para 37px.
   O link continua anunciado pelo aria-label, entao nada se perde para
   quem usa leitor de tela. */
@media (max-width: 420px) {
  .lp-logo__escrita { display: none; }
}

/* ── Variante da cena ──
   A topbar fica POR CIMA da fotografia: translúcida com desfoque, separada
   por um fio de 1px. A foto sobe por trás dela pela margem negativa da
   .lp-cena, logo abaixo. Sem JavaScript: nada de ouvinte de rolagem
   trocando classe, que é onde esse padrão costuma piscar. */
/* Sobre a cena a topbar quase some: mesmo marfim da peça, sem borda.
   O briefing pede header leve, com respiro, sem peso. */
.lp-topbar--cena {
  background: rgba(250, 243, 235, 0.82);
  border-bottom-color: transparent;
}
/* margin-right garante a folga entre "Perguntas" e as ações mesmo quando
   a barra aperta. Só o margin-left:auto das ações não bastava: em tela
   estreita os dois grupos encostavam e a navegação virava uma coisa só
   com os botões. */
.lp-topbar__nav {
  display: none; gap: var(--space-8);
  margin-left: var(--space-10);
  margin-right: var(--space-10);
}
/* #3a3a3a em repouso, grafite no hover. Sem sublinhado, sem efeito: a
   mudanca de tom sozinha ja diz que e clicavel. */
.lp-topbar__nav a {
  text-decoration: none;
  color: #3a3a3a;
  font-size: var(--body-sm-size);
  font-weight: var(--fw-medium);
  letter-spacing: -0.006em;
  transition: color 180ms var(--easing-standard);
}
.lp-topbar__nav a:hover { color: #171717; }
/* O ghost já vem resolvido do bloco de botões — aqui ficava uma regra com
   especificidade maior que reescrevia a cor e anulava o contorno novo. */
.lp-topbar .lp-btn:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 3px; }
/* space-5 (20px) entre Entrar e Criar: eles sao acoes de PESO diferente
   e precisam de folga para nao serem lidos como um par. */
.lp-topbar__acoes { margin-left: auto; display: flex; align-items: center; gap: var(--space-5); }
/* A navegação só aparece a partir de 1024px, não de 768.
   A 768px a conta não fecha: logo 145 + navegação 440 + ações 263 = 848px
   para 720px úteis — estoura em 128px, e os itens espremiam ou quebravam.
   Entre 768 e 1023 fica logo + Entrar + Criar meu vendedor, que é o que
   importa ali; as seções continuam alcançáveis rolando a página.
   Isto NÃO é o menu de celular: é o mesmo cabeçalho, com menos itens. */
@media (min-width: 1024px) { .lp-topbar__nav { display: flex; } }
/* Celular estreito: os dois botões + logo dividem 360px — compacta sem sumir. */
@media (max-width: 460px) {
  .lp-topbar__linha { gap: var(--space-2); }
  .lp-topbar__acoes .lp-btn { padding: 0 var(--space-3); min-height: 34px; }
  .lp-topbar__acoes { gap: var(--space-3); }
}

/* ── Botões ─────────────────────────────────────────────────────────────
   Raio md (10px) em todos, não lg: a landing inteira passa a ter um raio
   só, e o Venda Fácil deixa de parecer arredondado demais.
   180ms em vez de 150ms — perceptível sem parecer lento.
   ───────────────────────────────────────────────────────────────────── */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  font-family: inherit; font-size: var(--body-sm-size); font-weight: var(--fw-medium);
  line-height: 1;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background 180ms var(--easing-standard),
              border-color 180ms var(--easing-standard),
              color 180ms var(--easing-standard),
              transform 180ms var(--easing-standard),
              box-shadow 180ms var(--easing-standard);
}
.lp-btn:active { transform: scale(0.985); }

/* O ÚNICO botão cheio da página. Texto grafite sobre o laranja — branco
   daria 2.49:1 e reprovaria; grafite dá 7.5:1. */
.lp-btn--primary { background: var(--color-brand-500); color: #171717; }
.lp-btn--primary:hover { background: var(--color-brand-600); color: #171717; }

/* "Entrar" é ação secundária, não CTA. Só contorno: fundo transparente,
   borda bege. Antes ele tinha fundo branco cheio e competia com o botão
   principal — dois botões sólidos lado a lado anulam a hierarquia. */
.lp-btn--ghost {
  color: #171717;
  background: transparent;
  border-color: #d7cfc5;
}
.lp-btn--ghost:hover {
  background: rgba(23, 23, 23, 0.035);
  border-color: #c7bdb1;
}

.lp-btn--sm  { min-height: 36px; padding: 0 var(--space-4); font-size: var(--body-sm-size); }
.lp-btn--lg  { min-height: var(--control-h-lg); padding: 0 var(--space-6); font-size: var(--body-size); }

/* CTA de marketing: 56px, o passo acima do botão de produto. A elevação no
   hover é de 1px — o suficiente para o dedo saber que respondeu, longe do
   salto que faz a página parecer brinquedo. */
.lp-btn--cta {
  min-height: var(--control-h-cta);
  padding: 0 var(--space-8);
  font-size: var(--body-size);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.006em;
  border-radius: var(--radius-md);
}
.lp-btn--cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(242, 138, 22, 0.28);
}
.lp-btn--cta:active { transform: translateY(0) scale(0.99); box-shadow: none; }

/* ════════════════════════════════════════════════════════════════════════
   A CENA — Hero V3, editorial e clara
   Ver docs/33_FUNDACAO_VISUAL.md

   Texto à esquerda, peça visual à direita, muito ar. Sem fundo escuro,
   sem card de WhatsApp, sem fotografia de escritório.

   ── NEUTROS QUENTES ─────────────────────────────────────────────────────
   Os neutros globais do projeto são FRIOS (azulados) porque servem ao app.
   A landing pede areia/marfim. Em vez de mexer na paleta global — que o app
   inteiro usa e que está validada — a cena declara os seus próprios, aqui.

   O --lp-fundo #faf3eb foi TIRADO DA IMAGEM (amostra do pixel do canto).
   Se não casasse, apareceria uma emenda entre o fundo e a peça.
   ════════════════════════════════════════════════════════════════════════ */
.lp-cena {
  --lp-fundo:      #faf3eb;
  --lp-superficie: #ffffff;
  --lp-texto:      #171717;
  --lp-sec:        #605d57;
  --lp-borda:      #e7e2da;

  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 82vh;
  margin-top: calc(var(--lp-topbar-h, 68px) * -1);
  padding: calc(var(--lp-topbar-h, 68px) + var(--space-12)) 0 var(--space-12);
  color: var(--lp-texto);
  background: var(--lp-fundo);
}

.lp-cena__grade { display: grid; gap: var(--space-10); width: 100%; align-items: center; }
@media (min-width: 1024px) {
  .lp-cena__grade {
    /* 44 / 56 — o visual pesa mais que o texto, de propósito. */
    /* A coluna da direita fica VAZIA (a arte virou camada absoluta),
       mas o fr continua reservando o espaco dela. */
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
    gap: var(--space-12);
  }
}

/* ── Rótulo ── caixa alta miúda, sem cápsula: a pílula arredondada é o que
   faz uma Hero parecer template. ── */
.lp-rotulo {
  margin: 0 0 var(--space-5);
  font-size: var(--caption-size);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #605d57;
}

/* ── Manchete ── duas frases, duas linhas. Cada uma em seu <span> para a
   quebra ser decisão de design, não acidente de largura. Sem laranja: o
   laranja é do botão, e dividir a manchete enfraquece as duas coisas. ── */
.lp-cena__titulo {
  margin: 0 0 var(--space-6);
  font-family: var(--font-display);
  /* Teto em 60px, não 64: a 64 a segunda linha encostava na arte em
     notebook de 1366. A entrelinha subiu de 1.06 para 1.08 — a 1.06 as
     duas linhas quase se tocavam nos acentos do "á" e do "ã". */
  font-size: clamp(38px, 1.9rem + 2.4vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.032em;
  font-weight: var(--fw-bold);
  color: var(--lp-texto);
  text-wrap: balance;
  max-width: 15ch;
}
/* Uma frase por linha no desktop: a quebra é decisão de design, não
   acidente de largura. No celular elas voltam a correr juntas. */
@media (min-width: 768px) { .lp-cena__titulo span { display: block; } }

.lp-cena__sub {
  margin: 0 0 var(--space-10);
  font-size: var(--body-lg-size);
  line-height: 1.6;
  color: #605d57;
  /* 44ch: a medida em que o olho não perde a linha ao voltar. Mais largo
     que isso e a leitura trava; mais estreito e vira coluna de jornal. */
  max-width: 44ch;
}

/* space-6 entre o botão e o elo, alinhados pela base do texto. */
.lp-cena__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }

/* O secundário é um ELO, não um segundo botão: dois retângulos iguais lado
   a lado são a assinatura do template genérico. */
/* O secundário é um ELO, não um segundo botão: dois retângulos iguais lado
   a lado são a assinatura do template genérico.
   Um ponto abaixo do CTA no corpo, e a sublinha em laranja translúcido —
   presente, sem virar um traço grosso embaixo da frase. */
.lp-elo {
  display: inline-flex; align-items: center; gap: 7px;
  color: #3a3a3a;
  font-size: var(--body-sm-size); font-weight: var(--fw-medium);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(163, 90, 9, 0.45);
  transition: color 180ms var(--easing-standard),
              border-color 180ms var(--easing-standard);
}
.lp-elo:hover { color: #171717; border-bottom-color: var(--color-brand-700); text-decoration: none; }
/* A seta anda 3px; o gap NÃO muda, senão o botão ao lado dança junto. */
.lp-elo svg { transition: transform 180ms var(--easing-standard); }
.lp-elo:hover svg { transform: translateX(3px); }

/* Microcopy: menor que tudo, e com respiro suficiente para não ser lida
   como parte do botão. */
.lp-cena__nota {
  /* 28px: quatro a menos que o space-8. Fora da escala de propósito — a 32
     a microcopy soltava do bloco de ação e parecia outro assunto. */
  margin: 28px 0 0;
  font-size: var(--body-sm-size);
  line-height: 1.5;
  color: #6b6760;
}

/* ════════════════════════════════════════════════════════════════════════
   A PEÇA DA DIREITA
   A imagem já traz a forma gráfica de apoio (o arco laranja). Não
   acrescento outra — seriam duas disputando o mesmo olhar.
   Assimetria: no desktop largo a peça avança além da goteira do container,
   encostando na borda da tela. É o que tira a cena do ar de template.
   ════════════════════════════════════════════════════════════════════════ */
.lp-cena__visual { position: relative; }
.lp-cena__visual img { display: block; width: 100%; height: auto; }

/* ── COMO A ARTE SE INTEGRA ──
   A peça NÃO é um card lateral: é o campo visual da seção.

   O problema que restava era geométrico, não de cor. Esta arte tem o canto
   superior direito em pedra escura (#9d836c) — então, ao contrário da
   anterior, ela NÃO pode ter a aresta de cima à mostra: apareceria uma
   linha marrom cortada contra o marfim.

   A solução: a arte preenche a ALTURA INTEIRA da seção e deixa a largura
   seguir a proporção. Como fica mais alta e mais larga que a seção, as
   arestas de cima, de baixo e da direita são cortadas pelo overflow da
   própria .lp-cena — não existe aresta para enxergar.

   Sobra uma só, a da esquerda, e ela é dissolvida por máscara. Como a
   metade esquerda da arte já é marfim liso (amostrado: #fbf5ee), o que
   desbota ali é fundo sobre fundo — a transição fica invisível.
   ───────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .lp-cena__visual {
    position: absolute;
    top: 0; bottom: 0; right: 0;
    /* Largura CONTROLADA, não livre. Com width:auto a arte ficava 1246px
       de largura numa tela de 1024 e passava por trás do texto. */
    width: min(60vw, 1120px);
    margin: 0;
    pointer-events: none;   /* não rouba o clique de nada por baixo */
  }
  .lp-cena__visual picture { display: block; width: 100%; height: 100%; }
  .lp-cena__visual img {
    width: 100%; height: 100%;
    max-width: none;        /* o max-width: 100% global travaria a largura */
    /* `cover` + `right center`: a altura preenche a seção (some a aresta de
       cima e a de baixo) e o recorte come pela ESQUERDA — que nessa arte é
       espaço negativo. O celular, os cartões e o gráfico ficam todos. */
    object-fit: cover;
    object-position: right center;

    /* DUAS máscaras cruzadas:

       1. A LINEAR dissolve a aresta esquerda, a única que sobra. O que
          desaparece ali é marfim sobre marfim (#fbf5ee da arte contra
          #faf3eb do fundo) — a transição some porque são a mesma cor.

       2. A RADIAL alivia as PONTAS. O celular fica no centro-direita e
          mantém opacidade cheia; os cartões periféricos (carrinho,
          gráfico, etiqueta) chegam a 92% nas bordas. São 8% a menos de
          peso — o bastante para eles pararem de disputar com o celular,
          pouco o bastante para ninguém perceber que há um efeito.
          É o pedido de "menos chamativo, mais sofisticado" resolvido sem
          tocar num pixel da arte. */
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, rgba(0,0,0,0.55) 10%, #000 24%),
      radial-gradient(78% 86% at 62% 50%, #000 0%, #000 58%, rgba(0,0,0,0.92) 100%);
            mask-image:
      linear-gradient(to right, transparent 0%, rgba(0,0,0,0.55) 10%, #000 24%),
      radial-gradient(78% 86% at 62% 50%, #000 0%, #000 58%, rgba(0,0,0,0.92) 100%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
}

/* ── Tablet e celular ──
   A arte volta para o fluxo, abaixo do texto, largura inteira. Aqui as
   quatro arestas ficam à mostra, então desbotam as duas que se enxergam:
   a de cima (onde está a pedra escura) e a de baixo (sombra do pedestal).
   As laterais encostam na goteira e não desenham aresta. */
@media (max-width: 1023px) {
  .lp-cena__visual img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 88%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 88%, transparent 100%);
  }
}

/* ── As fichas ── os dois sinais de produto que a imagem sozinha não diz.
   Superfície branca, borda fina, sombra quase inexistente: profundidade
   vem de sobreposição, não de sombra pesada. ── */

/* ── Tablet e celular ── reorganiza, não comprime: texto primeiro, peça
   depois, ocupando quase toda a largura. Nada ultrapassa a tela. ── */
@media (max-width: 1023px) {
  .lp-cena { min-height: 0; padding: calc(var(--lp-topbar-h, 60px) + var(--space-12)) 0 var(--space-16); }
  .lp-cena__grade { gap: var(--space-12); }
  .lp-cena__titulo { max-width: 18ch; font-size: clamp(38px, 2.2rem + 1.6vw, 52px); }
  .lp-cena__sub { font-size: var(--body-size); max-width: 52ch; margin-bottom: var(--space-8); }
}
@media (max-width: 767px) {
  /* Coluna: no celular o polegar e o cursor, e o CTA ocupa a linha toda.
     O elo desce alinhado a esquerda, claramente subordinado. */
  .lp-cena__acoes { flex-direction: column; align-items: stretch; gap: var(--space-5); }
  .lp-cena__acoes .lp-btn { width: 100%; }
  .lp-elo { align-self: flex-start; }
  /* Manchete sem max-width: a largura da tela ja limita, e o ch travava
     a quebra num ponto ruim em telas de 360. */
  .lp-cena__titulo { max-width: none; margin-bottom: var(--space-5); }
  .lp-cena__sub { max-width: none; margin-bottom: var(--space-8); }
  .lp-cena__nota { margin-top: var(--space-6); }
}


/* ════════════════════════════════════════════════════════════════════════
   A PROVA — segunda dobra
   Ver docs/33_FUNDACAO_VISUAL.md

   A hero promete; esta dobra entrega, contando uma história em vez de
   listar funcionalidades: sábado à noite, o cliente chama, o Venda Fácil
   responde em 3 segundos, o pedido anda.

   NÃO é timeline, nem tabela, nem dashboard. É uma CENA: três falas em
   planos de profundidade diferentes, costuradas por um trilho laranja
   curvo — o mesmo trilho que aparece na arte 3D da hero. É esse trilho
   que liga visualmente as duas dobras.
   ════════════════════════════════════════════════════════════════════════ */
.lp-prova {
  --lp-texto:   #171717;
  --lp-sec:     #605d57;
  --lp-areia:   #efe7db;
  padding: var(--space-20) 0;
  background: #faf3eb;
  color: var(--lp-texto);
  overflow: hidden;
}

.lp-prova__grade { display: grid; gap: var(--space-12); align-items: center; }
@media (min-width: 1024px) {
  .lp-prova__grade {
    grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
    /* Coluna com corredor largo (os ícones saem para fora do painel),
       mas LINHA curta: o fecho precisa colar na composição. Era o
       row-gap de 80px que abria o fosso entre o painel e a frase. */
    column-gap: var(--space-20);
    row-gap: var(--space-5);
    /* start, nao center: com o bloco de etapas a coluna esquerda ficou
       mais alta, e centralizar jogava o painel para o meio do vazio. */
    align-items: start;
  }
  /* O pé atravessa as duas colunas e fecha a dobra embaixo. */
  .lp-prova__texto  { grid-column: 1; }
  .lp-cenario       { grid-column: 2; }
  /* O fecho vive SOB A CENA, na coluna 2 — nao atravessando a dobra
     inteira. Assim ele pertence a composicao em vez de virar um rodape. */
  .lp-prova__pe     { grid-column: 2; }
}

/* ── Coluna editorial ── */
.lp-prova__titulo {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: clamp(30px, 1.5rem + 2.1vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: var(--fw-bold);
  color: var(--lp-texto);
}
/* Três linhas fixas: a quebra é decisão de design, não acidente de
   largura. No celular elas voltam a correr juntas. */
@media (min-width: 640px) { .lp-prova__titulo span { display: block; } }

.lp-prova__sub {
  margin: 0;
  font-size: var(--body-size);
  line-height: 1.65;
  color: var(--lp-sec);
  max-width: 44ch;
}


/* ── AS ETAPAS ──
   Bloco de apoio sob o texto. Preenche o vazio da metade inferior esquerda
   SEM virar outra seção: nenhum card, nenhum fundo, nenhuma borda em volta.
   O que delimita é um fio no topo e o respiro.

   Os ícones são os MESMOS da composição ao lado, em 28px — um quarto do
   tamanho dos protagonistas. É essa repetição miúda que amarra as duas
   metades da dobra sem competir com nenhuma delas.
   ────────────────────────────────────────────────────────────────────── */
.lp-etapas {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid #e7dcc9;
}
.lp-etapas__titulo {
  margin: 0 0 var(--space-5);
  font-size: var(--caption-size);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b6661;
}
.lp-etapas__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-4);
}
.lp-etapas__lista li {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--body-size);
  line-height: 1.35;
  color: #171717;
}
.lp-etapas__lista img {
  width: 28px; height: auto; flex-shrink: 0;
  filter: drop-shadow(0 4px 8px rgba(150, 105, 45, 0.16));
}

/* Entram junto com a narrativa, depois do texto e antes da conversa. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lp-etapas__lista li {
      animation: lp-entra linear both;
      animation-timeline: view();
    }
    .lp-etapas__lista li:nth-child(1) { animation-range: entry 12% entry 42%; }
    .lp-etapas__lista li:nth-child(2) { animation-range: entry 18% entry 48%; }
    .lp-etapas__lista li:nth-child(3) { animation-range: entry 24% entry 54%; }
  }
}

@media (max-width: 1023px) {
  .lp-etapas { margin-top: var(--space-8); padding-top: var(--space-6); }
  .lp-etapas__lista { gap: var(--space-3); }
}

/* ════════════════════════════════════════════════════════════════════════
   O CENÁRIO — o painel da conversa
   Leve de propósito: quase o mesmo tom do fundo, borda de luz, sombra
   larga e rasa. Ele delimita sem virar caixa.
   ════════════════════════════════════════════════════════════════════════ */
/* A SUPERFÍCIE do painel. z-index 0: fica acima dos ícones recuados
   (z-index -1) e abaixo das falas (z-index 2). */
.lp-cenario::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  border-radius: 24px;
  background: linear-gradient(165deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.78) 100%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 30px 70px -32px rgba(120, 96, 66, 0.34);
}
.lp-cenario {
  position: relative;
  isolation: isolate;
  /* min-height para o cenario ter onde existir: com a altura vindo so do
     conteudo, o arco e as ripas ficavam espremidos e a dobra continuava
     parecendo vazia. */
  min-height: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-10) var(--space-10);
  border-radius: 24px;
  /* Sem fundo próprio: a superfície do painel virou o ::before abaixo.
     É isso que permite um ícone ficar ATRÁS do painel (z-index -1) em vez
     de só por cima — e é daí que vem a profundidade de verdade. */
  background: none;
  border: 0;
}

/* O TRILHO. preserveAspectRatio="none" deixa a curva acompanhar a caixa em
   qualquer largura; o vector-effect impede que isso engrosse o traço. */
.lp-trilho {
  position: absolute; inset: var(--space-8) var(--space-6);
  width: calc(100% - var(--space-6) * 2);
  height: calc(100% - var(--space-8) * 2);
  z-index: 1;
  overflow: visible;
}
.lp-trilho path {
  fill: none;
  /* b600 e nao o 500: o trilho corre sobre superficies claras, e o 500
     sumia nelas. Mais fino e mais apagado que antes — ele conduz o olhar,
     nao disputa com os cartoes. */
  stroke: var(--color-brand-600);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.4;
}


/* ════════════════════════════════════════════════════════════════════════
   O CENÁRIO — a arquitetura atrás da conversa
   Mesmo vocabulário da arte 3D da hero: arco arredondado, ripas verticais,
   um campo laranja ao fundo e uma plataforma na base. É isso que dá CORPO
   à dobra — antes ela era um quadro branco com três cartões dentro.

   Tudo em CSS. Nenhuma imagem nova, nenhum KB a mais no carregamento.
   As camadas, do fundo para a frente:
     campo  → o halo laranja, bem ao fundo
     arco   → o vão grande, em bege
     ripas  → as colunas caneladas, quentes
     arco2  → um segundo arco menor, à frente, criando a profundidade
     base   → a plataforma onde a cena se apoia
   ════════════════════════════════════════════════════════════════════════ */
/* A luz quente. z-index 1: acima da superfície do painel, abaixo das
   falas. É a "iluminação laranja muito suave no alto à direita". */
.lp-set {
  position: absolute; inset: 0; z-index: 1;
  border-radius: 24px;
  overflow: hidden;
  pointer-events: none;
}
.lp-set > span { position: absolute; display: block; }

/* O halo laranja. Bem diluído — é luz de ambiente, não bloco de cor. */
/* Só o calor difuso ao fundo. Sem forma, sem aresta: é luz de ambiente. */
.lp-set__campo {
  top: -20%; right: -16%;
  width: 66%; height: 64%;
  opacity: 0.7;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(242, 138, 22, 0.30) 0%,
    rgba(242, 138, 22, 0.14) 48%,
    rgba(242, 138, 22, 0) 72%);
  filter: blur(2px);
}

/* A plataforma. Uma elipse achatada na base — é o pedestal das artes da
   hero, aqui só insinuado. */
/* A base de apoio. Só um plano suave para a cena não flutuar no nada. */
.lp-set__base {
  left: 10%; right: 10%; bottom: -8%;
  height: 20%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(245,236,223,0.85) 0%, rgba(234,223,205,0.7) 100%);
  box-shadow: 0 -12px 30px -20px rgba(120, 96, 66, 0.3);
}

/* ════════════════════════════════════════════════════════════════════════
   OS ÍCONES DA MARCA
   Não são enfeite: cada um marca uma etapa da história, e o TAMANHO diz o
   peso da etapa. Cinco do mesmo tamanho seriam cinco adesivos; com
   hierarquia eles conduzem o olhar na ordem em que a venda acontece.

     balão    → o contato começando          (médio, 72px)
     etiqueta → a consulta comercial         (GRANDE, 94px — o produto agindo)
     carrinho → a compra andando             (pequeno, 58px)
     gráfico  → o resultado acumulando       (pequeno, 54px)
     check    → a confirmação                (GRANDE, 86px — o desfecho)

   Ficam nas BORDAS do painel, transbordando um pouco: é o que os faz
   parecer parte do ecossistema em vez de conteúdo dentro de uma caixa.
   ════════════════════════════════════════════════════════════════════════ */
.lp-ic {
  position: absolute;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 10px 18px rgba(150, 105, 45, 0.2));
}

/* ── PLANO DA FRENTE — os três protagonistas ──
   Balão (o contato), etiqueta (a consulta) e check (a confirmação). São
   as três batidas da história; os outros dois são contexto. */
.lp-ic--etiqueta { z-index: 3; width: 96px; top: 27%;   left: -46px; }
.lp-ic--check    { z-index: 3; width: 88px; bottom: 7%; right: -38px; }
.lp-ic--balao    { z-index: 3; width: 80px; top: -30px; right: 15%; }

/* ── PLANO DE APOIO ──
   Tentei antes deixá-los ATRÁS do painel, meio escondidos. Na tela isso
   não leu como profundidade: leu como ícone cortado, defeito. Agora eles
   aparecem INTEIROS, fora da borda. O recuo vem de escala e opacidade —
   metade do tamanho dos protagonistas e 85% de opacidade. */
.lp-ic--carrinho {
  z-index: 3; width: 44px; bottom: 12%; left: -22px;
  opacity: 0.85; filter: drop-shadow(0 8px 14px rgba(150,105,45,0.16));
}
.lp-ic--grafico {
  z-index: 3; width: 40px; top: -18px; left: 26%;
  opacity: 0.85; filter: drop-shadow(0 8px 14px rgba(150,105,45,0.16));
}

/* Entram junto com a narrativa, na ordem da história. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lp-ic { animation: lp-entra linear both; animation-timeline: view(); }
    .lp-ic--balao    { animation-range: entry 14% entry 46%; }
    .lp-ic--etiqueta { animation-range: entry 24% entry 56%; }
    .lp-ic--carrinho { animation-range: entry 32% entry 62%; }
    .lp-ic--grafico  { animation-range: entry 36% entry 66%; }
    .lp-ic--check    { animation-range: entry 44% entry 74%; }
  }
}

/* ── As três falas, em planos diferentes ──
   A profundidade é PERCEBIDA, não exibida: muda a opacidade da superfície,
   o raio da sombra e a escala — nunca inclinação nem perspectiva. */
.lp-fala {
  position: relative;
  z-index: 2;
  border-radius: 16px;
  padding: var(--space-4) var(--space-5);
  max-width: 24rem;
}
.lp-fala__meta {
  margin: 0 0 6px;
  font-size: var(--caption-size);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* #635f58, nao #6f6a62: a fala do cliente pousa sobre AREIA, que e mais
     escura que o branco — la o tom antigo caia para 4.38:1. */
  color: #635f58;
}
.lp-fala__meta span { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.lp-fala__texto {
  margin: 0;
  font-size: var(--body-size);
  line-height: 1.5;
  letter-spacing: -0.008em;
  color: var(--lp-texto);
}

/* Plano recuado: superfície areia, sem sombra, um grau menor. */
.lp-fala--cliente {
  background: rgba(244, 236, 224, 0.92);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(255,255,255,0.75);
  transform: scale(0.965);
  transform-origin: left center;
  margin-right: auto;
}
/* Plano principal: branco cheio, sombra definida. É a fala do produto. */
.lp-fala--vf {
  background: #ffffff;
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: 0 14px 30px -14px rgba(120, 96, 66, 0.32);
  margin: var(--space-10) 0 var(--space-10) auto;
}
/* Plano à frente: sombra mais aberta e um fio laranja na base, que marca
   o fecho do arco — mensagem, resposta, VENDA. */
/* O PEDIDO e o ponto de chegada: base laranja mais firme, sombra mais
   aberta, e uma plataforma propria embaixo (o ::after) — a venda pousa. */
.lp-fala--pedido {
  background: #ffffff;
  border: 1px solid rgba(255,255,255,0.9);
  /* b600: o 500 da 2.49:1 sobre branco e some. */
  border-bottom: 4px solid var(--color-brand-500);
  /* Mais a frente que as outras duas: sombra mais aberta e um degrau de
     escala. A venda pousa. */
  box-shadow: 0 26px 52px -18px rgba(120, 96, 66, 0.46);
  transform: scale(1.02);
  transform-origin: left bottom;
  margin-right: auto;
  max-width: 22rem;
}
/* O estado do pedido: o fecho da historia, em verde, miudo. */
.lp-fala__estado {
  display: inline-flex; align-items: center; gap: 6px;
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid #efe7db;
  width: 100%;
  font-size: var(--caption-size);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  /* O TIQUE é laranja; o texto fica em grafite suave. Tudo laranja virava
     aviso de sistema — assim vira nota de rodapé do cartão, que é o tom
     certo para um estado. */
  color: #5a554e;
}
.lp-fala__estado svg { color: var(--color-brand-600); flex-shrink: 0; }
.lp-fala--pedido::after {
  content: '';
  position: absolute; left: 6%; right: 6%; bottom: -14px; height: 20px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 0%, rgba(120,96,66,0.16) 0%, rgba(120,96,66,0) 70%);
}

/* ── A CÁPSULA DE 3s ──
   Pousada sobre o trilho, entre a pergunta e a resposta. Pequena de
   propósito: é o argumento inteiro do produto em dois caracteres, e um
   selo grande transformaria o argumento em anúncio. */
.lp-lapso {
  position: absolute;
  z-index: 3;
  top: 31%; left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  font-family: var(--font-numeric);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-medium);
  color: var(--color-brand-on);
  background: var(--color-brand-500);
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 14px -6px rgba(242, 138, 22, 0.75);
}

/* ── O pé ── */
/* O FECHO. Antes era uma linha solta no fim da dobra e se perdia. Agora e
   uma faixa propria, encostada na composicao: superficie clara, fio
   laranja a esquerda (a mesma marca grafica da nota sob o CTA da hero) e
   a frase em corpo de manchete pequena. */
.lp-prova__pe {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--space-5);
  /* Colado na composição: o fecho é o último ato da MESMA história. */
  margin: var(--space-4) 0 0;
  padding: var(--space-6) var(--space-8);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-left: 3px solid var(--color-brand-500);
  border-radius: var(--radius-lg);
}
.lp-prova__frase {
  font-family: var(--font-display);
  font-size: clamp(21px, 1.1rem + 1vw, 30px);
  line-height: 1.22;
  letter-spacing: -0.026em;
  font-weight: var(--fw-bold);
  color: var(--lp-texto);
}
/* O selo: superficie propria, para nao se diluir ao lado da frase. */
.lp-prova__selo {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px var(--space-4);
  font-size: var(--body-sm-size);
  color: #4a463f;
  background: #ffffff;
  border: 1px solid #e5dccd;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.lp-prova__hora {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  color: #635f58;
}
/* A prova ao vivo (24/09): uma linha, sem cartão. Vem depois do fecho
   e não pode competir com ele — é o convite, não outro ato da história. */
.lp-prova__aovivo {
  margin: var(--space-2) 0 0;
  font-size: var(--body-sm-size);
  line-height: 1.6;
  color: #635f58;
}
.lp-prova__aovivo .lp-elo { margin-left: 4px; white-space: nowrap; }
@media (min-width: 1024px) {
  .lp-prova__aovivo { grid-column: 2; }
}
.lp-prova__selo svg { color: var(--color-brand-700); flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════════════════
   A NARRATIVA ACONTECE COM A ROLAGEM
   CSS puro, sem biblioteca e sem ouvinte de rolagem: `animation-timeline`
   amarra cada peça ao avanço da seção na tela. Navegador sem suporte
   mostra tudo pronto — nada se perde.
   ════════════════════════════════════════════════════════════════════════ */
@keyframes lp-entra         { from { opacity: 0; transform: translateY(14px); }                to { opacity: 1; transform: none; } }
@keyframes lp-entra-recuado { from { opacity: 0; transform: translateY(14px) scale(0.965); }  to { opacity: 1; transform: scale(0.965); } }
@keyframes lp-entra-lapso   { from { opacity: 0; transform: translate(-50%, -30%); }          to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes lp-desenha       { from { stroke-dashoffset: 260; }                                to { stroke-dashoffset: 0; } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lp-fala, .lp-lapso, .lp-prova__pe {
      animation: lp-entra linear both;
      animation-timeline: view();
    }
    /* A fala do cliente e a cápsula têm transform PRÓPRIO (escala e
       centragem). Se usassem o keyframe comum, a animação zeraria esse
       transform no fim — por isso cada uma tem o seu. */
    .lp-fala--cliente { animation-name: lp-entra-recuado; animation-range: entry 10% entry 40%; }
    .lp-lapso         { animation-name: lp-entra-lapso;   animation-range: entry 20% entry 50%; }
    .lp-fala--vf      { animation-range: entry 28% entry 58%; }
    .lp-fala--pedido  { animation-range: entry 38% entry 68%; }
    .lp-prova__pe     { animation-range: entry 46% entry 76%; }

    /* O trilho se desenha junto, acompanhando a conversa. */
    .lp-trilho path {
      stroke-dasharray: 260;
      animation: lp-desenha linear both;
      animation-timeline: view();
      animation-range: entry 16% entry 62%;
    }
  }
}

/* ── Tablet e celular ──
   O painel continua, mas as falas empilham alinhadas: o escalonamento
   lateral só funciona quando há largura para ele. O trilho vira vertical. */
@media (max-width: 1023px) {
  .lp-prova { padding: var(--space-16) 0; }
  /* O cenario encolhe junto: no celular o arco e as ripas viram fundo
     de verdade, atras das falas empilhadas. */
  .lp-cenario { min-height: 0; padding: var(--space-10) var(--space-5) var(--space-12); }
  .lp-set__campo { width: 92%; right: -24%; }
  /* No celular os ícones encolhem e entram para DENTRO das bordas: a
     seção tem overflow:hidden e o que sai pela lateral seria cortado. */
  .lp-ic--etiqueta { width: 62px; left: -12px; top: 26%; }
  .lp-ic--check    { width: 58px; right: -8px; bottom: 6%; }
  .lp-ic--balao    { width: 48px; top: -18px; right: 10%; }
  .lp-ic--carrinho { width: 40px; bottom: -14px; left: 18%; }
  .lp-ic--grafico  { display: none; }
  .lp-prova__pe { padding: var(--space-5) var(--space-6); }
  .lp-fala { max-width: none; }
  .lp-fala--cliente { transform: none; }
  .lp-fala--vf { margin: var(--space-8) 0; }
  .lp-fala--pedido { max-width: none; transform: none; }
  .lp-lapso { top: 27%; left: auto; right: var(--space-6); transform: translateY(-50%); }
  .lp-prova__pe { margin-top: var(--space-12); gap: var(--space-3); }
  @keyframes lp-entra-recuado { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes lp-entra-lapso   { from { opacity: 0; transform: translateY(-30%); } to { opacity: 1; transform: translateY(-50%); } }
}


/* ════════════════════════════════════════════════════════════════════════
   O VAZAMENTO — terceira dobra
   Ver docs/33_FUNDACAO_VISUAL.md

   Substituiu a dobra que comparava o produto com o custo de contratar
   alguém. Atacar o custo de contratar ofende quem já tem funcionário, e a
   economia ficava hipotética — só valia se a pessoa fosse contratar.

   Aqui ela mexe em dois controles com os NÚMEROS DELA e vê o quanto já
   está perdendo. Quando o preço aparecer lá na frente, a conta já foi
   feita na cabeça dela.

   Duas faixas, não campos de digitar: o dono de lanchonete está no
   celular, no meio do expediente, com uma mão.
   ════════════════════════════════════════════════════════════════════════ */
.lp-conta {
  --lp-texto: #171717;
  --lp-sec:   #605d57;
  --lp-linha: #e7dcc9;
  padding: var(--space-20) 0;
  background: var(--color-neutral-0);
  color: var(--lp-texto);
}

.lp-conta__grade { display: grid; gap: var(--space-12); align-items: center; }
@media (min-width: 1024px) {
  .lp-conta__grade {
    grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr);
    gap: var(--space-16);
  }
}

.lp-conta__titulo {
  margin: 0 0 var(--space-6);
  font-family: var(--font-display);
  font-size: clamp(30px, 1.5rem + 2.1vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: var(--fw-bold);
}
@media (min-width: 640px) { .lp-conta__titulo span { display: block; } }

.lp-conta__sub {
  margin: 0 0 10px;
  font-size: var(--body-size);
  line-height: 1.7;
  color: var(--lp-sec);
  max-width: 44ch;
}
.lp-conta__sub:last-child { margin-bottom: 0; }

/* ── A CALCULADORA ──
   Superfície de areia, não branca: ela precisa se destacar do fundo
   branco da dobra sem virar card com sombra pesada. */
.lp-calc {
  position: relative;
  background: #fbf6ee;
  border: 1px solid #f0e7da;
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: 0 18px 44px -30px rgba(120, 96, 66, 0.22);
}
/* O único ícone da dobra, saindo pelo canto. Pequeno e fora do caminho
   dos números — se competisse com eles, sairia. */
.lp-calc__ic {
  /* 43px e encostado no canto POR DENTRO: dois passos de recuo desde a
     primeira versão (58px flutuando para fora), até parar de disputar
     com os números. */
  position: absolute; top: var(--space-4); right: var(--space-5);
  width: 43px; height: auto;
  filter: drop-shadow(0 6px 14px rgba(150, 105, 45, 0.14));
  pointer-events: none;
}
/* Orientação, não título: menor que os rótulos dos controles. */
.lp-calc__intro {
  margin: 0 0 var(--space-6);
  /* Desvia do icone, que agora vive DENTRO do card. */
  padding-right: 64px;
  font-size: var(--body-sm-size);
  color: #6b6661;
}
@media (max-width: 767px) {
  .lp-calc { padding: var(--space-6); }
  /* Para DENTRO da borda: a seção não tem overflow visível e o que saísse
     pela lateral empurraria a página. */
  .lp-calc__ic { width: 38px; top: var(--space-3); right: var(--space-4); }
  .lp-calc__intro { padding-right: 52px; }
}

.lp-calc__campo { margin-bottom: var(--space-6); }
.lp-calc__rotulo {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  margin-bottom: var(--space-3);
  font-size: var(--body-sm-size);
  font-weight: var(--fw-medium);
  color: var(--lp-sec);
}
/* O número acompanha a faixa. Tabular para não dançar enquanto arrasta. */
.lp-calc__valor {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--lp-texto);
  white-space: nowrap;
}

/* ── A faixa ──
   O nativo é feio e diferente em cada navegador. Aqui ele vira o traço
   da marca: trilho de areia, polegar laranja com 28px de alvo de toque. */
.lp-calc__faixa {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 28px;
  background: transparent; cursor: pointer;
  display: block;
}
/* TRILHO PREENCHIDO. O trecho já percorrido vem em laranja escuro; o
   resto fica na areia. É o preenchimento que carrega o ESTADO do controle,
   em 3.41:1 — e é por isso que ele existe.
   Um trilho liso que cumprisse 3:1 inteiro viraria uma barra cinza pesada
   atravessando o cartão. Assim a norma é cumprida sem custo visual.
   O --pct é escrito pelo JavaScript a cada movimento. */
.lp-calc__faixa::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--radius-pill);
  background: linear-gradient(90deg,
    var(--color-brand-600) 0 var(--pct, 10%),
    #e4d8c4 var(--pct, 10%) 100%);
}
.lp-calc__faixa::-moz-range-track {
  height: 6px; border-radius: var(--radius-pill);
  background: linear-gradient(90deg,
    var(--color-brand-600) 0 var(--pct, 10%),
    #e4d8c4 var(--pct, 10%) 100%);
}
/* O polegar fica no LARANJA DA MARCA (#f28a16), como pedido. Ele sozinho
   dá 2.27:1 contra a areia e reprovaria o mínimo de 3:1 de um controle —
   por isso o anel é laranja ESCURO em vez de branco: é o anel que carrega
   os 4.74:1 e identifica o controle. A cor da marca fica preservada. */
.lp-calc__faixa::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; margin-top: -10px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-500);
  border: 2.5px solid var(--color-brand-700);
  box-shadow: 0 3px 10px -3px rgba(180, 96, 12, 0.45);
  transition: transform 160ms var(--easing-standard);
}
.lp-calc__faixa::-moz-range-thumb {
  width: 21px; height: 21px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-500);
  border: 2.5px solid var(--color-brand-700);
  box-shadow: 0 3px 10px -3px rgba(180, 96, 12, 0.45);
}
.lp-calc__faixa:active::-webkit-slider-thumb { transform: scale(1.12); }
.lp-calc__faixa:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 4px; border-radius: var(--radius-pill); }

/* A premissa fica À VISTA, não escondida no código: a conta só convence
   se a pessoa puder discordar do número. */
.lp-calc__premissa {
  margin: 0 0 var(--space-6);
  font-size: var(--body-sm-size);
  color: #6b6661;
}
.lp-calc__premissa strong { color: var(--lp-texto); font-weight: var(--fw-semibold); }

/* ── O resultado ── */
.lp-calc__saida {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--lp-linha);
  border-bottom: 1px solid var(--lp-linha);
}
.lp-calc__linha {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  margin: 0;
  font-size: var(--body-size);
  color: var(--lp-sec);
}
/* O SEMANAL é apoio: presente, mas um degrau abaixo. */
.lp-calc__linha strong {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.022em;
  color: var(--lp-texto);
  white-space: nowrap;
}

/* ── O MENSAL é o destaque da dobra inteira ──
   Fio laranja à esquerda e o número em grafite com o cifrão puxado no
   laranja escuro. Grafite em vez de tudo laranja: o número precisa ler
   como VALOR, não como aviso. */
/* ── O MENSAL — o elemento dominante do card ──
   Empilhado, não em linha: rótulo, período, VALOR, ressalva. Em linha o
   número dividia a largura com o texto e perdia metade da força. */
.lp-calc__mes {
  margin-top: var(--space-6);
  padding-left: var(--space-5);
  border-left: 3px solid var(--color-brand-600);
}
.lp-calc__mes-rotulo {
  margin: 0;
  /* 11px: um degrau abaixo do caption. Quanto menor o rótulo, maior o
     número parece — sem tocar no tamanho do número. */
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: #6b6661;
}
.lp-calc__mes-periodo {
  margin: 6px 0 2px;
  font-size: var(--body-sm-size);
  color: var(--lp-sec);
}
.lp-calc__mes-valor { margin: 0; }
.lp-calc__mes-valor strong {
  display: block;
  font-family: var(--font-display);
  /* Bem maior que antes: este número é o assunto da dobra inteira. */
  font-size: clamp(42px, 1.4rem + 3.6vw, 68px);
  line-height: 1;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.038em;
  color: var(--lp-texto);
  white-space: nowrap;
}
/* A ressalva: a conta só é honesta se a estimativa estiver assumida. */
.lp-calc__mes-nota {
  margin: 5px 0 0;
  font-size: var(--caption-size);
  color: #6b6661;
}

.lp-calc__remate {
  margin: var(--space-6) 0 var(--space-6);
  font-size: var(--body-size);
  line-height: 1.55;
  color: var(--lp-sec);
}
/* Ênfase por COR e peso médio, não por negrito cheio: a frase respira. */
.lp-calc__remate em {
  font-style: normal;
  color: var(--lp-texto);
  font-weight: var(--fw-medium);
}

.lp-calc__cta { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .lp-calc__faixa::-webkit-slider-thumb { transition: none; }
}


/* ════════════════════════════════════════════════════════════════════════
   COMO FUNCIONA — quarta dobra
   Ver docs/33_FUNDACAO_VISUAL.md

   É onde a Hero aterrissa: o "Ver como funciona →" aponta pra cá. A
   objeção a matar é "vai dar trabalho configurar".

   Antes eram quatro cards com bolinha numerada. Agora é uma LINHA DE
   MINUTOS: o tempo é o elemento de marca da página, e aqui ele PROVA o
   que o título promete em vez de só afirmar.

   Nenhum card, nenhuma borda em volta das etapas. O que estrutura é o
   fio e os marcos de tempo.
   ════════════════════════════════════════════════════════════════════════ */
.lp-passos-secao {
  --lp-texto: #171717;
  --lp-sec:   #605d57;
  --lp-fio:   #e4d8c4;
  padding: var(--space-20) 0;
  background: #faf3eb;
  color: var(--lp-texto);
}

/* ── O TOPO EM DUAS COLUNAS ──
   O texto sozinho deixava metade da dobra vazia. A tela da ativação ocupa
   esse espaço mostrando o produto, não enfeite. */
.lp-passos__topo { max-width: none; margin-bottom: var(--space-16); }
@media (min-width: 1024px) {
  .lp-passos__topo {
    display: grid;
    grid-template-columns: minmax(0, 0.52fr) minmax(0, 0.48fr);
    gap: var(--space-16);
    align-items: center;
  }
}
.lp-passos__texto { max-width: 40ch; }


/* ════════════════════════════════════════════════════════════════════════
   O PAINEL DA ATIVAÇÃO — demonstração animada do onboarding
   Ver docs/33 §20 (exceção GSAP) e assets/js/landing-ativacao.js

   As cinco cenas existem no DOM desde o início, EMPILHADAS no mesmo palco.
   O GSAP troca opacidade e deslocamento conforme a rolagem.

   REGRA DE OURO DESTE BLOCO: o estado padrão do CSS é o ESTADO FINAL
   ("Pronto para atender"). Sem GSAP, sem JavaScript, ou com
   prefers-reduced-motion, é isso que aparece — e faz sentido sozinho.
   O JS é que esconde as outras e assume o comando.
   ════════════════════════════════════════════════════════════════════════ */
.lp-demo3d { perspective: 1200px; }

.lp-painel {
  background: #ffffff;
  border: 1px solid #f0e7da;
  border-radius: var(--radius-2xl);
  box-shadow: 0 22px 50px -32px rgba(120, 96, 66, 0.3);
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}

.lp-painel__barra {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: #fbf6ee;
  border-bottom: 1px solid #f2ebe0;
}
.lp-painel__pontos { display: flex; gap: 5px; flex-shrink: 0; }
.lp-painel__pontos i { width: 8px; height: 8px; border-radius: var(--radius-pill); background: #e6dbc9; }
.lp-painel__titulo {
  font-size: var(--caption-size); font-weight: var(--fw-semibold);
  letter-spacing: 0.05em; text-transform: uppercase; color: #6b6661;
}
.lp-painel__relogio {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--font-numeric); font-size: var(--caption-size);
  font-variant-numeric: tabular-nums; font-weight: var(--fw-medium);
  color: var(--color-brand-700);
}

.lp-painel__prog { height: 4px; background: #f1e8da; }
.lp-painel__prog span {
  display: block; height: 100%; width: 100%;
  background: var(--color-brand-500);
  transform-origin: left;
}

/* O palco: altura fixa para as cenas empilharem sem a caixa pular de
   tamanho a cada troca. */
.lp-painel__palco { position: relative; min-height: 15.5rem; padding: var(--space-5); }

.lp-cena3 { position: absolute; inset: var(--space-5); }
/* Sem JS, só a final aparece. O JS inverte isso ao assumir. */
.lp-cena3[data-cena="0"],
.lp-cena3[data-cena="3"],
.lp-cena3[data-cena="8"],
.lp-cena3[data-cena="12"] { opacity: 0; pointer-events: none; }

.lp-cena3__pergunta {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-lg); line-height: 1.3;
  letter-spacing: -0.018em; font-weight: var(--fw-semibold);
  color: #171717;
}

/* ── 0 min · o ramo ── */
.lp-opcoes { display: flex; flex-direction: column; gap: var(--space-2); }
.lp-op {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 10px var(--space-3);
  font-size: var(--body-sm-size); color: #605d57;
  background: #fbf6ee;
  border: 1.5px solid #eee4d5;
  border-radius: var(--radius-md);
}
.lp-op__marca {
  width: 15px; height: 15px; flex-shrink: 0;
  border-radius: var(--radius-pill);
  border: 1.5px solid #ddd0ba;
  background: #ffffff;
  position: relative;
}
.lp-op__marca b {
  position: absolute; inset: 2.5px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-500);
  transform: scale(0);
}
/* A escolhida. O CSS já deixa marcada; o GSAP anima a chegada até aqui. */
.lp-op[data-op-on] {
  color: #171717; font-weight: var(--fw-medium);
  border-color: var(--color-brand-500);
  background: #fff8ef;
}
.lp-op[data-op-on] .lp-op__marca { border-color: var(--color-brand-600); }
.lp-op[data-op-on] .lp-op__marca b { transform: scale(1); }

/* ── 3 min · as perguntas ── */
.lp-campos { margin: 0; display: grid; gap: var(--space-3); }
.lp-campo {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid #f4ede2;
}
.lp-campo:last-child { border-bottom: 0; padding-bottom: 0; }
.lp-campo dt {
  font-size: 11px; font-weight: var(--fw-semibold);
  letter-spacing: 0.06em; text-transform: uppercase; color: #6b6661;
}
.lp-campo dd {
  margin: 3px 0 0;
  font-size: var(--body-sm-size); line-height: 1.4; color: #171717;
}

/* ── 8 min · a conversa ── */
.lp-conversa { display: flex; flex-direction: column; gap: var(--space-2); }
.lp-msg {
  margin: 0; padding: 9px var(--space-3);
  font-size: var(--body-sm-size); line-height: 1.45;
  border-radius: var(--radius-md);
  max-width: 88%;
}
.lp-msg--cli {
  color: #171717; background: #f6f0e6;
  border-bottom-left-radius: var(--radius-sm);
}
.lp-msg--vf {
  align-self: flex-end;
  color: var(--color-brand-on); background: var(--color-brand-500);
  border-bottom-right-radius: var(--radius-sm);
}
/* Os três pontinhos. A animação é do CSS; o GSAP só mostra e esconde. */
.lp-digitando {
  display: flex; align-items: center; gap: 4px;
  margin: 0; padding: 11px var(--space-3);
  width: fit-content;
  background: #f6f0e6; border-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-sm);
  opacity: 0;
}
.lp-digitando i {
  width: 6px; height: 6px; border-radius: var(--radius-pill);
  background: #9c958a;
}
@media (prefers-reduced-motion: no-preference) {
  .lp-digitando i { animation: lp-pulo 1.1s ease-in-out infinite; }
  .lp-digitando i:nth-child(2) { animation-delay: .18s; }
  .lp-digitando i:nth-child(3) { animation-delay: .36s; }
}
@keyframes lp-pulo { 0%,60%,100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
/* Os tres pontinhos sao idioma de aplicativo de mensagem, e nem todo dono
   de negocio le esse idioma. A palavra tira a duvida sem tirar o realismo. */
.lp-digitando span { margin-left: 4px; font-size: 11px; color: #6b6661; }

/* ── 12 min · a conexão ── */
.lp-conexao {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4);
  background: #fbf6ee;
  border: 1px solid #f0e7da;
  border-radius: var(--radius-lg);
}
.lp-conexao__ic {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--radius-md);
  background: #ffffff; border: 1px solid #f0e7da;
  color: #5a554e;
}
.lp-conexao__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lp-conexao__txt b { font-size: var(--body-sm-size); font-weight: var(--fw-semibold); color: #171717; }
.lp-conexao__txt small { font-size: var(--caption-size); color: #6b6661; }
.lp-conexao__giro {
  width: 18px; height: 18px; margin-left: auto; flex-shrink: 0;
  border-radius: var(--radius-pill);
  border: 2px solid #eadfcd;
  border-top-color: var(--color-brand-500);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .lp-conexao__giro { animation: lp-gira .9s linear infinite; }
}
@keyframes lp-gira { to { transform: rotate(360deg); } }
/* Verde SÓ aqui, no indicador de sucesso — e é o único da seção. */
.lp-conexao__ok {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-left: auto; flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--color-green-700); color: #ffffff;
  opacity: 0;
}

/* ── 15 min · pronto. É o estado padrão sem JavaScript. ── */
.lp-cena3--fim {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center;
}
.lp-pronto__ic {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-brand-500); color: var(--color-brand-on);
}
.lp-pronto__t {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: var(--text-xl); letter-spacing: -0.02em;
  font-weight: var(--fw-bold); color: #171717;
}
.lp-pronto__s { margin: 0 0 var(--space-4); font-size: var(--body-sm-size); color: #605d57; }
.lp-pronto__selo {
  display: inline-flex; align-items: center;
  padding: 5px var(--space-3);
  font-family: var(--font-numeric); font-size: var(--caption-size);
  font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold);
  color: var(--color-brand-on); background: var(--color-brand-500);
  border-radius: var(--radius-sm);
}

@media (max-width: 1023px) {
  .lp-demo3d { perspective: none; max-width: 26rem; }
  .lp-painel__palco { min-height: 14rem; }
}

.lp-passos__titulo {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(28px, 1.5rem + 1.9vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: var(--fw-bold);
  text-wrap: balance;
}
.lp-passos__sub {
  margin: 0;
  font-size: var(--body-size);
  line-height: 1.65;
  color: var(--lp-sec);
  max-width: 48ch;
}

/* ── A TRILHA ──
   No celular ela desce; no desktop deita, e o tempo corre da esquerda
   para a direita, como se lê. */
.lp-trilha {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-8);
}

.lp-etapa { position: relative; padding-left: var(--space-6); }
/* O fio vertical, ligando uma etapa à próxima. */
.lp-etapa::before {
  content: '';
  position: absolute; left: 0; top: 10px; bottom: calc(var(--space-8) * -1);
  width: 1px; background: var(--lp-fio);
}
.lp-etapa--fim::before { bottom: auto; height: 12px; }
/* O marco. Vazado, e o último é cheio — o arco fecha. */
.lp-etapa::after {
  content: '';
  position: absolute; left: 0; top: 6px;
  width: 9px; height: 9px; margin-left: -4px;
  border-radius: var(--radius-pill);
  background: #faf3eb;
  border: 2px solid var(--color-brand-600);
  box-sizing: border-box;
}
.lp-etapa--fim::after { background: var(--color-brand-600); }

.lp-etapa__tempo {
  display: inline-block;
  font-family: var(--font-numeric);
  font-size: var(--caption-size);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  font-weight: var(--fw-medium);
  color: var(--color-brand-700);
}
.lp-etapa h3 {
  margin: 6px 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: var(--fw-semibold);
  color: var(--lp-texto);
}
/* O "oficial da Meta" ganha peso sem virar outra cor: e sinal de
   confianca, nao destaque de venda. */
.lp-etapa p strong { color: var(--lp-texto); font-weight: var(--fw-semibold); }
.lp-etapa p {
  margin: 0;
  font-size: var(--body-sm-size);
  line-height: 1.6;
  color: var(--lp-sec);
  max-width: 34ch;
}

/* ── O pé: o marco dos 15 minutos ──
   É a meta escrita do projeto, não um número inventado aqui. */
.lp-passos__pe {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  margin: var(--space-16) 0 0;
  padding-top: var(--space-8);
  border-top: 1px solid var(--lp-fio);
  font-size: var(--body-size);
  line-height: 1.55;
  color: var(--lp-sec);
  max-width: 62ch;
}
.lp-passos__marco {
  display: inline-flex; align-items: center;
  padding: 5px var(--space-3);
  font-family: var(--font-numeric);
  font-size: var(--body-sm-size);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
  color: var(--color-brand-on);
  background: var(--color-brand-500);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

/* A rede de segurança. Sem caixa, sem botão: uma linha de texto com o
   fio da marca à esquerda — o mesmo recurso da nota sob o CTA da hero e
   do remate da conta. É o vocabulário gráfico repetido, não um elemento
   novo. Se fosse um card com botão, competiria com o CTA principal. */
.lp-passos__ajuda {
  margin: var(--space-6) 0 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-brand-600);
  font-size: var(--body-sm-size);
  line-height: 1.6;
  color: var(--lp-sec);
  max-width: 58ch;
}
.lp-passos__ajuda strong { color: var(--lp-texto); font-weight: var(--fw-semibold); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lp-passos__ajuda { animation: lp-entra linear both; animation-timeline: view(); animation-range: entry 44% entry 76%; }
  }
}

/* ── Desktop: a trilha deita ── */
@media (min-width: 900px) {
  .lp-trilha {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
    padding-top: var(--space-6);
  }
  .lp-etapa { padding-left: 0; padding-top: var(--space-6); }
  /* O fio agora corre na horizontal, por cima das colunas. */
  .lp-etapa::before {
    left: 0; right: calc(var(--space-8) * -1); top: 0; bottom: auto;
    width: auto; height: 1px;
  }
  .lp-etapa--fim::before { right: auto; width: 12px; height: 1px; }
  .lp-etapa::after { left: 0; top: 0; margin-left: -4px; margin-top: -4px; }
  .lp-etapa p { max-width: none; }
}

/* A trilha se escreve uma vez, na ordem, e para. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lp-etapa { animation: lp-entra linear both; animation-timeline: view(); }
    .lp-etapa:nth-child(1) { animation-range: entry 14% entry 44%; }
    .lp-etapa:nth-child(2) { animation-range: entry 20% entry 50%; }
    .lp-etapa:nth-child(3) { animation-range: entry 26% entry 56%; }
    .lp-etapa:nth-child(4) { animation-range: entry 32% entry 62%; }
    .lp-passos__pe { animation: lp-entra linear both; animation-timeline: view(); animation-range: entry 40% entry 72%; }
  }
}

@media (max-width: 899px) {
  .lp-passos-secao { padding: var(--space-16) 0; }
  .lp-trilha { gap: 28px; }
  .lp-passos__pe { margin-top: var(--space-12); padding-top: var(--space-6); }
}


/* ════════════════════════════════════════════════════════════════════════
   SINCRONIA COM O GSAP
   Quando o landing-ativacao.js assume, ele marca a seção com `.js-anima`.

   POR QUE DESLIGAR AS ANIMAÇÕES CSS AQUI: esta seção é o alvo do pin. Com
   ela presa, os elementos de dentro param de se mover — e
   `animation-timeline: view()` depende exatamente desse movimento. As
   animações congelariam no meio, deixando a timeline de baixo
   semitransparente para sempre. O GSAP passa a comandar.

   Fora do desktop com GSAP, nada disto entra e o CSS original vale.
   ════════════════════════════════════════════════════════════════════════ */
.js-anima .lp-etapa,
.js-anima .lp-passos__pe,
.js-anima .lp-passos__ajuda,
.js-anima .lp-demo3d {
  animation: none !important;
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ── Os estados da timeline de baixo ──
   `--ativa` é a etapa que o painel está mostrando agora; `--feita` são as
   que já passaram. Muda só o NÓ e o peso do horário: mexer na opacidade do
   texto deixaria a leitura pior para quem rola rápido. */
.js-anima .lp-etapa__tempo,
.js-anima .lp-etapa h3 {
  transition: color 300ms var(--easing-standard);
}
.js-anima .lp-etapa::after {
  transition: background-color 300ms var(--easing-standard),
              border-color 300ms var(--easing-standard),
              transform 300ms var(--easing-standard);
}

/* Ainda não chegou: nó vazado e discreto. */
.js-anima .lp-etapa:not(.lp-etapa--ativa):not(.lp-etapa--feita)::after {
  border-color: #d8cbb4;
}
.js-anima .lp-etapa:not(.lp-etapa--ativa):not(.lp-etapa--feita) .lp-etapa__tempo {
  color: #8d867a;
}
.js-anima .lp-etapa:not(.lp-etapa--ativa):not(.lp-etapa--feita) h3 {
  color: #6b6661;
}

/* Já passou: nó cheio, texto normal. */
.js-anima .lp-etapa--feita::after {
  background: var(--color-brand-600);
  border-color: var(--color-brand-600);
}

/* A etapa ATUAL: nó cheio e maior, horário e título no tom forte. */
.js-anima .lp-etapa--ativa::after {
  background: var(--color-brand-500);
  border-color: var(--color-brand-500);
  transform: scale(1.5);
}
.js-anima .lp-etapa--ativa .lp-etapa__tempo { color: var(--color-brand-700); font-weight: var(--fw-semibold); }
.js-anima .lp-etapa--ativa h3 { color: #171717; }

/* O pé dos 15 min só acende no fim. */
.js-anima .lp-passos__pe { transition: opacity 300ms var(--easing-standard); opacity: 0.55; }
.js-anima .lp-passos__pe--ativo { opacity: 1; }


/* ════════════════════════════════════════════════════════════════════════
   O QUE ELE FAZ — a dobra que mata "é só um robô de menu?"
   Ver docs/33_FUNDACAO_VISUAL.md

   Substituiu SEIS cards idênticos numa grade de três colunas. Seis cards
   iguais não são hierarquia: o olho escorrega, lê dois e desiste. E os seis
   misturavam capacidade (áudio, foto), comportamento (cumpre prazo) e
   controle (você assume) — coisas de pesos diferentes no mesmo formato.

   Agora a dobra tem UM ponto focal: as duas provas de que ele não é menu —
   ouvir um áudio e olhar uma foto. O resto virou texto de apoio.

   Fundo branco. As dobras 2 e 4 são areia (#faf3eb); esta fica entre elas.
   ════════════════════════════════════════════════════════════════════════ */
.lp-faz {
  --lp-texto: #171717;
  --lp-sec:   #605d57;
  --lp-fio:   #eee4d5;
  padding: var(--space-20) 0;
  background: var(--color-neutral-0);
  color: var(--lp-texto);
}

.lp-faz__topo { max-width: 40rem; margin: 0 auto var(--space-12); text-align: center; }
.lp-faz__titulo {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(26px, 4.4vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.028em;
  font-weight: var(--fw-bold);
  text-wrap: balance;
}
/* A quebra é decisão de design, não acidente de largura — mas só a partir
   do momento em que as duas frases cabem inteiras numa linha cada. */
@media (min-width: 560px) { .lp-faz__titulo span { display: block; } }

.lp-faz__sub {
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--lp-sec);
  text-wrap: pretty;
}

/* ── AS DUAS PROVAS ──
   Lado a lado no desktop: o par é a mensagem. "Ele ouve" e "ele enxerga"
   lidos juntos dizem mais do que empilhados. ── */
.lp-faz__par { display: grid; gap: var(--space-6); }
@media (min-width: 880px) {
  .lp-faz__par { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}

.lp-mid {
  display: flex; flex-direction: column;
  padding: var(--space-6);
  background: #fbf6ee;
  border: 1px solid var(--lp-fio);
  border-radius: var(--radius-xl);
}

.lp-mid__topo {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 var(--space-5);
  font-size: var(--caption-size);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-800);
}

/* A mensagem que CHEGA: fundo branco, canto de bolha de entrada. */
.lp-mid__cli {
  padding: var(--space-4);
  background: var(--color-neutral-0);
  border: 1px solid #f0e7da;
  border-radius: var(--radius-lg);
  border-top-left-radius: var(--radius-sm);
}

/* ── O áudio ──
   Play + onda + duração. A onda é decorativa, mas não é enfeite: é o que
   faz o bloco ser reconhecido como áudio antes de qualquer palavra. ── */
.lp-onda { display: flex; align-items: center; gap: var(--space-3); }
.lp-onda__play {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0; padding-left: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-500);
  color: var(--color-brand-on);
}
.lp-onda__barras {
  display: flex; align-items: center; gap: 2.5px;
  flex: 1; min-width: 0; height: 22px; overflow: hidden;
}
.lp-onda__barras i {
  flex: 1; min-width: 2px;
  border-radius: var(--radius-pill);
  background: #d9cdb8;
}
/* Alturas irregulares: onda reta vira código de barras. */
.lp-onda__barras i:nth-child(6n+1) { height: 35%; }
.lp-onda__barras i:nth-child(6n+2) { height: 72%; }
.lp-onda__barras i:nth-child(6n+3) { height: 100%; }
.lp-onda__barras i:nth-child(6n+4) { height: 52%; }
.lp-onda__barras i:nth-child(6n+5) { height: 85%; }
.lp-onda__barras i:nth-child(6n)   { height: 28%; }
/* A parte já ouvida fica laranja — é o que dá a sensação de tocando. */
.lp-onda__barras i:nth-child(-n+7) { background: var(--color-brand-500); }
.lp-onda__t {
  flex-shrink: 0;
  font-family: var(--font-numeric);
  font-size: var(--caption-size);
  font-variant-numeric: tabular-nums;
  color: var(--lp-sec);
}

/* A transcrição. O rótulo miúdo é o argumento inteiro: não é só receber
   áudio, é ENTENDER o áudio. */
.lp-mid__transc {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px dashed #ebe0cd;
  font-size: var(--body-sm-size);
  line-height: 1.5;
  color: var(--lp-texto);
}
.lp-mid__transc span {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-sec);
}


/* A resposta. Laranja, alinhada à direita: é a única coisa laranja grande
   da dobra, e é ela que fecha cada prova. */
.lp-mid__vf {
  align-self: flex-end;
  max-width: 92%;
  margin: var(--space-3) 0 0;
  padding: 10px var(--space-4);
  font-size: var(--body-sm-size);
  line-height: 1.5;
  color: var(--color-brand-on);
  background: var(--color-brand-500);
  border-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-sm);
}
/* O "ele ouve"/"ele enxerga" fica no topo e a resposta no rodapé; o
   espaço sobrando vai pro meio para as duas caixas terminarem juntas. */
.lp-mid__cli { margin-bottom: auto; }

.lp-faz__nota {
  max-width: 34rem;
  margin: var(--space-8) auto 0;
  text-align: center;
  font-size: var(--body-sm-size);
  line-height: 1.6;
  color: var(--lp-sec);
  text-wrap: pretty;
}

/* ── A FOTO QUE O CLIENTE MANDOU ──
   Pequena e à esquerda, com a legenda ao lado — é assim que uma foto com
   legenda chega no WhatsApp. Ocupar o quadro inteiro era o que fazia o
   bloco parecer placeholder. ── */
.lp-mid__cli--foto { display: flex; align-items: flex-end; gap: var(--space-4); }

.lp-foto {
  position: relative;
  flex-shrink: 0;
  width: 8.25rem; height: 8.25rem;
  margin: 0;
  border-radius: var(--radius-md);
  background: #f1e8da;   /* só o que aparece enquanto a foto carrega */
  overflow: hidden;
}
.lp-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── A MIRA DO RECONHECIMENTO ──
   Quatro cantos, e só. Sem scanner, sem linha varrendo, sem a palavra IA:
   o que a dobra precisa dizer é "entendi qual produto é" — não "sou uma
   inteligência artificial". A diferença entre as duas é a confiança. ── */
.lp-mira { position: absolute; inset: 9px; pointer-events: none; }
.lp-mira i {
  position: absolute;
  width: 13px; height: 13px;
  border: 2px solid var(--color-brand-500);
}
.lp-mira i:nth-child(1) { top: 0; left: 0;  border-right: 0; border-bottom: 0; border-top-left-radius: 3px; }
.lp-mira i:nth-child(2) { top: 0; right: 0; border-left: 0;  border-bottom: 0; border-top-right-radius: 3px; }
.lp-mira i:nth-child(3) { bottom: 0; left: 0;  border-right: 0; border-top: 0; border-bottom-left-radius: 3px; }
.lp-mira i:nth-child(4) { bottom: 0; right: 0; border-left: 0;  border-top: 0; border-bottom-right-radius: 3px; }

.lp-mid__legenda {
  margin: 0 0 6px;
  padding: 9px var(--space-4);
  font-size: var(--body-sm-size);
  line-height: 1.5;
  color: var(--lp-texto);
  background: #f6f0e6;
  border-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-sm);
}

/* ── O TRAÇO ACIMA DE CADA APOIO ──
   Marcador de leitura, não peso visual: 20px, mesmo traço nos quatro, e o
   laranja fica ABAIXO do título na hierarquia — o título é que vende. ── */
.lp-faz__ic { display: block; margin-bottom: var(--space-3); color: var(--color-brand-500); }

/* ════════════════════════════════════════════════════════════════════════
   A ENTRADA · ver assets/js/landing-faz.js

   Tudo aqui pende de `.js-faz`, que o JavaScript só coloca depois de
   confirmar que pode animar. Sem JS, sem IntersectionObserver ou com
   movimento reduzido, nada disto existe e a dobra aparece pronta.
   ════════════════════════════════════════════════════════════════════════ */

/* ── ELE OUVE · a onda toca, depois a transcrição ──
   As sete primeiras barras acendem em sequência: é o cursor do áudio
   andando. Termina exatamente no estado estático já aprovado. ── */
.js-faz .lp-onda__barras i:nth-child(-n+7) { background: #d9cdb8; }
.js-faz .js-entrou .lp-onda__barras i:nth-child(-n+7) {
  animation: lp-toca 220ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.js-faz .js-entrou .lp-onda__barras i:nth-child(1) { animation-delay: 120ms; }
.js-faz .js-entrou .lp-onda__barras i:nth-child(2) { animation-delay: 270ms; }
.js-faz .js-entrou .lp-onda__barras i:nth-child(3) { animation-delay: 420ms; }
.js-faz .js-entrou .lp-onda__barras i:nth-child(4) { animation-delay: 570ms; }
.js-faz .js-entrou .lp-onda__barras i:nth-child(5) { animation-delay: 720ms; }
.js-faz .js-entrou .lp-onda__barras i:nth-child(6) { animation-delay: 870ms; }
.js-faz .js-entrou .lp-onda__barras i:nth-child(7) { animation-delay: 1020ms; }
@keyframes lp-toca {
  0%   { background: #d9cdb8; transform: scaleY(1); }
  45%  { background: var(--color-brand-500); transform: scaleY(1.28); }
  100% { background: var(--color-brand-500); transform: scaleY(1); }
}

.js-faz .lp-mid__transc { opacity: 0; transform: translateY(6px); }
.js-faz .js-entrou .lp-mid__transc { animation: lp-sobe 420ms cubic-bezier(0.4, 0, 0.2, 1) 1240ms forwards; }

/* ── ELE ENXERGA · a foto chega, o reconhecimento acontece, a legenda vem ── */
.js-faz .lp-foto { opacity: 0; transform: scale(0.96); }
.js-faz .js-entrou .lp-foto { animation: lp-foto-entra 480ms cubic-bezier(0.4, 0, 0.2, 1) 80ms forwards; }
@keyframes lp-foto-entra { to { opacity: 1; transform: scale(1); } }

/* Os cantos entram um a um, de fora pra dentro. O respiro depois deles é o
   que faz parecer "travou no produto" em vez de "piscou". */
.js-faz .lp-mira i { opacity: 0; transform: scale(1.7); }
.js-faz .js-entrou .lp-mira i { animation: lp-mira-entra 300ms cubic-bezier(0.34, 1.3, 0.64, 1) forwards; }
.js-faz .js-entrou .lp-mira i:nth-child(1) { animation-delay: 560ms; }
.js-faz .js-entrou .lp-mira i:nth-child(2) { animation-delay: 620ms; }
.js-faz .js-entrou .lp-mira i:nth-child(3) { animation-delay: 680ms; }
.js-faz .js-entrou .lp-mira i:nth-child(4) { animation-delay: 740ms; }
@keyframes lp-mira-entra { to { opacity: 1; transform: scale(1); } }

.js-faz .lp-mid__legenda { opacity: 0; transform: translateY(6px); }
.js-faz .js-entrou .lp-mid__legenda { animation: lp-sobe 380ms cubic-bezier(0.4, 0, 0.2, 1) 1060ms forwards; }

/* ── A RESPOSTA LARANJA · fecha as duas provas ──
   Entra por último nos dois cartões, com o mesmo atraso: as duas colunas
   terminam juntas, e é isso que faz o par ser lido como um par. ── */
.js-faz .lp-mid__vf { opacity: 0; transform: translateY(8px); }
.js-faz .js-entrou .lp-mid__vf { animation: lp-sobe 440ms cubic-bezier(0.4, 0, 0.2, 1) 1560ms forwards; }

/* ── OS QUATRO APOIOS · stagger leve ── */
.js-faz .lp-faz__apoios li { opacity: 0; transform: translateY(8px); }
.js-faz .lp-faz__apoios.js-entrou li { animation: lp-sobe 420ms cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.js-faz .lp-faz__apoios.js-entrou li:nth-child(2) { animation-delay: 70ms; }
.js-faz .lp-faz__apoios.js-entrou li:nth-child(3) { animation-delay: 140ms; }
.js-faz .lp-faz__apoios.js-entrou li:nth-child(4) { animation-delay: 210ms; }

@keyframes lp-sobe { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 479px) {
  .lp-mid__cli--foto { gap: var(--space-3); }
  .lp-foto { width: 6.75rem; height: 6.75rem; }
}

/* ── OS QUATRO APOIOS ──
   Sem card, sem ícone, sem caixa. Eles são contexto; card daria a eles o
   mesmo peso visual das duas provas acima, que é exatamente o erro que
   esta dobra veio consertar. ── */
.lp-faz__apoios {
  list-style: none;
  display: grid; gap: var(--space-6) var(--space-8);
  margin: var(--space-12) 0 0;
  padding: var(--space-8) 0 0;
  border-top: 1px solid var(--lp-fio);
}
@media (min-width: 640px)  { .lp-faz__apoios { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .lp-faz__apoios { grid-template-columns: repeat(4, 1fr); } }

.lp-faz__apoios li {
  font-size: var(--body-sm-size);
  line-height: 1.55;
  color: var(--lp-sec);
  text-wrap: pretty;
}
.lp-faz__apoios strong {
  display: block;
  margin-bottom: 4px;
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.012em;
  color: var(--lp-texto);
}

/* ════════════════════════════════════════════════════════════════════════
   PLANOS — a vitrine de preços
   Ver docs/33_FUNDACAO_VISUAL.md · functions/src/config/vitrine.js

   Cartão de preço é um dos poucos lugares onde CARD é a forma certa: cada
   plano é um objeto comparável, com os mesmos campos na mesma ordem. O que
   se evita aqui é a TABELA CORPORATIVA — linha de check, coluna de
   comparação, letra miúda. Quatro cartões limpos, e o olho compara sozinho.

   O destaque do Pro é moderado de propósito: borda laranja, selo e botão
   cheio. Sem crescer, sem sombra pesada, sem gradiente. Um plano que
   precisa ser maior que os outros pra ser escolhido não foi bem precificado.
   ════════════════════════════════════════════════════════════════════════ */
.lp-planos {
  --lp-texto: #171717;
  --lp-sec:   #605d57;
  --lp-fio:   #eee4d5;
  padding: var(--space-20) 0;
  background: #faf3eb;
  color: var(--lp-texto);
}

.lp-planos__topo { max-width: 42rem; margin: 0 auto var(--space-12); text-align: center; }
.lp-planos__titulo {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(25px, 4.2vw, 40px);
  line-height: 1.16;
  letter-spacing: -0.028em;
  font-weight: var(--fw-bold);
  text-wrap: balance;
}
@media (min-width: 640px) { .lp-planos__titulo span { display: block; } }

.lp-planos__sub {
  margin: 0 0 var(--space-5);
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--lp-sec);
  text-wrap: pretty;
}

/* A definição de lead. Discreta, mas não escondida: é a unidade de
   cobrança, e esconder a unidade de cobrança é o que faz preço parecer
   pegadinha. Sem caixa e sem ícone — não é aviso legal. */
.lp-planos__lead {
  display: inline-block;
  margin: 0;
  padding: 5px var(--space-4);
  font-size: var(--caption-size);
  font-weight: var(--fw-medium);
  color: var(--color-brand-800);
  background: #fdf3e4;
  border-radius: var(--radius-pill);
}

/* ── A GRADE ──
   Quatro numa linha quando cabe; 2×2 no meio do caminho; um por linha no
   celular. Nunca 3+1: a órfã embaixo parece plano de segunda classe. ── */
.lp-grade-planos { display: grid; gap: var(--space-4); }
@media (min-width: 620px)  { .lp-grade-planos { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } }
@media (min-width: 1100px) {
  /* A grade segue o que EXISTE no painel. Com três planos cadastrados,
     quatro colunas deixavam um buraco na direita; com quatro fixos em
     três colunas, o último caía sozinho embaixo parecendo plano de
     segunda classe. O seletor :has conta os cartões que existem e a
     largura se ajusta sozinha. */
  .lp-grade-planos { grid-template-columns: repeat(3, 1fr); }
  .lp-grade-planos:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
}

.lp-plano {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--space-6);
  background: var(--color-neutral-0);
  border: 1px solid var(--lp-fio);
  border-radius: var(--radius-xl);
  /* Sombra baixa e QUENTE (a mesma família do fundo), não cinza: sombra
     cinza sobre marfim suja o branco e faz o cartão parecer descolado. */
  box-shadow: 0 1px 2px rgba(120, 96, 66, 0.05), 0 8px 24px -18px rgba(120, 96, 66, 0.3);
  transition: transform 220ms var(--easing-standard), box-shadow 220ms var(--easing-standard);
}
@media (hover: hover) {
  .lp-plano:hover {
    transform: translateY(-3px);
    box-shadow: 0 1px 2px rgba(120, 96, 66, 0.06), 0 18px 38px -22px rgba(120, 96, 66, 0.42);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lp-plano { transition: none; }
  .lp-plano:hover { transform: none; }
}

/* ── O DESTAQUE ──
   É a parte da venda: precisa ganhar a disputa sem gritar. Borda da marca
   em 2px, fundo quase-branco quente, sombra um pouco mais funda e o selo.
   NÃO cresce nem escala: cartão maior desalinha os preços dos vizinhos, e
   preço desalinhado é exatamente o que dificulta comparar — que é o que a
   pessoa veio fazer aqui. ── */
.lp-plano--destaque {
  border: 2px solid var(--color-brand-500);
  background: #fffdfa;
  box-shadow: 0 2px 4px rgba(191, 106, 8, 0.07), 0 20px 44px -24px rgba(191, 106, 8, 0.36);
  /* Compensa os 2px de borda: sem isto o conteúdo dele fica 1px fora de
     linha com o dos vizinhos, e o olho percebe mesmo sem saber por quê. */
  padding: calc(var(--space-6) - 1px);
}
@media (hover: hover) {
  .lp-plano--destaque:hover {
    box-shadow: 0 2px 4px rgba(191, 106, 8, 0.08), 0 26px 52px -26px rgba(191, 106, 8, 0.46);
  }
}

/* O selo fica DENTRO, encostado no topo: selo montado sobre a borda
   obrigaria margem extra em TODOS os cartões só para ele não cortar. */
.lp-plano__badge {
  align-self: flex-start;
  margin-bottom: var(--space-3);
  padding: 5px 11px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand-on);
  background: var(--color-brand-500);
  border-radius: var(--radius-sm);
}
/* No cartão comum o selo some, mas o ESPAÇO dele fica: é o que mantém os
   três nomes e os três preços na mesma linha. */
.lp-plano:not(.lp-plano--destaque) .lp-plano__badge { visibility: hidden; }
@media (max-width: 619px) {
  .lp-plano:not(.lp-plano--destaque) .lp-plano__badge { display: none; }
}

.lp-plano__nome {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
  font-weight: var(--fw-semibold);
}
/* Sem selo, o nome alinha com o dos cartões que têm — senão o Pro
   empurraria tudo pra baixo e a linha de preço sairia do lugar. */
.lp-plano:not(.lp-plano--destaque) .lp-plano__nome { margin-top: calc(1.25rem + var(--space-3)); }
@media (max-width: 619px) {
  .lp-plano:not(.lp-plano--destaque) .lp-plano__nome { margin-top: 0; }
}

.lp-plano__preco {
  display: flex; align-items: baseline; gap: 3px;
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.032em;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.lp-plano__preco span { font-size: 0.52em; font-weight: var(--fw-semibold); letter-spacing: 0; }
.lp-plano__preco small { font-size: 0.4em; font-weight: var(--fw-regular); color: var(--lp-sec); letter-spacing: 0; }
/* "Sob consulta" não é número: não leva o peso nem o tamanho de um. */
.lp-plano__preco--texto {
  font-size: clamp(21px, 2.4vw, 26px);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.022em;
  color: var(--lp-sec);
}

/* O limite de leads é o que de fato separa os planos — por isso ele vem
   logo abaixo do preço e em grafite, não em cinza de apoio. */
.lp-plano__leads {
  margin: 0;
  font-size: var(--body-sm-size);
  font-weight: var(--fw-semibold);
  color: var(--color-brand-800);
}
.lp-plano__desc {
  margin: 0 0 var(--space-5);
  font-size: var(--body-sm-size);
  line-height: 1.55;
  color: var(--lp-sec);
  text-wrap: pretty;
}

/* ── O QUE O PLANO INCLUI ──
   Estava cadastrado no painel e a landing ignorava. Sem esta lista o
   cartão mostra três linhas de um plano que tem cinco argumentos — e
   ninguém consegue COMPARAR, que é o único motivo de alguém parar aqui.

   Check laranja pequeno, alinhado com a primeira linha do texto: item de
   duas linhas com o check no meio fica torto. ── */
.lp-plano__itens {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--lp-fio);
  display: grid; gap: 9px;
}
.lp-plano__itens li {
  position: relative;
  padding-left: 23px;
  font-size: var(--body-sm-size);
  line-height: 1.45;
  color: var(--lp-texto);
  text-wrap: pretty;
}
.lp-plano__itens li::before {
  content: '';
  position: absolute; left: 0; top: 0.34em;
  width: 15px; height: 15px;
  border-radius: var(--radius-pill);
  background: #fdf0dd;
  /* O visto desenhado na própria máscara: um <svg> por item seriam ~24
     ícones repetidos no HTML sem dizer nada de novo ao leitor de tela. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bf6a08' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 10px 10px;
  background-position: center;
  background-repeat: no-repeat;
}
.lp-plano__itens strong { font-weight: var(--fw-semibold); }
.lp-plano--destaque .lp-plano__itens li::before { background-color: #fde6c9; }
/* Empurra o botão pro rodapé: descrições de tamanhos diferentes não podem
   deixar os quatro botões em alturas diferentes. */
.lp-plano__cta { margin-top: auto; width: 100%; justify-content: center; }
/* O botão do destacado é o alvo da dobra: um degrau maior que os vizinhos. */
.lp-plano--destaque .lp-plano__cta { padding-top: 13px; padding-bottom: 13px; font-weight: var(--fw-semibold); }

.lp-planos__nota {
  max-width: 38rem;
  margin: var(--space-6) auto 0;
  text-align: center;
  font-size: var(--body-sm-size);
  line-height: 1.6;
  color: var(--lp-sec);
  text-wrap: pretty;
}

/* ── CONEXÃO DO WHATSAPP ──
   Bloco à parte: é uma decisão diferente da do plano. Juntar as duas fazia
   o cartão de preço mentir sobre o custo total. ── */
.lp-conexoes { margin-top: var(--space-16); padding-top: var(--space-12); border-top: 1px solid var(--lp-fio); }
.lp-conexoes__titulo {
  margin: 0 0 var(--space-8);
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  letter-spacing: -0.022em;
  font-weight: var(--fw-semibold);
}
.lp-conexoes__par { display: grid; gap: var(--space-5); }
@media (min-width: 860px) { .lp-conexoes__par { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }

.lp-conex {
  display: flex; flex-direction: column;
  padding: var(--space-6);
  background: var(--color-neutral-0);
  border: 1px solid var(--lp-fio);
  border-radius: var(--radius-xl);
}
.lp-conex h4 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: -0.018em;
  font-weight: var(--fw-semibold);
}
.lp-conex__taxa {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  margin: 0 0 var(--space-4);
  font-size: var(--body-sm-size);
  font-weight: var(--fw-medium);
  color: var(--color-brand-800);
}
.lp-conex__taxa strong { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.lp-conex__taxa small { font-size: var(--caption-size); font-weight: var(--fw-regular); color: var(--lp-sec); }
.lp-conex__desc {
  margin: 0 0 var(--space-4);
  font-size: var(--body-sm-size);
  line-height: 1.6;
  color: var(--lp-sec);
  text-wrap: pretty;
}
.lp-conex__inclui {
  margin: 0 0 var(--space-2);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-sec);
}
.lp-conex__itens { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: 5px; }
.lp-conex__itens li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--body-sm-size);
  color: var(--lp-texto);
}
/* Traço, não check: cinco checks verdes seguidos viram lista de
   infoproduto, e aqui não há nada sendo provado — é só o que está dentro. */
.lp-conex__itens li::before {
  content: ''; position: absolute; left: 0; top: 0.68em;
  width: 10px; height: 1.5px;
  background: var(--color-brand-500);
}

/* O aviso da conexão alternativa. Mesmo tamanho do resto do texto de
   apoio: encolher seria esconder, e esconder risco é o que a gente
   passou a semana inteira tirando desta página. */
.lp-conex__aviso {
  margin: auto 0 0;
  padding-top: var(--space-4);
  border-top: 1px dashed var(--lp-fio);
  font-size: var(--caption-size);
  line-height: 1.6;
  color: var(--lp-sec);
  text-wrap: pretty;
}

/* ── O FECHAMENTO ── */
.lp-planos__fim { max-width: 34rem; margin: var(--space-16) auto 0; text-align: center; }
.lp-planos__fim-t {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(21px, 2.8vw, 27px);
  line-height: 1.3;
  letter-spacing: -0.024em;
  font-weight: var(--fw-semibold);
  text-wrap: balance;
}
.lp-planos__fim-s {
  margin: 0 0 var(--space-6);
  font-size: var(--body-sm-size);
  line-height: 1.6;
  color: var(--lp-sec);
  text-wrap: pretty;
}
.lp-planos__fim-n { margin: var(--space-3) 0 0; font-size: var(--caption-size); color: var(--lp-sec); }

/* ── A FAIXA DA CASA ──
   Fundo branco: separa dos preços sem precisar de outra borda. ── */
.lp-casa-faixa {
  --lp-texto: #171717;
  --lp-sec:   #605d57;
  --lp-fio:   #e7dcc9;
  padding: var(--space-16) 0;
  background: var(--color-neutral-0);
  color: var(--lp-texto);
}

/* ── A ENTRADA ──
   Mesmo motor da dobra 5 (assets/js/landing-faz.js): opacidade,
   translateY leve e stagger. Sem pin, sem scrub. Tudo pende de `.js-faz`,
   que o script só põe depois de checar prefers-reduced-motion. ── */
.js-faz .lp-plano[data-entra],
.js-faz .lp-conex[data-entra] { opacity: 0; transform: translateY(8px); }
.js-faz .lp-plano.js-entrou,
.js-faz .lp-conex.js-entrou { animation: lp-sobe 440ms cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.js-faz .lp-plano:nth-child(2).js-entrou, .js-faz .lp-conex:nth-child(2).js-entrou { animation-delay: 80ms; }
.js-faz .lp-plano:nth-child(3).js-entrou { animation-delay: 160ms; }
.js-faz .lp-plano:nth-child(4).js-entrou { animation-delay: 240ms; }

/* ── A FAIXA DA CASA ──
   Duas colunas: o fato à esquerda, a fala à direita. O depoimento é do
   próprio fundador — então não se disfarça de prova social de cliente. A
   assinatura diz quem é, e a força vem do fato ao lado, não da citação. ── */
.lp-casa { display: grid; gap: var(--space-8); }
@media (min-width: 880px) {
  .lp-casa {
    grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr);
    gap: var(--space-12);
    align-items: center;
  }
}

.lp-casa__texto h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.24;
  letter-spacing: -0.022em;
  font-weight: var(--fw-semibold);
}
.lp-casa__texto p {
  margin: 0;
  font-size: var(--body-sm-size);
  line-height: 1.65;
  color: var(--lp-sec);
  text-wrap: pretty;
}

.lp-casa__fala { margin: 0; }
.lp-casa__fala blockquote {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
  border-left: 2px solid var(--color-brand-500);
  font-size: var(--text-lg);
  line-height: 1.55;
  letter-spacing: -0.008em;
  text-wrap: pretty;
}
.lp-casa__fala figcaption {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2);
  padding-left: calc(var(--space-5) + 2px);
  font-size: var(--body-sm-size);
  color: var(--lp-sec);
}
.lp-casa__fala figcaption strong {
  font-weight: var(--fw-semibold);
  color: var(--lp-texto);
}
/* O ponto entre nome e cargo vive no CSS: no HTML ele viraria lixo pro
   leitor de tela, que leria "ponto" no meio da assinatura. */
.lp-casa__fala figcaption strong::after {
  content: '·';
  margin-left: var(--space-2);
  color: var(--lp-fio);
  font-weight: var(--fw-regular);
}


/* ── A BARRA DE COOKIES ──
   Rodapé, não modal. Modal tapa a página inteira antes de a pessoa ver o
   que veio ver — é a forma mais cara de perder uma visita paga.

   As duas escolhas têm o MESMO peso de leitura: "Só o necessário" não é
   link cinza escondido. Consentimento em que recusar é difícil não é
   consentimento, é desgaste. ── */
.lp-consent {
  position: fixed; z-index: 60;
  left: var(--gutter); right: var(--gutter); bottom: var(--gutter);
  max-width: 44rem; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-neutral-0);
  border: 1px solid #e7dcc9;
  border-radius: var(--radius-xl);
  box-shadow: 0 18px 44px -20px rgba(120, 96, 66, 0.4);
  /* Entra de baixo, já fora da tela: sem isto ela pisca no primeiro quadro
     e rouba a atenção da manchete. */
  transform: translateY(140%);
  opacity: 0;
  transition: transform 380ms var(--easing-standard), opacity 380ms var(--easing-standard);
}
.lp-consent--vem { transform: translateY(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .lp-consent { transition: none; transform: none; opacity: 1; }
}
.lp-consent p {
  flex: 1 1 18rem; margin: 0;
  font-size: var(--body-sm-size); line-height: 1.5;
  color: #605d57; text-wrap: pretty;
}
.lp-consent__bts { display: flex; gap: var(--space-2); flex-shrink: 0; }
@media (max-width: 479px) {
  .lp-consent { padding: var(--space-4); }
  .lp-consent__bts { width: 100%; }
  .lp-consent__bts .lp-btn { flex: 1; justify-content: center; }
}

/* ── Seções ─────────────────────────────────────────────────────────── */
.lp-secao { padding: var(--space-20) 0; }
.lp-secao--suave { background: var(--bg-subtle); }
.lp-secao__titulo { text-align: center; max-width: 620px; margin: 0 auto var(--space-12); }
.lp-secao__titulo h2 { margin: 0 0 var(--space-3); font-size: clamp(26px, 4.5vw, var(--text-4xl)); letter-spacing: var(--tracking-tight); line-height: 1.2; }
.lp-secao__titulo p { margin: 0; color: var(--text-secondary); font-size: var(--text-lg); }

.lp-grade { display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .lp-grade--3 { grid-template-columns: repeat(3, 1fr); } .lp-grade--2 { grid-template-columns: repeat(2, 1fr); } }

.lp-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: var(--space-6); box-shadow: var(--shadow-sm);
}
/* Sem o quadrado laranja atrás. Ele fazia duas coisas ruins de uma vez:
   "ícone dentro de quadrado arredondado em cada seção" é a assinatura mais
   reconhecível de template SaaS, e espalhava laranja decorativo por seis
   cards — contra a regra de que laranja significa ação. O ícone solto diz
   a mesma coisa e a página respira. */
.lp-card__icone {
  width: 26px; height: 26px;
  color: var(--color-brand-700);   /* o 500 daria 2.3:1 no claro */
  display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4);
}
.lp-card__icone svg { width: 26px; height: 26px; stroke-width: 1.75; }
.lp-card h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.lp-card p { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); }

/* ── FAQ ────────────────────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════════════
   PERGUNTAS — a última dobra antes do fechamento
   Ver docs/33_FUNDACAO_VISUAL.md

   Era a única seção ainda no CSS genérico de `.lp-secao`: fundo cinza do
   sistema (--bg-subtle) no meio de uma página de neutros QUENTES, régua de
   espaçamento antiga e borda de token frio. Destoava de tudo que veio antes.

   A FORMA: título à esquerda, perguntas à direita. A página não tinha nenhum
   bloco nessa forma, e a coluna da esquerda ganha o convite pra falar com a
   gente — que sozinho não valeria uma seção, e aqui ocupa um vazio.

   Fundo branco, encostando na faixa da ADG que vem antes: as duas são
   conteúdo de tranquilizar, e ler como um bloco só está certo. O fio no topo
   separa sem precisar de outra cor.
   ════════════════════════════════════════════════════════════════════════ */
.lp-perg {
  --lp-texto: #171717;
  --lp-sec:   #605d57;
  --lp-fio:   #eee4d5;
  padding: var(--space-20) 0;
  background: var(--color-neutral-0);
  border-top: 1px solid var(--lp-fio);
  color: var(--lp-texto);
}

.lp-perg__grade { display: grid; gap: var(--space-10); }
@media (min-width: 900px) {
  .lp-perg__grade {
    grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
    gap: var(--space-16);
    align-items: start;
  }
  /* Gruda no alto enquanto as perguntas rolam: numa lista longa, o título
     sumindo deixa a pessoa sem âncora do que está lendo. */
  .lp-perg__texto { position: sticky; top: var(--space-16); }
}

.lp-perg__titulo {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.14;
  letter-spacing: -0.03em;
  font-weight: var(--fw-bold);
}
.lp-perg__sub {
  margin: 0;
  font-size: var(--body-sm-size);
  line-height: 1.65;
  color: var(--lp-sec);
  text-wrap: pretty;
}

/* ── OS LINKS DE WHATSAPP ──
   Quatro no total, todos contextuais: cada um abre a conversa com uma
   frase já escrita dizendo DE ONDE a pessoa veio. Sem isso o dono recebe
   "oi" sem contexto e a conversa começa do zero.

   Sem botão flutuante de propósito: ele tapa conteúdo no celular e disputa
   atenção com o CTA principal em toda a página. Aqui o convite aparece
   onde a dúvida nasce, que é quando ele serve. ── */
.lp-perg__zap {
  margin-top: var(--space-6);
  gap: var(--space-2);
}
/* Dentro de um parágrafo: sublinhado, porque sem ele um link no meio de
   texto corrido só se revela no hover — e no celular não há hover. */
.lp-elo-zap {
  color: var(--color-brand-800);
  font-weight: var(--fw-medium);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--color-brand-800) 40%, transparent);
}
.lp-elo-zap:hover { text-decoration-color: currentColor; }
.lp-elo-zap:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── O ACORDEÃO ──
   Sem cartão e sem fundo: só fios horizontais. Oito caixas com borda em
   volta viram lista de cartões, e a dobra 5 já tirou esse padrão de cima
   da página. Aqui a pergunta é a interface — ela é que tem que pesar. ── */
.lp-faq { max-width: none; margin: 0; display: block; }

.lp-faq details {
  border: 0;
  border-bottom: 1px solid var(--lp-fio);
  border-radius: 0;
  background: none;
}
.lp-faq details:first-child { border-top: 1px solid var(--lp-fio); }

.lp-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  font-family: var(--font-display);
  font-size: var(--text-base);
  letter-spacing: -0.012em;
  font-weight: var(--fw-semibold);
  color: var(--lp-texto);
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary:hover { color: var(--color-brand-800); }
/* O foco precisa de contorno visível: o item não tem fundo próprio pra
   inverter, então quem navega por teclado ficaria sem pista nenhuma. */
.lp-faq summary:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.lp-faq summary svg {
  flex-shrink: 0;
  color: var(--color-brand-500);
  transition: transform var(--duration) var(--ease);
}
.lp-faq details[open] summary svg { transform: rotate(180deg); }

.lp-faq details p {
  margin: 0;
  padding: 0 var(--space-8) var(--space-5) 0;
  font-size: var(--body-sm-size);
  line-height: 1.65;
  color: var(--lp-sec);
  text-wrap: pretty;
}

@media (max-width: 899px) {
  .lp-perg__grade { gap: var(--space-8); }
  .lp-faq details p { padding-right: 0; }
}

/* ── CTA final + rodapé ─────────────────────────────────────────────── */
.lp-final {
  /* O marfim da cena volta aqui: a página abre e fecha no mesmo tom, e o
     miolo claro fica entre as duas pontas quentes. */
  --lp-final-visto: #faf3eb;
  text-align: center;
  padding: var(--space-24) 0;
  background: #faf3eb;
}
/* O balão, uma vez só na página inteira. Grande o bastante para ter peso,
   pequeno o bastante para não competir com a manchete que ele responde. */
.lp-final__marca {
  display: block;
  margin: 0 auto var(--space-6);
  color: var(--color-brand-500);
}
/* Cores explícitas. Antes o h2 não tinha cor e herdava do <body> — foi
   assim que ele virou texto branco sobre marfim no modo escuro. */
.lp-final h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, var(--text-4xl));
  margin: 0 0 var(--space-3);
  letter-spacing: var(--tracking-tight);
  color: #171717;
}
.lp-final p { color: #605d57; font-size: var(--text-lg); margin: 0 0 var(--space-8); }

/* ── RODAPÉ ──
   Marfim, o mesmo do fechamento logo acima, separado por um fio.

   ⚠️ POR QUE NÃO É ESCURO. A tentativa anterior foi fundo grafite com
   `filter: invert(1) brightness(1.9) hue-rotate(180deg)` na escrita da
   marca. O resultado, renderizado e conferido: as letras viravam um branco
   CHAPADO — perdiam todo o volume 3D do logo — e o acento saía VERMELHO em
   vez de laranja. Filtro de CSS não cria uma versão clara de um logo; ele
   deforma a que existe.

   A marca é grafite sobre claro e não existe versão clara dela. Enquanto
   não existir, o rodapé é claro. No dia que houver um arquivo com as letras
   claras e o acento laranja, o fundo escuro volta com uma linha.

   Cores cravadas, como no resto da página: o rodapé não pode depender do
   tema do app pra existir — foi assim que ele ficou preto no escuro. ── */
.lp-rodape {
  padding: var(--space-10) 0;
  background: #faf3eb;
  border-top: 1px solid #e7dcc9;
  color: #605d57;
}
.lp-rodape__linha {
  display: flex; flex-wrap: wrap; gap: var(--space-6);
  align-items: center; justify-content: space-between;
}
/* ── A MARCA DA ADG ──
   É o TRIÂNGULO sozinho, e isso é decisão, não recorte preguiçoso.

   O arquivo original é branco-e-verde sobre preto, com brilho. As letras
   "DG" são BRANCAS: em fundo claro elas somem, e em tamanho de rodapé o
   halo se junta a elas. O triângulo, não — é geometria de borda dura e lê
   a 20px. Extraído por máscara de cor (tudo que não é verde virou
   transparente), então funciona em fundo claro E escuro, sem halo.

   O nome vem escrito ao lado, na tipografia da página, que é mais legível
   do que qualquer letra de logo a esse tamanho.
   Para usar a marca COMPLETA algum dia: precisa de um arquivo chapado,
   sem brilho, com as letras em grafite e fundo transparente. ── */
.lp-rodape__adg {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
  color: #605d57;
}
.lp-rodape__adg img { height: 20px; width: auto; flex-shrink: 0; }
.lp-rodape__adg strong { color: #171717; font-weight: var(--fw-semibold); }
.lp-rodape a { color: #605d57; text-decoration: none; font-size: var(--text-sm); }
.lp-rodape a:hover { color: #171717; }
.lp-rodape__entrar:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}