document.addEventListener('DOMContentLoaded', () => {
	const zoomables = document.querySelectorAll('.zoomable img');
	const modal = document.getElementById('zoomModal');
	const zoomedImage = document.getElementById('zoomedImage');
	const closeModal = document.getElementById('closeModal');

	// Abrir el modal al hacer clic en una imagen
	zoomables.forEach(img => {
		img.addEventListener('click', () => {
			zoomedImage.src = img.src; // Poner la imagen seleccionada en el modal
			modal.classList.add('active'); // Mostrar el modal
		});
	});

	// Cerrar el modal al hacer clic en el botón de cierre
	closeModal.addEventListener('click', () => {
		modal.classList.remove('active');
	});

	// Cerrar el modal al hacer clic fuera de la imagen
	modal.addEventListener('click', (e) => {
		if (e.target === modal) {
			modal.classList.remove('active');
		}
	});

	// Cerrar el modal con la tecla Escape
	document.addEventListener('keydown', (e) => {
		if (e.key === 'Escape' && modal.classList.contains('active')) {
			modal.classList.remove('active');
		}
	});
});