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

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

/* Transiciones suaves para elementos interactivos */
a, button {
    transition: all 0.3s ease;
}

/* Efecto hover para las tarjetas de servicios */
.bg-white {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Estilo para el scroll */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9; /* slate-100 */
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* slate-300 */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; /* slate-400 */
}

/* Animaciones para elementos que entran en el viewport */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-up {
    animation: slideUp 0.6s ease-out forwards;
}

/* Efecto de desenfoque para el header */
.backdrop-blur-sm {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Asegurar que el hero section cubra la pantalla */
section:first-of-type {
    background-size: cover;
    background-position: center;
}