/* ==========================================================================
   REGLA 08 - RESPONSIVE MOBILE SAFE (MOB-001 ... MOB-009)
   Prevención de desbordamientos, zonas táctiles y recortes en móvil
   ========================================================================== */

/* MOB-001: Prevenir scroll horizontal indeseado */
html, body {
  max-width: 100vw;
  overflow-x: hidden !important;
}

/* MOB-002: Elementos interactivos con tamaño táctil accesible (mínimo 44px) */
button, input[type="submit"], .btn, .faq-header, .whatsapp-float {
  min-height: 44px;
  min-width: 44px;
}

@media (max-width: 992px) {
  .nav-links a {
    min-height: 44px;
    min-width: 44px;
  }
}

/* MOB-003: Tablas e imágenes responsivas */
img, video, svg, table {
  max-width: 100%;
  height: auto;
}

/* MOB-004: Padding de seguridad en contenedores optimizado para ancho */
.container {
  padding-left: clamp(0.75rem, 3vw, 1.5rem);
  padding-right: clamp(0.75rem, 3vw, 1.5rem);
}

/* MOB-005: Formularios adaptables sin zoom automático en iOS (font-size >= 16px) */
input, select, textarea {
  font-size: 16px !important;
}

/* MOB-006: Z-index ordenados y seguros */
.site-header { z-index: 1000; }
.nav-links { z-index: 999; }
.whatsapp-float { z-index: 1500; }
.modal { z-index: 2000; }

/* MOB-007: Respetar safe-area en iPhone con notch */
.whatsapp-float {
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  right: calc(20px + env(safe-area-inset-right, 0px));
}

.main-footer {
  padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}

/* MOB-008: Manejo de textos largos */
h1, h2, h3, h4, h5, h6, p, a {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: manual;
}

/* MOB-009: Adaptaciones para pantallas ultraciertas < 360px */
@media (max-width: 360px) {
  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .btn {
    width: 100%;
  }

  .brand-logo img {
    height: 46px;
  }
}