/**
 * Mobile Performance Optimizations
 * Optimizaciones específicas de rendimiento para dispositivos móviles
 * 
 * @version 1.0
 * @date 2025-11-19
 */

/* ============================================
   OPTIMIZACIONES GLOBALES DE RENDIMIENTO
   ============================================ */

/* Optimizar scroll suave en iOS */
html {
  -webkit-overflow-scrolling: touch;
}

/* Prevenir highlight en tap (ya está en los elementos pero reforzamos globalmente) */
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
}

/* Elementos interactivos conservan el highlight */
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: rgba(84, 113, 49, 0.1);
}

/* ============================================
   OPTIMIZACIONES PARA MOBILE
   ============================================ */

@media (max-width: 768px) {
  
  /* Reducir will-change automático solo en elementos activos */
  .pw-hero-carousel__slide:not(.active) {
    will-change: auto !important;
  }

  /* Optimizar transiciones en mobile - más rápidas */
  .pw-hero-carousel__slide {
    transition-duration: 0.25s !important;
  }

  /* Reducir sombras complejas en mobile para mejor performance */
  .pw-paquetes-card:hover,
  .pw-package-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  }

  /* Simplificar animaciones de hover en mobile */
  @media (hover: none) {
    .pw-hero-carousel__nav:hover,
    .pw-hero-carousel__thumb:hover,
    .paquetes-card:hover,
    .pw-package-card:hover {
      transform: translate3d(0, 0, 0) !important;
    }
  }

  /* Optimizar imágenes en carrusel para mobile */
  .pw-hero-carousel__slide img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }

  /* Reducir blur y efectos pesados */
  .pw-hero-carousel__nav {
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.98) !important;
  }

  /* Simplificar degradados complejos en mobile */
  .pw-paquetes-hero::before,
  .pw-beneficios::before {
    opacity: 0.5;
  }
}

/* ============================================
   OPTIMIZACIONES PARA DISPOSITIVOS DE GAMA BAJA
   ============================================ */

@media (max-width: 480px) {
  
  /* Transiciones aún más rápidas en dispositivos pequeños */
  .pw-hero-carousel__slide,
  .pw-package-card,
  .paquetes-card {
    transition-duration: 0.2s !important;
  }

  /* Eliminar transformaciones complejas en dispositivos pequeños */
  .pw-package-card:has(input.pw-pkg-radio:checked) {
    transform: translate3d(0, 0, 0) !important;
  }

  /* Simplificar sombras */
  .pw-hero-carousel__main,
  .pw-package-card,
  .pw-testimonios__photo-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  }

  /* Reducir efectos de parallax o scroll que puedan causar jank */
  .pw-paquetes-hero__left {
    position: relative !important;
  }
}

/* ============================================
   OPTIMIZACIONES BASADAS EN PREFERENCIAS
   ============================================ */

/* Respetar preferencia de movimiento reducido */
@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;
  }

  .pw-hero-carousel__slide {
    transition: opacity 0.15s ease !important;
    transform: none !important;
  }
}

/* ============================================
   OPTIMIZACIÓN DE FUENTES PARA MOBILE
   ============================================ */

@media (max-width: 768px) {
  /* Optimizar renderizado de texto */
  body {
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* ============================================
   OPTIMIZACIÓN DE SCROLL
   ============================================ */

/* Mejora el scroll en listas horizontales */
.pw-testimonios__photo-list {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* Snap más suave en mobile */
@media (max-width: 768px) {
  .pw-testimonios__photo-list {
    scroll-snap-type: x proximity;
  }
}

/* ============================================
   CONTAIN Y CONTENT-VISIBILITY
   ============================================ */

/* Optimizar rendering de secciones grandes */
.pw-info-producto,
.pw-beneficios,
.pw-testimonios,
.pw-conclusion {
  contain: layout style paint;
}

/* Content visibility para secciones fuera del viewport */
@supports (content-visibility: auto) {
  .pw-beneficios,
  .pw-testimonios,
  .pw-conclusion {
    content-visibility: auto;
    contain-intrinsic-size: auto 800px;
  }
}

/* ============================================
   OPTIMIZACIÓN DE IMÁGENES
   ============================================ */

/* Note: loading y decoding se aplican en HTML, no CSS */
/* Asegurar que todas las imágenes tengan los atributos:
   loading="lazy" y decoding="async" en el HTML */

/* ============================================
   REDUCIR PAINT EN HOVER/ACTIVE
   ============================================ */

/* Evitar repaints innecesarios */
@media (hover: hover) and (pointer: fine) {
  /* Desktop: mantener efectos hover */
  .pw-hero-carousel__thumb:hover img {
    will-change: transform;
  }
}

/* Mobile: eliminar will-change en hover */
@media (hover: none) {
  .pw-hero-carousel__thumb img,
  .pw-product-image,
  .pw-package-card {
    will-change: auto !important;
  }
}

/* ============================================
   OPTIMIZACIÓN DE ANIMACIONES
   ============================================ */

/* Usar compositing layer solo cuando sea necesario */
.pw-hero-carousel__slide.active {
  z-index: 1;
  contain: layout style paint;
}

/* Optimizar animaciones críticas */
@media (max-width: 768px) {
  /* Reducir complejidad de animaciones en mobile */
  .pw-urgency-badge,
  .pw-value-prop-badge,
  .pw-trust-badge {
    animation: none !important;
  }
  
  /* Transiciones instantáneas en cambio de paquete si el dispositivo es lento */
  @media (prefers-reduced-motion: reduce), (update: slow) {
    .pw-package-card {
      transition: border-color 0.1s ease !important;
    }
  }
}

/* ============================================
   OPTIMIZACIONES DE GPU FORZADAS
   ============================================ */

/* Elementos que siempre deben usar GPU */
.pw-hero-carousel__track,
.pw-hero-carousel__slide,
.pw-package-selector {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000px;
  -webkit-perspective: 1000px;
}

/* ============================================
   OPTIMIZACIÓN DE MEMORIA
   ============================================ */

/* Liberar recursos de slides no visibles */
.pw-hero-carousel__slide:not(.active) img {
  content-visibility: auto;
}

/* Reducir consumo de memoria en grids grandes */
@media (max-width: 768px) {
  .pw-beneficios__grid,
  .pw-testimonios__text-grid {
    contain: layout;
  }
}

/* ============================================
   OPTIMIZACIONES DE GPU PARA MOBILE
   ============================================ */

@media (max-width: 768px) {
  
  /* GPU acceleration solo en mobile */
  .pw-package-card {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    contain: layout style paint;
  }
  
  .pw-package-card:hover,
  .pw-product-item:hover {
    transform: translate3d(0, -1px, 0);
  }
  
  .pw-package-card:has(input.pw-pkg-radio:checked) {
    transform: translate3d(0, -2px, 0);
  }
  
  .pw-product-image {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  
  .pw-product-item:hover .pw-product-image {
    transform: translate3d(0, 0, 0) scale(1.08);
  }
  
  /* Transiciones más rápidas en mobile */
  .pw-package-card,
  .pw-product-item {
    transition-duration: 0.15s !important;
  }
  
  .pw-product-image {
    transition-duration: 0.2s !important;
  }
}