/* ══════════ LEAD FORM (componente compartido MT) ══════════
   Fuente única del formulario de diagnóstico → CRM.
   Lo cargan: la home (index.html) y las landings de producto
   (/agente-voz-ia, /automation-engine, /chatbot-web, /content-engine,
    /essential, /pack, /reservas-whatsapp, /web-engine).
   En la home los tokens (--violet, --font-display…) vienen de styles.css;
   fuera de ella actúan los fallbacks. El chasis del botón lo da .btn en la
   home; en páginas sin styles.css lo aporta el modificador
   .lead-form--standalone. */

.lead-form { background: #fff; border-radius: 26px; padding: clamp(1.6rem, 3vw, 2.6rem);
  box-shadow: 0 30px 80px rgba(36,31,51,.14); display: grid; gap: 1.15rem; }
body[data-theme="night"] .lead-form, body[data-theme="deep"] .lead-form, body[data-theme="dawn"] .lead-form {
  background: #171D30; box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08); }
.lf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.lf-field { display: grid; gap: .45rem; font-family: var(--font-display, inherit); font-weight: 700; font-size: .88rem; }
.lf-field input, .lf-field select {
  font-family: var(--font-display, inherit); font-weight: 500; font-size: .98rem; color: inherit;
  padding: .8em 1em; border-radius: 12px; border: 1.5px solid rgba(36,31,51,.16); background: transparent;
  transition: border-color .16s var(--ease-out, ease), box-shadow .16s var(--ease-out, ease); width: 100%; min-width: 0;
}
body[data-theme="night"] .lf-field input, body[data-theme="night"] .lf-field select,
body[data-theme="deep"] .lf-field input, body[data-theme="deep"] .lf-field select,
body[data-theme="dawn"] .lf-field input, body[data-theme="dawn"] .lf-field select { border-color: rgba(255,255,255,.18); }
.lf-field select option { color: #241F33; }
.lf-field input:focus, .lf-field select:focus { outline: none; border-color: var(--violet-bright, #7C3AED); box-shadow: 0 0 0 4px rgba(124,58,237,.14); }
.lf-phone { display: flex; gap: 8px; }
.lf-phone select { flex: 0 0 auto; max-width: 46%; }
.lf-call { display: flex; gap: .7em; align-items: flex-start; font-family: var(--font-display, inherit); font-weight: 700; font-size: .92rem; cursor: pointer; }
.lf-call input { width: 19px; height: 19px; margin-top: .15em; accent-color: var(--violet-bright, #7C3AED); flex: 0 0 auto; }
.lf-submit { justify-content: center; width: 100%; background: var(--violet, #6D28D9); }
body[data-theme="day"] .lf-submit { color: #fff; }
.lf-submit:hover { box-shadow: 0 14px 34px rgba(109,40,217,.35); }
.lf-msg { font-family: var(--font-display, inherit); font-weight: 700; font-size: .95rem; }
.lf-msg--ok { color: #0B7A4B; }
body[data-theme="night"] .lf-msg--ok, body[data-theme="deep"] .lf-msg--ok, body[data-theme="dawn"] .lf-msg--ok { color: #6EE7B7; }
.lf-msg--err { color: #DC2626; }

@media (max-width: 860px) {
  .lf-row { grid-template-columns: 1fr; }
}

/* ── Standalone: páginas que NO cargan styles.css (landings de producto).
      Aporta lo que allí falta: color de tinta sobre card blanca y el chasis
      del botón (.btn vive en styles.css de la home). ── */
.lead-form--standalone { color: #241F33; max-width: 640px; margin: 0 auto; }
.lead-form--standalone .lf-submit {
  appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center;
  font: inherit; font-weight: 700; font-size: 1.02rem; color: #fff;
  padding: .95em 1.6em; border-radius: 14px;
  transition: box-shadow .16s var(--ease-out, ease), transform .16s var(--ease-out, ease);
}
.lead-form--standalone .lf-submit:disabled { opacity: .6; cursor: wait; }