/*
 * Hoja de Estilos Personalizada para PANKEISTORE S.A. de C.V.
 */

/* Animación para el carrusel de logos */
@keyframes slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.animate-slide {
    animation: slide 30s linear infinite;
    display: flex; /* Asegura que los elementos internos se alineen */
    width: 200%; /* El doble del contenedor para el bucle */
}

/* Animaciones de entrada */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 1s ease-out forwards;
}

/* Estilos para los filtros de productos */
.filter-btn.active {
    background-color: #E30613; /* panke-red */
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Estilos para las tarjetas de producto (para la lógica de JS) */
.product-card {
    transition: opacity 0.4s ease-out, transform 0.3s ease-out;
}

.product-card.hidden {
    opacity: 0;
    transform: scale(0.9);
    display: none; /* Ocultar completamente después de la transición */
}

/* Estilo para el header al hacer scroll */
#header.scrolled {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    background-color: rgba(255, 255, 255, 0.95);
}