/* --- 1. Definimos la Animación del Scroll --- */
@keyframes scrollHorizontal {
  0% {
    /* Empezamos en la posición original */
    transform: translateX(0);
  }
  100% {
    /* Movemos el track 100% de su propio ancho a la izquierda.
       Esto hace que el "Track 1" desaparezca por completo
       y el "Track 2" quede exactamente donde empezó el "Track 1". */
    transform: translateX(-100%);
  }
}

/* --- 2. El Contenedor (La "Ventana") --- */
.scroll-container {

  width: 100%;
  overflow: hidden; /* Oculta todo lo que se salga de la ventana */
  
  /* Hacemos que el contenedor sea flex para poner los 2 tracks en línea */
  display: flex;
  flex-direction: row;
  gap: 3rem;
  
  /* Solo para el demo */
  padding: 1rem 0;

}

/* --- 3. Los Tracks (El contenido que se mueve) --- */
.tecnologias-icons{
  /* Hacemos que los <ul> sean flex para alinear los <li> */
  display: flex;
  gap: 3rem;
  
  /* Evita que los tracks se encojan */
  flex-shrink: 0;

  /* Aplicamos la animación */
  animation-name: scrollHorizontal;
  animation-duration: 15s;      /* Ajusta la velocidad */
  animation-timing-function: linear; /* Velocidad constante (clave para el bucle) */
  animation-iteration-count: infinite; /* Bucle infinito */
  
  /* Reseteo de estilos de lista */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- 4. Los Items (Cada elemento) --- */
.tecnologias-icons>.tecnologia-icon {
  flex-shrink: 0; /* Evita que los <li> se encojan */
  
  /* Dale a tus items un ancho fijo o variable */
   /* Espacio entre items */

  /* Estilos de demo */
}

/* --- Truco Adicional: Pausar al pasar el mouse --- */
.scroll-container:hover .tecnologias-icons {
  animation-play-state:running;
}








.scroll-container-i {
  width: 100%;
  overflow: hidden; /* Oculta todo lo que se salga de la ventana */
  
  /* Hacemos que el contenedor sea flex para poner los 2 tracks en línea */
  display: flex;
  flex-direction: row;
  gap: 1rem;
  
  /* Solo para el demo */
  padding: 1rem 0;

}

.grid-index-industrias{
  /* Hacemos que los <ul> sean flex para alinear los <li> */
  display: flex;
  gap: 1rem;
  
  /* Evita que los tracks se encojan */
  flex-shrink: 0;

  /* Aplicamos la animación */
  animation-name: scrollHorizontal;
  animation-duration: 30s;      /* Ajusta la velocidad */
  animation-timing-function: linear; /* Velocidad constante (clave para el bucle) */
  animation-iteration-count: infinite; /* Bucle infinito */
  
  /* Reseteo de estilos de lista */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- 4. Los Items (Cada elemento) --- */
.grid-index-industrias>.card-industria {
  flex-shrink: 0; /* Evita que los <li> se encojan */
  
  /* Dale a tus items un ancho fijo o variable */
   /* Espacio entre items */

  /* Estilos de demo */
}

.scroll-container-i:hover .grid-index-industrias {
  animation-play-state: paused;
}





.scroll-container-c {
  width: 100%;
  overflow: hidden; /* Oculta todo lo que se salga de la ventana */
  
  /* Hacemos que el contenedor sea flex para poner los 2 tracks en línea */
  display: flex;
  flex-direction: row;
  gap: 1rem;
  
  /* Solo para el demo */
  padding: 1rem 0;
}

.grid-industrias-c{
  /* Hacemos que los <ul> sean flex para alinear los <li> */
  display: flex;
  gap: 1rem;
  
  /* Evita que los tracks se encojan */
  flex-shrink: 0;

  /* Aplicamos la animación */
  animation-name: scrollHorizontal;
  animation-duration: 45s;      /* Ajusta la velocidad */
  animation-timing-function: linear; /* Velocidad constante (clave para el bucle) */
  animation-iteration-count: infinite; /* Bucle infinito */
  
  /* Reseteo de estilos de lista */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- 4. Los Items (Cada elemento) --- */
.grid-industrias-c>.card-industria {
  flex-shrink: 0; /* Evita que los <li> se encojan */
  
  /* Dale a tus items un ancho fijo o variable */
   /* Espacio entre items */

  /* Estilos de demo */
}

.scroll-container-c:hover .grid-industrias-c {
  animation-play-state: paused;
}



@media (max-width: 992px) {
  .scroll-container, .tecnologias-icons {gap: 1rem;}

  .scroll-container-i, .grid-index-industrias {gap: 1rem;}

  .scroll-container-c, .grid-industrias-c {gap: 0.5rem;}
}