diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..4694270
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "htmlWhitespaceSensitivity": "css",
+  "printWidth": 300,
+  "tabWidth": 2,
+  "singleQuote": true
+}
diff --git a/Actividades_Rotafolio_Vantive.xlsx b/Actividades_Rotafolio_Vantive.xlsx
index c4810ae..59101ab 100644
Binary files a/Actividades_Rotafolio_Vantive.xlsx and b/Actividades_Rotafolio_Vantive.xlsx differ
diff --git a/Drag_Drop2.xlsx b/Drag_Drop2.xlsx
index 7ddc930..a511ac2 100644
Binary files a/Drag_Drop2.xlsx and b/Drag_Drop2.xlsx differ
diff --git a/config.json b/config.json
index 2a12c85..31956c6 100644
--- a/config.json
+++ b/config.json
@@ -83,6 +83,10 @@
         {
           "title": "Despedida",
           "content": "contenido/19.html"
+        },
+        {
+          "title": "Referencias",
+          "content": "contenido/20.html"
         }
       ]
     }
diff --git a/contenido/01.html b/contenido/01.html
index ac5cbc6..a41f3c0 100644
--- a/contenido/01.html
+++ b/contenido/01.html
@@ -1,53 +1,57 @@
 <style>
-    .fake {
-        background-image: url(img/bg00.jpg);
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: cover;
-    }
+  .fake {
+    background-image: url(img/bg00.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
 
-    .w-container {
-        background-image: url(img/w-xx1.png);
-        background-repeat: no-repeat;
-        background-position: left;
-        background-size: 100% auto;
-    }
+  .w-container {
+    background-image: url(img/w-xx1.png);
+    background-repeat: no-repeat;
+    background-position: left;
+    background-size: 100% auto;
+  }
 </style>
-<div class='page-sco py-2 py-md-4 h-100'>
-    <div class='container h-100'>
-        <div class='row justify-content-center align-items-center h-100'>
-            <div class='col-12 w-container'>
-                <div class='row justify-content-center'>
-                    <div class="col-11">
-                        <div class="row justify-content-center align-items-center">
-                            <div class="col-8">
-                                <h1 class="text-white fw-bold">INDUCCIÓN AL PROGRAMA DE <br> DIÁLISIS PERITONEAL<span
-                                        class="fw-bold text-verde-ceniza">>>></span></h1>
-                                        <p class="text-white">Pioneros en el cuidado de la enfermedad renal crónica</p>
-                            </div>
-                            <div class="col-4">
-                                <img src="img/0.1.png" class="img-fluid" alt="" />
-                            </div>
-                        </div>
-                    </div>
-                    <!-- <div class="col-10 text-center">
+<div class="page-sco py-2 py-md-4 h-100">
+  <div class="container h-100">
+    <div class="row justify-content-center align-items-center h-100">
+      <div class="col-12 w-container">
+        <div class="row justify-content-center">
+          <div class="col-11">
+            <div class="row justify-content-center align-items-center">
+              <div class="col-8">
+                <h1 class="text-primary fw-bold">
+                  INDUCCIÓN AL PROGRAMA DE
+                  <br />
+                  DIÁLISIS PERITONEAL
+                  <span class="fw-bold text-verde-oscuro">>>></span>
+                </h1>
+                <p class="text-primary">Pioneros en el cuidado de la enfermedad renal crónica</p>
+              </div>
+              <div class="col-4">
+                <img src="img/0.1.png" class="img-fluid" alt="" />
+              </div>
+            </div>
+          </div>
+          <!-- <div class="col-10 text-center">
                         <button class="btn btn-verde-oscuro btn-comenzar">
                             <h4 class="my-0 fw-bold">Comenzar</h4>
                         </button>
                     </div> -->
-                </div>
-            </div>
         </div>
+      </div>
     </div>
+  </div>
 </div>
 <script>
-    $(function () {
-        'use strict';
-        $('.wrap-course-content').addClass('fake');
-        CourseNav.setSlideVisited();
+  $(function () {
+    'use strict';
+    $('.wrap-course-content').addClass('fake');
+    CourseNav.setSlideVisited();
 
-        // $('.btn-comenzar').on('click', function () {
-        //     CourseNav.nextSlide();
-        // });
-    });
+    // $('.btn-comenzar').on('click', function () {
+    //     CourseNav.nextSlide();
+    // });
+  });
 </script>
diff --git a/contenido/03.html b/contenido/03.html
index 75232f3..1a6c437 100644
--- a/contenido/03.html
+++ b/contenido/03.html
@@ -46,25 +46,18 @@
 </style>
 <div class="page-sco py-2 py-md-4 h-100">
   <div class="container h-100">
-    <div
-      id="drag-drop-activity"
-      class="row justify-content-center align-items-center h-100"
-      style="overflow: hidden"
-    >
+    <div id="drag-drop-activity" 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">¿Cuál es el tratamiento?</h2>
+            <h2 class="text-center fw-bold text-primary">¿Cuál es el tratamiento<sup class="fw-bold">1,4</sup>?</h2>
             <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
           </div>
           <div class="col-12 px-0">
             <div class="card bg-custom border-0 my-2 rounded-0 shadow p-3 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" />
-                <p class="mb-0">
-                  <strong>Instrucciones:</strong> Relaciona las imágenes con la terapia a la que
-                  corresponden.
-                </p>
+                <p class="mb-0"><strong>Instrucciones:</strong> Relaciona las imágenes con la terapia a la que corresponden.</p>
               </div>
             </div>
           </div>
@@ -77,23 +70,17 @@
                 <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-none px-3 py-2 mt-2"
-                      >
+                      <div class="card rounded bg-custom-transparent border-0 shadow-none px-3 py-2 mt-2">
                         <img src="img/3.2.png" class="img-fluid" />
                       </div>
                     </div>
                     <div class="content-enfermedad text-center">
-                      <div
-                        class="card rounded bg-custom-transparent border-0 shadow-none px-3 py-2 mt-2"
-                      >
+                      <div class="card rounded bg-custom-transparent border-0 shadow-none px-3 py-2 mt-2">
                         <img src="img/3.3.png" class="img-fluid" />
                       </div>
                     </div>
                     <div class="content-enfermedad text-center">
-                      <div
-                        class="card rounded bg-custom-transparent border-0 shadow-none px-3 py-2 mt-2"
-                      >
+                      <div class="card rounded bg-custom-transparent border-0 shadow-none px-3 py-2 mt-2">
                         <img src="img/3.4.png" class="img-fluid" />
                       </div>
                     </div>
@@ -126,26 +113,26 @@
 </div>
 <script>
   $(function () {
-    "use strict";
-    $(".wrap-course-content").addClass("fake");
+    'use strict';
+    $('.wrap-course-content').addClass('fake');
 
     let questions;
     let currentQuestionIndex = 0;
     let currentQuestion;
     let correctQuestions = 0;
-    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 = "Drag_Drop.xlsx";
+    const urlExcelFile = 'Drag_Drop.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];
@@ -160,10 +147,10 @@
       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',
             });
           }
         });
@@ -186,10 +173,10 @@
     }
 
     function CreateDragAndDrop() {
-      $(".content-enfermedad").each(function (index) {
+      $('.content-enfermedad').each(function (index) {
         if (questions && questions[index]) {
           const dropDiv = `<div class="position-relative card bg-transparent drop-card shadow-none rounded-0 p-0 mx-auto" data-drop="${index}"></div>`;
-          $(dropDiv).insertBefore($(this).find(".card"));
+          $(dropDiv).insertBefore($(this).find('.card'));
         }
       });
 
@@ -204,18 +191,18 @@
       allOptions = shuffleArray(allOptions);
       allOptions.forEach((option) => {
         const dragDiv = `<div class="card card-drag bg-verde-oscuro border-0 rounded-0 shadow-none px-3 py-2 text-white text-center" data-drag="${option.index}">${option.text}</div>`;
-        $("#content-drags").append(dragDiv);
+        $('#content-drags').append(dragDiv);
       });
     }
 
     function initializeDragAndDrop() {
-      $(".card-drag").draggable({
-        revert: "invalid",
+      $('.card-drag').draggable({
+        revert: 'invalid',
         revertDuration: 300,
         /*  containment: "#drag-drop-activity", */
-        cursor: "grabbing",
+        cursor: 'grabbing',
         start: function (event, ui) {
-          $(this).css("z-index", 1000);
+          $(this).css('z-index', 1000);
           ui.position.left = 0;
           ui.position.top = 0;
         },
@@ -228,52 +215,51 @@
           ui.position.top = newTop;
         },
         stop: function (event, ui) {
-          $(this).css("z-index", 1);
+          $(this).css('z-index', 1);
         },
       });
 
-      $(".drop-card").droppable({
-        accept: ".card-drag",
-        tolerance: "pointer",
+      $('.drop-card').droppable({
+        accept: '.card-drag',
+        tolerance: 'pointer',
         drop: function (event, ui) {
-          const dragData = ui.helper.data("drag");
-          const dropData = $(this).data("drop");
+          const dragData = ui.helper.data('drag');
+          const dropData = $(this).data('drop');
 
           if (dragData == dropData) {
             good.play();
-            ui.helper.css({ position: "static", top: "auto", left: "auto" }).appendTo(this);
-            ui.helper.draggable("disable");
-            $(this).droppable("disable");
+            ui.helper.css({ position: 'static', top: 'auto', left: 'auto' }).appendTo(this);
+            ui.helper.draggable('disable');
+            $(this).droppable('disable');
 
             // Verificar si todos están completados
-            if ($(".drop-card:not(.ui-droppable-disabled)").length === 0) {
+            if ($('.drop-card:not(.ui-droppable-disabled)').length === 0) {
               Completed();
             }
           } else {
             bad.play();
-            ui.helper.draggable("option", "revert", true);
+            ui.helper.draggable('option', 'revert', true);
           }
         },
       });
     }
 
     function Completed() {
-      const html = $("#pop0").html();
+      const html = $('#pop0').html();
       Swal.fire({
         html: html,
-        target: document.getElementById("wrap-course-content"),
+        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,
         focusConfirm: false,
-        backdrop: "rgba(65, 60, 60, .95)",
-        width: "35em",
+        backdrop: 'rgba(65, 60, 60, .95)',
+        width: '35em',
         didOpen: () => {},
         didClose: () => {
           CourseNav.audioController.stopAudio();
@@ -288,7 +274,7 @@
     }
 
     readExcelFile(urlExcelFile, function (data) {
-      const hojaDatos = data["DragAndDrop"];
+      const hojaDatos = data['DragAndDrop'];
       questions = procesarPreguntas(hojaDatos);
       CreateDragAndDrop();
       initializeDragAndDrop();
@@ -298,14 +284,14 @@
     // Ajustar altura de todos los elementos .bg-custom-transparent al más alto
     function igualarAlturaBgCustomTransparent() {
       var maxHeight = 0;
-      $(".bg-custom-transparent").each(function () {
-        $(this).css("height", "auto"); // Resetear altura para medir correctamente
+      $('.bg-custom-transparent').each(function () {
+        $(this).css('height', 'auto'); // Resetear altura para medir correctamente
         var h = $(this).outerHeight();
         if (h > maxHeight) maxHeight = h;
       });
-      $(".bg-custom-transparent").css("height", maxHeight + "px");
+      $('.bg-custom-transparent').css('height', maxHeight + 'px');
     }
-    $(window).on("resize", igualarAlturaBgCustomTransparent);
+    $(window).on('resize', igualarAlturaBgCustomTransparent);
     igualarAlturaBgCustomTransparent();
   });
 </script>
diff --git a/contenido/04.html b/contenido/04.html
index 48f47f3..2570cb3 100644
--- a/contenido/04.html
+++ b/contenido/04.html
@@ -17,11 +17,7 @@
 
   .bg-custom-transparent {
     background: rgba(242, 232, 222, 0.76);
-    background: linear-gradient(
-      to bottom,
-      rgba(242, 232, 222, 0.6) 0%,
-      rgba(240, 244, 242, 0.9) 100%
-    );
+    background: linear-gradient(to bottom, rgba(242, 232, 222, 0.6) 0%, rgba(240, 244, 242, 0.9) 100%);
   }
 
   /* .bg-custom-transparent img {
@@ -78,11 +74,7 @@
 </style>
 <div class="page-sco py-2 py-md-4 h-100">
   <div class="container h-100">
-    <div
-      id="drag-drop-activity"
-      class="row justify-content-center align-items-center h-100"
-      style="overflow: hidden"
-    >
+    <div id="drag-drop-activity" 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">
@@ -93,10 +85,7 @@
             <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" />
-                <p class="mb-0">
-                  <strong>Instrucciones:</strong> Toma los nombres y arrástralos hacia el lugar que
-                  les corresponda en las imágenes.
-                </p>
+                <p class="mb-0"><strong>Instrucciones:</strong> Toma los nombres y arrástralos hacia el lugar que les corresponda en las imágenes.</p>
               </div>
             </div>
           </div>
@@ -106,60 +95,44 @@
                 <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 mt-2 text-center"
-                      >
+                      <div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center">
                         <div class="card-header bg-transparent">
                           <img src="img/4.1.png" class="img-fluid" />
                         </div>
-                        <div
-                          class="w-100 form-append bg-secondary-light d-flex flex-row border-0 rounded"
-                        >
+                        <div class="w-100 form-append bg-secondary-light d-flex flex-row border-0 rounded">
                           <div class="bg-secondary text-white fw-bold py-2 px-2">1</div>
                           <div class="option w-100"></div>
                         </div>
                       </div>
                     </div>
                     <div class="content-enfermedad text-center">
-                      <div
-                        class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center"
-                      >
+                      <div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center">
                         <div class="card-header bg-transparent">
                           <img src="img/4.2.png" class="img-fluid" />
                         </div>
-                        <div
-                          class="w-100 form-append bg-secondary-light d-flex flex-row border-0 rounded"
-                        >
+                        <div class="w-100 form-append bg-secondary-light d-flex flex-row border-0 rounded">
                           <div class="bg-secondary text-white fw-bold py-2 px-2">2</div>
                           <div class="option w-100"></div>
                         </div>
                       </div>
                     </div>
                     <div class="content-enfermedad text-center">
-                      <div
-                        class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center"
-                      >
+                      <div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center">
                         <div class="card-header bg-transparent">
                           <img src="img/4.3.png" class="img-fluid" />
                         </div>
-                        <div
-                          class="w-100 form-append bg-secondary-light d-flex flex-row border-0 rounded"
-                        >
+                        <div class="w-100 form-append bg-secondary-light d-flex flex-row border-0 rounded">
                           <div class="bg-secondary text-white fw-bold py-2 px-2">3</div>
                           <div class="option w-100"></div>
                         </div>
                       </div>
                     </div>
                     <div class="content-enfermedad text-center">
-                      <div
-                        class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center"
-                      >
+                      <div class="card rounded bg-custom-transparent border-0 shadow px-3 py-2 mt-2 text-center">
                         <div class="card-header bg-transparent">
                           <img src="img/4.4.png" class="img-fluid" />
                         </div>
-                        <div
-                          class="w-100 form-append bg-secondary-light d-flex flex-row border-0 rounded"
-                        >
+                        <div class="w-100 form-append bg-secondary-light d-flex flex-row border-0 rounded">
                           <div class="bg-secondary text-white fw-bold py-2 px-2">4</div>
                           <div class="option w-100"></div>
                         </div>
@@ -197,26 +170,26 @@
 </div>
 <script>
   $(function () {
-    "use strict";
-    $(".wrap-course-content").addClass("fake");
+    'use strict';
+    $('.wrap-course-content').addClass('fake');
 
     let questions;
     let currentQuestionIndex = 0;
     let currentQuestion;
     let correctQuestions = 0;
-    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 = "Drag_Drop2.xlsx";
+    const urlExcelFile = 'Drag_Drop2.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];
@@ -231,10 +204,10 @@
       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",
+              text: String(fila[key]).trim(),
+              correct: key === 'opcion_c',
             });
           }
         });
@@ -257,10 +230,10 @@
     }
 
     function CreateDragAndDrop() {
-      $(".content-enfermedad").each(function (index) {
+      $('.content-enfermedad').each(function (index) {
         if (questions && questions[index]) {
           const dropDiv = `<div class="position-relative card bg-transparent drop-card shadow-none rounded-0 p-0 mx-auto" data-drop="${index}"></div>`;
-          $(this).find(".option").append(dropDiv);
+          $(this).find('.option').append(dropDiv);
         }
       });
 
@@ -274,19 +247,19 @@
 
       allOptions = shuffleArray(allOptions);
       allOptions.forEach((option) => {
-        const dragDiv = `<div class="card card-drag bg-verde-oscuro border-0 shadow-none px-3 py-2 text-white text-center" data-drag="${option.index}">${option.text}</div>`;
-        $("#content-drags").append(dragDiv);
+        const dragDiv = `<div class="card card-drag bg-verde-oscuro border-0 shadow-none px-3 py-2 text-white text-center" data-drag="${option.index}"><p class="mb-0">${option.text}</p></div>`;
+        $('#content-drags').append(dragDiv);
       });
     }
 
     function initializeDragAndDrop() {
-      $(".card-drag").draggable({
-        revert: "invalid",
+      $('.card-drag').draggable({
+        revert: 'invalid',
         revertDuration: 300,
         /* containment: "#drag-drop-activity", */
-        cursor: "grabbing",
+        cursor: 'grabbing',
         start: function (event, ui) {
-          $(this).css("z-index", 1000);
+          $(this).css('z-index', 1000);
           ui.position.left = 0;
           ui.position.top = 0;
         },
@@ -299,52 +272,51 @@
           ui.position.top = newTop;
         },
         stop: function (event, ui) {
-          $(this).css("z-index", 1);
+          $(this).css('z-index', 1);
         },
       });
 
-      $(".drop-card").droppable({
-        accept: ".card-drag",
-        tolerance: "pointer",
+      $('.drop-card').droppable({
+        accept: '.card-drag',
+        tolerance: 'pointer',
         drop: function (event, ui) {
-          const dragData = ui.helper.data("drag");
-          const dropData = $(this).data("drop");
+          const dragData = ui.helper.data('drag');
+          const dropData = $(this).data('drop');
 
           if (dragData == dropData) {
             good.play();
-            ui.helper.css({ position: "static", top: "auto", left: "auto" }).appendTo(this);
-            ui.helper.draggable("disable");
-            $(this).droppable("disable");
+            ui.helper.css({ position: 'static', top: 'auto', left: 'auto' }).appendTo(this);
+            ui.helper.draggable('disable');
+            $(this).droppable('disable');
 
             // Verificar si todos están completados
-            if ($(".drop-card:not(.ui-droppable-disabled)").length === 0) {
+            if ($('.drop-card:not(.ui-droppable-disabled)').length === 0) {
               Completed();
             }
           } else {
             bad.play();
-            ui.helper.draggable("option", "revert", true);
+            ui.helper.draggable('option', 'revert', true);
           }
         },
       });
     }
 
     function Completed() {
-      const html = $("#pop0").html();
+      const html = $('#pop0').html();
       Swal.fire({
         html: html,
-        target: document.getElementById("wrap-course-content"),
+        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,
         focusConfirm: false,
-        backdrop: "rgba(65, 60, 60, .95)",
-        width: "35em",
+        backdrop: 'rgba(65, 60, 60, .95)',
+        width: '35em',
         didOpen: () => {},
         didClose: () => {
           CourseNav.audioController.stopAudio();
@@ -359,7 +331,7 @@
     }
 
     readExcelFile(urlExcelFile, function (data) {
-      const hojaDatos = data["DragAndDrop"];
+      const hojaDatos = data['DragAndDrop'];
       questions = procesarPreguntas(hojaDatos);
       CreateDragAndDrop();
       initializeDragAndDrop();
@@ -369,12 +341,12 @@
     // Ajustar altura de todos los elementos .bg-custom-transparent al más alto
     function igualarAlturaBgCustomTransparent() {
       var maxHeight = 0;
-      $(".bg-custom-transparent").each(function () {
-        $(this).css("height", "auto"); // Resetear altura para medir correctamente
+      $('.bg-custom-transparent').each(function () {
+        $(this).css('height', 'auto'); // Resetear altura para medir correctamente
         var h = $(this).outerHeight();
         if (h > maxHeight) maxHeight = h;
       });
-      $(".bg-custom-transparent").css("height", maxHeight + "px");
+      $('.bg-custom-transparent').css('height', maxHeight + 'px');
     }
 
     /* $(window).on('resize', igualarAlturaBgCustomTransparent);
diff --git a/contenido/05.html b/contenido/05.html
index 5cd9a2e..0aaa880 100644
--- a/contenido/05.html
+++ b/contenido/05.html
@@ -13,8 +13,8 @@
 
   .drop-card {
     border: 3px dashed var(--bs-primary);
-    width: 56px;
-    height: 56px;
+    width: 80px;
+    height: 80px;
   }
 
   /* .content-enfermedad {
@@ -27,8 +27,8 @@
 
   .card-drag {
     cursor: grab;
-    width: 50px;
-    height: 50px;
+    width: 75px;
+    height: 75px;
   }
 
   .card-drag img {
@@ -47,20 +47,20 @@
     max-width: 40%;
   }
 </style>
-<div class='page-sco py-2 py-md-4 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 id="drag-drop-activity" class='row justify-content-center'>
+<div class="page-sco py-2 py-md-4 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 id="drag-drop-activity" class="row justify-content-center">
           <div class="col-11">
-            <h2 class="text-center fw-bold text-primary">¿Cómo funciona la diálisis peritoneal?</h2>
-            <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>
+            <h2 class="text-center fw-bold text-primary">¿Cómo funciona la diálisis peritoneal?<sup class="fw-bold">1,2,4,5</sup></h2>
+            <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="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">
+                <img src="img/2.1.png" class="img-fluid mx-3" />
                 <p class="mb-0"><strong>Instrucciones:</strong> Observa los tapones, cada uno tiene un color que indica la concentración de su solución. Tu tarea es arrastrarlos hacia la solución que les corresponde.</p>
               </div>
             </div>
@@ -73,22 +73,22 @@
               <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">
-                    <img src="img/5.1a.png" class="img-fluid">
+                    <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">
-                    <img src="img/5.2a.png" class="img-fluid">
+                    <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">
-                    <img src="img/5.3a.png" class="img-fluid">
+                    <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">
-                    <img src="img/5.4a.png" class="img-fluid">
+                    <img src="img/5.4a.png" class="img-fluid" />
                   </div>
                 </div>
               </div>
@@ -102,8 +102,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">
@@ -136,9 +136,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);
         });
@@ -148,13 +148,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',
             });
           }
         });
@@ -162,7 +162,7 @@
           pregunta: fila.pregunta.trim(),
           opciones: opciones,
           retroalimentacion_correcta: fila.retroalimentacion_correcta.trim(),
-          retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim()
+          retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim(),
         };
       });
       return preguntas;
@@ -187,13 +187,13 @@
       // Crear todas las respuestas en #content-drags
       let allOptions = [];
       questions.forEach((question, index) => {
-        question.opciones.forEach(opcion => {
+        question.opciones.forEach((opcion) => {
           allOptions.push({ text: opcion.text, index: index });
         });
       });
 
       allOptions = shuffleArray(allOptions);
-      allOptions.forEach(option => {
+      allOptions.forEach((option) => {
         const dragDiv = `<div class="card card-drag bg-transparent border border-2 border-secondary rounded-0 shadow-none text-white text-center" data-drag="${option.index}">${option.text}</div>`;
         $('#content-drags').append(dragDiv);
       });
@@ -203,7 +203,7 @@
       $('.card-drag').draggable({
         revert: 'invalid',
         revertDuration: 300,
-        cursor: "grabbing",
+        cursor: 'grabbing',
         start: function (event, ui) {
           $(this).css('z-index', 1000);
           ui.position.left = 0;
@@ -220,7 +220,7 @@
         },
         stop: function (event, ui) {
           $(this).css('z-index', 1);
-        }
+        },
       });
 
       $('.drop-card').droppable({
@@ -244,28 +244,27 @@
             bad.play();
             ui.helper.draggable('option', 'revert', true);
           }
-        }
+        },
       });
     }
 
     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.soundClick();
@@ -279,7 +278,7 @@
     }
 
     readExcelFile(urlExcelFile, function (data) {
-      const hojaDatos = data["DragAndDrop"];
+      const hojaDatos = data['DragAndDrop'];
       questions = procesarPreguntas(hojaDatos);
       CreateDragAndDrop();
       initializeDragAndDrop();
diff --git a/contenido/06.html b/contenido/06.html
index cefb923..13281ee 100644
--- a/contenido/06.html
+++ b/contenido/06.html
@@ -15,19 +15,19 @@
     width: 23%;
   }
 </style>
-<div class='page-sco py-2 py-md-4 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-4 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-11 mb-2">
-            <h2 class="text-center fw-bold text-primary">¿Cómo funciona la diálisis peritoneal?</h2>
-            <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
+            <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="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">
+                <img src="img/2.1.png" class="img-fluid mx-3" />
                 <p class="mb-0"><strong>Instrucciones:</strong> Arrastra los pasos del recambio para colocarlos en el orden correcto.</p>
               </div>
             </div>
@@ -47,8 +47,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">
@@ -63,7 +63,7 @@
 </div>
 <script>
   $(function () {
-    "use strict";
+    'use strict';
     $('.wrap-course-content').addClass('fake');
 
     // Función para mezclar array (algoritmo Fisher-Yates)
@@ -141,30 +141,29 @@
       containment: '#activity1',
       cursor: 'grabbing',
       tolerance: 'pointer',
-      helper: "clone",
+      helper: 'clone',
       cursorAt: { top: 50, left: 50 },
       cancel: '.locked',
       update: function (event, ui) {
         // updateCardNumbers();
         if (checkOrder()) {
           $('#sortable-cards').sortable('disable');
-          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.soundClick();
@@ -199,7 +198,7 @@
       },
       stop: function (event, ui) {
         ui.item.removeClass('ui-sortable-helper');
-      }
+      },
     });
 
     // Hacer las tarjetas arrastrables
diff --git a/contenido/07.html b/contenido/07.html
index 67f01cf..7773f0c 100644
--- a/contenido/07.html
+++ b/contenido/07.html
@@ -133,9 +133,7 @@
               <div class="d-flex justify-content-center align-items-center flex-row">
                 <img src="img/3.1.png" class="img-fluid mx-3" />
                 <p class="mb-0">
-                  <strong>Instrucciones:</strong> Presiona cada ícono, lee con atención las
-                  oraciones que se presentan acerca de los tipos de diálisis y determina si son
-                  falsas o verdaderas.
+                  <strong>Instrucciones:</strong> Presiona cada ícono, lee con atención las oraciones que se presentan acerca de los tipos de diálisis y determina si son falsas o verdaderas.
                   <!-- para llenar el medidor de salud del paciente. -->
                 </p>
               </div>
@@ -144,9 +142,7 @@
           <div id="actividad-objects" class="col-12">
             <div class="row justify-content-center align-items-center">
               <div class="col-12 text-center mb-5">
-                <div
-                  class="content-medidor p-2 d-inline-flex flex-row justify-content-center align-items-center gap-3"
-                >
+                <div class="content-medidor p-2 d-inline-flex flex-row justify-content-center align-items-center gap-3">
                   <img src="img/07.7.png" class="img-fluid" />
                   <div class="termometro p-1">
                     <div id="#med0" class="med_style"></div>
@@ -155,10 +151,7 @@
                     <div id="#med3" class="med_style"></div>
                     <div id="#med4" class="med_style"></div>
                     <div id="#med5" class="med_style"></div>
-                    <div
-                      id="indicador"
-                      class="indicador-med d-flex flex-row justify-content-center align-items-center"
-                    >
+                    <div id="indicador" class="indicador-med d-flex flex-row justify-content-center align-items-center">
                       <img src="img/07.5.png" class="img-fluid" />
                     </div>
                   </div>
@@ -167,34 +160,19 @@
               </div>
               <div class="col-12">
                 <div class="d-flex flex-row justify-content-center align-items-center gap-3">
-                  <div
-                    class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite"
-                    data-obj="0"
-                  >
+                  <div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="0">
                     <img src="img/07.4.png" class="img-fluid" />
                   </div>
-                  <div
-                    class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite"
-                    data-obj="1"
-                  >
+                  <div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="1">
                     <img src="img/07.3.png" class="img-fluid" />
                   </div>
-                  <div
-                    class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite"
-                    data-obj="2"
-                  >
+                  <div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="2">
                     <img src="img/07.2.png" class="img-fluid" />
                   </div>
-                  <div
-                    class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite"
-                    data-obj="3"
-                  >
+                  <div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="3">
                     <img src="img/07.1.png" class="img-fluid" style="max-width: 223px" />
                   </div>
-                  <div
-                    class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite"
-                    data-obj="4"
-                  >
+                  <div class="object-btn text-center d-inline-block animate__animated animate__pulse animate__infinite" data-obj="4">
                     <img src="img/07.0.png" class="img-fluid" />
                   </div>
                 </div>
@@ -212,10 +190,7 @@
       <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
-            id="txt-answers"
-            class="d-flex flex-row justify-content-center align-items-center gap-3"
-          ></div>
+          <div id="txt-answers" class="d-flex flex-row justify-content-center align-items-center gap-3"></div>
         </div>
       </div>
     </div>
@@ -238,8 +213,8 @@
 </div>
 <script>
   $(function () {
-    "use strict";
-    $(".wrap-course-content").addClass("fake");
+    'use strict';
+    $('.wrap-course-content').addClass('fake');
 
     let questions;
     let currentQuestionIndex = 0;
@@ -247,19 +222,19 @@
     let correctQuestions = 0;
     let currentObjectBtn;
     let isCorrectAnswer = false;
-    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];
@@ -274,22 +249,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",
+              text: String(fila[key]).trim(),
+              correct: key === 'opcion_c',
             });
           }
         });
         return {
-          pregunta: fila.pregunta.trim(),
+          pregunta: String(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;
@@ -305,13 +276,13 @@
 
     // Cargar preguntas al inicio
     readExcelFile(urlExcelFile, function (data) {
-      const hojaDatos = data["Diapositiva 7"];
+      const hojaDatos = data['Diapositiva 7'];
       questions = procesarPreguntas(hojaDatos);
     });
 
-    $(".object-btn").click(function (e) {
+    $('.object-btn').click(function (e) {
       e.preventDefault();
-      if ($(this).hasClass("disabled")) return;
+      if ($(this).hasClass('disabled')) return;
       CourseNav.soundClick();
       currentObjectBtn = $(this);
       if (questions && questions.length > 0) {
@@ -324,29 +295,28 @@
       currentQuestion = questions[currentQuestionIndex];
       currentQuestionIndex = (currentQuestionIndex + 1) % questions.length;
 
-      const html = $("#pops-questions").html();
+      const html = $('#pops-questions').html();
       Swal.fire({
         html: html,
-        target: document.getElementById("wrap-course-content"),
+        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: false,
         allowOutsideClick: false,
         allowEscapeKey: false,
         focusConfirm: false,
-        backdrop: "rgba(65, 60, 60, .95)",
-        width: "45em",
+        backdrop: 'rgba(65, 60, 60, .95)',
+        width: '45em',
         didOpen: () => {
           displayQuestion();
         },
         didClose: () => {
           CourseNav.audioController.stopAudio();
           if (currentObjectBtn) {
-            currentObjectBtn.addClass("completed disabled");
+            currentObjectBtn.addClass('completed disabled');
             checkAllCompleted();
           }
         },
@@ -355,15 +325,15 @@
 
     function displayQuestion() {
       const contentSwal = $(Swal.getHtmlContainer());
-      const txtPregunta = contentSwal.find("#txt-question");
-      const txtAnswers = contentSwal.find("#txt-answers");
+      const txtPregunta = contentSwal.find('#txt-question');
+      const txtAnswers = contentSwal.find('#txt-answers');
 
       txtPregunta.html(currentQuestion.pregunta);
 
       // Aleatorizar respuestas
       const shuffledOpciones = shuffleArray([...currentQuestion.opciones]);
 
-      let answersHtml = "";
+      let answersHtml = '';
       shuffledOpciones.forEach((opcion, index) => {
         answersHtml += `<div class="btn-answer text-white p-2 px-3" data-correct="${opcion.correct}">${opcion.text}</div>`;
       });
@@ -371,9 +341,9 @@
       txtAnswers.html(answersHtml);
 
       // Event listener para respuestas
-      contentSwal.find(".btn-answer").click(function () {
-        isCorrectAnswer = $(this).data("correct");
-        $(this).addClass("selected");
+      contentSwal.find('.btn-answer').click(function () {
+        isCorrectAnswer = $(this).data('correct');
+        $(this).addClass('selected');
         if (isCorrectAnswer) {
           good.play();
           correctQuestions++;
@@ -386,33 +356,32 @@
     }
 
     function moveIndicator() {
-      const positions = ["left: 90px", "left: 170px", "left: 250px", "left: 330px", "left: 410px"];
+      const positions = ['left: 90px', 'left: 170px', 'left: 250px', 'left: 330px', 'left: 410px'];
       if (correctQuestions <= 5) {
-        $("#indicador").attr("style", positions[correctQuestions - 1]);
+        $('#indicador').attr('style', positions[correctQuestions - 1]);
       }
     }
 
     function checkAllCompleted() {
-      const totalButtons = $(".object-btn").length;
-      const completedButtons = $(".object-btn.completed").length;
+      const totalButtons = $('.object-btn').length;
+      const completedButtons = $('.object-btn.completed').length;
 
       if (totalButtons === completedButtons) {
         setTimeout(() => {
-          const html = $("#pop0").html();
+          const html = $('#pop0').html();
           Swal.fire({
             html: html,
-            target: document.getElementById("wrap-course-content"),
+            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/08.html b/contenido/08.html
index 035a212..a8b3e4b 100644
--- a/contenido/08.html
+++ b/contenido/08.html
@@ -173,7 +173,7 @@
           <h3 class="text-secondary-dark fw-bold">¡Recuerda!</h3>
         </div>
         <div class="col-12 text-center">
-          <p class="mb-0">Siempre debes lavar tus manos de acuerdo con la técnica de la OMS antes de empezar cualquier terapia.</p>
+          <p class="mb-0">Siempre debes lavar tus manos de acuerdo con la técnica de la OMS antes de empezar cualquier terapia<sup class="fw-bold">2,7,8</sup>.</p>
         </div>
       </div>
     </div>
diff --git a/contenido/10.html b/contenido/10.html
index 381f0b9..a8a204d 100644
--- a/contenido/10.html
+++ b/contenido/10.html
@@ -17,19 +17,19 @@
     width: 60%;
   }
 </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 ps-0'>
-        <div class='row justify-content-center align-items-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 ps-0">
+        <div class="row justify-content-center align-items-center">
           <div class="col-5 animate__animated animate__lightSpeedInLeft">
             <div class="card card-style bg-verde-oscuro ps-5 pr-3 py-3 border-0 text-center">
-              <h2 class="text-white fw-bold">¿Qué es un catéter?</h2>
-              <hr class="hr-style border border-3 border-verde-ceniza hr-style mx-auto my-0">
+              <h2 class="text-white fw-bold">¿Qué es un catéter<sup>1,4,8,9</sup>?</h2>
+              <hr class="hr-style border border-3 border-verde-ceniza hr-style mx-auto my-0" />
             </div>
           </div>
           <div class="col-7 text-center animate__animated animate__zoomIn">
-            <img src="img/10.0.png" class="img-fluid">
+            <img src="img/10.0.png" class="img-fluid" />
           </div>
         </div>
       </div>
@@ -38,7 +38,7 @@
 </div>
 <script>
   $(function () {
-    "use strict";
+    'use strict';
     $('.wrap-course-content').addClass('fake');
     CourseNav.setSlideVisited();
   });
diff --git a/contenido/12.html b/contenido/12.html
index 085225d..b04e8bd 100644
--- a/contenido/12.html
+++ b/contenido/12.html
@@ -28,19 +28,19 @@
     font-weight: bold;
   }
 </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">Cuidados del sitio de salida y complicaciones</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 col-instrucciones">
             <div class="card bg-lila-claro border-0 my-2 rounded-4 bg-custom px-3 py-2 text-center">
               <div class="d-flex justify-content-center align-items-center flex-row">
-                <img src="img/12.3.png" class="img-fluid mx-3">
+                <img src="img/12.3.png" class="img-fluid mx-3" />
                 <p class="mb-0 text-white text-start">Lee lo que opinan dos doctores sobre los cuidados del sitio de salida y las complicaciones que pueden surgir si no se hacen correctamente. Analiza cuidadosamente sus argumentos y elige quién tiene la razón.</p>
               </div>
             </div>
@@ -63,8 +63,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">
@@ -79,12 +79,12 @@
 </div>
 <script>
   $(function () {
-    "use strict";
+    'use strict';
     $('.wrap-course-content').addClass('fake');
     const feedbackcorrect = CourseNav.createSound('audio/feedback-correct.mpeg');
     const feedbackincorrect = CourseNav.createSound('audio/feedback-incorrect.mpeg');
 
-    const imgPerso = ['img/12.0.png','img/12.1.png'];
+    const imgPerso = ['img/12.0.png', 'img/12.1.png'];
     const urlExcelFile = 'Actividades_Rotafolio_Vantive.xlsx';
     let versusData;
     let currentQuestionIndex = 0;
@@ -96,9 +96,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);
         });
@@ -116,10 +116,10 @@
     }
 
     function procesarPreguntas(data) {
-      return data.map(fila => ({
+      return data.map((fila) => ({
         pregunta: fila.pregunta ? String(fila.pregunta).trim() : '',
         opcion: fila.opcion ? String(fila.opcion).trim() : '',
-        opcion_c: fila.opcion_c ? String(fila.opcion_c).trim() : ''
+        opcion_c: fila.opcion_c ? String(fila.opcion_c).trim() : '',
       }));
     }
 
@@ -129,7 +129,7 @@
       for (let i = 0; i < total; i++) {
         const circle = $('<div class="indicator-circle"></div>');
         circle.css({
-          'background-color': i === 0 ? '#2196F3' : '#E0E0E0'
+          'background-color': i === 0 ? '#2196F3' : '#E0E0E0',
         });
         circle.attr('data-index', i);
         container.append(circle);
@@ -137,13 +137,13 @@
     }
 
     function updateIndicators() {
-      $('.indicator-circle').each(function(index) {
+      $('.indicator-circle').each(function (index) {
         const $this = $(this);
         if (index < currentQuestionIndex) {
           $this.empty();
           const img = $('<img>').attr({
-            'src': 'img/11.check.png',
-            'style': 'width: 100%; height: 100%;'
+            src: 'img/11.check.png',
+            style: 'width: 100%; height: 100%;',
           });
           $this.append(img);
         } else if (index === currentQuestionIndex) {
@@ -177,14 +177,14 @@
         <div class="btn-respuesta" data-correct="${leftIsCorrect}">
           <div class="d-flex flex-column justify-content-center align-items-center gap-0">
             <img src="${shuffledImages[0]}" alt="personaje" style="z-index:1;">
-            <div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta text-white" style="margin-top: -60px;">${leftResponse || ''}</div>
+            <div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta text-white" style="margin-top: -60px;"><p class="mb-0">${leftResponse || ''}</p></div>
           </div>
         </div>
         <img src="img/12.2.png" class="img-fluid mx-2">
         <div class="btn-respuesta" data-correct="${!leftIsCorrect}">
           <div class="d-flex flex-column justify-content-center align-items-center gap-0">
             <img src="${shuffledImages[1]}" alt="personaje" style="z-index:1;">
-            <div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta text-white" style="margin-top: -60px;">${rightResponse || ''}</div>
+            <div class="card bg-verde-ceniza border-0 shadow rounded-15 pt-5 px-3 pb-3 text-center text-respuesta text-white" style="margin-top: -60px;"><p class="mb-0">${rightResponse || ''}</p></div>
           </div>
         </div>
       `;
@@ -196,7 +196,7 @@
         container.removeClass('animate__animated animate__zoomIn');
       }, 1000);
 
-      $('.btn-respuesta').click(function() {
+      $('.btn-respuesta').click(function () {
         const isCorrect = $(this).data('correct');
 
         if (isCorrect) {
@@ -235,31 +235,31 @@
 
     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);
     }
 
     // Cargar datos del Excel
-    readExcelFile(urlExcelFile, function(data) {
-     const hojaDatos = data["Diapositiva 14"];
+    readExcelFile(urlExcelFile, function (data) {
+      const hojaDatos = data['Diapositiva 14'];
       versusData = procesarPreguntas(hojaDatos);
       console.log('Datos cargados:', versusData);
       createIndicators(versusData.length);
diff --git a/contenido/13.html b/contenido/13.html
index 5f4d450..3c85a55 100644
--- a/contenido/13.html
+++ b/contenido/13.html
@@ -11,19 +11,21 @@
   }
 
   .card-style {
-    background-color: rgba(182, 143, 178, .31);
+    background-color: rgba(182, 143, 178, 0.31);
   }
 </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 px-0'>
-        <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 px-0">
+        <div class="row justify-content-center">
           <div class="col-10 mb-4 px-4 animate__animated animate__bounceInDown text-center">
             <div class="position-relative d-inline-block">
-              <h2 class="text-center fw-bold text-primary">Lavado de manos de acuerdo con la técnica de la <br> OMS y uso correcto de
-                cubrebocas</h2>
-              <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
+              <h2 class="text-center fw-bold text-primary">
+                Lavado de manos de acuerdo con la técnica de la <br />
+                OMS y uso correcto de cubrebocas<sup class="fw-bold">12</sup>
+              </h2>
+              <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
             </div>
           </div>
           <div class="col-12 px-0">
@@ -32,13 +34,13 @@
                 <div class="col-10">
                   <div class="row justify-content-center align-items-center">
                     <div class="col-4 text-center animate__animated animate__flipInX">
-                      <img src="img/13.0.png" class="img-fluid">
+                      <img src="img/13.0.png" class="img-fluid" />
                     </div>
                     <div class="col-4 text-center animate__animated animate__zoomIn animate__delay-1s">
-                      <img src="img/13.1.png" class="img-fluid">
+                      <img src="img/13.1.png" class="img-fluid" />
                     </div>
                     <div class="col-4 text-center animate__animated animate__rotateInDownRight animate__delay-2s">
-                      <img src="img/13.2.png" class="img-fluid">
+                      <img src="img/13.2.png" class="img-fluid" />
                     </div>
                   </div>
                 </div>
@@ -52,7 +54,7 @@
 </div>
 <script>
   $(function () {
-    "use strict";
+    'use strict';
     $('.wrap-course-content').addClass('fake');
     CourseNav.setSlideVisited();
   });
diff --git a/contenido/14.html b/contenido/14.html
index 73f5d3e..d3125b9 100644
--- a/contenido/14.html
+++ b/contenido/14.html
@@ -47,7 +47,7 @@
             <div class="position-relative d-inline-block">
               <h2 class="text-center fw-bold text-primary">
                 Técnica correcta para higiene de manos <br />
-                de acuerdo con la técnica de la OMS
+                de acuerdo con la técnica de la OMS<sup class="fw-bold">12</sup>
               </h2>
               <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
             </div>
@@ -56,9 +56,7 @@
             <div class="card bg-lila-rosa border-0 my-2 rounded-4 bg-custom px-3 py-2 text-center">
               <div class="d-flex justify-content-center align-items-center flex-row">
                 <img src="img/14.12.png" class="img-fluid mx-3" />
-                <p class="mb-0 text-start">
-                  Arrastra los pasos del lavado de manos para colocarlos en el orden correcto.
-                </p>
+                <p class="mb-0 text-start">Arrastra los pasos del lavado de manos para colocarlos en el orden correcto.</p>
               </div>
             </div>
           </div>
@@ -130,11 +128,11 @@
 </div>
 <script>
   $(function () {
-    "use strict";
-    $(".wrap-course-content").addClass("fake");
+    'use strict';
+    $('.wrap-course-content').addClass('fake');
 
-    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');
 
     function shuffleArray(array) {
       for (let i = array.length - 1; i > 0; i--) {
@@ -145,22 +143,22 @@
     }
 
     // Shuffle elements
-    const $sortables = $(".img-sotable");
+    const $sortables = $('.img-sotable');
     const shuffled = shuffleArray($sortables.toArray());
-    $(".custom-grid").empty().append(shuffled);
+    $('.custom-grid').empty().append(shuffled);
 
     // Initialize sortable
-    $(".custom-grid").sortable({
-      items: ".img-sotable",
-      containment: ".wrap-course-content",
-      cursor: "grabbing",
-      tolerance: "pointer",
+    $('.custom-grid').sortable({
+      items: '.img-sotable',
+      containment: '.wrap-course-content',
+      cursor: 'grabbing',
+      tolerance: 'pointer',
       forceHelperSize: true,
       forcePlaceholderSize: true,
-      placeholder: "sortable-placeholder",
+      placeholder: 'sortable-placeholder',
       distance: 5,
       sort: function (event, ui) {
-        var scale = parseFloat($(".wrap-course-content").css("transform").split("(")[1]) || 1;
+        var scale = parseFloat($('.wrap-course-content').css('transform').split('(')[1]) || 1;
         var mouseX = event.pageX;
         var mouseY = event.pageY;
         ui.helper.css({
@@ -174,11 +172,11 @@
     });
 
     function checkOrder() {
-      const $items = $(".custom-grid .img-sotable");
+      const $items = $('.custom-grid .img-sotable');
       let isCorrect = true;
 
       $items.each(function (index) {
-        if (parseInt($(this).data("order")) !== index) {
+        if (parseInt($(this).data('order')) !== index) {
           isCorrect = false;
           return false;
         }
@@ -186,31 +184,30 @@
 
       if (isCorrect) {
         good.play();
-        $(".custom-grid").sortable("disable");
+        $('.custom-grid').sortable('disable');
         checkAllCompleted();
       }
     }
 
     function checkAllCompleted() {
       setTimeout(() => {
-        const html = $("#pop0").html();
+        const html = $('#pop0').html();
         Swal.fire({
           html: html,
-          target: document.getElementById("wrap-course-content"),
+          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();
-            $(".img-sotable").addClass("disabled");
+            $('.img-sotable').addClass('disabled');
           },
         });
       }, 250);
diff --git a/contenido/16.html b/contenido/16.html
index a740a1d..ea3a138 100644
--- a/contenido/16.html
+++ b/contenido/16.html
@@ -18,7 +18,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);
   }
 
   .letter {
@@ -58,11 +58,11 @@
     transition: all 0.5s ease;
   }
 </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">Control de líquidos</h2>
             <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
@@ -71,8 +71,7 @@
             <div class="card bg-inst border-0 my-2 rounded-0 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/3.1.png" class="img-fluid mx-3" />
-                <p class="mb-0 text-start"><strong>Instrucciones:</strong> Lee cada una de las preguntas acerca del control de líquidos y contesta correctamente. Por cada acierto obtendrás una
-                pieza del rompecabezas, el reto es descubrir la imagen oculta.</p>
+                <p class="mb-0 text-start"><strong>Instrucciones:</strong> Lee cada una de las preguntas acerca del control de líquidos y contesta correctamente. Por cada acierto obtendrás una pieza del rompecabezas, el reto es descubrir la imagen oculta.</p>
               </div>
             </div>
           </div>
@@ -82,7 +81,7 @@
                 <div id="svg-container"></div>
               </div>
               <div class="col-7 col-actividad">
-                <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,.5);">
+                <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>
@@ -99,8 +98,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">
@@ -115,7 +114,7 @@
 </div>
 <script>
   $(function () {
-    "use strict";
+    'use strict';
     $('.wrap-course-content').addClass('fake');
     let questions;
     let currentQuestionIndex = 0;
@@ -125,15 +124,19 @@
     const good = CourseNav.createSound('audio/feedback-correct.mpeg');
 
     function loadSVG() {
-      $.get('img/puzzle.svg', function (data) {
-        var svg = $(data).find('svg');
-        $('#svg-container').html(svg);
-        // Remove width and height attributes to make SVG responsive
-        svg.removeAttr('width').removeAttr('height');
+      $.get(
+        'img/puzzle.svg',
+        function (data) {
+          var svg = $(data).find('svg');
+          $('#svg-container').html(svg);
+          // Remove width and height attributes to make SVG responsive
+          svg.removeAttr('width').removeAttr('height');
 
-        // Ocultar elementos con id que inicie con 'pz' y agregar clase 'piece-puzzle'
-        svg.find('[id^="pz"]').hide().addClass('piece-puzzle');
-      }, 'xml');
+          // Ocultar elementos con id que inicie con 'pz' y agregar clase 'piece-puzzle'
+          svg.find('[id^="pz"]').hide().addClass('piece-puzzle');
+        },
+        'xml',
+      );
     }
 
     const urlExcelFile = 'Actividades_Rotafolio_Vantive.xlsx';
@@ -145,9 +148,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);
         });
@@ -157,21 +160,21 @@
     }
 
     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'
+              text: String(fila[key]).trim(),
+              correct: key === 'opcion_c',
             });
           }
         });
         return {
-          pregunta: fila.pregunta.trim(),
+          pregunta: String(fila.pregunta).trim(),
           opciones: opciones,
           retroalimentacion_correcta: fila.retroalimentacion_correcta.trim(),
-          retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim()
+          retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta.trim(),
         };
       });
       return preguntas;
@@ -188,7 +191,7 @@
     function displayQuestion() {
       if (currentQuestionIndex < questions.length) {
         currentQuestion = questions[currentQuestionIndex];
-        $('.txt-question').text(currentQuestion.pregunta);
+        $('.txt-question').html(currentQuestion.pregunta);
 
         $('.content-answers').empty();
 
@@ -208,7 +211,7 @@
     }
 
     function initializeAnswers() {
-      $('#card-content-quiz-rompecabezas').on('click', '.btn-answer', function() {
+      $('#card-content-quiz-rompecabezas').on('click', '.btn-answer', function () {
         const isCorrect = $(this).data('correct');
 
         if (isCorrect) {
@@ -241,29 +244,29 @@
 
     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();
-          }
+          },
         });
       }, 250);
     }
 
     readExcelFile(urlExcelFile, function (data) {
-      const hojaDatos = data["Diapositiva 17"];
+      const hojaDatos = data['Diapositiva 17'];
       questions = shuffleArray(procesarPreguntas(hojaDatos));
       loadSVG();
       displayQuestion();
diff --git a/contenido/20.html b/contenido/20.html
new file mode 100644
index 0000000..c76e1d2
--- /dev/null
+++ b/contenido/20.html
@@ -0,0 +1,62 @@
+<style>
+  .fake {
+    background-image: url(img/bg05.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    background-attachment: fixed;
+  }
+
+  ol > li {
+    margin-bottom: 0.6rem;
+  }
+</style>
+<div class="page-sco h-100">
+  <div class="container h-100">
+    <div class="row justify-content-center align-items-center h-100">
+      <div class="col-11">
+        <div class="row justify-content-center align-content-center">
+          <div class="col-12">
+            <h1 class="fw-bold text-primary text-center">Referencias</h1>
+            <ol class="mb-0">
+              <li>International Society for Peritoneal Dialysis (ISPD). Peritoneal dialysis-related definitions and description of technique. Perit Dial Int. 2020;40(3):244–253.</li>
+              <li>International Society for Peritoneal Dialysis (ISPD). Teaching peritoneal dialysis to patients and caregivers: position paper. Perit Dial Int. 2025;45(1):3–19.</li>
+              <li>National Kidney Foundation. Hemodialysis. Am J Kidney Dis. 2015;66(5):884–930.</li>
+              <li>Kidney Disease: Improving Global Outcomes (KDIGO). KDIGO clinical practice guideline for the evaluation and management of chronic kidney disease. Kidney Int. 2024;105(Suppl 4):S1–S150.</li>
+              <li>Blake PG, Jain AK. Icodextrin as an osmotic agent in peritoneal dialysis. Kidney Int. 2002;62(Suppl 81):S38–S44.</li>
+              <li>Kidney Disease: Improving Global Outcomes (KDIGO). Krediet RT. The peritoneal membrane in peritoneal dialysis: physiology and pathophysiology. Nat Rev Nephrol. 2014;10(7):366–374.</li>
+              <li>Kidney Disease: Improving Global Outcomes (KDIGO). World Health Organization (WHO). WHO guidelines on hand hygiene in health care. Geneva: WHO; 2009.</li>
+              <li>International Society for Peritoneal Dialysis (ISPD). Catheter-related infection recommendations: 2023 update. Perit Dial Int. 2023;43(1):1–21.</li>
+              <li>Crabtree JH. Selected best demonstrated practices in peritoneal dialysis access. Kidney Int Suppl. 2006;(103):S27–S37</li>
+              <li>International Society for Peritoneal Dialysis (ISPD). Teaching peritoneal dialysis to patients and caregivers: position paper. Perit Dial Int. 2025;45(1):3–19.</li>
+              <li>International Society for Peritoneal Dialysis (ISPD). Peritonitis recommendations: 2022 update. Perit Dial Int. 2022;42(2):110–153.</li>
+              <li>World Health Organization (WHO). WHO guidelines on hand hygiene in health care. Geneva: WHO; 2009.</li>
+              <li>National Kidney Foundation. KDOQI Clinical Practice Guideline for Nutrition in CKD. Am J Kidney Dis. 2020;76(3 Suppl 1):S1–S107.</li>
+              <li>Kidney Disease: Improving Global Outcomes (KDIGO). KDIGO clinical practice guideline for anemia in chronic kidney disease. Kidney Int Suppl. 2021;11(4):1–115.</li>
+              <li>idney Disease: Improving Global Outcomes (KDIGO). CKD–Mineral and Bone Disorder guideline. Kidney Int Suppl. 2017;7(1):1–59.</li>
+            </ol>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  $(function () {
+    'use strict';
+
+    $('.wrap-course-content').addClass('fake');
+
+    gsap.from('ol > li', {
+      y: 40,
+      opacity: 0,
+      duration: 0.5,
+      stagger: 0.08,
+      ease: 'power2.out',
+    });
+
+    CourseNav.setSlideVisited();
+    CourseNav.setLessonStatus('completed');
+    CourseNav.save();
+  });
+</script>
diff --git a/img/10.0.png b/img/10.0.png
index 55ff151..75fce85 100644
Binary files a/img/10.0.png and b/img/10.0.png differ
diff --git a/img/11.0.png b/img/11.0.png
index 9ee49a4..11ff386 100644
Binary files a/img/11.0.png and b/img/11.0.png differ
diff --git a/img/11.1.png b/img/11.1.png
index 88012ea..d24d652 100644
Binary files a/img/11.1.png and b/img/11.1.png differ
diff --git a/img/11.2.png b/img/11.2.png
index 38ec1cc..68f72ad 100644
Binary files a/img/11.2.png and b/img/11.2.png differ
diff --git a/img/11.3.png b/img/11.3.png
index 0915df5..bec0ea6 100644
Binary files a/img/11.3.png and b/img/11.3.png differ
diff --git a/img/11.4.png b/img/11.4.png
index a88bf4b..af7a350 100644
Binary files a/img/11.4.png and b/img/11.4.png differ
diff --git a/img/11.5.png b/img/11.5.png
index 3f08d23..48cdb84 100644
Binary files a/img/11.5.png and b/img/11.5.png differ
diff --git a/img/3.2.png b/img/3.2.png
index f988b2a..107cdda 100644
Binary files a/img/3.2.png and b/img/3.2.png differ
diff --git a/img/3.4.png b/img/3.4.png
index 18ac54e..4a659b3 100644
Binary files a/img/3.4.png and b/img/3.4.png differ
diff --git a/img/4.1.png b/img/4.1.png
index b410f52..e7d01ca 100644
Binary files a/img/4.1.png and b/img/4.1.png differ
diff --git a/img/4.2.png b/img/4.2.png
index ab113bd..f8b4d8d 100644
Binary files a/img/4.2.png and b/img/4.2.png differ
diff --git a/img/4.3.png b/img/4.3.png
index a0a9944..73a3d80 100644
Binary files a/img/4.3.png and b/img/4.3.png differ
diff --git a/img/5.1b.png b/img/5.1b.png
index 3e59add..fc44d33 100644
Binary files a/img/5.1b.png and b/img/5.1b.png differ
diff --git a/img/5.2b.png b/img/5.2b.png
index 6f448b5..adf0a3c 100644
Binary files a/img/5.2b.png and b/img/5.2b.png differ
diff --git a/img/5.3b.png b/img/5.3b.png
index f95b5e2..8633a8f 100644
Binary files a/img/5.3b.png and b/img/5.3b.png differ
diff --git a/img/bg00.jpg b/img/bg00.jpg
index 13128d2..4e0f05c 100644
Binary files a/img/bg00.jpg and b/img/bg00.jpg differ
diff --git a/img/w-xx1.png b/img/w-xx1.png
index 69435e1..a1d75d2 100644
Binary files a/img/w-xx1.png and b/img/w-xx1.png differ