/* /css/estilos.css */

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-250px * 3)); } 
}

.marquee-container {
    overflow: hidden;
    width: 100%;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-content {
    display: flex;
    width: calc(250px * 6);
    animation: scroll 25s linear infinite;
}

.marquee-item {
    width: 250px;
    flex-shrink: 0;
}

/* Nueva animación para el Hero */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Clase de utilidad que usa la animación */
.animate-fade-in-up {
    opacity: 0; /* Empieza invisible */
    animation: fadeInUp 0.8s ease-out forwards; /* 'forwards' mantiene el estado final */
}