From fd779d07240a46f69b3c10f59797b989add5efa2 Mon Sep 17 00:00:00 2001
From: DavidMtz <david.martinez@espacio360.com.mx>
Date: Wed, 11 Feb 2026 13:38:15 -0600
Subject: [PATCH] update

---
 contenido/01.html |  45 +++---
 contenido/03.html | 220 +++++++++++++++------------
 contenido/05.html | 377 ++++++++++++++++++++++++++++------------------
 contenido/08.html | 202 ++++++++++++++-----------
 contenido/09.html | 205 ++++++++++++++-----------
 contenido/11.html | 185 +++++++++++++----------
 contenido/13.html | 242 +++++++++++++++++------------
 contenido/14.html | 253 ++++++++++++++++++-------------
 8 files changed, 1012 insertions(+), 717 deletions(-)

diff --git a/contenido/01.html b/contenido/01.html
index f4d5ed7..1fb1fe8 100644
--- a/contenido/01.html
+++ b/contenido/01.html
@@ -6,25 +6,36 @@
     cursor: pointer;
   }
 </style>
-<div class='page-sco py-2 py-md-0 h-100'>
-  <div class='container h-100'>
-    <div class='row justify-content-center align-items-center h-100'>
-      <div class='col-12 px-0'>
-        <div class='row'>
+<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">
           <div class="col-11 px-0">
             <div class="d-inline-block position-relative">
-              <img src="img/01.0.webp" class="img-fluid">
-              <div class="position-absolute h-100 top-0 start-0" style="width: 65%;">
+              <img src="img/01.0.webp" class="img-fluid" />
+              <div class="position-absolute h-100 top-0 start-0" style="width: 65%">
                 <div class="row justify-content-center align-items-center h-100">
                   <div class="col-8">
-                    <div class="position-relative d-inline-block animate__animated animate__bounceInDown">
-                      <h1 class="text-white fw-bold">GUÍA DE ENTRENAMIENTO PARA EL PACIENTE EN DIÁLISIS PERITONEAL <strong
-                          class="text-secondary">>>></strong></h1>
-                      <hr class="border border-1 border-verde-claro hr-style mx-auto my-0 mb-3">
+                    <div
+                      class="position-relative d-inline-block animate__animated animate__bounceInDown"
+                    >
+                      <h1 class="text-white fw-bold">
+                        GUÍA DE ENTRENAMIENTO PARA EL PACIENTE EN DIÁLISIS PERITONEAL
+                        <strong class="text-secondary">>>></strong>
+                      </h1>
+                      <hr class="border border-1 border-verde-claro hr-style mx-auto my-0 mb-3" />
                     </div>
-                    <p class="text-white animate__animated animate__lightSpeedInLeft">Nuestra misión: Salvar y sostener vidas</p>
-                    <div class="position-relative w-100 animate__animated animate__zoomIn animate__delay-1s">
-                      <div class="btn-comenzar bg-white d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
+                    <p class="text-white animate__animated animate__lightSpeedInLeft">
+                      Nuestra misión: Extender vida <span class="text-secondary">>>></span> Expandir
+                      posibilidades
+                    </p>
+                    <div
+                      class="position-relative w-100 animate__animated animate__zoomIn animate__delay-1s"
+                    >
+                      <div
+                        class="btn-comenzar bg-white d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
+                      >
                         <h5 class="text-verde-oscuro fw-bold mb-0">Comenzar</h5>
                       </div>
                     </div>
@@ -41,11 +52,11 @@
 <script>
   $(function () {
     "use strict";
-    $('.wrap-course-content').addClass('fake');
+    $(".wrap-course-content").addClass("fake");
 
-    $('.btn-comenzar').click(function (e) {
+    $(".btn-comenzar").click(function (e) {
       e.preventDefault();
-      $(this).removeClass('animate__animated animate__pulse animate__infinite');
+      $(this).removeClass("animate__animated animate__pulse animate__infinite");
       CourseNav.soundClick();
       CourseNav.setSlideVisited();
       CourseNav.nextSlide();
diff --git a/contenido/03.html b/contenido/03.html
index 073f326..aca24a1 100644
--- a/contenido/03.html
+++ b/contenido/03.html
@@ -43,7 +43,7 @@
   .btn-answer {
     cursor: pointer;
     border-radius: 10px;
-    box-shadow: 0 0 2px rgba(0,0,0,.5);
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
   }
 
   .letter {
@@ -73,34 +73,50 @@
     cursor: pointer;
   }
 </style>
-<div id="inicio" 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-11'>
-        <div class='row justify-content-center'>
+<div id="inicio" 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-11">
+        <div class="row justify-content-center">
           <div class="col-12 text-center animate__animated animate__bounceInDown">
             <div class="position-relative d-inline-block">
               <h2 class="text-primary mb-1 fw-bold">Vivir con enfermedad renal</h2>
-              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
             </div>
           </div>
           <div class="col-12">
             <div class="row justify-content-center align-items-center">
               <div class="col-4 text-center animate__animated animate__zoomIn">
-                <img src="img/03.0.png" class="img-fluid">
+                <img src="img/03.0.png" class="img-fluid" />
               </div>
               <div class="col-6">
                 <div class="card bg-white border-0 rounded-3 p-0 bx-shadow">
-                  <div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX">
-                    <p class="mb-0">Cada año, <strong class="text-lila-claro">miles de personas desarrollan enfermedad crónica de los riñones. </strong>Como líder internacional
-                      en el desarrollo de soluciones terapéuticas, Vantive ha desarrollado esta guía para que usted y su familia tengan
-                      <strong class="text-lila-claro">orientación y acompañamiento </strong>durante este proceso de aprendizaje y adaptación.</p>
+                  <div
+                    class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX"
+                  >
+                    <p class="mb-0">
+                      Cada año,
+                      <strong class="text-lila-claro"
+                        >miles de personas desarrollan enfermedad crónica de los riñones. </strong
+                      >Por eso, hemos desarrollado esta guía para que
+                      <strong class="text-lila-claro">usted y su familia</strong> tengan orientación
+                      y acompañamiento durante este proceso de aprendizaje y adaptación.
+                    </p>
                   </div>
-                  <div class="position-relative w-100 bg-verde-claro text-center px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s">
-                    <p class="mb-0 text-verde-oscuro fw-bold">Para comenzar, pongamos a prueba sus conocimientos sobre la enfermedad crónica de los riñones.</p>
+                  <div
+                    class="position-relative w-100 bg-verde-claro text-center px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s"
+                  >
+                    <p class="mb-0 text-verde-oscuro fw-bold">
+                      Para comenzar, pongamos a prueba sus conocimientos sobre la enfermedad crónica
+                      de los riñones.
+                    </p>
                   </div>
-                  <div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s">
-                    <div class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
+                  <div
+                    class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s"
+                  >
+                    <div
+                      class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
+                    >
                       <h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
                     </div>
                   </div>
@@ -113,15 +129,15 @@
     </div>
   </div>
 </div>
-<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;">
-  <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 id="desarrollo" class="page-sco py-2 py-md-0 h-100" style="display: none">
+  <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 text-center">
             <div class="position-relative d-inline-block">
               <h2 class="text-primary mb-1 fw-bold">Vivir con enfermedad renal</h2>
-              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
             </div>
           </div>
           <div class="col-12 px-0 mb-3">
@@ -129,8 +145,11 @@
               <div class="row justify-content-center">
                 <div class="col-10">
                   <div class="d-flex flex-row justify-content-center align-items-center gap-3">
-                    <img src="img/book0.png" class="img-fluid">
-                    <p class="mb-0"><strong>Instrucciones:</strong> Lea cada pregunta y conteste correctamente para ayudar al paciente a llegar a la unidad de diálisis.</p>
+                    <img src="img/book0.png" class="img-fluid" />
+                    <p class="mb-0">
+                      <strong>Instrucciones:</strong> Lea cada pregunta y conteste correctamente
+                      para ayudar al paciente a llegar a la unidad de diálisis.
+                    </p>
                   </div>
                 </div>
               </div>
@@ -156,25 +175,31 @@
     </div>
   </div>
 </div>
-<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
-  <div class='container h-100'>
-    <div class='row justify-content-center align-items-center h-100'>
-      <div class='col-12'>
+<div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
+  <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-12 text-center mb-3">
-            <img src="img/cierre_actividad.png" class="img-fluid">
+            <img src="img/cierre_actividad.png" class="img-fluid" />
           </div>
           <div class="col-12 mb-3 text-center">
             <div class="position-relative d-inline-block">
               <h2 class="text-primary mb-1 fw-bold">Vivir con enfermedad renal</h2>
-              <hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100">
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100" />
             </div>
           </div>
           <div class="col-12 text-center mb-3">
             <h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
           </div>
-          <div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none;">
-            <div class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite" onclick="CourseNav.reload()">
+          <div
+            class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
+            style="display: none"
+          >
+            <div
+              class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
+              onclick="CourseNav.reload()"
+            >
               <h5 class="text-white fw-bold mb-0">Reintentar</h5>
             </div>
           </div>
@@ -186,47 +211,51 @@
 <script>
   $(function () {
     "use strict";
-    $('.wrap-course-content').addClass('fake');
+    $(".wrap-course-content").addClass("fake");
     let questions;
     let currentQuestionIndex = 0;
     let currentQuestion;
     let correctQuestions = 0;
     let maxQuestions = 5;
     let currentFichaIndex = 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");
 
     function loadSVG() {
-      $.get('img/laberinto.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');
-        svg.find('[id^="ficha"]').hide().addClass('ficha-move');
-        svg.find('#ficha0').show();
-      }, 'xml');
+      $.get(
+        "img/laberinto.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");
+          svg.find('[id^="ficha"]').hide().addClass("ficha-move");
+          svg.find("#ficha0").show();
+        },
+        "xml"
+      );
     }
 
-    $('.btn-comenzar').click(function (e) {
+    $(".btn-comenzar").click(function (e) {
       e.preventDefault();
       CourseNav.soundClick();
-      $('.wrap-course-content').addClass('fake1').removeClass('fake');
-      $('#inicio').hide();
-      $('#desarrollo').show();
+      $(".wrap-course-content").addClass("fake1").removeClass("fake");
+      $("#inicio").hide();
+      $("#desarrollo").show();
     });
 
-    const urlExcelFile = 'Actividades_Manual_Vantive.xlsx';
+    const urlExcelFile = "Actividades_Manual_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);
         });
@@ -236,13 +265,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",
             });
           }
         });
@@ -250,7 +279,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;
@@ -266,9 +295,9 @@
 
     function displayQuestion() {
       currentQuestion = questions[currentQuestionIndex];
-      $('.txt-question').text(currentQuestion.pregunta);
+      $(".txt-question").text(currentQuestion.pregunta);
 
-      $('.content-answers').empty();
+      $(".content-answers").empty();
 
       // Shuffle answers for current question
       const shuffledAnswers = shuffleArray([...currentQuestion.opciones]);
@@ -280,60 +309,63 @@
             <div class="txt-answer ps-3">${opcion.text}</div>
           </div>
         `;
-        $('.content-answers').append(answerHtml);
+        $(".content-answers").append(answerHtml);
       });
 
       initializeAnswers();
     }
 
     function initializeAnswers() {
-      $('.btn-answer').off('click').on('click', function() {
-        const isCorrect = $(this).data('correct');
+      $(".btn-answer")
+        .off("click")
+        .on("click", function () {
+          const isCorrect = $(this).data("correct");
 
-        CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
+          CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
 
-        Swal.fire({
-          target: document.getElementById('wrap-course-content'),
-          imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png',
-          showConfirmButton: true,
-          customClass: {
-            popup: 'pop_retros bg-transparent border-0 rounded-0 shadow-none',
-            confirmButton: 'btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite'
-          },
-          confirmButtonText: "Cerrar",
-          backdrop: "rgba(65, 60, 60, .95)",
-          width: "35em",
-          didClose: () => {
-            if (isCorrect) {
-              correctQuestions++;
-              currentFichaIndex++;
-              $('#svg-container').find('[id^="ficha"]').hide();
-              $('#svg-container').find(`#ficha${currentFichaIndex}`).show();
-            }
-            currentQuestionIndex++;
+          Swal.fire({
+            target: document.getElementById("wrap-course-content"),
+            imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
+            showConfirmButton: true,
+            customClass: {
+              popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none",
+              confirmButton:
+                "btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite",
+            },
+            confirmButtonText: "Cerrar",
+            backdrop: "rgba(65, 60, 60, .95)",
+            width: "35em",
+            didClose: () => {
+              if (isCorrect) {
+                correctQuestions++;
+                currentFichaIndex++;
+                $("#svg-container").find('[id^="ficha"]').hide();
+                $("#svg-container").find(`#ficha${currentFichaIndex}`).show();
+              }
+              currentQuestionIndex++;
 
-            if (currentQuestionIndex < questions.length && currentQuestionIndex < maxQuestions) {
-              displayQuestion();
-            } else {
-              setTimeout(() => {
-                isCompleted();
-              }, 500);
-            }
-          }
+              if (currentQuestionIndex < questions.length && currentQuestionIndex < maxQuestions) {
+                displayQuestion();
+              } else {
+                setTimeout(() => {
+                  isCompleted();
+                }, 500);
+              }
+            },
+          });
         });
-      });
     }
 
     function isCompleted() {
       const percentage = (correctQuestions / maxQuestions) * 100;
-      $('.wrap-course-content').addClass('fake2').removeClass('fake1');
-      $('#desarrollo').hide();
-      $('#cierre').show();
+      $(".wrap-course-content").addClass("fake2").removeClass("fake1");
+      $("#desarrollo").hide();
+      $("#cierre").show();
 
       CourseNav.setSlideVisited();
 
       if (percentage < 80) {
-        $('.col-reintentar').show();
+        $(".col-reintentar").show();
       }
     }
 
diff --git a/contenido/05.html b/contenido/05.html
index 381fae3..3131cc7 100644
--- a/contenido/05.html
+++ b/contenido/05.html
@@ -30,8 +30,8 @@
     border-radius: 15px;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
-    background: #B68FB2;
-    background: linear-gradient(to right, #B68FB2 0%, #925C8D 100%);
+    background: #b68fb2;
+    background: linear-gradient(to right, #b68fb2 0%, #925c8d 100%);
     height: 50px;
   }
 
@@ -46,7 +46,7 @@
   }
 
   .num-card {
-    border-radius: .5rem;
+    border-radius: 0.5rem;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
@@ -81,15 +81,15 @@
     cursor: pointer;
   }
 </style>
-<div id="inicio" 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-11'>
-        <div class='row justify-content-center'>
+<div id="inicio" 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-11">
+        <div class="row justify-content-center">
           <div class="col-12 text-center animate__animated animate__bounceInDown">
             <div class="position-relative d-inline-block">
               <h2 class="text-primary mb-1 fw-bold">Inicio en la terapia de diálisis peritoneal</h2>
-              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
             </div>
           </div>
           <div class="col-12 mb-3 text-center">
@@ -99,26 +99,42 @@
             <div class="row justify-content-center align-items-center">
               <div class="col-6">
                 <div class="card bg-custom border-0 rounded-3 p-0 bx-shadow">
-                  <div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX">
-                    <p class="mb-0">La DP le ofrece una <strong>mejor calidad de vida, requiere menos traslados a la unidad hospitalaria y reduce el
-                        contagio</strong> de enfermedades infectocontagiosas. Le permite <strong>mayor libertad </strong>al ser una terapia
-                      portable, a diferencia de la hemodiálisis.</p>
+                  <div
+                    class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX"
+                  >
+                    <p class="mb-0">
+                      La DP le ofrece una
+                      <strong
+                        >mejor calidad de vida, requiere menos traslados a la unidad
+                        hospitalaria</strong
+                      ><strong>,</strong> <strong>reduce el contagio </strong>de enfermedades
+                      infectocontagiosas y le permite <strong>mayor libertad </strong>al ser una
+                      terapia portable.
+                    </p>
                   </div>
                   <div
-                    class="position-relative w-100 bg-lila-rosa text-primary text-center px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s">
-                    <p class="mb-1"><strong>Existen dos técnicas para llevar a cabo su terapia de DP.</strong></p>
-                    <p class="mb-0">Realice la siguiente actividad para descubrir más sobre ellas.</p>
+                    class="position-relative w-100 bg-lila-rosa text-primary text-center px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s"
+                  >
+                    <p class="mb-1">
+                      <strong>Existen dos técnicas para llevar a cabo su terapia de DP.</strong>
+                    </p>
+                    <p class="mb-0">
+                      Realice la siguiente actividad para descubrir más sobre ellas.
+                    </p>
                   </div>
-                  <div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s">
+                  <div
+                    class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s"
+                  >
                     <div
-                      class="btn-comenzar bg-verde-oscuro d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
+                      class="btn-comenzar bg-verde-oscuro d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
+                    >
                       <h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
                     </div>
                   </div>
                 </div>
               </div>
               <div class="col-4 text-center animate__animated animate__zoomIn">
-                <img src="img/05.0.png" class="img-fluid">
+                <img src="img/05.0.png" class="img-fluid" />
               </div>
             </div>
           </div>
@@ -127,76 +143,66 @@
     </div>
   </div>
 </div>
-<div id="desarrollo" class='page-sco py-2 py-md-0' style="display: none;overflow: hidden;">
-  <div class='container h-100'>
-    <div class='row justify-content-center h-100'>
-      <div class='col-12'>
-        <div class='row justify-content-center h-100'>
+<div id="desarrollo" class="page-sco py-2 py-md-0" style="display: none; overflow: hidden">
+  <div class="container h-100">
+    <div class="row justify-content-center h-100">
+      <div class="col-12">
+        <div class="row justify-content-center h-100">
           <div class="col-12 mb-3 px-0">
             <div class="card bg-rosa-lavanda border-0 rounded-0 shadow p-3">
               <div class="row justify-content-center">
                 <div class="col-12 mb-3">
                   <div class="d-flex flex-row justify-content-center align-items-center gap-3">
-                    <img src="img/book1.png" class="img-fluid">
-                    <p class="mb-0"><strong>Instrucciones:</strong> Tome los nombres en la caja y arrástrelos hacia el lugar que les corresponde en las imágenes.</p>
+                    <img src="img/book1.png" class="img-fluid" />
+                    <p class="mb-0">
+                      <strong>Instrucciones:</strong> Tome los nombres en la caja y arrástrelos
+                      hacia el lugar que les corresponde en las imágenes.
+                    </p>
                   </div>
                 </div>
                 <div class="col-12">
-                  <div id="drag-container" class="d-flex flex-wrap justify-content-center align-items-center gap-4">
+                  <div
+                    id="drag-container"
+                    class="d-flex flex-wrap justify-content-center align-items-center gap-4"
+                  >
                     <div class="drag-button px-3 py-2 text-white text-center" data-drag="0">
                       <div class="row justify-content-center align-items-center h-100">
-                        <div class="col-12">
-                          Diálisis Peritoneal Continua Ambulatoria
-                        </div>
+                        <div class="col-12">Diálisis Peritoneal Continua Ambulatoria</div>
                       </div>
                     </div>
                     <div class="drag-button px-3 py-2 text-white text-center" data-drag="1">
                       <div class="row justify-content-center align-items-center h-100">
-                        <div class="col-12">
-                          Atomizador
-                        </div>
+                        <div class="col-12">Atomizador</div>
                       </div>
                     </div>
                     <div class="drag-button px-3 py-2 text-white text-center" data-drag="2">
                       <div class="row justify-content-center align-items-center h-100">
-                        <div class="col-12">
-                          Superficie de trabajo
-                        </div>
+                        <div class="col-12">Superficie de trabajo</div>
                       </div>
                     </div>
                     <div class="drag-button px-3 py-2 text-white text-center" data-drag="3">
                       <div class="row justify-content-center align-items-center h-100">
-                        <div class="col-12">
-                          Diálisis Peritoneal Automatizada
-                        </div>
+                        <div class="col-12">Diálisis Peritoneal Automatizada</div>
                       </div>
                     </div>
                     <div class="drag-button px-3 py-2 text-white text-center" data-drag="4">
                       <div class="row justify-content-center align-items-center h-100">
-                        <div class="col-12">
-                          Bolsa DPA
-                        </div>
+                        <div class="col-12">Bolsa DPA</div>
                       </div>
                     </div>
                     <div class="drag-button px-3 py-2 text-white text-center" data-drag="5">
                       <div class="row justify-content-center align-items-center h-100">
-                        <div class="col-12">
-                          Línea
-                        </div>
+                        <div class="col-12">Línea</div>
                       </div>
                     </div>
                     <div class="drag-button px-3 py-2 text-white text-center" data-drag="6">
                       <div class="row justify-content-center align-items-center h-100">
-                        <div class="col-12">
-                          Titanio
-                        </div>
+                        <div class="col-12">Titanio</div>
                       </div>
                     </div>
                     <div class="drag-button px-3 py-2 text-white text-center" data-drag="7">
                       <div class="row justify-content-center align-items-center h-100">
-                        <div class="col-12">
-                          Catéter
-                        </div>
+                        <div class="col-12">Catéter</div>
                       </div>
                     </div>
                   </div>
@@ -210,41 +216,62 @@
                 <div class="row justify-content-center align-items-center">
                   <div class="col-4 text-center">
                     <div class="d-inline-flex flex-column justify-content-center gap-3">
-                      <img src="img/05.1.png" class="img-fluid">
-                      <div class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0">
-                        <div class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100">
+                      <img src="img/05.1.png" class="img-fluid" />
+                      <div
+                        class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0"
+                      >
+                        <div
+                          class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100"
+                        >
                           <h3 class="fw-bold text-white mb-0">1</h3>
                         </div>
-                        <div class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="0"></div>
+                        <div
+                          class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none"
+                          data-drop="0"
+                        ></div>
                       </div>
                     </div>
                   </div>
                   <div class="col-8">
                     <div class="d-flex flex-row justify-content-center gap-3">
                       <div class="content-custom d-flex flex-column justify-content-center gap-3">
-                        <img src="img/05.2.png" class="img-fluid align-self-center">
-                        <div class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0">
-                          <div class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100">
+                        <img src="img/05.2.png" class="img-fluid align-self-center" />
+                        <div
+                          class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0"
+                        >
+                          <div
+                            class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100"
+                          >
                             <h3 class="fw-bold text-white mb-0">2</h3>
                           </div>
-                          <div class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="1"></div>
+                          <div
+                            class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none"
+                            data-drop="1"
+                          ></div>
                         </div>
                       </div>
                       <div class="content-custom d-flex flex-column justify-content-center gap-3">
-                        <img src="img/05.3.png" class="img-fluid align-self-center">
+                        <img src="img/05.3.png" class="img-fluid align-self-center" />
                         <p class="mb-0 text-center h-txt">Paños limpios</p>
                       </div>
                       <div class="content-custom d-flex flex-column justify-content-center gap-3">
-                        <img src="img/05.4.png" class="img-fluid align-self-center">
+                        <img src="img/05.4.png" class="img-fluid align-self-center" />
                         <p class="mb-0 text-center h-txt">Lavamanos, jabón y toalla</p>
                       </div>
                       <div class="content-custom d-flex flex-column justify-content-center gap-3">
-                        <img src="img/05.5.png" class="img-fluid align-self-center">
-                        <div class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0">
-                          <div class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100">
+                        <img src="img/05.5.png" class="img-fluid align-self-center" />
+                        <div
+                          class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0"
+                        >
+                          <div
+                            class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100"
+                          >
                             <h3 class="fw-bold text-white mb-0">3</h3>
                           </div>
-                          <div class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="2"></div>
+                          <div
+                            class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none"
+                            data-drop="2"
+                          ></div>
                         </div>
                       </div>
                     </div>
@@ -257,37 +284,62 @@
                     <div class="row justify-content-center">
                       <div class="col-12 mb-3">
                         <div class="d-flex flex-column justify-content-center gap-2 content-c4">
-                          <div class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0">
-                            <div class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100">
+                          <div
+                            class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0"
+                          >
+                            <div
+                              class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100"
+                            >
                               <h3 class="fw-bold text-white mb-0">4</h3>
                             </div>
-                            <div class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="3"></div>
+                            <div
+                              class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none"
+                              data-drop="3"
+                            ></div>
                           </div>
-                          <img src="img/05.6.png" class="img-fluid align-self-center">
+                          <img src="img/05.6.png" class="img-fluid align-self-center" />
                         </div>
                       </div>
                       <div class="col-12">
-                        <div class="d-flex flex-row justify-content-center align-items-center gap-3">
+                        <div
+                          class="d-flex flex-row justify-content-center align-items-center gap-3"
+                        >
                           <div class="content-c2 d-flex flex-column justify-content-center gap-2">
-                            <img src="img/05.7.png" class="img-fluid align-self-center">
-                            <div class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0">
-                              <div class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100">
+                            <img src="img/05.7.png" class="img-fluid align-self-center" />
+                            <div
+                              class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0"
+                            >
+                              <div
+                                class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100"
+                              >
                                 <h3 class="fw-bold text-white mb-0">5</h3>
                               </div>
-                              <div class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="4"></div>
+                              <div
+                                class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none"
+                                data-drop="4"
+                              ></div>
                             </div>
                           </div>
                           <div class="content-c2 d-flex flex-column justify-content-center gap-2">
-                            <img src="img/05.8.png" class="img-fluid align-self-center">
-                            <p class="mb-0 text-center h-txt">Cubrebocas, lavamanos, jabón y toalla</p>
+                            <img src="img/05.8.png" class="img-fluid align-self-center" />
+                            <p class="mb-0 text-center h-txt">
+                              Cubrebocas, lavamanos, jabón y toalla
+                            </p>
                           </div>
                           <div class="content-c2 d-flex flex-column justify-content-center gap-2">
-                            <img src="img/05.9.png" class="img-fluid align-self-center">
-                            <div class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0">
-                              <div class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100">
+                            <img src="img/05.9.png" class="img-fluid align-self-center" />
+                            <div
+                              class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0"
+                            >
+                              <div
+                                class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100"
+                              >
                                 <h3 class="fw-bold text-white mb-0">6</h3>
                               </div>
-                              <div class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="5"></div>
+                              <div
+                                class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none"
+                                data-drop="5"
+                              ></div>
                             </div>
                           </div>
                         </div>
@@ -297,35 +349,53 @@
                   <div class="col-5">
                     <div class="row justify-content-center">
                       <div class="col-12 mb-3">
-                        <div class="d-flex flex-row justify-content-center align-items-center gap-3">
+                        <div
+                          class="d-flex flex-row justify-content-center align-items-center gap-3"
+                        >
                           <div class="content-c3 d-flex flex-column justify-content-center gap-2">
-                            <img src="img/05.10.png" class="img-fluid align-self-center">
-                            <div class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0">
-                              <div class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100">
+                            <img src="img/05.10.png" class="img-fluid align-self-center" />
+                            <div
+                              class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0"
+                            >
+                              <div
+                                class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100"
+                              >
                                 <h3 class="fw-bold text-white mb-0">7</h3>
                               </div>
-                              <div class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="6"></div>
+                              <div
+                                class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none"
+                                data-drop="6"
+                              ></div>
                             </div>
                           </div>
                           <div class="content-c3 d-flex flex-column justify-content-center gap-2">
-                            <img src="img/05.11.png" class="img-fluid align-self-center">
-                            <div class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0">
-                              <div class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100">
+                            <img src="img/05.11.png" class="img-fluid align-self-center" />
+                            <div
+                              class="content-drop bg-verde-claro rounded-3 d-flex flex-row justify-content-center align-items-center gap-0"
+                            >
+                              <div
+                                class="card num-card d-flex justify-content-center border-0 bg-verde-pino px-3 py-2 h-100"
+                              >
                                 <h3 class="fw-bold text-white mb-0">8</h3>
                               </div>
-                              <div class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none" data-drop="7"></div>
+                              <div
+                                class="drop-option px-2 card h-100 bg-transparent border-0 shadow-none"
+                                data-drop="7"
+                              ></div>
                             </div>
                           </div>
                         </div>
                       </div>
                       <div class="col-12">
-                        <div class="d-flex flex-row justify-content-center align-items-center gap-3">
+                        <div
+                          class="d-flex flex-row justify-content-center align-items-center gap-3"
+                        >
                           <div class="content-c3 d-flex flex-column justify-content-center gap-2">
-                            <img src="img/05.12.png" class="img-fluid align-self-center">
+                            <img src="img/05.12.png" class="img-fluid align-self-center" />
                             <p class="mb-0 text-center h-txt">Atomizador y paños limpios</p>
                           </div>
                           <div class="content-c3 d-flex flex-column justify-content-center gap-2">
-                            <img src="img/05.13.png" class="img-fluid align-self-center">
+                            <img src="img/05.13.png" class="img-fluid align-self-center" />
                             <p class="mb-0 text-center h-txt">Tapón</p>
                           </div>
                         </div>
@@ -341,18 +411,18 @@
     </div>
   </div>
 </div>
-<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
-  <div class='container h-100'>
-    <div class='row justify-content-center align-items-center h-100'>
-      <div class='col-12'>
+<div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
+  <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-12 text-center mb-3">
-            <img src="img/cierre_actividad.png" class="img-fluid">
+            <img src="img/cierre_actividad.png" class="img-fluid" />
           </div>
           <div class="col-12 text-center animate__animated animate__bounceInDown">
             <div class="position-relative d-inline-block">
               <h2 class="text-primary mb-1 fw-bold">Inicio en la terapia de diálisis peritoneal</h2>
-              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
             </div>
           </div>
           <div class="col-12 mb-3 text-center">
@@ -361,10 +431,14 @@
           <div class="col-12 text-center mb-3">
             <h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
           </div>
-          <div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none;">
+          <div
+            class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
+            style="display: none"
+          >
             <div
               class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
-              onclick="CourseNav.reload()">
+              onclick="CourseNav.reload()"
+            >
               <h5 class="text-white fw-bold mb-0">Reintentar</h5>
             </div>
           </div>
@@ -376,19 +450,19 @@
 <script>
   $(function () {
     "use strict";
-    $('.wrap-course-content').addClass('fake');
+    $(".wrap-course-content").addClass("fake");
 
-    $('.drops_parts').first().show();
+    $(".drops_parts").first().show();
 
-    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");
 
-    $('.btn-comenzar').click(function (e) {
+    $(".btn-comenzar").click(function (e) {
       e.preventDefault();
       CourseNav.soundClick();
       shuffleDragButtons();
-      $('#inicio').hide();
-      $('#desarrollo').show();
+      $("#inicio").hide();
+      $("#desarrollo").show();
     });
 
     function shuffleArray(array) {
@@ -400,14 +474,14 @@
     }
 
     function shuffleDragButtons() {
-      const container = document.getElementById('drag-container');
+      const container = document.getElementById("drag-container");
       const buttons = Array.from(container.children);
       const shuffled = shuffleArray(buttons);
-      shuffled.forEach(button => container.appendChild(button));
+      shuffled.forEach((button) => container.appendChild(button));
     }
 
     function recreateDragContainer() {
-      $('#drag-container').html(`
+      $("#drag-container").html(`
         <div class="drag-button px-3 py-2 text-white text-center" data-drag="0">
           <div class="row justify-content-center align-items-center h-100">
             <div class="col-12">Diálisis Peritoneal Continua Ambulatoria</div>
@@ -449,17 +523,17 @@
           </div>
         </div>
       `);
-      $('.drag-button').draggable({
-        revert: 'invalid',
+      $(".drag-button").draggable({
+        revert: "invalid",
         revertDuration: 300,
         cursor: "grabbing",
         start: function (event, ui) {
-          $(this).css('z-index', 1000);
+          $(this).css("z-index", 1000);
           ui.position.left = 0;
           ui.position.top = 0;
         },
         drag: 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 changeLeft = ui.position.left - ui.originalPosition.left;
           var newLeft = ui.originalPosition.left + changeLeft / scale;
           var changeTop = ui.position.top - ui.originalPosition.top;
@@ -468,8 +542,8 @@
           ui.position.top = newTop;
         },
         stop: function (event, ui) {
-          $(this).css('z-index', 1);
-        }
+          $(this).css("z-index", 1);
+        },
       });
       shuffleDragButtons();
     }
@@ -482,7 +556,7 @@
       4: 4,
       5: 5,
       6: 6,
-      7: 7
+      7: 7,
     };
 
     let completedDrops = { part0: 0, part1: 0 };
@@ -493,27 +567,27 @@
 
     function finishActivity() {
       const percentage = (correctCount / totalQuestions) * 100;
-      $('.wrap-course-content').addClass('fake1').removeClass('fake');
-      $('#desarrollo').hide();
-      $('#cierre').show();
+      $(".wrap-course-content").addClass("fake1").removeClass("fake");
+      $("#desarrollo").hide();
+      $("#cierre").show();
       if (percentage < 80) {
-        $('.col-reintentar').show();
+        $(".col-reintentar").show();
       }
       CourseNav.setSlideVisited();
     }
 
     // Inicializar draggable para elementos iniciales
-    $('.drag-button').draggable({
-      revert: 'invalid',
+    $(".drag-button").draggable({
+      revert: "invalid",
       revertDuration: 300,
       cursor: "grabbing",
       start: function (event, ui) {
-        $(this).css('z-index', 1000);
+        $(this).css("z-index", 1000);
         ui.position.left = 0;
         ui.position.top = 0;
       },
       drag: 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 changeLeft = ui.position.left - ui.originalPosition.left;
         var newLeft = ui.originalPosition.left + changeLeft / scale;
         var changeTop = ui.position.top - ui.originalPosition.top;
@@ -522,60 +596,63 @@
         ui.position.top = newTop;
       },
       stop: function (event, ui) {
-        $(this).css('z-index', 1);
-      }
+        $(this).css("z-index", 1);
+      },
     });
 
-
-
-    $('.drop-option').droppable({
-      accept: '.drag-button',
+    $(".drop-option").droppable({
+      accept: ".drag-button",
       drop: function (event, ui) {
         const draggedItem = ui.draggable;
-        const dragValue = parseInt(draggedItem.data('drag'));
-        const dropValue = parseInt($(this).data('drop'));
+        const dragValue = parseInt(draggedItem.data("drag"));
+        const dropValue = parseInt($(this).data("drop"));
         const isCorrect = correctAnswers[dragValue] === dropValue;
 
         CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
 
-        $(this).html(draggedItem.find('.col-12').text()).addClass('text-center d-flex align-items-center justify-content-center');
-        $(this).droppable('disable'); // Disable this drop zone
+        $(this)
+          .html(draggedItem.find(".col-12").text())
+          .addClass("text-center d-flex align-items-center justify-content-center");
+        $(this).droppable("disable"); // Disable this drop zone
         draggedItem.hide();
 
         if (isCorrect) {
           correctCount++;
         } else {
-          $(this).siblings('.num-card').removeClass('bg-verde-pino').addClass('bg-danger');
+          $(this).siblings(".num-card").removeClass("bg-verde-pino").addClass("bg-danger");
         }
 
-        if ($('#part0').is(':visible')) {
+        if ($("#part0").is(":visible")) {
           completedDrops.part0++;
           if (completedDrops.part0 >= totalDropsPart0) {
             setTimeout(() => {
-              $('#part0').hide();
-              $('#part1').show();
+              $("#part0").hide();
+              $("#part1").show();
               // Recrear todo el drag-container para la parte 2
               recreateDragContainer();
               // Limpiar drops incorrectos de la parte 0
-              $('#part0 .drop-option').each(function() {
-                if ($(this).siblings('.num-card').hasClass('bg-danger')) {
-                  $(this).html('').removeClass('text-center d-flex align-items-center justify-content-center');
-                  $(this).siblings('.num-card').removeClass('bg-danger').addClass('bg-verde-pino');
+              $("#part0 .drop-option").each(function () {
+                if ($(this).siblings(".num-card").hasClass("bg-danger")) {
+                  $(this)
+                    .html("")
+                    .removeClass("text-center d-flex align-items-center justify-content-center");
+                  $(this).siblings(".num-card").removeClass("bg-danger").addClass("bg-verde-pino");
                 }
               });
             }, 1000);
           }
-        } else if ($('#part1').is(':visible')) {
+        } else if ($("#part1").is(":visible")) {
           completedDrops.part1++;
         }
 
         Swal.fire({
-          target: document.getElementById('wrap-course-content'),
-          imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png',
+          target: document.getElementById("wrap-course-content"),
+          imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
           showConfirmButton: true,
           customClass: {
-            popup: 'pop_retros bg-transparent border-0 rounded-0 shadow-none',
-            confirmButton: 'btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite'
+            popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none",
+            confirmButton:
+              "btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite",
           },
           confirmButtonText: "Cerrar",
           backdrop: "rgba(65, 60, 60, .95)",
@@ -585,9 +662,9 @@
             if (completedDrops.part1 >= totalDropsPart1) {
               finishActivity();
             }
-          }
+          },
         });
-      }
+      },
     });
   });
 </script>
diff --git a/contenido/08.html b/contenido/08.html
index 0e7fe39..5e9fdd3 100644
--- a/contenido/08.html
+++ b/contenido/08.html
@@ -43,15 +43,15 @@
     cursor: pointer;
   }
 </style>
-<div id="inicio" 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-11'>
-        <div class='row justify-content-center'>
+<div id="inicio" 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-11">
+        <div class="row justify-content-center">
           <div class="col-12 text-center animate__animated animate__bounceInDown">
             <div class="position-relative d-inline-block">
               <h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2>
-              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
             </div>
           </div>
           <div class="col-12 mb-3 text-center">
@@ -60,22 +60,32 @@
           <div class="col-12">
             <div class="row justify-content-center align-items-center">
               <div class="col-3 text-center animate__animated animate__zoomIn">
-                <img src="img/08.0.png" class="img-fluid">
+                <img src="img/08.0.png" class="img-fluid" />
               </div>
               <div class="col-6">
                 <div class="card bg-white border-0 rounded-3 p-0 bx-shadow">
-                  <div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX">
-                    <p>Para un recambio seguro, bajo ningún motivo debe tocar las <b class="text-lila-claro">zonas
-                        estériles (libres de gérmenes)</b> en su sistema de DP.</p>
+                  <div
+                    class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX"
+                  >
+                    <p>
+                      Para un recambio seguro, bajo ningún motivo debe tocar las
+                      <b class="text-lila-claro">zonas estériles (libres de gérmenes)</b> en su
+                      sistema de DP.
+                    </p>
                   </div>
                   <div
-                    class="position-relative w-100 bg-verde-claro-2 text-verde-oscuro px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s">
-                    <p class="mb-0 fw-bold text-center">Realice la siguiente actividad para identificar cuáles son estas
-                      zonas.</p>
+                    class="position-relative w-100 bg-verde-claro-2 text-verde-oscuro px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s"
+                  >
+                    <p class="mb-0 fw-bold text-center">
+                      Realice la siguiente actividad para identificar cuáles son estas zonas.
+                    </p>
                   </div>
-                  <div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s">
+                  <div
+                    class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s"
+                  >
                     <div
-                      class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
+                      class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
+                    >
                       <h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
                     </div>
                   </div>
@@ -88,15 +98,15 @@
     </div>
   </div>
 </div>
-<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;overflow: hidden;">
-  <div class='container h-100'>
-    <div class='row justify-content-center align-items-center h-100'>
-      <div class='col-11' id="dragAndDrop">
-        <div class='row justify-content-center'>
+<div id="desarrollo" class="page-sco py-2 py-md-0 h-100" style="display: none; overflow: hidden">
+  <div class="container h-100">
+    <div class="row justify-content-center align-items-center h-100">
+      <div class="col-11" id="dragAndDrop">
+        <div class="row justify-content-center">
           <div class="col-10 text-center animate__animated animate__bounceInDown">
             <div class="position-relative d-inline-block">
               <h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2>
-              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-2 opacity-100">
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-2 opacity-100" />
             </div>
           </div>
           <div class="col-10 mb-1 text-center">
@@ -107,9 +117,11 @@
               <div class="row justify-content-center">
                 <div class="col-10">
                   <div class="d-flex flex-row justify-content-center align-items-center gap-3">
-                    <img src="img/book0.png" class="img-fluid">
-                    <p class="mb-0"><strong>Instrucciones:</strong> Identifique las zonas estériles en el sistema de DP
-                      y arrastre sus nombres hacia la fotografía que les corresponda.</p>
+                    <img src="img/book0.png" class="img-fluid" />
+                    <p class="mb-0">
+                      <strong>Instrucciones:</strong> Identifique las zonas estériles en el sistema
+                      de DP y arrastre sus nombres hacia la fotografía que les corresponda.
+                    </p>
                   </div>
                 </div>
               </div>
@@ -118,11 +130,16 @@
           <div class="col-12">
             <div class="row justify-content-center">
               <div class="col-12 mb-3">
-                <div id="content-drags" class="d-flex flex-row justify-content-center align-items-center gap-3">
-                </div>
+                <div
+                  id="content-drags"
+                  class="d-flex flex-row justify-content-center align-items-center gap-3"
+                ></div>
               </div>
               <div class="col-12">
-                <div id="content-drops" class="d-flex flex-row justify-content-center align-items-center gap-3"></div>
+                <div
+                  id="content-drops"
+                  class="d-flex flex-row justify-content-center align-items-center gap-3"
+                ></div>
               </div>
             </div>
           </div>
@@ -131,18 +148,18 @@
     </div>
   </div>
 </div>
-<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
-  <div class='container h-100'>
-    <div class='row justify-content-center align-items-center h-100'>
-      <div class='col-12'>
+<div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
+  <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-12 text-center mb-3">
-            <img src="img/cierre_actividad.png" class="img-fluid">
+            <img src="img/cierre_actividad.png" class="img-fluid" />
           </div>
           <div class="col-12 mb-3 text-center">
             <div class="position-relative d-inline-block">
               <h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2>
-              <hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100">
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100" />
             </div>
           </div>
           <div class="col-12 mb-3 text-center">
@@ -151,10 +168,14 @@
           <div class="col-12 text-center mb-3">
             <h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
           </div>
-          <div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none;">
+          <div
+            class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
+            style="display: none"
+          >
             <div
               class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
-              onclick="CourseNav.reload()">
+              onclick="CourseNav.reload()"
+            >
               <h5 class="text-white fw-bold mb-0">Reintentar</h5>
             </div>
           </div>
@@ -166,33 +187,33 @@
 <script>
   $(function () {
     "use strict";
-    $('.wrap-course-content').addClass('fake');
+    $(".wrap-course-content").addClass("fake");
 
-    $('.btn-comenzar').click(function (e) {
+    $(".btn-comenzar").click(function (e) {
       e.preventDefault();
       CourseNav.soundClick();
-      $('#inicio').hide();
-      $('#desarrollo').show();
+      $("#inicio").hide();
+      $("#desarrollo").show();
     });
 
-    const imgDrop = ['img/08.1.png', 'img/08.3.png', 'img/08.2.png', 'img/08.4.png'];
+    const imgDrop = ["img/08.1.png", "img/08.3.png", "img/08.2.png", "img/08.4.png"];
     let questions;
     let correctQuestions = 0;
     let maxQuestions = 4;
-    const bad = CourseNav.createSound('audio/feedback-incorrect.mpeg');
-    const good = CourseNav.createSound('audio/feedback-correct.mpeg');
-    const urlExcelFile = 'Actividades_Manual_Vantive.xlsx';
+    const bad = CourseNav.createSound("audio/feedback-incorrect.mpeg");
+    const good = CourseNav.createSound("audio/feedback-correct.mpeg");
+    const urlExcelFile = "Actividades_Manual_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);
         });
@@ -202,21 +223,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') && fila[key]) {
+        Object.keys(fila).forEach((key) => {
+          if (key.startsWith("opcion") && fila[key]) {
             opciones.push({
               text: String(fila[key]).trim(),
-              correct: key === 'opcion_c'
+              correct: key === "opcion_c",
             });
           }
         });
         return {
-          pregunta: fila.pregunta ? String(fila.pregunta).trim() : '',
+          pregunta: fila.pregunta ? String(fila.pregunta).trim() : "",
           opciones: opciones,
-          retroalimentacion_correcta: fila.retroalimentacion_correcta ? String(fila.retroalimentacion_correcta).trim() : '',
-          retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta ? String(fila.retroalimentacion_incorrecta).trim() : ''
+          retroalimentacion_correcta: fila.retroalimentacion_correcta
+            ? String(fila.retroalimentacion_correcta).trim()
+            : "",
+          retroalimentacion_incorrecta: fila.retroalimentacion_incorrecta
+            ? String(fila.retroalimentacion_incorrecta).trim()
+            : "",
         };
       });
       return preguntas;
@@ -231,13 +256,13 @@
     }
 
     function createDragItems() {
-      const container = $('#content-drags');
+      const container = $("#content-drags");
       container.empty();
       const dragMapping = {
-        'Zona interna del conector a paciente': 0,
-        'Punta abierta en la línea de transferencia': 1,
-        'Sistema Ultrabag en DPCA o Cassette en DPA': 2,
-        'Parte interna del tapón minicap': 3
+        "Zona interna del conector a paciente": 0,
+        "Punta abierta en la línea de transferencia": 1,
+        "Cassette en DPA": 2,
+        "Parte interna del tapón minicap": 3,
       };
       questions.forEach((question, index) => {
         question.opciones.forEach((opcion, opcionIndex) => {
@@ -253,7 +278,7 @@
     }
 
     function createDropItems() {
-      const container = $('#content-drops');
+      const container = $("#content-drops");
       container.empty();
       imgDrop.forEach((imagen, index) => {
         const dropItem = `
@@ -279,12 +304,12 @@
       let correctCount = 0;
       let totalItems = 4;
 
-      $('.drag-item').draggable({
-        revert: 'invalid',
+      $(".drag-item").draggable({
+        revert: "invalid",
         revertDuration: 300,
         cursor: "grabbing",
         start: function (event, ui) {
-          $(this).css({ 'z-index': 1000, 'transform': 'scale(0.8)' });
+          $(this).css({ "z-index": 1000, transform: "scale(0.8)" });
           ui.position.left = 0;
           ui.position.top = 0;
         },
@@ -293,71 +318,74 @@
           var newLeft = ui.originalPosition.left + changeLeft;
           var changeTop = ui.position.top - ui.originalPosition.top;
           var newTop = ui.originalPosition.top + changeTop;
-          var scale = parseFloat($('.wrap-course-content').css('transform').split('(')[1]) || 1;
+          var scale = parseFloat($(".wrap-course-content").css("transform").split("(")[1]) || 1;
           ui.position.left = newLeft / scale;
           ui.position.top = newTop / scale;
         },
         stop: function (event, ui) {
-          $(this).css({ 'z-index': 1, 'transform': 'scale(1)' });
-        }
+          $(this).css({ "z-index": 1, transform: "scale(1)" });
+        },
       });
 
-      $('.drop-item').droppable({
-        accept: '.drag-item',
+      $(".drop-item").droppable({
+        accept: ".drag-item",
         drop: function (event, ui) {
           const draggedItem = ui.draggable;
-          const dragValue = parseInt(draggedItem.data('drag'));
-          const dropValue = parseInt($(this).data('drop'));
+          const dragValue = parseInt(draggedItem.data("drag"));
+          const dropValue = parseInt($(this).data("drop"));
           const isCorrect = dragValue === dropValue;
 
           CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
 
-          $(this).html(draggedItem.find('.d-flex').text()).addClass('text-center d-flex align-items-center justify-content-center');
+          $(this)
+            .html(draggedItem.find(".d-flex").text())
+            .addClass("text-center d-flex align-items-center justify-content-center");
           draggedItem.hide();
 
           if (isCorrect) {
             correctCount++;
           } else {
-            $(this).siblings('.num-card').removeClass('bg-verde-pino').addClass('bg-danger');
+            $(this).siblings(".num-card").removeClass("bg-verde-pino").addClass("bg-danger");
           }
 
           Swal.fire({
-            target: document.getElementById('wrap-course-content'),
-            imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png',
+            target: document.getElementById("wrap-course-content"),
+            imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
             showConfirmButton: true,
             customClass: {
-              popup: 'pop_retros bg-transparent border-0 rounded-0 shadow-none',
-              confirmButton: 'btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite'
+              popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none",
+              confirmButton:
+                "btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite",
             },
             confirmButtonText: "Cerrar",
             backdrop: "rgba(65, 60, 60, .95)",
             width: "35em",
             didClose: () => {
-              if ($('.drag-item:visible').length === 0) {
+              if ($(".drag-item:visible").length === 0) {
                 const percentage = (correctCount / totalItems) * 100;
                 const passed = percentage >= 80;
                 CourseNav.setSlideVisited();
-                $('.wrap-course-content').addClass('fake1').removeClass('fake');
+                $(".wrap-course-content").addClass("fake1").removeClass("fake");
                 if (passed) {
-                  $('#desarrollo').hide();
-                  $('#cierre').show();
+                  $("#desarrollo").hide();
+                  $("#cierre").show();
                 } else {
-                  $('.col-reintentar').show();
-                  $('#desarrollo').hide();
-                  $('#cierre').show();
+                  $(".col-reintentar").show();
+                  $("#desarrollo").hide();
+                  $("#cierre").show();
                 }
               }
-            }
+            },
           });
-        }
+        },
       });
     }
 
     function shuffleDragItems() {
-      const container = $('#content-drags');
+      const container = $("#content-drags");
       const items = container.children().toArray();
       const shuffled = shuffleArray(items);
-      shuffled.forEach(item => container.append(item));
+      shuffled.forEach((item) => container.append(item));
     }
 
     readExcelFile(urlExcelFile, function (data) {
@@ -369,4 +397,4 @@
       initializeDragDrop();
     });
   });
-</script>
\ No newline at end of file
+</script>
diff --git a/contenido/09.html b/contenido/09.html
index 29d9478..e379556 100644
--- a/contenido/09.html
+++ b/contenido/09.html
@@ -32,15 +32,17 @@
   .drag-sortable {
     background: #f3e9df;
     border-radius: 1.25rem;
-    box-shadow: 0 6px 15px rgba(0, 0, 0, .2);
+    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
     display: flex;
     align-items: center;
-    gap: .2rem;
-    padding: .4rem;
+    gap: 0.2rem;
+    padding: 0.4rem;
     font-weight: 500;
     border: none;
     position: relative;
-    transition: box-shadow 0.16s, transform 0.12s;
+    transition:
+      box-shadow 0.16s,
+      transform 0.12s;
     cursor: grab;
     user-select: none;
   }
@@ -64,17 +66,19 @@
     font-size: 1.8rem;
     font-weight: bold;
     border: 2.5px solid #72256b;
-    box-shadow: 0 2px 8px rgba(225, 0, 107, 0.10);
+    box-shadow: 0 2px 8px rgba(225, 0, 107, 0.1);
     flex-shrink: 0;
     margin-right: 0.7rem;
-    transition: background 0.18s, color 0.16s;
+    transition:
+      background 0.18s,
+      color 0.16s;
   }
 
   /* Success: número en verde con fondo y borde */
   .drag-number-correct {
     background: #e8fdf4 !important;
-    color: #30C48D !important;
-    border-color: #30C48D !important;
+    color: #30c48d !important;
+    border-color: #30c48d !important;
     box-shadow: 0 2px 16px rgba(48, 196, 141, 0.12) !important;
     animation: correcto-bounce 0.7s;
   }
@@ -112,7 +116,7 @@
 
   .drag-placeholder {
     background: #fff6fc !important;
-    border: 2px dashed #E1006B !important;
+    border: 2px dashed #e1006b !important;
     min-height: 60px;
   }
 
@@ -134,7 +138,7 @@
     color: #72256b;
     font-size: 2.1rem;
     margin-right: 1rem;
-    animation: hand-down-up 1.2s infinite cubic-bezier(.62, -0.01, .43, 1.01);
+    animation: hand-down-up 1.2s infinite cubic-bezier(0.62, -0.01, 0.43, 1.01);
     display: inline-flex;
     align-items: center;
   }
@@ -173,50 +177,61 @@
     cursor: pointer;
   }
 </style>
-<div id="inicio" 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-11'>
-        <div class='row justify-content-center'>
+<div id="inicio" 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-11">
+        <div class="row justify-content-center">
           <div class="col-12 text-center animate__animated animate__bounceInDown">
             <div class="position-relative d-inline-block">
               <h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2>
-              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
             </div>
           </div>
           <div class="col-12 mb-3 text-center">
-            <h4 class="fw-bold text-verde-pino">Lavado de manos</h4>
+            <h4 class="fw-bold text-verde-pino">Lavado de manos: Técnica OMS</h4>
           </div>
           <div class="col-12">
             <div class="row justify-content-center align-items-center">
               <div class="col-6">
                 <div class="card bg-white border-0 rounded-3 p-0 bx-shadow">
-                  <div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX text-center">
-                    <p class="mb-0">El jabón que utilice para el lavado de manos de preferencia debe ser <b
-                        class="text-lila-claro">líquido</b>, sin
-                      embargo, lo prioritario es que sea exclusivo para cuando usted realice los recambios en casa.</p>
-
-                    <p><b class="text-lila-claro">Lo mismo ocurre con la toalla</b> que utilice para secar sus manos.
+                  <div
+                    class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX text-center"
+                  >
+                    <p class="mb-0">
+                      El jabón que utilice para el lavado de manos de preferencia debe ser
+                      <b class="text-lila-claro">líquido</b>, sin embargo, lo prioritario es que sea
+                      exclusivo para cuando usted realice los recambios en casa.
                     </p>
 
+                    <p>
+                      <b class="text-lila-claro">Lo mismo ocurre con la toalla</b> que utilice para
+                      secar sus manos.
+                    </p>
 
-                    <p>Sus manos, después de un correcto lavado, se encontrarán <b class="text-lila-claro">limpias, pero nunca estériles.</b>
+                    <p>
+                      Sus manos, después de un correcto lavado, se encontrarán
+                      <b class="text-lila-claro">limpias, pero nunca estériles.</b>
                     </p>
                   </div>
                   <div
-                    class="position-relative w-100 bg-lila-rosa text-primary text-center px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s">
+                    class="position-relative w-100 bg-lila-rosa text-primary text-center px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s"
+                  >
                     <p class="mb-0"><b>Veamos los pasos para un lavado de manos adecuado.</b></p>
                   </div>
-                  <div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s">
+                  <div
+                    class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s"
+                  >
                     <div
-                      class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
+                      class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
+                    >
                       <h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
                     </div>
                   </div>
                 </div>
               </div>
               <div class="col-4 text-center animate__animated animate__zoomIn">
-                <img src="img/09.0.png" class="img-fluid">
+                <img src="img/09.0.png" class="img-fluid" />
               </div>
             </div>
           </div>
@@ -225,28 +240,30 @@
     </div>
   </div>
 </div>
-<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;overflow: hidden;">
-  <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 mb-5'>
+<div id="desarrollo" class="page-sco py-2 py-md-0 h-100" style="display: none; overflow: hidden">
+  <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 mb-5">
           <div class="col-11 text-center animate__animated animate__bounceInDown">
             <div class="position-relative d-inline-block">
               <h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2>
-              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
             </div>
           </div>
           <div class="col-11 mb-3 text-center">
-            <h4 class="fw-bold text-verde-pino">Lavado de manos</h4>
+            <h4 class="fw-bold text-verde-pino">Lavado de manos: Técnica OMS</h4>
           </div>
           <div class="col-12 px-0 mb-3">
             <div class="card bg-verde-claro border-0 rounded-0 bx-shadow py-2 px-3">
               <div class="row justify-content-center">
                 <div class="col-10">
                   <div class="d-flex flex-row justify-content-center align-items-center gap-3">
-                    <img src="img/book0.png" class="img-fluid">
-                    <p class="mb-0"><strong>Instrucciones:</strong> Arrastre los pasos del lavado de manos para
-                      colocarlos en el orden correcto.</p>
+                    <img src="img/book0.png" class="img-fluid" />
+                    <p class="mb-0">
+                      <strong>Instrucciones:</strong> Arrastre los pasos del lavado de manos para
+                      colocarlos en el orden correcto.
+                    </p>
                   </div>
                 </div>
               </div>
@@ -255,18 +272,24 @@
           <div class="col-11">
             <div class="row justify-content-center align-items-center">
               <div class="col-12 anim1">
-                <div class="d-flex flex-column w-100 position-relative gap-2 content-drags drag-list">
+                <div
+                  class="d-flex flex-column w-100 position-relative gap-2 content-drags drag-list"
+                >
                   <div class="drag-sortable" data-order="0">
                     <span class="drag-number"></span>
                     <span class="drag-icon">&#8597;</span>
-                    Mójese las manos y aplique suficiente jabón para cubrir toda su superficie. Frótelas entre sí.
+                    Mójese las manos y aplique suficiente jabón para cubrir toda su superficie.
+                    Frótelas entre sí.
                   </div>
                   <div class="drag-sortable" data-order="1">
                     <span class="drag-number"></span>
                     <!-- MANO CON ANIMACIÓN -->
-                    <span class="drag-hand-animate"><i class="fa-duotone fa-solid fa-hand-pointer"></i></span>
+                    <span class="drag-hand-animate"
+                      ><i class="fa-duotone fa-solid fa-hand-pointer"></i
+                    ></span>
                     <span class="drag-icon">&#8597;</span>
-                    Frótese la palma de la mano derecha contra el dorso de la mano izquierda entrelazando los dedos.
+                    Frótese la palma de la mano derecha contra el dorso de la mano izquierda
+                    entrelazando los dedos.
                   </div>
                   <div class="drag-sortable" data-order="2">
                     <span class="drag-number"></span>
@@ -281,13 +304,14 @@
                   <div class="drag-sortable" data-order="4">
                     <span class="drag-number"></span>
                     <span class="drag-icon">&#8597;</span>
-                    Rodeando el pulgar izquierdo con la palma de la mano derecha frótese con un movimiento de rotación y
-                    viceversa.
+                    Rodeando el pulgar izquierdo con la palma de la mano derecha frótese con un
+                    movimiento de rotación y viceversa.
                   </div>
                   <div class="drag-sortable" data-order="5">
                     <span class="drag-number"></span>
                     <span class="drag-icon">&#8597;</span>
-                    Frótese la punta de los dedos de la mano derecha contra la palma de la mano izquierda.
+                    Frótese la punta de los dedos de la mano derecha contra la palma de la mano
+                    izquierda.
                   </div>
                   <div class="drag-sortable" data-order="6">
                     <span class="drag-number"></span>
@@ -308,18 +332,18 @@
     </div>
   </div>
 </div>
-<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
-  <div class='container h-100'>
-    <div class='row justify-content-center align-items-center h-100'>
-      <div class='col-12'>
+<div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
+  <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-12 text-center mb-3">
-            <img src="img/cierre_actividad.png" class="img-fluid">
+            <img src="img/cierre_actividad.png" class="img-fluid" />
           </div>
           <div class="col-12 mb-3 text-center">
             <div class="position-relative d-inline-block">
               <h2 class="text-primary mb-1 fw-bold">Terapia segura en casa</h2>
-              <hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100">
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100" />
             </div>
           </div>
           <div class="col-12 mb-3 text-center">
@@ -328,10 +352,14 @@
           <div class="col-12 text-center mb-3">
             <h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
           </div>
-          <div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none;">
+          <div
+            class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
+            style="display: none"
+          >
             <div
               class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
-              onclick="CourseNav.reload()">
+              onclick="CourseNav.reload()"
+            >
               <h5 class="text-white fw-bold mb-0">Reintentar</h5>
             </div>
           </div>
@@ -343,16 +371,16 @@
 <script>
   $(function () {
     "use strict";
-    $('.wrap-course-content').addClass('fake');
+    $(".wrap-course-content").addClass("fake");
 
-    const feedbackcorrect = CourseNav.createSound('audio/feedback-correct.mpeg');
-    const feedbackincorrect = CourseNav.createSound('audio/feedback-incorrect.mpeg');
+    const feedbackcorrect = CourseNav.createSound("audio/feedback-correct.mpeg");
+    const feedbackincorrect = CourseNav.createSound("audio/feedback-incorrect.mpeg");
 
-    $('.btn-comenzar').click(function (e) {
+    $(".btn-comenzar").click(function (e) {
       e.preventDefault();
       CourseNav.soundClick();
-      $('#inicio').hide();
-      $('#desarrollo').show();
+      $("#inicio").hide();
+      $("#desarrollo").show();
       mezclarElementos();
     });
 
@@ -365,8 +393,8 @@
     }
 
     function mezclarElementos() {
-      const $container = $('.content-drags');
-      const $elements = $container.children('.drag-sortable').detach();
+      const $container = $(".content-drags");
+      const $elements = $container.children(".drag-sortable").detach();
       const elementosMezclados = shuffleArray($elements.toArray());
       $container.append(elementosMezclados);
       actualizarNumerosDrag();
@@ -374,23 +402,25 @@
     }
 
     function actualizarNumerosDrag() {
-      $('.content-drags .drag-sortable').each(function (i) {
-        $(this).find('.drag-number').text(i + 1);
+      $(".content-drags .drag-sortable").each(function (i) {
+        $(this)
+          .find(".drag-number")
+          .text(i + 1);
       });
     }
 
     // ----------- FUNCIÓN OPCIONAL: INDICAR CORRECTOS -----------
     function resaltarDragCorrectos() {
-      $('.content-drags .drag-sortable').each(function (index) {
-        const correcto = parseInt($(this).data('order')) === index;
-        $(this).find('.drag-number').toggleClass('drag-number-correct', correcto);
+      $(".content-drags .drag-sortable").each(function (index) {
+        const correcto = parseInt($(this).data("order")) === index;
+        $(this).find(".drag-number").toggleClass("drag-number-correct", correcto);
       });
     }
     // ----------------------------------------------------------
 
     // Oculta la mano cuando se haga cualquier drag
     let handRemoved = false;
-    $('.content-drags').sortable({
+    $(".content-drags").sortable({
       update: function () {
         actualizarNumerosDrag();
         // Activa aquí para resaltar correctos tras cada movimiento:
@@ -404,35 +434,35 @@
       scroll: false,
       helper: "clone",
       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 offset = ui.helper.offset();
         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
+          top: (mouseY - ui.helper.parent().offset().top) / scale - ui.helper.height() / 2,
         });
       },
       start: function (event, ui) {
-        ui.helper.css('transform', 'scale(0.95)');
+        ui.helper.css("transform", "scale(0.95)");
         if (!handRemoved) {
-          $('.drag-hand-animate').remove();
+          $(".drag-hand-animate").remove();
           handRemoved = true;
         }
       },
       stop: function (event, ui) {
-        ui.item.css('transform', 'scale(1)');
-      }
+        ui.item.css("transform", "scale(1)");
+      },
     });
 
     actualizarNumerosDrag();
 
     function verificarOrden() {
-      const $elementos = $('.content-drags .drag-sortable');
+      const $elementos = $(".content-drags .drag-sortable");
       let todosCorrectos = true;
 
       $elementos.each(function (index) {
-        const ordenActual = parseInt($(this).data('order'));
+        const ordenActual = parseInt($(this).data("order"));
         if (ordenActual !== index) {
           todosCorrectos = false;
           return false;
@@ -440,20 +470,23 @@
       });
 
       if (todosCorrectos) {
-        $('.content-drags').sortable('disable');
+        $(".content-drags").sortable("disable");
         mostrarPopup(true);
       }
     }
 
     function mostrarPopup(isCorrect) {
-      CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? feedbackcorrect : feedbackincorrect);
+      CourseNav.audioController.stopAllSoundsAndPlay(
+        isCorrect ? feedbackcorrect : feedbackincorrect
+      );
       Swal.fire({
-        target: document.getElementById('wrap-course-content'),
-        imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png',
+        target: document.getElementById("wrap-course-content"),
+        imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
         showConfirmButton: true,
         customClass: {
-          popup: 'pop_retros bg-transparent border-0 rounded-0 shadow-none',
-          confirmButton: 'btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite'
+          popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none",
+          confirmButton:
+            "btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite",
         },
         confirmButtonText: "Cerrar",
         backdrop: "rgba(65, 60, 60, .95)",
@@ -462,15 +495,15 @@
           if (isCorrect) {
             finalizarActividad();
           }
-        }
+        },
       });
     }
 
     function finalizarActividad() {
-      $('.wrap-course-content').addClass('fake1').removeClass('fake');
-      $('#desarrollo').hide();
-      $('#cierre').show();
+      $(".wrap-course-content").addClass("fake1").removeClass("fake");
+      $("#desarrollo").hide();
+      $("#cierre").show();
       CourseNav.setSlideVisited();
     }
   });
-</script>
\ No newline at end of file
+</script>
diff --git a/contenido/11.html b/contenido/11.html
index 95e023e..61563a2 100644
--- a/contenido/11.html
+++ b/contenido/11.html
@@ -25,7 +25,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 {
@@ -69,37 +69,44 @@
     cursor: pointer;
   }
 </style>
-<div id="inicio" 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-11'>
-        <div class='row justify-content-center'>
+<div id="inicio" 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-11">
+        <div class="row justify-content-center">
           <div class="col-12 text-center animate__animated animate__bounceInDown">
             <div class="position-relative d-inline-block">
               <h2 class="text-primary mb-1 fw-bold">Autocuidado</h2>
-              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-1 opacity-100">
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-1 opacity-100" />
             </div>
           </div>
           <div class="col-12 mb-3 text-center">
             <h4 class="fw-bold text-verde-pino">Consumo y balance de líquidos</h4>
           </div>
           <div class="col-12 text-center mb-1 animate__animated animate__zoomIn">
-            <img src="img/11.0.png" class="img-fluid">
+            <img src="img/11.0.png" class="img-fluid" />
           </div>
           <div class="col-12 text-center mb-3 animate__animated animate__flipInX">
-            <p> La gran ventaja que le ofrece la DP es que se trata de un tratamiento <strong
-                class="text-lila-claro">autoadministrado y domiciliario</strong>, sin embargo, es necesario que acuda a
-              todas sus consultas de seguimiento y lleve todos sus estudios de laboratorio y registros del tratamiento
-              que le solicite el personal de salud.</p>
+            <p>
+              La gran ventaja que le ofrece la DP es que se trata de un tratamiento
+              <strong class="text-lila-claro">domiciliario</strong>, sin embargo, es necesario que
+              acuda a todas sus consultas de seguimiento y lleve todos sus estudios de laboratorio y
+              registros del tratamiento que le solicite el personal de salud.
+            </p>
           </div>
-          <div class="col-12 text-center animate__animated animate__lightSpeedInLeft animate__delay-1s mb-3">
-            <div class="d-inline-block px-3 py-2 bg-verde-claro rounded-3 text-verde-oscuro fw-bold">
+          <div
+            class="col-12 text-center animate__animated animate__lightSpeedInLeft animate__delay-1s mb-3"
+          >
+            <div
+              class="d-inline-block px-3 py-2 bg-verde-claro rounded-3 text-verde-oscuro fw-bold"
+            >
               Un aspecto importante a tomar en cuenta es el consumo y balance de líquidos.
             </div>
           </div>
           <div class="col-12 text-center animate__animated animate__zoomIn animate__delay-2s">
             <div
-              class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
+              class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
+            >
               <h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
             </div>
           </div>
@@ -108,15 +115,15 @@
     </div>
   </div>
 </div>
-<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;overflow: hidden;">
-  <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 mb-5'>
+<div id="desarrollo" class="page-sco py-2 py-md-0 h-100" style="display: none; overflow: hidden">
+  <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 mb-5">
           <div class="col-11 text-center animate__animated animate__bounceInDown">
             <div class="position-relative d-inline-block">
               <h2 class="text-primary mb-1 fw-bold">Autocuidado</h2>
-              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100" />
             </div>
           </div>
           <div class="col-11 mb-3 text-center">
@@ -127,10 +134,12 @@
               <div class="row justify-content-center">
                 <div class="col-10">
                   <div class="d-flex flex-row justify-content-center align-items-center gap-3">
-                    <img src="img/book0.png" class="img-fluid">
-                    <p class="mb-0"><strong>Instrucciones:</strong> Lea cada una de las preguntas acerca del control de
-                      líquidos y conteste correctamente. Por cada acierto obtendrá una
-                      pieza del rompecabezas, el reto es descubrir la imagen oculta.</p>
+                    <img src="img/book0.png" class="img-fluid" />
+                    <p class="mb-0">
+                      <strong>Instrucciones:</strong> Lea cada una de las preguntas acerca del
+                      control de líquidos y conteste correctamente. Por cada acierto obtendrá una
+                      pieza del rompecabezas, el reto es descubrir la imagen oculta.
+                    </p>
                   </div>
                 </div>
               </div>
@@ -142,10 +151,14 @@
                 <div id="svg-container"></div>
               </div>
               <div class="col-6">
-                <div id="card-content-quiz-rompecabezas"
-                  class="card bg-white border-0 rounded-15 p-3 card-content-quiz animate__animated animate__zoomIn bx-shadow">
+                <div
+                  id="card-content-quiz-rompecabezas"
+                  class="card bg-white border-0 rounded-15 p-3 card-content-quiz animate__animated animate__zoomIn bx-shadow"
+                >
                   <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 text-center fw-bold text-verde-oscuro txt-question mb-3"
+                    ></div>
                     <div class="col-12 content-answers"></div>
                   </div>
                 </div>
@@ -157,18 +170,18 @@
     </div>
   </div>
 </div>
-<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
-  <div class='container h-100'>
-    <div class='row justify-content-center align-items-center h-100'>
-      <div class='col-12'>
+<div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
+  <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-12 text-center mb-3">
-            <img src="img/cierre_actividad.png" class="img-fluid">
+            <img src="img/cierre_actividad.png" class="img-fluid" />
           </div>
           <div class="col-12 mb-3 text-center">
             <div class="position-relative d-inline-block">
               <h2 class="text-primary mb-1 fw-bold">Autocuidado</h2>
-              <hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100">
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100" />
             </div>
           </div>
           <div class="col-12 mb-3 text-center">
@@ -177,10 +190,14 @@
           <div class="col-12 text-center mb-3">
             <h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
           </div>
-          <div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none;">
+          <div
+            class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
+            style="display: none"
+          >
             <div
               class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
-              onclick="CourseNav.reload()">
+              onclick="CourseNav.reload()"
+            >
               <h5 class="text-white fw-bold mb-0">Reintentar</h5>
             </div>
           </div>
@@ -192,47 +209,51 @@
 <script>
   $(function () {
     "use strict";
-    $('.wrap-course-content').addClass('fake');
+    $(".wrap-course-content").addClass("fake");
 
     let questions;
     let currentQuestionIndex = 0;
     let currentQuestion;
     let correctQuestions = 0;
     let maxQuestions = -1;
-    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 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"
+      );
     }
 
-    $('.btn-comenzar').click(function (e) {
+    $(".btn-comenzar").click(function (e) {
       e.preventDefault();
       CourseNav.soundClick();
-      $('#inicio').hide();
-      $('#desarrollo').show();
+      $("#inicio").hide();
+      $("#desarrollo").show();
     });
 
-    const urlExcelFile = 'Actividades_Manual_Vantive.xlsx';
+    const urlExcelFile = "Actividades_Manual_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);
         });
@@ -242,13 +263,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",
             });
           }
         });
@@ -256,7 +277,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;
@@ -278,32 +299,36 @@
         return;
       }
 
-      $('#card-content-quiz-rompecabezas').hide();
+      $("#card-content-quiz-rompecabezas").hide();
 
       currentQuestion = questions[currentQuestionIndex];
-      $('.txt-question').text(currentQuestion.pregunta);
+      $(".txt-question").text(currentQuestion.pregunta);
 
-      const answersContainer = $('.content-answers');
+      const answersContainer = $(".content-answers");
       answersContainer.empty();
 
       setTimeout(() => {
-        $('#card-content-quiz-rompecabezas').removeClass('animate__zoomIn').addClass('animate__zoomIn').show();
+        $("#card-content-quiz-rompecabezas")
+          .removeClass("animate__zoomIn")
+          .addClass("animate__zoomIn")
+          .show();
       }, 100);
 
       const shuffledOpciones = shuffleArray([...currentQuestion.opciones]);
 
       shuffledOpciones.forEach((opcion, index) => {
-        const btn = $(`<div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}">
+        const btn =
+          $(`<div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}">
               <div class="d-flex flex-row justify-content-center align-items-center letter text-white text-center p-3">${String.fromCharCode(97 + index)}</div>
               <div class="txt-answer ps-3">${opcion.text}</div>
             </div>`);
         answersContainer.append(btn);
       });
 
-      $('.btn-answer').click(function () {
-        const isCorrect = $(this).data('correct') === true;
+      $(".btn-answer").click(function () {
+        const isCorrect = $(this).data("correct") === true;
 
-        $('.btn-answer').off('click').css('pointer-events', 'none');
+        $(".btn-answer").off("click").css("pointer-events", "none");
 
         if (isCorrect) {
           correctQuestions++;
@@ -316,12 +341,13 @@
 
     function showFeedback(isCorrect) {
       Swal.fire({
-        target: document.getElementById('wrap-course-content'),
-        imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png',
+        target: document.getElementById("wrap-course-content"),
+        imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
         showConfirmButton: true,
         customClass: {
-          popup: 'pop_retros bg-transparent border-0 rounded-0 shadow-none',
-          confirmButton: 'btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite'
+          popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none",
+          confirmButton:
+            "btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite",
         },
         confirmButtonText: "Cerrar",
         backdrop: "rgba(65, 60, 60, .95)",
@@ -332,7 +358,7 @@
           }
           currentQuestionIndex++;
           displayQuestion();
-        }
+        },
       });
     }
 
@@ -348,23 +374,24 @@
       CourseNav.setSlideVisited();
 
       if (passed) {
-        $('#desarrollo').hide();
-        $('#cierre').show();
+        $("#desarrollo").hide();
+        $("#cierre").show();
       } else {
-        $('.col-reintentar').show();
-        $('#desarrollo').hide();
-        $('#cierre').show();
+        $(".col-reintentar").show();
+        $("#desarrollo").hide();
+        $("#cierre").show();
       }
     }
 
     readExcelFile(urlExcelFile, function (data) {
       const hojaDatos = data["Diapositiva 22"];
       const preguntasProcesadas = shuffleArray(procesarPreguntas(hojaDatos));
-      questions = maxQuestions === -1 ? preguntasProcesadas : preguntasProcesadas.slice(0, maxQuestions);
+      questions =
+        maxQuestions === -1 ? preguntasProcesadas : preguntasProcesadas.slice(0, maxQuestions);
       loadSVG();
       setTimeout(() => {
         displayQuestion();
       }, 500);
     });
   });
-</script>
\ No newline at end of file
+</script>
diff --git a/contenido/13.html b/contenido/13.html
index 906070e..d40292f 100644
--- a/contenido/13.html
+++ b/contenido/13.html
@@ -50,7 +50,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 {
@@ -80,53 +80,61 @@
     cursor: pointer;
   }
 </style>
-<div id="inicio" 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-11'>
-        <div class='row justify-content-center align-items-center'>
+<div id="inicio" 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-11">
+        <div class="row justify-content-center align-items-center">
           <div class="col-12 text-center animate__animated animate__bounceInDown">
             <div class="position-relative d-inline-block">
               <h2 class="text-primary mb-1 fw-bold">Manejo de medicamentos y terapia dialítica</h2>
-              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-1 opacity-100">
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-1 opacity-100" />
             </div>
           </div>
           <div class="col-5 text-center mb-3 animate__animated animate__flipInX">
             <div class="card bg-white border-0 rounded-3 px-0 pt-2 pb-0 bx-shadow">
               <div class="position-relative w-100 px-3">
-                <p>Como ha visto, la enfermedad crónica de los riñones causa signos y síntomas que, en parte, son
-                  controlados mediante la DP, sin embargo, es necesario que se apoye de medicamentos que solo su médico
-                  puede y debe prescribir. </p>
+                <p>
+                  Como ha visto, la enfermedad crónica de los riñones causa signos y síntomas que,
+                  en parte, son controlados mediante la DP, sin embargo, es necesario que se apoye
+                  de medicamentos que solo su médico puede y debe prescribir.
+                </p>
               </div>
               <div
-                class="position-relative w-100 bg-lila-rosa text-primary px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s">
-                <p class="mb-0 fw-bold text-center">Siga las recomendaciones del personal de salud.</p>
+                class="position-relative w-100 bg-lila-rosa text-primary px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s"
+              >
+                <p class="mb-0 fw-bold text-center">
+                  Siga las recomendaciones del personal de salud.
+                </p>
               </div>
-              <div class="w-100 position-relative text-center animate__animated animate__zoomIn animate__delay-2s">
+              <div
+                class="w-100 position-relative text-center animate__animated animate__zoomIn animate__delay-2s"
+              >
                 <div
-                  class="btn-comenzar bg-verde-oscuro d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
+                  class="btn-comenzar bg-verde-oscuro d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
+                >
                   <h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
                 </div>
               </div>
             </div>
           </div>
           <div class="col-4 text-center mb-1 animate__animated animate__zoomIn">
-            <img src="img/13.5.png" class="img-fluid">
+            <img src="img/13.5.png" class="img-fluid" />
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
-<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;overflow: hidden;">
-  <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'>
+<div id="desarrollo" class="page-sco py-2 py-md-0 h-100" style="display: none; overflow: hidden">
+  <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">
           <div class="col-10 text-center animate__animated animate__bounceInDown">
             <div class="position-relative d-inline-block">
               <h2 class="text-primary mb-1 fw-bold">Manejo de medicamentos y terapia dialítica</h2>
-              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-2 opacity-100">
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-2 opacity-100" />
             </div>
           </div>
           <div class="col-10 mb-3">
@@ -134,10 +142,12 @@
               <div class="row justify-content-center">
                 <div class="col-10">
                   <div class="d-flex flex-row justify-content-center align-items-center gap-3">
-                    <img src="img/book3.png" class="img-fluid">
-                    <p class="mb-0"><strong>Instrucciones:</strong> Haga clic en cada tarjeta para revelar la pregunta
-                      acerca del manejo de medicamentos que apoyan la DP.
-                      Por cada acierto sumará puntos, el objetivo es llegar a 1000.</p>
+                    <img src="img/book3.png" class="img-fluid" />
+                    <p class="mb-0">
+                      <strong>Instrucciones:</strong> Haga clic en cada tarjeta para revelar la
+                      pregunta acerca del manejo de medicamentos que apoyan la DP. Por cada acierto
+                      sumará puntos.
+                    </p>
                   </div>
                 </div>
               </div>
@@ -147,37 +157,62 @@
             <div class="row justify-content-center">
               <div class="col-12 mb-3 text-center">
                 <div
-                  class="content-contador bg-primary d-inline-flex flex-row justify-content-center align-items-center gap-2 px-3 py-2 bx-shadow">
-                  <img src="img/13.4.png" class="img-fluid me-2">
+                  class="content-contador bg-primary d-inline-flex flex-row justify-content-center align-items-center gap-2 px-3 py-2 bx-shadow"
+                >
+                  <img src="img/13.4.png" class="img-fluid me-2" />
                   <h4 class="text-white fw-bold mb-0">Puntos:</h4>
                   <h4 id="puntos" class="text-white fw-bold mb-0">000</h4>
                 </div>
               </div>
               <div class="col-12">
                 <div class="grip-jeopardy">
-                  <div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="100">
-                    <img src="img/13.0.png" class="img-fluid">
+                  <div
+                    class="btn-question-pop animate__animated animate__pulse animate__infinite"
+                    data-puntos="100"
+                  >
+                    <img src="img/13.0.png" class="img-fluid" />
                   </div>
-                  <div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="200">
-                    <img src="img/13.2.png" class="img-fluid">
+                  <div
+                    class="btn-question-pop animate__animated animate__pulse animate__infinite"
+                    data-puntos="200"
+                  >
+                    <img src="img/13.2.png" class="img-fluid" />
                   </div>
-                  <div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="50">
-                    <img src="img/13.1.png" class="img-fluid">
+                  <div
+                    class="btn-question-pop animate__animated animate__pulse animate__infinite"
+                    data-puntos="50"
+                  >
+                    <img src="img/13.1.png" class="img-fluid" />
                   </div>
-                  <div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="100">
-                    <img src="img/13.0.png" class="img-fluid">
+                  <div
+                    class="btn-question-pop animate__animated animate__pulse animate__infinite"
+                    data-puntos="100"
+                  >
+                    <img src="img/13.0.png" class="img-fluid" />
                   </div>
-                  <div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="50">
-                    <img src="img/13.1.png" class="img-fluid">
+                  <div
+                    class="btn-question-pop animate__animated animate__pulse animate__infinite"
+                    data-puntos="50"
+                  >
+                    <img src="img/13.1.png" class="img-fluid" />
                   </div>
-                  <div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="100">
-                    <img src="img/13.0.png" class="img-fluid">
+                  <div
+                    class="btn-question-pop animate__animated animate__pulse animate__infinite"
+                    data-puntos="100"
+                  >
+                    <img src="img/13.0.png" class="img-fluid" />
                   </div>
-                  <div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="200">
-                    <img src="img/13.2.png" class="img-fluid">
+                  <div
+                    class="btn-question-pop animate__animated animate__pulse animate__infinite"
+                    data-puntos="200"
+                  >
+                    <img src="img/13.2.png" class="img-fluid" />
                   </div>
-                  <div class="btn-question-pop animate__animated animate__pulse animate__infinite" data-puntos="200">
-                    <img src="img/13.2.png" class="img-fluid">
+                  <div
+                    class="btn-question-pop animate__animated animate__pulse animate__infinite"
+                    data-puntos="200"
+                  >
+                    <img src="img/13.2.png" class="img-fluid" />
                   </div>
                 </div>
               </div>
@@ -188,27 +223,31 @@
     </div>
   </div>
 </div>
-<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
-  <div class='container h-100'>
-    <div class='row justify-content-center align-items-center h-100'>
-      <div class='col-12'>
+<div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
+  <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-12 text-center mb-3">
-            <img src="img/cierre_actividad.png" class="img-fluid">
+            <img src="img/cierre_actividad.png" class="img-fluid" />
           </div>
           <div class="col-12 mb-3 text-center">
             <div class="position-relative d-inline-block">
               <h2 class="text-primary mb-1 fw-bold">Manejo de medicamentos y terapia dialítica</h2>
-              <hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100">
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100" />
             </div>
           </div>
           <div class="col-12 text-center mb-3">
             <h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
           </div>
-          <div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none;">
+          <div
+            class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
+            style="display: none"
+          >
             <div
               class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
-              onclick="CourseNav.reload()">
+              onclick="CourseNav.reload()"
+            >
               <h5 class="text-white fw-bold mb-0">Reintentar</h5>
             </div>
           </div>
@@ -220,35 +259,35 @@
 <script>
   $(function () {
     "use strict";
-    $('.wrap-course-content').addClass('fake');
+    $(".wrap-course-content").addClass("fake");
 
     let questions;
     let currentQuestionIndex = 0;
     let currentQuestion;
     let correctQuestions = 0;
     let maxQuestions = -1;
-    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");
 
-    $('.btn-comenzar').click(function (e) {
+    $(".btn-comenzar").click(function (e) {
       e.preventDefault();
       CourseNav.soundClick();
-      $('#inicio').hide();
-      $('#desarrollo').show();
+      $("#inicio").hide();
+      $("#desarrollo").show();
     });
 
-    const urlExcelFile = 'Actividades_Manual_Vantive.xlsx';
+    const urlExcelFile = "Actividades_Manual_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);
         });
@@ -258,21 +297,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;
@@ -292,7 +335,7 @@
       const pregunta = questions[questionIndex];
       const opcionesBarajadas = shuffleArray([...pregunta.opciones]);
 
-      let opcionesHTML = '';
+      let opcionesHTML = "";
       opcionesBarajadas.forEach((opcion, index) => {
         opcionesHTML += `<div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}" data-puntos="${puntosEnJuego}">
               <div class="d-flex flex-row justify-content-center align-items-center letter text-white text-center p-3">${String.fromCharCode(97 + index)}</div>
@@ -301,7 +344,7 @@
       });
 
       Swal.fire({
-        target: document.getElementById('wrap-course-content'),
+        target: document.getElementById("wrap-course-content"),
         html: `
           <div class="text-center mb-3">
             <h4 class="fw-bold text-verde-oscuro">${pregunta.pregunta}</h4>
@@ -314,22 +357,20 @@
         showConfirmButton: false,
         allowOutsideClick: false,
         customClass: {
-          popup: 'swal-wide bg-white border-0 rounded-3 shadow'
+          popup: "swal-wide bg-white border-0 rounded-3 shadow",
         },
         backdrop: "rgba(65, 60, 60, .95)",
         width: "50em",
         didOpen: () => {
-
-
-          $('.btn-answer').click(function () {
-            const isCorrect = $(this).data('correct') === true;
-            const puntos = $(this).data('puntos');
-            $('.btn-answer').off('click hover').css('pointer-events', 'none');
+          $(".btn-answer").click(function () {
+            const isCorrect = $(this).data("correct") === true;
+            const puntos = $(this).data("puntos");
+            $(".btn-answer").off("click hover").css("pointer-events", "none");
 
             if (isCorrect) {
               correctQuestions++;
-              const puntosActuales = parseInt($('#puntos').text()) + puntos;
-              $('#puntos').text(puntosActuales.toString().padStart(3, '0'));
+              const puntosActuales = parseInt($("#puntos").text()) + puntos;
+              $("#puntos").text(puntosActuales.toString().padStart(3, "0"));
             }
 
             CourseNav.audioController.stopAllSoundsAndPlay(isCorrect ? good : bad);
@@ -339,27 +380,30 @@
               mostrarFeedback(isCorrect, pregunta, questionIndex);
             }, 200);
           });
-        }
+        },
       });
     }
 
     function mostrarFeedback(isCorrect, pregunta, questionIndex) {
-      const retroalimentacion = isCorrect ? pregunta.retroalimentacion_correcta : pregunta.retroalimentacion_incorrecta;
+      const retroalimentacion = isCorrect
+        ? pregunta.retroalimentacion_correcta
+        : pregunta.retroalimentacion_incorrecta;
 
       Swal.fire({
-        target: document.getElementById('wrap-course-content'),
-        imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png',
-        text: retroalimentacion || '',
+        target: document.getElementById("wrap-course-content"),
+        imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
+        text: retroalimentacion || "",
         showConfirmButton: true,
         customClass: {
-          popup: 'pop_retros bg-transparent border-0 rounded-0 shadow-none',
-          confirmButton: 'btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite'
+          popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none",
+          confirmButton:
+            "btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite",
         },
         confirmButtonText: "Continuar",
         backdrop: "rgba(65, 60, 60, .95)",
         width: "35em",
         didClose: () => {
-          $('.btn-question-pop').eq(questionIndex).addClass('completed');
+          $(".btn-question-pop").eq(questionIndex).addClass("completed");
           currentQuestionIndex++;
 
           if (currentQuestionIndex >= questions.length) {
@@ -367,33 +411,33 @@
               finalizarJuego();
             }, 500);
           }
-        }
+        },
       });
     }
 
     function finalizarJuego() {
-      const puntosFinal = parseInt($('#puntos').text());
+      const puntosFinal = parseInt($("#puntos").text());
       const aprobado = puntosFinal >= 1000;
 
-      $('.wrap-course-content').addClass('fake1').removeClass('fake');
+      $(".wrap-course-content").addClass("fake1").removeClass("fake");
 
       if (aprobado) {
         CourseNav.setSlideVisited();
-        $('#desarrollo').hide();
-        $('#cierre').show();
+        $("#desarrollo").hide();
+        $("#cierre").show();
       } else {
         CourseNav.setSlideVisited();
-        $('.col-reintentar').show();
-        $('#desarrollo').hide();
-        $('#cierre').show();
+        $(".col-reintentar").show();
+        $("#desarrollo").hide();
+        $("#cierre").show();
       }
     }
 
-    $('.btn-question-pop').click(function () {
+    $(".btn-question-pop").click(function () {
       const index = $(this).index();
-      const puntosEnJuego = parseInt($(this).data('puntos'));
-      if (!$(this).hasClass('completed') && !$(this).hasClass('disabled')) {
-        $(this).removeClass('animate__pulse animate__infinite').addClass('disabled');
+      const puntosEnJuego = parseInt($(this).data("puntos"));
+      if (!$(this).hasClass("completed") && !$(this).hasClass("disabled")) {
+        $(this).removeClass("animate__pulse animate__infinite").addClass("disabled");
         CourseNav.soundClick();
         mostrarPregunta(index, puntosEnJuego);
       }
@@ -404,4 +448,4 @@
       questions = shuffleArray(procesarPreguntas(hojaDatos));
     });
   });
-</script>
\ No newline at end of file
+</script>
diff --git a/contenido/14.html b/contenido/14.html
index fa6448d..4c3465a 100644
--- a/contenido/14.html
+++ b/contenido/14.html
@@ -23,8 +23,8 @@
   }
 
   .bg-rosa-mixto {
-    background: #D9C5D7;
-    background: linear-gradient(to bottom, #D9C5D7 0%, #EDE3EC 100%);
+    background: #d9c5d7;
+    background: linear-gradient(to bottom, #d9c5d7 0%, #ede3ec 100%);
   }
 
   .paqueteria {
@@ -57,11 +57,11 @@
   }
 
   .btn-paquete.disabled {
-    opacity: .5;
+    opacity: 0.5;
   }
 
   .btn-paquete.completed {
-    opacity: 1!important;
+    opacity: 1 !important;
   }
 
   #camion-transporte {
@@ -71,7 +71,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 {
@@ -101,29 +101,35 @@
     cursor: pointer;
   }
 </style>
-<div id="inicio" 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-11'>
-        <div class='row justify-content-center align-items-center'>
+<div id="inicio" 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-11">
+        <div class="row justify-content-center align-items-center">
           <div class="col-12 text-center animate__animated animate__bounceInDown">
             <div class="position-relative d-inline-block">
               <h2 class="text-primary mb-1 fw-bold">Entrega domiciliaria</h2>
-              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-1 opacity-100">
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-1 opacity-100" />
             </div>
           </div>
           <div class="col-6 text-center mb-1 animate__animated animate__zoomIn mb-3">
-            <img src="img/14.0.png" class="img-fluid">
+            <img src="img/14.0.png" class="img-fluid" />
           </div>
           <div class="col-7 text-center animate__animated animate__flipInX">
             <div class="card bg-transparent border-0 rounded-3 p-0 shadow-none">
               <div class="position-relative w-100">
-                <p>Gracias a que la diálisis peritoneal es una terapia <strong class="text-lila-claro">portable y autoadministrada,</strong> le permite mayores
-                  posibilidades de actividad laboral, vida escolar y posibilidad de viajar.</p>
+                <p>
+                  Gracias a que la diálisis peritoneal es una terapia
+                  <strong class="text-lila-claro">portable,</strong> le permite mayores
+                  posibilidades de actividad laboral, vida escolar y posibilidad de viajar.
+                </p>
               </div>
-              <div class="w-100 position-relative text-center animate__animated animate__zoomIn animate__delay-1s">
+              <div
+                class="w-100 position-relative text-center animate__animated animate__zoomIn animate__delay-1s"
+              >
                 <div
-                  class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
+                  class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
+                >
                   <h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
                 </div>
               </div>
@@ -134,15 +140,15 @@
     </div>
   </div>
 </div>
-<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;overflow: hidden;">
-  <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 id="desarrollo" class="page-sco py-2 py-md-0 h-100" style="display: none; overflow: hidden">
+  <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 text-center animate__animated animate__bounceInDown">
             <div class="position-relative d-inline-block">
               <h2 class="text-primary mb-1 fw-bold">Entrega domiciliaria</h2>
-              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-2 opacity-100">
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-2 opacity-100" />
             </div>
           </div>
           <div class="col-12 px-0">
@@ -150,8 +156,11 @@
               <div class="row justify-content-center">
                 <div class="col-10">
                   <div class="d-flex flex-row justify-content-center align-items-center gap-3">
-                    <img src="img/book0.png" class="img-fluid">
-                    <p class="mb-0"><strong>Instrucciones:</strong> Haga clic en cada caja y responda correctamente para recolectarla y completar la entrega domiciliaria.</p>
+                    <img src="img/book0.png" class="img-fluid" />
+                    <p class="mb-0">
+                      <strong>Instrucciones:</strong> Haga clic en cada caja y responda
+                      correctamente para recolectarla y completar la entrega domiciliaria.
+                    </p>
                   </div>
                 </div>
               </div>
@@ -160,47 +169,64 @@
           <div class="col-12 px-0 bg-rosa-mixto pt-5">
             <div class="row justify-content-center">
               <div class="col-10 text-center">
-                <div class="d-inline-flex position-relative camino-entrega flex-column justify-content-center align-items-center gap-2">
+                <div
+                  class="d-inline-flex position-relative camino-entrega flex-column justify-content-center align-items-center gap-2"
+                >
                   <div id="camion-transporte" class="paqueteria position-absolute">
-                    <img src="img/14.2.png" class="img-fluid">
+                    <img src="img/14.2.png" class="img-fluid" />
                   </div>
                   <div class="recorrido ms-auto">
-                    <div id="paquete0" class="btn-paquete text-center position-relative animate__animated animate__pulse animate__infinite">
+                    <div
+                      id="paquete0"
+                      class="btn-paquete text-center position-relative animate__animated animate__pulse animate__infinite"
+                    >
                       <div class="position-absolute check-question w-100">
-                        <img src="img/14.5.png" class="img-fluid">
+                        <img src="img/14.5.png" class="img-fluid" />
                       </div>
-                      <img src="img/14.3.png" class="img-fluid">
+                      <img src="img/14.3.png" class="img-fluid" />
                     </div>
-                    <div id="paquete1" class="btn-paquete text-center position-relative animate__animated animate__pulse animate__infinite disabled">
+                    <div
+                      id="paquete1"
+                      class="btn-paquete text-center position-relative animate__animated animate__pulse animate__infinite disabled"
+                    >
                       <div class="position-absolute check-question w-100">
-                        <img src="img/14.6.png" class="img-fluid">
+                        <img src="img/14.6.png" class="img-fluid" />
                       </div>
-                      <img src="img/14.3.png" class="img-fluid">
+                      <img src="img/14.3.png" class="img-fluid" />
                     </div>
-                    <div id="paquete2" class="btn-paquete text-center position-relative animate__animated animate__pulse animate__infinite disabled">
+                    <div
+                      id="paquete2"
+                      class="btn-paquete text-center position-relative animate__animated animate__pulse animate__infinite disabled"
+                    >
                       <div class="position-absolute check-question w-100">
-                        <img src="img/14.7.png" class="img-fluid">
+                        <img src="img/14.7.png" class="img-fluid" />
                       </div>
-                      <img src="img/14.3.png" class="img-fluid">
+                      <img src="img/14.3.png" class="img-fluid" />
                     </div>
-                    <div id="paquete3" class="btn-paquete text-center position-relative animate__animated animate__pulse animate__infinite disabled">
+                    <div
+                      id="paquete3"
+                      class="btn-paquete text-center position-relative animate__animated animate__pulse animate__infinite disabled"
+                    >
                       <div class="position-absolute check-question w-100">
-                        <img src="img/14.8.png" class="img-fluid">
+                        <img src="img/14.8.png" class="img-fluid" />
                       </div>
-                      <img src="img/14.3.png" class="img-fluid">
+                      <img src="img/14.3.png" class="img-fluid" />
                     </div>
-                    <div id="paquete4" class="btn-paquete text-center position-relative animate__animated animate__pulse animate__infinite disabled">
+                    <div
+                      id="paquete4"
+                      class="btn-paquete text-center position-relative animate__animated animate__pulse animate__infinite disabled"
+                    >
                       <div class="position-absolute check-question w-100">
-                        <img src="img/14.9.png" class="img-fluid">
+                        <img src="img/14.9.png" class="img-fluid" />
                       </div>
-                      <img src="img/14.3.png" class="img-fluid">
+                      <img src="img/14.3.png" class="img-fluid" />
                     </div>
                     <div id="fin" class="text-center position-relative">
-                      <img src="img/14.4.png" class="img-fluid">
+                      <img src="img/14.4.png" class="img-fluid" />
                     </div>
                   </div>
                   <div class="carretera">
-                    <img src="img/14.1.png" class="img-fluid">
+                    <img src="img/14.1.png" class="img-fluid" />
                   </div>
                 </div>
               </div>
@@ -211,27 +237,31 @@
     </div>
   </div>
 </div>
-<div id="cierre" class='page-sco py-2 py-md-0 h-100' style="display: none;">
-  <div class='container h-100'>
-    <div class='row justify-content-center align-items-center h-100'>
-      <div class='col-12'>
+<div id="cierre" class="page-sco py-2 py-md-0 h-100" style="display: none">
+  <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-12 text-center mb-3">
-            <img src="img/cierre_actividad.png" class="img-fluid">
+            <img src="img/cierre_actividad.png" class="img-fluid" />
           </div>
           <div class="col-12 mb-3 text-center">
             <div class="position-relative d-inline-block">
               <h2 class="text-primary mb-1 fw-bold">Entrega domiciliaria</h2>
-              <hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100">
+              <hr class="border border-2 border-verde-oscuro hr-style my-0 opacity-100" />
             </div>
           </div>
           <div class="col-12 text-center mb-3">
             <h4 class="text-secondary fw-bold">Ha concluido la actividad.</h4>
           </div>
-          <div class="col-12 text-center col-reintentar animate__animated animate__zoomIn" style="display: none;">
+          <div
+            class="col-12 text-center col-reintentar animate__animated animate__zoomIn"
+            style="display: none"
+          >
             <div
               class="btn-reintentar rounded-3 bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite"
-              onclick="CourseNav.reload()">
+              onclick="CourseNav.reload()"
+            >
               <h5 class="text-white fw-bold mb-0">Reintentar</h5>
             </div>
           </div>
@@ -243,35 +273,35 @@
 <script>
   $(function () {
     "use strict";
-    $('.wrap-course-content').addClass('fake');
+    $(".wrap-course-content").addClass("fake");
 
     let questions;
     let currentQuestionIndex = 0;
     let currentQuestion;
     let correctQuestions = 0;
     let maxQuestions = -1;
-    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");
 
-    $('.btn-comenzar').click(function (e) {
+    $(".btn-comenzar").click(function (e) {
       e.preventDefault();
       CourseNav.soundClick();
-      $('#inicio').hide();
-      $('#desarrollo').show();
+      $("#inicio").hide();
+      $("#desarrollo").show();
     });
 
-    const urlExcelFile = 'Actividades_Manual_Vantive.xlsx';
+    const urlExcelFile = "Actividades_Manual_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);
         });
@@ -281,21 +311,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;
@@ -315,7 +349,7 @@
       const pregunta = questions[questionIndex];
       const opcionesBarajadas = shuffleArray([...pregunta.opciones]);
 
-      let opcionesHTML = '';
+      let opcionesHTML = "";
       opcionesBarajadas.forEach((opcion, index) => {
         opcionesHTML += `<div class="position-relative d-flex flex-row align-items-center gap-0 mb-2 btn-answer" data-correct="${opcion.correct}">
               <div class="d-flex flex-row justify-content-center align-items-center letter text-white text-center p-3">${String.fromCharCode(97 + index)}</div>
@@ -324,7 +358,7 @@
       });
 
       Swal.fire({
-        target: document.getElementById('wrap-course-content'),
+        target: document.getElementById("wrap-course-content"),
         html: `
           <div class="text-center mb-3">
             <h4 class="fw-bold text-verde-oscuro">${pregunta.pregunta}</h4>
@@ -336,14 +370,14 @@
         showConfirmButton: false,
         allowOutsideClick: false,
         customClass: {
-          popup: 'swal-wide bg-white border-0 rounded-3 shadow'
+          popup: "swal-wide bg-white border-0 rounded-3 shadow",
         },
         backdrop: "rgba(65, 60, 60, .95)",
         width: "50em",
         didOpen: () => {
-          $('.btn-answer').click(function() {
-            const isCorrect = $(this).data('correct') === true;
-            $('.btn-answer').off('click').css('pointer-events', 'none');
+          $(".btn-answer").click(function () {
+            const isCorrect = $(this).data("correct") === true;
+            $(".btn-answer").off("click").css("pointer-events", "none");
 
             if (isCorrect) {
               correctQuestions++;
@@ -356,46 +390,50 @@
               mostrarFeedback(isCorrect, pregunta, questionIndex);
             }, 250);
           });
-        }
+        },
       });
     }
 
     function mostrarFeedback(isCorrect, pregunta, questionIndex) {
-      const retroalimentacion = isCorrect ? pregunta.retroalimentacion_correcta : pregunta.retroalimentacion_incorrecta;
+      const retroalimentacion = isCorrect
+        ? pregunta.retroalimentacion_correcta
+        : pregunta.retroalimentacion_incorrecta;
 
       Swal.fire({
-        target: document.getElementById('wrap-course-content'),
-        imageUrl: isCorrect ? 'img/good.png' : 'img/bad.png',
-        text: retroalimentacion || '',
+        target: document.getElementById("wrap-course-content"),
+        imageUrl: isCorrect ? "img/good.png" : "img/bad.png",
+        text: retroalimentacion || "",
         showConfirmButton: true,
         customClass: {
-          popup: 'pop_retros bg-transparent border-0 rounded-0 shadow-none',
-          confirmButton: 'btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite'
+          popup: "pop_retros bg-transparent border-0 rounded-0 shadow-none",
+          confirmButton:
+            "btn text-primary bg-lila-rosa amor fw-semibold animate__animated animate__pulse animate__infinite",
         },
         confirmButtonText: "Continuar",
         backdrop: "rgba(65, 60, 60, .95)",
         width: "35em",
         didClose: () => {
           const currentPaquete = $(`#paquete${questionIndex}`);
-          currentPaquete.removeClass('animate__pulse animate__infinite').addClass('completed');
+          currentPaquete.removeClass("animate__pulse animate__infinite").addClass("completed");
 
           // Cambiar imagen del check
-          const checkImg = currentPaquete.find('.check-question img');
-          checkImg.attr('src', isCorrect ? 'img/14.11.png' : 'img/14.10.png');
+          const checkImg = currentPaquete.find(".check-question img");
+          checkImg.attr("src", isCorrect ? "img/14.11.png" : "img/14.10.png");
 
           if (isCorrect) {
             // Mover camión
-            const camion = $('#camion-transporte');
+            const camion = $("#camion-transporte");
             const paqueteWidth = currentPaquete.outerWidth() + 15; // incluye gap
-            const currentTransform = camion.css('transform');
-            const currentX = currentTransform === 'none' ? 0 : parseFloat(currentTransform.split(',')[4]) || 0;
+            const currentTransform = camion.css("transform");
+            const currentX =
+              currentTransform === "none" ? 0 : parseFloat(currentTransform.split(",")[4]) || 0;
             const newX = currentX + paqueteWidth;
-            camion.css('transform', `translateX(${newX}px)`);
+            camion.css("transform", `translateX(${newX}px)`);
           }
 
           // Habilitar siguiente paquete
           if (questionIndex < questions.length - 1) {
-            $(`#paquete${questionIndex + 1}`).removeClass('disabled');
+            $(`#paquete${questionIndex + 1}`).removeClass("disabled");
           }
 
           currentQuestionIndex++;
@@ -404,13 +442,14 @@
             // Si respondió todas correctamente, mover al destino final
             if (correctQuestions === questions.length) {
               setTimeout(() => {
-                const camion = $('#camion-transporte');
-                const currentTransform = camion.css('transform');
-                const currentX = currentTransform === 'none' ? 0 : parseFloat(currentTransform.split(',')[4]) || 0;
+                const camion = $("#camion-transporte");
+                const currentTransform = camion.css("transform");
+                const currentX =
+                  currentTransform === "none" ? 0 : parseFloat(currentTransform.split(",")[4]) || 0;
                 const paqueteWidth = currentPaquete.outerWidth() + 25;
                 const newX = currentX + paqueteWidth;
-                camion.css('transform', `translateX(${newX}px)`);
-                console.log('Moviendo camión al fin:', newX);
+                camion.css("transform", `translateX(${newX}px)`);
+                console.log("Moviendo camión al fin:", newX);
               }, 1000);
             }
             const delay = correctQuestions === questions.length ? 3000 : 1500;
@@ -418,33 +457,37 @@
               finalizarJuego();
             }, delay);
           }
-        }
+        },
       });
     }
 
     function finalizarJuego() {
       const aprobado = correctQuestions >= Math.ceil(questions.length * 0.75);
 
-      $('.wrap-course-content').addClass('fake1').removeClass('fake');
+      $(".wrap-course-content").addClass("fake1").removeClass("fake");
 
       CourseNav.setSlideVisited();
 
       if (aprobado) {
-        $('#desarrollo').hide();
-        $('#cierre').show();
+        $("#desarrollo").hide();
+        $("#cierre").show();
       } else {
-        $('.col-reintentar').show();
-        $('#desarrollo').hide();
-        $('#cierre').show();
+        $(".col-reintentar").show();
+        $("#desarrollo").hide();
+        $("#cierre").show();
       }
     }
 
-    $('.btn-paquete').click(function() {
-      const paqueteId = $(this).attr('id');
-      const index = parseInt(paqueteId.replace('paquete', ''));
+    $(".btn-paquete").click(function () {
+      const paqueteId = $(this).attr("id");
+      const index = parseInt(paqueteId.replace("paquete", ""));
 
-      if (!$(this).hasClass('disabled') && !$(this).hasClass('completed') && index < questions.length) {
-        $(this).removeClass('animate__pulse animate__infinite').addClass('disabled');
+      if (
+        !$(this).hasClass("disabled") &&
+        !$(this).hasClass("completed") &&
+        index < questions.length
+      ) {
+        $(this).removeClass("animate__pulse animate__infinite").addClass("disabled");
         CourseNav.soundClick();
         mostrarPregunta(index);
       }