/* ============================================================================
 * fs-mobile-perf.css — v72.5.0
 * 
 * OPTIMIZACIÓN MOBILE (Android + iOS)
 * 
 * Objetivo: eliminar lag en scroll, touch lag de 300ms, y problemas iOS específicos.
 *
 * Estrategia:
 *   1. Desactivar backdrop-filter en mobile (causa principal del lag)
 *   2. Simplificar dot grid pattern en mobile
 *   3. Touch optimization (tap delay, highlights, scroll momentum)
 *   4. iOS specifics (text-size-adjust, safe-area-inset, momentum scroll)
 *   5. Android specifics (font swap, layer count reducido)
 *   6. Hardware acceleration selectiva
 *
 * Se carga ÚLTIMO en el orden de CSS para sobreescribir todo.
 * ========================================================================== */


/* =============================================================================
   1. iOS / Android — Base optimizations (siempre aplicadas)
   ============================================================================= */
html {
  /* Evita que iOS haga zoom auto en inputs */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  
  /* Mejora rendering de fonts en iOS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  /* Evita scroll horizontal accidental */
  overflow-x: hidden;
}

body {
  /* Permite scroll momentum nativo en iOS */
  -webkit-overflow-scrolling: touch;
  
  /* Evita bounce extraño en iOS al hacer scroll past edges */
  overscroll-behavior-y: none;
  
  /* Evita scroll horizontal */
  overflow-x: hidden;
  
  /* Mejor rendering en mobile */
  text-rendering: optimizeLegibility;
}

/* === Touch optimization en TODOS los elementos interactivos === */
a, button, input, select, textarea,
.btn, .cta-big, .hero-cta, .vs-cta,
.cat-card, .cat-link, .faq-q,
.fb-row-card, .forensic-shot, .video-thumb,
[onclick], [role="button"] {
  /* Elimina el delay de 300ms en mobile */
  touch-action: manipulation;
  
  /* Elimina el highlight gris/azul al tocar */
  -webkit-tap-highlight-color: transparent;
  
  /* User select solo en texto, no en botones */
  -webkit-user-select: none;
  user-select: none;
}

/* Permite seleccionar texto en zonas de contenido */
p, h1, h2, h3, h4, h5, h6, span, li, td,
.hero-desc, .sec-sub, .vs-sub, .wc-sub, .faq-a {
  -webkit-user-select: text;
  user-select: text;
}

/* === iOS — Safe area inset (notch en iPhone X+) === */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  
  /* Navbar con notch */
  #nav {
    padding-top: env(safe-area-inset-top);
  }
  
  /* Footer con home indicator de iPhone */
  footer {
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
  
  /* Exit popup respeta notch */
  #exitPopup {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}


/* =============================================================================
   2. MOBILE (≤ 768px) — Optimizaciones agresivas de performance
   ============================================================================= */
@media (max-width: 768px) {
  
  /* ---------- 2a. ELIMINAR backdrop-filter (causa #1 del lag) ---------- */
  .cat-card,
  .wc-card,
  .bon-card,
  .forensic-stat,
  .faq-i,
  .trust-block,
  .hero-badge,
  #nav,
  #nav.scrolled,
  .exit-popup-inner {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  
  /* Compensamos visualmente con un background más sólido */
  .cat-card,
  .wc-card,
  .bon-card,
  .forensic-stat {
    background: linear-gradient(165deg, #0F2347 0%, #08142F 100%) !important;
  }
  
  .faq-i {
    background: rgba(15, 35, 71, 0.6) !important;
  }
  
  .trust-block {
    background: linear-gradient(165deg, rgba(15, 35, 71, 0.85), rgba(8, 20, 47, 0.9)) !important;
  }
  
  .hero-badge {
    background: rgba(255, 90, 52, 0.1) !important;
  }
  
  #nav.scrolled {
    background: rgba(5, 22, 52, 0.96) !important;
  }
  
  /* ---------- 2b. Dot grid simplificado (sin mask, sin fixed) ---------- */
  body::before {
    /* En mobile, mask-image con radial-gradient es muy costoso.
       Lo cambiamos a absolute con un fade-out simple por opacidad */
    position: absolute !important;
    height: 100vh;
    background-size: 32px 32px !important;  /* Más espaciado = menos puntos = menos GPU */
    mask-image: linear-gradient(180deg, black 0%, black 60%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(180deg, black 0%, black 60%, transparent 100%) !important;
    opacity: 0.6;
  }
  
  /* ---------- 2c. Reducir sombras complejas (cada sombra = repaint cost) ---------- */
  .cat-card,
  .wc-card,
  .bon-card,
  .forensic-stat,
  .vs-col,
  .faq-i {
    /* Sombra simple en lugar de múltiples capas */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  }
  
  .cat-card:hover,
  .wc-card:hover,
  .bon-card:hover,
  .vs-col:hover {
    /* En mobile no hay hover real — el "hover" se queda pegado tras tap */
    /* Reseteamos para que no se vea raro */
    transform: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  }
  
  /* ---------- 2d. Pausar el ticker "savings-band" en mobile ---------- */
  /* Una animación infinite a 60s sigue siendo GPU work continuo */
  .savings-band-track {
    animation-duration: 90s !important;  /* Aún más lento */
  }
  
  /* Si el usuario activa data-saver / battery saver, paramos completamente */
  @media (prefers-reduced-data: reduce) {
    .savings-band-track {
      animation: none !important;
    }
  }
  
  /* ---------- 2e. Smooth scroll OFF en mobile (interfiere con scroll restoration) ---------- */
  html {
    scroll-behavior: auto !important;
  }
  
  /* ---------- 2f. Reducir transition-duration en cards ---------- */
  .cat-card,
  .wc-card,
  .bon-card,
  .vs-col {
    transition-duration: 0.15s !important;  /* Era .22s y .3s */
  }
  
  /* ---------- 2g. Optimizar tipografía mobile ---------- */
  body {
    font-size: 15px;  /* Era 16px — más compacto en mobile */
    line-height: 1.55;
  }
  
  /* ---------- 2h. Inputs sin zoom auto (iOS) ---------- */
  input, select, textarea {
    font-size: 16px !important;  /* iOS no hace zoom si el input es ≥ 16px */
  }
  
  /* ---------- 2i. Reducir paddings extremos en mobile ---------- */
  .hero {
    padding-top: 60px !important;
    padding-bottom: 40px !important;
  }
  
  .sec {
    padding: 48px 0 !important;
  }
  
  /* ---------- 2j. Imágenes optimization ---------- */
  img {
    /* Hint al browser para que use GPU layer */
    transform: translateZ(0);
    /* Suaviza el rendering */
    image-rendering: auto;
  }
}


/* =============================================================================
   3. iOS-SPECIFIC fixes (Safari mobile + WebView)
   ============================================================================= */

/* Detecta iOS Safari específicamente */
@supports (-webkit-touch-callout: none) {
  
  /* iOS tiene bug con vh — usar dvh si está disponible */
  @supports (height: 100dvh) {
    .lb-overlay,
    .video-modal,
    #exitPopup {
      height: 100dvh !important;
    }
  }
  
  /* iOS — Fix de scroll bouncing en modales */
  .lb-overlay.open,
  .video-modal.open,
  #exitPopup[style*="flex"] {
    position: fixed;
    overflow: hidden;
  }
  
  /* iOS — Inputs con border-radius funcionan diferente */
  input, select, textarea, button {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 8px;
  }
  
  /* iOS — Botones tienen padding raro por defecto */
  button {
    -webkit-appearance: none;
    appearance: none;
  }
  
  /* iOS — Sticky nav puede tener bug si el body no tiene height */
  #nav {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);  /* Force GPU layer */
  }
}


/* =============================================================================
   4. ANDROID-SPECIFIC fixes
   ============================================================================= */

/* Android Chrome — Reducir layout shifts */
@media screen and (max-width: 768px) and (orientation: portrait) {
  
  /* Android — Fix de viewport height con la barra de URL */
  .hero {
    min-height: auto;  /* No forzar 100vh, que se reduce cuando aparece URL bar */
  }
  
  /* Android — Texto más legible en pantallas densas */
  body {
    -webkit-font-smoothing: subpixel-antialiased;
  }
}


/* =============================================================================
   5. Hardware acceleration SELECTIVA
   ============================================================================= */

/* Solo elementos que se animan necesitan promoción a GPU layer */
.hero-cta,
.cta-big,
.vs-cta,
#nav,
.savings-band-track {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}


/* =============================================================================
   6. RESPETAR PREFERENCIAS DEL USUARIO
   ============================================================================= */

/* Si el usuario activa "reducir movimiento", paramos TODO */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .savings-band-track {
    animation: none !important;
  }
}

/* Si el dispositivo tiene poca batería o data-saver activo */
@media (prefers-reduced-data: reduce) {
  body::before {
    display: none;  /* Sin dot grid */
  }
  .savings-band-track {
    animation: none !important;
  }
}