@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: 'Inter';
    src: url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
}

body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.btn-primary {
    @apply bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 text-white font-bold py-3 px-8 rounded-full shadow-xl hover:shadow-2xl transform hover:scale-105 transition duration-300;
}

.btn-secondary {
    @apply bg-gradient-to-r from-white to-gray-100 text-indigo-600 font-bold py-3 px-8 rounded-full shadow-xl hover:shadow-2xl transform hover:scale-105 transition duration-300;
}

.card-premio {
    @apply bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-500 hover:shadow-2xl hover:-translate-y-2;
}

.card-participar {
    @apply bg-gradient-to-br from-white to-gray-50 rounded-2xl shadow-2xl overflow-hidden transition-all duration-500 hover:shadow-3xl hover:-translate-y-3;
}

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

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-bounce {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.carousel-track {
    display: flex;
    animation: slide 20s linear infinite;
}

.carousel-item {
    flex: 0 0 auto;
}

@keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.carousel-container:hover .carousel-track {
    animation-play-state: paused;
}

@media (max-width: 768px) {
    .carousel-item {
        width: 100%;
    }

    .carousel-track {
        animation: slide-mobile 15s linear infinite;
    }

    @keyframes slide-mobile {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
}