/**
 * Timeline Left Widget Styles
 * Todo alineado a la izquierda con línea vertical
 */

.timeline-left-container {
    position: relative;
    padding-left: 60px;
}

/* Línea vertical que crece automáticamente con el contenido */
.timeline-left-container::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #5DCDCD;
    z-index: -1; /* Debajo del bullet */
}

/* Cada item del timeline */
.timeline-left-item {
    position: relative;
    margin-bottom: 40px;
}

.timeline-left-item:last-child {
    margin-bottom: 0;
}

/* Bullet - punto circular HUECO */
.timeline-left-item::before {
    content: '';
    position: absolute;
    left: -49px; /* Centrado con la línea */
    top: 0; /* Controlable desde Elementor */
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #1a3844; /* Color de fondo para tapar la línea */
    border: 2px solid #5DCDCD;
    z-index: 10 !important; /* Forzar z-index por encima del CSS de Elementor */
}

/* Título */
.timeline-left-title {
    margin: 0 0 15px 0;
    font-size: 28px;
    color: #ffffff;
    font-weight: 300;
    line-height: 1.3;
}

/* Descripción */
.timeline-left-description {
    margin: 0;
    color: #d0d0d0;
    line-height: 1.6;
    font-size: 16px;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .timeline-left-container {
        padding-left: 40px;
    }
    
    .timeline-left-container::before {
        left: 12px;
    }
    
    .timeline-left-item::before {
        left: -33px;
        width: 14px;
        height: 14px;
        border-width: 2px;
    }
    
    .timeline-left-title {
        font-size: 22px;
        margin-bottom: 10px;
    }
    
    .timeline-left-description {
        font-size: 14px;
    }
    
    .timeline-left-item {
        margin-bottom: 30px;
    }
}

/* Animaciones - aparecer secuencialmente con fade */
@media (prefers-reduced-motion: no-preference) {
    .timeline-left-item {
        opacity: 0;
        animation: fadeInItem 0.8s ease forwards;
    }
    
    .timeline-left-item::before {
        opacity: 0;
        transform: scale(0);
        animation: fadeInBullet 0.5s ease forwards;
    }
    
    .timeline-left-item:nth-child(1) {
        animation-delay: 0.4s; /* +200ms */
    }
    
    .timeline-left-item:nth-child(1)::before {
        animation-delay: 0.6s; /* +200ms */
    }
    
    .timeline-left-item:nth-child(2) {
        animation-delay: 0.8s; /* +200ms */
    }
    
    .timeline-left-item:nth-child(2)::before {
        animation-delay: 1s; /* +200ms */
    }
    
    .timeline-left-item:nth-child(3) {
        animation-delay: 1.2s; /* +200ms */
    }
    
    .timeline-left-item:nth-child(3)::before {
        animation-delay: 1.4s; /* +200ms */
    }
    
    .timeline-left-item:nth-child(4) {
        animation-delay: 1.6s; /* +200ms */
    }
    
    .timeline-left-item:nth-child(4)::before {
        animation-delay: 1.8s; /* +200ms */
    }
    
    .timeline-left-item:nth-child(5) {
        animation-delay: 2s; /* +200ms */
    }
    
    .timeline-left-item:nth-child(5)::before {
        animation-delay: 2.2s; /* +200ms */
    }
    
    @keyframes fadeInItem {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes fadeInBullet {
        from {
            opacity: 0;
            transform: scale(0);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
}