/* AXIS — Capa responsiva global (sitio público y formularios) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { max-width: 100%; overflow-x: hidden; }
img, video, iframe, canvas, svg { max-width: 100%; height: auto; }
iframe { height: revert-layer; }
table { max-width: 100%; }

/* Formularios: campos fluidos y sin zoom en iOS */
form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
form select, form textarea {
  width: 100%; max-width: 100%; min-height: 44px; font-size: 16px;
}
form button, form [type="submit"] { min-height: 44px; max-width: 100%; }
form label { overflow-wrap: anywhere; }

@media (max-width: 768px) {
  /* Cuadrículas dentro de formularios y modales a una columna */
  form [style*="grid-template-columns"],
  .modal-content [style*="grid-template-columns"],
  form .grid { grid-template-columns: 1fr !important; }
  form .flex-row, form [style*="display:flex"][style*="gap"] { flex-wrap: wrap; }
  /* Modales ajustados a pantalla */
  [id*="odal"][class*="fixed"], .modal, .modal-overlay { padding: 0.75rem; }
  .modal-content, [role="dialog"] {
    width: 100% !important; max-width: 100% !important;
    max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  h1 { overflow-wrap: anywhere; }
}
@media (max-width: 480px) {
  section { padding-left: 1rem; padding-right: 1rem; }
  .container, .max-w-7xl, .max-w-6xl, .max-w-5xl { padding-left: 1rem; padding-right: 1rem; }
}

/* Video de fondo: cubre siempre el contenedor y se adapta a cualquier dispositivo */
#hero-bg-video, video[id*="bg-video"], .bg-video {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important;
  min-width: 100%; min-height: 100%; aspect-ratio: auto !important; object-fit: cover; object-position: center;
}
@media (max-width: 768px) {
  #hero-bg-video { object-position: 62% center; }
}
@media (orientation: portrait) and (max-width: 768px) {
  #hero-bg-video { object-position: 65% center; }
}

/* Formularios y modales (Cotizar, Agendar, Contacto & Asesor, CRM, Guía, Contacto rápido) */
#quoteForm, #appointmentForm, #contactForm, #crmEmbedForm, #guideForm, #quickContactForm { width: 100%; max-width: 100%; }
#quoteForm *, #appointmentForm *, #contactForm *, #crmEmbedForm *, #guideForm *, #quickContactForm * { min-width: 0; }
#quickModalContent, .ios-glass { max-width: 100%; }

/* Dropdowns personalizados en pantallas pequeñas */
.custom-dropdown-menu {
  max-width: calc(100vw - 32px) !important;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  #quoteForm .flex-row, #appointmentForm .flex-row, #contactForm .flex-row,
  #contactForm .md\:flex-row, #crmEmbedForm .md\:flex-row { flex-direction: column !important; }
  #contactForm .md\:border-r, #crmEmbedForm .md\:border-r, #quoteForm .md\:border-r, #appointmentForm .md\:border-r { border-right: 0 !important; }
  #quoteForm .grid, #appointmentForm .grid, #crmEmbedForm .grid { grid-template-columns: 1fr !important; }
  #quoteForm button[type="submit"], #appointmentForm button[type="submit"], #contactForm button[type="submit"] { width: 100%; }

  /* Asegurar que las tarjetas de selección y modales se adapten */
  .ios-input-group { border-radius: 1rem; width: 100%; }
  .ios-input-group > div { width: 100%; }
  .custom-dropdown-menu {
    position: absolute;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
  }
}

@media (max-width: 480px) {
  .ios-tile { padding: 0.75rem 0.85rem !important; }
  #quoteForm .px-5, #appointmentForm .px-5, #contactForm .px-5 {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }
}