/* ==========================================================================
   CTA + FORMULÁRIO — foto de fundo, benefícios e card de captura
   Prefixo: lead-
   Tokens usados: --fg --fg-2 --fg-muted --rule --rule-2 --accent
                  --dark --dark-rgb --display --sans --nav-h
   Primitiva usada: .glass (core/base.css)
   ========================================================================== */

.lead-sec{position:relative;overflow:hidden}

/* A foto entra em 20% de opacidade e ainda leva um gradiente por cima. Ela
   é textura, não assunto: o que precisa ser lido aqui é o formulário. */
.lead-media{position:absolute;inset:0;z-index:0}
.lead-media img{width:100%;height:100%;object-fit:cover;opacity:.2;filter:grayscale(.5)}
.lead-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,
    rgba(var(--dark-rgb),.94) 0%,
    rgba(var(--dark-rgb),.82) 45%,
    rgba(var(--dark-rgb),.96) 100%);
}
.lead-sec > .wrap{position:relative;z-index:2}

/* O formulário é maior que o texto (1fr contra .85fr): ele é o objetivo da
   seção, não o acompanhamento. */
.lead-grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(36px,6vw,84px);align-items:start;
}

/* O texto acompanha a rolagem do formulário: em telas baixas o formulário é
   mais alto que a tela, e sem o sticky o argumento sai de vista enquanto a
   pessoa preenche. */
.lead-intro{position:sticky;top:calc(var(--nav-h) + 24px)}
.lead-list{margin-top:30px}
.lead-list li{
  font-size:15px;line-height:1.6;color:var(--fg-2);padding:12px 0;
  border-top:1px solid var(--rule);display:flex;gap:11px;align-items:flex-start;
}
.lead-list li::before{
  content:"";flex:0 0 auto;width:5px;height:5px;margin-top:8px;
  border-radius:50%;background:var(--accent);
}

/* ---- o card ---- */
.lead-form{position:relative;overflow:hidden;border-radius:16px;padding:clamp(24px,3.6vw,40px);--glass-blur:26px}
.lead-form > *{position:relative;z-index:1}
.lead-title{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.025em;color:var(--fg)}
.lead-req{font-size:12.5px;color:var(--fg-muted);margin-top:8px}

/* gap 0 na vertical: o respiro entre linhas vem do padding do próprio campo,
   senão a régua de baixo de um campo fica longe demais do seguinte. */
.lead-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;margin-top:12px}

/* ---- campo ----
   Régua embaixo em vez de caixa: menos peso visual dentro de um card que já
   é de vidro. O select customizado usa este mesmo wrapper. */
.lead-field{border-bottom:1px solid var(--rule-2);padding:16px 0 12px;transition:border-color .25s}
.lead-field.is-full{grid-column:1/-1}
.lead-field:focus-within{border-color:var(--accent)}
.lead-field label{
  display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-muted);margin-bottom:8px;
}
.lead-field input{
  width:100%;background:none;border:none;outline:none;padding:0;
  font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.4;color:var(--fg);
}
.lead-field input::placeholder{color:var(--fg-muted);opacity:.7}

.lead-submit{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:28px}
.lead-note{font-size:11.5px;line-height:1.7;color:var(--fg-muted);max-width:30ch}

.lead-ok{
  display:none;margin-top:20px;padding:16px 18px;border-radius:10px;
  border:1px solid var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  font-size:14px;color:var(--accent);
}
.lead-ok.is-on{display:block}

@media(max-width:900px){
  .lead-grid{grid-template-columns:1fr;gap:40px}
  .lead-intro{position:static}
  .lead-fields{grid-template-columns:1fr}
  .lead-field.is-full{grid-column:auto}
}