/* 1.- Marco donde solo se ve una imagen a la vez */
 /*.carousel-slider {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    overflow: hidden; /* oculta las cuatro imagenes restantes 
    border-radius: 12px;
}

/* Pista que contiene las 5 imagenes en fila  
 .slider-track {
    display: flex;
    width: 500%; /* 100% por cada una de las 5 imagenes 
    /* Animacion : nombre / duracion total / curva / repeticion infinita 
    animation: autoplay 15s  ease-in-out infinite;
}   

/* pausa el carrusel cuando el usuario pasa el cursor sobre él 
.slider-track:hover{
    animation-play-state:paused;
}

.slider-track img{
    width: 20%; /* cada imagen ocupa 1/5 parte del ancho del track (100% del contenedor visible) 
    height: auto;
    object-fit: cover;
}*/



/*2.- Definicion  de la animacion de desplazamiento  
@keyframes autoplay{
    /* Imagen 1
    0%, 15% {transform: translateX(0%);}
    /* Transicion a Imagen 2
    20%, 35% {transform: translateX(-20%);}
    /* Transicion a Imagen 3
    40%, 55% {transform: translateX(-40%);}
    /* Transicion a Imagen 4
    60%, 75% {transform: translateX(-60%);}
    /* Transicion a Imagen 5
    80%, 95% {transform: translateX(-80%);}
    /* Vuelve al inicio de forma fluida
    100% {transform: translateX(0%);}
}*/

:root {
  --marquee-gap: 40px;
  --marquee-gap-botton: 20px;
  --marquee-speed: 20s;
}

/* Ventana principal footer*/
.marquee-container {
  width: 100%;
  overflow: hidden;
  background-color: #0f172a;
  padding: 40px 0;
  display: flex;
  user-select: none;
}

/* Ventana Principal botton */
.marquee-container-botton {
  width: 70%;
  overflow: hidden;
  background-color:white;
  padding: 20px 0;
  display: flex;
  user-select: none;
}

/* Pista continua */
.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  /* Mantenemos una animación suave usando la variable */
  animation: scrollSeamlessRight var(--marquee-speed) linear infinite;
}

/* Pausa fluida al interactuar */
.marquee-container:hover .marquee-track {
  animation-play-state: paused;
}

/* Pausa fluida al interactuar botton*/
.marquee-container-botton:hover .marquee-track {
  animation-play-state: paused;
}

/* Cada grupo duplicado */
.marquee-group {
  display: flex;
  align-items: center;
  gap: var(--marquee-gap);
  /* 
    Usamos margin-right en lugar de padding-left para que el salto 
    entre el último item de un grupo y el primero del otro sea exacto.
  */
  margin-right: var(--marquee-gap);
  flex-shrink: 0;
}

/* botton */
.marquee-group-botton {
  display: flex;
  align-items: center;
  gap: var(--marquee-gap-botton);
  /* 
    Usamos margin-right en lugar de padding-left para que el salto 
    entre el último item de un grupo y el primero del otro sea exacto.
  */
  margin-right: var(--marquee-gap-botton);
  flex-shrink: 0;
}

.marquee-group img {
  width: 250px;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

/* botton */
.marquee-group-botton img {
  width: 250px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Animación continua de Izquierda a Derecha */
@keyframes scrollSeamlessRight {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}