/* / (home). Só o que é desta página: a disposição das seções e a prateleira de consultas.
   Todo componente (botão, campo, cartão, relatório, Pix, selos, FAQ...) está no v2.css. */

/* herói: título + preço + o cartão do telefone antes de rolar (390x844).
   Celular: texto > cartão. Desktop: texto e atalhos à esquerda, cartão fixo à direita. */
.home-hero{padding:18px 0 8px}
.home-hero-grid{display:grid;gap:18px;grid-template-areas:"txt" "form"}
.home-hero-txt{grid-area:txt;display:flex;flex-direction:column;gap:12px}
.home-hero-sub{font-size:17px;line-height:1.5}
.home-hero-preco{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.home-hero-lado{grid-area:form;min-width:0}

/* relógio da oferta do telefone (o lp.js escreve mm:ss em .js-relogio): pill de alerta, número em mono */
.oferta-relogio{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}
.oferta-relogio svg{width:16px;height:16px;flex:none}
.oferta-relogio .js-relogio,.barra-relogio,.faixa .js-relogio,.produto-pe .js-relogio{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:0}
.oferta-relogio .js-relogio{font-size:16px}
.barra-relogio{font-size:12px;color:var(--alerta)}
.home-atalhos{grid-area:atalhos}
/* celular: o botão Consultar precisa caber na primeira tela, inclusive no navegador do Instagram (~675px úteis) */
/* a frase do "de graça antes de pagar" fica em todo celular; o "Pix ou cartão" já está na microlinha do cartão */
@media (max-width:899px){
  .home-hero-pix{display:none}
  /* o relógio já está na faixa presa no topo: no herói do celular sai, para o botão continuar na primeira tela */
  .home-hero .oferta-relogio{display:none}
  /* selos em grade: Mercado Pago | LGPD, depois CNPJ e Resultado na largura toda */
  .home-hero .selos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .home-hero .selos li{justify-content:center}
  .home-hero .selos li:nth-child(n+3){grid-column:1 / -1}
  /* dor: o botão da cena na largura toda, como os outros */
  .home-dor .cena .btn{align-self:stretch;width:100%}
}
@media (max-width:359px){
  .home-hero .selos{grid-template-columns:1fr}
}
/* celular estreito (menos de 390px): "5 consultas de R$ 67,00 por R$ 47,00" quebrava em 2 linhas e empurrava o botão para
   fora da primeira tela. No herói fica "5 consultas por R$ 47,00"; o "de R$ 67,00" continua na faixa vermelha do topo. */
@media (max-width:389px){
  .home-hero .preco .js-oferta-txt{display:none !important}
}
/* tela baixa (navegador do Instagram, ~675px úteis): só a frase do "de graça", menor, e o herói mais justo */
@media (max-width:899px) and (max-height:760px){
  .home-hero{padding-top:10px}
  .home-hero-grid{gap:12px}
  .home-hero-txt{gap:8px}
  .home-hero .form-lp{gap:12px}
  .home-hero-sub{font-size:14px;line-height:1.4}
  .home-hero-sub-1{display:none}
  /* o título agora tem 4 linhas (a metade quente começa em linha nova): menor aqui, para o botão sobrar na tela */
  .home-hero h1{font-size:26px}
  .home-hero .preco b{font-size:30px}
}
@media (max-width:899px) and (max-height:660px){
  .home-hero-sub{display:none}
}
@media (min-width:900px){
  .home-hero{padding:48px 0 56px}
  .home-hero-grid{grid-template-columns:minmax(0,1fr) 440px;grid-template-rows:auto 1fr;grid-template-areas:"txt form" "atalhos form";column-gap:64px;row-gap:40px;align-items:start}
  .home-hero-txt{gap:20px;padding-top:8px}
  .home-hero-sub{font-size:18px;max-width:600px}
  .home-hero-lado{position:sticky;top:24px}
  /* 4 selos em 2 linhas de 2 (com o CNPJ inteiro, a ordem do HTML quebrava em 3 linhas) */
  .home-hero .selos{display:grid;grid-template-columns:auto auto;justify-content:center}
  .home-hero .selos li:nth-child(1){order:1}
  .home-hero .selos li:nth-child(4){order:2}
  .home-hero .selos li:nth-child(2){order:3}
  .home-hero .selos li:nth-child(3){order:4}
}
/* atalhos do desktop: CPF e veículo sem rolar, para quem não veio pelo telefone */
.home-atalhos{display:flex;flex-direction:column;gap:12px;max-width:520px}
.home-atalhos ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--linha)}
.home-atalhos li{border-bottom:1px solid var(--linha)}
.home-atalhos a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:8px 0;color:var(--marca);font-size:16px;font-weight:600;text-decoration:none}
.home-atalhos a:hover{text-decoration:underline}
.home-atalhos a span{flex:1 1 auto}
.home-atalhos b{color:var(--tinta);font-weight:800;font-variant-numeric:tabular-nums}
.home-atalhos svg{flex:none;width:18px;height:18px}
/* do clique em diante: só o cartão, centralizado */
body.ck-aberto .home-hero{padding:16px 0 40px}
body.ck-aberto .home-hero-grid{grid-template-columns:minmax(0,520px);grid-template-areas:"form";justify-content:center}
body.ck-aberto .home-hero-lado{position:static}

/* dor: um cartão de cena logo depois do herói (componente .cena do v2.css) */
.home-dor{padding-block:32px 8px}
.home-dor .cena h2{font-size:20px;line-height:1.3;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
.home-dor .cena p{font-size:16px}
@media (min-width:900px){
  .home-dor{padding-block:8px 0}
  .home-dor .cena{max-width:820px;margin-inline:auto;padding:28px 32px}
  .home-dor .cena h2{font-size:24px}
}

/* vitrine: as duas consultas completas (carro-chefe, borda azul-marinho) + "Outras consultas" em lista */
.ofertas{display:grid;gap:16px}
.produto{display:flex;flex-direction:column;gap:12px}
.produto h3{font-size:22px;line-height:1.2;font-weight:800;letter-spacing:-.02em}
.produto.oferta{border:2px solid var(--marca)}
.produto.oferta h3{font-size:24px}
.produto.oferta .lista-check{gap:10px}
.produto.oferta .lista-check li{font-size:16px;line-height:1.4}
.produto-pe{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:16px;border-top:1px solid var(--linha)}
.produto-pe .lp-mini{text-align:center}
/* pacote de 5 consultas (13/10/2026): o que o preço compra, logo abaixo dele */
.pacote-uso{margin-top:-4px;font-size:15px;line-height:1.45;font-weight:600;color:var(--tinta)}
/* quem já tem consultas guardadas (o lp.js liga body.tem-pacote e troca os preços por "Você tem N consultas guardadas"):
   some o que é da compra de um pacote novo (a 1ª sai na hora, o relógio da oferta, o preço da oferta do CPF) */
body.tem-pacote .pacote-uso,body.tem-pacote .produto-pe .js-oferta-txt,body.tem-pacote .produto-pe .o-oferta,body.tem-pacote .home-atalhos .o-preco{display:none !important}
.produto-lista{margin-top:16px}
@media (min-width:900px){
  /* desktop: as duas ofertas lado a lado, com preço e botão na mesma altura; "Outras consultas" embaixo, lista em 2 colunas */
  .ofertas{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
  .produto{padding:24px}
  .produto.oferta{padding:28px}
  .produto-lista{margin-top:20px}
  .produto-lista .mais{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(6,auto);grid-auto-flow:column;column-gap:48px}
  .produto-lista>.lp-mini{text-align:left}
  /* rótulo, título, lista e preço na mesma altura nos dois cartões, mesmo com a letra miúda do CPF mais longa */
  @supports (grid-template-rows:subgrid){
    .ofertas>.oferta{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:12px;align-content:start}
    .ofertas>.oferta>.produto-pe{margin-top:0;justify-content:flex-start}
  }
}
/* lista "Mais consultas": uma linha por consulta, com preço e seta; a linha inteira é o link */
.mais{list-style:none;margin:0 0 0;padding:0;border-top:1px solid var(--linha)}
.mais li{border-bottom:1px solid var(--linha)}
.mais a{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 0;color:var(--tinta);text-decoration:none;-webkit-tap-highlight-color:transparent}
.mais a span{flex:1 1 auto;min-width:0;font-size:15px;line-height:1.35;font-weight:600}
.mais a b{flex:none;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.mais a b.mais-estado{font-size:13px;font-weight:600;color:var(--tinta-2)}
.mais a svg{flex:none;width:18px;height:18px;color:var(--marca)}
.mais a:hover span{color:var(--marca);text-decoration:underline;text-underline-offset:2px}
.mais a:active{background:var(--fundo)}
.produto-lista>.lp-mini{margin-top:auto;text-align:center}

/* como funciona + exemplo */
.home-exemplo{display:flex;flex-direction:column;gap:24px;margin-top:40px}
.home-exemplo-txt{display:flex;flex-direction:column;gap:16px}
.home-exemplo-frase{font-size:20px;line-height:1.35;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
.home-exemplo-txt .cta{margin-top:4px}
@media (min-width:900px){
  .home-exemplo{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:64px;align-items:center;margin-top:56px}
  .home-exemplo-frase{font-size:24px}
}

/* quem é o Bombei */
.home-quem{display:flex;flex-direction:column;gap:12px}
.home-quem p{font-size:16px}
.home-quem-ok{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--raio);background:var(--ok-claro);color:var(--tinta)}
.home-quem-ok svg{flex:none;width:20px;height:20px;margin-top:2px;color:var(--ok)}
.home-quem-ok b{color:var(--ok-texto)}

/* última chamada (fundo escuro do v2.css): centralizada no celular; no desktop à esquerda */
.fechamento{text-align:center}
.fechamento h2{margin-inline:auto;max-width:640px}
.fechamento h2 .quente{display:block}
.home-fim-preco{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;margin-top:16px}
.home-fim-preco .preco{justify-content:center}
.fechamento .oferta-relogio{background:rgba(255,148,102,.16);color:#FFB08C}
.fechamento .cta{align-items:stretch;margin-top:20px}
.fechamento .lp-mini a{font-weight:700}
@media (min-width:900px){
  .fechamento{text-align:left}
  .fechamento h2{margin-inline:0;max-width:760px}
  .home-fim-preco,.home-fim-preco .preco{justify-content:flex-start}
  .fechamento .cta{align-items:flex-start}
  .fechamento .cta .lp-mini,.fechamento .cta .linha-confianca{text-align:left}
}