/* ============================================================
   mobile-fix.css — 7bee SITI
   Solo actúa en max-width: 1024px.
   En PC/laptop: cero cambios.
   REGLA CLAVE: NUNCA z-index ni position en <a> generales
   (crea stacking contexts que rompen la navegación táctil).
   ============================================================ */

@media screen and (max-width: 1024px) {

  /* ── 1. Canvas: ocultos, cero CPU ── */
  canvas,
  #circuit-canvas,
  #infra-net-canvas,
  #cyber-particles,
  #auto-neural-canvas,
  #heroHoloGrid {
    display: none !important;
    pointer-events: none !important;
  }

  /* ── 2. Fondo estático en lugar del canvas ── */
  body {
    background: #080A0E !important;
  }

  /* ── 3. Imágenes decorativas: ocultas en móvil ── */
  .hero-img-01,
  .dev-img-frame,
  .infra-img-frame,
  .infra-hero-visual,
  .cyber-hero-visual,
  .cyber-bg-photo,
  .auto-img-card,
  .page-hero-img,
  .img-block-page,
  .img-block-02__bg,
  .img-block-02__cut,
  .scan-line,
  .hero-glow-orb,
  .hero-hud-tl,
  .hero-hud-br,
  .hero-data-lines,
  .hero-status-tag,
  .page-hero-bg,
  .infra-glow-ring,
  .cyber-hex-overlay,
  .auto-hero-glow {
    display: none !important;
  }

  /* ── 4. Fondo sólido donde había imagen ── */
  .img-block-02 {
    background: #0D1117 !important;
  }

  /* ── 5. Layouts: 1 columna en móvil ── */
  .dev-hero-split,
  .infra-hero-split,
  .cyber-hero-inner,
  .auto-hero-inner {
    grid-template-columns: 1fr !important;
  }

  /* ── 6. Pseudo-elementos: NUNCA capturan toques ── */
  *::before,
  *::after {
    pointer-events: none !important;
  }

  /* ── 7. Navbar fija encima de todo ── */
  .navbar {
    position: fixed !important;
    z-index: 1000 !important;
  }

  /* ── 8. Hamburger: área táctil mínima ──
     touch-action:manipulation elimina el delay de 300ms del click.
     NO necesitamos touchend — click solo ya es inmediato con esto. ── */
  .nav-hamburger {
    display: flex !important;
    min-width: 48px !important;
    min-height: 48px !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
  }

  /* ── 9. Mobile-nav: encima de absolutamente todo ── */
  .mobile-nav {
    position: fixed !important;
    z-index: 9999 !important;
  }
  .mobile-nav.open {
    display: flex !important;
  }

  /* ── 10. Botón cerrar y links del menú ── */
  .mobile-close {
    min-width: 48px !important;
    min-height: 48px !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
  }
  .mobile-nav a {
    touch-action: manipulation !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* SIN z-index ni position — no crear stacking context en links */
  }

  /* ── 11. Botones generales: área táctil cómoda ── */
  .btn,
  button {
    min-height: 44px !important;
    touch-action: manipulation !important;
  }

  /* ── 12. Links en footer y secciones: touch-action solo ── */
  .footer-col a,
  .footer-social a,
  .footer-contact-item,
  .card-link,
  .breadcrumb a {
    touch-action: manipulation !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* ── 13. WA widget ── */
  #wa-chat-widget {
    z-index: 5000 !important;
  }
  .wac-fab {
    touch-action: manipulation !important;
  }

}

/* ── Quitar overflow:hidden en móvil — puede cortar áreas de tap ── */
@media screen and (max-width: 1024px) {
  .hero,
  .page-hero,
  .service-feature-card,
  .cta-banner {
    overflow: visible !important;
  }

  /* hero: altura automática en móvil, no 100vh */
  .hero {
    min-height: auto !important;
    padding: 100px 0 60px !important;
  }

  /* hero container: padding normal en móvil */
  .hero > .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ── VIEWPORT: sin scroll horizontal en móvil ── */
@media screen and (max-width: 1024px) {
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Grids que causan overflow horizontal */
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
  }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .clients-grid {
    flex-direction: column !important;
  }
  .client-card {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* WA panel: no salirse de pantalla */
  .wac-panel {
    width: calc(100vw - 32px) !important;
    max-width: 320px !important;
    right: 0 !important;
  }

  /* scrollTopBtn handled in components.css */

  /* position:static removed — breaks card/hero layout */

  /* EXCEPCION: page-hero-content necesita estar sobre su bg */
  .page-hero-content {
    position: relative !important;
    z-index: 2 !important;
  }
}