/*
==================================================================
== ANIMACIONES, TRANSICIONES Y EFECTOS HOVER
==================================================================
*/

/* Transiciones suaves para una experiencia de usuario más fluida */
.nav-one-item, .nav-two-item, .dropdown-item, .footer-link, .social-icon, .navbar-toggler, .benefit-card, .card-hover, .team-card, .team-socials .social-icon {
    transition: all 0.3s ease-in-out;
}

/* Efectos Hover para interactividad */
.nav-one-item:hover, .nav-one-item.active {
    color: var(--primary-color);
}

.nav-two-item:hover, .nav-two-item.active {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-color) !important;
    transform: translateY(-2px); /* Efecto de elevación sutil */
}

.dropdown-item:hover, .dropdown-item.active {
    background-color: var(--primary-color);
    color: var(--text-color) !important;
}

.footer-link:hover {
    color: var(--text-color) !important;
    transform: translateX(5px); /* Desplazamiento ligero a la derecha */
}

.social-icon:hover {
    color: var(--secondary-color);
    transform: scale(1.2) rotate(5deg); /* Efecto dinámico */
}

.team-socials .social-icon:hover {
    color: var(--primary-color);
    transform: scale(1.1);
}

.footer-brand-link:hover {
    text-decoration: underline !important;
}

.navbar-toggler:hover {
    opacity: 0.8;
}

/* Animación para el acordeón de beneficios */
.accordion-button:not(.collapsed) .accordion-icon {
    transform: rotate(10deg) scale(1.1);
}

/* Animación para la línea de tiempo */
.timeline-item.left .timeline-content::before {
    content: ''; position: absolute; top: 1.5rem; width: 0; height: 0; border-style: solid;
    right: -10px; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #fff;
}
.timeline-item.right .timeline-content::before {
    content: ''; position: absolute; top: 1.5rem; width: 0; height: 0; border-style: solid;
    left: -10px; border-width: 10px 10px 10px 0; border-color: transparent #fff transparent transparent;
}

@media (max-width: 991.98px) {
    .timeline-item.left .timeline-content::before, .timeline-item.right .timeline-content::before {
        left: -10px; border-width: 10px 10px 10px 0; border-color: transparent #fff transparent transparent;
    }
}