Integracion de manejo de objeciones.

Drossagyn/config.json

@@ -1,5 +1,5 @@
 {
-  "title": "OGestan® Plus",
+  "title": "Drossagyn",
   "modules": [
     {
       "title": "Contenido",
@@ -34,6 +34,10 @@
         },
         {
           "title": "Manejo de Objeciones",
+          "content": "contenido/mo.html"
+        },
+        {
+          "title": "Actividad",
           "content": "contenido/08.html"
         },
         {

Drossagyn/contenido/01.html

@@ -1,8 +1,8 @@
 <style>
   .back0 {
-    background-image: url(img/bg00.jpg);
+    background-image: url(img/bg00s.jpg);
     background-size: cover;
-    background-position: 20% 100%;
+    background-position: center;
     background-repeat: no-repeat;
   }
 
@@ -34,11 +34,11 @@
               <div class="col-12 mb-3 text-center" data-sal="zoom-in">
                 <div class="d-inline-block position-relative">
                   <hr class="m-0 mb-2 opacity-100 border-top-2 text-white">
-                  <h1 class="text-white fw-bolder">¡Bienvenido a <br> Drossagyn<sup>®</sup>!</h1>
+                  <h1 class="text-primary fw-bolder">¡Bienvenido a <br> Drossagyn<sup>®</sup>!</h1>
                   <hr class="m-0 mt-2 opacity-100 border-top-2 text-white">
                 </div>
               </div>
-              <div class="col-12 text-center" data-sal="flip-up">
+              <div class="col-12 text-center mb-3 mb-md-0" data-sal="flip-up">
                 <div class="w-100 position-relative">
                   <div id="wrap-comenzar"
                     data-sec="sec1"
@@ -47,6 +47,9 @@
                   </div>
                 </div>
               </div>
+              <div class="col-7 text-center d-block d-md-none">
+                <img src="img/01.1.png" class="img-fluid">
+              </div>
             </div>
           </div>
         </div>

Drossagyn/contenido/02.html

@@ -75,6 +75,14 @@
     min-width: 100%;
   }
 
+  ul.li-sp li {
+    list-style-type: none;
+  }
+
+  ul.li-sp li>ul>li {
+    list-style-type: disc;
+  }
+
   @media(min-width: 991px) {
     .shadow-externo {
       grid-template-columns: auto 50px;
@@ -146,18 +154,21 @@
                           <p>Principio activo: <strong>Estriol</strong></p>
                           <p>Forma farmacéutica: <strong>Crema</strong></p>
                           <p>Formulación:</p>
-                          <p>Cada 100 gramos contienen:</p>
+                          <ul class="li-sp mb-0">
-                          <ul class="mb-0">
+                            <li>Cada 100 gramos contienen:
+                              <ul class="mb-0 mt-3">
                                 <li><strong>Estriol</strong> 50mg</li>
                                 <li>Excipiente cbp 100g</li>
                               </ul>
+                            </li>
+                          </ul>
                         </div>
                       </div>
                     </div>
                     <div class="swiper-slide">
                       <div class="row justify-content-center align-items-center h-100">
                         <div class="col-7 col-md-5 text-center mb-3 mb-md-0">
-                          <img src="img/02.1.png" class="img-fluid">
+                          <img src="img/02.3.png" class="img-fluid">
                         </div>
                         <div class="col-12 col-md-7">
                           <h4 class="fw-bold text-green-1">Presentación Comercial</h4>

Drossagyn/contenido/03.html

@@ -88,7 +88,7 @@
             <div class="w-100">
               <div class="ratio ratio-16x9">
                 <video id="video" class="embed-responsive-item" controls autoplay poster="video/poster.jpg">
-                  <source src="video/dummy.mp4" type="video/mp4" />
+                  <source src="video/Drossagyn.mp4" type="video/mp4" />
                   Your browser does not support the video tag.
                 </video>
                 <div class="play-button-container">

Drossagyn/contenido/04.html

@@ -44,7 +44,7 @@
           <div class="col-12 mb-3 text-center animate__animated animate__zoomIn">
             <h2 class="fw-bold text-secondary mb-0">Dosis y vía de administración</h2>
           </div>
-          <div class="col-12 col-md-6 col-lg-5 animate__animated animate__zoomIn">
+          <div class="col-12 col-md-4 col-lg-5 animate__animated animate__zoomIn">
             <div class="row justify-content-center align-items-center">
               <div class="col-3 col-md-5 text-center">
                 <img src="img/04.0.png" class="img-fluid">
@@ -54,7 +54,7 @@
               </div>
             </div>
           </div>
-          <div id="col-hide" class="col-12 col-md-6 col-lg-7 d-none d-md-block animate__animated animate__zoomIn">
+          <div id="col-hide" class="col-12 col-md-8 col-lg-7 d-none d-md-block animate__animated animate__zoomIn">
             <div id="txt1" class="texts position-relative w-100">
               <div class="row justify-content-center">
                 <div class="col-7 col-md-9 text-center mb-3">

Drossagyn/contenido/06.html

@@ -155,7 +155,7 @@
     <div class="container-fluid">
       <div class="row justify-content-center">
         <div class="col-12">
-          <div class="card bg-transparent border-0 rounded-0 shadow-none p-4 position-relative">
+          <div class="card bg-transparent border-0 rounded-0 shadow-none py-5 p-4 py-md-4 position-relative">
             <div class="position-relative w-100 z-1">
               <h3 class="fw-medium text-md-start text-green-1">Contraindicaciones</h3>
               <ul class="text-start">
@@ -170,7 +170,7 @@
               </ul>
               <p class="mb-0"><em>En cualquiera de estos escenarios, el producto debe evitarse por completo.</em></p>
             </div>
-            <div class="position-absolute img-back h-100 top-0 d-flex justify-content-center align-items-center">
+            <div class="position-absolute img-back h-100 top-0 d-none d-md-flex justify-content-center align-items-center">
               <div class="position-relative w-100 text-center">
                 <img src="img/06.6.png" class="img-fluid">
               </div>
@@ -184,7 +184,7 @@
     <div class="container-fluid">
       <div class="row justify-content-center">
         <div class="col-12">
-          <div class="card bg-transparent border-0 rounded-0 shadow-none p-4 position-relative">
+          <div class="card bg-transparent border-0 rounded-0 shadow-none py-5 p-4 py-md-4 position-relative">
             <div class="position-relative w-100 z-1">
               <div class="row justify-content-center">
                 <div class="col-12 mb-3 text-md-start">
@@ -220,7 +220,7 @@
                 </div>
               </div>
             </div>
-            <div class="position-absolute img-back h-100 top-0 d-flex justify-content-center align-items-center">
+            <div class="position-absolute img-back h-100 top-0 d-none d-md-flex justify-content-center align-items-center">
               <div class="position-relative w-100 text-center">
                 <img src="img/06.7.png" class="img-fluid">
               </div>
@@ -240,7 +240,7 @@
               <p class="text-md-start">No debe administrarse en el <strong>embarazo</strong>, ni durante el período de <strong>lactancia.</strong></p>
               <p class="mb-0"><em>Estas restricciones están claramente establecidas para evitar riesgos innecesarios.</em></p>
             </div>
-            <div class="position-absolute img-back h-100 top-0 d-flex justify-content-center align-items-center">
+            <div class="position-absolute img-back h-100 top-0 d-none d-md-flex justify-content-center align-items-center">
               <div class="position-relative w-100 text-center">
                 <img src="img/06.8.png" class="img-fluid">
               </div>
@@ -254,7 +254,7 @@
     <div class="container-fluid">
       <div class="row justify-content-center">
         <div class="col-12">
-          <div class="card bg-transparent border-0 rounded-0 shadow-none p-4 position-relative">
+          <div class="card bg-transparent border-0 rounded-0 shadow-none py-5 p-4 py-md-4 position-relative">
             <div class="position-relative w-100 z-1">
               <h3 class="fw-medium text-md-start text-green-1">Reacciones secundarias y adversas</h3>
               <ul class="text-start">
@@ -266,7 +266,7 @@
                   tienden a desaparecer a los pocos días.</em></p>
               <p class="mb-0"><em>Frecuencia: (ocasional -&lt;1/100, ≥1/1000 )</em></p>
             </div>
-            <div class="position-absolute img-back h-100 top-0 d-flex justify-content-center align-items-center">
+            <div class="position-absolute img-back h-100 top-0 d-none d-md-flex justify-content-center align-items-center">
               <div class="position-relative w-100 text-center">
                 <img src="img/06.9.png" class="img-fluid">
               </div>
@@ -280,7 +280,7 @@
     <div class="container-fluid">
       <div class="row justify-content-center">
         <div class="col-12">
-          <div class="card bg-transparent border-0 rounded-0 shadow-none p-4 position-relative">
+          <div class="card bg-transparent border-0 rounded-0 shadow-none py-5 p-4 py-md-4 position-relative">
             <div class="position-relative w-100 z-1">
               <h3 class="fw-medium text-md-start text-green-1">Interacciones medicamentosas</h3>
               <p class="text-md-start">Algunos medicamentos pueden aumentar la acción de los estrógenos, como:</p>
@@ -290,10 +290,9 @@
                 <li>Carbamazepinas</li>
                 <li>Rifampicina</li>
               </ul>
-              <p><em>La existencia de interacción por vía cutánea es muy poco probable, debido a su acción </em></p>
+              <p><em>La existencia de interacción por vía cutánea es muy poco probable, debido a su acción local = SEGURIDAD</em></p>
-              <p class="mb-0"><em>local = SEGURIDAD</em></p>
             </div>
-            <div class="position-absolute img-back h-100 top-0 d-flex justify-content-center align-items-center">
+            <div class="position-absolute img-back h-100 top-0 d-none d-md-flex justify-content-center align-items-center">
               <div class="position-relative w-100 text-center">
                 <img src="img/06.10.png" class="img-fluid">
               </div>

Drossagyn/contenido/08.html

@@ -106,7 +106,7 @@
 
   .bubble {
     position: relative;
-    background: #DD3352;
+    background: #ff3983;
     color: #FFFFFF;
     box-shadow: 5px 7px 7px -1px rgba(221 51 82 / 30%);
     text-align: center;
@@ -121,7 +121,7 @@
     width: 0;
     z-index: 1;
     border-style: solid;
-    border-color: #DD3352 transparent;
+    border-color: #ff3983 transparent;
     border-width: 0 20px 20px;
     top: -20px;
     left: 50%;
@@ -132,7 +132,7 @@
   @media (min-width: 768px) {
     .bubble:after {
       /* Hacer el triángulo hacia la izquierda: color en el borde derecho */
-      border-color: transparent #DD3352 transparent transparent;
+      border-color: transparent #ff3983 transparent transparent;
       /* top right bottom left */
       border-width: 20px 20px 20px 0;
       /* Colocar el triángulo centrado verticalmente y fuera a la izquierda */
@@ -167,7 +167,7 @@
   .option-btn:hover {
     transform: scale(.9);
     box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset !important;
-    border: 5px solid #DD3352 !important;
+    border: 5px solid #ff3983 !important;
   }
 .bannerend{
     width: 100%;

Drossagyn/contenido/mo.html

@@ -0,0 +1,303 @@
+<style>
+  .fake {
+    background-image: url('img/mo.png');
+    background-size: cover;
+    background-position: center;
+  }
+
+  /* --- Contenedor de la Burbuja --- */
+  .speech-bubble {
+    position: relative;
+    background: #ffffff; /* Fondo blanco */
+    color: #333333; /* Texto oscuro para legibilidad */
+    border-radius: 0.5em;
+    padding: 1.5rem;
+    font-size: 1.1rem;
+    min-height: 120px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Sombra para resaltar sobre el fondo */
+    transition: all 0.3s ease-in-out;
+  }
+
+  .bubble-text {
+    line-height: 1.5;
+  }
+
+  /* --- Animaciones de Personajes (Foco visual) --- */
+  .speaker-active {
+    transform: scale(1.05);
+    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
+    transition: all 0.3s ease;
+  }
+  
+  .speaker-inactive {
+    opacity: 0.6;
+    transform: scale(0.95);
+    transition: all 0.3s ease;
+  }
+
+  /* --- COMPORTAMIENTO MOBILE (Apilamiento vertical de Bootstrap) --- */
+  @media (max-width: 767.98px) {
+    /* Apunta hacia arriba (al Médico) */
+    .speech-bubble-left::after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: -20px;
+      transform: translateX(-50%);
+      border: 20px solid transparent;
+      border-width: 0 20px 20px 20px;
+      border-bottom-color: #ffffff; /* Coincide con el fondo blanco */
+      margin: 0;
+    }
+    
+    /* Apunta hacia abajo (al Representante) */
+    .speech-bubble-right::after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: auto;
+      bottom: -20px;
+      transform: translateX(-50%);
+      border: 20px solid transparent;
+      border-width: 20px 20px 0 20px;
+      border-top-color: #ffffff; /* Coincide con el fondo blanco */
+      margin: 0;
+    }
+  }
+
+  /* --- COMPORTAMIENTO DESKTOP (md y superior) --- */
+  @media (min-width: 768px) {
+    /* Apunta hacia la izquierda */
+    .speech-bubble-left::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 50%;
+      width: 0;
+      height: 0;
+      border: 20px solid transparent;
+      border-right-color: #ffffff; /* Coincide con el fondo blanco */
+      border-left: 0;
+      margin-top: -20px;
+      margin-left: -20px;
+      transform: none;
+    }
+
+    /* Apunta hacia la derecha */
+    .speech-bubble-right::after {
+      content: '';
+      position: absolute;
+      right: 0;
+      left: auto;
+      top: 50%;
+      width: 0;
+      height: 0;
+      border: 20px solid transparent;
+      border-left-color: #ffffff; /* Coincide con el fondo blanco */
+      border-right: 0;
+      margin-top: -20px;
+      margin-right: -20px;
+      transform: none;
+    }
+  }
+</style>
+</style>
+
+<div class='page-sco py-3 py-md-4 bg-transparent'>
+  <div class='container'>
+    <div class='row justify-content-center align-items-center'>
+      <div class='col-12 anim0'>
+        <div class='row justify-content-center align-items-center'>
+          
+          <div class='col-12 text-center'>
+            <h2 class='mb-4 fw-semibold text-center'>Manejo de Objeciones</h2>
+          </div>
+          
+          <!-- Avatar Médico -->
+          <div class='col-6 col-md-3 text-center'>
+            <img src='img/med.png' class='img-fluid speaker-inactive' alt='Médico' id="medico">
+          </div>
+          
+          <!-- Contenedor Dinámico de Diálogo -->
+          <div class='col-12 col-md-6 text-center'>
+            <div id="dialogue-bubble" class="speech-bubble">
+              <div id="dialogue-text" class="bubble-text">
+                <!-- El texto se inyecta dinámicamente mediante JS -->
+              </div>
+            </div>
+          </div>
+          
+          <!-- Avatar Representante -->
+          <div class='col-6 col-md-3 text-center'>
+            <img src='img/rep.png' class='img-fluid speaker-inactive' alt='Representante' id="rep">
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  /**
+   * Módulo de Diálogo Interactivo
+   * Orquesta la secuencia de texto y audio, manipulando el DOM según el hablante activo.
+   */
+  $(function () {
+    "use strict";
+    
+    $('body').addClass('fake');
+    
+    // Configuración de la secuencia del diálogo
+    const mo = [
+      {
+        text: "No utilizo Drossagyn porque la terapia hormonal aumenta el riesgo de cáncer (principalmente de mama) en las pacientes.",
+        sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/0027-Drossagyn-ob1.mp3') : null,
+        img: '#medico'
+      },
+      {
+        text: "Doctor, entiendo perfectamente esa preocupación, porque durante muchos años el tema del riesgo oncológico asociado a la terapia hormonal generó mucha cautela en la práctica clínica.",
+        sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo01.mp3') : null,
+        img: '#rep'
+      },
+      {
+        text: "Sin embargo, en los últimos años la evidencia ha permitido confirmar la seguridad de la terapia hormonal.",
+        sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo02.mp3') : null,
+        img: '#rep'
+      },
+      {
+        text: "De hecho, este cambio de perspectiva fue tan contundente que en 2025 la FDA retiró las advertencias de seguridad, precisamente porque la evidencia acumulada permitió redefinir el verdadero perfil riesgo-beneficio de estas terapias.",
+        sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo03.mp3') : null,
+        img: '#rep'
+      },
+      {
+        text: "Además, cuando hablamos de Drossagyn, estamos hablando de estriol administrado por vía local; la absorción sistémica es mínima, con concentraciones plasmáticas muy bajas, insuficientes para generar la exposición hormonal sostenida que en el pasado se asociaba a preocupación oncológica en las terapias sistémicas.",
+        sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo04.mp3') : null,
+        img: '#rep'
+      },
+      {
+        text: "Al mismo tiempo, la administración local de Drossagyn logra una excelente eficacia sobre los tejidos vaginales, restaurando el grosor epitelial, la elasticidad y la lubricación, con un impacto clínico muy claro sobre los síntomas y la calidad de vida de la paciente.",
+        sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo05.mp3') : null,
+        img: '#rep'
+      },
+      {
+        text: "Mis pacientes, en general, tienen mala adherencia a tratamientos con cremas vaginales.",
+        sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/0029-Drossagyn-ob2.mp3') : null,
+        img: '#medico'
+      },
+      {
+        text: "Entiendo, doctor, de acuerdo con lo que me comenta, que algunas pacientes pueden tener dudas iniciales sobre la aplicación vaginal",
+        sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo06.mp3') : null,
+        img: '#rep'
+      },
+      {
+        text: "Sin embargo, cuando experimentan la mejoría directa en síntomas como resequedad, ardor o dispareunia, la adherencia mejora significativamente.",
+        sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo07.mp3') : null,
+        img: '#rep'
+      },
+      {
+        text: "Drossagyn actúa directamente en el tejido afectado, lo que permite una recuperación más fisiológica y eficaz del epitelio vaginal, favoreciendo que la paciente perciba el beneficio y continúe el tratamiento.",
+        sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo08.mp3') : null,
+        img: '#rep'
+      },
+      {
+        text: "¿No le parece que valdría mucho la pena transmitir a sus pacientes los beneficios que pueden obtener en relación con su calidad de vida con el uso de Drossagyn?",
+        sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo09.mp3') : null,
+        img: '#rep'
+      },
+      {
+        text: "Reconozco la importancia de la terapia hormonal local, sin embargo, me funciona muy bien Ovestin. ¿Por qué cambiaría?",
+        sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/0031-Drossagyn-ob3.mp3') : null,
+        img: '#medico'
+      },
+      {
+        text: "Doctor, gracias por su comentario.",
+        sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo10.mp3') : null,
+        img: '#rep'
+      },
+      {
+        text: "Entiendo con esto que ya cuenta con experiencia en el uso de estriol local. Permítame mencionarle una de las ventajas de Drossagyn: ofrece estriol en una formulación farmacéutica desarrollada bajo estándares europeos y con el respaldo científico de Besins Healthcare, líder global en salud hormonal femenina.",
+        sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo11.mp3') : null,
+        img: '#rep'
+      },
+      {
+        text: "Esto le permite contar con una opción confiable dentro de un portafolio especializado en el manejo del síndrome genitourinario de la menopausia. Aunado a lo anterior, Drossagyn es una crema muy ligera y de fácil aplicación que no dejará residuos molestos en la paciente.",
+        sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo12.mp3') : null,
+        img: '#rep'
+      },
+      {
+        text: "Un beneficio adicional es que su presentación cubrirá los 3 meses iniciales de tratamiento indicados por las guías para tratar los síntomas genitourinarios de la menopausia.",
+        sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo13.mp3') : null,
+        img: '#rep'
+      },
+      {
+        text: "Sin duda, es un tema que puede llamar la atención de sus pacientes.",
+        sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo14.mp3') : null,
+        img: '#rep'
+      },
+      {
+        text: "¿no le parece, Doctor?",
+        sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo15.mp3') : null,
+        img: '#rep'
+      },
+    ];
+
+    // Caché de elementos del DOM
+    const $bubble = $('#dialogue-bubble');
+    const $text = $('#dialogue-text');
+    const $medico = $('#medico');
+    const $rep = $('#rep');
+
+    /**
+     * Ejecuta un nodo de diálogo recursivamente hasta finalizar el array.
+     * @param {number} index - Índice actual de la conversación.
+     */
+    function playDialogueStep(index) {
+      // Condición de cierre: Secuencia terminada
+      if (index >= mo.length) {
+        if (typeof CourseNav !== 'undefined' && typeof CourseNav.completeLesson === 'function') {
+          CourseNav.setSlideVisited();
+        }
+        return;
+      }
+
+      const currentStep = mo[index];
+
+      // 1. Actualizar texto con transición limpia
+      $text.hide().html(`<p class="mb-0 m-0">${currentStep.text}</p>`).fadeIn(300);
+
+      // 2. Gestionar la orientación de la burbuja y el foco en los personajes
+      if (currentStep.img === '#medico') {
+        $bubble.removeClass('speech-bubble-right').addClass('speech-bubble-left');
+        $medico.removeClass('speaker-inactive').addClass('speaker-active');
+        $rep.removeClass('speaker-active').addClass('speaker-inactive');
+      } else if (currentStep.img === '#rep') {
+        $bubble.removeClass('speech-bubble-left').addClass('speech-bubble-right');
+        $rep.removeClass('speaker-inactive').addClass('speaker-active');
+        $medico.removeClass('speaker-active').addClass('speaker-inactive');
+      }
+
+      // 3. Reproducir audio e instanciar el listener recursivo
+      if (typeof CourseNav !== 'undefined' && CourseNav.audioController && currentStep.sound) {
+        CourseNav.audioController.stopAllSoundsAndPlay(currentStep.sound);
+        
+        // Asumiendo que CourseNav utiliza Howler.js u otra API basada en eventos (on/once)
+        currentStep.sound.once("end", function () {
+          playDialogueStep(index + 1);
+        });
+      } else {
+        // Fallback para entornos de desarrollo donde el audio no esté cargado
+        console.warn(`[Modo Desarrollo]: Simulando delay para el audio de: ${currentStep.img}`);
+        setTimeout(() => {
+          playDialogueStep(index + 1);
+        }, 4000); 
+      }
+    }
+
+    // Inicializar el diálogo
+    playDialogueStep(0);
+  });
+</script>

Drossagyn/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="es">
     <head>
         <meta charset="UTF-8" />
@@ -15,9 +15,9 @@
         <link rel="stylesheet" href="css/sweetalert2.min.css" />
         <link rel="stylesheet" href="css/swiper-bundle.min.css" />
         <link rel="stylesheet" href="css/driver.css" />
-    <link rel="stylesheet" href="font/roboto/stylesheet.css">
+        <link rel="stylesheet" href="font/roboto/stylesheet.css" />
         <link rel="stylesheet" href="css/theme.min.css" />
-    <link rel="stylesheet" href="css/sal.css">
+        <link rel="stylesheet" href="css/sal.css" />
         <link rel="stylesheet" href="css/style.min.css" />
     </head>
     <body>
@@ -29,7 +29,10 @@
                     <a class="navbar-brand p-0 disabled order-1" href="#">
                         <img src="img/template/logo.svg" width="180" alt="Logo" />
                     </a>
-          <div id="titleSco" class="flex-grow-1 title_head_sco text-center text-white fw-bold fs-5 order-3 order-md-2"></div>
+                    <div
+                        id="titleSco"
+                        class="flex-grow-1 title_head_sco text-center text-white fw-bold fs-5 order-3 order-md-2"
+                    ></div>
                     <div class="d-flex align-items-center text-white order-2 order-md-3 ms-auto">
                         <!-- <button class="btn-glossary controls-btn me-2" id="btn-glossary" aria-label="Glossary">
               <i class="fa-regular fa-book-section fa-xl"></i>
@@ -39,7 +42,17 @@
                             <div class="position-relative">
                                 <svg viewBox="0 0 100 100" class="w-100 h-100">
                                     <circle cx="50" cy="50" r="45" stroke="#f7f7f7" stroke-width="10" fill="none" />
-                  <circle id="coursenav-progress-circle" cx="50" cy="50" r="45" stroke="#009ace" stroke-width="10" fill="none" stroke-dasharray="283" stroke-dashoffset="283" />
+                                    <circle
+                                        id="coursenav-progress-circle"
+                                        cx="50"
+                                        cy="50"
+                                        r="45"
+                                        stroke="#009ace"
+                                        stroke-width="10"
+                                        fill="none"
+                                        stroke-dasharray="283"
+                                        stroke-dashoffset="283"
+                                    />
                                 </svg>
                                 <i id="coursenav-audio-icon" class="fa-duotone fa-solid fa-volume"></i>
                             </div>
@@ -62,10 +75,20 @@
         </header>
 
         <!-- OFFCANVAS DESDE DERECHA -->
-    <div class="offcanvas offcanvas-end bg-green-1 text-white" tabindex="-1" id="coursenav-offcanvas" aria-labelledby="coursenav-offcanvas-label">
+        <div
+            class="offcanvas offcanvas-end bg-green-1 text-white"
+            tabindex="-1"
+            id="coursenav-offcanvas"
+            aria-labelledby="coursenav-offcanvas-label"
+        >
             <div class="offcanvas-header">
                 <h5 id="coursenav-offcanvas-label" class="offcanvas-title">Índice</h5>
-        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+                <button
+                    type="button"
+                    class="btn-close text-reset"
+                    data-bs-dismiss="offcanvas"
+                    aria-label="Close"
+                ></button>
             </div>
             <div class="offcanvas-body d-flex flex-column p-0">
                 <!-- Menú principal -->
@@ -96,18 +119,33 @@
         <main id="coursenav-main-content"></main>
 
         <!-- FOOTER -->
-    <footer class="mt-auto py-1 d-flex flex-wrap justify-content-center align-items-center gap-2 gap-md-3 px-2 px-md-4" style="background-color: rgba(220, 220, 220, .7);">
+        <footer
+            class="mt-auto py-1 d-flex flex-wrap justify-content-center align-items-center gap-2 gap-md-3 px-2 px-md-4"
+            style="background-color: rgba(220, 220, 220, 0.7)"
+        >
             <div class="aviso-privacidad flex-fill flex-md-none order-2 order-md-1">
-        <p class="mb-0 small text-center text-md-start">Uso exclusivo de capacitación interna, prohibida su reproducción y/o distribución</p>
+                <p class="mb-0 small text-center text-md-start">
+                    Uso exclusivo de capacitación interna, prohibida su reproducción y/o distribución
+                </p>
             </div>
-      <div class="d-flex justify-content-center align-items-center gap-3 position-relative ms-md-auto flex-fill flex-md-none order-1 order-md-2">
+            <div
-        <button id="coursenav-prev-btn" class="coursenav-btn-navigation bg-green-1 text-white" data-bs-toggle="tooltip"
+                class="d-flex justify-content-center align-items-center gap-3 position-relative ms-md-auto flex-fill flex-md-none order-1 order-md-2"
-          title="Anterior">
+            >
+                <button
+                    id="coursenav-prev-btn"
+                    class="coursenav-btn-navigation bg-green-1 text-white"
+                    data-bs-toggle="tooltip"
+                    title="Anterior"
+                >
                     <i class="fa-solid fa-arrow-down fa-rotate-90"></i>
                 </button>
                 <div id="pagination" class="paginacion_sco fw-bold"></div>
-        <button id="coursenav-next-btn" class="coursenav-btn-navigation bg-green-1 text-white" data-bs-toggle="tooltip"
+                <button
-          title="Siguiente">
+                    id="coursenav-next-btn"
+                    class="coursenav-btn-navigation bg-green-1 text-white"
+                    data-bs-toggle="tooltip"
+                    title="Siguiente"
+                >
                     <i class="fa-solid fa-arrow-down fa-rotate-270"></i>
                 </button>
             </div>
@@ -121,12 +159,26 @@
         </div>
 
         <!-- Offcanvas: inicialmente vacío -->
-    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasGlossary" aria-labelledby="offcanvasGlossaryLabel">
+        <div
+            class="offcanvas offcanvas-end"
+            tabindex="-1"
+            id="offcanvasGlossary"
+            aria-labelledby="offcanvasGlossaryLabel"
+        >
             <div class="offcanvas-header">
-        <h1 class="offcanvas-title text-danger text-center amor fw-bold" id="offcanvasGlossaryLabel" style="width: 90%;">
+                <h1
+                    class="offcanvas-title text-danger text-center amor fw-bold"
+                    id="offcanvasGlossaryLabel"
+                    style="width: 90%"
+                >
                     OGestan<sup>®</sup> Plus
                 </h1>
-        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Cerrar"></button>
+                <button
+                    type="button"
+                    class="btn-close text-reset"
+                    data-bs-dismiss="offcanvas"
+                    aria-label="Cerrar"
+                ></button>
             </div>
             <div class="offcanvas-body overflow-auto">
                 <!-- Aquí irá el contenido de manual_pld_ft.html -->