Lorem ipsum dolor sit amet, consectetur elit

heading 2

Lorem ipsum dolor sit amet

heading 4

Lorem dolor sit amet

<svg width="100%" height="100%" viewBox="0 0 401 172" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 4.00327C102.664 4.8327 98.9365 167.393 197.6 168.222C296.264 169.051 297.991 3.17367 396.654 4.0031" stroke="black" stroke-width="7" stroke-miterlimit="10" stroke-linecap="round" stroke-dasharray="10 10"/>
</svg>
<svg width="100%" height="100%" viewBox="0 0 401 172" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 4.00327C102.664 4.8327 98.9365 167.393 197.6 168.222C296.264 169.051 297.991 3.17367 396.654 4.0031" stroke="black" stroke-width="7" stroke-miterlimit="10" stroke-linecap="round" stroke-dasharray="17.39 17.39"/>
</svg>
<svg width="100%" height="100%" viewBox="0 0 401 172" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 4.00327C102.664 4.8327 98.9365 167.393 197.6 168.222C296.264 169.051 297.991 3.17367 396.654 4.0031" stroke="black" stroke-width="7" stroke-miterlimit="10" stroke-linecap="round" stroke-dasharray="17.39 17.39"/>
</svg>

heading 1

Lorem ipsum dolor sit

heading 3

Lorem ipsum sit amet

heading 5

Lorem ipsum dolor sit amet

<script>
  
document.addEventListener('DOMContentLoaded', function() {
  
  	const screenSizeTimeline = 767; 
  
    let originalTopCards = [];

    // Función que guarda las tarjetas originales
    function saveOriginalCards() {
        const topGrid = document.querySelector('.fb-path-timeline__grid--top');
        originalTopCards = Array.from(topGrid.querySelectorAll('.fb-path-timeline__card'));
    }

    // Función que mueve las tarjetas
    function moveCards() {
        const topGrid = document.querySelector('.fb-path-timeline__grid--top');
        const bottomGrid = document.querySelector('.fb-path-timeline__grid--bottom');

        if (window.innerWidth <= screenSizeTimeline) {
            // Mover tarjetas de top a bottom intercaladas
            originalTopCards.forEach((card, index) => {
                const position = (index + 1) * 2 - 1;
                if (bottomGrid.children.length >= position) {
                    bottomGrid.insertBefore(card, bottomGrid.children[position]);
                } else {
                    bottomGrid.appendChild(card);
                }
            });
        } else {
            // Devolver todas las tarjetas a top
            originalTopCards.forEach(card => {
                if (!topGrid.contains(card)) {
                    topGrid.appendChild(card);
                }
            });
        }
    }

    // Función throttle para optimizar el resize
    function throttle(func, limit) {
        let lastFunc;
        let lastRan;
        return function() {
            const context = this;
            const args = arguments;
            if (!lastRan) {
                func.apply(context, args);
                lastRan = Date.now();
            } else {
                clearTimeout(lastFunc);
                lastFunc = setTimeout(function() {
                    if ((Date.now() - lastRan) >= limit) {
                        func.apply(context, args);
                        lastRan = Date.now();
                    }
                }, limit - (Date.now() - lastRan));
            }
        };
    }

    // Guardar las tarjetas originales al cargar la página
    saveOriginalCards();

    // Ejecutar la función al cargar la página
    moveCards();

    // Ejecutar la función throttle cuando la ventana cambia de tamaño
    window.addEventListener('resize', throttle(moveCards, 1000));
});



</script>