/*CARRUCEL DE MARCAS DE PRODUCTOS*/
<style>
/* Estilos específicos para el carrusel de marcas */
.brand-carousel-container {
    overflow: hidden; /* Oculta las imágenes que están fuera del contenedor */
    width: 100%;
    margin: 20px 0;
    padding: 10px 0;
    background-color: white; /* w3-indigo-lightest #e8eaf6; */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.brand-carousel-track {
    display: flex; /* Permite que las imágenes se coloquen una al lado de la otra */
    white-space: nowrap; /* Evita que las imágenes salten a la siguiente línea */
    animation: scrollBrands 30s linear infinite; /* Animación CSS */
}

.brand-carousel-track:hover {
    animation-play-state: paused; /* Pausa la animación al pasar el ratón */
}

.brand-carousel-item {
    flex-shrink: 0; /* Evita que las imágenes se encojan */
    width: calc(100% / 7); /* Divide el ancho del contenedor en 7 para 7 columnas */
    /* text-align: center; -- Esta línea no es necesaria si centras la imagen con margin: auto */
    padding: 10px 5px; /* Espacio alrededor de cada imagen */
    box-sizing: border-box; /* Incluye padding en el width */

    /* Agregado para centrar vertical y horizontalmente si el item fuera un contenedor flex */
    display: flex; /* Habilitar flexbox en el contenedor del item */
    justify-content: center; /* Centrar horizontalmente el contenido del item */
    align-items: center; /* Centrar verticalmente el contenido del item */
}

.brand-carousel-item img {
    max-width: 60%; /* Asegura que la imagen no sea más grande que su contenedor */
    height: auto;
    display: block; /* Necesario para que margin: auto funcione correctamente */
    margin: 0 auto; /* Centra la imagen horizontalmente */
    filter: grayscale(0%); /* Efecto de escala de grises para las marcas */
    transition: filter 0.3s ease-in-out;
}

.brand-carousel-item img:hover {
    filter: grayscale(80%); /* Color al pasar el ratón */
}

/* Animación de desplazamiento */
@keyframes scrollBrands {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); } /* Desplaza todo el ancho de la pista */
}

/* Media Queries para responsividad */
@media (max-width: 992px) { /* Tabletas */
    .brand-carousel-item {
        width: calc(100% / 5); /* 5 columnas en tabletas */
    }
    /* No es necesario cambiar la animación keyframes aquí a menos que el número total de ítems cambie drásticamente */
    /* La animación se basa en el 100% del track, no en el número de columnas visibles */
}

@media (max-width: 600px) { /* Teléfonos */
    .brand-carousel-item {
        width: calc(100% / 3); /* 3 columnas en teléfonos */
    }
    /* Igual que en tabletas, no se cambia el keyframes aquí */
}
</style> /*FIN - CARRUCEL DE MARCAS DE PRODUCTOS*/