/* ============================================================
   LP João Paulo Silva — recuperação tributária + crédito.
   Gramática própria (não usa profile.css): página de conversão,
   fundo branco para leitura e blocos em azul-marinho.

   Esta folha implementa o DESIGN.md da raiz do repositório. Os
   números dele (container 1140, lateral 80/40/24, respiro vertical
   120/80/64, botão 60px de altura e raio 14, cartão 18, foto 20)
   viram propriedades customizadas no bloco logo abaixo, e não valores
   soltos espalhados pelo arquivo — quando o documento mudar, muda em
   um lugar.

   Por que as propriedades moram em `body[data-brand="joao"]` e não em
   `.lp`: o botão fixo de WhatsApp e o rodapé são IRMÃOS de
   <main class="lp">, não filhos. Declaradas em `.lp` elas nunca
   chegariam nesses dois, e a página teria duas escalas.

   Regra de contraste da identidade: dourado só preenchendo botão
   com texto azul-marinho, ou como texto/ícone sobre azul-marinho.
   Dourado como TEXTO sobre branco não entra em nenhum lugar — a
   combinação dá 1,89:1. A única exceção é BORDA (a caixa do case),
   que é elemento decorativo e não texto.

   A camada de movimento (GSAP) NÃO tem contraparte aqui de
   propósito: nenhum `opacity: 0` mora nesta folha. Quem esconde para
   revelar depois é o joao-motion.js, em JS, e só o que está fora da
   tela. Se o GSAP não carregar, a página aparece inteira. Não mova
   estado inicial de animação para cá — a página existe para abrir
   conversa no WhatsApp e ficaria branca esperando uma biblioteca.
   ============================================================ */

[hidden] {
  display: none !important;
}

body[data-brand='joao'] {
  /* ---------- layout ----------
     O documento pede container 1140 E lateral 80: 1140 + 160 = 1300,
     então "máximo da página 1200" não pode ser o container mais o
     respiro. Leitura adotada: 1140 é o teto do CONTEÚDO e 80 é o
     respiro enquanto a tela é menor que 1300. O 1200 fica reservado
     ao inner do topo, que carrega texto + foto e é o único bloco que
     pede a coluna extra. */
  --lp-max: 1200px;
  --lp-container: 1140px;

  /* 24 / 40 / 80px nos três pontos do documento, sem breakpoint:
     5.95vw - 0.36rem dá 39,9px a 768 e 79,9px a 1440. O piso de
     1.5rem segura os 24px do celular. */
  --lp-gutter: clamp(1.5rem, 5.95vw - 0.36rem, 5rem);

  /* 64 / 80 / 120px entre seções: 9.26vw + 0.55rem dá 79,9 a 768 e
     119,9 a 1200, e trava em 120 daí para cima. */
  --lp-y: clamp(4rem, 9.26vw + 0.55rem, 7.5rem);
  --lp-y-lg: calc(var(--lp-y) * 1.35); /* só a chamada final */

  /* ---------- formas (DESIGN.md § Bordas e § Botões) ---------- */
  --lp-radius-btn: 14px;
  --lp-radius-card: 18px;
  --lp-radius-photo: 20px;
  --lp-btn-h: 60px;
  --lp-btn-h-lg: 68px;
  --lp-btn-pad-x: 2.5rem;
  --lp-btn-pad-x-lg: 3rem;

  --lp-divider: rgba(0, 0, 0, 0.08);

  /* A sombra do documento (6% de preto) é para cartão BRANCO. Sob
     cartão azul-marinho ela é invisível, e sob botão dourado em cima
     de azul também — daí as duas variantes tingidas. Todas continuam
     "muito suaves": nenhuma passa de 50% de alfa, e o raio é grande. */
  --lp-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
  --lp-shadow-lift: 0 26px 70px rgba(0, 0, 0, 0.1);
  --lp-shadow-navy: 0 20px 60px -18px rgba(0, 53, 122, 0.35);
  --lp-shadow-gold: 0 14px 34px -12px rgba(0, 12, 32, 0.5);

  /* ---------- movimento: durações PURAS, sem easing embutido ----------
     Os tokens globais --t e --t-fast carregam duração E easing juntos
     ("0.34s var(--ease)"). Isso só é válido no atalho `transition`.
     Em animation-duration, em animation-delay, em transition-delay e
     dentro de calc() o valor é inválido e o navegador DESCARTA a
     declaração inteira, calado. Aqui a duração anda separada do
     easing. Não é duplicação por descuido. */
  --lp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lp-dur: 300ms; /* § Botões: "transition .3" */

  /* ---------- texto sobre azul ----------
     86% de branco dá 9,05:1 e 72% dá 6,55:1 — os dois passam AA com
     folga. Nenhum é #a6a6a6, que sobre BRANCO dá 2,43:1 e não passa
     em lugar nenhum (era o que estava em .lp-stat__label). */
  --lp-ink-on-navy: rgba(255, 255, 255, 0.86);
  --lp-ink-on-navy-soft: rgba(255, 255, 255, 0.72);

  /* ---------- anel de foco ----------
     O base.css usa `outline: var(--brand-bright)`, e nesta marca
     --brand-bright É o próprio azul-marinho (tokens.css) — ou seja,
     anel azul sobre fundo azul, invisível, justamente nos blocos que
     carregam os CTAs de maior conversão. Aqui o anel é herdado:
     nasce azul e cada bloco escuro o troca por branco. */
  --lp-focus: var(--navy);

  /* ---------- topo ----------
     Teto de 35rem (560px) e não é estética: o arquivo tem 667x1000
     nativos. Acima disso a foto é ampliada até em tela 1x. Se um dia
     vier o original em alta, este teto pode subir junto com a lista
     de alturas em scripts/process-images.mjs. */
  --lp-hero-photo-w: min(35rem, 40vw);
  --lp-hero-y: clamp(1.5rem, 6vh, 4.5rem);
}

/* svh (altura da janela com a barra de endereço ABERTA) é o pior caso
   no celular, e é a medida que fecha a primeira dobra de verdade. Vai
   em @supports porque custom property com valor inválido SOME por
   completo — não cai para a declaração anterior. */
@supports (height: 1svh) {
  body[data-brand='joao'] {
    --lp-hero-photo-w: min(35rem, 40vw, 48svh);
    --lp-hero-y: clamp(1.5rem, 6svh, 4.5rem);
  }
}

/* ---------- contêineres ----------
   O base.css faz `width: min(100% - 2.5rem, ...)`: 20px de respiro
   fixo de cada lado, e o teto vem de --container-wide (1248px). Os
   dois números são de outra gramática — esta página tem os três
   respiros do documento (24/40/80) e teto de 1140. Reescrever aqui, e
   não no base.css, porque hub, msa e wellington usam os mesmos
   seletores. Especificidade 0,2,0 vence a de lá, e esta folha carrega
   por último. */
.lp .container,
.lp .container-wide,
.lp-footer .container-wide {
  width: 100%;
  max-width: var(--lp-container);
  margin-inline: auto;
  padding-inline: var(--lp-gutter);
}

/* ---------- foco visível ----------
   Ver --lp-focus. Vale para a LP, para o rodapé e para o botão fixo,
   que estão em três raízes diferentes. */
.lp :focus-visible,
.lp-footer :focus-visible,
.lp-sticky:focus-visible {
  outline: 3px solid var(--lp-focus);
  outline-offset: 3px;
  border-radius: 4px;
}
/* O botão fixo é o único que FLUTUA: o que está atrás dele muda
   conforme a rolagem, então um anel desenhado do lado de fora fica
   invisível sempre que passa sobre um bloco azul. Aqui o anel vai para
   DENTRO do botão, onde o fundo é sempre o dourado e o azul-marinho dá
   6,09:1 — visível em qualquer posição da página. */
.lp-sticky:focus-visible {
  outline-offset: -4px;
  border-radius: var(--lp-radius-btn);
}

/* ---------- tipografia da LP ---------- */
.lp-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  /* 1rem e não clamp: o documento exige mínimo de 16px, e o clamp que
     estava aqui entregava 10,9px. Entressinal menor para a linha em
     maiúsculas não ficar mais larga que a headline. */
  font-size: 1rem;
  letter-spacing: 0.12em;
  line-height: 1.4;
  color: var(--gold);
}
.lp-section-title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.1;
  font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.4rem);
  color: var(--navy);
}
.lp-section-title--on-navy {
  color: #fff;
}

/* ---------- botões ---------- */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  /* 16px fixo. O clamp que estava aqui dava 12,6px na tela pequena —
     justamente onde o botão é a única coisa que importa. */
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  /* 60px do documento. De graça resolve a área de toque de 48x48. O
     min-height manda quando o rótulo tem uma linha; o padding vertical
     é o que segura duas. */
  min-height: var(--lp-btn-h);
  padding: 0.75rem var(--lp-btn-pad-x);
  border-radius: var(--lp-radius-btn);
  border: 2px solid transparent;
  transition:
    background var(--lp-dur) var(--lp-ease),
    color var(--lp-dur) var(--lp-ease),
    border-color var(--lp-dur) var(--lp-ease),
    box-shadow var(--lp-dur) var(--lp-ease),
    transform var(--lp-dur) var(--lp-ease);
}
/* principal: dourado preenchido, texto azul-marinho. Sem gradiente e
   sem brilho (§ Botões). */
.lp-btn--gold {
  background: var(--gold);
  color: var(--navy);
}
.lp-btn--gold:hover {
  background: #f2c81c;
  transform: translateY(-2px);
  box-shadow: var(--lp-shadow-gold);
}
/* secundário: contorno azul-marinho, sem preenchimento */
.lp-btn--outline {
  border-color: var(--navy);
  color: var(--navy);
}
.lp-btn--outline:hover {
  background: var(--navy);
  color: #fff;
  transform: translateY(-2px);
}
.lp-btn--lg {
  min-height: var(--lp-btn-h-lg);
  padding-inline: var(--lp-btn-pad-x-lg);
  font-size: 1.0625rem;
}
/* Marca de rede dentro do botão. `flex: none` para o glifo não ser
   esmagado quando o rótulo quebra em duas linhas no celular, e o
   currentColor do SVG faz ele acompanhar a inversão do hover do
   contorno sem nenhuma regra extra. */
.lp-btn svg {
  width: 20px;
  height: 20px;
  flex: none;
}

/* ============================================================
   BLOCO 1 · TOPO
   A primeira dobra tem que caber inteira — nome, headline, descrição,
   botão, foto e selo, "sem necessidade de rolagem" (§ Hero). Quem
   garante isso não é sorte de conteúdo: é a ALTURA da tela entrando
   em três lugares — no min-height do bloco, no teto de corpo dos dois
   títulos e na largura da foto (--lp-hero-photo-w).

   O texto do topo tem orçamento de caracteres, e ele é apertado no
   celular: eyebrow ~28, headline ~85, bio ~135. Passar disso soma
   linha e a dobra abre. Se o texto crescer, a conta tem que ser
   refeita — não é um limite estético.
   ============================================================ */
.lp-hero {
  position: relative;
  background: var(--navy);
  color: #fff;
  --lp-focus: #fff;
  /* Quanto a foto passa da borda da seção em cima e embaixo. É token
     porque DOIS lugares dependem do mesmo número: o inset do
     .lp-hero__media e o `bottom` do selo, que precisa descontá-lo para
     não cair fora da dobra. Antes o 8% estava escrito na mão no media
     e o selo lia um --lp-hero-bleed que não existia em lugar nenhum
     (caía no fallback), então os dois podiam sair de sincronia. */
  --lp-hero-bleed: 8%;
  /* overflow continua aqui, mas o motivo MUDOU: antes segurava o
     sangramento da foto pelo topo (margin-top negativo, que saiu junto
     com a máscara). Agora contém o parallax do retrato, que sobe 6% da
     própria altura. Sem isso a foto passa por cima da borda da seção. */
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: 100vh;
  /* svh e não dvh: no celular a barra de endereço ABERTA é o pior
     caso, e é a medida que o svh entrega. Com dvh o bloco caberia só
     depois de a barra recolher — ou seja, depois de rolar, que é
     exatamente o que o documento proíbe. */
  min-height: 100svh;
  padding-block: var(--lp-hero-y);
}
/* 7/5 do grid de 12 colunas do documento. A coluna da foto não é
   fração: é largura calculada, porque é ela que precisa obedecer à
   altura da tela. */
.lp-hero__inner {
  width: 100%;
  max-width: var(--lp-max);
  margin-inline: auto;
  padding-inline: var(--lp-gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--lp-hero-photo-w);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.lp-hero__name {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 0.98;
  /* o teto em svh só entra em tela baixa; em tela alta o clamp de
     largura ganha e nada muda em relação ao desenho de sempre */
  font-size: min(clamp(2.4rem, 1.5rem + 3.6vw, 4.6rem), 9svh);
  margin-top: 0.5rem;
}
.lp-hero__headline {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.18;
  max-width: 26ch;
  font-size: min(clamp(1.3rem, 1.05rem + 1.1vw, 2.05rem), 4.4svh);
  margin-top: clamp(0.8rem, 2vw, 1.15rem);
}
.lp-hero__headline em {
  color: var(--gold);
  font-style: normal;
}
.lp-hero__bio {
  margin-top: clamp(0.8rem, 2vw, 1.15rem);
  max-width: 48ch;
  color: var(--lp-ink-on-navy);
  font-size: 1rem;
}
/* z-index 1 basta e é o certo: o .lp-hero__media tem z-index 0 e, por
   ser posicionado, abre um contexto de empilhamento — tudo que está
   dentro dele (inclusive o degradê no ::after) fica contido ali. Um
   999 aqui não subiria "mais": subiria acima do botão fixo de
   WhatsApp, que é z-index 60 na mesma raiz. */
.lp-hero__id {
  position: relative;
  z-index: 1;
}
/* Escopado no topo. Solto como `.lp-btn { margin-top: 1rem }` isto
   pegava TODOS os botões da página — o do bloco de autoridade ganhava
   1rem de sobra que ninguém pediu. */
.lp-hero__id .lp-btn {
  margin-top: clamp(1.4rem, 3.5vw, 2rem);
}

/* ---------- retrato de corpo inteiro, emoldurado ----------
   Aqui morava uma máscara de duas camadas com mask-composite:
   intersect, mais uma tinta azul em multiply no ::before e um degradê
   de base no ::after, tudo para simular recorte. Existia por UM
   motivo: no retrato de estúdio a cabeça encostava no alto do quadro,
   nenhuma radial conseguia apagar a borda de cima, e a borda era
   morta no layout (coluna subindo com margin-top negativo).

   Saiu inteira. A foto nova é outra coisa: corpo inteiro sentado,
   sobra parede acima da cabeça — o problema antigo não existe. E tem
   um problema NOVO, pior para máscara: o fundo não é liso. São três
   (parede branca, couro preto, piso de madeira). Dissolver isso no
   azul não vira recorte, vira borrão azul-acinzentado no meio do
   quadro. A tinta em multiply servia para puxar um fundo de estúdio
   CLARO para a paleta; sobre couro quase preto ela só funde o blazer
   no sofá. E o degradê de base contraria o § Gradientes.

   Então o "recortada" do documento passa a ser o que sempre deveria
   ter sido: enquadramento + canto de 20px. Desktop e celular voltam a
   ser UM componente, com dois recortes, em vez de dois componentes.

   .lp-hero__media carrega o max-width (e não .lp-portrait) porque o
   selo é filho dele: assim o selo ancora na borda da FOTO, inclusive
   no celular, onde a foto é estreita e centralizada. */
.lp-hero__media {
  position: absolute;
  top: calc(-1 * var(--lp-hero-bleed));
  bottom: calc(-1 * var(--lp-hero-bleed));
  right: 0;
  left: auto;
  width: clamp(26rem, 56vw, 64rem);
  max-width: none; /* anula o var(--lp-hero-photo-w) */
  margin-inline: 0;
  z-index: 0;
}

.lp-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to right,
    var(--navy) 0%,
    color-mix(in srgb, var(--navy) 40%, transparent) 22%,
    color-mix(in srgb, var(--navy) 30%, transparent) 42%,
    color-mix(in srgb, var(--navy) 12%, transparent) 80%,
    transparent 100%
  );
}

.lp-portrait {
  height: 100%;
  aspect-ratio: auto; /* substitui o 667/1000 */
  border-radius: 0; /* sangrado não tem canto */
  box-shadow: none; /* o fio de luz existia para separar a moldura do navy */
  margin: 0;
}
.lp-portrait picture {
  display: block;
  height: 100%;
}
.lp-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 18%;
}

/* ---------- selo do valor recuperado ----------
   Dourado com texto azul-marinho, circular, "posicionado parcialmente
   sobre a foto" (§ Selo). O recuo negativo à direita cabe dentro do
   respiro lateral do inner, então o overflow:hidden da seção não o
   corta. Sobe e desce junto com o parallax, porque é irmão da figura
   dentro do .lp-hero__media — a moldura e o selo andam em registro,
   numa camada só. */
.lp-seal {
  position: absolute;
  z-index: 3;
  left: auto;
  right: clamp(1rem, 4vw, 3rem);
  bottom: calc(var(--lp-hero-bleed, 8%) + clamp(1.5rem, 6vh, 4rem));
  width: clamp(112px, 15vw, 168px);
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 0.8rem;
  background: var(--gold);
  color: var(--navy);
  display: grid;
  place-content: center;
  text-align: center;
  box-shadow: 0 14px 34px -14px rgba(0, 12, 32, 0.55); /* "pequena sombra" */
}
.lp-seal__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 0.85rem + 0.6vw, 1.4rem);
  line-height: 1.05;
  /* Dimensionar o selo só para o "+R$ 80mi" de hoje já quebrou uma vez:
     com um valor mais longo o texto saía pela borda do círculo dourado.
     Aqui ele QUEBRA em mais linhas em vez de vazar. O selo continua
     sendo para valor curto, mas o layout aguenta o que for escrito. */
  overflow-wrap: break-word;
  hyphens: none;
  min-width: 0;
}

.lp-seal__label {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ============================================================
   BLOCO 2 · DOR
   Título à esquerda, cartões à direita, 2x2 (§ Bloco Dor). O fluxo do
   documento começa em PROBLEMA, não em oferta — por isso este bloco
   vem antes dos números.

   4/8 do grid de 12 e não 5/7: com 5/7 cada cartão fica com ~256px e,
   depois do padding grande que o documento pede, sobram 184px de
   texto — nove linhas para uma frase de duas. Com 4/8 sobram 242px e
   a frase fecha em quatro. É daí que vem o teto de ~105 caracteres
   por cartão: passar disso desmonta o 2x2.

   Nada clicável aqui. O § UX manda mostrar "apenas uma ação
   principal", e ela é o WhatsApp.
   ============================================================ */
.lp-pain {
  background: #fff;
  padding-block: var(--lp-y);
}
.lp-pain__inner {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.lp-pain__lead {
  color: var(--gray-read);
  margin-top: 1rem;
  max-width: 32ch;
  font-size: 1rem;
}
.lp-pain__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  list-style: none;
  padding: 0; /* a numeração é o número dourado */
}
.lp-pain__card {
  background: var(--navy);
  color: var(--lp-ink-on-navy);
  --lp-focus: #fff;
  border-radius: var(--lp-radius-card);
  padding: clamp(1.4rem, 2.6vw, 2.15rem); /* "padding grande" */
  transition:
    transform var(--lp-dur) var(--lp-ease),
    box-shadow var(--lp-dur) var(--lp-ease);
}
/* "Leve elevação". Sombra tingida de azul porque preto a 6% embaixo
   de cartão azul-marinho não aparece. */
.lp-pain__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--lp-shadow-navy);
}
.lp-pain__n {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.02em;
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
}
.lp-pain__text {
  margin-top: 0.9rem;
  font-size: 1rem;
}

/* ============================================================
   BLOCO 3 · PROVA
   Três colunas, divisórias verticais, número grande, legenda pequena,
   e o case abaixo em caixa de borda dourada SEM sombra (§ Bloco Prova).
   ============================================================ */
.lp-proof {
  background: #fff;
  padding-block: var(--lp-y);
}
.lp-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.lp-stat {
  text-align: center;
  padding: 0 clamp(0.8rem, 2.5vw, 2.2rem);
  border-left: 1px solid var(--lp-divider);
}
.lp-stat:first-child {
  border-left: 0;
}
.lp-stat__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -0.02em;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.3rem);
}
.lp-stat__label {
  display: block;
  margin-top: 0.85rem;
  /* era clamp(0.68rem...) ≈ 11px em #a6a6a6 sobre branco = 2,43:1.
     Reprovava nos DOIS critérios do documento de uma vez (contraste AA
     e corpo mínimo de 16px). */
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.4;
  color: var(--gray-read);
}
/* linha do case: caixa com borda dourada fina, texto azul-marinho.
   Borda dourada sobre branco é decoração, não texto — a regra da marca
   continua valendo. */
.lp-case {
  border: 1px solid var(--gold);
  border-radius: var(--lp-radius-card);
  box-shadow: none; /* § "Sem sombra" */
  color: var(--navy);
  max-width: 64ch;
  margin-inline: auto;
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
  padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.2rem, 3vw, 2rem);
  text-align: center;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.12rem);
}
.lp-case b {
  font-weight: 700;
}

/* ============================================================
   BLOCO 4 · AS DUAS FRENTES
   ============================================================ */
.lp-fronts {
  background: #fff;
  padding-block: var(--lp-y);
}
/* auto-fit em vez de repeat(2,1fr) + breakpoint: com
   minmax(min(100%,22rem),1fr) o par cai para uma coluna sozinho por
   volta de 740px, que é onde o corpo de quatro linhas mais o botão
   deixa de caber em meia largura. Um breakpoint a menos para manter
   sincronizado em dois lugares. */
.lp-fronts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: stretch;
}
.lp-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--lp-divider);
  border-radius: var(--lp-radius-card);
  box-shadow: var(--lp-shadow);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  transition:
    transform var(--lp-dur) var(--lp-ease),
    box-shadow var(--lp-dur) var(--lp-ease);
}
.lp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--lp-shadow-lift);
}
/* O ícone era dourado DIRETO no branco: 1,89:1, e contra a regra da
   marca. Virou selo azul-marinho com o traço dourado dentro — a regra
   volta a valer, o contraste sobe para 6,09:1 e o cartão ganha o
   "badge" que o § Componentes lista entre os permitidos. */
.lp-card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: var(--lp-radius-btn);
  background: var(--navy);
  color: var(--gold);
}
.lp-card__icon svg {
  width: 26px;
  height: 26px;
}
.lp-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  color: var(--navy);
  margin-top: clamp(0.9rem, 2vw, 1.2rem);
}
.lp-card__body {
  color: var(--gray-read);
  margin-top: 0.7rem;
  margin-bottom: clamp(1.3rem, 3vw, 1.8rem);
  font-size: 1rem;
  text-align: justify;
}
/* botão alinhado à base do cartão — os dois cartões têm a mesma altura */
.lp-card .lp-btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ============================================================
   BLOCO 5 · COMO FUNCIONA
   ============================================================ */
.lp-how {
  background: var(--navy);
  color: #fff;
  --lp-focus: #fff;
  padding-block: var(--lp-y);
}
.lp-steps {
  --steps-gap: clamp(1rem, 2.5vw, 2rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--steps-gap);
  margin-top: clamp(1.6rem, 4vw, 2.6rem);
  list-style: none;
  padding: 0; /* a numeração é o número dourado */
}
.lp-step__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.lp-step__n {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem);
}
/* linha fina dourada ligando os quatro números (só no computador).
   O joao-motion.js a desenha com scaleX a partir da esquerda — por
   isso ela é um elemento com largura própria, e não uma borda. */
.lp-step__line {
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--gold) 55%, transparent);
  margin-right: calc(-1 * var(--steps-gap));
}
.lp-step:last-child .lp-step__line {
  display: none;
}
/* ícone minimalista por etapa (§ Como Funciona). Outline, traço 2px,
   dourado sobre azul — a regra da marca permite. */
.lp-step__icon {
  display: block;
  margin-top: 1.1rem;
  color: var(--gold);
}
.lp-step__icon svg {
  width: 28px;
  height: 28px;
}
.lp-step__text {
  margin-top: 0.75rem;
  max-width: 24ch;
  font-size: 1rem;
}

/* ============================================================
   BLOCO 6 · CHAMADA FINAL
   "Muito espaço. Centralizado. Título enorme. Botão maior da página.
   Nada além disso." — nada clicável aqui além do botão.
   ============================================================ */
.lp-final {
  background: var(--navy);
  color: #fff;
  text-align: center;
  --lp-focus: #fff;
  padding-block: var(--lp-y-lg);
}
.lp-final__title {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.015em;
  font-size: clamp(1.7rem, 1.25rem + 1.9vw, 2.85rem);
  max-width: 32ch;
  margin-inline: auto;
}
.lp-final__title em {
  color: var(--gold);
  font-style: normal;
}
.lp-final__text {
  margin: clamp(1rem, 2.5vw, 1.4rem) auto 0;
  max-width: 58ch;
  color: var(--lp-ink-on-navy);
  font-size: 1rem;
}
.lp-final .lp-btn {
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
}
.lp-final__note {
  margin-top: 1rem;
  /* era var(--step--1) ≈ 12,5px em #a6a6a6. O contraste sobre azul
     passava; o corpo não. */
  font-size: 1rem;
  color: var(--lp-ink-on-navy-soft);
}

/* ============================================================
   BLOCO 7 · QUEM É JOÃO PAULO
   ============================================================ */
.lp-about {
  background: #fff;
  /* raiz do posicionamento da foto sangrada, e contém o sangramento */
  position: relative;
  overflow: hidden;
  /* Altura mínima porque a faixa da foto é a altura da SEÇÃO, e a seção
     media só o texto: 508px, curto demais para caber cabeça e ombros
     sem cortar o alto do crânio. Com ~600px o retrato respira. A sobra
     vira branco, que é o que o § Sobre pede ("muito espaço em branco").
     O grid com align-items:center é só para o inner ficar no meio dessa
     altura em vez de colado no topo. */
  display: grid;
  align-items: center;
  min-height: clamp(30rem, 44vw, 38rem);
}
.lp-about__inner {
  width: 100%;
  max-width: var(--lp-container);
  margin-inline: auto;
  padding-inline: var(--lp-gutter);
  padding-block: var(--lp-y);
  display: grid;
  /* Colunas com TETO nas duas, e o par centrado. Antes era
     `20rem / 1fr`: a segunda coluna esticava até os 980px do contêiner,
     mas o texto parava nos 604 do próprio limite de leitura — sobravam
     ~80px mortos à direita e o bloco pendia todo para a esquerda. Com
     as duas colunas medidas e `justify-content: center`, o par fica
     centrado e a sobra se divide nos dois lados. */
  grid-template-columns: minmax(0, 24rem) minmax(0, 34rem);
  gap: clamp(2rem, 5vw, 4.5rem);
  justify-content: center;
  align-items: center;
}
/* A primeira coluna é ESPAÇO RESERVADO para a foto, que está fora do
   fluxo. Sem isto o texto — que é o único item em fluxo aqui — cairia
   na coluna 1, debaixo da foto. */
.lp-about__text {
  grid-column: 2;
  position: relative;
  z-index: 1;
}
/* Sem a foto, o texto ocupa a coluna única e o bloco se centra. */
.lp-about__inner:has(.lp-about__media[hidden]) {
  grid-template-columns: minmax(0, 60ch);
}
.lp-about__inner:has(.lp-about__media[hidden]) .lp-about__text {
  grid-column: 1;
}

/* ---------- retrato sangrado, sem moldura ----------
   A moldura (canto de 20px + sombra) saiu pelo mesmo motivo que saiu do
   topo: cartão de foto no meio de uma página institucional lê como
   template, não como ensaio. Aqui a dissolvência é mais fácil que no
   topo, e vale registrar por quê — é o oposto do caso do sofá.

   Esta foto é o retrato de ESTÚDIO: fundo cinza-claro uniforme, um
   fundo só. Dissolver isso no branco do bloco não deixa borda nem
   emenda. A foto do sofá não permitia (parede, couro e piso, três
   fundos, e o degradê virava borrão azul-acinzentado) — foi por isso
   que no topo a saída foi degradê de cor sobre a foto, e aqui pode ser
   dissolvência de verdade.

   E como o alvo é BRANCO, não precisa de mask-image: basta sobrepor
   branco em degradê. Branco sobre branco é invisível, não tem as
   pegadinhas de composição de máscara, e some sozinho se o navegador
   for antigo — o pior caso é a foto com borda reta, não um retângulo
   fantasma.

   Sangra pela ESQUERDA de propósito: o topo sangra pela direita, então
   os dois retratos da página se espelham em vez de repetir. */
.lp-about__media {
  position: absolute;
  inset: 0 auto 0 0;
  width: clamp(17rem, 34vw, 30rem);
  max-width: none;
  margin: 0;
  z-index: 0;
}
.lp-about__media picture {
  display: block;
  height: 100%;
}
.lp-about__media img {
  width: 100%;
  /* height auto NÃO serve aqui: os atributos width/height do <img>
     entram como hint de CSS e a foto voltaria a ter 1000px de altura.
     Preenchendo a faixa, o object-fit resolve o recorte. */
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  /* retrato de estúdio, cabeça no alto do quadro: o corte puxa para
     cima ou some a testa */
  object-position: 50% 18%;
  border-radius: 0;
  box-shadow: none;
}
/* UMA camada só, e horizontal: dissolve o lado direito contra a coluna
   de texto. Nada em cima nem embaixo.

   As bordas horizontais não precisam de degradê porque coincidem
   exatamente com as trocas de seção: acima está a chamada final e
   abaixo o rodapé, os dois em azul-marinho. A mudança de cor já faz o
   corte, e um degradê branco ali só lavava a foto por dentro — no topo
   ele passava por cima do alto da cabeça.

   O fade começa em 55%, e não em 34%: começando cedo ele comia dois
   terços da largura da foto e o rosto já entrava desbotado. A esquerda
   não precisa de nada — ali a foto vai até a borda da tela. */
.lp-about__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right, transparent 55%, #fff 100%);
}
/* Acento dourado do bloco — era o único da página sem nenhum, inteiro
   azul sobre branco. Régua, não texto: dourado como TEXTO sobre branco
   dá 1,89:1 e está proibido pela regra da marca, mas como elemento
   decorativo vale a mesma licença da borda da caixa do case.

   Escopado em .lp-about de propósito: o .lp-section-title é
   compartilhado com o bloco Dor e com o "Como funciona", e uma régua
   solta em todos eles viraria maneirismo. */
.lp-about .lp-section-title {
  position: relative;
  padding-bottom: clamp(0.9rem, 2vw, 1.15rem);
}
.lp-about .lp-section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3.5rem;
  height: 3px;
  border-radius: 2px;
  background: var(--gold);
}
.lp-about__body {
  color: var(--gray-read);
  margin-top: 1rem;
  /* 52ch morde de verdade: a coluna de 34rem entregava 73 caracteres
     por linha, acima da faixa confortável de leitura (45–75, ideal ~66).
     Aqui o teto passa a ser o texto, não a coluna — e continua valendo
     para o caso de a foto não carregar e o bloco virar uma coluna só. */
  max-width: 52ch;
  font-size: 1rem;
}
.lp-credentials {
  display: grid;
  gap: 0.45rem;
  margin-top: 1.1rem;
}
.lp-credentials li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 1rem;
  color: var(--gray-read);
}
.lp-credentials li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--navy);
}
.lp-about__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: clamp(1.3rem, 3vw, 1.8rem);
}

/* ============================================================
   RODAPÉ
   Voltou (tinha saído junto com o bloco de ecossistema) porque o
   documento pede o fecho: linha dourada superior, texto pequeno,
   centralizado, fundo azul.

   Usa --navy-deep, que já existia em tokens.css marcado "rodapé, um
   tom abaixo dos outros blocos" e nunca tinha sido usado: assim o
   fecho se distingue da chamada final sem inventar cor nova.

   Sem <a> de propósito: a página tem UMA ação (§ UX) e ela é o
   WhatsApp. Rodapé com link é rota de fuga. Sem ano, também de
   propósito: ano em HTML estático envelhece e ninguém volta para
   trocar. Razão social, CNPJ e localidade entram aqui quando vierem.
   ============================================================ */
.lp-footer {
  background: var(--navy-deep);
  border-top: 2px solid var(--gold); /* dourado sobre azul: regra ok */
  color: var(--lp-ink-on-navy-soft);
  --lp-focus: #fff;
  text-align: center;
  padding-block: clamp(2rem, 4vw, 3rem);
}
.lp-footer__id {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.lp-footer__note {
  margin-top: 0.5rem;
  font-size: 1rem;
  max-width: 52ch;
  margin-inline: auto;
}

/* ---------- respiro entre seções de MESMO fundo ----------
   Duas seções brancas seguidas não somam respiro: os 120px de baixo da
   anterior JÁ são o respiro entre elas. Antes isso estava escondido
   num `padding-block: 0 var(--lp-pad)` dentro do .lp-fronts, o que só
   funcionava enquanto a ordem dos blocos não mudasse. Agora é regra
   explícita e sobrevive a inserção de bloco no meio.

   Precisa vir DEPOIS das regras de cada seção, senão o
   `padding-block` delas ganha por ordem de cascata. */
.lp-pain + .lp-proof,
.lp-proof + .lp-fronts,
.lp-how + .lp-final {
  padding-top: 0;
}

/* ============================================================
   BOTÃO FIXO DE WHATSAPP — só no celular
   ============================================================ */
.lp-sticky {
  display: none;
}

/* ============================================================
   RESPONSIVO
   Três paradas: 1024, 720 e 560.

   1024 (era 900) porque o topo agora é dirigido pela ALTURA: entre 900
   e 1024 a coluna de texto cai abaixo de ~380px com o nome ainda em
   ~46px, e "João Paulo Silva" quebra feio. É também onde o 4/8 do
   bloco Dor deixa de dar 240px por cartão, e é o limite real de
   tablet em paisagem — a faixa de 6 colunas do documento.

   720 fica INTOCADO. É o corte do botão fixo de WhatsApp. Mover essa
   parada muda quais aparelhos recebem o comportamento de
   IntersectionObserver documentado no joao.js — isso é comportamento
   de conversão em produção, não estilo.

   560 (era 420) porque o documento manda "botões ocupam 100%" no
   celular, e celular começa bem acima de 420. É onde o Dor em duas
   colunas passa a dar menos de 230px por cartão.
   ============================================================ */
@media (max-width: 1024px) {
  /* ---------- topo: a sobreposição CONTINUA aqui ----------
     Até 720 a foto segue sangrada à direita com o texto por cima. O
     que muda é a proporção: a coluna de texto encolheu, então ela
     passa mais perto do rosto — a foto cede largura e o degradê fecha
     mais cedo, para o texto nunca cair sobre a parte nítida da foto.

     Aqui moravam as regras da foto EMOLDURADA (max-width 26rem,
     aspect-ratio 4/3, max-height 34svh). Com a foto absoluta e
     sangrada elas quebravam feio: o retrato virava uma tira de 226px
     no alto e sobravam ~540px de azul vazio embaixo, com o degradê
     cobrindo tudo. Saíram. */
  .lp-hero__media {
    width: clamp(20rem, 52vw, 34rem);
  }
  .lp-hero__media::after {
    background: linear-gradient(
      to right,
      var(--navy) 0%,
      color-mix(in srgb, var(--navy) 62%, transparent) 30%,
      color-mix(in srgb, var(--navy) 34%, transparent) 58%,
      transparent 100%
    );
  }
  /* O selo NÃO encolhe à vontade: ele tem um piso funcional. O texto
     mais largo que ele carrega é a palavra "recuperado", que a 14px
     (o mínimo legível para essa legenda) mede ~95px — abaixo de ~128px
     de diâmetro a palavra vaza do círculo. Aqui o diâmetro é o piso, e
     o corpo do valor cai para 1rem (o mínimo do documento) para caber
     junto. A POSIÇÃO não é tocada: quem manda nela é o `bottom` com
     desconto do sangramento, na regra base. */
  .lp-seal {
    width: clamp(128px, 17vw, 148px);
    padding: 0.55rem;
  }
  .lp-seal__value {
    font-size: 1rem;
  }
  .lp-seal__label {
    font-size: 0.875rem;
    letter-spacing: 0.02em;
  }

  .lp-pain__inner {
    grid-template-columns: 1fr;
  }
  .lp-steps {
    grid-template-columns: repeat(2, 1fr);
  }
  /* ---------- retrato do bloco 7, empilhado ----------
     A foto sai do posicionamento absoluto e volta para o fluxo, acima
     do texto (é a ordem que ela já tem no DOM, então não precisa de
     `order`). Continua SANGRANDO de ponta a ponta pelas margens
     negativas e continua dissolvendo no branco — o que muda é que o
     degradê passa a fechar em cima E embaixo, porque agora as duas
     bordas horizontais encostam no branco do bloco.

     A seção também devolve o `min-height` e o grid: aqueles existiam
     só para dar altura à faixa lateral no computador. */
  .lp-about {
    display: block;
    min-height: 0;
  }
  .lp-about__inner {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    /* A foto encosta na borda de CIMA da seção, contra o azul da
       chamada final. É o que permite não ter degradê no topo sem deixar
       emenda: sem isto sobraria uma faixa branca acima da foto e o fundo
       cinza do estúdio começaria numa linha reta visível. */
    padding-top: 0;
  }
  .lp-about__text {
    grid-column: 1;
  }
  .lp-about__media {
    position: relative;
    inset: auto;
    width: auto;
    max-width: none;
    margin-inline: calc(-1 * var(--lp-gutter));
    margin-bottom: clamp(1.5rem, 4vh, 2.25rem);
    /* altura explícita, e não aspect-ratio: com aspect-ratio mais um
       teto de altura o navegador reaplica a razão e encolhe a LARGURA,
       e a foto deixa de sangrar (a mesma armadilha do topo) */
    height: clamp(260px, 50svh, 380px);
  }
  /* Só embaixo: em cima a foto encosta no azul da chamada final e a
     troca de seção já faz o corte (ver o padding-top: 0 acima).

     E 82%, não 64%: com 64% o branco começava a subir em cima dos
     OMBROS, e retrato sem ombro nem blazer vira cabeça flutuando. Aqui
     o degradê só entra depois que o terno já apareceu, para dissolver a
     base da foto no branco onde o texto começa. */
  .lp-about__media::after {
    background: linear-gradient(to bottom, transparent 82%, #fff 100%);
  }
  .lp-about__media img {
    object-position: 50% 16%;
  }
}

@media (max-width: 720px) {
  /* ---------- topo empilhado ----------
     Abaixo de 720 a sobreposição deixa de funcionar, e não é questão
     de gosto: foto e texto passam a disputar a MESMA largura. O que
     mata a solução absoluta aqui é que a altura do texto VARIA muito
     com a largura — 327px num 390, 418px num 320 — então qualquer
     banda posicionada por porcentagem colide com o texto em algum
     aparelho. Medi os dois e é o que acontece.

     Então a foto volta para o fluxo, abaixo do texto, e continua
     SANGRANDO de ponta a ponta pelas margens negativas. A sua ideia
     fica de pé — foto sangrada dissolvendo no azul; o que muda é a
     direção do degradê, que passa a ser vertical e fecha o topo da
     foto contra o texto em vez da lateral.

     `align-items: start` no hero (em vez do center herdado) porque com
     o conteúdo empilhado o centro joga tudo para baixo e o eyebrow
     descola do alto sem motivo. */
  .lp-hero {
    align-items: stretch;
    /* a foto encosta na borda de CIMA da seção: sangrada de verdade,
       em vez de uma faixa de azul sobrando acima dela. O respiro de
       baixo continua, porque lá embaixo agora mora o botão. */
    padding-top: 0;
  }
  /* flex em coluna (e não grid) só para o `margin-top: auto` da foto
     funcionar: a sobra de altura vai toda para o vão entre o texto e a
     foto, e a foto fica colada na base em qualquer altura de tela. */
  .lp-hero__inner {
    display: flex;
    flex-direction: column;
    /* OBRIGATÓRIO redeclarar: a regra base tem `align-items: center`,
       que em grid é alinhamento VERTICAL e em flex-column vira
       HORIZONTAL. Herdado assim, os filhos param de esticar e passam a
       ter largura de conteúdo — a foto encolhia de 390 para 142px,
       largura que ela deduzia da própria altura pela proporção da
       imagem. */
    align-items: stretch;
    gap: 0;
  }
  /* vão MÍNIMO entre a foto e o texto, do lado do texto. Não pode ser
     `margin-top: auto` na foto: aquilo empurraria a foto e aqui ela já
     é quem cresce. */
  .lp-hero__id {
    flex: none;
    margin-top: clamp(1.25rem, 4vh, 2rem);
  }
  /* A foto ABSORVE a sobra de altura, em vez de ter altura travada.
     Com altura fixa sobrava um vão morto de ~220px entre o texto e a
     foto numa tela de 900 de altura, e nada preenchia. Aqui ela cresce
     até o que sobrar, entre um piso e um teto: em tela alta ganha
     presença, em tela apertada é a PRIMEIRA a ceder — que é a ordem
     certa, porque quem converte é o texto e o botão.

     `order: -1` inverte só o VISUAL. No DOM o texto continua vindo
     antes da foto, e isso é de propósito: o § Responsividade manda
     "texto sempre antes da imagem" no celular, e a intenção da regra é
     não enterrar a mensagem. Com a ordem do DOM preservada, o leitor
     de tela ouve o nome e a headline antes da foto, e o teto de 46svh
     garante que headline, bio e botão continuam na dobra. Não há
     problema de ordem de foco: a foto não é focável, e o único item
     focável do bloco é o CTA. */
  .lp-hero__media {
    order: -1;
    position: relative;
    inset: auto;
    width: auto;
    /* sangra até a borda da tela, anulando o respiro do inner */
    margin-inline: calc(-1 * var(--lp-gutter));
    margin-top: 0;
    flex: 1 1 auto;
    min-height: clamp(140px, 24svh, 200px);
    /* Teto em duas partes, e o segundo termo é o que importa.
       Só `46svh` não basta: o flex NÃO encolhe a foto quando falta
       espaço, porque o hero tem `min-height` e altura automática — se
       o conteúdo passa, o hero CRESCE em vez de comprimir os itens, e
       quem sobra para fora da dobra é o botão. Foi o que acontecia num
       360x640 (CTA 37px abaixo) e num 320x568 (140px).

       O `100svh - 27rem` reserva a altura do texto (eyebrow, nome,
       headline, bio, botão e respiros) antes de dar o resto para a
       foto. 27rem é o pior caso medido de coluna de texto no celular.
       O que a altura da tela não permitir, a foto cede — nunca o CTA.

       O 46vh sozinho fica como reserva para navegador sem svh, onde a
       declaração seguinte inteira seria descartada. */
    max-height: 46vh;
    max-height: min(46svh, calc(100svh - 27rem));
  }
  /* Degradê de BAIXO para cima: a base da foto dissolve exatamente
     onde o texto começa, e o topo fica limpo para o rosto. */
  .lp-hero__media::after {
    background: linear-gradient(
      to top,
      var(--navy) 0%,
      color-mix(in srgb, var(--navy) 45%, transparent) 26%,
      transparent 62%
    );
  }
  .lp-portrait {
    /* height 100% e NÃO aspect-ratio + max-height. A combinação parece
       equivalente e não é: quando o max-height corta, o navegador
       reaplica a razão e encolhe a LARGURA junto — a foto ficava com
       383px numa faixa de 720 e deixava de sangrar, com o degradê
       cobrindo o vazio ao lado. Preenchendo a faixa que o flex definiu,
       o object-fit: cover faz o recorte e a largura nunca é
       renegociada. */
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    max-height: none;
  }
  /* Rosto no terço alto da faixa: com a foto em cima, é a primeira
     coisa que a pessoa vê, e é a credencial desta página. */
  .lp-portrait img {
    object-position: 50% 10%;
  }
  /* O selo desce para a base da faixa, onde o degradê já fechou em
     azul — dourado sobre azul, a combinação da marca — e fica
     encavalado na divisa entre a foto e o texto, que é o "parcialmente
     sobre a foto" do § Selo. */
  .lp-seal {
    right: var(--lp-gutter);
    bottom: clamp(-1.5rem, -4vw, -0.75rem);
    width: clamp(112px, 30vw, 132px);
  }

  /* colunas de prova empilham com divisória horizontal entre elas */
  .lp-stats {
    grid-template-columns: 1fr;
  }
  .lp-stat {
    border-left: 0;
    border-top: 1px solid var(--lp-divider);
    padding: 1.2rem 0;
  }
  .lp-stat:first-child {
    border-top: 0;
    padding-top: 0;
  }

  /* Passos empilham; a linha de sequência não faz sentido na vertical.
     Número e ícone dividem a PRIMEIRA linha, centrados um no outro, e o
     texto ocupa a segunda inteira. Antes o ícone caía numa segunda
     coluna ao lado do texto e cada etapa alinhava num offset diferente
     — de longe a lista ficava esfarrapada. */
  .lp-steps {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .lp-step {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 0 0.85rem;
  }
  .lp-step__line {
    display: none;
  }
  .lp-step__n {
    font-size: 2.1rem;
  }
  .lp-step__icon {
    margin-top: 0;
  }
  .lp-step__text {
    grid-column: 1 / -1;
    max-width: none;
    margin-top: 0.45rem;
  }

  .lp-sticky {
    position: fixed;
    z-index: 60;
    left: 0.9rem;
    right: 0.9rem;
    bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 48px; /* área de toque, explícito: uma troca
                                         de fonte não pode quebrar isso calada */
    background: var(--gold);
    color: var(--navy);
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1rem;
    padding: 0.85rem 1.2rem;
    border-radius: var(--lp-radius-btn);
    transition:
      opacity var(--lp-dur) var(--lp-ease),
      transform var(--lp-dur) var(--lp-ease),
      visibility var(--lp-dur) var(--lp-ease);
    box-shadow: 0 12px 30px -12px rgba(0, 12, 32, 0.6);
  }
  .lp-sticky svg {
    width: 20px;
    height: 20px;
    flex: none;
  }

  /* Recolhido quando já existe um CTA de WhatsApp na tela. O botão fixo
     não é um enfeite que acompanha a rolagem do começo ao fim: ele existe
     para o TRECHO em que o visitante está lendo e nenhum botão está à
     vista. No topo ele duplicava o CTA do hero; no fim ficava literalmente
     em cima do "Falar no WhatsApp" do bloco de autoridade — dois CTAs
     iguais, um tapando o outro. Quem decide é o joao.js, por
     IntersectionObserver.

     O padrão é VISÍVEL, de propósito: sem JS a página volta ao
     comportamento de sempre, em vez de perder o botão.

     O joao-motion.js NUNCA toca neste elemento. A classe abaixo age em
     opacity, visibility e transform; estilo inline de GSAP ganharia
     dela e travaria o botão visível ou invisível para sempre. */
  .lp-sticky--oculto {
    opacity: 0;
    visibility: hidden;
    transform: translateY(120%);
    pointer-events: none;
  }

  /* Folga para o botão fixo passar por cima de azul vazio no fim da
     página. Antes isto era `padding-bottom` no <body>, o que agora
     pintaria uma faixa BRANCA de 77px embaixo do rodapé azul. */
  .lp-footer {
    padding-bottom: calc(clamp(2rem, 4vw, 3rem) + 4.8rem);
  }
}

@media (max-width: 560px) {
  .lp-btn {
    width: 100%;
    margin-top: 50px !important
  }
  .lp-card .lp-btn,
  .lp-about__actions .lp-btn {
    align-self: stretch;
  }
  .lp-pain__grid {
    grid-template-columns: 1fr;
  }
}

/* Abaixo de 600px de altura em tela larga a conta da dobra deixa de
   fechar sem apertar a tipografia a ponto de doer. Aqui o topo desiste
   do 100svh: rolar 40px é melhor que headline de 22px numa tela de
   1280 de largura. O contrato da dobra é de ALTURA — nenhum breakpoint
   de largura consegue expressar isso. */
@media (max-height: 600px) and (min-width: 1025px) {
  /* min-height: auto SAIU — o floor de svh volta a ser necessário,
     porque a foto absoluta não sustenta mais a altura do bloco */

  .lp-hero__bio { max-width: 42ch; }

  /* a caixa da foto vira paisagem quando a altura colapsa: 56vw × 480px
     dá ratio 1.6 contra origem 0.667, e o cover come o corpo inteiro.
     Estreitar devolve a caixa para perto do retrato. */
  .lp-hero__media { width: clamp(20rem, 34vw, 34rem); }
  .lp-portrait img { object-position: 50% 4%; }

  /* a rampa acompanha: -24vw sobre um véu mais estreito começa a clarear
     antes da foto */
  .lp-hero__media::after { inset: 0 0 0 -14vw; }

  /* o selo escala em vw, que aqui é generoso enquanto a altura não é */
  .lp-seal {
    width: clamp(88px, 20vh, 124px);
    bottom: calc(var(--lp-hero-bleed) + clamp(0.5rem, 3vh, 1.25rem));
  }
}