/* =========================================================================
   peca.css — Crescita · páginas material / check-up / caso / diagnostico
   Revisão de formato e espaçamento — 2026-09-30

   O QUE MUDOU, EM UMA LINHA CADA:
   1. Ritmo vertical em 3 tiers (80 / 120 / 176px no mobile) em vez de um
      único intervalo de 128±16px. Aplicado por .junta / .respira.
   2. h1 com teto de 44px em vez de 52px — 5 linhas viravam 4 em caso.html.
   3. .sub: o primeiro parágrafo do hero é o lead (19/22px); os seguintes
      caem para o corpo (16/17px). Resolve os três .sub iguais de material.
   4. Formulário: 8 perguntas agrupadas em 3 etapas nomeadas + contador
      "01 / 08" + estado de respondido em CSS puro. Zero animação.
   5. .prio: três pesos tipográficos em vez de um. Diagnóstico em --ink,
      instruções em 15px atrás de um fio.
   6. --texto-fraco escurecido de #7C8A88 (3.34:1) para #5F6E6B (4.91:1).
      Dois tokens para fundo escuro, porque o verde e o quase-preto tem luminancias
      muito diferentes: --fraco-escuro sobre --ink (6.74:1) e --fraco-verde sobre
      --verde (4.54:1). Usar --fraco-escuro sobre o verde daria 2.91:1 e reprova.
   7. .credencial de 38ch (46 cpl) para 52ch (59 cpl); .ctx limitado a 62ch
      (75 cpl caíam para 66 cpl no desktop).
   8. .campo: classe real para os inputs do CTA, que eram .opt + 9
      propriedades inline cada.
   ========================================================================= */

:root{
  --verde:#096355; --esmeralda:#00A98F; --menta:#3EE8B8; --menta-pastel:#DCF0E8;
  --sage-bg:#F2F8F5; --sage-card:#E9F4EF; --ink:#10202B; --texto:#4E565B;

  /* MUDOU: era #7C8A88 → 3.34:1 sobre --sage-bg e 3.19:1 sobre --sage-card.
     #5F6E6B dá 4.91:1 e 4.69:1. Mesma família sage, 14px legível a 50 anos. */
  --texto-fraco:#5F6E6B;
  /* NOVO: o mesmo papel sobre fundo escuro. #7C8A88 sobre --ink era 4.46:1
     em corpo de 14px (.ressalva, .nota). Este dá 6.5:1. */
  --fraco-escuro:#9AA8A5;   /* legivel sobre --ink */
  --fraco-verde:#C2D1CC;    /* legivel sobre --verde */

  --borda:#E2EDE8;
  --claro-escuro:#A9BEB8; --linha-escura:rgba(220,240,232,.14);

  /* ——— escala de espaçamento vertical (múltiplos de 8) ———
     Antes: todo limite entre seções somava 128±16px (razão 1,29 entre o
     maior e o menor). Três tiers, razão 2,2:
       JUNTA    80px  → dois blocos que se leem como um
       NORMAL  120px  → nova seção, mesmo argumento
       RESPIRA 176px  → troca de capítulo / mudança de registro
     O limite é sempre padding-bottom do de cima + padding-top do de baixo. */
  --esp-junta:40px;
  --esp-normal-t:56px;
  --esp-normal-b:64px;
  --esp-respira:88px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:16px;line-height:1.68;color:var(--texto);background:var(--sage-bg);
  -webkit-font-smoothing:antialiased;hyphens:none;font-variant-numeric:tabular-nums;
}
.wrap{max-width:640px;margin:0 auto;padding:0 24px}

/* ——— ritmo vertical: default e modificadores ———
   Toda <section> nasce no tier NORMAL (120px de limite).
   Depois, UMA classe no bloco de baixo resolve os dois lados do limite,
   via :has() no irmão anterior. Marcação mínima: uma classe por limite. */
body > section,
body > div > section{padding-top:var(--esp-normal-t);padding-bottom:var(--esp-normal-b)}

section.junta{padding-top:var(--esp-junta)}
section:has(+ section.junta){padding-bottom:var(--esp-junta)}
section.respira{padding-top:var(--esp-respira)}
section:has(+ section.respira){padding-bottom:var(--esp-respira)}

/* .faixa mantida por compatibilidade */
.faixa{padding:56px 0}

h1,h2,.num,.estilete,.preco,.met-nome,.legenda{
  font-family:'Jost',sans-serif;color:var(--ink);text-wrap:balance}

/* MUDOU: teto de 3.25rem (52px) → 2.75rem (44px).
   Em coluna de 592px, 52px rendiam 23 caracteres por linha e o h1 de
   caso.html quebrava em 5 linhas (233px de altura). A 44px são ~27 cpl
   e 4 linhas (≈200px). line-height sobe de 1.12 para 1.14 — em display
   de 44px, 1.12 fechava demais o interlinha. */
h1{font-size:clamp(1.9rem,1.4rem + 2.4vw,2.75rem);font-weight:600;
  line-height:1.14;letter-spacing:-.015em}
h2{font-size:clamp(1.4rem,1.2rem + 1vw,1.85rem);font-weight:600;
  line-height:1.25;letter-spacing:-.01em}
h2:not(:last-child){margin-bottom:24px}   /* era inline em 4 lugares */

p{margin-bottom:20px}
p:last-child{margin-bottom:0}

/* MUDOU: cor. Ver --texto-fraco. */
.kicker{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--texto-fraco);
  line-height:1.2;display:block}
.kicker:not(:last-child){margin-bottom:16px}   /* era inline em 3 lugares */
.marca{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--verde);line-height:1}

/* ===================== 1 — HERO ===================== */
/* MUDOU: padding-top próprio (topo de página não segue a escala de limites);
   padding-bottom entra na escala e é ajustável por .junta no bloco seguinte.
   Isso remove os 3 overrides inline de padding-bottom que existiam
   (material 72, check-up 40 e 48). */
.hero{background:var(--sage-bg);padding-top:28px}
.hero .marca{display:block;margin-bottom:48px}
.hero .voltar{display:inline-block;margin-bottom:40px}  /* era margin-top inline no .kicker */
.hero h1{margin-bottom:24px}

/* MUDOU — o ponto 5 da auditoria.
   material.html tem três .sub seguidos, medidos em 108 + 108 + 81px, todos
   16px/26.88px: 337px sem hierarquia nenhuma. Agora o PRIMEIRO .sub é o
   lead e os seguintes caem para o corpo. Zero mudança de marcação. */
.hero .sub{font-size:16px}
.hero p.sub:first-of-type{font-size:19px;line-height:1.5;color:var(--ink);
  font-weight:400;margin-bottom:24px}
.hero p.sub:first-of-type + p.sub{margin-bottom:16px}  /* 2º e 3º viram um par */

/* Hero leve — check-up e o resultado do check-up.
   Medido: hero de material = 860px, hero de check-up = 422px, mesma classe.
   O h1 de uma página de formulário não precisa do mesmo tamanho. */
.hero.leve h1{font-size:clamp(1.65rem,1.3rem + 1.7vw,2.25rem)}
.hero.leve{padding-bottom:var(--esp-junta)}

/* ===================== 2 — REENQUADRAMENTO (verde) ===================== */
.escuro-verde{background:var(--verde);color:var(--menta-pastel)}
.escuro-verde h2,.escuro-verde .estilete{color:#fff}
.escuro-verde p{line-height:1.72;letter-spacing:.004em}
/* MUDOU: 56ch, não 62ch. O "ch" do IBM Plex Sans é a largura do zero, ~18%
   maior que a média das minúsculas — 62ch RENDERIZAVAM 75 caracteres por
   linha, medidos. 56ch dá os ~66 cpl que se quer sobre fundo escuro. */
.escuro-verde p:not(.estilete):not(.nota){max-width:56ch}
.fio-menta{width:40px;height:2px;background:var(--menta);margin-bottom:24px}
.estilete{font-size:20px;font-weight:500;line-height:1.35;letter-spacing:-.01em;
  max-width:34ch}
.estilete:not(:first-child){margin-top:32px}   /* era inline */

/* ===================== 3 — CREDENCIAL ===================== */
.credencial{background:var(--sage-bg)}
/* MUDOU: 38ch renderizava 388px = 46 caracteres por linha dentro de uma
   coluna de 592px — 204px mortos à direita e linha curta demais para um
   parágrafo de argumento. 52ch = 500px ≈ 59 cpl, igual a .ressalva. */
.credencial p{max-width:52ch}   /* 63 cpl medidos, contra 46 antes */

/* ===================== 4 — PROVA (ink) ===================== */
.prova{background:var(--ink);color:var(--claro-escuro)}
.prova .kicker{color:var(--fraco-escuro)}   /* MUDOU: --texto-fraco em #10202B daria 2:1 */
.prova .kicker:not(:last-child){margin-bottom:24px}
.num{font-size:clamp(4rem,2.8rem + 6.4vw,7rem);font-weight:600;line-height:.88;
  letter-spacing:-.04em;color:var(--menta-pastel)}
.legenda{font-family:'Jost',sans-serif;font-weight:400;font-size:19px;
  line-height:1.35;color:rgba(220,240,232,.9);margin-top:12px;max-width:26ch}
.fio-prova{width:48px;height:1px;background:rgba(62,232,184,.35);margin:32px 0}
/* MUDOU: 56ch. No desktop .ctx media 75 caracteres por linha — o limite
   superior do aceitável, e sobre fundo escuro (texto claro em #10202B) a
   tolerância é menor. 56ch ≈ 66 cpl medidos. */
.prova .ctx{font-size:16px;line-height:1.7;color:var(--claro-escuro);
  margin-bottom:24px;max-width:56ch}
.ressalva{font-size:14px;line-height:1.6;color:var(--fraco-escuro);max-width:52ch}

/* ===================== 5 — MÉTRICAS ===================== */
.metricas{background:var(--sage-card)}
.metricas .kicker:not(:last-child){margin-bottom:28px}
.met{display:grid;grid-template-columns:32px 1fr;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--borda)}
.met:last-of-type{border-bottom:none}
.met-n{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:400;
  letter-spacing:.1em;color:var(--verde);line-height:1}
.met-nome{font-size:17px;font-weight:500;line-height:1.3;letter-spacing:-.005em}
.metricas .fecho{margin-top:32px;max-width:54ch}

/* ===================== 6 — PREÇO ===================== */
.oferta{background:var(--sage-bg)}
.preco{font-size:24px;font-weight:500;line-height:1.25;letter-spacing:-.01em}
.fio-custo{width:32px;height:1px;background:var(--borda);margin:40px 0}
.custo{font-family:'Jost',sans-serif;font-size:20px;font-weight:500;
  line-height:1.35;color:var(--ink);margin-bottom:40px;max-width:34ch}
.custo:last-child{margin-bottom:0}

/* ===================== 7 — CTA ===================== */
.cta{background:var(--verde);color:var(--menta-pastel)}
.cta h2{color:#fff;margin-bottom:20px}
.cta p{line-height:1.72;max-width:54ch}
.btn{display:block;width:100%;text-align:center;background:var(--menta);color:var(--ink);
  font-family:'Jost',sans-serif;font-weight:600;font-size:17px;letter-spacing:.01em;
  padding:19px 28px;border-radius:4px;text-decoration:none;border:none;cursor:pointer;
  margin-top:32px;transition:background 120ms}
.btn:hover{background:#35D3A6}
.btn:focus-visible{outline:2px solid var(--menta-pastel);outline-offset:3px}

.rodape{background:var(--sage-bg);padding-top:32px;padding-bottom:56px}
.rodape p{font-size:14px;line-height:1.6;color:var(--texto-fraco);max-width:64ch}

/* ===================== DESKTOP ===================== */
@media(min-width:768px){
  :root{
    /* Mesma razão 2,29 entre RESPIRA (256px) e JUNTA (112px).
       Antes: 240/208 = 1,07 no desktop — nenhuma hierarquia. */
    --esp-junta:56px;
    --esp-normal-t:80px;
    --esp-normal-b:96px;
    --esp-respira:128px;
  }
  body{font-size:17px}
  .hero{padding-top:40px}
  .kicker{font-size:12px}
  .hero .sub{font-size:17px}
  .hero p.sub:first-of-type{font-size:22px;line-height:1.48}
  .estilete{font-size:24px}
  .legenda{font-size:22px}
  .met-nome{font-size:18px}
  .preco{font-size:30px}
  .custo{font-size:24px}
  p{margin-bottom:24px}
  .btn{display:inline-block;width:auto}
}

/* ——— complementos das páginas de check-up, caso e entrada ——— */
.lista{list-style:none;padding:0;margin:0}
/* MUDOU: margin-bottom de 14px → 20px. Itens de 3 linhas medem 86px e a
   line-height interna é 26.88px; 14px de separação era MENOR que a
   entrelinha (0,52×) e os itens se colavam. 20px = 0,74×. */
.lista li{position:relative;padding-left:20px;margin-bottom:20px;max-width:56ch}
.lista li:last-child{margin-bottom:0}
.lista li::before{content:"";position:absolute;left:0;top:12px;width:6px;height:1px;
  background:var(--esmeralda)}
.escuro-verde .lista li::before{background:var(--menta)}
.lista:not(:first-child){margin-top:24px}   /* era inline em 3 lugares */

.nota{font-size:14px;line-height:1.6;color:var(--texto-fraco);max-width:56ch}
.nota:not(:first-child){margin-top:20px}    /* era inline em 6 lugares */
.prova .nota{color:var(--fraco-escuro)}
.escuro-verde .nota,.cta .nota{color:var(--fraco-verde)}  /* CORRIGIDO: fundo verde exige tom mais claro */

.btn-linha{background:transparent;color:var(--ink);border:1px solid var(--ink);
  border-radius:4px;display:inline-block;width:auto;font-family:'Jost',sans-serif;
  font-weight:600;font-size:16px;padding:16px 26px;text-decoration:none;
  margin-top:32px;transition:background 120ms,color 120ms}
.btn-linha:hover{background:var(--ink);color:#fff}
.escuro-verde .btn-linha,.prova .btn-linha{color:var(--menta-pastel);
  border-color:rgba(220,240,232,.45)}
.escuro-verde .btn-linha:hover,.prova .btn-linha:hover{background:var(--menta-pastel);
  color:var(--ink);border-color:var(--menta-pastel)}
.voltar{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--texto-fraco);text-decoration:none}
.voltar:hover{color:var(--verde)}

.aviso{background:var(--sage-card);border-radius:4px;padding:20px 22px;font-size:15px;
  line-height:1.65;margin:32px 0;max-width:60ch;
  border-left:2px solid var(--menta-pastel)}
.aviso:last-child{margin-bottom:0}
.escuro-verde .aviso,.prova .aviso{background:rgba(220,240,232,.07);
  border-left-color:rgba(62,232,184,.4)}
/* .aviso dentro de .metricas: o fundo é o mesmo --sage-card, então só o fio
   e o recuo separam o bloco. */
.metricas .aviso{background:#fff;border-left-color:var(--esmeralda)}

/* ============ FORMULÁRIO DO CHECK-UP ============
   Problema medido: o form tem 3272px no mobile — 4,7 telas de rolagem —
   e as perguntas 03 a 06 medem exatamente 352px cada, quatro blocos
   idênticos em sequência. Nenhuma marcação de avanço.

   Correção em três partes, toda em CSS + numeração no HTML:
   a) .etapa — três grupos nomeados (2 / 4 / 2 perguntas). Um cabeçalho a
      cada 2–4 perguntas quebra a monotonia. Limite entre etapas: 88px,
      contra 64px entre perguntas da mesma etapa (razão 1,4).
   b) .q-n passa a ser a fração "01 / 08". É o progresso, e não custa pixel
      nenhum de cromo novo.
   c) .q:has(input:checked) — a pergunta respondida recua tipograficamente.
      Estado, não animação. */

.etapa{border-top:1px solid var(--borda);padding-top:32px;margin-top:56px}
.etapa:first-of-type{border-top:none;padding-top:0;margin-top:0}
.etapa-cab{display:block;margin-bottom:8px}
.etapa-n{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--verde)}
.etapa-t{font-family:'Jost',sans-serif;font-size:15px;font-weight:500;
  letter-spacing:.01em;color:var(--texto-fraco);display:block;margin-top:4px}
/* Etapa concluída — o cabeçalho confirma sem ícone e sem animar.
   ATENÇÃO: :has() não pode ser aninhado dentro de :has(). A condição
   "todas as perguntas respondidas" não é expressável; usamos a ÚLTIMA
   pergunta da etapa como proxy, que em leitura sequencial equivale. */
.etapa:has(> .q:last-child input:checked) .etapa-n{color:var(--verde)}
.etapa:has(> .q:last-child input:checked) .etapa-t{color:var(--verde)}

.q{padding:32px 0 0}
.q:first-of-type{padding-top:24px}
.q + .q{padding-top:40px}
.q-n{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;
  color:var(--esmeralda);display:block;margin-bottom:10px;
  font-variant-numeric:tabular-nums}
.q-t{font-family:'Jost',sans-serif;font-size:19px;font-weight:500;line-height:1.35;
  color:var(--ink);margin-bottom:18px;display:block;max-width:34ch}

/* Progresso por estado — a pergunta respondida recua de peso e ganha um
   fio de 2px à esquerda do número. Rolando o form você VÊ até onde chegou:
   a coluna de fios verdes à esquerda é a barra de progresso, sem animação
   e sem cromo novo. */
.q:has(input:checked) .q-n{color:var(--verde);border-left:2px solid var(--esmeralda);
  padding-left:8px;margin-left:-10px}
.q:has(input:checked) .q-t{color:var(--texto)}
/* depois de um erro, as pendentes ganham um fio à esquerda */
/* #f:has(.erro.on) — checkup.js ja adiciona .on ao <p class="erro">, entao
   isto funciona sem nenhuma mudanca no JS. */
#f:has(.erro.on) .q:not(:has(input:checked)){border-left:2px solid #9B2C2C;
  padding-left:16px;margin-left:-18px}

.opt{display:block;position:relative;padding:15px 16px 15px 44px;
  border:1px solid var(--borda);border-radius:4px;background:#fff;margin-bottom:8px;
  cursor:pointer;font-size:16px;line-height:1.45;
  transition:border-color 120ms,background 120ms,opacity 120ms}
.opt:last-child{margin-bottom:0}
.opt:hover{border-color:var(--esmeralda)}
.opt input{position:absolute;left:16px;top:50%;transform:translateY(-50%);margin:0;
  width:17px;height:17px;accent-color:var(--verde)}
.opt:has(input:checked){border-color:var(--verde);background:var(--sage-card);opacity:1}
.opt:has(input:focus-visible){outline:2px solid var(--esmeralda);outline-offset:2px}

.erro{color:#9B2C2C;font-size:15px;line-height:1.6;margin-top:24px;display:none}
.erro.on{display:block}

/* campos de texto do CTA — antes eram .opt + 9 propriedades inline cada um */
.campo{display:block;margin-bottom:12px}
.campo input{width:100%;padding:17px 16px;border:1px solid rgba(220,240,232,.35);
  border-radius:4px;background:rgba(255,255,255,.06);color:#fff;
  font-family:inherit;font-size:16px;line-height:1.4;
  transition:border-color 120ms,background 120ms}
.campo input::placeholder{color:rgba(220,240,232,.6)}
.campo input:hover{border-color:rgba(220,240,232,.6)}
.campo input:focus{outline:none;border-color:var(--menta);
  background:rgba(255,255,255,.1)}
.campo-oculto{position:absolute;left:-9999px}
.cta form{margin-top:32px}
#fc-msg{color:var(--menta-pastel)}
/* sublegenda dentro de um .q-t (ex.: "Marque todas.") — era inline */
.q-hint{font-weight:400;color:var(--texto-fraco)}

/* ============ RESULTADO DO CHECK-UP ============
   Problema medido: três .prio de 573 / 594 / 541px (variação 9,8%),
   cada uma com 3 rótulos de 10,5px e 3 parágrafos no MESMO peso
   (16px / 26.88px). 1709px de textura idêntica.

   Correção: três pesos em vez de um.
     · diagnóstico (1º parágrafo) — 17px em --ink, sem rótulo
     · instruções (2º e 3º)       — 15px atrás de um fio vertical
     · separação entre blocos     — de 28px para 40px */

.prio{border-top:1px solid var(--borda);padding:40px 0}
.prio:first-of-type{border-top:none;padding-top:8px}
.prio:last-of-type{padding-bottom:0}
.prio-cab{display:flex;gap:10px 12px;align-items:baseline;flex-wrap:wrap;
  margin-bottom:16px}
.prio-n{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;
  color:var(--esmeralda)}
.prio-t{font-family:'Jost',sans-serif;font-size:21px;font-weight:600;line-height:1.28;
  letter-spacing:-.01em;color:var(--ink);flex:1 1 100%;max-width:30ch}

/* 1º campo = o diagnóstico. Sobe de peso e perde o rótulo — "Por que
   apareceu" é redundante quando é o primeiro texto sob o título.
   Economiza 3 × 39px de rótulo e cria a diferença de peso que faltava. */
.prio > .prio-l:first-of-type{display:none}
.prio > p:first-of-type{font-size:17px;line-height:1.62;color:var(--ink);
  margin-bottom:0;max-width:52ch}

/* 2º e 3º campos = instruções. Recuam atrás de um fio. */
.prio-l{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--texto-fraco);display:block;
  margin:28px 0 6px;padding-left:16px;border-left:1px solid var(--borda)}
.prio > .prio-l:not(:first-of-type) + p{font-size:15px;line-height:1.6;
  padding-left:16px;border-left:1px solid var(--borda);margin-bottom:0;
  max-width:54ch}

.rotulo{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 9px;border-radius:3px;
  background:var(--menta-pastel);color:var(--verde);white-space:nowrap}
.rotulo.hip{background:#FFF3D6;color:#7A5A12}
.rotulo.falta{background:#EDEFF1;color:#4E565B}

.oculto{display:none}

/* =========================================================================
   Composição das páginas de check-up — 02/10/2026
   O problema não era alinhamento: era uma coluna única de 640px sem nenhum
   elemento visual e sem mostrar o que o médico recebe no fim. Abaixo: o
   par de colunas do convite, a amostra do resultado, os passos e a barra
   de progresso do formulário.
   ========================================================================= */

/* ——— hero em duas colunas: argumento à esquerda, recompensa à direita ——— */
.duo{max-width:1120px;margin:0 auto;padding:0 24px;display:grid;
  grid-template-columns:1fr .92fr;gap:64px;align-items:center}
.duo .col-txt{min-width:0}
.duo h1{margin-bottom:22px}

/* ——— amostra: o formato real da devolutiva, antes de responder ——— */
.amostra{background:#fff;border:1px solid var(--borda);border-radius:18px;
  box-shadow:0 18px 44px rgba(16,32,43,.09);overflow:hidden}
.amostra-top{padding:20px 24px 16px;border-bottom:1px solid var(--borda);
  display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.amostra-t{font-family:'Jost',sans-serif;font-size:18px;font-weight:600;color:var(--ink);line-height:1.25}
.amostra-s{font-size:13px;color:var(--texto-fraco);margin-top:3px}
.amostra-tag{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--verde);background:var(--menta-pastel);
  border-radius:999px;padding:5px 10px;white-space:nowrap}
.am-item{padding:15px 24px;border-bottom:1px solid var(--borda);display:grid;
  grid-template-columns:26px 1fr;gap:12px;align-items:start}
.am-item:last-of-type{border-bottom:none}
.am-n{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--verde);padding-top:3px}
.am-t{font-size:14.5px;color:var(--ink);font-weight:500;line-height:1.35}
.am-barra{height:5px;border-radius:3px;background:var(--sage-card);margin:9px 0 7px;overflow:hidden}
.am-barra i{display:block;height:100%;border-radius:3px;background:var(--esmeralda)}
.am-rot{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--texto-fraco)}
.amostra-pe{padding:14px 24px;background:var(--sage-bg);border-top:1px solid var(--borda);
  font-size:12.5px;color:var(--texto-fraco);line-height:1.5}

/* ——— passos: o que acontece, em três tempos ——— */
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.passo{border-top:2px solid var(--menta-pastel);padding-top:16px}
.passo-n{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;
  color:var(--verde);margin-bottom:7px}
.passo-t{font-family:'Jost',sans-serif;font-size:16px;font-weight:600;color:var(--ink);margin-bottom:5px}
.passo p{font-size:14px;color:var(--texto);line-height:1.5;margin:0;max-width:none}

/* ——— cartões do "o que você vai descobrir" ——— */
.descobrir{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.desc-card{background:#fff;border:1px solid var(--borda);border-radius:16px;padding:24px 22px}
.desc-n{font-family:'Jost',sans-serif;font-size:26px;font-weight:600;color:var(--menta-pastel);line-height:1;margin-bottom:12px}
.desc-card p{font-size:15px;line-height:1.55;color:var(--ink);margin:0;max-width:none}

/* ——— barra de progresso do formulário ——— */
.progresso{position:sticky;top:0;z-index:40;background:rgba(242,248,245,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--borda)}
.progresso .in{max-width:640px;margin:0 auto;padding:11px 24px;display:flex;
  align-items:center;gap:14px}
.progresso .trilho{flex:1;height:5px;background:var(--sage-card);border-radius:3px;overflow:hidden}
.progresso .trilho i{display:block;height:100%;width:0;border-radius:3px;
  background:var(--esmeralda);transition:width .35s cubic-bezier(.4,0,.2,1)}
.progresso .cont{font-family:'IBM Plex Mono',monospace;font-size:11.5px;
  color:var(--texto-fraco);white-space:nowrap}
.progresso .cont b{color:var(--verde)}

/* ——— convite do fim do resultado ——— */
.convite{background:var(--ink);color:#fff;border-radius:22px;padding:48px 44px}
.convite h2{color:#fff;margin-bottom:14px}
.convite > p{color:var(--fraco-escuro);max-width:52ch}
.convite .campo input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff}
.convite .campo input::placeholder{color:#8EA09C}
.convite .campo input:focus{border-color:var(--menta);background:rgba(255,255,255,.1)}
.convite .nota{color:var(--fraco-escuro)}
.convite-topo{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.convite-topo span{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--menta);background:rgba(62,232,184,.12);
  border-radius:999px;padding:6px 12px}

@media(max-width:900px){
  .duo{grid-template-columns:1fr;gap:36px}
  .passos,.descobrir{grid-template-columns:1fr;gap:14px}
  .convite{padding:34px 24px;border-radius:18px}
  .amostra-top,.am-item,.amostra-pe{padding-left:18px;padding-right:18px}
}