diff --git a/Actividades_Rotafolio_Vantive.xlsx b/Actividades_Rotafolio_Vantive.xlsx
index 338c455..c4810ae 100644
Binary files a/Actividades_Rotafolio_Vantive.xlsx and b/Actividades_Rotafolio_Vantive.xlsx differ
diff --git a/contenido/03.html b/contenido/03.html
index d563f7c..75232f3 100644
--- a/contenido/03.html
+++ b/contenido/03.html
@@ -12,7 +12,7 @@
   }
 
   .bg-custom {
-    background: rgba(214, 227, 218, .8);
+    background: rgba(214, 227, 218, 0.8);
   }
 
   .bg-custom-transparent {
@@ -44,24 +44,31 @@
     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'>
-      <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
+      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>
-            <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-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>
+                <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>
               </div>
             </div>
           </div>
-          <div id="drag-drop-activity" class="col-12">
+          <div class="col-12">
             <div class="row justify-content-center">
               <div class="col-12">
                 <div id="content-drags" class="d-flex flex-row justify-content-center gap-3"></div>
@@ -70,18 +77,24 @@
                 <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">
-                        <img src="img/3.2.png" class="img-fluid">
+                      <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">
-                        <img src="img/3.3.png" class="img-fluid">
+                      <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">
-                        <img src="img/3.4.png" class="img-fluid">
+                      <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>
                   </div>
@@ -97,8 +110,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">
@@ -114,27 +127,27 @@
 <script>
   $(function () {
     "use strict";
-    $('.wrap-course-content').addClass('fake');
+    $(".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 result = {};
-        workbook.SheetNames.forEach(sheetName => {
+        workbook.SheetNames.forEach((sheetName) => {
           var sheet = workbook.Sheets[sheetName];
           result[sheetName] = XLSX.utils.sheet_to_json(sheet);
         });
@@ -144,13 +157,13 @@
     }
 
     function procesarPreguntas(data) {
-      const preguntas = data.map(fila => {
+      const preguntas = data.map((fila) => {
         const opciones = [];
-        Object.keys(fila).forEach(key => {
-          if (key.startsWith('opcion')) {
+        Object.keys(fila).forEach((key) => {
+          if (key.startsWith("opcion")) {
             opciones.push({
               text: fila[key].trim(),
-              correct: key === 'opcion_c'
+              correct: key === "opcion_c",
             });
           }
         });
@@ -158,7 +171,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;
@@ -173,36 +186,36 @@
     }
 
     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"));
         }
       });
 
       // 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-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",
+        /*  containment: "#drag-drop-activity", */
         cursor: "grabbing",
         start: function (event, ui) {
-          $(this).css('z-index', 1000);
+          $(this).css("z-index", 1000);
           ui.position.left = 0;
           ui.position.top = 0;
         },
@@ -215,32 +228,32 @@
           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);
           }
-        }
+        },
       });
     }
 
@@ -248,10 +261,11 @@
       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",
         showConfirmButton: true,
@@ -260,8 +274,7 @@
         focusConfirm: false,
         backdrop: "rgba(65, 60, 60, .95)",
         width: "35em",
-        didOpen: () => {
-        },
+        didOpen: () => {},
         didClose: () => {
           CourseNav.audioController.stopAudio();
           //CourseNav.soundClick();
@@ -285,14 +298,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 37bd725..48f47f3 100644
--- a/contenido/04.html
+++ b/contenido/04.html
@@ -16,8 +16,12 @@
   }
 
   .bg-custom-transparent {
-    background: rgba(242, 232, 222, .76);
-    background: linear-gradient(to bottom, rgba(242, 232, 222, .6) 0%, rgba(240, 244, 242, .9) 100%);
+    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%
+    );
   }
 
   /* .bg-custom-transparent img {
@@ -72,76 +76,91 @@
     vertical-align: middle;
   } */
 </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
+      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">Tipos de diálisis</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-7 px-0">
             <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>
+                <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>
               </div>
             </div>
           </div>
-          <div id="drag-drop-activity" class="col-12">
+          <div class="col-12">
             <div class="row justify-content-center">
               <div class="col-12 mb-3">
                 <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">
+                          <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="bg-secondary text-white fw-bold py-2 px-2">
-                            1
-                          </div>
+                        <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">
+                          <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="bg-secondary text-white fw-bold py-2 px-2">
-                            2
-                          </div>
+                        <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">
+                          <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="bg-secondary text-white fw-bold py-2 px-2">
-                            3
-                          </div>
+                        <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">
+                          <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="bg-secondary text-white fw-bold py-2 px-2">
-                            4
-                          </div>
+                        <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>
                       </div>
@@ -162,8 +181,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">
@@ -179,27 +198,27 @@
 <script>
   $(function () {
     "use strict";
-    $('.wrap-course-content').addClass('fake');
+    $(".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 result = {};
-        workbook.SheetNames.forEach(sheetName => {
+        workbook.SheetNames.forEach((sheetName) => {
           var sheet = workbook.Sheets[sheetName];
           result[sheetName] = XLSX.utils.sheet_to_json(sheet);
         });
@@ -209,13 +228,13 @@
     }
 
     function procesarPreguntas(data) {
-      const preguntas = data.map(fila => {
+      const preguntas = data.map((fila) => {
         const opciones = [];
-        Object.keys(fila).forEach(key => {
-          if (key.startsWith('opcion')) {
+        Object.keys(fila).forEach((key) => {
+          if (key.startsWith("opcion")) {
             opciones.push({
               text: fila[key].trim(),
-              correct: key === 'opcion_c'
+              correct: key === "opcion_c",
             });
           }
         });
@@ -223,7 +242,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;
@@ -238,36 +257,36 @@
     }
 
     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);
         }
       });
 
       // 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-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);
+        $("#content-drags").append(dragDiv);
       });
     }
 
     function initializeDragAndDrop() {
-      $('.card-drag').draggable({
-        revert: 'invalid',
+      $(".card-drag").draggable({
+        revert: "invalid",
         revertDuration: 300,
-        containment: "#drag-drop-activity",
+        /* containment: "#drag-drop-activity", */
         cursor: "grabbing",
         start: function (event, ui) {
-          $(this).css('z-index', 1000);
+          $(this).css("z-index", 1000);
           ui.position.left = 0;
           ui.position.top = 0;
         },
@@ -280,32 +299,32 @@
           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);
           }
-        }
+        },
       });
     }
 
@@ -313,10 +332,11 @@
       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",
         showConfirmButton: true,
@@ -325,8 +345,7 @@
         focusConfirm: false,
         backdrop: "rgba(65, 60, 60, .95)",
         width: "35em",
-        didOpen: () => {
-        },
+        didOpen: () => {},
         didClose: () => {
           CourseNav.audioController.stopAudio();
           //CourseNav.soundClick();
@@ -347,22 +366,18 @@
       //igualarAlturaBgCustomTransparent();
     });
 
-
     // 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);
     igualarAlturaBgCustomTransparent(); */
-
-
-
   });
 </script>
diff --git a/contenido/07.html b/contenido/07.html
index ae35587..67f01cf 100644
--- a/contenido/07.html
+++ b/contenido/07.html
@@ -12,7 +12,7 @@
   }
 
   .bg-custom {
-    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   }
 
   .btn-answer {
@@ -43,7 +43,7 @@
 
   .content-medidor {
     background-color: #fff;
-    box-shadow: 0 0 12px rgba(0, 0, 0, .5);
+    box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
     border-radius: 40px;
   }
 
@@ -53,8 +53,8 @@
     grid-template-columns: repeat(6, 1fr);
     grid-template-rows: auto;
     gap: 0;
-    background: #E7E7E7;
-    background: linear-gradient(to left, #E7E7E7 0%, #C3C3C3 100%);
+    background: #e7e7e7;
+    background: linear-gradient(to left, #e7e7e7 0%, #c3c3c3 100%);
     border-radius: 40px;
   }
 
@@ -78,8 +78,8 @@
   .med_style:first-child {
     border-top-left-radius: 40px;
     border-bottom-left-radius: 40px;
-    background: #DF0000;
-    background: linear-gradient(to top, #DF0000 0%, #4F0700 100%);
+    background: #df0000;
+    background: linear-gradient(to top, #df0000 0%, #4f0700 100%);
   }
 
   .med_style:nth-child(2),
@@ -118,30 +118,36 @@
     left: 10px;
     transition: left 0.5s ease;
   }
-
 </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-10 mb-2">
             <h2 class="text-center fw-bold text-primary">Tipos de diálisis peritoneal</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-12 px-0 mb-3">
             <div class="card bg-white border-0 my-2 rounded-0 bg-custom 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> 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>
+                <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.
+                  <!-- para llenar el medidor de salud del paciente. -->
+                </p>
               </div>
             </div>
           </div>
           <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">
-                  <img src="img/07.7.png" class="img-fluid">
+                <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>
                     <div id="#med1" class="med_style"></div>
@@ -149,29 +155,47 @@
                     <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">
-                      <img src="img/07.5.png" class="img-fluid">
+                    <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>
-                  <img src="img/07.6.png" class="img-fluid">
+                  <img src="img/07.6.png" class="img-fluid" />
                 </div>
               </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">
-                    <img src="img/07.4.png" class="img-fluid">
+                  <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">
-                    <img src="img/07.3.png" class="img-fluid">
+                  <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">
-                    <img src="img/07.2.png" class="img-fluid">
+                  <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">
-                    <img src="img/07.1.png" class="img-fluid">
+                  <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">
-                    <img src="img/07.0.png" class="img-fluid">
+                  <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>
               </div>
@@ -188,15 +212,18 @@
       <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>
   </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">
@@ -212,7 +239,7 @@
 <script>
   $(function () {
     "use strict";
-    $('.wrap-course-content').addClass('fake');
+    $(".wrap-course-content").addClass("fake");
 
     let questions;
     let currentQuestionIndex = 0;
@@ -220,21 +247,21 @@
     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 result = {};
-        workbook.SheetNames.forEach(sheetName => {
+        workbook.SheetNames.forEach((sheetName) => {
           var sheet = workbook.Sheets[sheetName];
           result[sheetName] = XLSX.utils.sheet_to_json(sheet);
         });
@@ -244,21 +271,25 @@
     }
 
     function procesarPreguntas(data) {
-      const preguntas = data.map(fila => {
+      const preguntas = data.map((fila) => {
         const opciones = [];
-        Object.keys(fila).forEach(key => {
-          if (key.startsWith('opcion')) {
+        Object.keys(fila).forEach((key) => {
+          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;
@@ -273,14 +304,14 @@
     }
 
     // Cargar preguntas al inicio
-    readExcelFile(urlExcelFile, function(data) {
+    readExcelFile(urlExcelFile, function (data) {
       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) {
@@ -296,10 +327,11 @@
       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",
         showConfirmButton: false,
@@ -314,7 +346,7 @@
         didClose: () => {
           CourseNav.audioController.stopAudio();
           if (currentObjectBtn) {
-            currentObjectBtn.addClass('completed disabled');
+            currentObjectBtn.addClass("completed disabled");
             checkAllCompleted();
           }
         },
@@ -323,15 +355,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>`;
       });
@@ -339,9 +371,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++;
@@ -354,25 +386,26 @@
     }
 
     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();
           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",
             showConfirmButton: true,
@@ -382,7 +415,7 @@
             width: "35em",
             didClose: () => {
               CourseNav.setSlideVisited();
-            }
+            },
           });
         }, 250);
       }
diff --git a/contenido/14.html b/contenido/14.html
index 5332520..73f5d3e 100644
--- a/contenido/14.html
+++ b/contenido/14.html
@@ -31,63 +31,74 @@
     pointer-events: none;
     background-color: #84a816;
   }
+
+  .sortable-placeholder {
+    background-color: rgba(132, 168, 22, 0.3);
+    border: 2px dashed #84a816;
+    visibility: visible !important;
+  }
 </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' id="activity1">
+<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" id="activity1">
           <div class="col-10 mb-2 text-center">
-            <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</h2>
-              <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0">
+            <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
+              </h2>
+              <hr class="border border-3 border-verde-oscuro hr-style mx-auto my-0" />
             </div>
           </div>
           <div class="col-10 px-0 mb-1 col-instrucciones">
             <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>
+                <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>
               </div>
             </div>
           </div>
-          <div class="col-12 col-actividad" style="overflow: hidden;">
+          <div class="col-12 col-actividad" style="overflow: hidden">
             <div class="custom-grid">
               <div class="img-sotable" data-order="0">
-                <img src="img/14.0.png" class="img-fluid">
+                <img src="img/14.0.png" class="img-fluid" />
               </div>
               <div class="img-sotable" data-order="1">
-                <img src="img/14.1.png" class="img-fluid">
+                <img src="img/14.1.png" class="img-fluid" />
               </div>
               <div class="img-sotable" data-order="2">
-                <img src="img/14.2.png" class="img-fluid">
+                <img src="img/14.2.png" class="img-fluid" />
               </div>
               <div class="img-sotable" data-order="3">
-                <img src="img/14.3.png" class="img-fluid">
+                <img src="img/14.3.png" class="img-fluid" />
               </div>
               <div class="img-sotable" data-order="4">
-                <img src="img/14.4.png" class="img-fluid">
+                <img src="img/14.4.png" class="img-fluid" />
               </div>
               <div class="img-sotable" data-order="5">
-                <img src="img/14.5.png" class="img-fluid">
+                <img src="img/14.5.png" class="img-fluid" />
               </div>
               <div class="img-sotable" data-order="6">
-                <img src="img/14.6.png" class="img-fluid">
+                <img src="img/14.6.png" class="img-fluid" />
               </div>
               <div class="img-sotable" data-order="7">
-                <img src="img/14.7.png" class="img-fluid">
+                <img src="img/14.7.png" class="img-fluid" />
               </div>
               <div class="img-sotable" data-order="8">
-                <img src="img/14.8.png" class="img-fluid">
+                <img src="img/14.8.png" class="img-fluid" />
               </div>
               <div class="img-sotable" data-order="9">
-                <img src="img/14.9.png" class="img-fluid">
+                <img src="img/14.9.png" class="img-fluid" />
               </div>
               <div class="img-sotable" data-order="10">
-                <img src="img/14.10.png" class="img-fluid">
+                <img src="img/14.10.png" class="img-fluid" />
               </div>
               <div class="img-sotable" data-order="11">
-                <img src="img/14.11.png" class="img-fluid">
+                <img src="img/14.11.png" class="img-fluid" />
               </div>
             </div>
           </div>
@@ -99,8 +110,8 @@
 <div class="d-none">
   <div id="pop0">
     <div class="container-fluid">
-      <div class=" w-100 text-center">
-        <img src="img/14.13.png" class="img-fluid">
+      <div class="w-100 text-center">
+        <img src="img/14.13.png" class="img-fluid" />
       </div>
       <div class="row justify-content-center">
         <!-- <div class="col-12 text-center mb-2">
@@ -108,7 +119,10 @@
         </div> -->
         <div class="col-12 text-center">
           <p>Una vez secas, <strong class="text-verde-ceniza">tus manos son seguras.</strong></p>
-          <p class="mb-0">El procedimiento tiene una duración total de <strong class="text-verde-ceniza">40-60 segundos.</strong></p>
+          <p class="mb-0">
+            El procedimiento tiene una duración total de
+            <strong class="text-verde-ceniza">40-60 segundos.</strong>
+          </p>
         </div>
       </div>
     </div>
@@ -117,10 +131,10 @@
 <script>
   $(function () {
     "use strict";
-    $('.wrap-course-content').addClass('fake');
+    $(".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--) {
@@ -131,39 +145,40 @@
     }
 
     // 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',
+    $(".custom-grid").sortable({
+      items: ".img-sotable",
       containment: ".wrap-course-content",
-      cursor: 'grabbing',
-      tolerance: 'pointer',
-      helper: "clone",
-      cursorAt: { top: 50, left: 50 },
+      cursor: "grabbing",
+      tolerance: "pointer",
+      forceHelperSize: true,
+      forcePlaceholderSize: true,
+      placeholder: "sortable-placeholder",
+      distance: 5,
       sort: function (event, ui) {
-        var scale = parseFloat($('.wrap-course-content').css('transform').split('(')[1]) || 1;
-        var offset = ui.helper.offset();
+        var scale = parseFloat($(".wrap-course-content").css("transform").split("(")[1]) || 1;
         var mouseX = event.pageX;
         var mouseY = event.pageY;
         ui.helper.css({
-          left: (mouseX - ui.helper.parent().offset().left) / scale - ui.helper.width() / 4,
-          top: (mouseY - ui.helper.parent().offset().top) / scale - ui.helper.height() / 2
+          left: (mouseX - ui.helper.parent().offset().left) / scale - ui.helper.width() / 2,
+          top: (mouseY - ui.helper.parent().offset().top) / scale - ui.helper.height() / 2,
         });
       },
-      update: function() {
+      update: function () {
         checkOrder();
-      }
+      },
     });
 
     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) {
+      $items.each(function (index) {
+        if (parseInt($(this).data("order")) !== index) {
           isCorrect = false;
           return false;
         }
@@ -171,7 +186,7 @@
 
       if (isCorrect) {
         good.play();
-        $('.custom-grid').sortable('disable');
+        $(".custom-grid").sortable("disable");
         checkAllCompleted();
       }
     }
@@ -181,10 +196,11 @@
         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",
           showConfirmButton: true,
@@ -194,8 +210,8 @@
           width: "35em",
           didClose: () => {
             CourseNav.setSlideVisited();
-            $(".img-sotable").addClass('disabled');
-          }
+            $(".img-sotable").addClass("disabled");
+          },
         });
       }, 250);
     }
diff --git a/img/07.1.png b/img/07.1.png
index 3add235..110fc9d 100644
Binary files a/img/07.1.png and b/img/07.1.png differ
diff --git a/img/5.1b.png b/img/5.1b.png
index 6f448b5..3e59add 100644
Binary files a/img/5.1b.png and b/img/5.1b.png differ
diff --git a/img/5.3b.png b/img/5.3b.png
index 0e9bade..6f448b5 100644
Binary files a/img/5.3b.png and b/img/5.3b.png differ