/* ==========================================================
   LEAD GATE — captura os dados do visitante antes de abrir o WhatsApp
   Componente compartilhado pelas 4 páginas. Herda as variáveis de tema
   (--ink, --champagne, --display…) já definidas no :root de cada página.
   ========================================================== */

.lg-overlay{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem, 4vw, 2rem);
  background:rgba(6,9,12,.78);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; visibility:hidden;
  transition:opacity 320ms var(--ease, ease), visibility 320ms;
}
.lg-overlay.is-open{ opacity:1; visibility:visible; }

.lg-card{
  position:relative;
  width:min(100%, 460px);
  max-height:calc(100dvh - 2rem);
  overflow-y:auto;
  background:linear-gradient(168deg, var(--ink-3, #151D27), var(--ink, #0B0F14) 72%);
  border:1px solid var(--line, rgba(201,169,110,.20));
  border-radius:var(--radius, 2px);
  padding:clamp(1.6rem, 4vw, 2.2rem);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  transform:translateY(18px) scale(.985);
  transition:transform 420ms var(--ease-out, ease);
}
.lg-overlay.is-open .lg-card{ transform:none; }

/* cantos em champagne, no mesmo idioma visual dos quadros do site */
.lg-card::before, .lg-card::after{
  content:""; position:absolute; width:18px; height:18px;
  border:1.5px solid var(--champagne, #C9A96E); opacity:.6; pointer-events:none;
}
.lg-card::before{ top:10px; left:10px; border-width:1.5px 0 0 1.5px; }
.lg-card::after{ bottom:10px; right:10px; border-width:0 1.5px 1.5px 0; }

.lg-close{
  position:absolute; top:.7rem; right:.7rem;
  width:38px; height:38px; display:grid; place-items:center;
  background:none; border:0; cursor:pointer; color:var(--muted, #9BA4AE);
  font-size:1.5rem; line-height:1; border-radius:50%;
  transition:color var(--t-hover, 320ms) var(--ease, ease), background var(--t-hover, 320ms) var(--ease, ease);
}
.lg-close:hover{ color:var(--text, #EAE7E0); background:rgba(234,231,224,.06); }

.lg-eyebrow{
  font-size:.62rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase;
  color:var(--champagne, #C9A96E); margin-bottom:.7rem;
}
.lg-title{
  font-family:var(--display, sans-serif); font-weight:700;
  font-size:clamp(1.32rem, 3.6vw, 1.62rem); line-height:1.18;
  color:var(--text, #EAE7E0); margin-bottom:.6rem;
}
.lg-sub{
  font-size:.88rem; line-height:1.5; color:var(--muted, #9BA4AE);
  margin-bottom:1.1rem;
}
/* assunto herdado do CTA clicado */
.lg-topic{
  display:none; margin-bottom:1.1rem; padding:.55rem .85rem;
  border:1px solid var(--line, rgba(201,169,110,.20)); border-radius:100px;
  font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--champagne, #C9A96E);
}
.lg-topic.is-on{ display:inline-block; }

.lg-field{ margin-bottom:.9rem; }
.lg-field label{
  display:block; font-size:.68rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted, #9BA4AE); margin-bottom:.4rem;
}
.lg-field input{
  width:100%; padding:.8rem .9rem;
  background:rgba(11,15,20,.6);
  border:1px solid var(--line-soft, rgba(234,231,224,.08));
  border-radius:var(--radius, 2px);
  color:var(--text, #EAE7E0); font-family:var(--sans, sans-serif); font-size:.95rem;
  transition:border-color var(--t-hover, 320ms) var(--ease, ease);
}
.lg-field input::placeholder{ color:var(--muted-dark, #5C6672); }
.lg-field input:focus{ outline:none; border-color:var(--champagne, #C9A96E); }
.lg-field input[aria-invalid="true"]{ border-color:#C2564B; }
.lg-error{
  display:none; margin-top:.35rem; font-size:.74rem; color:#E08C84;
}
.lg-error.is-on{ display:block; }

.lg-submit{
  width:100%; margin-top:.5rem; padding:.95rem 1.2rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  background:var(--champagne, #C9A96E); color:#141A21;
  border:0; border-radius:var(--radius, 2px); cursor:pointer;
  font-family:var(--sans, sans-serif); font-size:.78rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  transition:background var(--t-hover, 320ms) var(--ease, ease), opacity var(--t-hover, 320ms) var(--ease, ease);
}
.lg-submit:hover{ background:var(--champagne-bright, #E2C795); }
.lg-submit:disabled{ opacity:.6; cursor:default; }
.lg-submit svg{ flex-shrink:0; }

.lg-note{
  margin-top:.9rem; font-size:.72rem; line-height:1.45; color:var(--muted-dark, #5C6672);
}
.lg-note a{ color:var(--muted, #9BA4AE); text-decoration:underline; }

/* No mobile o card vira uma folha colada à base — mais confortável para o polegar */
@media (max-width:560px){
  .lg-overlay{ padding:0; align-items:flex-end; }
  .lg-card{
    width:100%; max-height:92dvh;
    border-radius:var(--radius, 2px) var(--radius, 2px) 0 0;
    border-left:0; border-right:0; border-bottom:0;
    padding:1.6rem 1.25rem calc(1.6rem + env(safe-area-inset-bottom));
    transform:translateY(100%);
  }
  .lg-overlay.is-open .lg-card{ transform:none; }
}

@media (prefers-reduced-motion: reduce){
  .lg-overlay, .lg-card{ transition:none; }
}

/* impede o fundo de rolar enquanto o modal está aberto */
body.lg-locked{ overflow:hidden; }
