document.addEventListener("DOMContentLoaded", function() {
    // Mostrar el modal al cargar la página
    var modal = document.getElementById("fondo-modal");
    var cerrarBtn = document.getElementsByClassName("cerrar-modal")[0];
    
    modal.style.display = "block";

    // Cerrar el modal cuando se hace clic en el botón de cerrar
    cerrarBtn.onclick = function() {
        modal.style.display = "none";
    }

    // Cerrar el modal cuando se hace clic fuera del modal
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }

    // Lógica del carrusel principal
    var carruselItems = document.querySelector('.carrusel-items');
    var carruselItem = document.querySelectorAll('.carrusel-item');
    var anteriorBtn = document.querySelector('.anterior');
    var siguienteBtn = document.querySelector('.siguiente');
    var currentIndex = 0;

    function mostrarCarrusel(index) {
        carruselItems.style.transform = 'translateX(' + (-index * 100) + '%)';
    }

    anteriorBtn.addEventListener('click', function() {
        currentIndex = (currentIndex > 0) ? currentIndex - 1 : carruselItem.length - 1;
        mostrarCarrusel(currentIndex);
    });

    siguienteBtn.addEventListener('click', function() {
        currentIndex = (currentIndex < carruselItem.length - 1) ? currentIndex + 1 : 0;
        mostrarCarrusel(currentIndex);
    });
});