/* ===================================================================
   IVEST AUTO — Mejoras de conversión en móvil (2026-09-21)
   Archivo aparte: styles.css y script.js están congelados por la calculadora.
   =================================================================== */

/* ---------- Contacto: el formulario no debe desbordar en móvil ---------- */
.contacto-grid > * { min-width: 0; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; }

@media (max-width: 960px) {
  /* En móvil, primero el formulario (la acción) y después los datos de contacto */
  .contacto-grid .form { order: -1; }
}

@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .form { padding: 22px 18px; }
}

@media (max-width: 720px) {
  /* 16px evita que iPhone haga zoom al tocar un campo */
  .field input, .field select, .field textarea { font-size: 16px; }
  .field-check input { width: 22px; height: 22px; flex: none; }
}

/* Estado de envío y confirmación */
.form button[type="submit"][disabled] { opacity: .7; cursor: progress; transform: none; }
.form-ok { padding: 14px 16px; border: 1px solid rgba(74,222,128,.35); border-radius: var(--radius-sm); background: rgba(74,222,128,.08); }
.form-ok a { text-decoration: underline; }

/* Atajos directos encima del formulario (llamar / WhatsApp) */
.quick-contact { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; max-width: 460px; }
.quick-contact .btn { flex: 1 1 150px; }
.quick-contact svg { width: 18px; height: 18px; flex: none; }

/* ---------- Home: botón principal visible en la primera pantalla ---------- */
@media (max-width: 720px) {
  .hero { min-height: 0; justify-content: flex-start; padding: 36px 0 32px; }
  .hero .eyebrow { margin-bottom: 12px; }
  .hero h1 { font-size: clamp(2.5rem, 12vw, 3.1rem); margin-bottom: 14px; }
  .hero .lead { font-size: 1rem; }
  .hero-cats { margin-top: 16px; gap: 8px; }
  .hero-actions { margin-top: 22px; }
  .hero-actions .btn { flex: 1 1 100%; }
}

/* ---------- Páginas interiores: menos hueco vacío arriba en móvil ---------- */
@media (max-width: 720px) {
  .page-hero { padding: 40px 0 36px; }
  .page-hero h1 { font-size: clamp(2.5rem, 11vw, 3rem); margin: 10px 0 14px; }
  .page-hero .lead { font-size: 1.02rem; }
  .page-hero .hero-actions .btn { flex: 1 1 100%; }
  /* En móvil la barra inferior ya ofrece Llamar y WhatsApp */
  body.has-mbar .quick-contact { display: none; }
}

/* ---------- Barra fija inferior en móvil: Llamar · WhatsApp · Solicitar ---------- */
.mbar { display: none; }

@media (max-width: 720px) {
  .mbar {
    display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(10,10,12,.94);
    backdrop-filter: saturate(140%) blur(14px);
    border-top: 1px solid var(--line);
  }
  .mbar a {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 48px; border-radius: 8px;
    font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: .9rem;
    border: 1px solid var(--line-2); color: var(--text);
    white-space: nowrap; font-size: .86rem; padding: 0 6px;
  }
  .mbar a svg { width: 18px; height: 18px; flex: none; }
  .mbar .mbar-wa { color: #25D366; border-color: rgba(37,211,102,.45); }
  .mbar .mbar-cta { background: var(--red); border-color: var(--red); color: #fff; }
  .mbar a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

  /* Con la barra activa, el botón flotante de WhatsApp sobra y se deja hueco abajo */
  body.has-mbar .wa-float { display: none; }
  body.has-mbar { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}

@media print { .mbar { display: none !important; } }