/* ═══════════════════════════════════════════════════════════════════════════
   AngaritaRad — Estilos de formulario (.lead-form)
   ───────────────────────────────────────────────────────────────────────────
   Las 7 páginas que ya tenían formulario definen estas mismas reglas inline
   en su propio <style>. Este archivo existe para las páginas NUEVAS
   (labs.html y legal.html) y evita volver a copiar el bloque.

   Depende de las custom properties (--canvas-card, --hairline, --primary, …)
   que cada página declara en :root. No define colores propios a propósito:
   así hereda el tema de la página donde se use.

   A futuro se puede migrar las 7 páginas existentes a este archivo y borrar
   el CSS duplicado — no se hizo ahora para no tocar páginas que ya funcionan.
   ═══════════════════════════════════════════════════════════════════════════ */

.lead-form {
  max-width: 480px;
  margin: 0 auto;
  text-align: left;
  background: var(--canvas-card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-xl);
  display: flex;
  flex-direction: column;
  gap: var(--sp-base);
}

.lead-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lead-form label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.lead-form input,
.lead-form textarea,
.lead-form select {
  background: var(--canvas-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--font-sans);
  color: var(--ink);
}

.lead-form input::placeholder,
.lead-form textarea::placeholder {
  color: var(--muted);
}

.lead-form input:focus,
.lead-form textarea:focus,
.lead-form select:focus {
  outline: none;
  border-color: var(--primary);
}

.lead-form textarea {
  resize: vertical;
}

.lead-form button {
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: var(--r-md);
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 150ms;
}

.lead-form button:hover {
  background: var(--primary-active);
}

.lead-form button:disabled:hover {
  background: var(--primary);
}

/* Nota de ayuda debajo de un campo. */
.lead-form__hint {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}