body {
    font-family: 'Poppins', sans-serif;
}

/* Animación para el menú móvil */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

.mobile-menu {
    animation: slideDown 0.3s ease forwards;
}

.mobile-menu.closing {
    animation: slideUp 0.3s ease forwards;
}

/* Transición suave para el hover */
.menu-link {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Animación de entrada: Fade In */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Animación de entrada: Fade In desde la izquierda */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animación de entrada: Fade In desde la derecha */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animación de entrada: Fade In desde arriba */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animación de entrada: Fade In desde abajo */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animación de entrada: Zoom In */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animación de entrada: Rotate In */
@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-180deg);
    }

    to {
        opacity: 1;
        transform: rotate(0);
    }
}

/* Estilos iniciales para elementos animados */
.fade-in,
.fade-in-left,
.fade-in-right,
.fade-in-up,
.fade-in-down,
.zoom-in,
.rotate-in {
    opacity: 0;
    /* Inicialmente oculto */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Aplicar animaciones específicas a cada clase */
.fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

.fade-in-left {
    transform: translateX(-100px);
    animation: fadeInLeft 0.5s ease-out forwards;
}

.fade-in-right {
    transform: translateX(100px);
    animation: fadeInRight 0.5s ease-out forwards;
}

.fade-in-up {
    transform: translateY(100px);
    animation: fadeInUp 0.5s ease-out forwards;
}

.fade-in-down {
    transform: translateY(-100px);
    animation: fadeInDown 0.5s ease-out forwards;
}

.zoom-in {
    transform: scale(0.5);
    animation: zoomIn 0.5s ease-out forwards;
}

.rotate-in {
    transform: rotate(-180deg);
    animation: rotateIn 0.5s ease-out forwards;
}