/* Sistema Exato — formulário em etapas (uma pergunta por vez)
   ---------------------------------------------------------------------------
   Página autônoma: serve as duas campanhas, as variações de nicho e, depois,
   o site. O que muda entre um uso e outro vem da URL, não do código.
   Depende de css/lp.css apenas pelos tokens de cor, tipografia e .btn — assim
   a paleta continua tendo uma única fonte de verdade.
   ------------------------------------------------------------------------- */

body.form{
  background:#0b2c47;color:#fff;min-height:100vh;
  display:flex;flex-direction:column;overflow-x:hidden}

/* Mesmo fundo do hero da perpétua: profundidade azul + brilho ciano no alto. */
body.form::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(90% 120% at 78% 8%, rgba(97,194,199,.20) 0%, rgba(97,194,199,0) 55%),
    radial-gradient(120% 130% at 10% 15%, #1d6ba6 0%, #14476f 48%, #0b2c47 100%)}
/* O check da marca como marca-d'água — mesmo ativo do hero. */
body.form::after{
  content:'';position:fixed;right:-8%;bottom:-22%;width:58%;height:110%;z-index:0;
  background:url('../img/check-marca.png') right bottom/contain no-repeat;
  opacity:.05;pointer-events:none}

.fw{position:relative;z-index:2;width:min(680px,90vw);margin:0 auto;
  flex:1;display:flex;flex-direction:column;padding:30px 0 40px}

/* ── cabeçalho ──────────────────────────────── */
/* lp.css estiliza o elemento <header> como a barra branca fixa da LP. Aqui ele
   é só uma linha de identificação sobre o fundo escuro — precisa ser desfeito. */
header.fh{position:static;background:none;border:0;backdrop-filter:none;box-shadow:none}
.fh{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}
.fh .marca-placa{margin:0;padding:8px 13px}
.fh img{height:30px;width:auto}
.fh-oferta{font:700 14.5px/1.3 'Montserrat',sans-serif;color:#fff;text-align:right}

/* ── barra de progresso ─────────────────────── */
.barra{display:flex;gap:6px;margin-bottom:34px}
.barra i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.16);
  transition:background .35s ease}
.barra i.feita{background:var(--laranja)}
.barra i.agora{background:#fff}

/* ── palco das perguntas ────────────────────── */
.palco{flex:1}

.q{margin-bottom:52px}
.q.proxima{opacity:.34;pointer-events:none;user-select:none}

.voltar{background:none;border:0;color:rgba(255,255,255,.72);cursor:pointer;
  font-size:21px;line-height:1;padding:0 0 12px;display:block;transition:.18s}
.voltar:hover{color:#fff;transform:translateX(-3px)}

.q h2{font:700 21px/1.4 'Montserrat',sans-serif;color:#fff;margin:0 0 6px}
.q h2 span{color:rgba(255,255,255,.55);margin-right:5px}
.q .dica{font-size:15px;color:#b9d0e2;margin:0 0 20px;max-width:52ch}
.q.ativa{animation:entra .34s cubic-bezier(.22,.8,.3,1) both}
@keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── campos ─────────────────────────────────── */
.q input,.q select{
  width:100%;font:400 16.5px/1.4 'Open Sans',sans-serif;color:#fff;
  background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.26);
  border-radius:var(--raio);padding:15px 17px;outline:0;transition:.18s;
  -webkit-appearance:none;appearance:none}
.q input::placeholder{color:rgba(255,255,255,.42)}
.q input:focus,.q select:focus{border-color:#fff;background:rgba(255,255,255,.10);
  box-shadow:0 0 0 4px rgba(255,255,255,.10)}
.q select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M6 8 0 0h12z' opacity='.7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:42px}
.q select option{background:#123c5e;color:#fff}

/* Cidade e estado empilhados e rotulados. Lado a lado, o estado virava um
   apêndice de 148px que ninguém conferia. */
.linha2{display:grid;gap:15px}
.rotulo{display:block;font:600 13px/1.3 'Montserrat',sans-serif;
  letter-spacing:.03em;color:#a8c5dc;margin-bottom:7px}

/* ── opções (radio) ─────────────────────────── */
.ops{display:flex;flex-direction:column;gap:9px}
.op{display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;
  background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.18);
  border-radius:var(--raio);padding:14px 17px;transition:.16s;
  font:400 16px/1.4 'Open Sans',sans-serif;color:#fff}
.op:hover{border-color:var(--lima);background:rgba(169,207,70,.10)}
.op i{flex:none;width:19px;height:19px;border-radius:50%;
  border:2px solid rgba(255,255,255,.42);transition:.16s}
.op:hover i{border-color:var(--lima)}
.op.on{border-color:var(--lima);background:rgba(169,207,70,.14)}
.op.on i{border-color:var(--lima);background:var(--lima);box-shadow:inset 0 0 0 3.5px #14476f}

/* ── ação ───────────────────────────────────── */
.acao{margin-top:22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.acao .btn{padding:14px 26px}
.acao .btn[disabled]{opacity:.42;cursor:not-allowed;box-shadow:none;transform:none}
.pular{background:none;border:0;color:#9fc0da;cursor:pointer;font:600 14.5px/1 'Montserrat',sans-serif;
  text-decoration:underline;text-underline-offset:3px;padding:0}
.pular:hover{color:#fff}

.erro{color:#ffb4a8;font-size:14.5px;margin-top:9px;display:none}
.erro.on{display:block}

/* ── âncora de preço ────────────────────────── */
.ancora-f{background:rgba(255,255,255,.07);border-left:3px solid var(--lima);
  border-radius:0 var(--raio) var(--raio) 0;padding:15px 18px;margin-bottom:20px;
  font-size:15.5px;line-height:1.6;color:#dbe8f2;max-width:56ch}
.ancora-f b{color:#fff}

/* ── rodapé ─────────────────────────────────── */
.fl{position:relative;z-index:2;font-size:12.5px;line-height:1.6;color:#89a8c1;
  margin-top:26px;max-width:60ch}
.fl a{color:#b9d0e2;text-decoration:underline;text-underline-offset:2px}

/* ── tela de processamento ──────────────────── */
.proc{position:fixed;inset:0;z-index:90;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:20px;
  background:#0b2c47}
.proc.on{display:flex}
.proc::before{content:'';position:absolute;inset:0;
  background:radial-gradient(120% 130% at 10% 15%, #1d6ba6 0%, #14476f 48%, #0b2c47 100%)}
.proc .miolo{position:relative;z-index:2;text-align:center}
.roda{width:52px;height:52px;margin:0 auto 18px;border-radius:50%;
  border:3px solid rgba(255,255,255,.16);border-top-color:var(--lima);
  border-right-color:var(--ciano);animation:gira .85s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.proc p{font:600 15.5px/1.5 'Montserrat',sans-serif;color:#dbe8f2}

@media(max-width:600px){
  .fw{width:90vw;padding:22px 0 34px}
  .fh img{height:25px}
  .fh .marca-placa{padding:6px 10px}
  .fh-oferta{font-size:12.5px;max-width:47%}
  .barra{margin-bottom:26px}
  .q{margin-bottom:40px}
  .q h2{font-size:19px}
  .linha2{gap:13px}
  .acao{gap:14px}
  .acao .btn{width:100%}
  .pular{width:100%;text-align:center}
}