/* /veiculo (consulta pré-compra pela placa). Só o que é desta página: disposição das seções, relógio da oferta,
   campo da placa. Todo componente (botão, campo, cartão, relatório, selos, faixa...) está no v2.css. */

/* faixa de oferta: relógio em mono; quando a oferta termina (veiculo.js liga .encerrada) vira faixa neutra */
.faixa-alerta .js-relogio{font-variant-numeric:tabular-nums}
.faixa-alerta.encerrada{background:var(--marca-clara);color:var(--tinta);border-bottom-color:var(--linha)}

/* relógio da oferta (pill de alerta, mono): herói, pilha, fechamento */
.oferta-relogio{align-self:flex-start;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{font-family:var(--mono);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:0}
.barra-relogio{font-size:12px;color:var(--alerta)}

/* campo da placa: caixa alta, espaçado como na placa */
.campo-placa{text-transform:uppercase;letter-spacing:.06em}
.campo-placa::placeholder{text-transform:uppercase}

/* herói: no celular, preço + relógio + formulário antes de rolar; no desktop, texto à esquerda e cartão fixo à direita */
.hero{padding:18px 0 8px}
.hero-grid{display:grid;gap:18px}
.hero-txt{display:flex;flex-direction:column;gap:12px}
.hero-sub{font-size:17px;line-height:1.5}
.hero-preco{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.hero-preco .oferta-relogio{align-self:center}
.hero-lado{display:flex;flex-direction:column;min-width:0}
.form-lp .bump small{font-size:13px}
/* celular: o botão Consultar precisa caber na primeira tela, inclusive no navegador do Instagram (~675px úteis).
   O que vem na consulta está no H1, na lista "O que vem" e no exemplo, logo abaixo. */
.hero-sub-cel{display:none}
/* selos do cartão em grade, todos do mesmo tamanho (2x2 no desktop) */
.form-lp .selos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.form-lp .selos li{justify-content:center}
@media (max-width:900px){
  .hero-sub{display:none}
  .hero-sub-cel{display:block;font-size:15px;line-height:1.45;color:var(--tinta-2)}
  /* o relógio da oferta já está na faixa do topo: no herói do celular sai, para a linha curta caber sem tirar o botão da primeira tela */
  .hero .oferta-relogio{display:none}
  /* celular: nenhum selo cabe em meia linha a 390px sem estourar: um por linha */
  .form-lp .selos{grid-template-columns:minmax(0,1fr)}
  .hero h1{font-size:28px}
  /* laterais do cartão iguais às da /telefone (padding do .cartao no v2.css): só o espaço entre os itens aperta */
  .form-lp{gap:14px}
  .form-lp .bump{padding:10px 12px}
}
/* tela curta (navegador do Instagram ~675px): o relógio fica só na faixa do topo e o cartão aperta os espaços */
@media (max-width:900px) and (max-height:760px){
  .form-lp .bump small{display:none}
  .hero{padding-top:12px}
  .hero-grid{gap:12px}
  .hero-txt{gap:8px}
  .hero-sub-cel{display:none}
  .form-lp{gap:12px;padding-block:14px}
}
/* abaixo de 660px o v2.css tira a faixa: aqui ela volta numa linha só, com o relógio (o preço já está ao lado do H1) */
@media (max-width:900px) and (max-height:659px){
  .faixa-alerta{display:block;min-height:0;padding-block:7px}
  .faixa-alerta #faixa-txt,.faixa-alerta .faixa-sep{display:none}
  .faixa-alerta.encerrada{display:none}
  .hero h1{font-size:25px}
  .form-lp .campo>label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .form-lp .passos li{gap:4px}
}
@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-sub{font-size:18px;max-width:600px}
  .hero-lado{position:sticky;top:24px}
  .hero-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;margin-top:12px;padding-top:24px;border-top:1px solid var(--linha);max-width:640px}
  .hero-lista li{font-size:15px}
}

/* cenas de dor */
.fecho{margin-top:28px;font-size:20px;line-height:1.35;font-weight:700;letter-spacing:-.01em;text-wrap:balance}

/* o que vem + exemplo + pilha: no celular texto > exemplo > pilha; no desktop em duas colunas */
.vem{display:flex;flex-direction:column;gap:32px}
.vem-texto p{font-size:17px}
.relatorio-linha dd.atencao{color:var(--dor)}
.pilha .preco{margin-top:2px}
/* "Entrar" do cartão: área de toque de 44px sem mudar o desenho da linha */
.form-lp .lp-mini a{display:inline-block;padding:12px 4px;margin:-12px -4px}
@media (min-width:901px){
  .vem{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:64px;align-items:start}
  .vem-texto p{font-size:16px}
  /* a coluna do texto acompanha o exemplo, com o botão no fim */
  .vem-texto{position:sticky;top:24px}
  .vem-cta{align-self:flex-start;margin-top:8px}
}

/* como funciona + quem recebe o Pix */
.quem-recebe{margin-top:32px;display:flex;flex-direction:column;gap:8px}
.quem-recebe p{font-size:16px}
@media (min-width:901px){.quem-recebe{max-width:760px}}

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

/* barra fixa: relógio ao lado do preço */
.barra-preco small{white-space:nowrap}