/**
 * Responsive
 * Correcciones WebKit/Safari:
 *  - safe-area-inset padding para iPhone con notch en contenedores edge-to-edge
 *  - min-height con -webkit-fill-available para 100vh en Safari iOS (bug conocido)
 */

/* Safari iOS: 100vh incluye la barra del navegador, causando overflow.
   -webkit-fill-available es la solución correcta para el hero. */
.hero {
  min-height: -webkit-fill-available;
}

@media (max-width: 1024px) {
  .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .about-visual { display: none; }
}

@media (max-width: 768px) {
  section { padding: 70px 0; }
  .nav-menu { display: none; }
  .nav-toggle { display: -webkit-flex; display: flex; }
  .topbar-left { display: none; }
  .stats-inner { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .slider-arrows { display: none; }
  .slide-title { font-size: 2rem; }
  .slide-btns { -webkit-flex-direction: column; flex-direction: column; }
  .footer-bottom { -webkit-flex-direction: column; flex-direction: column; text-align: center; }
  .container { padding-left: 16px; padding-right: 16px; }
  .slide-content { padding-left: 16px; padding-right: 16px; }
  .nav-inner { padding-left: 16px; padding-right: 16px; }
  /* Safari iOS: padding con safe-area para notch en orientación landscape */
  .container,
  .nav-inner,
  .slide-content {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

@media (max-width: 480px) {
  .chatbot-window { width: calc(100vw - 16px); right: 8px; bottom: 100px; }
  .float-btns { right: 16px; bottom: 16px; }
  .container { padding-left: 12px; padding-right: 12px; }
  .slide-content { padding-left: 12px; padding-right: 12px; }
  .nav-inner { padding-left: 12px; padding-right: 12px; }
  /* Safari iOS: font-size mínimo de 16px en inputs para evitar zoom automático */
  .form-input,
  .cw-input {
    font-size: 16px;
  }
}

/* Safari iOS landscape: compensar el notch lateral */
@supports (padding: max(0px)) {
  .container,
  .nav-inner,
  .topbar-inner {
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
  }
}