Integracion de manejo de objeciones.

OgestanPlus/OgestanPlus.code-workspace

@@ -4,5 +4,7 @@
 			"path": "."
 		}
     ],
-    "settings": {}
+		"settings": {
+			"liveServer.settings.port": 5501
+		}
 }

OgestanPlus/config.json

@@ -1,42 +1,46 @@
 {
-  "title": "OGestan® Plus",
-  "modules": [
-    {
-      "title": "Contenido",
-      "topics": [
+    "title": "OGestan® Plus",
+    "modules": [
         {
-          "title": "Bienvenida y Objetivo General",
-          "content": "contenido/01.html"
-        },
-        {
-          "title": "La familia OGestan<sup>®</sup>",
-          "content": "contenido/02.html"
-        },
-        {
-          "title": "¿Qué es OGestan<sup>®</sup> Plus?",
-          "content": "contenido/03.html"
-        },
-        {
-          "title": "Beneficios",
-          "content": "contenido/04.html"
-        },
-        {
-          "title": "Información Nutricional",
-          "content": "contenido/05.html"
-        },
-        {
-          "title": "Competencia",
-          "content": "contenido/06.html"
-        },
-        {
-          "title": "Manejo de Objeciones",
-          "content": "contenido/07.html"
-        },
-        {
-          "title": "Cierre",
-          "content": "contenido/08.html"
+            "title": "Contenido",
+            "topics": [
+                {
+                    "title": "Bienvenida y Objetivo General",
+                    "content": "contenido/01.html"
+                },
+                {
+                    "title": "La familia OGestan<sup>®</sup>",
+                    "content": "contenido/02.html"
+                },
+                {
+                    "title": "¿Qué es OGestan<sup>®</sup> Plus?",
+                    "content": "contenido/03.html"
+                },
+                {
+                    "title": "Beneficios",
+                    "content": "contenido/04.html"
+                },
+                {
+                    "title": "Información Nutricional",
+                    "content": "contenido/05.html"
+                },
+                {
+                    "title": "Competencia",
+                    "content": "contenido/06.html"
+                },
+                {
+                    "title": "Manejo de Objeciones",
+                    "content": "contenido/mo.html"
+                },
+                {
+                    "title": "Actividad de aprendizaje",
+                    "content": "contenido/07.html"
+                },
+                {
+                    "title": "Cierre",
+                    "content": "contenido/08.html"
+                }
+            ]
         }
-      ]
-    }
-  ]
+    ]
 }

OgestanPlus/contenido/mo.html

@@ -0,0 +1,259 @@
+<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: "¿Por qué Ogestan Plus tiene tan poca cantidad de hierro bisglicinato?",
+        sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/0026-objecion_1_ogestanplus.mp3') : null,
+        img: '#medico'
+      },
+      {
+        text: "Doctor, comprendo que la cantidad de hierro en la formulación de Ogestan Plus llame su atención.",
+        sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo01.mp3') : null,
+        img: '#rep'
+      },
+      {
+        text: "Permítame compartirle que esta corresponde a la cantidad óptima que debe contener un suplemento alimenticio como lo es Ogestan Plus. Este producto no fue formulado como un medicamento para corregir una anemia ferropénica establecida ni como tratamiento de una deficiencia diagnosticada; para esos casos, por supuesto, usted requerirá esquemas terapéuticos específicos con dosis más altas según el perfil clínico de la paciente.",
+        sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo02.mp3') : null,
+        img: '#rep'
+      },
+      {
+        text: "Ogestan Plus está pensado como una suplementación complementaria y de mantenimiento para mujeres en etapa de embarazo e incluso en lactancia, buscando cubrir los requerimientos fisiológicos diarios al sumarse a la alimentación habitual, pero evitando la sobrecarga gastrointestinal que suele comprometer la adherencia, a diferencia de otros hierros como el sulfato ferroso, por ejemplo.",
+        sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo03.mp3') : null,
+        img: '#rep'
+      },
+      {
+        text: "Sabemos que la ingesta dietética recomendada de hierro durante el embarazo es de 27 mg al día.",
+        sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo04.mp3') : null,
+        img: '#rep'
+      },
+      {
+        text: "En una paciente sin deficiencia previa, una dieta promedio suele aportar entre 12 y 15 mg diarios.",
+        sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo05.mp3') : null,
+        img: '#rep'
+      },
+      {
+        text: "Por eso, al aportar 14 mg de hierro bisglicinato, Ogestan Plus permite alcanzar un total cercano a los 27-30 mg diarios, que es justamente el rango fisiológico recomendado para acompañar el embarazo de forma preventiva. Además, no se trata solo de la cantidad, sino de la forma química. ",
+        sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo06.mp3') : null,
+        img: '#rep'
+      },
+      {
+        text: "El hierro bisglicinato tiene una biodisponibilidad superior y una tolerancia digestiva considerablemente mejor que otras sales tradicionales, lo que favorece el apego al tratamiento por parte de las pacientes. Con Ogestan Plus estará seguro y con la tranquilidad de que sus pacientes no cursarán con síntomas gastrointestinales molestos como náusea, diarrea o estreñimiento, por mencionar algunos.",
+        sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo07.mp3') : null,
+        img: '#rep'
+      }
+      ,
+      {
+        text: "Entonces, más que pensar en 'poca cantidad', la pregunta sería: ¿es la dosis fisiológicamente suficiente, bien tolerada y sostenible durante todo el embarazo? Ogestan Plus está diseñado para ofrecer justo ese equilibrio entre eficacia preventiva, biodisponibilidad y adherencia. Interesante, ¿no le parece, doctor?",
+        sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo08.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>

OgestanPlus/index.html

@@ -1,160 +1,212 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="es">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
-    <meta name="theme-color" content="#FFA300" />
-    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-    <link rel="icon" href="img/favicon.ico" />
-    <title></title>
-    <link rel="stylesheet" href="css/all.css" />
-    <link rel="stylesheet" href="css/animate.css" />
-    <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="css/theme.min.css" />
-    <link rel="stylesheet" href="css/sal.css">
-    <link rel="stylesheet" href="css/style.min.css" />
-  </head>
-  <body>
-    <!-- HEADER -->
-    <header>
-      <nav class="navbar navbar-light  sticky-top shadow-sm py-0 bg-variacolor" id="coursenav-navbar">
-        <div class="container-fluid d-flex flex-wrap flex-md-row align-items-center ps-0 pe-3 gap-2 gap-md-1">
-          <!-- Logo -->
-          <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 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">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+        <meta name="theme-color" content="#FFA300" />
+        <meta name="mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+        <link rel="icon" href="img/favicon.ico" />
+        <title></title>
+        <link rel="stylesheet" href="css/all.css" />
+        <link rel="stylesheet" href="css/animate.css" />
+        <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="css/theme.min.css" />
+        <link rel="stylesheet" href="css/sal.css" />
+        <link rel="stylesheet" href="css/style.min.css" />
+    </head>
+    <body>
+        <!-- HEADER -->
+        <header>
+            <nav class="navbar navbar-light sticky-top shadow-sm py-0 bg-variacolor" id="coursenav-navbar">
+                <div class="container-fluid d-flex flex-wrap flex-md-row align-items-center ps-0 pe-3 gap-2 gap-md-1">
+                    <!-- Logo -->
+                    <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 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>
             </button> -->
-            <!-- Audio Control -->
-            <button id="coursenav-audio-control" class="btn controls-btn me-2" aria-label="Toggle audio">
-              <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" />
-                </svg>
-                <i id="coursenav-audio-icon" class="fa-duotone fa-solid fa-volume"></i>
-              </div>
-            </button>
-            <!-- Offcanvas Toggle -->
-            <button
-              class="btn controls-btn"
-              id="menu-toggle"
-              type="button"
-              data-bs-toggle="offcanvas"
-              data-bs-target="#coursenav-offcanvas"
-              aria-controls="coursenav-offcanvas"
-              aria-label="Open navigation"
-            >
-              <i class="fa-duotone fa-solid fa-bars-staggered fa-lg"></i>
-            </button>
-          </div>
-        </div>
-      </nav>
-    </header>
+                        <!-- Audio Control -->
+                        <button id="coursenav-audio-control" class="btn controls-btn me-2" aria-label="Toggle audio">
+                            <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"
+                                    />
+                                </svg>
+                                <i id="coursenav-audio-icon" class="fa-duotone fa-solid fa-volume"></i>
+                            </div>
+                        </button>
+                        <!-- Offcanvas Toggle -->
+                        <button
+                            class="btn controls-btn"
+                            id="menu-toggle"
+                            type="button"
+                            data-bs-toggle="offcanvas"
+                            data-bs-target="#coursenav-offcanvas"
+                            aria-controls="coursenav-offcanvas"
+                            aria-label="Open navigation"
+                        >
+                            <i class="fa-duotone fa-solid fa-bars-staggered fa-lg"></i>
+                        </button>
+                    </div>
+                </div>
+            </nav>
+        </header>
 
-    <!-- OFFCANVAS DESDE DERECHA -->
-    <div class="offcanvas offcanvas-end bg-secondary 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>
-      </div>
-      <div class="offcanvas-body d-flex flex-column p-0">
-        <!-- Menú principal -->
-        <nav id="coursenav-main-menu" class="course-menu flex-grow-1 overflow-auto px-3 text-dark">
-          <!-- buildMenu() inyecta aquí -->
-        </nav>
-        <!-- Progreso -->
-        <div class="w-100 px-3 pb-3" id="wrap-progress-course">
-          <span class="small">Progreso</span>
-          <div class="progress" style="height: 20px">
-            <div
-              id="coursenav-progress-bar"
-              class="progress-bar progress-bar-striped progress-bar-animated bg-success"
-              role="progressbar"
-              style="width: 0%"
-              aria-valuenow="0"
-              aria-valuemin="0"
-              aria-valuemax="100"
-            >
-              0%
+        <!-- OFFCANVAS DESDE DERECHA -->
+        <div
+            class="offcanvas offcanvas-end bg-secondary 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>
+            </div>
+            <div class="offcanvas-body d-flex flex-column p-0">
+                <!-- Menú principal -->
+                <nav id="coursenav-main-menu" class="course-menu flex-grow-1 overflow-auto px-3 text-dark">
+                    <!-- buildMenu() inyecta aquí -->
+                </nav>
+                <!-- Progreso -->
+                <div class="w-100 px-3 pb-3" id="wrap-progress-course">
+                    <span class="small">Progreso</span>
+                    <div class="progress" style="height: 20px">
+                        <div
+                            id="coursenav-progress-bar"
+                            class="progress-bar progress-bar-striped progress-bar-animated bg-success"
+                            role="progressbar"
+                            style="width: 0%"
+                            aria-valuenow="0"
+                            aria-valuemin="0"
+                            aria-valuemax="100"
+                        >
+                            0%
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
         </div>
-      </div>
-    </div>
 
-    <!-- CONTENIDO DINÁMICO -->
-    <main id="coursenav-main-content"></main>
+        <!-- CONTENIDO DINÁMICO -->
+        <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(24, 53, 104, .7);">
-      <div class="aviso-privacidad flex-fill flex-md-none order-2 order-md-1">
-        <p class="mb-0 small text-white 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">
-        <button id="coursenav-prev-btn" class="coursenav-btn-navigation bg-orange-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-secondary text-white" data-bs-toggle="tooltip"
-          title="Siguiente">
-          <i class="fa-solid fa-arrow-down fa-rotate-270"></i>
-        </button>
-      </div>
-    </footer>
+        <!-- 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(24, 53, 104, 0.7)"
+        >
+            <div class="aviso-privacidad flex-fill flex-md-none order-2 order-md-1">
+                <p class="mb-0 small text-white 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"
+            >
+                <button
+                    id="coursenav-prev-btn"
+                    class="coursenav-btn-navigation bg-orange-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-secondary text-white"
+                    data-bs-toggle="tooltip"
+                    title="Siguiente"
+                >
+                    <i class="fa-solid fa-arrow-down fa-rotate-270"></i>
+                </button>
+            </div>
+        </footer>
 
-    <!-- LOADER -->
-    <div id="coursenav-loader-course" class="position-absolute top-0 start-0 w-100 h-100">
-      <div class="d-flex justify-content-center align-items-center h-100 text-primary">
-        <i class="fa-duotone fa-solid fa-spinner-third fa-spin fa-2xl"></i>
-      </div>
-    </div>
-
-    <!-- Offcanvas: inicialmente vacío -->
-    <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%;">
-          OGestan<sup>®</sup> Plus
-        </h1>
-        <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 -->
-        <div class="text-center py-5">
-          <div class="spinner-border text-primary" role="status">
-            <span class="visually-hidden">Cargando...</span>
-          </div>
+        <!-- LOADER -->
+        <div id="coursenav-loader-course" class="position-absolute top-0 start-0 w-100 h-100">
+            <div class="d-flex justify-content-center align-items-center h-100 text-primary">
+                <i class="fa-duotone fa-solid fa-spinner-third fa-spin fa-2xl"></i>
+            </div>
         </div>
-      </div>
-    </div>
 
-    <!-- SCRIPTS -->
-    <script src="js/jquery-3.7.1.min.js"></script>
-    <script src="js/swiper-bundle.min.js"></script>
-    <script src="js/bootstrap.bundle.min.js"></script>
-    <script src="js/howler.min.js"></script>
-    <script src="js/sweetalert2.min.js"></script>
-    <script src="js/SCORM_API_wrapper.js"></script>
-    <script src="js/gsap.min.js"></script>
-    <script src="js/driver.js.iife.js"></script>
-    <script src="js/jquery-ui.min.js"></script>
-    <script src="js/jquery.ui.touch-punch.min.js"></script>
-    <script src="js/jquery.flip.min.js"></script>
-    <script src="js/xlsx.full.min.js"></script>
-    <script src="js/sal.js"></script>
-    <!-- Configuración del curso -->
-    <script src="js/config.min.js" defer></script>
-    <!-- librería principal -->
-    <script src="js/coursenav.min.js" defer></script>
-  </body>
+        <!-- Offcanvas: inicialmente vacío -->
+        <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%"
+                >
+                    OGestan<sup>®</sup> Plus
+                </h1>
+                <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 -->
+                <div class="text-center py-5">
+                    <div class="spinner-border text-primary" role="status">
+                        <span class="visually-hidden">Cargando...</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- SCRIPTS -->
+        <script src="js/jquery-3.7.1.min.js"></script>
+        <script src="js/swiper-bundle.min.js"></script>
+        <script src="js/bootstrap.bundle.min.js"></script>
+        <script src="js/howler.min.js"></script>
+        <script src="js/sweetalert2.min.js"></script>
+        <script src="js/SCORM_API_wrapper.js"></script>
+        <script src="js/gsap.min.js"></script>
+        <script src="js/driver.js.iife.js"></script>
+        <script src="js/jquery-ui.min.js"></script>
+        <script src="js/jquery.ui.touch-punch.min.js"></script>
+        <script src="js/jquery.flip.min.js"></script>
+        <script src="js/xlsx.full.min.js"></script>
+        <script src="js/sal.js"></script>
+        <!-- Configuración del curso -->
+        <script src="js/config.min.js" defer></script>
+        <!-- librería principal -->
+        <script src="js/coursenav.min.js" defer></script>
+    </body>
 </html>