rf-v4.9-desafios+soluciones

js/main.js

@@ -1343,3 +1343,57 @@ async function initSearchPage() {
     }, 220);
   });
 }
+document.addEventListener('DOMContentLoaded', function() {
+  // Seleccionar todas las tarjetas con data-open-modal
+  const tarjetas = document.querySelectorAll('[data-open-modal]');
+
+  tarjetas.forEach(function(tarjeta) {
+    const modalId = tarjeta.getAttribute('data-open-modal');
+    const modal = document.getElementById(modalId);
+    if (!modal) return;
+
+    const closeBtn = modal.querySelector('.modal-close-btn');
+
+    // Abrir modal al hacer click en la tarjeta
+    tarjeta.addEventListener('click', function(e) {
+      // Evita que se abra si el click fue en el botón/link interno
+      if (e.target.closest('.solucion-card__btn')) return;
+      
+      modal.classList.add('is-active');
+      document.body.style.overflow = 'hidden';
+    });
+
+    // Abrir con Enter o Space (accesibilidad)
+    tarjeta.addEventListener('keydown', function(e) {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        modal.classList.add('is-active');
+        document.body.style.overflow = 'hidden';
+      }
+    });
+
+    // Cerrar con botón X
+    if (closeBtn) {
+      closeBtn.addEventListener('click', function() {
+        modal.classList.remove('is-active');
+        document.body.style.overflow = '';
+      });
+    }
+
+    // Cerrar al hacer click fuera del modal
+    modal.addEventListener('click', function(e) {
+      if (e.target === modal) {
+        modal.classList.remove('is-active');
+        document.body.style.overflow = '';
+      }
+    });
+
+    // Cerrar con tecla ESC
+    document.addEventListener('keydown', function(e) {
+      if (e.key === 'Escape' && modal.classList.contains('is-active')) {
+        modal.classList.remove('is-active');
+        document.body.style.overflow = '';
+      }
+    });
+  });
+});