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="mb-0">
+                          <ul class="li-sp 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 class="mb-0"><em>local = SEGURIDAD</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>
             </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">
-        <button id="coursenav-prev-btn" class="coursenav-btn-navigation bg-green-1 text-white" data-bs-toggle="tooltip"
-          title="Anterior">
+            <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-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"
-          title="Siguiente">
+                <button
+                    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 -->

OgestanPlus/OgestanPlus.code-workspace

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

OgestanPlus/config.json

@@ -30,6 +30,10 @@
                 },
                 {
                     "title": "Manejo de Objeciones",
+                    "content": "contenido/mo.html"
+                },
+                {
+                    "title": "Actividad de aprendizaje",
                     "content": "contenido/07.html"
                 },
                 {

OgestanPlus/contenido/05.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/OGestanPlus.mp4" type="video/mp4" />
                   Your browser does not support the video tag.
                 </video>
                 <div class="play-button-container">

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,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-secondary text-white" tabindex="-1" id="coursenav-offcanvas" aria-labelledby="coursenav-offcanvas-label">
+        <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>
+                <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(24, 53, 104, .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(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>
+                <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">
+            <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">
+                <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>
@@ -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 -->

OgestanPre/LICENSE

@@ -0,0 +1,23 @@
+Copyright <yyyy, yyyy> The Open Group
+
+Permission to use, copy, modify, distribute, and sell this software and
+its documentation for any purpose is hereby granted without fee,
+provided that the above copyright notice appear in all copies and that
+both that copyright notice and this permission notice appear in
+supporting documentation.
+
+The above copyright notice and this permission notice shall be included
+in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL BE LIABLE FOR ANY CLAIM, DAMAGES
+OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR
+THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Except as contained in this notice, the name of The Open Group
+shall not be used in advertising or otherwise to promote the sale, use
+or other dealings in this Software without prior written authorization
+from The Open Group.

OgestanPre/OgestanPre.code-workspace

@@ -0,0 +1,10 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+    ],
+		"settings": {
+			"liveServer.settings.port": 5501
+		}
+}

OgestanPre/adlcp_rootv1p2.xsd

@@ -0,0 +1,109 @@
+<?xml version="1.0"?>
+<!-- filename=adlcp_rootv1p2.xsd -->
+<!-- Conforms to w3c http://www.w3.org/TR/xmlschema-1/ 2000-10-24-->
+
+<xsd:schema xmlns="http://www.adlnet.org/xsd/adlcp_rootv1p2"
+            targetNamespace="http://www.adlnet.org/xsd/adlcp_rootv1p2"
+            xmlns:xml="http://www.w3.org/XML/1998/namespace"
+            xmlns:imscp="http://www.imsproject.org/xsd/imscp_rootv1p1p2"
+            xmlns:xsd="http://www.w3.org/2001/XMLSchema"
+            elementFormDefault="unqualified"
+            version="ADL Version 1.2">
+
+        <xsd:import namespace="http://www.imsproject.org/xsd/imscp_rootv1p1p2" schemaLocation="imscp_rootv1p1p2.xsd"/>
+
+        <xsd:element name="location" type="locationType"/>
+        <xsd:element name="prerequisites" type="prerequisitesType"/>
+        <xsd:element name="maxtimeallowed" type="maxtimeallowedType"/>
+        <xsd:element name="timelimitaction" type="timelimitactionType"/>
+        <xsd:element name="datafromlms" type="datafromlmsType"/>
+        <xsd:element name="masteryscore" type="masteryscoreType"/>
+
+
+        <xsd:element name="schema" type="newSchemaType"/>
+        <xsd:simpleType name="newSchemaType">
+                <xsd:restriction base="imscp:schemaType">
+                        <xsd:enumeration value="ADL SCORM"/>
+                </xsd:restriction>
+        </xsd:simpleType>
+
+        <xsd:element name="schemaversion" type="newSchemaversionType"/>
+        <xsd:simpleType name="newSchemaversionType">
+                <xsd:restriction base="imscp:schemaversionType">
+                        <xsd:enumeration value="1.2"/>
+                </xsd:restriction>
+        </xsd:simpleType>
+
+
+        <xsd:attribute name="scormtype">
+            <xsd:simpleType>
+                <xsd:restriction base="xsd:string">
+                   <xsd:enumeration value="asset"/>
+                   <xsd:enumeration value="sco"/>
+                </xsd:restriction>
+            </xsd:simpleType>
+        </xsd:attribute>
+
+        <xsd:simpleType name="locationType">
+                <xsd:restriction base="xsd:string">
+                        <xsd:maxLength value="2000"/>
+                </xsd:restriction>
+        </xsd:simpleType>
+
+
+        <xsd:complexType name="prerequisitesType">
+           <xsd:simpleContent>
+              <xsd:extension base="prerequisiteStringType">
+                  <xsd:attributeGroup ref="attr.prerequisitetype"/>
+              </xsd:extension>
+           </xsd:simpleContent>
+        </xsd:complexType>
+
+        <xsd:attributeGroup name="attr.prerequisitetype">
+                <xsd:attribute name="type" use="required">
+                        <xsd:simpleType>
+                                <xsd:restriction base="xsd:string">
+                                   <xsd:enumeration value="aicc_script"/>
+                                </xsd:restriction>
+                        </xsd:simpleType>
+                </xsd:attribute>
+        </xsd:attributeGroup>
+
+        <xsd:simpleType name="maxtimeallowedType">
+                <xsd:restriction base="xsd:string">
+                        <xsd:maxLength value="13"/>
+                </xsd:restriction>
+        </xsd:simpleType>
+
+        <xsd:simpleType name="timelimitactionType">
+                <xsd:restriction base="stringType">
+                        <xsd:enumeration value="exit,no message"/>
+                        <xsd:enumeration value="exit,message"/>
+                        <xsd:enumeration value="continue,no message"/>
+                        <xsd:enumeration value="continue,message"/>
+                </xsd:restriction>
+        </xsd:simpleType>
+
+        <xsd:simpleType name="datafromlmsType">
+                <xsd:restriction base="xsd:string">
+                        <xsd:maxLength value="255"/>
+                </xsd:restriction>
+        </xsd:simpleType>
+
+        <xsd:simpleType name="masteryscoreType">
+                <xsd:restriction base="xsd:string">
+                        <xsd:maxLength value="200"/>
+                </xsd:restriction>
+        </xsd:simpleType>
+
+        <xsd:simpleType name="stringType">
+                <xsd:restriction base="xsd:string"/>
+        </xsd:simpleType>
+        
+        <xsd:simpleType name="prerequisiteStringType">
+                <xsd:restriction base="xsd:string">
+                   <xsd:maxLength value="200"/>
+                </xsd:restriction>
+        </xsd:simpleType>
+
+</xsd:schema>