/* ============================================================
   Espinel Abogados — Formularios (home CTA + página de contacto)
   ============================================================ */

.form { display: flex; flex-direction: column; gap: 1.1rem; padding: clamp(1.6rem, 3.5vw, 2.4rem); }
.form__field { display: flex; flex-direction: column; gap: 0.5rem; }
.form__field label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.form input[type="text"],
.form input[type="email"],
.form textarea {
  background: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 0.9rem 1.1rem;
  color: var(--text);
  font-family: var(--font-ui);
  /* >=16px: por debajo, iOS Safari hace auto-zoom al enfocar el campo. */
  font-size: 16px;
  width: 100%;
  transition: border-color var(--t), box-shadow var(--t);
}
.form input::placeholder, .form textarea::placeholder { color: var(--muted-2); }
.form input:focus, .form textarea:focus {
  outline: none;
  border-color: var(--energy);
  box-shadow: 0 0 0 3px var(--energy-soft);
}
.form textarea { resize: vertical; min-height: 110px; }

/* Validación inline (JS): estado de error por campo */
.form__field.is-invalid input,
.form__field.is-invalid textarea {
  border-color: #F2728C;
  box-shadow: 0 0 0 3px rgba(242, 114, 140, 0.16);
}
.form__error {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: #F2A1B0;
}
.form__error::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: #F2728C;
  flex-shrink: 0;
}
.form__submit { margin-top: 0.4rem; width: 100%; }
.form__fine { font-size: 0.8rem; color: var(--muted-2); text-align: center; }

/* Honeypot (oculto a humanos, visible a bots) */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* Estado de envío (JS) */
.form.is-sent .form__field, .form.is-sent .form__submit { display: none; }
.form__success {
  display: none;
  text-align: center;
  padding: 1rem 0;
}
.form.is-sent .form__success { display: block; }
.form__success svg { width: 48px; height: 48px; color: var(--energy); margin: 0 auto 1rem; }
.form__success h3 { color: var(--text-strong); margin-bottom: 0.5rem; }
.form__success p { color: var(--muted); }