/* ============================================================================
   DRIVE7 · FORMULÁRIOS PÚBLICOS DE LEAD (CASA / PARCEIRO ACADÊMICO) — CANDIDATO v2.1
   ----------------------------------------------------------------------------
   Layout COMPARTILHADO das duas páginas candidatas (casas.html / parceiros.html).
   Agnóstico de marca: nenhuma cor literal aqui — tudo vem de var(--d7-*)/var(--accent)
   de brand-tokens.css (assets autênticos do baseline v2.0). Reusa a mesma escala e
   os mesmos componentes de regional.css (subconjunto mínimo + campos de formulário),
   sem redesenhar a marca.
   ============================================================================ */

:root{
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px;
  --wrap:1120px; --form-w:640px; --radius:14px; --radius-sm:10px; --prose-narrow:520px;
  --t:cubic-bezier(.4,0,.2,1);
  /* Movimento — espelha os tokens canonicos da Drive7 (drive7-motion-ui). A landing
     nao carrega os --mo-* do /admin, entao o wizard os declara aqui (so no seu lar).
     Freia ao chegar (entrada), acelera ao sair, overshoot minimo na confirmacao. */
  --mo-tap:120ms; --mo-fast:180ms; --mo-base:320ms; --mo-slow:520ms;
  --mo-brake:cubic-bezier(.16,.84,.44,1);
  --mo-launch:cubic-bezier(.5,0,.75,0);
  --mo-settle:cubic-bezier(.34,1.28,.64,1);
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:var(--bg);color:var(--fg);font-family:var(--d7-font-body)}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}

h1,h2,h3{margin:0;line-height:1.04;letter-spacing:-.02em;font-family:var(--d7-font-display)}
.h-xl{font-size:clamp(32px,8vw,60px)}
.h-md{font-size:clamp(22px,4.6vw,32px)}
p{margin:0}
.lead{font-size:clamp(16px,4.2vw,20px);line-height:1.5;max-width:var(--prose-narrow)}
.muted{color:var(--d7-muted)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
@media(min-width:768px){.wrap{padding-inline:32px}}

/* ---- header / footer (idênticos a regional) ------------------------------- */
.hdr{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--d7-line)}
.hdr-in{display:flex;align-items:center;gap:var(--s3);min-height:60px;padding-block:var(--s2)}
.hdr-in>a{flex:0 0 auto}
@media (max-width:379px){.d7-logo--header{height:31px}}
.ftr{border-top:1px solid var(--d7-line);margin-top:var(--s8)}
.ftr-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding-block:var(--s6);flex-wrap:wrap}
.ftr-in nav a{color:var(--d7-muted);text-decoration:none;font-size:14px}
.ftr-in nav a:hover{color:var(--fg)}

/* ---- hero ------------------------------------------------------------------ */
.lead-page{padding-block:var(--s6) var(--s7)}
.lead-hero{padding-block:var(--s7) var(--s5);max-width:var(--prose-narrow)}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--accent);margin-bottom:var(--s3)}
.lead-hero h1{margin-top:var(--s2)}
.lead-hero h1 em{font-style:normal;color:var(--accent)}
.lead-hero .lead{margin-top:var(--s4)}

/* ---- formulário ------------------------------------------------------------ */
.lead-form{max-width:var(--form-w);margin-top:var(--s6);
  display:flex;flex-direction:column;gap:var(--s5)}
.field{display:flex;flex-direction:column;gap:var(--s2)}
.field-row{display:grid;grid-template-columns:1fr;gap:var(--s4)}
@media (min-width:560px){.field-row{grid-template-columns:120px 1fr}}
.field label{font-size:14px;font-weight:700;letter-spacing:.01em}
.field .opt{color:var(--d7-muted);font-weight:400}
.field .hint{font-size:13px;color:var(--d7-muted)}
.field input,.field select,.field textarea{
  width:100%;min-height:52px;padding:14px 16px;font:inherit;font-size:16px;
  color:var(--fg);background:var(--d7-surface);border:1.5px solid var(--d7-line);
  border-radius:var(--radius-sm);transition:border-color .16s var(--t),box-shadow .16s var(--t)}
.field textarea{min-height:110px;resize:vertical;line-height:1.5}
.field select{appearance:none;cursor:pointer}
/* consentimento: checkbox + texto numa linha (sobrepõe a coluna padrão de .field
   e reseta o input base full-width para não esticar o checkbox) */
.field--consent{gap:var(--s1,8px)}
.consent-label{display:flex;align-items:flex-start;gap:12px;font-size:14px;
  font-weight:400;line-height:1.45;cursor:pointer}
.field--consent input[type=checkbox]{flex:0 0 auto;width:1.15rem;height:1.15rem;
  min-height:0;padding:0;margin:.15em 0 0;accent-color:var(--accent)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--d7-red-soft)}
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea{border-color:var(--accent)}
.field-error{font-size:13px;font-weight:700;color:var(--accent);
  display:flex;align-items:center;gap:6px}
.field-error::before{content:"!";display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:999px;background:var(--d7-red-dark);color:var(--fg);
  font-size:11px;font-weight:800;flex:0 0 auto}

/* honeypot anti-spam: fora da tela, nunca visível ao humano */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---- botões (adaptado de regional/style.css) ------------------------------ */
.form-actions{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;margin-top:var(--s2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;
  padding:14px 26px;border:0;border-radius:var(--radius-sm);font-weight:700;font-size:16px;
  text-decoration:none;cursor:pointer;
  transition:background var(--mo-fast) var(--mo-brake),box-shadow var(--mo-fast) var(--mo-brake),transform var(--mo-tap) var(--mo-brake)}
.btn:focus-visible{outline:3px solid var(--fg);outline-offset:3px}
/* Resposta imediata ao toque (apple/emil): a interface confirma o press na hora. */
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.6;cursor:progress}
.btn[disabled]:active{transform:none}
.btn--primary{background:var(--d7-red-dark);color:var(--fg)}
.btn--primary:hover{background:color-mix(in srgb,var(--d7-red-dark) 85%,var(--d7-black))}
.btn--ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--d7-line)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}

/* ---- estados (aria-live): sucesso / erro / indisponível ------------------- */
.form-status{margin-top:var(--s4)}
.status-card{background:var(--d7-surface);border:1px solid var(--d7-line);
  border-radius:var(--radius);padding:var(--s6) var(--s5);max-width:var(--form-w)}
.status-card.is-ok{border-color:var(--accent)}
.status-card .status-icon{margin:0 0 var(--s4)}
.status-card h2{font-size:clamp(20px,4vw,26px)}
.status-card p{margin-top:var(--s3);color:var(--d7-muted);max-width:44ch}
.status-card .btn{margin-top:var(--s5)}
.badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg);background:var(--d7-red-soft);
  border:1px solid var(--accent);border-radius:999px;padding:4px 12px;margin-bottom:var(--s4)}

/* ---- estado inicial (JS ausente/lento): mensagem honesta ------------------ */
.pending{background:var(--d7-surface);border:1px solid var(--d7-line);border-radius:var(--radius);
  padding:var(--s7) var(--s5);text-align:center;margin-block:var(--s6)}

/* ---- hero: linha do CTA do app (motorista) -------------------------------- */
.lead-hero-cta{margin-top:var(--s5)}

/* ============================================================================
   WIZARD MULTI-STEP (§17) — progresso, passos, resumo, sucesso, handoff WA.
   Agnóstico de marca: só var(--d7-*)/var(--accent)/var(--fg)/var(--bg). Verde é
   PROIBIDO; o estado do progresso não é portado por cor sozinha (posição + rótulo
   do passo + região viva "Etapa X de N" + aria-current carregam o significado).
   ============================================================================ */
.wizard{max-width:var(--form-w);display:flex;flex-direction:column;gap:var(--s5)}

/* ---- indicador de progresso ----------------------------------------------- */
.wizard-progress{margin-bottom:var(--s2);display:flex;flex-direction:column;gap:var(--s3)}
.wizard-progress-count{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--d7-muted);margin:0}
.wizard-progress-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:var(--s2) var(--s4);align-items:center}
.wizard-progress-item{display:inline-flex;align-items:center;gap:var(--s2);
  color:var(--d7-muted);font-size:13px;font-weight:700}
.wizard-progress-dot{display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;flex:0 0 auto;border-radius:999px;font-size:13px;font-weight:800;
  color:var(--fg);background:var(--d7-surface);border:1.5px solid var(--d7-line);
  transition:transform var(--mo-fast) var(--mo-settle),background var(--mo-fast) var(--mo-brake),
    border-color var(--mo-fast) var(--mo-brake),box-shadow var(--mo-fast) var(--mo-brake)}
.wizard-progress-item[data-state="done"] .wizard-progress-dot,
.wizard-progress-item[data-state="current"] .wizard-progress-dot{
  background:var(--d7-red-dark);border-color:var(--accent);color:var(--fg)}
.wizard-progress-item[data-state="current"] .wizard-progress-dot{
  box-shadow:0 0 0 3px var(--d7-red-soft);transform:scale(1.06)}
.wizard-progress-item[data-state="current"]{color:var(--fg)}
.wizard-progress-item[data-state="current"] .wizard-progress-label{color:var(--fg)}
@media (max-width:559px){.wizard-progress-label{position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}
/* trilho preenchido: "quanto falta" de relance — decorativo (aria-hidden). A cor
   nao e o unico portador (contagem + aria-current + dots carregam o significado). */
.wizard-progress-track{height:3px;border-radius:999px;background:var(--d7-line);overflow:hidden}
.wizard-progress-fill{display:block;height:100%;border-radius:999px;background:var(--accent);
  transform:scaleX(var(--wz-pct,0));transform-origin:left center;
  transition:transform var(--mo-slow) var(--mo-brake)}

/* ---- passo (fieldset) ------------------------------------------------------ */
.wizard-step{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:var(--s5)}
/* `display:contents` dissolve a caixa do <legend> — o <h2> do titulo vira item de
   flex DE VERDADE, em todo navegador. Sem isto o <legend> nao entra no `gap` do
   flex no Chrome, e o margin-top negativo da descricao (que tensiona o par
   titulo+descricao) puxava a descricao POR CIMA do titulo (sobreposicao de 12px).
   O <legend> permanece no DOM e continua nomeando o grupo (fieldset) — a11y
   intacta; o passo tambem e anunciado pela regiao viva "Passo X de N". */
.wizard-step-legend{display:contents}
.wizard-step-title{font-size:clamp(20px,4.4vw,28px);letter-spacing:-.02em;scroll-margin-top:84px}
.wizard-step-title:focus-visible{outline:3px solid var(--fg);outline-offset:4px;border-radius:4px}
.wizard-step-desc{margin-top:calc(-1 * var(--s3));font-size:15px}

/* ---- ações (voltar / avançar / enviar) ------------------------------------ */
.wizard-actions{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;margin-top:var(--s2)}
.wizard-actions .wizard-next{margin-inline-start:auto}
.wizard-back[hidden]{display:none}
/* Seta direcional do "Avançar": microinteracao com SIGNIFICADO (isso te leva
   adiante). Some no ultimo passo (envia, nao avanca) e durante o envio. */
.wizard-next::after{content:"\2192";display:inline-block;transition:transform var(--mo-fast) var(--mo-brake)}
.wizard-next:hover::after{transform:translateX(3px)}
.wizard-next--submit::after,.wizard-next[aria-busy="true"]::after{content:none}
/* Estado de envio: spinner + texto "Enviando…" + disabled (nunca cor sozinha). */
.wizard-next[aria-busy="true"]::before{content:"";width:16px;height:16px;flex:0 0 auto;
  border-radius:999px;border:2px solid var(--d7-red-soft);border-top-color:var(--fg);
  animation:wizard-spin .7s linear infinite}
@keyframes wizard-spin{to{transform:rotate(360deg)}}
@media (max-width:459px){
  .wizard-actions{flex-direction:column-reverse;align-items:stretch}
  .wizard-actions .btn{width:100%}
  .wizard-actions .wizard-next{margin-inline-start:0}
}

/* ---- resumo (passo de confirmação) ---------------------------------------- */
.wizard-summary{background:var(--d7-surface);border:1px solid var(--d7-line);
  border-radius:var(--radius-sm);padding:var(--s4) var(--s5)}
.wizard-summary-title{font-family:var(--d7-font-display);font-size:16px;letter-spacing:.01em;
  margin:0 0 var(--s3)}
.wizard-summary-list{display:grid;grid-template-columns:1fr;gap:var(--s2) var(--s4);margin:0}
@media (min-width:480px){.wizard-summary-list{grid-template-columns:auto 1fr}}
.wizard-summary-list dt{font-size:13px;font-weight:700;color:var(--d7-muted)}
.wizard-summary-list dd{margin:0;font-size:15px;overflow-wrap:anywhere}

/* ---- sucesso: protocolo ---------------------------------------------------- */
.wizard-protocol{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s4)}
.wizard-protocol-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--d7-muted)}
.wizard-protocol-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:15px;font-weight:700;color:var(--fg);background:var(--d7-red-soft);
  border:1px solid var(--accent);border-radius:var(--radius-sm);padding:6px 12px;overflow-wrap:anywhere}

/* ---- sucesso: handoff de WhatsApp ----------------------------------------- */
.wizard-wa{margin-top:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.wizard-wa-lead{color:var(--d7-muted);font-size:15px;max-width:44ch}
.wizard-wa-btn{align-self:flex-start}
.wizard-wa-fallback{font-size:14px;color:var(--d7-muted)}
.wizard-wa-fallback summary{cursor:pointer;font-weight:700;color:var(--fg);min-height:44px;
  display:inline-flex;align-items:center}
.wizard-wa-fallback summary:focus-visible{outline:3px solid var(--fg);outline-offset:3px;border-radius:4px}
.wizard-wa-msg{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--d7-surface);
  border:1px solid var(--d7-line);border-radius:var(--radius-sm);padding:var(--s4);margin-top:var(--s2);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.5}

/* ---- botao "Copiar" (protocolo / mensagem) -------------------------------- */
.wizard-copy-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  min-height:44px;padding:8px 16px;font:inherit;font-size:14px;font-weight:700;
  color:var(--fg);background:transparent;border:1.5px solid var(--d7-line);border-radius:var(--radius-sm);
  cursor:pointer;transition:border-color var(--mo-fast) var(--mo-brake),transform var(--mo-tap) var(--mo-brake)}
.wizard-copy-btn:hover{border-color:var(--accent)}
.wizard-copy-btn:active{transform:scale(.97)}
.wizard-copy-btn:focus-visible{outline:3px solid var(--fg);outline-offset:3px}
.wizard-copy-btn[data-copied="true"]{border-color:var(--accent);animation:wizard-copied var(--mo-fast) var(--mo-settle)}
@keyframes wizard-copied{from{transform:scale(.94)}to{transform:none}}
.wizard-wa-fallback .wizard-copy-btn{margin-top:var(--s3)}

/* ---- sucesso: CTA do app do motorista ------------------------------------- */
.wizard-driverapp{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--d7-line);
  display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start}
.wizard-driverapp-lead{font-weight:700}
.wizard-driverapp-code{font-weight:700}
.wizard-driverapp-note{font-size:13px}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  /* Spinner que nao gira nao informa nada — o texto "Enviando…" + disabled bastam. */
  .wizard-next[aria-busy="true"]::before{display:none}
  /* Estados finais permanecem completos: dot atual destacado, trilho na fracao
     certa (scaleX vem do --wz-pct via style, so a transicao e zerada). */
}