/* =====================================================================
   BOMBEI v2 · identidade "Recibo Claro" (infra/ESPEC-SITE-V2.json, chave "final")
   Base de TODAS as páginas novas. Dono: agente Base. As outras páginas só reaproveitam;
   o que for só de uma página vai no v2-<area>.css dela.
   No <head> de toda página: Manrope 400-800 + JetBrains Mono 600 (Google Fonts, display=swap).
   Índice: 1 tokens · 2 base · 3 layout · 4 texto e preço · 5 botões · 6 formulário (campo, aceite,
   erro) · 7 stepper · 8 cartões (padrão, relatório, linha trancada, cena, garantia) · 9 selos ·
   10 listas e passos · 11 faixa, cabeçalho, rodapé, barra fixa · 12 vídeo · 13 FAQ ·
   14 estados que o lp.js gera (busca, achado, pronto, checkout Pix) · 15 movimento ·
   16 base quente (título quente, selo grátis, linha de confiança, fechamento escuro)
   Base quente (10/10/2026): faixa vermelha presa no topo, botão de compra laranja com halo e pulso,
   campo com borda escura grossa, "Minhas consultas" apagado. Verde (--ok) fica só para sucesso.
   ===================================================================== */

/* ---------- 1. tokens (paleta da spec) ---------- */
:root{
  color-scheme:light;       /* o site é claro; impede o "modo escuro forçado" de alguns navegadores de inverter as cores */
  --fundo:#F4F7FB;          /* fundo da página */
  --superficie:#FFFFFF;     /* cartões, formulário, checkout, barra fixa */
  --tinta:#0F1F33;          /* texto principal */
  --tinta-2:#5B6B7F;        /* rótulos, legendas, rodapé do cartão */
  --marca:#0B2545;          /* cabeçalho do relatório, rodapé, fechamento escuro, foco, links */
  --marca-clara:#E6EEFA;    /* selo, círculo dos passos, borda da garantia */
  --acao:#FF5B1F;           /* todo botão de compra (laranja do site antigo). Branco nele = 3,1:1: só texto grande (>=18,66px negrito) */
  --acao-hover:#F04E14;
  --acao-press:#D9430D;
  --acao-texto:#C2410C;     /* laranja de TEXTO pequeno ou de fundo com texto pequeno (5,2:1 com branco, 4,8:1 com --fundo) */
  --acao-halo:rgba(255,91,31,.22);   /* anel em volta do botão principal */
  --quente:#D9430D;         /* metade quente do título (h1 .quente), a mesma cor do --acao-press: 4,1:1 com --fundo, 4,4:1 com branco (só em título, texto grande) */
  --faixa-fundo:#C81E1E;    /* faixa do topo (vermelho do site antigo), texto branco 5,7:1 */
  --faixa-alto:54px;        /* altura da faixa presa no topo (celular, 2 linhas); o desktop usa 1 linha */
  --ok:#1A9A52;             /* Pix recebido, "encontrado", passo feito */
  --ok-claro:#E8F6EE;
  --ok-texto:#157A3E;        /* verde de TEXTO pequeno (contraste AA sobre branco e sobre --ok-claro); --ok fica para ícone e preenchimento */
  --alerta:#B45309;         /* relógio do Pix */
  --alerta-claro:#FFF4E5;
  --dor:#B42318;            /* etiqueta das cenas, erro de campo, relógio < 1:00 */
  --dor-claro:#FDECEC;
  --linha:#DCE4EE;          /* divisórias 1px */
  --apagado:#94A3B8;        /* preço riscado, placeholder */
  --tarja:#CBD5E1;          /* dado trancado antes de pagar */
  --borda-campo:#C9D3E0;
  --fonte:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --raio:12px;
  --raio-cartao:16px;
  --sombra:0 1px 3px rgba(15,31,51,.06);
  --sombra-btn:0 1px 2px rgba(15,31,51,.10);
  --anel:0 0 0 4px rgba(11,37,69,.12);
  --gutter:16px;
  --largura:1120px;
  --check-branco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --check-verde:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A9A52' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* ---------- 2. base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--fundo);color:var(--tinta);font-family:var(--fonte);font-size:17px;line-height:1.55;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0}
h1,h2,h3,h4{color:var(--tinta);font-weight:800;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:30px;line-height:1.1}
h2{font-size:24px;line-height:1.2}
h3{font-size:18px;line-height:1.3;font-weight:700;letter-spacing:-.01em}
p{text-wrap:pretty}
img,video{display:block;max-width:100%;height:auto}
a{color:var(--marca);text-underline-offset:2px}
button,input,select,textarea{font:inherit;color:inherit}
b,strong{font-weight:700}
s{text-decoration-thickness:1.5px}
:focus-visible{outline:3px solid var(--marca);outline-offset:2px}
::selection{background:var(--marca-clara);color:var(--tinta)}
.so-leitor{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (min-width:900px){
  body{font-size:16px}
  h1{font-size:44px;line-height:1.08}
  h2{font-size:30px}
}

/* ---------- 3. layout ---------- */
.wrap{width:100%;max-width:calc(var(--largura) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-texto{max-width:calc(760px + var(--gutter) * 2)}
.secao{padding-block:48px}
.secao-branca{background:var(--superficie);border-block:1px solid var(--linha)}
.secao-cab{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.secao-cab p{color:var(--tinta-2)}
.empilha{display:flex;flex-direction:column;gap:16px}
.grade{display:grid;gap:16px}
.cta{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:24px}
.cta .lp-mini{text-align:center}
@media (max-width:899px){.so-desktop{display:none !important}}
@media (min-width:900px){
  .so-celular{display:none !important}
  .secao{padding-block:72px}
  .grade-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .grade-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .cta{align-items:flex-start}
  .cta .btn{min-width:300px}
  .cta .lp-mini{text-align:left}
  .cta-centro{align-items:center}
  .cta-centro .lp-mini{text-align:center}
}

/* ---------- 4. texto e preço ---------- */
.rotulo{display:block;font-size:13px;line-height:1.3;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--tinta-2)}
.mono{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:0}
.nowrap{white-space:nowrap}
.texto-2{color:var(--tinta-2)}
.mini,.lp-mini{font-size:13px;line-height:1.45;color:var(--tinta-2)}
.lp-mini a,.mini a{color:var(--marca);font-weight:600}
.link-discreto{font-size:13px;color:var(--tinta-2);text-decoration:underline}
.link-discreto:hover{color:var(--marca)}
/* preço: <p class="preco"><span class="preco-de">de <s>R$ 14,90</s> por</span> <b>R$ 5,90</b></p> */
.preco{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:2px;line-height:1.1;font-variant-numeric:tabular-nums}
.preco-de{font-size:15px;font-weight:500;color:var(--tinta-2)}
.preco s{color:var(--apagado);font-weight:500}
.preco b{font-size:36px;font-weight:800;letter-spacing:-.02em;color:var(--tinta)}
.preco small{font-size:13px;font-weight:500;color:var(--tinta-2)}
.preco-medio b{font-size:28px}

/* ---------- 5. botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:10px 24px;border:0;border-radius:var(--raio);background:var(--marca-clara);color:var(--marca);font-family:var(--fonte);font-size:17px;font-weight:600;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s,border-color .15s,transform .1s}
/* botão de compra: laranja, branco em negrito 19px (texto grande: o 3,1:1 do branco no laranja passa) e brilho quente embaixo.
   Vale para todo .btn-accent, inclusive o .btn-sm (o texto pequeno no laranja não teria contraste). */
.btn-accent,.btn-accent.btn-sm{background:var(--acao);color:#fff;font-size:19px;font-weight:800;letter-spacing:-.005em;box-shadow:0 1px 2px rgba(15,31,51,.10),0 6px 16px -6px rgba(217,67,13,.55)}
.btn-accent:hover{background:var(--acao-hover)}
.btn-accent:active{background:var(--acao-press);transform:translateY(1px)}
/* halo do botão principal (o do formulário, o da barra fixa e os que o lp.js gera, todos com .pulsa) */
.btn-accent.pulsa{box-shadow:0 0 0 4px var(--acao-halo),0 8px 22px -8px rgba(217,67,13,.7)}
.btn-sec{min-height:52px;background:var(--superficie);color:var(--marca);border:1.5px solid var(--linha);font-size:16px}
.btn-sec:hover{border-color:var(--marca)}
.btn-sec:active{transform:translateY(1px)}
.btn-block{display:flex;width:100%}
.btn-sm{min-height:44px;padding:8px 18px;font-size:15px}
.btn:disabled{cursor:progress;opacity:.82}
.btn svg{width:20px;height:20px;flex:none}
.btn-texto{background:none;border:0;padding:10px 4px;min-height:44px;color:var(--marca);font:600 15px var(--fonte);text-decoration:underline;cursor:pointer}

/* ---------- 6. formulário: campo do dado, caixa de aceite, mensagens ---------- */
.campo{display:flex;flex-direction:column;gap:6px}
.campo>label{font-size:13px;line-height:1.3;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--tinta-2)}
.campo-dado{display:block;width:100%;height:60px;margin:0;padding:0 15.5px;background:var(--superficie);border:1.5px solid var(--borda-campo);border-radius:var(--raio);color:var(--tinta);font-family:var(--mono);font-size:22px;font-weight:600;letter-spacing:0;font-variant-numeric:tabular-nums;-webkit-appearance:none;appearance:none}
.campo-dado::placeholder{color:var(--apagado);opacity:1}
.campo-dado:focus{outline:none;border:2px solid var(--marca);padding:0 15px;box-shadow:var(--anel)}
/* campo principal da página de venda (#lp-entrada, #placa): borda escura grossa (2px na cor da tinta, como no antigo)
   e foco forte em laranja, com anel. A borda não muda de largura no foco: o texto não pula. */
.form-lp .campo-dado{border:2px solid var(--tinta);padding:0 15px}
.form-lp .campo-dado:focus{border-color:var(--acao);box-shadow:0 0 0 4px var(--acao-halo)}
.campo-dado[aria-invalid="true"],.campo-dado.erro,.form-lp .campo-dado[aria-invalid="true"]{border-color:var(--dor)}
.campo-dado[aria-invalid="true"]:focus,.form-lp .campo-dado[aria-invalid="true"]:focus{box-shadow:0 0 0 4px rgba(180,35,24,.14)}
/* campo de texto comum (e-mail, senha, nome): mesma caixa, fonte normal, 56px */
.campo-texto{height:56px;font-family:var(--fonte);font-size:17px;font-weight:500}
/* aceite: <label class="aceite-lp"><input type="checkbox" id="aceite"><span>Li e aceito os <a>Termos de Uso</a>: ...</span></label> */
.aceite-lp{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.45;color:var(--tinta-2);cursor:pointer}
/* área de toque do aceite: o rótulo inteiro marca a caixa, com no mínimo 44px de altura (padding que não muda o desenho) */
.form-lp .aceite-lp{min-height:44px;padding-block:10px;margin-block:-10px}
.aceite-lp input{width:24px;height:24px}
.bump input{width:22px;height:22px}
.aceite-lp input,.bump input{flex:none;margin:0;border:1.5px solid var(--borda-campo);border-radius:6px;background:var(--superficie) center/14px no-repeat;-webkit-appearance:none;appearance:none;cursor:pointer;transition:background-color .12s,border-color .12s}
.aceite-lp input:checked,.bump input:checked{background-color:var(--marca);background-image:var(--check-branco);border-color:var(--marca)}
.aceite-lp input:focus-visible,.bump input:focus-visible{outline:none;border-color:var(--marca);box-shadow:var(--anel)}
/* caixa adicional opcional (bump): <label class="bump"><input type="checkbox" id="adicional"><span><b>Incluir ...</b> <em>+ R$ 14,90</em><small>...</small></span></label> */
.bump{display:flex;align-items:flex-start;gap:10px;padding:14px;border:1.5px dashed var(--borda-campo);border-radius:var(--raio);background:var(--superficie);font-size:15px;line-height:1.45;color:var(--tinta);cursor:pointer}
.bump b{font-weight:700}
.bump em{font-style:normal;font-weight:700;color:var(--ok-texto);white-space:nowrap}
.bump small{display:block;margin-top:2px;font-size:13px;color:var(--tinta-2)}
.bump:has(input:checked){border-style:solid;border-color:var(--ok);background:var(--ok-claro)}
.aceite-lp a{color:var(--tinta);font-weight:600;text-decoration:underline}
.aceite-lp.erro input{border-color:var(--dor);box-shadow:0 0 0 3px rgba(180,35,24,.14)}
/* #msg.msg.bad: frase de erro logo abaixo do campo (ou da caixa do aceite), sem caixa nem alerta de sistema */
.msg{font-size:14px;line-height:1.45;font-weight:600}
.msg.bad{color:var(--dor)}
.msg.ok{color:var(--ok-texto)}
.msg a{color:inherit;font-weight:700}
.sem-dados{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:var(--raio);background:var(--marca-clara);font-size:15px}
.sem-dados span{color:var(--tinta-2)}

/* ---------- 7. stepper 1 Número · 2 Pagamento · 3 Resultado (ol.passos > li.feito|.agora > i + span) ---------- */
.passos{list-style:none;margin:0;padding:0;display:flex}
.passos li{position:relative;flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;line-height:1.2;font-weight:600;color:var(--tinta-2);text-align:center}
.passos li+li::before{content:"";position:absolute;top:13px;right:calc(50% + 18px);left:calc(-50% + 18px);height:2px;border-radius:1px;background:var(--linha)}
.passos li.feito::before,.passos li.agora::before{background:var(--ok)}
.passos i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--marca-clara);color:var(--marca);font-style:normal;font-size:13px;font-weight:800;line-height:1}
.passos li.agora{color:var(--tinta)}
.passos li.agora i{background:var(--marca);color:#fff}
.passos li.feito{color:var(--ok-texto)}
.passos li.feito i{background:var(--ok) var(--check-branco) center/14px no-repeat;color:transparent;font-size:0}

/* ---------- 8. cartões ---------- */
.cartao{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio-cartao);box-shadow:var(--sombra);padding:20px}
.cartao-titulo{font-size:18px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.cartao-destaque{border:1.5px solid var(--marca)}   /* ex.: oferta da ficha do CPF logo abaixo do resultado */
.divisoria{height:1px;background:var(--linha);border:0;margin:0}
/* cartão-relatório (exemplo, resultado e PDF com o mesmo desenho) */
.relatorio{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio-cartao);box-shadow:var(--sombra);overflow:hidden}
.relatorio-topo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;background:var(--marca);color:#fff}
.relatorio-topo>img{height:20px;width:auto}
.relatorio-selo{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:3px 10px;border-radius:999px;background:var(--ok-claro);color:var(--ok-texto);font-size:12px;font-weight:700;line-height:1.2}
.relatorio-selo.exemplo{background:#E2E8F0;color:#334155}
.relatorio-dado{flex-basis:100%;display:flex;flex-direction:column;gap:2px}
.relatorio-dado b{font-family:var(--mono);font-size:20px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:0}
.relatorio-dado small{font-size:13px;font-weight:500;color:var(--apagado)}
.relatorio-linhas{margin:0;padding:4px 20px 0}
.relatorio-linha{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:56px;padding:8px 0;border-bottom:1px solid var(--linha)}
.relatorio-linha dt{font-size:13px;line-height:1.3;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--tinta-2)}
.relatorio-linha dd{margin:0;font-size:17px;line-height:1.35;font-weight:600;color:var(--tinta)}
.relatorio-linha dd.mono{font-size:20px}
.relatorio-rodape{padding:14px 20px 18px;font-size:12px;line-height:1.55;color:var(--tinta-2)}
.relatorio-rodape p+p{margin-top:6px}
/* linha trancada: o valor vira tarja + cadeado + "encontrado" (só em dado que a base encontrou) */
.trancado{display:inline-flex;align-items:center;gap:8px}
.tarja{display:inline-block;width:120px;height:16px;border-radius:4px;background:var(--tarja)}
.trancado svg,.cadeado{width:14px;height:14px;flex:none;color:var(--tinta-2)}
.encontrado{color:var(--ok-texto);font-weight:600;font-family:var(--fonte);font-size:15px}
/* cartão de cena de dor */
.cena{display:flex;flex-direction:column;gap:10px}
.cena-tag{align-self:flex-start;display:inline-flex;align-items:center;min-height:26px;padding:4px 10px;border-radius:999px;background:var(--dor-claro);color:var(--dor);font-size:12px;font-weight:600;line-height:1.2;text-transform:uppercase;letter-spacing:.04em}
.cena h3{font-size:18px;font-weight:700}
.cena p{font-size:15px;line-height:1.55;color:var(--tinta-2)}
.cena .btn{align-self:flex-end;margin-top:auto}
/* garantia "Não achou, não paga" */
.garantia{background:var(--ok-claro);border:1px solid var(--marca-clara);border-radius:var(--raio-cartao);padding:24px 20px;display:flex;flex-direction:column;gap:12px}
.garantia-topo{display:flex;align-items:center;gap:12px}
.garantia-topo i{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ok);color:#fff}
.garantia-topo i svg{width:22px;height:22px}
.garantia p{font-size:16px}
.garantia .linha-ok{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--tinta)}
.garantia .linha-ok svg{width:18px;height:18px;color:var(--ok);flex:none}
/* link do suporte no cartão da garantia: área de toque de 44px de altura */
.garantia .link-discreto{display:inline-flex;align-items:center;min-height:44px;padding-block:8px}

/* ---------- 9. selos de confiança ---------- */
.selos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.selos li{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 12px;border-radius:999px;background:var(--marca-clara);color:var(--tinta);font-size:13px;line-height:1.2;font-weight:500;white-space:nowrap}
.selos svg{width:16px;height:16px;flex:none;color:var(--marca)}

/* ---------- 10. listas e passos ---------- */
.ic{display:inline-block;width:20px;height:20px;flex:none;vertical-align:-4px}
.lista-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.lista-check li{position:relative;padding-left:34px;font-size:16px;line-height:1.5}
.lista-check li::before{content:"";position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:var(--ok-claro) var(--check-verde) center/14px no-repeat}
.lista-check-mini li{padding-left:26px;font-size:13px;line-height:1.45;color:var(--tinta-2)}
.lista-check-mini li::before{width:18px;height:18px;top:0;background-size:11px}
/* passos numerados (Como funciona): <ol class="etapas"><li><i>1</i><div><h3>..</h3><p>..</p></div></li></ol> */
.etapas{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.etapas li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;align-items:start;align-content:start}
.etapas i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--marca-clara);color:var(--marca);font-style:normal;font-size:16px;font-weight:800}
.etapas h3{font-size:17px;font-weight:600;letter-spacing:0;margin-bottom:2px;padding-top:6px}
.etapas p{font-size:15px;line-height:1.55;color:var(--tinta-2)}
@media (min-width:900px){
  .etapas{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .etapas li{grid-template-columns:1fr;gap:12px}
  .etapas h3{padding-top:0}
}
/* pilha de valor: o que vem somado + preço */
.pilha{display:flex;flex-direction:column;gap:14px;border:1.5px solid var(--marca);border-radius:var(--raio-cartao);background:var(--superficie);padding:20px}

/* ---------- 11. faixa do topo, cabeçalho, rodapé, barra fixa ---------- */
/* faixa vermelha presa no topo ao rolar (como no antigo). Fica também nas telas da compra (encontramos o dono e Pix),
   como no antigo: preço riscado e "não achou, não paga" na hora de pagar. */
.faixa{position:-webkit-sticky;position:sticky;top:0;z-index:40;display:block;min-height:36px;padding:9px var(--gutter);background:var(--faixa-fundo);color:#fff;font-size:13.5px;line-height:18px;font-weight:600;text-align:center;text-wrap:balance;box-shadow:0 2px 8px rgba(15,31,51,.14)}
.faixa s{color:#FFE4E4;font-weight:500}
.faixa b{font-weight:800}
/* no celular a faixa vira 2 linhas certas: <span class="faixa-l">preço</span><span class="faixa-sep"> · </span><span class="faixa-l">prazo · garantia</span> */
@media (max-width:599px){.faixa-sep{display:none}.faixa-l{display:block}}
/* faixa de oferta com prazo (veículo): fundo e texto de alerta, relógio em mono */
.faixa-alerta{background:var(--alerta-claro);color:var(--alerta);border-bottom:1px solid #F5D9B5}
.faixa-alerta s{color:inherit;opacity:.8}
.faixa-alerta .mono,.faixa-alerta .js-relogio{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums}
/* tela baixa (navegador do Instagram, iPhone SE): a faixa CONTINUA, só mais justa (2 linhas em ~44px).
   body>.faixa vence o "display:none" de altura que alguma página ainda tenha no próprio css (regra da Base: a faixa não some). */
@media (max-height:659px){
  :root{--faixa-alto:44px}
  .faixa{min-height:0;padding-block:6px;font-size:12.5px;line-height:16px}
}body>.faixa{display:block}
@media (min-width:600px){:root{--faixa-alto:36px}}
/* quem é "sticky" no desktop desce para baixo da faixa (senão o topo do cartão fica escondido atrás dela) */
@media (min-width:900px){
  body:has(>.faixa) .hero-lado,body:has(>.faixa) .home-hero-lado,body:has(>.faixa) .vem-texto{top:calc(var(--faixa-alto) + 24px)}
}
/* o formulário (e as telas da compra dentro dele), quando a página rola até ele, para logo abaixo da faixa */
body:has(>.faixa) .form-lp,body:has(>.faixa) .achado,body:has(>.faixa) .checkout{scroll-margin-top:calc(var(--faixa-alto) + 12px)}
/* telas da compra (encontramos, não achamos, Pix): a rolagem para com a BORDA DO CARTÃO logo abaixo da faixa (o .achado e o
   .checkout ficam dentro do cartão: + 20px do padding + 1px da borda). O herói ganha a altura da tela para a página sempre
   conseguir rolar até ali: senão a rolagem parava no meio do cabeçalho e a faixa cobria metade do logo (QA 13/10, rodada 2). */
body.ck-aberto:has(>.faixa) .achado,body.ck-aberto:has(>.faixa) .checkout{scroll-margin-top:calc(var(--faixa-alto) + 33px)}
body.ck-aberto:has(>.faixa) .hero,body.ck-aberto:has(>.faixa) .home-hero{min-height:100vh;min-height:100svh}
.topo{background:var(--superficie);border-bottom:1px solid var(--linha)}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.topo-logo{display:inline-flex;align-items:center;min-height:44px}
.topo-logo img{height:28px;width:auto}
.topo-links{display:flex;align-items:center;gap:20px}
.topo-links a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--marca);font-size:15px;font-weight:600;text-decoration:none}
.topo-links a:hover{text-decoration:underline}
.topo-links svg{width:18px;height:18px}
/* "Minhas consultas" menor e cinza: não compete com a compra (área de toque continua 44px).
   Vale sozinho pelo link /painel; .topo-apagado faz o mesmo em qualquer outro link do topo. */
.topo-links a[href="/painel"],.topo-links a.topo-apagado{font-size:13px;font-weight:500;color:var(--tinta-2)}
.topo-links a[href="/painel"]:hover,.topo-links a.topo-apagado:hover{color:var(--tinta)}
/* celular de tela baixa: o cabeçalho encolhe 12px para devolver parte do espaço que a faixa ocupa */
@media (max-width:899px) and (max-height:659px){.topo .wrap{height:52px}}
.rodape{background:var(--marca);color:var(--apagado);font-size:13px;line-height:1.6;padding:40px 0 calc(48px + 76px + env(safe-area-inset-bottom,0px))}
.rodape .wrap{display:flex;flex-direction:column;gap:16px}
.rodape img{align-self:flex-start;height:24px;width:auto}
.rodape a{color:#E6EEFA;text-decoration:underline;text-decoration-color:rgba(230,238,250,.35)}
.rodape a:hover{text-decoration-color:#E6EEFA}
.rodape-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 20px}
.rodape-links a{display:inline-flex;align-items:center;min-height:32px}
.rodape :focus-visible{outline-color:#fff}
/* barra fixa inferior: aparece quando o formulário sai da tela (o lp.js liga .mostrar) */
.barra-fixa{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px max(var(--gutter),calc((100vw - var(--largura)) / 2)) calc(10px + env(safe-area-inset-bottom,0px));background:var(--superficie);border-top:1px solid var(--linha);box-shadow:0 -2px 8px rgba(15,31,51,.06);transform:translateY(110%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s}
.barra-fixa.mostrar{transform:none;visibility:visible;transition:transform .22s ease,visibility 0s}
.barra-preco{display:flex;flex-direction:column;line-height:1.15;font-variant-numeric:tabular-nums}
.barra-preco s{font-size:13px;font-weight:500;color:var(--apagado)}
.barra-preco b{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--tinta)}
.barra-preco small{font-size:12px;font-weight:500;color:var(--tinta-2)}
.barra-fixa .btn{min-height:48px;width:140px;padding:8px 12px;flex:none}
.banner-credito{display:block;padding:10px var(--gutter);background:var(--ok-claro);border-bottom:1px solid #CDEBD9;color:var(--tinta);font-size:14px;line-height:1.4;text-align:center;text-decoration:none}
.banner-credito b{font-weight:700;white-space:nowrap}
.banner-credito u{color:var(--marca);font-weight:700}

/* ---------- 12. vídeo VSL (div#lp-video > video#vsl + button#vsl-som + legenda + botão) ---------- */
/* celular: vídeo 9:16 centralizado (320px de altura), legenda 13px embaixo e "Consultar" largura total embaixo da legenda.
   desktop: uma coluna só da largura do vídeo, legenda e botão logo abaixo dele (sem coluna vazia ao lado). */
.lp-video{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;row-gap:12px}
.lp-video video{grid-row:1;grid-column:1;display:block;width:180px;height:320px;aspect-ratio:9/16;object-fit:cover;border-radius:var(--raio-cartao);background:var(--marca);box-shadow:var(--sombra)}
/* "Ouvir" no canto inferior direito do vídeo (o vídeo tem 180px e fica no meio da coluna) */
.vsl-som{grid-row:1;grid-column:1;align-self:end;justify-self:end;z-index:1;margin:0 calc(50% - 80px) 10px 0;height:40px;padding:0 16px;border:1.5px solid var(--linha);border-radius:999px;background:var(--superficie);color:var(--marca);font:600 14px/1 var(--fonte);cursor:pointer;box-shadow:var(--sombra-btn)}
.vsl-som:hover{border-color:var(--marca)}
.lp-video.com-som .vsl-som{background:var(--marca);border-color:var(--marca);color:#fff}
.vsl-legenda{grid-column:1;font-size:13px;line-height:1.45;font-weight:500;color:var(--tinta-2);text-align:center}
.lp-video>.btn{grid-column:1;justify-self:stretch;width:100%}
@media (min-width:900px){
  .lp-video{grid-template-columns:225px;justify-content:start;justify-items:stretch}
  .lp-video video{width:225px;height:400px}
  .vsl-som{margin:0 10px 10px 0}
}

/* ---------- 13. FAQ (acordeão com details/summary; a primeira já aberta) ---------- */
.faq{border-top:1px solid var(--linha)}
.faq details{border-bottom:1px solid var(--linha)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:16px 0;font-size:16px;line-height:1.4;font-weight:600;color:var(--tinta);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:16px;height:16px;flex:none;color:var(--tinta-2);transition:transform .2s}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq details>p,.faq details>div{padding:0 0 18px;font-size:15px;line-height:1.6;color:var(--tinta-2)}

/* ---------- 14. estados que o lp.js liga e o HTML que ele gera ---------- */
/* Do clique em diante, só o cartão do formulário fica (o cartão fica FORA do <main>). */
/* A faixa vermelha NÃO some aqui: fica no topo também na tela "encontramos o dono" e no Pix (preço e garantia curta). */
body.ck-aberto main,body.ck-aberto .rodape,body.ck-aberto .barra-fixa,body.ck-aberto .lp-video,
body.ck-aberto .banner-credito,body.ck-aberto .esconde-no-ck{display:none !important}
form.com-achado>:not(.achado){display:none !important}
form.com-checkout>:not(.checkout){display:none !important}
/* cartão do formulário */
.form-lp{display:flex;flex-direction:column;gap:16px;scroll-margin-top:12px}
.form-lp>.btn{width:100%}
.form-lp>.lp-mini{text-align:center;margin-top:-6px}
/* selos no cartão do formulário: grade fixa 2x2 (igual à home), nunca 2+1+1 */
.form-lp .selos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-top:16px;border-top:1px solid var(--linha)}
.form-lp .selos li{justify-content:center;min-width:0;padding:6px 8px;border-radius:12px;white-space:normal;text-align:center;font-size:12px}
@media (min-width:400px){.form-lp .selos li{font-size:13px}}
.form-lp .selos li[hidden]{display:none !important}
.form-lp.achou{background:var(--ok-claro);border-color:var(--ok)}
/* procurando o dono */
.achado,.checkout{display:flex;flex-direction:column;gap:16px;scroll-margin-top:12px}
.spin{position:relative;display:inline-block;flex:none;width:12px;height:12px;border-radius:50%;background:var(--marca)}
.spin::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--marca);animation:ponto 1.4s ease-out infinite}
@keyframes ponto{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.8);opacity:0}}
.busca{display:flex;align-items:flex-start;gap:14px;padding-top:4px}
.busca .spin{margin-top:8px}
.busca b{display:block;font-size:18px;line-height:1.4;font-weight:700}
.busca .mono{white-space:nowrap}
.busca small{display:block;margin-top:2px;font-size:14px;color:var(--tinta-2)}
.busca-barra{height:4px;border-radius:2px;background:var(--marca-clara);overflow:hidden}
.busca-barra u{display:block;width:0;height:100%;background:var(--marca);animation:enche 1.8s ease-out forwards}
@keyframes enche{to{width:100%}}
.esqueleto{list-style:none;margin:0;padding:0}
.esqueleto li{display:flex;flex-direction:column;justify-content:center;gap:8px;height:56px;border-bottom:1px solid var(--linha)}
.esqueleto li::before,.esqueleto li::after{content:"";display:block;height:10px;width:30%;border-radius:4px;background:linear-gradient(90deg,#E9EEF5 0%,#F5F8FB 50%,#E9EEF5 100%);background-size:200% 100%;animation:brilho 1.2s linear infinite}
.esqueleto li::after{height:14px;width:62%}
.esqueleto li:nth-child(2)::after{width:48%}
.esqueleto li:nth-child(3)::after{width:70%}
@keyframes brilho{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* encontramos o dono / número pronto para a consulta completa */
.achado-topo{display:flex;align-items:center;gap:12px}
.achado-topo i{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ok);color:#fff}
.achado-topo i svg{width:22px;height:22px}
.achado-topo small{display:block;font-size:13px;line-height:1.3;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ok-texto)}
.achado-topo b{display:block;font-family:var(--mono);font-size:20px;font-weight:600;letter-spacing:0;font-variant-numeric:tabular-nums}
.achado-topo.pronto i{background:var(--marca-clara);color:var(--marca)}
.achado-topo.pronto small{color:var(--marca)}
.achado-lista{list-style:none;margin:0;padding:0;border-top:1px solid rgba(26,154,82,.25)}
.achado-lista li{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;min-height:56px;padding:8px 0;border-bottom:1px solid rgba(26,154,82,.25)}
.achado-lista li>span{flex-basis:100%;font-size:13px;line-height:1.3;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--tinta-2)}
.achado-lista b{color:var(--ok-texto);font-size:15px;font-weight:600}
.achado-lista b.aberto{color:var(--tinta);font-family:var(--fonte);font-size:17px;line-height:1.35;font-weight:600;letter-spacing:0} /* igual a .relatorio-linha dd: mono só no número e no CPF */
.achado-lista i.borrao{display:inline-block;width:120px;height:16px;border-radius:4px;background:var(--tarja)}
.achado-lista .cadeado{width:14px;height:14px;color:var(--tinta-2)}
.achado-txt{font-size:15px;line-height:1.5;color:var(--tinta-2)}
.achado-txt b{color:var(--tinta);font-weight:600}
.achado-preco,.ck-preco{text-align:center;font-size:15px;line-height:1.25;font-weight:500;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.achado-preco s,.ck-preco s{color:var(--apagado)}
.achado-preco b,.ck-preco b{margin-left:4px;font-size:32px;font-weight:800;letter-spacing:-.02em;color:var(--tinta);line-height:1.1;white-space:nowrap}
.achado .lp-mini{text-align:center;margin-top:-6px}
.achado-outro{align-self:center;min-height:44px;padding:8px 12px;border:0;background:none;color:var(--marca);font:600 15px var(--fonte);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.pronto-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pronto-lista li{position:relative;padding-left:32px;font-size:16px;font-weight:600}
.pronto-lista li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--ok-claro) var(--check-verde) center/13px no-repeat}
.pronto-garantia{padding:12px 14px;border-radius:var(--raio);background:var(--ok-claro);font-size:15px;line-height:1.5;color:var(--tinta)}
.pronto-garantia b{color:var(--ok-texto)}
/* checkout Pix no próprio cartão */
.ck-topo{display:flex;flex-direction:column;gap:4px}
.ck-topo small{font-size:13px;line-height:1.3;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--tinta-2)}
.ck-topo small .mono{text-transform:none;color:var(--tinta)}
.ck-topo b{font-size:20px;line-height:1.3;font-weight:700;letter-spacing:-.01em}
.ck-achou{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--raio);background:var(--ok-claro);font-size:15px;line-height:1.5;color:var(--tinta)}
.ck-achou i{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--ok);color:#fff}
.ck-achou i svg{width:14px;height:14px}
.ck-vem{padding:12px 14px;border-radius:var(--raio);background:var(--marca-clara);font-size:15px;line-height:1.5;color:var(--tinta)}
.ck-qr-caixa{align-self:center;padding:10px;border:1px solid var(--linha);border-radius:var(--raio);background:#fff}
.ck-qr{display:block;width:220px;height:220px;image-rendering:pixelated}
.ck-codigo{display:block;width:100%;height:44px;padding:0 12px;border:1px solid var(--linha);border-radius:10px;background:var(--fundo);color:var(--tinta-2);font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.ck-codigo:focus{outline:none;border-color:var(--marca);box-shadow:var(--anel)}
.ck-relogio{align-self:center;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 14px;border-radius:999px;background:var(--alerta-claro);color:var(--alerta);font-size:14px;font-weight:600;line-height:1.2}
.ck-relogio svg{width:16px;height:16px;flex:none}
.ck-relogio .ck-tempo,.ck-tempo{font-family:var(--mono);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.ck-relogio.acabando{background:var(--dor-claro);color:var(--dor)}
.ck-status{display:flex;align-items:center;justify-content:center;gap:10px;min-height:40px;font-size:15px;font-weight:500;color:var(--tinta);text-align:center}
.ck-pago{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:var(--ok-claro);color:var(--ok-texto);font-weight:700}
.ck-pago svg{width:18px;height:18px}
.ck-passos-pix{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;counter-reset:pix}
.ck-passos-pix li{position:relative;padding-left:36px;font-size:15px;line-height:1.5;color:var(--tinta);counter-increment:pix}
.ck-passos-pix li::before{content:counter(pix);position:absolute;left:0;top:0;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--marca-clara);color:var(--marca);font-size:13px;font-weight:800}
.ck-nome-banco{font-weight:700;color:var(--tinta)}
.ck-ou{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--tinta-2)}
.ck-ou::before,.ck-ou::after{content:"";flex:1;height:1px;background:var(--linha)}
.ck-garantias{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--linha);display:flex;flex-direction:column;gap:8px}
.ck-garantias li{position:relative;padding-left:26px;font-size:13px;line-height:1.45;color:var(--tinta-2)}
.ck-garantias li::before{content:"";position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:var(--ok-claro) var(--check-verde) center/11px no-repeat}
.ck-ajuda{font-size:13px;text-align:center}
.ck-ajuda a{color:var(--marca);font-weight:600}
.checkout.vencido .ck-qr-caixa,.checkout.vencido .ck-codigo,.checkout.vencido .ck-relogio,.checkout.vencido .ck-passos-pix,.checkout.vencido .ck-achou,.checkout.vencido .ck-vem{display:none}
.ck-vencido{padding:12px 14px;border-radius:var(--raio);background:var(--marca-clara);color:var(--tinta);font-size:15px;line-height:1.5;text-align:left}
/* no celular quem paga é o próprio aparelho: "Copiar código Pix" vem antes do QR (que fica para quem paga com outro celular) */
@media (max-width:600px){
  .checkout>.ck-qr-caixa,.checkout>.ck-passos-pix,.checkout>.ck-passos-pix~*{order:1}
}
@media (max-width:359px){.ck-qr{width:190px;height:190px}}

/* ---------- 15. movimento ---------- */
/* pulso visível (1.0 a 1.04, devagar, a cada 2,2 s) SÓ no botão do formulário, no da barra fixa e nos que o lp.js gera.
   O laranja cresce numa camada atrás do texto (::before) e um anel laranja se abre e some (::after, o "halo" do antigo).
   A caixa do botão não se mexe (toque certeiro e testes automáticos conseguem clicar). */
.pulsa{position:relative;isolation:isolate}
.pulsa::before,.pulsa::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none}
.pulsa::before{background:inherit;animation:pulsa 2.2s ease-in-out infinite}
.pulsa::after{animation:pulsa-anel 2.2s ease-out infinite}
@keyframes pulsa{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes pulsa-anel{0%{box-shadow:0 0 0 0 rgba(255,91,31,.5)}70%,100%{box-shadow:0 0 0 14px rgba(255,91,31,0)}}
@media (prefers-reduced-motion:reduce){
  .pulsa::before,.pulsa::after,.spin::after,.esqueleto li::before,.esqueleto li::after{animation:none}
  .busca-barra u{animation:none;width:100%}
  .barra-fixa,.barra-fixa.mostrar,.faq summary svg,.btn{transition:none}
}
/* botão esperando a resposta (desabilitado): sem pulso */
.pulsa:disabled::before,.pulsa:disabled::after{animation:none}

/* ---------- 16. base quente ---------- */
/* metade quente do título: <h1>Quem é o dono deste número? <span class="quente">Nome completo e CPF em 1 minuto.</span></h1>
   No h1 a metade quente começa em linha nova (situação em cima, promessa embaixo, como no antigo). */
.quente{color:var(--quente)}
h1 .quente{display:block}

/* selo curto e verdadeiro perto do botão (cor de sucesso, ícone opcional):
   <p class="selo-gratis"><svg ...></svg>Se acharmos o dono, você vê grátis perfil, cidade e operadora antes do Pix</p> */
.selo-gratis{display:block;width:fit-content;max-width:100%;margin-inline:auto;padding:6px 12px;border-radius:10px;background:var(--ok-claro);color:var(--ok-texto);font-size:13px;line-height:1.4;font-weight:700;text-align:center;text-wrap:balance}
.selo-gratis svg{display:inline-block;width:15px;height:15px;margin-right:5px;vertical-align:-3px;color:var(--ok)}
.form-lp>.selo-gratis{align-self:center}

/* linha de confiança: 1 linha pequena cinza logo embaixo do botão.
   <p class="linha-confianca"><svg ...cadeado...></svg>Pix pelo Mercado Pago · CNPJ <span class="nowrap">{{CNPJ}}</span></p> */
.linha-confianca{display:block;font-size:12.5px;line-height:1.4;font-weight:500;letter-spacing:-.005em;color:var(--tinta-2);text-align:center;text-wrap:balance}
.linha-confianca svg{display:inline-block;width:13px;height:13px;margin-right:4px;vertical-align:-2px;color:var(--tinta-2)}
.linha-confianca b{font-weight:700;color:var(--tinta)}
.form-lp>.linha-confianca{margin-top:-6px}
@media (min-width:900px){.cta:not(.cta-centro) .linha-confianca{text-align:left}}

/* fechamento escuro: a "última chamada" no fim da página de venda (fundo azul-marinho, texto branco, botão laranja).
   <section class="secao fecho-escuro fechamento">...h2 (com .quente), .preco, .cta > .btn-accent + .lp-mini/.linha-confianca...</section>
   Pode ficar junto com .secao-branca: o fecho-escuro vence. */
.fecho-escuro,.secao-branca.fecho-escuro{background:var(--marca);color:#fff;border-block:0;border-bottom:1px solid rgba(230,238,250,.12)}
.fecho-escuro h2,.fecho-escuro h3{color:#fff}
.fecho-escuro p{color:#DCE4EE}
.fecho-escuro .quente{color:#FF9466}                  /* 7,1:1 com o azul-marinho */
.fecho-escuro .preco b{color:#fff}
.fecho-escuro .preco-de,.fecho-escuro .preco small{color:#B8C4D6}
.fecho-escuro .preco s{color:#94A3B8}
.fecho-escuro .lp-mini,.fecho-escuro .mini,.fecho-escuro .linha-confianca,.fecho-escuro .linha-confianca svg{color:#B8C4D6}   /* 8,7:1 */
.fecho-escuro .linha-confianca b{color:#fff}
.fecho-escuro a:not(.btn){color:#E6EEFA}
.fecho-escuro .selo-gratis{background:rgba(126,226,168,.14);color:#7EE2A8}
.fecho-escuro .selo-gratis svg{color:#7EE2A8}
.fecho-escuro .btn-accent.pulsa,.fecho-escuro .btn-accent{box-shadow:0 8px 28px -6px rgba(255,91,31,.65)}   /* no escuro, brilho no lugar do anel fixo (o anel ficaria marrom) */
.fecho-escuro .pulsa::after{animation:none}   /* no escuro o botão pulsa (o laranja cresce até 1.04), sem o anel que se abre */
.fecho-escuro :focus-visible{outline-color:#fff}

/* quem usa a cor de ação como TEXTO pequeno ou fundo de texto pequeno (fora das páginas de venda):
   laranja escuro, para o contraste continuar AA depois da troca do verde pelo laranja. */
body .auth-compra a{color:var(--acao-texto)}
body .auth-compra a:hover{color:#9A3412}
body .opcao-cta{background:var(--acao-texto);font-weight:700}
body .opcao.destaque:hover .opcao-cta{background:#9A3412}

/* === Telas da compra (quente) === */
/* HTML que o public/js/lp.js gera depois do clique: "encontramos o dono", "número pronto" e o Pix (telefone, CPF, /consultar).
   Dono: agente Telas da compra. Só acrescenta: vem depois da seção 14 e vence por ordem. */

/* "Encontramos o dono": cartão BRANCO com borda verde (o laranja do botão aparece; o verde fica no sinal de encontrado) */
.form-lp.achou{background:var(--superficie);border:1.5px solid var(--ok);box-shadow:0 0 0 4px var(--ok-claro),var(--sombra)}
.achado-lista{border-top:1px solid var(--linha)}
.achado-lista li{border-bottom:1px solid var(--linha)}
/* nome completo e CPF: rótulo + cadeado + "encontrado" na 1a linha, o dado borrado embaixo (parece dado escondido, não "carregando").
   O texto borrado é só desenho (content do CSS, texto neutro): nenhuma letra do dado real vem para a página. */
.achado-lista li.tranca{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:6px;row-gap:2px;min-height:0;padding:10px 0 8px}
.achado-lista li.tranca>span{grid-column:1;grid-row:1}
.achado-lista li.tranca>.cadeado{grid-column:2;grid-row:1;width:15px;height:15px;color:var(--ok-texto)}
.achado-lista li.tranca>b{grid-column:3;grid-row:1;font-size:14px;line-height:1.3;font-weight:700;color:var(--ok-texto)}
.achado-lista li.tranca>i.borrao{grid-column:1/-1;grid-row:2;display:block;width:auto;height:auto;margin:0;padding:2px 2px 0;background:none;border-radius:0;overflow:hidden;font-style:normal;white-space:nowrap;-webkit-user-select:none;user-select:none;pointer-events:none}
.achado-lista i.borrao::before{content:"Nnnnnnn Nnnnn nn Nnnnnn";display:inline-block;color:var(--tinta);font-family:var(--fonte);font-size:20px;line-height:1.3;font-weight:700;letter-spacing:.01em;filter:blur(5px);opacity:.78}
.achado-lista i.borrao-cpf::before{content:"000.000.000-00";font-family:var(--mono);font-weight:600;letter-spacing:0}
/* perfil, cidade e operadora: rótulo e valor na mesma linha */
.achado-lista li.livre{display:flex;flex-wrap:nowrap;align-items:baseline;justify-content:space-between;gap:12px;min-height:48px;padding:10px 0}
.achado-lista li.livre>span{flex:none}
.achado-lista li.livre>b.aberto{min-width:0;text-align:right;font-size:16px;line-height:1.35;font-weight:700}
/* embaixo do botão: relógio + "Resultado em até 1 minuto, nesta página e em PDF" */
.achado .lp-mini svg{display:inline-block;width:14px;height:14px;margin-right:5px;vertical-align:-2px}
.achado .achado-outro{margin-top:-6px}

/* "Número pronto": a garantia com o escudo verde */
.pronto-garantia{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.5}
.pronto-garantia svg{flex:none;width:20px;height:20px;margin-top:1px;color:var(--ok)}
.pronto-garantia b{color:var(--ok-texto)}

/* Pix: título com o ganho, caixa de 1 linha, preço, garantia curta, e no fim só 2 selos */
.ck-topo b{font-size:21px;line-height:1.25;font-weight:800;letter-spacing:-.015em;text-wrap:balance}
.achado .lp-mini{text-wrap:balance}
.ck-achou{align-items:center;padding:10px 12px;font-size:14.5px;line-height:1.4}
.ck-achou b{color:var(--ok-texto);font-weight:700}
.ck-vem{padding:10px 12px;font-size:15px;line-height:1.4}
.ck-recebe{margin-top:-8px;font-size:13.5px;line-height:1.5;color:var(--tinta-2)}
.ck-recebe b{color:var(--tinta);font-weight:700}
.ck-garantia{align-self:center;display:inline-flex;align-items:center;gap:6px;margin-top:-8px;padding:5px 12px;border-radius:999px;background:var(--ok-claro);color:var(--ok-texto);font-size:13.5px;line-height:1.3;font-weight:700}
.ck-garantia svg{flex:none;width:16px;height:16px;color:var(--ok)}
.ck-selos{gap:2px;align-items:center;padding-top:12px}
.ck-selos li{display:flex;align-items:center;justify-content:center;gap:6px;padding-left:0;font-size:12.5px;line-height:1.4;font-weight:500;text-align:center;color:var(--tinta-2)}
.ck-selos li::before{content:none}
.ck-selos svg{flex:none;width:14px;height:14px;color:var(--tinta-2)}
.ck-selos .ck-ajuda a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--marca);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.ck-selos .ck-ajuda svg{color:var(--marca)}
.checkout.vencido .ck-recebe{display:none}

/* === Oferta 15 min (Maxxima) === */
/* Oferta de 15 min por visitante no telefone e no CPF (igual ao /veiculo). O public/js/lp.js pinta .js-preco, .js-cheio,
   .js-relogio, .js-oferta-txt, .js-sem-oferta e o #faixa-txt; aqui fica só o desenho do relógio, da faixa vencida e das
   partes novas das telas da compra. Dono: agente Relógio da oferta. Só acrescenta (vence por ordem). */

/* relógio mm:ss: mono com algarismos da mesma largura (o texto não treme a cada segundo) */
.js-relogio{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:0;white-space:nowrap}

/* faixa depois que a oferta acaba: sai o vermelho de pressa, entra o azul-marinho com o preço cheio (o /veiculo tem a dele) */
.faixa:not(.faixa-alerta).encerrada{background:var(--marca);color:#fff}

/* telas da compra: o relógio da oferta logo abaixo do preço ("A oferta acaba em 12:34"), vermelho como a faixa */
.achado-relogio{align-self:center;display:inline-flex;align-items:center;gap:8px;min-height:32px;margin-top:-8px;padding:5px 14px;border-radius:999px;background:var(--dor-claro);color:var(--dor);font-size:14px;font-weight:600;line-height:1.2}
.achado-relogio svg{width:16px;height:16px;flex:none}
.achado-relogio .js-relogio{font-size:15px}

/* "Encontramos o dono": o resto que a consulta traz, trancado, em etiquetas corridas (não diz "encontrado": a busca rápida
   não conferiu um por um). Perfil, cidade e operadora ficam mais baixos para o botão subir na tela do celular. */
.form-lp.achou .achado-lista li.livre{min-height:40px;padding:7px 0}
.achado-mais{display:flex;flex-direction:column;gap:8px;margin-top:-4px}
.achado-mais>p{font-size:13px;line-height:1.3;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--tinta-2)}
.achado-mais ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.achado-mais li{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 11px;border:1px solid var(--linha);border-radius:999px;background:var(--fundo);font-size:14px;line-height:1.2;font-weight:700;white-space:nowrap;color:var(--tinta)}
.achado-mais li svg{flex:none;width:14px;height:14px;color:var(--ok-texto)}

/* "Número pronto": a lista da ficha mais justa (4 linhas) e a saída pelo CPF */
.pronto-lista{gap:6px}
.pronto-lista li{font-size:15px;line-height:1.4}
.pronto-lista li::before{top:0}
.achado-cpf{align-self:center;display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 5px;min-height:44px;margin-top:-6px;padding:8px 12px;font-size:15px;line-height:1.35;color:var(--tinta-2);text-align:center;text-decoration:none}
.achado-cpf b{color:var(--marca);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.achado-cpf+.achado-outro{margin-top:-18px}

/* === Pacote 5 consultas === */
/* HTML que o public/js/lp.js gera para o pacote de 5 consultas (telefone e CPF, 13/10/2026): o preço das telas da compra,
   a linha do pacote no Pix, e a tela de quem já tem consultas guardadas ("Você tem N consultas guardadas", nunca o saldo
   em reais). Dono: agente Telas da compra. Só acrescenta: vem por último e vence por ordem. */

/* "Encontramos o dono" / "Número pronto": "5 consultas por R$ 47,00 (de R$ 67,00)" */
.achado-preco.pacote-preco{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:6px;row-gap:0}
.pacote-preco .pacote-qtd{font-size:18px;line-height:1.3;font-weight:700;color:var(--tinta)}
.achado-preco.pacote-preco b{margin-left:0}
.pacote-preco .pacote-de{font-size:15px;color:var(--tinta-2)}
/* "Esta consulta é a 1ª. As outras 4 ficam guardadas para telefone ou CPF." logo abaixo do botão (o botão cabe na 1ª tela) */
.achado-pacote{margin-top:-4px;font-size:14px;line-height:1.45;color:var(--tinta-2);text-align:center;text-wrap:balance}
.achado-pacote+.lp-mini{margin-top:-10px}

/* quem tem consultas guardadas: a caixa verde no cartão do formulário e nas telas da compra */
.pacote-tem{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--raio);background:var(--ok-claro);color:var(--tinta)}
.pacote-tem>i{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ok);color:#fff}
.pacote-tem>i svg{width:18px;height:18px}
.pacote-tem b{display:block;font-size:16px;line-height:1.3;font-weight:800;letter-spacing:-.01em;color:var(--tinta)}
.pacote-tem .pacote-depois{display:block;margin-top:1px;font-size:14px;line-height:1.4;color:var(--tinta-2)}
/* CPF: a caixinha "Incluir nome sujo (+ R$ 14,90)" usa o desenho do .bump (seção 6) */
.form-lp .pacote-bump{margin-top:-4px}
/* o preço da página (herói, pilha, fechamento) vira "Você tem N consultas guardadas" */
.preco.pacote-pag{font-size:17px;font-weight:600;color:var(--tinta-2)}
.preco.pacote-pag b{font-size:28px}
.hero-preco .preco.pacote-pag b{font-size:22px}   /* no herói, 1 linha: o cartão logo abaixo já mostra a caixa verde */
.fecho-escuro .preco.pacote-pag{color:#B8C4D6}
/* quem tem consultas guardadas não compra o pacote agora: somem os blocos de compra do pacote das páginas (herói e pilha) */
body.tem-pacote .pacote-topo,body.tem-pacote .pacote-cada,body.tem-pacote .pilha .pacote{display:none !important}

/* Pix do pacote: o que o Pix compra (5 consultas, esta sai agora) e, no CPF, o nome sujo já incluso */
.ck-pacote{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--linha);border-radius:var(--raio);background:var(--superficie);font-size:14.5px;line-height:1.45;color:var(--tinta)}
.ck-pacote svg{flex:none;width:20px;height:20px;margin-top:1px;color:var(--marca)}
.ck-pacote b{font-weight:800}
.ck-nomesujo{display:flex;align-items:flex-start;gap:8px;margin-top:-8px;font-size:14px;line-height:1.45;font-weight:600;color:var(--ok-texto)}
.ck-nomesujo svg{flex:none;width:18px;height:18px;margin-top:1px;color:var(--ok)}
.checkout.vencido .ck-pacote,.checkout.vencido .ck-nomesujo{display:none}
/* CPF de quem tem 1 ou 2 consultas guardadas: o nome sujo (+ R$ 14,90 do pacote) não cabe; a frase diz que esta sai sem ele
   (13/10/2026, rodada 3; antes a caixinha só sumia) */
.pacote-sem-sujo{margin-top:-4px;font-size:14px;line-height:1.45;color:var(--tinta-2);text-wrap:pretty}