.transition-all {
    transition: all 0.3s ease;
}


/* Animación de entrada hacia arriba */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animación de entrada lateral */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Efecto de pulso suave */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* ===== ANIMACIONES DEL BANNER ===== */
/* Transición para cambiar de slide */
.banner-section {
    transition: opacity 0.5s ease;
}

/* Animación del contenido del banner */
.banner-content {
    animation: fadeInUp 1s ease-out forwards;
}

/* Elementos que se animan al entrar en viewport */
.welcome-title, .welcome-point, .welcome-image {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Clase que activa las animaciones */
.welcome-title.animated, .welcome-point.animated, .welcome-image.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Animación para los puntos en la sección de bienvenida */
.welcome-point-icon {
    position: relative;
    overflow: hidden;
}

.welcome-point-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    transition: left 0.3s ease;
}

.welcome-point:hover .welcome-point-icon::after {
    left: 100%;
}


/* Animación para subrayado del menú */
.main-menu a::after {
    transition: width 0.3s ease, background-color 0.3s ease;
}

/* Animación para header al hacer scroll */
.main-header {
    transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

.main-header.scrolled {
    padding: 20px 0;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

/* ===== ANIMACIONES PARA BOTONES Y LINKS ===== */
.btn, a.btn {
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.btn:hover, a.btn:hover {
    transform: translateY(-2px);
}

.social-icons a {
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}


/* Estilos para animaciones de la galería */
.gallery-animated {
    position: relative;
    transition: all 0.3s ease-out;
}

.gallery-item-animated {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.slide-left {
    animation: slideLeft 0.3s forwards;
}

.slide-right {
    animation: slideRight 0.3s forwards;
}


@keyframes slideLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-20px); opacity: 0.8; }
}

@keyframes slideRight {
    0% { transform: translateX(0); }
    100% { transform: translateX(20px); opacity: 0.8; }
}