/* Estilos globales */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    scroll-behavior: smooth;
}

/* Animaciones */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeInUp {
    animation: fadeInUp 1s ease forwards;
}

/* Personalización de Tailwind */
@layer components {
    .btn {
        @apply py-3 px-6 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 shadow-lg;
    }
    .btn-primary {
        @apply bg-red-600 hover:bg-red-700 text-white font-bold;
    }
    .btn-secondary {
        @apply bg-white hover:bg-gray-100 text-gray-800 font-bold;
    }
}

/* Efecto hover para tarjetas */
.bg-gray-50:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Estilo para formulario */
form input {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

form input:focus {
    outline: none;
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}
/* Animaciones */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

/* Personalización de Tailwind */
@layer components {
    .btn {
        @apply py-2 px-4 rounded transition duration-200 ease-in-out;
    }
    .btn-primary {
        @apply bg-red-600 hover:bg-red-700 text-white font-medium;
    }
}