/* ============================================================
   SAN MIGUEL S.A. — responsive.css  (Premium Edition)
   Mobile-first: el diseño base es móvil, escala hacia arriba
   ============================================================ */

/* ── Mobile (< 576px) ───────────────────────────────────── */
@media (max-width:575.98px){
  :root { --header-h:64px; }
  .section-pad    { padding:64px 0; }
  .section-pad-sm { padding:44px 0; }

  .hero-stats    { gap:1.5rem; }
  .hero-stat .value { font-size:1.6rem; }
  .hero-visual   { display:none; }
  .hero-actions  { flex-direction:column; }
  .hero-actions .btn-teal,
  .hero-actions .btn-ghost { width:100%; justify-content:center; }

  .chatbot-window  { width:calc(100vw - 2rem); right:1rem; bottom:5.5rem; max-height:80vh; }
  .chatbot-trigger { right:1rem; bottom:1rem; }
  .wa-float        { right:1rem; bottom:7rem; }
  .scroll-top      { display:none; }

  .contact-form-wrap { padding:1.5rem 1.25rem; }
  .cta-banner { padding:3.5rem 0; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .trust-divider { display:none; }

  .process-connector { display:none; }
  .process-step { margin-bottom:2rem; }

  .btn-lg { padding:.88rem 1.8rem !important; font-size:.98rem !important; }
}

/* ── Small tablet (576–767px) ───────────────────────────── */
@media (min-width:576px) and (max-width:767.98px){
  .hero-visual { display:none; }
  .chatbot-window { width:340px; }
  .process-connector { display:none; }
}

/* ── Tablet (768–991px) ─────────────────────────────────── */
@media (min-width:768px) and (max-width:991.98px){
  .section-pad { padding:88px 0; }
  .hero-card   { display:none; }
}

/* ── Desktop (992px+) ───────────────────────────────────── */
@media (min-width:992px){
  .navbar-collapse { gap:.25rem; }
  #hero { min-height:100vh; }
}

/* ── Large (1200px+) ────────────────────────────────────── */
@media (min-width:1200px){
  .section-pad { padding:120px 0; }
  .hero-card   { display:block; }
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after {
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  [data-reveal] { opacity:1 !important; transform:none !important; }
}

/* ── Dark mode básico (opcional) ─────────────────────────── */
@media (prefers-color-scheme:dark){
  /* Aplicar solo si el usuario implementa soporte dark */
}

/* ── Print ──────────────────────────────────────────────── */
@media print{
  #navbar,.chatbot-trigger,.wa-float,.scroll-top,.chatbot-window,#scrollProgress { display:none !important; }
  #hero { min-height:auto; padding:2rem 0; }
  [data-reveal] { opacity:1 !important; transform:none !important; }
}

/* ============================================================
   AJUSTES RESPONSIVE ADICIONALES — cobertura completa
   ============================================================ */

/* Nunca permitir scroll horizontal accidental */
html, body { max-width:100%; overflow-x:hidden; }
img, svg, video { max-width:100%; }

/* La columna visual del hero (tarjeta) se oculta en <992px:
   evita una columna vacía en tablets (768–991) y libera altura
   en móvil. La tarjeta vuelve en escritorio. */
@media (max-width:991.98px){
  .hero-visual { display:none !important; }
  #hero .row { padding-top:6rem !important; padding-bottom:3rem !important; }
  .hero-stats { justify-content:flex-start; }
}

/* Móvil: estadísticas del hero en rejilla 2×2 ordenada */
@media (max-width:575.98px){
  .hero-stats {
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:1.25rem 1rem !important;
  }
  .hero-stat-divider { display:none; }
  .hero-title, .display-title { font-size:2.1rem !important; }
  .hero-subtitle { font-size:1rem !important; }

  /* Banner país: tarjetas de región con aire suficiente */
  .country-banner [style*="grid-template-columns:1fr 1fr"] { gap:.75rem !important; }
  .country-banner { padding:56px 0 !important; }

  /* Proceso: pasos con separación cómoda */
  .process-step, .col-md-3.text-center { margin-bottom:1.5rem; }

  /* Tipografía de secciones un poco menor en móvil */
  .section-title { font-size:1.55rem !important; }

  /* Navbar: el sub-texto del logo se oculta en pantallas muy chicas */
  .nav-brand-sub, .navbar-text-logo-sub { display:none; }

  /* Botones a ancho completo dentro de banners centrados */
  .cta-banner .btn-teal, .cta-banner .btn-outline-white { width:100%; justify-content:center; }
}

/* Pantallas muy estrechas (≤360px): evita desbordes de texto grande */
@media (max-width:360px){
  .hero-title, .display-title { font-size:1.85rem !important; }
  .trust-item .number { font-size:1.7rem !important; }
  .container { padding-left:1rem; padding-right:1rem; }
}

/* Tablets (768–991): rejillas de productos/beneficios a 2 columnas
   ya las maneja Bootstrap; aseguramos respiración vertical */
@media (min-width:768px) and (max-width:991.98px){
  .section-pad { padding:72px 0 !important; }
}