/* Formularios de captura de leads (catálogo, contacto, empleo) */

.lead-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gh-space-2);
  align-items: flex-start;
}
.lead-form .field {
  flex: 1 1 12rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.lead-form label {
  font-size: var(--gh-text-xs);
  font-weight: 600;
  color: var(--gh-text-muted);
}
.lead-form input,
.lead-form textarea,
.lead-form select {
  font: inherit;
  font-family: var(--gh-font-body);
  padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--gh-gray-line);
  border-radius: var(--gh-radius);
  background: var(--gh-surface);
  color: var(--gh-text);
  width: 100%;
}
.lead-form input:focus,
.lead-form textarea:focus,
.lead-form select:focus {
  outline: none;
  border-color: var(--gh-blue);
}
.lead-form textarea { resize: vertical; min-height: 6rem; }
/* Selector de archivo con estilo propio — el <input type=file> nativo se ve
   feo/inconsistente entre navegadores (botón gris con su propia tipografía
   del sistema, imposible de restylear directo). Pedido explícito
   2026-08-20 ("los botones de adjuntar están muy feos"). Patrón estándar de
   accesibilidad: el <input> real queda oculto visualmente pero SIGUE en el
   flujo de tabulación (no display:none, que lo saca del todo) — un <label>
   hermano, estilado como los .btn del sitio (mismo --gh-radius cuadrado
   redondeado, no círculo, consistente con la homologación de controles ya
   aplicada en el resto del sitio), dispara el selector nativo al hacer
   clic (comportamiento gratis de <label for="...">). El nombre del archivo
   elegido se muestra aparte (forms.js lo actualiza al vuelo). */
.file-input { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
/* Especificidad reforzada (.file-input .file-input-native, 2 clases) a propósito:
   .lead-form input ya trae width:100%/padding/border con especificidad
   (0,1,1) que le ganaba a un solo-selector-de-clase .file-input-native
   (0,1,0) sin importar el orden en la hoja — el input "oculto" terminaba
   ocupando el ancho completo del campo (visualmente recortado por clip,
   pero su caja seguía contribuyendo al scrollWidth de la página), causando
   overflow horizontal real en móvil en /cotizacion y /contacto. Bug real
   encontrado el 2026-08-31 en la auditoría de móvil. */
.file-input .file-input-native {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.file-input-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--gh-font-display);
  font-weight: 700;
  font-size: var(--gh-text-sm);
  padding: 0.7rem 1.2rem;
  border-radius: var(--gh-radius);
  border: 1.5px solid var(--gh-gray-line);
  color: var(--gh-text);
  background: var(--gh-surface);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  flex-shrink: 0;
}
.file-input-btn svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
.file-input-btn:hover { border-color: var(--gh-text); }
.file-input-native:focus-visible + .file-input-btn {
  outline: 2px solid var(--gh-blue);
  outline-offset: 2px;
}
.file-input-name {
  font-size: var(--gh-text-sm);
  color: var(--gh-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lead-form .field-hint { font-size: var(--gh-text-xs); color: var(--gh-text-muted); }
.lead-form .field-submit { flex: 0 0 auto; align-self: flex-end; }
.lead-form .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status {
  flex-basis: 100%;
  font-size: var(--gh-text-sm);
  min-height: 1.2em;
}
.form-status-ok { color: var(--ok, #1F9450); font-weight: 600; }
.form-status-error { color: #B23A2E; font-weight: 600; }

@media (max-width: 640px) {
  .lead-form { flex-direction: column; align-items: stretch; }
  /* Bug real encontrado 2026-08-31 ("los formularios en mobil se ven super
     espaciados"): flex-basis:12rem (arriba, .field) fija el ANCHO mínimo de
     cada campo en el layout horizontal de escritorio — pero flex-basis
     controla el eje PRINCIPAL del contenedor flex, y en móvil ese eje pasa a
     ser vertical (flex-direction:column). El mismo 12rem terminaba fijando
     una ALTURA mínima de 192px por campo (mucho más que lo que ocupa una
     etiqueta + un input de una sola línea, ~70px), dejando un hueco enorme
     debajo de cada campo. Se resetea a flex-basis:auto (alto = contenido
     real) solo en este breakpoint, sin tocar el layout de escritorio.*/
  .lead-form .field { flex-basis: auto; }
  .lead-form .field-submit { align-self: stretch; }
  .lead-form .field-submit .btn { width: 100%; justify-content: center; }
}

/* Loader de envío: una ventanita corrediza (mismo lenguaje visual que las
   puertas de vidrio del home) que se cierra y se abre en bucle mientras el
   formulario está en vuelo — inyectada por forms.js dentro del botón, no
   requiere tocar el HTML de cada formulario. Antes solo cambiaba el texto a
   "Enviando…", que pasaba desapercibido y se sentía "trabado". */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.gh-btn-spinner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.gh-btn-spinner-leaf {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: #fff;
  animation: gh-btn-spinner-l 1.2s ease-in-out infinite;
}
.gh-btn-spinner-leaf + .gh-btn-spinner-leaf {
  right: 0;
  left: auto;
  animation-name: gh-btn-spinner-r;
}
.gh-btn-spinner-leaf:first-child { left: 0; }
@keyframes gh-btn-spinner-l {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-100%); }
}
@keyframes gh-btn-spinner-r {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .gh-btn-spinner-leaf { animation: none; opacity: 0.6; }
}

/* ---- Modal "básico" de captura de lead antes de un PDF (2026-08-27) ----
   Pedido explícito: garantías/certificados nunca se sirven directo, siempre
   detrás de nombre+correo (teléfono opcional). Deliberadamente sin la portada
   con foto del modal de catálogo (.download-modal en catalogo.css) — este es
   el "básico": un solo formulario compacto, reutilizable en cualquier página
   que cargue forms.css + doc-gate-modal.js. */
.docgate-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: var(--gh-space-4);
  background: rgba(15, 17, 20, 0.72);
}
.docgate-modal.is-open { display: flex; }
body.docgate-modal-lock { overflow: hidden; }
.docgate-modal-inner {
  position: relative;
  width: 100%;
  max-width: 26rem;
  background: var(--gh-surface);
  border-radius: var(--gh-radius);
  padding: var(--gh-space-5);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5);
}
.docgate-modal-close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 2rem;
  height: 2rem;
  border-radius: 0.4rem;
  border: 0;
  background: var(--gh-paper);
  color: var(--gh-text);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.docgate-modal-close:hover { background: var(--gh-gray-line-soft); }
.docgate-modal-eyebrow { color: var(--gh-link); font-size: var(--gh-text-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0.3rem; }
.docgate-modal-title { font-size: var(--gh-text-lg); margin-bottom: 0.6rem; }
.docgate-modal-inner p.lede { font-size: var(--gh-text-sm); margin-bottom: var(--gh-space-4); }