/* /cpf (ficha do CPF) e /consultar/:produto (página genérica de produto). Só a disposição das seções destas páginas.
   Todo componente (botão, campo, cartão, relatório, Pix, selos, FAQ...) está no v2.css. */

/* herói: texto + preço + formulário antes de rolar (390x844); no desktop, texto à esquerda e cartão fixo à direita */
.hero{padding:10px 0 8px}
@media (max-width:900px){.hero h1{line-height:1.06}}
.hero-grid{display:grid;gap:14px}
.hero-txt{display:flex;flex-direction:column;gap:8px}
.hero-sub{font-size:17px;line-height:1.5}
.hero-lado{display:flex;flex-direction:column;gap:28px;min-width:0}
/* /cpf: o que vem na ficha, em 1 frase logo abaixo do título (2 linhas no celular; o .hero-sub do /consultar continua como era) */
.hero-campos{font-size:14px;line-height:1.45;font-weight:500;color:var(--tinta-2);text-wrap:wrap}
/* celular: o botão Consultar precisa caber na primeira tela, inclusive no navegador do Instagram (~675px úteis).
   Tela baixa (navegador do Instagram, iPhone SE): o sub sai e o que ele diz continua em "O que vem". */
@media (max-width:900px) and (max-height:860px){
  .hero-sub{display:none}
}
/* tela bem baixa (390x640): a faixa fica (regra da Base quente); a lista do /cpf sai (o exemplo mostra tudo) para o botão caber */
@media (max-width:900px) and (max-height:700px){
  .hero-campos{display:none}
}

/* formulário do herói mais justo: stepper compacto numa linha só (o estático; o que o lp.js gera nos estados continua o padrão) */
.hero .form-lp{gap:12px;padding-top:16px}
.form-lp>.passos{gap:8px;align-items:center}
.form-lp>.passos li{flex:none;flex-direction:row;gap:6px;font-size:13px}
.form-lp>.passos li:not(:last-child){flex:1 1 auto}
.form-lp>.passos li+li::before{content:none}
.form-lp>.passos li:not(:last-child)::after{content:"";flex:1 1 auto;min-width:8px;height:2px;border-radius:1px;background:var(--linha)}
.form-lp>.passos i{width:24px;height:24px;font-size:12px}
.form-lp>.passos+.campo{margin-top:2px;gap:4px}
.hero .form-lp>.aceite-lp{font-size:13.5px;line-height:1.4}
@media (max-width:380px) and (max-height:700px){
  .hero h1{font-size:26px}
}
@media (min-width:901px){
  .hero{padding:40px 0 24px}
  /* a primeira seção encosta no herói: o título dela aparece na primeira tela (sem faixa vazia de ~150px) */
  main > .secao:first-child{padding-top:24px}
  /* texto centralizado na altura do cartão: o preço fica perto do botão Consultar, sem buraco embaixo */
  .hero-grid{grid-template-columns:minmax(0,1fr) 440px;gap:64px;align-items:center}
  .hero-txt{gap:20px}
  .hero-sub,.hero-campos{font-size:18px;max-width:600px}
  .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}

/* campo de e-mail (página genérica): o dado é longo, a letra fica menor para caber */
.campo-dado.lp-email{font-size:18px}

/* cenas de dor com a borda quente à esquerda (igual ao /telefone e ao antigo), mais justas no celular */
.cena{border-left:4px solid var(--dor)}
@media (max-width:900px){.cena{padding:16px;gap:8px}}

/* cena de dor do /consultar (uma só, ao lado da virada) */
.dor-uma{display:grid;gap:24px}
.dor-uma .virada-curta{display:flex;flex-direction:column;gap:12px}
.dor-uma .virada-curta p{font-size:17px}
/* título da cena: parágrafo com cara de h3 (o h2 da seção é a virada; a ordem dos títulos fica certa) */
.cena .cena-h{font-size:18px;line-height:1.3;font-weight:700;letter-spacing:-.01em;color:var(--tinta)}
@media (min-width:901px){
  /* desktop: a virada (h2) à esquerda, em cima; a cena à direita, alinhada pelo topo */
  .dor-uma{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
  .dor-uma .virada-curta{order:-1}
  .dor-uma .virada-curta p{font-size:16px}
}

/* o que vem + exemplo + pilha (+ garantia no /cpf): no celular nessa ordem; no desktop em duas colunas */
.vem{display:flex;flex-direction:column;gap:32px}
.vem-col{display:flex;flex-direction:column;gap:32px;min-width:0}
@media (min-width:901px){
  /* desktop: título, lista, pilha (preço + botão) e garantia na coluna da esquerda; o relatório sozinho na direita, alinhado em cima.
     As colunas viram "contents" e cada bloco escolhe a coluna (a ordem no HTML, que vale no celular, não muda). */
  .vem{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);grid-template-rows:auto auto 1fr;column-gap:64px;row-gap:40px;align-items:start}
  .vem-col{display:contents}
  .vem-col:first-child > *{grid-column:1}
  .vem-col:last-child > .empilha{grid-column:2;grid-row:1 / span 3}
  .vem-col:last-child > .pilha,.vem-col:last-child > .garantia{grid-column:1}
  /* produto sem exemplo: uma coluna só, sem buraco à direita */
  .vem:has(.vem-col:last-child > .empilha[hidden]){grid-template-columns:minmax(0,720px)}
}

/* linha do relatório com vários itens (endereços, telefones, e-mails, parentes): o primeiro inteiro, o resto contado */
.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}
.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}
.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 .bloco{display:block}

/* como funciona + quem recebe o Pix */
.quem-recebe{margin-top:32px;display:flex;flex-direction:column;gap:8px}
.quem-recebe p{font-size:16px}
/* desktop: os 3 passos e o cartão lado a lado, na largura cheia como as seções de cima (sem vazio à direita) */
@media (min-width:901px){
  .como{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);column-gap:48px;align-items:start}
  .como .secao-cab,.como .cta{grid-column:1/-1}
  .como .quem-recebe{margin-top:0}
}

/* fechamento */
.fechamento{text-align:center}
.fechamento h2{margin-inline:auto;max-width:640px}
.fechamento .preco{justify-content:center;margin-top:20px}
.fechamento .cta{align-items:stretch}
@media (min-width:900px){.fechamento .cta{align-items:center}}

/* página genérica: o texto de cada produto entra pelo consultar.js; até lá ele fica invisível (sem piscar o texto padrão) */
.cj-espera [data-cj]{visibility:hidden}

/* ---------- /cpf: oferta de 15 min por visitante (13/10/2026) ----------
   O lp.js (data-oferta="1") troca .js-preco/.js-relogio e, quando a oferta vence, esconde .js-cheio e .js-oferta-txt
   e mostra .js-sem-oferta. Classes novas, que o /consultar não usa: nada aqui muda o /consultar/email nem o /consultar/restricoes. */
/* relógio mm:ss em mono, sem pular de largura a cada segundo (faixa, herói, pilha, fechamento e barra fixa) */
.faixa .js-relogio,.oferta-relogio .js-relogio,.barra-relogio{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:0}
/* oferta vencida: a faixa sai do vermelho (não é mais oferta) e diz o preço cheio */
.faixa.encerrada{background:var(--marca)}
/* pílula do relógio: vermelha como a faixa */
.oferta-relogio{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 12px;border-radius:999px;background:var(--dor-claro);color:var(--dor);font-size:14px;font-weight:700;line-height:1.2}
.oferta-relogio svg{width:16px;height:16px;flex:none}
.oferta-relogio .js-relogio{font-size:15px}
/* herói: preço e relógio juntos (o relógio desce para a linha de baixo quando não cabe) */
.hero-preco{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.hero-preco .oferta-relogio{align-self:center}
/* tela baixa (navegador do Instagram, iPhone SE): o relógio fica só na faixa do topo, para o botão caber na primeira tela */
@media (max-width:900px) and (max-height:700px){
  .hero-preco .oferta-relogio{display:none}
}
/* exemplo do relatório: as linhas do nome sujo com fundo claro de alerta; dívida em vermelho */
.relatorio-linha dd.atencao{color:var(--dor)}
.relatorio-sujo{margin-inline:-20px;padding-inline:20px;background:#FFF7F7}
/* pilha de valor: a lista do que vem + a caixa do preço com o relógio e o botão */
.pilha-cpf{gap:16px}
.pilha-cpf .pilha-titulo{font-size:20px;line-height:1.25}
.pilha-lista{gap:8px}
.pilha-lista li{font-size:15px;line-height:1.45}
.pilha-lista li::before{top:0;width:22px;height:22px;background-size:13px}
.pilha-lista b{color:var(--dor);font-weight:700}
.pilha-caixa{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding-top:16px;border-top:1px dashed var(--borda-campo);text-align:center}
.pilha-caixa .preco{justify-content:center}
.pilha-caixa .oferta-relogio{align-self:center}
/* fechamento escuro: o relógio no centro, logo abaixo do preço (no escuro a pílula fica clara, como o selo) */
.fechamento .oferta-relogio{margin:12px auto 0;display:flex;width:fit-content}
.fecho-escuro .oferta-relogio{background:rgba(255,148,102,.16);color:#FFB899}
/* ---------- /cpf: PACOTE DE 5 CONSULTAS (13/10/2026): o preço compra 5 consultas de CPF ou telefone ----------
   Classes novas, que o /consultar não usa. Herói: "5 consultas (R$ 9,40 cada)" logo abaixo do preço + a linha do nome sujo.
   Pilha: os 5 quadradinhos (1 agora, 4 guardadas) + a frase + o nome sujo + 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 do nome sujo sai (ela continua na pilha e no FAQ); "5 consultas" fica */
@media (max-width:900px) and (max-height:700px){
  .hero-preco .lp-pac-nota{display:none}
}
.lp-pac{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:16px;border-top:1px dashed var(--borda-campo);text-align:center}
.lp-pac + .pilha-caixa{padding-top:0;border-top:0}   /* uma linha tracejada só entre a lista e o pacote */
.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}
.lp-pac-sujo{padding:8px 12px;border-radius:10px;background:#FFF7F7;font-size:14px;line-height:1.45;color:var(--tinta);text-wrap:balance}
.lp-pac-sujo b{color:var(--dor);font-weight:700}
.pilha-caixa .preco-de{text-align:center}
.lp-pac-cada{margin-top:-6px;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-cada,.tem-pacote .lp-pac-pix,.tem-pacote .fechamento .linha-confianca{display:none}
/* com consultas guardadas a lista do que vem (com o nome sujo) continua; do pacote fica só a linha do nome sujo (+ R$ 14,90) */
.tem-pacote .lp-pac > :not(.lp-pac-sujo){display:none}

/* barra fixa: "acaba em 14:59" ao lado do preço, numa linha só */
body[data-rota="cpf"] .barra-preco small{white-space:nowrap}
.barra-relogio{font-size:12px;color:var(--dor)}