diff --git a/contenido/03.html b/contenido/03.html
index 1a6c437..3d7c2fe 100644
--- a/contenido/03.html
+++ b/contenido/03.html
@@ -61,6 +61,9 @@
               </div>
             </div>
           </div>
+          <div class="col-12 text-center mb-3">
+            <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+          </div>
           <div class="col-12">
             <div class="row justify-content-center">
               <div class="col-12">
diff --git a/contenido/04.html b/contenido/04.html
index 2570cb3..2b2a4ed 100644
--- a/contenido/04.html
+++ b/contenido/04.html
@@ -89,6 +89,9 @@
               </div>
             </div>
           </div>
+          <div class="col-12 text-center mb-3">
+            <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+          </div>
           <div class="col-12">
             <div class="row justify-content-center">
               <div class="col-12 mb-3">
diff --git a/contenido/05.html b/contenido/05.html
index 0aaa880..3a9fe76 100644
--- a/contenido/05.html
+++ b/contenido/05.html
@@ -22,7 +22,7 @@
   } */
 
   .content-enfermedad img {
-    height: 250px;
+    height: 240px;
   }
 
   .card-drag {
@@ -57,7 +57,7 @@
             <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
             <!-- <h3 class="text-verde-oscuro fw-bold"><span class="text-lila-claro">></span> Glucosa</h3> -->
           </div>
-          <div class="col-12 mb-3">
+          <div class="col-12">
             <div class="card border-0 my-2 rounded bg-secondary shadow p-3 text-center">
               <div class="d-flex justify-content-center align-items-center flex-row">
                 <img src="img/2.1.png" class="img-fluid mx-3" />
@@ -65,6 +65,9 @@
               </div>
             </div>
           </div>
+          <div class="col-12 text-center mb-3">
+            <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+          </div>
           <div class="col-12 mb-3">
             <div id="content-drags" class="d-flex flex-row justify-content-center gap-3"></div>
           </div>
@@ -72,22 +75,22 @@
             <div class="card bg-transparent border-0 rounded-0 shadow-none p-0">
               <div class="d-flex flex-row justify-content-center gap-3">
                 <div class="content-enfermedad text-center">
-                  <div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 my-3">
+                  <div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 my-2">
                     <img src="img/5.1a.png" class="img-fluid" />
                   </div>
                 </div>
                 <div class="content-enfermedad text-center">
-                  <div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 my-3">
+                  <div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 my-2">
                     <img src="img/5.2a.png" class="img-fluid" />
                   </div>
                 </div>
                 <div class="content-enfermedad text-center">
-                  <div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 my-3">
+                  <div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 my-2">
                     <img src="img/5.3a.png" class="img-fluid" />
                   </div>
                 </div>
                 <div class="content-enfermedad text-center">
-                  <div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 my-3">
+                  <div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 my-2">
                     <img src="img/5.4a.png" class="img-fluid" />
                   </div>
                 </div>
diff --git a/contenido/06.html b/contenido/06.html
index 13281ee..7b057b5 100644
--- a/contenido/06.html
+++ b/contenido/06.html
@@ -24,7 +24,7 @@
             <h2 class="text-center fw-bold text-primary">¿Cómo funciona la diálisis peritoneal?<sup class="fw-bold">1,2,4,6</sup></h2>
             <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
           </div>
-          <div class="col-9 mb-3">
+          <div class="col-9 mb-2">
             <div class="card border-0 my-2 rounded bg-secondary shadow p-3 text-center">
               <div class="d-flex justify-content-center align-items-center flex-row">
                 <img src="img/2.1.png" class="img-fluid mx-3" />
@@ -32,6 +32,9 @@
               </div>
             </div>
           </div>
+          <div class="col-12 text-center mb-3">
+            <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+          </div>
           <div class="col-12">
             <div id="activity1" class="my-4">
               <div id="sortable-cards" class="d-flex flex-row gap-3 justify-content-center flex-wrap">
diff --git a/contenido/07.html b/contenido/07.html
index 7773f0c..7371c16 100644
--- a/contenido/07.html
+++ b/contenido/07.html
@@ -189,9 +189,12 @@
     <div class="container-fluid">
       <div class="row justify-content-center align-items-center">
         <div id="txt-question" class="col-12 text-center text-verde-oscuro fw-bold mb-3"></div>
-        <div class="col-12">
+        <div class="col-12 mb-3">
           <div id="txt-answers" class="d-flex flex-row justify-content-center align-items-center gap-3"></div>
         </div>
+        <div class="col-12 text-center">
+          <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+        </div>
       </div>
     </div>
   </div>
diff --git a/contenido/08.html b/contenido/08.html
index a8b3e4b..a32632a 100644
--- a/contenido/08.html
+++ b/contenido/08.html
@@ -53,6 +53,9 @@
               </div>
             </div>
           </div>
+          <div class="col-12 text-center mb-2">
+            <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+          </div>
           <div class="col-12">
             <di class="tablero d-flex flex-column justify-content-center align-items-center gap-2">
               <div class="row-questions custom-grid" id="row-questions">
diff --git a/contenido/09.html b/contenido/09.html
index 8a08fca..9a0ee57 100644
--- a/contenido/09.html
+++ b/contenido/09.html
@@ -34,119 +34,122 @@
     cursor: pointer;
   }
 </style>
-<div class='page-sco py-2 py-md-0 h-100'>
-  <div class='container h-100'>
-    <div class='row justify-content-center align-items-center h-100'>
-      <div class='col-12'>
-        <div class='row justify-content-center'>
+<div class="page-sco py-2 py-md-0 h-100">
+  <div class="container h-100">
+    <div class="row justify-content-center align-items-center h-100">
+      <div class="col-12">
+        <div class="row justify-content-center">
           <div class="col-10 mb-2">
             <h2 class="text-center fw-bold text-primary">¿Qué necesito para poder realizar la Diálisis Peritoneal Automatizada (DPA)?</h2>
-            <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
+            <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
           </div>
           <div class="col-9 mb-1">
             <div class="card border-0 my-2 rounded-15 bg-custom shadow p-3 py-2 text-center">
               <div class="d-flex justify-content-center align-items-center flex-row">
-                <img src="img/3.1.png" class="img-fluid mx-3">
+                <img src="img/3.1.png" class="img-fluid mx-3" />
                 <p class="mb-0"><strong>Instrucciones:</strong> Da clic en los elementos para descubrir cuáles son necesarios para realizar la DPA.</p>
               </div>
             </div>
           </div>
+          <div class="col-12 text-center mb-3">
+            <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+          </div>
           <div class="col-12">
             <div class="tablero">
               <div class="card-container2" data-correct="0">
                 <div class="front">
-                  <img src="img/09.0.png" class="img-fluid">
+                  <img src="img/09.0.png" class="img-fluid" />
                 </div>
                 <div class="back">
-                  <img src="img/09.12.png" class="img-fluid">
+                  <img src="img/09.12.png" class="img-fluid" />
                 </div>
               </div>
               <div class="card-container2" data-correct="1">
                 <div class="front">
-                  <img src="img/09.1.png" class="img-fluid">
+                  <img src="img/09.1.png" class="img-fluid" />
                 </div>
                 <div class="back">
-                  <img src="img/09.13.png" class="img-fluid">
+                  <img src="img/09.13.png" class="img-fluid" />
                 </div>
               </div>
               <div class="card-container2" data-correct="0">
                 <div class="front">
-                  <img src="img/09.2.png" class="img-fluid">
+                  <img src="img/09.2.png" class="img-fluid" />
                 </div>
                 <div class="back">
-                  <img src="img/09.12.png" class="img-fluid">
+                  <img src="img/09.12.png" class="img-fluid" />
                 </div>
               </div>
               <div class="card-container2" data-correct="0">
                 <div class="front">
-                  <img src="img/09.3.png" class="img-fluid">
+                  <img src="img/09.3.png" class="img-fluid" />
                 </div>
                 <div class="back">
-                  <img src="img/09.12.png" class="img-fluid">
+                  <img src="img/09.12.png" class="img-fluid" />
                 </div>
               </div>
               <div class="card-container2" data-correct="1">
                 <div class="front">
-                  <img src="img/09.4.png" class="img-fluid">
+                  <img src="img/09.4.png" class="img-fluid" />
                 </div>
                 <div class="back">
-                  <img src="img/09.13.png" class="img-fluid">
+                  <img src="img/09.13.png" class="img-fluid" />
                 </div>
               </div>
               <div class="card-container2" data-correct="0">
                 <div class="front">
-                  <img src="img/09.5.png" class="img-fluid">
+                  <img src="img/09.5.png" class="img-fluid" />
                 </div>
                 <div class="back">
-                  <img src="img/09.12.png" class="img-fluid">
+                  <img src="img/09.12.png" class="img-fluid" />
                 </div>
               </div>
               <div class="card-container2" data-correct="0">
                 <div class="front">
-                  <img src="img/09.6.png" class="img-fluid">
+                  <img src="img/09.6.png" class="img-fluid" />
                 </div>
                 <div class="back">
-                  <img src="img/09.12.png" class="img-fluid">
+                  <img src="img/09.12.png" class="img-fluid" />
                 </div>
               </div>
               <div class="card-container2" data-correct="0">
                 <div class="front">
-                  <img src="img/09.7.png" class="img-fluid">
+                  <img src="img/09.7.png" class="img-fluid" />
                 </div>
                 <div class="back">
-                  <img src="img/09.12.png" class="img-fluid">
+                  <img src="img/09.12.png" class="img-fluid" />
                 </div>
               </div>
               <div class="card-container2" data-correct="0">
                 <div class="front">
-                  <img src="img/09.8.png" class="img-fluid">
+                  <img src="img/09.8.png" class="img-fluid" />
                 </div>
                 <div class="back">
-                  <img src="img/09.12.png" class="img-fluid">
+                  <img src="img/09.12.png" class="img-fluid" />
                 </div>
               </div>
               <div class="card-container2" data-correct="1">
                 <div class="front">
-                  <img src="img/09.9.png" class="img-fluid">
+                  <img src="img/09.9.png" class="img-fluid" />
                 </div>
                 <div class="back">
-                  <img src="img/09.13.png" class="img-fluid">
+                  <img src="img/09.13.png" class="img-fluid" />
                 </div>
               </div>
               <div class="card-container2" data-correct="1">
                 <div class="front">
-                  <img src="img/09.10.png" class="img-fluid">
+                  <img src="img/09.10.png" class="img-fluid" />
                 </div>
                 <div class="back">
-                  <img src="img/09.13.png" class="img-fluid">
+                  <img src="img/09.13.png" class="img-fluid" />
                 </div>
               </div>
               <div class="card-container2" data-correct="1">
                 <div class="front">
-                  <img src="img/09.11.png" class="img-fluid">
+                  <img src="img/09.11.png" class="img-fluid" />
                 </div>
                 <div class="back">
-                  <img src="img/09.13.png" class="img-fluid">
+                  <img src="img/09.13.png" class="img-fluid" />
                 </div>
               </div>
             </div>
@@ -159,8 +162,8 @@
 <div class="d-none">
   <div id="pop0">
     <div class="container-fluid">
-      <div class=" w-100 text-center">
-        <img src="img/09.14.png" class="img-fluid">
+      <div class="w-100 text-center">
+        <img src="img/09.14.png" class="img-fluid" />
       </div>
       <div class="row justify-content-center">
         <div class="col-12 text-center mb-2">
@@ -175,14 +178,14 @@
 </div>
 <script>
   $(function () {
-    "use strict";
+    'use strict';
     $('.wrap-course-content').addClass('fake');
     const flip_sound = CourseNav.createSound('audio/flip.mp3');
     const feedbackcorrect = CourseNav.createSound('audio/feedback-correct.mpeg');
     const feedbackincorrect = CourseNav.createSound('audio/feedback-incorrect.mpeg');
 
-    $(".card-container2").flip({
-      trigger: 'manual' // Control manual del volteo
+    $('.card-container2').flip({
+      trigger: 'manual', // Control manual del volteo
     });
 
     function shuffleArray(array) {
@@ -197,18 +200,18 @@
     const tablero = document.querySelector('.tablero');
     const cards = Array.from(tablero.querySelectorAll('.card-container2'));
     const shuffledCards = shuffleArray(cards);
-    shuffledCards.forEach(card => tablero.appendChild(card));
+    shuffledCards.forEach((card) => tablero.appendChild(card));
 
-    $(".card-container2").click(function (e) {
+    $('.card-container2').click(function (e) {
       e.preventDefault();
       const $card = $(this);
       if ($card.hasClass('disabled')) return;
       flip_sound.play();
       $card.flip(true);
-      if($card.data('correct') == '0') {
+      if ($card.data('correct') == '0') {
         CourseNav.audioController.stopAllSoundsAndPlay(feedbackcorrect);
         $card.addClass('disabled');
-      }else{
+      } else {
         CourseNav.audioController.stopAllSoundsAndPlay(feedbackincorrect);
         setTimeout(() => {
           $card.flip(false);
@@ -225,24 +228,24 @@
 
     function checkAllCompleted() {
       setTimeout(() => {
-        const html = $("#pop0").html();
+        const html = $('#pop0').html();
         Swal.fire({
           html: html,
           target: document.getElementById('wrap-course-content'),
           customClass: {
             popup: 'pop_html_style border border-3 border-primary rounded-4',
-            confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite'
+            confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
           },
-          confirmButtonText: "Cerrar",
+          confirmButtonText: 'Cerrar',
           showConfirmButton: true,
           allowOutsideClick: false,
           allowEscapeKey: false,
-          backdrop: "rgba(65, 60, 60, .95)",
-          width: "35em",
+          backdrop: 'rgba(65, 60, 60, .95)',
+          width: '35em',
           didClose: () => {
             CourseNav.setSlideVisited();
-            $(".card-container2").addClass('disabled');
-          }
+            $('.card-container2').addClass('disabled');
+          },
         });
       }, 250);
     }
diff --git a/contenido/11.html b/contenido/11.html
index 6544017..03e01cc 100644
--- a/contenido/11.html
+++ b/contenido/11.html
@@ -120,14 +120,14 @@
                 <img src="img/3.1.png" class="img-fluid mx-3" />
                 <div class="parrafos text-start">
                   <p class="mb-2"><strong>Instrucciones:</strong> Observa las imágenes del sitio de salida que se presentan en las tarjetas.</p>
-                  <p class="mb-0">
-                    Si consideras que se encuentra sano, desliza la tarjeta a la <strong class="text-verde-pino">derecha</strong>. Si crees que no está sano,
-                    desliza la tarjeta a la <strong class="text-verde-pino">izquierda</strong>.
-                  </p>
+                  <p class="mb-0">Si consideras que se encuentra sano, desliza la tarjeta a la <strong class="text-verde-pino">derecha</strong>. Si crees que no está sano, desliza la tarjeta a la <strong class="text-verde-pino">izquierda</strong>.</p>
                 </div>
               </div>
             </div>
           </div>
+          <div class="col-12 text-center mb-3">
+            <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+          </div>
           <div class="col-12">
             <div class="row justify-content-center">
               <div class="col-12 mb-2">
@@ -191,8 +191,8 @@
 <div class="d-none">
   <div id="pop0">
     <div class="container-fluid">
-      <div class=" w-100 text-center">
-        <img src="img/3.5.png" class="img-fluid">
+      <div class="w-100 text-center">
+        <img src="img/3.5.png" class="img-fluid" />
       </div>
       <div class="row justify-content-center">
         <div class="col-12 text-center mb-2">
@@ -207,12 +207,12 @@
 </div>
 <script>
   $(function () {
-    "use strict";
-    $(".wrap-course-content").addClass("fake");
-    const feedbackcorrect = CourseNav.createSound("audio/feedback-correct.mpeg");
-    const feedbackincorrect = CourseNav.createSound("audio/feedback-incorrect.mpeg");
+    'use strict';
+    $('.wrap-course-content').addClass('fake');
+    const feedbackcorrect = CourseNav.createSound('audio/feedback-correct.mpeg');
+    const feedbackincorrect = CourseNav.createSound('audio/feedback-incorrect.mpeg');
 
-    const respuestasCorrectas = ["true", "true", "false", "false", "false"];
+    const respuestasCorrectas = ['true', 'true', 'false', 'false', 'false'];
 
     function shuffleArray(array) {
       for (let i = array.length - 1; i > 0; i--) {
@@ -223,15 +223,15 @@
     }
 
     // Shuffle cards and answers
-    const cards = Array.from(document.querySelectorAll(".tinder-card"));
+    const cards = Array.from(document.querySelectorAll('.tinder-card'));
     const cardsData = cards.map((card, index) => ({
       element: card,
       answer: respuestasCorrectas[index],
     }));
 
     const shuffledData = shuffleArray(cardsData);
-    const stack = document.getElementById("card-stack");
-    stack.innerHTML = "";
+    const stack = document.getElementById('card-stack');
+    stack.innerHTML = '';
 
     const shuffledAnswers = [];
     shuffledData.forEach((item, index) => {
@@ -253,33 +253,33 @@
       const currentCard = shuffledData[currentCardIndex]?.element;
       if (!currentCard) return;
 
-      currentCard.addEventListener("mousedown", handleStart, { passive: false });
-      currentCard.addEventListener("touchstart", handleStart, { passive: false });
+      currentCard.addEventListener('mousedown', handleStart, { passive: false });
+      currentCard.addEventListener('touchstart', handleStart, { passive: false });
     }
 
     function handleStart(e) {
       if (isProcessing) return;
       e.preventDefault();
       isDragging = true;
-      const touch = e.type === "touchstart" ? e.touches[0] : e;
+      const touch = e.type === 'touchstart' ? e.touches[0] : e;
       startX = touch.clientX;
       startY = touch.clientY;
 
-      const card = e.target.closest(".tinder-card");
-      card.style.transition = "none";
-      card.style.cursor = "grabbing";
+      const card = e.target.closest('.tinder-card');
+      card.style.transition = 'none';
+      card.style.cursor = 'grabbing';
 
-      document.addEventListener("mousemove", handleMove, { passive: false });
-      document.addEventListener("touchmove", handleMove, { passive: false });
-      document.addEventListener("mouseup", handleEnd);
-      document.addEventListener("touchend", handleEnd);
+      document.addEventListener('mousemove', handleMove, { passive: false });
+      document.addEventListener('touchmove', handleMove, { passive: false });
+      document.addEventListener('mouseup', handleEnd);
+      document.addEventListener('touchend', handleEnd);
     }
 
     function handleMove(e) {
       if (!isDragging || isProcessing) return;
       e.preventDefault();
 
-      const touch = e.type === "touchmove" ? e.touches[0] : e;
+      const touch = e.type === 'touchmove' ? e.touches[0] : e;
       currentX = touch.clientX - startX;
       currentY = touch.clientY - startY;
 
@@ -289,8 +289,8 @@
       const rotation = currentX * 0.1;
       card.style.transform = `translate(${currentX}px, ${currentY}px) rotate(${rotation}deg)`;
 
-      const likeIndicator = document.getElementById("like-indicator");
-      const dislikeIndicator = document.getElementById("dislike-indicator");
+      const likeIndicator = document.getElementById('like-indicator');
+      const dislikeIndicator = document.getElementById('dislike-indicator');
 
       if (currentX > 50) {
         likeIndicator.style.opacity = Math.min(1, (currentX - 50) / 100);
@@ -308,19 +308,19 @@
       if (!isDragging || isProcessing) return;
       isDragging = false;
 
-      document.removeEventListener("mousemove", handleMove);
-      document.removeEventListener("touchmove", handleMove);
-      document.removeEventListener("mouseup", handleEnd);
-      document.removeEventListener("touchend", handleEnd);
+      document.removeEventListener('mousemove', handleMove);
+      document.removeEventListener('touchmove', handleMove);
+      document.removeEventListener('mouseup', handleEnd);
+      document.removeEventListener('touchend', handleEnd);
 
       const card = shuffledData[currentCardIndex]?.element;
       if (!card) return;
 
-      card.style.transition = "transform 0.3s ease";
-      card.style.cursor = "grab";
+      card.style.transition = 'transform 0.3s ease';
+      card.style.cursor = 'grab';
 
-      const likeIndicator = document.getElementById("like-indicator");
-      const dislikeIndicator = document.getElementById("dislike-indicator");
+      const likeIndicator = document.getElementById('like-indicator');
+      const dislikeIndicator = document.getElementById('dislike-indicator');
 
       likeIndicator.style.opacity = 0;
       dislikeIndicator.style.opacity = 0;
@@ -328,13 +328,13 @@
       if (Math.abs(currentX) > 100) {
         isProcessing = true;
         const isLike = currentX > 0;
-        const correctAnswer = shuffledAnswers[currentCardIndex] === "true";
+        const correctAnswer = shuffledAnswers[currentCardIndex] === 'true';
         const isCorrect = (isLike && correctAnswer) || (!isLike && !correctAnswer);
 
         animateCardOut(card, isLike, isCorrect);
         processSwipe(isLike, isCorrect);
       } else {
-        card.style.transform = "";
+        card.style.transform = '';
       }
 
       currentX = 0;
@@ -345,17 +345,17 @@
       if (isCorrect) {
         const direction = isLike ? 1 : -1;
         card.style.transform = `translateX(${direction * 400}px) rotate(${direction * 30}deg)`;
-        card.style.opacity = "0";
+        card.style.opacity = '0';
 
         setTimeout(() => {
-          card.style.display = "none";
+          card.style.display = 'none';
           nextCard();
         }, 300);
       } else {
         // Animación de rebote para respuesta incorrecta
-        card.style.transform = "scale(0.95)";
+        card.style.transform = 'scale(0.95)';
         setTimeout(() => {
-          card.style.transform = "";
+          card.style.transform = '';
           isProcessing = false;
         }, 200);
       }
@@ -395,23 +395,23 @@
     }
 
     function updateProgress() {
-      const indicators = document.querySelector(".indicadores-avance");
-      indicators.innerHTML = "";
+      const indicators = document.querySelector('.indicadores-avance');
+      indicators.innerHTML = '';
 
       for (let i = 0; i < shuffledAnswers.length; i++) {
-        const indicator = document.createElement("div");
-        indicator.style.cssText = "width: 40px; height: 40px; margin: 0 8px; display: flex; align-items: center; justify-content: center;";
+        const indicator = document.createElement('div');
+        indicator.style.cssText = 'width: 40px; height: 40px; margin: 0 8px; display: flex; align-items: center; justify-content: center;';
 
         if (i < userAnswers.length) {
-          const img = document.createElement("img");
-          img.style.cssText = "width: 100%; height: 100%;";
-          img.src = "img/11.check.png";
+          const img = document.createElement('img');
+          img.style.cssText = 'width: 100%; height: 100%;';
+          img.src = 'img/11.check.png';
           indicator.appendChild(img);
         } else if (i === currentCardIndex) {
-          indicator.style.cssText += "background-color: #2196F3; border-radius: 50%; color: white; font-size: 18px; font-weight: bold;";
+          indicator.style.cssText += 'background-color: #2196F3; border-radius: 50%; color: white; font-size: 18px; font-weight: bold;';
           indicator.innerHTML = (i + 1).toString();
         } else {
-          indicator.style.cssText += "background-color: #E0E0E0; border-radius: 50%; color: #999; font-size: 18px; font-weight: bold;";
+          indicator.style.cssText += 'background-color: #E0E0E0; border-radius: 50%; color: #999; font-size: 18px; font-weight: bold;';
           indicator.innerHTML = (i + 1).toString();
         }
 
@@ -421,7 +421,7 @@
 
     function showResults() {
       // Ocultar instrucciones
-      document.getElementById("col-instrucciones").style.display = "none";
+      document.getElementById('col-instrucciones').style.display = 'none';
 
       const resultHTML = `
         <div class="text-center">
@@ -430,25 +430,25 @@
         </div>
       `;
       checkAllCompleted();
-      document.querySelector(".content-cards").innerHTML = resultHTML;
+      document.querySelector('.content-cards').innerHTML = resultHTML;
       CourseNav.setSlideVisited(true);
     }
 
     function checkAllCompleted() {
-      const html = $("#pop0").html();
+      const html = $('#pop0').html();
       Swal.fire({
         html: html,
         target: document.getElementById('wrap-course-content'),
         customClass: {
-          popup: "pop_html_style border border-3 border-primary rounded-4",
-          confirmButton: "btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite",
+          popup: 'pop_html_style border border-3 border-primary rounded-4',
+          confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
         },
-        confirmButtonText: "Cerrar",
+        confirmButtonText: 'Cerrar',
         showConfirmButton: true,
         allowOutsideClick: false,
         allowEscapeKey: false,
-        backdrop: "rgba(65, 60, 60, .95)",
-        width: "35em",
+        backdrop: 'rgba(65, 60, 60, .95)',
+        width: '35em',
         didClose: () => {
           CourseNav.setSlideVisited();
         },
diff --git a/contenido/12.html b/contenido/12.html
index b04e8bd..ec40895 100644
--- a/contenido/12.html
+++ b/contenido/12.html
@@ -45,6 +45,9 @@
               </div>
             </div>
           </div>
+          <div class="col-12 text-center mb-3">
+            <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+          </div>
           <div class="col-12 col-actividad">
             <div class="row justify-content-center">
               <div class="col-12 mb-2">
diff --git a/contenido/14.html b/contenido/14.html
index d3125b9..472e0d3 100644
--- a/contenido/14.html
+++ b/contenido/14.html
@@ -60,6 +60,9 @@
               </div>
             </div>
           </div>
+          <div class="col-12 text-center mb-2">
+            <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+          </div>
           <div class="col-12 col-actividad" style="overflow: hidden">
             <div class="custom-grid">
               <div class="img-sotable" data-order="0">
diff --git a/contenido/15.html b/contenido/15.html
index 00c58b5..b4f9865 100644
--- a/contenido/15.html
+++ b/contenido/15.html
@@ -69,10 +69,10 @@
     cursor: move;
   }
 </style>
-<div class='page-sco py-2 py-md-0 h-100'>
-  <div class='container h-100'>
-    <div class='row justify-content-center h-100'>
-      <div id="drag-drop-activity" class='col-12 h-100' style="overflow: hidden;">
+<div class="page-sco py-2 py-md-0 h-100">
+  <div class="container h-100">
+    <div class="row justify-content-center h-100">
+      <div id="drag-drop-activity" class="col-12 h-100" style="overflow: hidden">
         <div class="content-grid">
           <div class="content-drops w-100 h-100">
             <div class="row justify-content-center align-items-center h-100">
@@ -86,22 +86,20 @@
                     <div class="card bg-primary border-0 my-2 rounded-15 bg-custom ps-4 pe-3 py-2 text-center">
                       <div class="d-flex justify-content-center align-items-center flex-row gap-2">
                         <img src="img/2.1.png" class="img-fluid mx-3" />
-                        <p class="mb-0 text-start text-white"><strong>Instrucciones:</strong> Observa los objetos en las tarjetas y arrástralas hacia la categoría
-                          correcta para clasificarlas según su nivel de
-                          limpieza: Estéril, Desinfectado, Limpio o Sucio.
-                        </p>
+                        <p class="mb-0 text-start text-white"><strong>Instrucciones:</strong> Observa los objetos en las tarjetas y arrástralas hacia la categoría correcta para clasificarlas según su nivel de limpieza: Estéril, Desinfectado, Limpio o Sucio.</p>
                       </div>
                     </div>
                   </div>
+                  <div class="col-12 text-center mb-3">
+                    <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+                  </div>
                   <div class="col-12">
                     <div class="grid-drops-container">
                       <div class="position-relative d-flex flex-column justify-content-center gap-2">
                         <div class="drop-card" data-drop="0"></div>
                         <div class="card text-card bg-verde-oscuro text-white border-0 rounded-15 px-3 py-2">
                           <div class="row justify-content-center align-items-center h-100">
-                            <div class="col-12 text-center">
-                              Estéril
-                            </div>
+                            <div class="col-12 text-center">Estéril</div>
                           </div>
                         </div>
                       </div>
@@ -109,9 +107,7 @@
                         <div class="drop-card" data-drop="1"></div>
                         <div class="card text-card bg-verde-oscuro text-white border-0 rounded-15 px-3 py-2">
                           <div class="row justify-content-center align-items-center h-100">
-                            <div class="col-12 text-center">
-                              Desinfectado
-                            </div>
+                            <div class="col-12 text-center">Desinfectado</div>
                           </div>
                         </div>
                       </div>
@@ -119,9 +115,7 @@
                         <div class="drop-card" data-drop="2"></div>
                         <div class="card text-card bg-verde-oscuro text-white border-0 rounded-15 px-3 py-2">
                           <div class="row justify-content-center align-items-center h-100">
-                            <div class="col-12 text-center">
-                              Limpio
-                            </div>
+                            <div class="col-12 text-center">Limpio</div>
                           </div>
                         </div>
                       </div>
@@ -129,9 +123,7 @@
                         <div class="drop-card" data-drop="3"></div>
                         <div class="card text-card bg-verde-oscuro text-white border-0 rounded-15 px-3 py-2">
                           <div class="row justify-content-center align-items-center h-100">
-                            <div class="col-12 text-center">
-                              Sucio/Contaminado
-                            </div>
+                            <div class="col-12 text-center">Sucio/Contaminado</div>
                           </div>
                         </div>
                       </div>
@@ -160,8 +152,8 @@
 <div class="d-none">
   <div id="pop0">
     <div class="container-fluid">
-      <div class=" w-100 text-center">
-        <img src="img/3.5.png" class="img-fluid">
+      <div class="w-100 text-center">
+        <img src="img/3.5.png" class="img-fluid" />
       </div>
       <div class="row justify-content-center">
         <div class="col-12 text-center mb-2">
@@ -176,11 +168,16 @@
 </div>
 <script>
   $(function () {
-    "use strict";
+    'use strict';
     $('.wrap-course-content').addClass('fake');
     const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
     const good = CourseNav.createSound('audio/feedback-correct.mpeg');
-    const changeDrag = ['<div class="drag-option" data-drag="0"><img src="img/15.0.png" class="img-fluid"></div>','<div class="drag-option" data-drag="1"><img src="img/15.1.png" class="img-fluid"></div>','<div class="drag-option" data-drag="2"><img src="img/15.2.png" class="img-fluid"></div>','<div class="drag-option" data-drag="3"><img src="img/15.3.png" class="img-fluid"></div>'];
+    const changeDrag = [
+      '<div class="drag-option" data-drag="0"><img src="img/15.0.png" class="img-fluid"></div>',
+      '<div class="drag-option" data-drag="1"><img src="img/15.1.png" class="img-fluid"></div>',
+      '<div class="drag-option" data-drag="2"><img src="img/15.2.png" class="img-fluid"></div>',
+      '<div class="drag-option" data-drag="3"><img src="img/15.3.png" class="img-fluid"></div>',
+    ];
 
     function shuffleArray(array) {
       for (let i = array.length - 1; i > 0; i--) {
@@ -201,7 +198,7 @@
         $newDrag.draggable({
           revert: 'invalid',
           revertDuration: 300,
-          cursor: "grabbing",
+          cursor: 'grabbing',
           start: function (event, ui) {
             $(this).css('z-index', 1000);
             ui.position.left = 0;
@@ -218,7 +215,7 @@
           },
           stop: function (event, ui) {
             $(this).css('z-index', 1);
-          }
+          },
         });
 
         currentIndex++;
@@ -247,29 +244,29 @@
           bad.play();
           ui.helper.draggable('option', 'revert', true);
         }
-      }
+      },
     });
 
     function checkAllCompleted() {
       setTimeout(() => {
-        const html = $("#pop0").html();
+        const html = $('#pop0').html();
         Swal.fire({
           html: html,
           target: document.getElementById('wrap-course-content'),
           customClass: {
             popup: 'pop_html_style border border-3 border-primary rounded-4',
-            confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite'
+            confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
           },
-          confirmButtonText: "Cerrar",
+          confirmButtonText: 'Cerrar',
           showConfirmButton: true,
           allowOutsideClick: false,
           allowEscapeKey: false,
-          backdrop: "rgba(65, 60, 60, .95)",
-          width: "35em",
+          backdrop: 'rgba(65, 60, 60, .95)',
+          width: '35em',
           didClose: () => {
             CourseNav.setSlideVisited();
             $('.drag-option').addClass('disabled');
-          }
+          },
         });
       }, 250);
     }
diff --git a/contenido/16.html b/contenido/16.html
index ea3a138..c64551f 100644
--- a/contenido/16.html
+++ b/contenido/16.html
@@ -84,7 +84,10 @@
                 <div id="card-content-quiz-rompecabezas" class="card bg-white border-0 rounded-15 p-3 card-content-quiz animate__animated animate__zoomIn" style="box-shadow: 0 0 12px rgba(0, 0, 0, 0.5)">
                   <div class="row justify-content-center">
                     <div class="col-12 text-center fw-bold text-verde-oscuro txt-question mb-3"></div>
-                    <div class="col-12 content-answers"></div>
+                    <div class="col-12 content-answers mb-3"></div>
+                    <div class="col-12 text-center">
+                      <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+                    </div>
                   </div>
                 </div>
               </div>
diff --git a/contenido/17.html b/contenido/17.html
index 9484004..5b4bb63 100644
--- a/contenido/17.html
+++ b/contenido/17.html
@@ -26,8 +26,8 @@
   }
 
   .btn-drag {
-    background: #B68FB2;
-    background: linear-gradient(to right, #B68FB2 0%, #925C8D 100%);
+    background: #b68fb2;
+    background: linear-gradient(to right, #b68fb2 0%, #925c8d 100%);
     border-radius: 12px;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
@@ -44,23 +44,26 @@
     width: 100%;
   }
 </style>
-<div class='page-sco py-2 py-md-0 h-100'>
-  <div class='container h-100'>
-    <div class='row justify-content-center align-items-center h-100' style="overflow: hidden;">
-      <div class='col-12'>
-        <div class='row justify-content-center'>
+<div class="page-sco py-2 py-md-0 h-100">
+  <div class="container h-100">
+    <div class="row justify-content-center align-items-center h-100" style="overflow: hidden">
+      <div class="col-12">
+        <div class="row justify-content-center">
           <div class="col-10 mb-2">
             <h2 class="text-center fw-bold text-primary">Registros</h2>
-            <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
+            <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
           </div>
           <div class="col-10 px-0 mb-1">
             <div class="card bg-verde-gris border-0 my-2 rounded-4 bg-custom p-3 text-center">
               <div class="d-flex justify-content-center align-items-center flex-row">
-                <img src="img/08.0.png" class="img-fluid mx-3">
+                <img src="img/08.0.png" class="img-fluid mx-3" />
                 <p class="mb-0"><strong>Instrucciones:</strong> Toma los tipos de terapia que se presentan y arrástralos hacia el registro que les corresponde.</p>
               </div>
             </div>
           </div>
+          <div class="col-12 text-center mb-3">
+            <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+          </div>
           <div class="col-12" id="drag-drop-activity">
             <div class="row justify-content-center align-items-center">
               <div class="col-4 col-drags">
@@ -78,14 +81,14 @@
                   <div class="col-12">
                     <div class="row justify-content-center align-items-center">
                       <div class="col-6 text-center">
-                        <img src="img/17.0.png" class="img-fluid mb-3"><br>
+                        <img src="img/17.0.png" class="img-fluid mb-3" /><br />
                         <div class="content-drop d-flex flex-row align-items-center gap-0">
                           <div class="num d-flex justify-content-center align-items-center px-3 text-white fw-bold h-100"><h3 class="mb-0">0</h3></div>
                           <div class="obj-drop" data-drop="0"></div>
                         </div>
                       </div>
                       <div class="col-6 text-center">
-                        <img src="img/17.1.png" class="img-fluid mb-3"><br>
+                        <img src="img/17.1.png" class="img-fluid mb-3" /><br />
                         <div class="content-drop d-flex flex-row align-items-center gap-0">
                           <div class="num d-flex justify-content-center align-items-center px-3 text-white fw-bold h-100"><h3 class="mb-0">1</h3></div>
                           <div class="obj-drop" data-drop="1"></div>
@@ -105,8 +108,8 @@
 <div class="d-none">
   <div id="pop0">
     <div class="container-fluid">
-      <div class=" w-100 text-center">
-        <img src="img/17.2.png" class="img-fluid">
+      <div class="w-100 text-center">
+        <img src="img/17.2.png" class="img-fluid" />
       </div>
       <div class="row justify-content-center">
         <div class="col-12 text-center mb-2">
@@ -121,7 +124,7 @@
 </div>
 <script>
   $(function () {
-    "use strict";
+    'use strict';
     $('.wrap-course-content').addClass('fake');
     const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
     const good = CourseNav.createSound('audio/feedback-correct.mpeg');
@@ -142,7 +145,7 @@
     $('.btn-drag').draggable({
       revert: 'invalid',
       revertDuration: 300,
-      cursor: "grabbing",
+      cursor: 'grabbing',
       start: function (event, ui) {
         $(this).css('z-index', 1000);
         ui.position.left = 0;
@@ -159,7 +162,7 @@
       },
       stop: function (event, ui) {
         $(this).css('z-index', 1);
-      }
+      },
     });
 
     $('.obj-drop').droppable({
@@ -183,28 +186,27 @@
           CourseNav.audioController.stopAllSoundsAndPlay(bad);
           ui.helper.draggable('option', 'revert', true);
         }
-      }
+      },
     });
 
-     function Completed() {
+    function Completed() {
       $('.col-drags').hide();
-      const html = $("#pop0").html();
+      const html = $('#pop0').html();
       Swal.fire({
         html: html,
         target: document.getElementById('wrap-course-content'),
         customClass: {
           popup: 'pop_html_style border border-3 border-primary rounded-4',
-          confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite'
+          confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
         },
-        confirmButtonText: "Cerrar",
+        confirmButtonText: 'Cerrar',
         showConfirmButton: true,
         allowOutsideClick: false,
         allowEscapeKey: false,
         focusConfirm: false,
-        backdrop: "rgba(65, 60, 60, .95)",
-        width: "35em",
-        didOpen: () => {
-        },
+        backdrop: 'rgba(65, 60, 60, .95)',
+        width: '35em',
+        didOpen: () => {},
         didClose: () => {
           CourseNav.audioController.stopAudio();
           CourseNav.setSlideVisited();
diff --git a/contenido/18.html b/contenido/18.html
index 268d5de..2ef2665 100644
--- a/contenido/18.html
+++ b/contenido/18.html
@@ -21,12 +21,12 @@
     height: 35px;
     background: #4d4d4d;
     border: 4px solid #808080;
-    box-shadow: 0 0 15px rgba(0,0,0,.5);
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
   }
 
   .med_style.visited {
-    background: #8EBA1F;
-    background: linear-gradient(to right, #8EBA1F 0%, #105742 100%);
+    background: #8eba1f;
+    background: linear-gradient(to right, #8eba1f 0%, #105742 100%);
     border: 4px solid #ffffff;
   }
 
@@ -43,7 +43,7 @@
   .btn-answer {
     cursor: pointer;
     border-radius: 10px;
-    box-shadow: 0 0 2px rgba(0,0,0,.5);
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
     width: 95%;
   }
 
@@ -80,18 +80,18 @@
   }
 
   .phone-numbers {
-    pointer-events: none!important;
+    pointer-events: none !important;
     user-select: text;
     -webkit-user-select: text;
     -moz-user-select: text;
     -ms-user-select: text;
   }
 </style>
-<div class='page-sco py-2 py-md-0 h-100'>
-  <div class='container h-100'>
-    <div class='row justify-content-center align-items-center h-100'>
-      <div class='col-12'>
-        <div class='row justify-content-center'>
+<div class="page-sco py-2 py-md-0 h-100">
+  <div class="container h-100">
+    <div class="row justify-content-center align-items-center h-100">
+      <div class="col-12">
+        <div class="row justify-content-center">
           <div class="col-10 mb-2 animate__animated animate__bounceInDown">
             <h2 class="text-center fw-bold text-primary">Consejos útiles</h2>
             <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
@@ -121,24 +121,27 @@
               <div class="col-11">
                 <div class="d-flex flex-row justify-content-center gap-2">
                   <div class="object-btn text-center d-inline-block" data-obj="0">
-                    <img src="img/18.0.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite"><br>
+                    <img src="img/18.0.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite" /><br />
                     <h4 class="fw-bold text-center text-primary">Sala: Estilo de vida</h4>
                   </div>
                   <div class="object-btn text-center d-inline-block" data-obj="1">
-                    <img src="img/18.1.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite"><br>
+                    <img src="img/18.1.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite" /><br />
                     <h4 class="fw-bold text-center text-primary">Sala: Desecho de residuos</h4>
                   </div>
                   <div class="object-btn text-center d-inline-block" data-obj="2">
-                    <img src="img/18.2.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite"><br>
+                    <img src="img/18.2.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite" /><br />
                     <h4 class="fw-bold text-center text-primary">Sala: Entrega domiciliaria</h4>
                   </div>
                   <div class="object-btn text-center d-inline-block" data-obj="3">
-                    <img src="img/18.3.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite"><br>
+                    <img src="img/18.3.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite" /><br />
                     <h4 class="fw-bold text-center text-primary">Sala: Soporte técnico</h4>
-                    <h4 class="mb-0 text-primary fw-bold phone-numbers">777 329 6162 <br> 777 160 7199</h4>
+                    <h4 class="mb-0 text-primary fw-bold phone-numbers">
+                      777 329 6162 <br />
+                      777 160 7199
+                    </h4>
                   </div>
                   <div class="object-btn text-center d-inline-block" data-obj="4">
-                    <img src="img/18.4.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite"><br>
+                    <img src="img/18.4.png" class="img-fluid mb-2 animate__animated animate__pulse animate__infinite" /><br />
                     <h4 class="fw-bold text-center text-primary">Sala: Reportes</h4>
                   </div>
                 </div>
@@ -152,20 +155,23 @@
 </div>
 <div class="d-none">
   <div id="pops-questions">
-    <div class="container-fluid px-0" style="overflow: hidden;border-top-left-radius: 12px;border-top-right-radius: 12px;">
+    <div class="container-fluid px-0" style="overflow: hidden; border-top-left-radius: 12px; border-top-right-radius: 12px">
       <div class="row justify-content-center align-items-center">
         <div class="col-12 text-center mb-3 img-pregunta bg-secondary"></div>
         <div id="txt-question" class="col-12 text-center text-verde-oscuro fw-bold mb-3 px-4"></div>
-        <div class="col-12 px-4">
+        <div class="col-12 px-4 mb-3">
           <div id="txt-answers" class="d-flex flex-column justify-content-center align-items-center gap-3 text-start"></div>
         </div>
+        <div class="col-12 text-center">
+          <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+        </div>
       </div>
     </div>
   </div>
   <div id="pop0">
     <div class="container-fluid">
-      <div class=" w-100 text-center">
-        <img src="img/3.5.png" class="img-fluid">
+      <div class="w-100 text-center">
+        <img src="img/3.5.png" class="img-fluid" />
       </div>
       <div class="row justify-content-center">
         <div class="col-12 text-center mb-2">
@@ -180,7 +186,7 @@
 </div>
 <script>
   $(function () {
-    "use strict";
+    'use strict';
     $('.wrap-course-content').addClass('fake');
     let questions;
     let currentQuestionIndex = 0;
@@ -199,9 +205,9 @@
       xhr.onload = function (e) {
         var arrayBuffer = xhr.response;
         var data = new Uint8Array(arrayBuffer);
-        var workbook = XLSX.read(data, { type: "array" });
+        var workbook = XLSX.read(data, { type: 'array' });
         var result = {};
-        workbook.SheetNames.forEach(sheetName => {
+        workbook.SheetNames.forEach((sheetName) => {
           var sheet = workbook.Sheets[sheetName];
           result[sheetName] = XLSX.utils.sheet_to_json(sheet);
         });
@@ -211,13 +217,13 @@
     }
 
     function procesarPreguntas(data) {
-      const preguntas = data.map(fila => {
+      const preguntas = data.map((fila) => {
         const opciones = [];
-        Object.keys(fila).forEach(key => {
+        Object.keys(fila).forEach((key) => {
           if (key.startsWith('opcion')) {
             opciones.push({
               text: fila[key].trim(),
-              correct: key === 'opcion_c'
+              correct: key === 'opcion_c',
             });
           }
         });
@@ -225,7 +231,7 @@
           pregunta: fila.pregunta.trim(),
           opciones: opciones,
           retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : '',
-          retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta ? fila.retroalimentacion_incorrecta.trim() : ''
+          retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta ? fila.retroalimentacion_incorrecta.trim() : '',
         };
       });
       return preguntas;
@@ -243,7 +249,7 @@
     let isCorrectAnswer = false;
 
     readExcelFile(urlExcelFile, function (data) {
-      const hojaDatos = data["Diapositiva 20"];
+      const hojaDatos = data['Diapositiva 20'];
       questions = procesarPreguntas(hojaDatos);
 
       // Enable click handlers after questions are loaded
@@ -261,21 +267,21 @@
       const objIndex = currentObjectBtn.data('obj');
       currentQuestion = questions[objIndex];
 
-      const html = $("#pops-questions").html();
+      const html = $('#pops-questions').html();
       Swal.fire({
         html: html,
         target: document.getElementById('wrap-course-content'),
         customClass: {
           popup: 'pop_html_style padd_perso border border-3 border-primary rounded-4',
-          confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite'
+          confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
         },
-        confirmButtonText: "Cerrar",
+        confirmButtonText: 'Cerrar',
         showConfirmButton: false,
         allowOutsideClick: false,
         allowEscapeKey: false,
         focusConfirm: false,
-        backdrop: "rgba(65, 60, 60, .95)",
-        width: "50em",
+        backdrop: 'rgba(65, 60, 60, .95)',
+        width: '50em',
         didOpen: () => {
           displayQuestion();
         },
@@ -305,10 +311,12 @@
 
       $(container).find('#txt-answers').html(answersHTML);
 
-      $(container).find('.btn-answer').click(function() {
-        const isCorrect = $(this).data('correct');
-        handleAnswer(isCorrect);
-      });
+      $(container)
+        .find('.btn-answer')
+        .click(function () {
+          const isCorrect = $(this).data('correct');
+          handleAnswer(isCorrect);
+        });
     }
 
     function handleAnswer(isCorrect) {
@@ -332,23 +340,23 @@
     function checkAllCompleted() {
       if (correctQuestions >= 5) {
         setTimeout(() => {
-          const html = $("#pop0").html();
+          const html = $('#pop0').html();
           Swal.fire({
             html: html,
             target: document.getElementById('wrap-course-content'),
             customClass: {
               popup: 'pop_html_style border border-3 border-primary rounded-4',
-              confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite'
+              confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
             },
-            confirmButtonText: "Cerrar",
+            confirmButtonText: 'Cerrar',
             showConfirmButton: true,
             allowOutsideClick: false,
             allowEscapeKey: false,
-            backdrop: "rgba(65, 60, 60, .95)",
-            width: "35em",
+            backdrop: 'rgba(65, 60, 60, .95)',
+            width: '35em',
             didClose: () => {
               CourseNav.setSlideVisited();
-            }
+            },
           });
         }, 250);
       }
diff --git a/contenido/ruleta.html b/contenido/ruleta.html
index cf2b20f..ae61426 100644
--- a/contenido/ruleta.html
+++ b/contenido/ruleta.html
@@ -1,6 +1,6 @@
 <style>
   .fake {
-    background-image: url("img/bg11.jpg");
+    background-image: url('img/bg11.jpg');
     background-size: cover;
     background-repeat: no-repeat;
   }
@@ -118,15 +118,14 @@
     display: block !important;
   }
 
-  .pop_html_style{
+  .pop_html_style {
     width: 100%;
   }
   @media (min-width: 768px) {
-    .pop_html_style{
+    .pop_html_style {
       width: 700px;
     }
   }
-
 </style>
 <div class="page-sco py-2 py-md-0 h-100">
   <div class="container h-100 m-0 g-0 p-0">
@@ -140,14 +139,11 @@
         </div>
         <div class="row animate__animated animate__slideInLeft">
           <div class="col-7">
-            <div class="d-flex flex-row align-items-center bg-morado-claro py-3 text-white rounded-15" style="border-radius: 15px; border-top-left-radius: 0; border-bottom-left-radius: 0;">
+            <div class="d-flex flex-row align-items-center bg-morado-claro py-3 text-white rounded-15" style="border-radius: 15px; border-top-left-radius: 0; border-bottom-left-radius: 0">
               <div class="mx-3">
                 <img src="img/2.1.png" alt="" class="img-fluid" />
               </div>
-              <div>
-                <b>Instrucciones:</b> Da clic en la ruleta y contesta correctamente la pregunta acerca de la alimentación o medicación en diálisis peritoneal
-                para ganar los puntos.
-              </div>
+              <div><b>Instrucciones:</b> Da clic en la ruleta y contesta correctamente la pregunta acerca de la alimentación o medicación en diálisis peritoneal para ganar los puntos.</div>
             </div>
           </div>
         </div>
@@ -187,7 +183,7 @@
               </div>
             </div>
           </div>
-          <div class="col-4 text-center" style="margin-top: -30px;">
+          <div class="col-4 text-center" style="margin-top: -30px">
             <div class="card flat justify-content-center align-items-center d-inline-flex">
               <div class="indicador position-absolute start-50 translate-middle-x" style="z-index: 9999 !important; top: -1em">
                 <img src="img/ruleta/indicador.png" alt="" style="transform: rotate(90deg)" />
@@ -205,8 +201,8 @@
 <div class="d-none">
   <div id="pop0">
     <div class="container-fluid">
-      <div class=" w-100 text-center">
-        <img src="img/3.5.png" class="img-fluid">
+      <div class="w-100 text-center">
+        <img src="img/3.5.png" class="img-fluid" />
       </div>
       <div class="row justify-content-center">
         <div class="col-12 text-center mb-2">
@@ -221,8 +217,8 @@
 </div>
 <script>
   $(function () {
-    "use strict";
-    $('.wrap-course-content').addClass("fake");
+    'use strict';
+    $('.wrap-course-content').addClass('fake');
     // Puntajes de la ruleta en orden horario (empezando desde arriba)
     const puntajes = [100, 200, 300, 400, 500, 600, 700, 600, 500, 400, 300, 200];
     let isSpinning = false;
@@ -231,19 +227,19 @@
     let girosRealizados = 0;
     const maxGiros = 6;
 
-    const ruletaWheel = document.getElementById("ruleta-wheel");
-    const spinBtn = document.getElementById("spin-btn");
-    const puntosDisplay = document.querySelector(".puntos");
-    const avanceImages = document.querySelectorAll(".avance img");
+    const ruletaWheel = document.getElementById('ruleta-wheel');
+    const spinBtn = document.getElementById('spin-btn');
+    const puntosDisplay = document.querySelector('.puntos');
+    const avanceImages = document.querySelectorAll('.avance img');
 
     function girarRuleta() {
       if (isSpinning || girosRealizados >= maxGiros) return;
 
       isSpinning = true;
       spinBtn.disabled = true;
-      spinBtn.classList.remove("animate__animated", "animate__pulse", "animate__infinite");
-      ruletaWheel.classList.add("spinning");
-      document.getElementById("coursenav-main-content").classList.add("no-overflow");
+      spinBtn.classList.remove('animate__animated', 'animate__pulse', 'animate__infinite');
+      ruletaWheel.classList.add('spinning');
+      document.getElementById('coursenav-main-content').classList.add('no-overflow');
       // Mínimo 3 vueltas + ángulo aleatorio (siempre hacia la derecha)
       const vueltas = 3 + Math.random() * 2; // 3-5 vueltas
       const anguloFinal = Math.random() * 360;
@@ -267,21 +263,21 @@
       }, 4000);
     }
 
-    spinBtn.addEventListener("click", girarRuleta);
+    spinBtn.addEventListener('click', girarRuleta);
 
-    const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
-    const good = CourseNav.createSound("audio/feedback-correct.mpeg");
+    const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
+    const good = CourseNav.createSound('audio/feedback-correct.mpeg');
 
-    const urlExcelFile = "Actividades_Rotafolio_Vantive.xlsx";
+    const urlExcelFile = 'Actividades_Rotafolio_Vantive.xlsx';
 
     function readExcelFile(url, callback) {
       var xhr = new XMLHttpRequest();
-      xhr.open("GET", url, true);
-      xhr.responseType = "arraybuffer";
+      xhr.open('GET', url, true);
+      xhr.responseType = 'arraybuffer';
       xhr.onload = function (e) {
         var arrayBuffer = xhr.response;
         var data = new Uint8Array(arrayBuffer);
-        var workbook = XLSX.read(data, { type: "array" });
+        var workbook = XLSX.read(data, { type: 'array' });
         var result = {};
         workbook.SheetNames.forEach((sheetName) => {
           var sheet = workbook.Sheets[sheetName];
@@ -296,18 +292,18 @@
       const preguntas = data.map((fila) => {
         const opciones = [];
         Object.keys(fila).forEach((key) => {
-          if (key.startsWith("opcion")) {
+          if (key.startsWith('opcion')) {
             opciones.push({
               text: fila[key].trim(),
-              correct: key === "opcion_c",
+              correct: key === 'opcion_c',
             });
           }
         });
         return {
           pregunta: fila.pregunta.trim(),
           opciones: opciones,
-          retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : "",
-          retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta ? fila.retroalimentacion_incorrecta.trim() : "",
+          retroalimentacion_correcta: fila.retroalimentacion_correcta ? fila.retroalimentacion_correcta.trim() : '',
+          retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta ? fila.retroalimentacion_incorrecta.trim() : '',
         };
       });
       return preguntas;
@@ -327,7 +323,7 @@
 
     function mostrarPregunta(puntajeEnJuego) {
       if (questions.length === 0) {
-        console.error("No hay preguntas cargadas");
+        console.error('No hay preguntas cargadas');
         return;
       }
 
@@ -343,7 +339,7 @@
       preguntasUsadas.push(originalIndex);
 
       // Crear HTML para opciones
-      let opcionesHTML = "";
+      let opcionesHTML = '';
       pregunta.opciones.forEach((opcion, index) => {
         const letra = String.fromCharCode(97 + index); // 97 = 'a'
         opcionesHTML += `<button class="opcion-btn d-block w-100" data-correct="${opcion.correct}" data-letter="${letra}"><span>${opcion.text}</span></button>`;
@@ -351,25 +347,29 @@
 
       Swal.fire({
         title: pregunta.pregunta,
-        html: `<div class="text-start">${opcionesHTML}</div>`,
+        html: `<div class="text-start mb-3">${opcionesHTML}</div>
+        <div class="col-12 text-center">
+            <p class="small mb-0">"Estos son casos hipotéticos basados en las referencias bibliográficas."</p>
+          </div>
+        `,
         showConfirmButton: false,
         allowOutsideClick: false,
         target: document.getElementById('wrap-course-content'),
         customClass: {
-          popup: "pop_html_style border border-3 border-primary rounded-4",
-          confirmButton: "btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite",
+          popup: 'pop_html_style border border-3 border-primary rounded-4',
+          confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
         },
         didOpen: () => {
-          document.querySelectorAll(".opcion-btn").forEach((btn) => {
-            btn.addEventListener("mouseenter", () => {
-              btn.classList.add("selected");
+          document.querySelectorAll('.opcion-btn').forEach((btn) => {
+            btn.addEventListener('mouseenter', () => {
+              btn.classList.add('selected');
             });
-            btn.addEventListener("mouseleave", () => {
-              btn.classList.remove("selected");
+            btn.addEventListener('mouseleave', () => {
+              btn.classList.remove('selected');
             });
-            btn.addEventListener("click", (e) => {
-              const target = e.target.closest(".opcion-btn");
-              const esCorrecta = target.dataset.correct === "true";
+            btn.addEventListener('click', (e) => {
+              const target = e.target.closest('.opcion-btn');
+              const esCorrecta = target.dataset.correct === 'true';
               manejarRespuesta(esCorrecta, puntajeEnJuego, pregunta);
             });
           });
@@ -385,20 +385,20 @@
 
         // Marcar imagen como visitada solo cuando responde correctamente
         if (girosRealizados < maxGiros) {
-          avanceImages[girosRealizados].classList.add("visited");
+          avanceImages[girosRealizados].classList.add('visited');
           girosRealizados++;
         }
 
         Swal.fire({
-          title: "¡Correcto!",
+          title: '¡Correcto!',
           text: `Has ganado ${puntajeEnJuego} puntos. ${pregunta.retroalimentacion_correcta}`,
-          icon: "success",
+          icon: 'success',
           target: document.getElementById('wrap-course-content'),
-          confirmButtonText: "Continuar",
+          confirmButtonText: 'Continuar',
         }).then(() => {
           finalizarTurno();
           if (girosRealizados < maxGiros) {
-            spinBtn.classList.add("animate__animated", "animate__pulse", "animate__infinite");
+            spinBtn.classList.add('animate__animated', 'animate__pulse', 'animate__infinite');
           }
         });
       } else {
@@ -409,11 +409,11 @@
 
     function finalizarTurno() {
       isSpinning = false;
-      document.getElementById("coursenav-main-content").classList.remove("no-overflow");
+      document.getElementById('coursenav-main-content').classList.remove('no-overflow');
 
       if (girosRealizados >= maxGiros) {
         spinBtn.disabled = true;
-        spinBtn.textContent = "¡Juego Completado!";
+        spinBtn.textContent = '¡Juego Completado!';
         CourseNav.setSlideVisited();
         setTimeout(() => {
           Completed();
@@ -423,27 +423,26 @@
         spinBtn.textContent = `¡GIRAR RULETA! (${maxGiros - girosRealizados} restantes)`;
       }
 
-      ruletaWheel.classList.remove("spinning");
+      ruletaWheel.classList.remove('spinning');
     }
 
     function Completed() {
-      const html = $("#pop0").html();
+      const html = $('#pop0').html();
       Swal.fire({
         html: html,
         target: document.getElementById('wrap-course-content'),
         customClass: {
           popup: 'pop_html_style border border-3 border-primary rounded-4',
-          confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite'
+          confirmButton: 'btn text-white bg-primary amor fw-semibold animate__animated animate__pulse animate__infinite',
         },
-        confirmButtonText: "Cerrar",
+        confirmButtonText: 'Cerrar',
         showConfirmButton: true,
         allowOutsideClick: false,
         allowEscapeKey: false,
         focusConfirm: false,
-        backdrop: "rgba(65, 60, 60, .95)",
-        width: "35em",
-        didOpen: () => {
-        },
+        backdrop: 'rgba(65, 60, 60, .95)',
+        width: '35em',
+        didOpen: () => {},
         didClose: () => {
           CourseNav.audioController.stopAudio();
           CourseNav.setSlideVisited();
@@ -452,13 +451,13 @@
     }
     // Cargar preguntas de "Diapositiva 19"
     readExcelFile(urlExcelFile, function (data) {
-      const sheetData = data["Diapositiva 19"];
+      const sheetData = data['Diapositiva 19'];
       if (sheetData) {
         questions = procesarPreguntas(sheetData);
-        console.log("Preguntas cargadas de Diapositiva 19:", questions);
+        console.log('Preguntas cargadas de Diapositiva 19:', questions);
       } else {
         console.error('No se encontró la hoja "Diapositiva 19"');
-        console.log("Hojas disponibles:", Object.keys(data));
+        console.log('Hojas disponibles:', Object.keys(data));
       }
     });
   });