(function () {
  // Recorre todos los grupos de logos
  document.querySelectorAll('.logoTrack').forEach(function(track) {

    const wrapper = track.parentElement;
    wrapper.classList.add('logos-wrapper');

    function updateOverflow() {
      const isOverflowing = track.scrollWidth > (track.clientWidth + 1);
      wrapper.classList.toggle('is-overflowing', isOverflowing);
    }

    // Detecta cambios de tamaño o de contenido
    const mo = new MutationObserver(updateOverflow);
    mo.observe(track, { childList: true, subtree: true, attributes: true });
    window.addEventListener('resize', updateOverflow);

    // Llamada inicial
    updateOverflow();

    // Scroll con los botones (opcional)
    const leftBtn  = wrapper.querySelector('.scrollLeft');
    const rightBtn = wrapper.querySelector('.scrollRight');

    if (leftBtn && rightBtn) {
      leftBtn.addEventListener('click', () =>
        track.scrollBy({ left: -track.clientWidth * 0.6, behavior: 'smooth' })
      );
      rightBtn.addEventListener('click', () =>
        track.scrollBy({ left:  track.clientWidth * 0.6, behavior: 'smooth' })
      );
    }

  });
})();

 document.addEventListener('DOMContentLoaded', () => {
	if(window.location.pathname !== '/') return;
  [...document.querySelectorAll('.scrollLeft')].forEach(button => {
    const track = document.querySelector(`#${button.getAttribute('data-id')}`);
		button.onclick  = () => track.scrollBy({ left: -200, behavior: 'smooth' });
	});
  [...document.querySelectorAll('.scrollRight')].forEach(button => {
    const track = document.querySelector(`#${button.getAttribute('data-id')}`);
		button.onclick  = () => track.scrollBy({ left: 200, behavior: 'smooth' });
	});
 });