/* 
 * Solución definitiva para problemas de scroll en móviles
 * Este archivo aplica correcciones para permitir el scroll normal en dispositivos móviles
 * donde elementos interactivos pueden interferir con el comportamiento natural de scroll.
 */

@media (max-width: 991px) {
  /* Correcciones generales de scroll */
  html, 
  body {
    overscroll-behavior: auto !important;
   
    -webkit-overflow-scrolling: touch !important;
  }

  /* Prevenir que posiciones fixed o absolute bloqueen el scroll */
  * {
    touch-action: pan-y !important;
  }

  /* EXCEPCIÓN: Asegurar que todos los botones y enlaces funcionen */
  a, button, input[type="submit"], input[type="button"], [role="button"], .btn {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    position: relative !important;
    z-index: 50 !important;
  }

  /* EXCEPCIÓN adicional para enlaces específicos */
  a[href="#contacto"], a[href="#servicios"] {
    z-index: 100 !important;
  }

  /* Arreglo para sección de galería */
  .gallery-section,
  .gallery-container,
  .gallery-item,
  .gallery-row {
    
    pointer-events: auto !important;
    overflow: visible !important;
  }

  /* Eliminación de efectos que bloquean scroll */
  .gallery-overlay {
    pointer-events: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .gallery-content {
    transform: translateY(0) !important;
    transition: none !important;
  }

  /* Ocultar textos en móvil para evitar problemas de scroll */
  .gallery-text {
    display: none !important;
  }

  /* Solución para timeline */
  .timeline-section,
  .timeline-container,
  .timeline-card,
  .timeline-content {
    max-height: none !important;
    overflow: visible !important;
    
  }

  /* Arreglo general para cualquier overlay (excepto botones y enlaces) */
  [class*="overlay"]:not(a):not(button):not([role="button"]),
  [class*="hover"]:not(a):not(button):not([role="button"]) {
    pointer-events: none !important;
  }

  /* Corrección para contenido de scroll horizontal */
  .timeline-cards-slider,
  [class*="slider"],
  [class*="carousel"] {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    
  }
  
  /* Asegurar que los botones siguen siendo interactivos */
  button, 
  .btn,
  a.btn,
  [role="button"],
  input[type="button"],
  input[type="submit"] {
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
  
  /* Evitar zoom no deseado en elementos interactivos */
  input,
  textarea,
  select,
  button {
    font-size: 16px !important; /* Previene zoom automático en iOS */
  }

  /* Ajustes globales para todos los elementos con efectos hover */
  * {
    touch-action: pan-y !important;
  }

  /* Prevenir que cualquier elemento bloquee el scroll */
  a, button, .btn, [role="button"], [tabindex="0"] {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    pointer-events: auto !important;
  }

  /* Ajustes específicos para galería */
  .gallery-item {
    touch-action: pan-y !important;
    pointer-events: auto !important;
    cursor: default !important;
    transform: none !important;
    transition: none !important;
  }

  .gallery-image-wrapper {
    touch-action: pan-y !important;
  }

  .gallery-category {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: none !important;
  }

  .gallery-title::after {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
    animation: none !important;
  }

  /* Permitir que todas las imágenes sean tocables sin bloquear scroll */
  img {
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  /* Prevenir bloqueos de scroll en todo el sitio */
  [data-aos], 
  .aos-animate, 
  .aos-init {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }

  /* Tamaños específicos para móviles */
  @media (max-width: 480px) {
    .gallery-item,
    .gallery-item.featured-xl,
    .gallery-item.featured {
      grid-column: span 2 !important;
    }
    
    .gallery-item:not(.vertical) {
      grid-row: span 1 !important;
      height: auto !important;
      min-height: 180px !important;
    }
  }
}