/* ============================================
   OPTIMIZACIONES MOBILE - GWM
   ============================================ */

/* Reducir animaciones en mobile para mejor rendimiento */
@media (max-width: 768px) {
  /* Desactivar animaciones pesadas en mobile */
  .appear-animation {
    animation-duration: 0.3s !important;
    animation-delay: 0s !important;
  }
  
  /* Optimizar transiciones hover en mobile */
  .anim-hover-scale-1-2 {
    transition: transform 0.2s ease !important;
  }
  
  /* Reducir complejidad de animaciones */
  [data-appear-animation] {
    animation-duration: 0.3s !important;
  }
  
  /* Mejorar rendimiento del carousel en mobile */
  .carousel-inner {
    will-change: transform;
  }
  
  .carousel-item {
    backface-visibility: hidden;
    perspective: 1000px;
  }
  
  /* Optimizar imágenes en mobile */
  img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
  
  /* Mejorar scroll en mobile */
  body {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  
  /* Reducir sombras pesadas en mobile */
  .box-shadow-none {
    box-shadow: none !important;
  }
  
  /* Optimizar header sticky en mobile */
  #header {
    will-change: transform;
    backface-visibility: hidden;
  }
  
  /* Mejorar rendimiento de modales y overlays */
  .loading-overlay {
    will-change: opacity;
  }
  
  /* Optimizar botones WhatsApp */
  .whatsapp-btn,
  .float-wa {
    will-change: transform;
    backface-visibility: hidden;
  }
  
  /* Reducir complejidad visual en mobile */
  .text-shadow {
    text-shadow: none !important;
  }
  
  /* Optimizar toolbar mobile */
  .toolbar {
    will-change: transform;
    backface-visibility: hidden;
  }
  
  /* Mejorar rendimiento de fuentes */
  body, h1, h2, h3, h4, h5, h6 {
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* Optimizar grid de modelos */
  .row {
    contain: layout style;
  }
  
  /* Reducir reflows en mobile */
  .container,
  .container-fluid {
    contain: layout;
  }
  
  /* Optimizar footer en mobile */
  #footer {
    contain: layout style;
  }
  
  /* Mejorar rendimiento de navegación */
  .header-nav-main {
    will-change: transform;
  }
  
  /* Optimizar cookie popup en mobile */
  .cookie-popup {
    will-change: transform, opacity;
    backface-visibility: hidden;
  }
}

/* Optimizaciones específicas para pantallas muy pequeñas */
@media (max-width: 480px) {
  /* Desactivar completamente animaciones complejas */
  .appear-animation[data-appear-animation="backInLeft"],
  .appear-animation[data-appear-animation="backInRight"],
  .appear-animation[data-appear-animation="blurIn"] {
    animation: none !important;
    opacity: 1 !important;
  }
  
  /* Simplificar transiciones */
  * {
    transition-duration: 0.2s !important;
  }
  
  /* Reducir tamaño de fuentes para mejor legibilidad */
  .text-5 {
    font-size: 1.2rem !important;
  }
  
  .text-4 {
    font-size: 1.1rem !important;
  }
  
  /* Optimizar espaciado en pantallas pequeñas */
  .mt-5, .my-5 {
    margin-top: 2rem !important;
  }
  
  .mb-5, .my-5 {
    margin-bottom: 2rem !important;
  }
  
  /* Mejorar táctil en botones */
  .btn {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Optimizar carousel indicators */
  .carousel-indicators {
    margin-bottom: 0.5rem;
  }
  
  .carousel-indicators button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
}

/* Optimizaciones para conexiones lentas */
@media (prefers-reduced-data: reduce) {
  /* Desactivar animaciones */
  * {
    animation: none !important;
    transition: none !important;
  }
  
  /* Ocultar imágenes decorativas */
  .d-none.d-md-block img {
    display: none !important;
  }
}

/* Optimizaciones para usuarios que prefieren reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .carousel {
    transition: none !important;
  }
  
  .carousel-item {
    transition: none !important;
  }
}

/* Mejoras de accesibilidad táctil */
@media (pointer: coarse) {
  /* Aumentar área táctil de elementos interactivos */
  a, button, input, select, textarea {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Mejorar espaciado entre elementos táctiles */
  .nav-link {
    padding: 0.75rem 1rem;
  }
  
  /* Optimizar menú mobile */
  .header-nav-main nav ul li {
    padding: 0.5rem 0;
  }
}

/* Optimización de imágenes responsive */
@media (max-width: 768px) {
  /* Asegurar que las imágenes no causen layout shift */
  img {
    height: auto;
    max-width: 100%;
    vertical-align: middle;
  }
  
  /* Optimizar imágenes del slider */
  .carousel-item img {
    object-fit: cover;
    width: 100%;
    height: auto;
  }
  
  /* Mejorar carga de imágenes de modelos */
  .img-fluid {
    loading: lazy;
  }
}

/* Optimizaciones de rendimiento general */
@media (max-width: 768px) {
  /* Usar GPU para transformaciones */
  .anim-hover-scale-1-2,
  .carousel-item,
  .whatsapp-btn,
  #header {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
  
  /* Optimizar scroll */
  html {
    scroll-behavior: smooth;
  }
  
  /* Reducir complejidad de sombras */
  .shadow,
  .box-shadow {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  }
  
  /* Optimizar overlays */
  .loading-overlay {
    backdrop-filter: none;
  }
}

/* Mejoras para pantallas de alta densidad (Retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* Optimización de fuentes */
@media (max-width: 768px) {
  /* Reducir peso de fuentes */
  body {
    font-weight: 400;
  }
  
  h1, h2, h3 {
    font-weight: 600;
  }
  
  /* Optimizar line-height para legibilidad mobile */
  p, li {
    line-height: 1.6;
  }
}

/* Mejoras de UX mobile */
@media (max-width: 768px) {
  /* Mejorar visibilidad del botón WhatsApp */
  .whatsapp-btn {
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
  
  /* Optimizar toolbar */
  .toolbar {
    transition: transform 0.3s ease;
  }
  
  /* Mejorar footer mobile */
  #footer {
    padding: 2rem 0;
  }
  
  #footer .row {
    text-align: center;
  }
  
  /* Optimizar cookie popup */
  .cookie-popup {
    max-width: calc(100vw - 20px);
    left: 10px;
    right: 10px;
    bottom: 10px;
  }
}

/* Optimizaciones de carga progresiva */
.lazyload,
.lazyloading {
  opacity: 0;
  transition: opacity 0.3s;
}

.lazyloaded {
  opacity: 1;
}

/* Placeholder para imágenes lazy */
img[loading="lazy"] {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

img[loading="lazy"].lazyloaded {
  background: none;
  animation: none;
}