/* /telefone (dono do número). Só o que é desta página: a disposição das seções.
   Todo componente (botão, campo, cartão, relatório, Pix, selos, faixa, .quente, .selo-gratis,
   .linha-confianca, .fecho-escuro) está no v2.css.
   Página da oferta (13/10/2026, palestra do Maxxima): topo com a dor + "de R$ 67 por R$ 47" + relógio + formulário,
   3 dores, o que vem + exemplo da ficha + pilha com preço e relógio + garantia, 5 perguntas, fechamento escuro.
   Sem vídeo (produto anônimo vende com página sem vídeo). 4 botões de compra + a barra fixa.
   Oferta: .js-preco, .js-cheio, .js-relogio, .js-oferta-txt e .js-sem-oferta (o script troca quando os 15 minutos acabam). */

/* ---------- faixa do topo: o relógio em mono, sem pular de largura a cada segundo ---------- */
.faixa .js-relogio{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:0}
/* oferta vencida (o lp.js liga .encerrada): a faixa sai do vermelho e diz o preço cheio, igual ao /cpf */
.faixa.encerrada{background:var(--marca)}

/* ---------- relógio da oferta (herói, pilha, fechamento): pílula vermelha clara, número em mono ---------- */
.oferta-relogio{display:inline-flex;align-items:center;gap:6px;width:fit-content;min-height:32px;padding:4px 12px;border-radius:999px;background:var(--dor-claro);color:var(--dor);font-size:14px;line-height:1.2;font-weight:700}
.oferta-relogio svg{width:16px;height:16px;flex:none}
.oferta-relogio .js-relogio{font-family:var(--mono);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:0}
.barra-relogio{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;color:var(--dor)}

/* ---------- herói: título com a dor, 1 linha do que vem, preço com relógio e o formulário antes de rolar ---------- */
.hero{padding:14px 0 8px}
.hero-grid{display:grid;gap:14px}
.hero-txt{display:flex;flex-direction:column;gap:10px}
.hero h1{font-size:30px;line-height:1.08}
.hero-sub{font-size:16px;line-height:1.45;text-wrap:balance}
.hero .preco b{font-size:34px}
.hero-preco{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.hero-lado{display:flex;flex-direction:column;gap:24px;min-width:0}
/* cartão do formulário mais justo no celular (o botão Consultar tem que caber na primeira tela) */
@media (max-width:900px){
  .form-lp{padding:16px;gap:14px}
  .form-lp>.linha-confianca{margin-top:-4px}
}
/* celular estreito (375px): o título continua em 2 linhas (situação em cima, promessa embaixo) */
@media (max-width:380px){
  .hero h1{font-size:28px}
}
/* tela baixa (navegador do Instagram, iPhone SE): sai a linha de apoio, ficam título, preço, relógio e botão */
@media (max-width:900px) and (max-height:700px){
  .hero-sub{display:none}
}
/* tela bem baixa (iPhone SE dentro do Instagram): o relógio fica só na faixa do topo, para o botão caber na primeira tela */
@media (max-width:900px) and (max-height:620px){
  .hero-preco .oferta-relogio{display:none}
}
@media (min-width:901px){
  .hero{padding:48px 0 72px}
  .hero-grid{grid-template-columns:minmax(0,1fr) 440px;gap:64px;align-items:start}
  .hero-txt{gap:20px;padding-top:8px}
  .hero h1{font-size:46px}
  .hero-sub{font-size:18px;max-width:560px}
  .hero .preco b{font-size:40px}
  .hero-lado{position:sticky;top:24px}
}
/* do clique em diante: só o cartão, centralizado */
body.ck-aberto .hero{padding:16px 0 40px}
body.ck-aberto .hero-grid{grid-template-columns:minmax(0,520px);justify-content:center}
body.ck-aberto .hero-lado{position:static}

/* stepper estático do topo do cartão: uma linha só (bolinha e nome lado a lado), mais baixo que o dos estados */
.form-lp>.passos{align-items:center}
.form-lp>.passos li{flex:0 0 auto;flex-direction:row;align-items:center;gap:6px;font-size:13px;text-align:left}
.form-lp>.passos li+li{flex:1 1 auto}
.form-lp>.passos li+li::before{position:static;flex:1 1 8px;min-width:8px;height:2px;margin:0 2px 0 6px}
.form-lp>.passos i{width:24px;height:24px;font-size:12px}

/* a prévia grátis só existe com a pré-busca ligada: desligada, o selo do cartão some (nunca prometer o que não roda) */
.form-lp[data-prebusca="0"] .selo-gratis,body:has(.form-lp[data-prebusca="0"]) .so-prebusca{display:none}

/* ---------- seções ---------- */
@media (max-width:900px){
  main .secao{padding-block:36px}
  .secao-cab{margin-bottom:16px}
}

/* dores: 3 cartões com a borda quente à esquerda, um embaixo do outro no celular */
.cena{border-left:4px solid var(--dor)}
@media (max-width:900px){
  .cena{padding:16px;gap:8px}
  .grade-3{gap:12px}
}

/* o que vem + exemplo + pilha com preço + garantia: no celular nessa ordem; no desktop texto, pilha e garantia à esquerda, exemplo à direita */
.vem{display:flex;flex-direction:column;gap:24px}
.vem-txt{display:flex;flex-direction:column;gap:16px}
.vem-garantia{padding:18px 20px;gap:10px}
.vem-garantia h3{font-size:20px}
.vem-garantia .garantia-topo i{width:36px;height:36px}
.vem-garantia p{font-size:15px;line-height:1.5}
@media (max-width:900px){
  .vem{gap:20px}
  .lista-check{gap:10px}
}
@media (min-width:901px){
  .vem{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);grid-template-areas:"txt ex" "preco ex" "garantia ex";grid-template-rows:auto auto 1fr;column-gap:64px;row-gap:28px;align-items:start}
  .vem-txt{grid-area:txt}
  .vem-exemplo{grid-area:ex}
  .vem-preco{grid-area:preco;max-width:440px}
  .vem-garantia{grid-area:garantia;max-width:440px}
}

/* exemplo da ficha: duas colunas curtas (CPF e Receita, mãe e pai), o "e mais 2" embaixo do valor, o selo do WhatsApp */
.relatorio-2col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px}
.relatorio-2col .relatorio-linha{justify-content:flex-start}
.relatorio-linha dd small{display:block;margin-top:2px;font-size:13px;font-weight:500;color:var(--tinta-2)}
.relatorio-linha dd .mono{font-size:17px}
.relatorio-2col dd.mono{font-size:16px;white-space:nowrap}   /* o CPF cabe inteiro na meia coluna (390px) */
.selo-zap{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 8px;border-radius:999px;background:var(--ok-claro);color:var(--ok-texto);font-family:var(--fonte);font-size:12px;font-weight:700;line-height:1.4;vertical-align:2px;white-space:nowrap}
.selo-zap svg{width:12px;height:12px}

/* pilha: "Tudo isso numa consulta só", o que vem em pílulas, preço, relógio e o botão */
.pilha{align-items:stretch}
.pilha-tit{font-size:20px;line-height:1.25;font-weight:800;letter-spacing:-.01em;color:var(--tinta);text-align:center}
.pilha-itens{list-style:none;margin:0;padding:0 0 14px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;border-bottom:1px solid var(--linha)}
.pilha-itens li{display:inline-flex;align-items:center;gap:5px;min-height:28px;padding:3px 10px 3px 8px;border-radius:999px;background:var(--ok-claro);color:var(--tinta);font-size:13px;line-height:1.2;font-weight:600;white-space:nowrap}
.pilha-itens li::before{content:"";width:14px;height:14px;flex:none;background:var(--check-verde) center/12px no-repeat}
.pilha .preco{justify-content:center;margin-top:2px}
.pilha .oferta-relogio{align-self:center;margin-top:-4px}
.pilha .lp-mini{text-align:center;margin-top:-4px}

/* ---------- PACOTE DE 5 CONSULTAS (13/10/2026): o preço compra 5 consultas de telefone ou CPF ----------
   Herói: "5 consultas (R$ 9,40 cada)" logo abaixo do preço + 1 linha do que fazer com as outras 4.
   Pilha: os 5 quadradinhos (1 agora, 4 guardadas) + a frase + o preço do pacote.
   Classes .lp-pac-* (o v2.css tem as .pacote-* das telas da compra, geradas pelo lp.js: nomes separados de propósito).
   Quem já tem consultas guardadas (o lp.js liga body.tem-pacote e troca os preços por "Você tem N consultas guardadas"):
   a oferta do pacote some daqui também. */
.hero-preco .lp-pac-topo{flex:0 0 100%;display:flex;flex-direction:column;gap:2px;margin-top:-2px}
.lp-pac-linha{font-size:18px;line-height:1.3;font-weight:600;color:var(--tinta)}
.lp-pac-linha b{font-weight:800}
.lp-pac-nota{font-size:15px;line-height:1.4;font-weight:500;color:var(--tinta-2)}
/* tela baixa (navegador do Instagram, iPhone SE): a linha das outras 4 sai (ela continua na pilha e no FAQ); "5 consultas" fica.
   O relógio do herói também sai (igual ao /cpf): ele continua na faixa do topo, e o botão Consultar cabe na primeira tela. */
@media (max-width:900px) and (max-height:700px){
  .hero-preco .lp-pac-nota,.hero-preco .oferta-relogio{display:none}
}
.lp-pac{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.lp-pac-tit{font-size:18px;line-height:1.25;font-weight:800;letter-spacing:-.01em;color:var(--tinta)}
.lp-pac-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;width:100%;max-width:300px}
.lp-pac-5 i{display:grid;place-items:center;height:44px;border-radius:10px;border:1.5px solid #C5D5EC;background:var(--marca-clara);color:var(--marca);font-style:normal;font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.lp-pac-5 i.agora{border-color:var(--marca);background:var(--marca);color:#fff}
.lp-pac-5 small{padding-top:4px;font-size:12px;line-height:1.25;font-weight:700;color:var(--tinta-2)}
.lp-pac-5 .lp-pac-agora{grid-column:1;color:var(--marca)}
.lp-pac-resto{grid-column:2 / span 4;border-top:2px solid #C5D5EC}
.lp-pac-txt{font-size:15px;line-height:1.45;color:var(--tinta);text-wrap:balance}
.pilha .preco-de{text-align:center}
.lp-pac-cada{margin-top:-8px;font-size:14px;line-height:1.3;font-weight:600;color:var(--tinta-2);text-align:center}
.lp-pac-cada:not(:has(span:not([hidden]))){display:none}   /* sem oferta nenhuma: nenhum dos dois valores vale, a linha some */
.tem-pacote .lp-pac-topo,.tem-pacote .lp-pac,.tem-pacote .lp-pac-cada,.tem-pacote .lp-pac-pix{display:none}
.barra-preco small{white-space:nowrap}

/* FAQ: 5 perguntas, todas fechadas; no desktop título à esquerda e perguntas à direita */
@media (max-width:900px){
  .faq summary{padding:12px 0;min-height:52px}
}
@media (min-width:901px){
  .faq-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,640px);column-gap:64px;align-items:start}
  .faq-grade .secao-cab{margin:0}
}

/* fechamento escuro: centralizado no celular; no desktop à esquerda, como o resto da página */
.fechamento{text-align:center}
.fechamento h2{margin-inline:auto;max-width:640px}
.fechamento h2 .quente{display:block}   /* situação em cima, o que fazer embaixo (igual ao título do topo) */
.fechamento .preco{justify-content:center;margin-top:16px}
.fechamento .oferta-relogio{display:flex;margin:10px auto 0;background:rgba(255,91,31,.16);color:#FFB59A}
.fechamento .cta{align-items:stretch;margin-top:20px}
@media (min-width:901px){
  .fechamento{text-align:left}
  .fechamento h2{margin-inline:0;max-width:760px}
  .fechamento .preco{justify-content:flex-start}
  .fechamento .oferta-relogio{margin-inline:0}
  .fechamento .cta{align-items:flex-start}
  .fechamento .cta .lp-mini{text-align:left}
}