/* ==========================================================================
   Refreska — formulario comercial "Form home" (componente reutilizable)
   Marcado: partials/form-lead.html · Comportamiento: assets/js/form-lead.js
   Requiere base.css (fuentes y tokens). No depende de la página que lo usa.
   ========================================================================== */

.form-block {
  --f-ink: #111;
  --f-muted: #6f6f6f;
  --f-line: #d3d6dd;
  --f-line-hover: #9aa0ac;
  --f-surface: #f7f8fa;
  --f-focus: var(--blue, #034bff);
  --f-error: #c62828;
  --f-h: 3.25rem;
  --f-radius: 12px;
  font-family: var(--inter);
}
#Form { scroll-margin-top: 110px; }

.form { display: grid; row-gap: 1.375rem; }
.form__row { display: grid; gap: 1.375rem 1.5rem; }
/* Columnas que pueden encogerse: un select con opciones largas no debe ensanchar la grilla (iOS) */
.form__row--auto { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.form__row--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.field { position: relative; display: flex; flex-direction: column; min-width: 0; }

.field__label {
  display: block;
  letter-spacing: -.005em;
  margin-bottom: .5rem;
  color: var(--f-ink);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

/* Inputs, selects y textarea comparten altura, borde, tipografía y estados */
.field__input,
.field__textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: var(--f-h);
  padding: .8125rem 1rem;
  background: var(--f-surface);
  border: 1px solid var(--f-line);
  border-radius: var(--f-radius);
  color: var(--f-ink);
  font-family: var(--inter);
  font-size: 1rem;           /* 16px: evita el zoom automático en iOS */
  line-height: 1.5;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.field__input--dark { color: var(--f-ink); }
.field__textarea { min-height: 11rem; resize: vertical; }
.field__input::placeholder,
.field__textarea::placeholder { color: #767676; opacity: 1; }
.field__input:hover,
.field__textarea:hover { border-color: var(--f-line-hover); }
.field__input:focus,
.field__textarea:focus { outline: 0; background: #fff; border-color: var(--f-focus); box-shadow: 0 0 0 4px rgba(3, 75, 255, .14); }

/* Selector nativo con flecha propia: separada del borde y del texto */
.field__select {
  height: var(--f-h);
  padding-right: 3rem;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.125rem center;
  background-size: .75rem auto;
  text-overflow: ellipsis;
  cursor: pointer;
}
/* Mientras sigue en la opción de ayuda, el texto se ve como placeholder */
.field__select:invalid { color: var(--f-muted); }
.field__select option { color: var(--f-ink); }
.field__select option[disabled] { color: var(--f-muted); }

/* Error: solo después de que el usuario interactúa o intenta enviar */
.field__input:user-invalid,
.field__textarea:user-invalid { border-color: var(--f-error); background: #fff8f8; }
.field__input:user-invalid:focus,
.field__textarea:user-invalid:focus { box-shadow: 0 0 0 3px rgba(198, 40, 40, .15); }

.field__opt { color: var(--f-muted); font-weight: 400; }
.field__help { margin: .5rem 0 0; color: var(--f-muted); font-size: .8125rem; line-height: 1.45; }

/* Autorización del formulario: discreta, junto al botón y distinta del aviso de medición (no usa las clases .consent) */
.form__auth { max-width: 46rem; }
/* Declaración junto al botón (modo temporal sin casilla, 30-10-2026) */
.form__aviso { max-width: 46rem; margin: 0; color: var(--f-muted); font-size: .8125rem; line-height: 1.5; }
.form__aviso a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.form__aviso a:hover { color: var(--f-ink); }
.form__auth-label { display: flex; align-items: flex-start; gap: .625rem; margin: 0; color: var(--f-muted); font-size: .8125rem; line-height: 1.5; cursor: pointer; }
.form__auth-input { flex: none; width: 1.125rem; height: 1.125rem; margin: .125rem 0 0; accent-color: #111; cursor: pointer; }
.form__auth-text a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.form__auth-text a:hover { color: var(--f-ink); }
.form__auth-input:focus-visible { outline: 2px solid var(--f-focus); outline-offset: 2px; }
.form__auth-input:user-invalid { outline: 2px solid var(--f-error); outline-offset: 2px; }

/* Envío */
.form__submit { justify-self: end; min-width: 14rem; margin-top: .5rem; padding-top: .95rem; padding-bottom: .95rem; }
/* Sin pointer-events:none: un clic durante "Verificando..." debe quedar pendiente y enviarse al llegar el token */
.form__submit[data-busy] { cursor: progress; background: #2b2b2b; transform: none; box-shadow: none; }
@keyframes rfk-busy { 50% { opacity: .72; } }
@media (prefers-reduced-motion: no-preference) {
  .form__submit[data-busy] { animation: rfk-busy 1.1s ease-in-out infinite; }
}
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__turnstile { display: flex; justify-content: flex-end; }

/* Mensajes */
.form-done {
  padding: 5rem 3rem;
  background: #4fff8a;
  border-radius: 20px;
  text-align: center;
}
.form-done__text { color: #000; font-size: 1.7em; font-weight: 600; line-height: 1.4; }
.form-done__small { display: block; margin-top: .5rem; font-size: 1.1rem; font-weight: 400; line-height: 1.5; }
/* Error persistente debajo del formulario (sin pop-up) */
.form-fail {
  margin-top: 1.25rem;
  padding: 1.1rem 1.25rem 1.1rem 3.1rem;
  border: 1px solid #f3c2c2;
  border-left: 4px solid var(--f-error);
  border-radius: 12px;
  background: #fff6f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.5' fill='none' stroke='%23c62828' stroke-width='1.6'/%3E%3Cpath d='M10 5.5v5.2M10 13.6v.4' stroke='%23c62828' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 1.1rem 1.2rem / 1.25rem no-repeat;
  text-align: left;
}
.form-fail__title { margin: 0 0 .25rem; color: #9b1c1c; font-size: 1rem; font-weight: 600; line-height: 1.4; }
.form-fail__text { margin: 0; color: #5c2b2b; font-size: .9375rem; line-height: 1.5; }
.form__status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Estados del botón */
.form__submit[data-state="failed"] { background: var(--f-error); color: #fff; }
.form__submit[data-state="retry"] { background: #000; color: #fff; }

@media (max-width: 767px) {
  .form__row--2 { grid-template-columns: minmax(0, 1fr); }
  .form-done { padding: 3rem 1.5rem; }
  .form-done__text { font-size: 1.4rem; }
}
@media (max-width: 479px) {
  .form-block { --f-h: 3.125rem; padding-top: 5%; }
  .form, .form__row { row-gap: 1.125rem; }
  .form__row--auto { grid-auto-flow: row; }
  .field__label { font-size: .9375rem; }
  .form__submit { justify-self: stretch; width: 100%; text-align: center; }
  .form__turnstile { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .field__input, .field__textarea { transition: none; }
}