update

OgestanPlus/config.json

@@ -1,80 +1,40 @@
 {
-  "title": "Orientación al Cliente y Empatía",
+  "title": "OGestan® Plus",
   "modules": [
     {
       "title": "Contenido",
       "topics": [
         {
-          "title": "Portada",
+          "title": "Bienvenida y Objetivo General",
           "content": "contenido/01.html"
         },
         {
-          "title": "Introducción",
+          "title": "La familia OGestan",
           "content": "contenido/02.html"
         },
         {
-          "title": "Caso inicial",
+          "title": "¿Qué es OGestan<sup>®</sup> Plus?",
           "content": "contenido/03.html"
         },
         {
-          "title": "Orientación al Cliente y la importancia de la empatía",
+          "title": "Beneficios",
           "content": "contenido/04.html"
         },
         {
-          "title": "Orientación al Cliente y la importancia de la empatía",
+          "title": "Información Nutricional",
           "content": "contenido/05.html"
         },
         {
-          "title": "Orientación al Cliente y la importancia de la empatía",
+          "title": "Competencia",
           "content": "contenido/06.html"
         },
         {
-          "title": "Creación de experiencias memorables",
+          "title": "Manejo de Objeciones",
           "content": "contenido/07.html"
         },
-        {
-          "title": "Creación de experiencias memorables",
-          "content": "contenido/08.html"
-        },
-        {
-          "title": "Gestión de quejas y resolución de problemas",
-          "content": "contenido/09.html"
-        },
-        {
-          "title": "Gestión de quejas y resolución de problemas",
-          "content": "contenido/10.html"
-        },
-        {
-          "title": "Gestión de quejas y resolución de problemas",
-          "content": "contenido/11.html"
-        },
-        {
-          "title": "Fortaleciendo la empatía en la práctica",
-          "content": "contenido/12.html"
-        },
-        {
-          "title": "Fortaleciendo la empatía en la práctica",
-          "content": "contenido/13.html"
-        },
-        {
-          "title": "Tu compromiso como profesional",
-          "content": "contenido/14.html"
-        },
-        {
-          "title": "Caso final",
-          "content": "contenido/15.html"
-        },
-        {
-          "title": "Infografía",
-          "content": "contenido/16.html"
-        },
-        {
-          "title": "Dos maneras de atender… ¿Cuál elegirías tú?",
-          "content": "contenido/17.html"
-        },
         {
           "title": "Cierre",
-          "content": "contenido/18.html"
+          "content": "contenido/08.html"
         }
       ]
     }

OgestanPlus/contenido/01.html

@@ -1,31 +1,80 @@
 <style>
   .back0 {
-    background-image: url("img/bg00.jpg");
+    background-image: url(img/bg00s.jpg);
     background-size: cover;
-    background-position: center;
+    background-position: top center;
     background-repeat: no-repeat;
   }
+
+  .back1 {
+    background-image: url(img/bg01.jpg);
+    background-size: cover;
+    background-position: 100% 100%;
+    background-repeat: no-repeat;
+  }
+
+  @media(min-width: 991px) {
+    .back0 {
+      background-image: url(img/bg00.jpg);
+      background-position: center center;
+    }
+  }
 </style>
-<div class="page-sco back0">
+<div class="page-sco back0 py-2 py-md-4">
   <div class="container">
     <div class="row justify-content-center align-items-center">
       <div class="col-12">
-        <div class="row justify-content-center align-items-center">
-          <div class="col-7 col-md-5 text-center mb-3">
-            <img src="img/01.0.png" class="img-fluid floating" />
+        <div class="row">
+          <div class="col-12 col-lg-7">
+            <div class="row justify-content-center">
+              <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> OGestan<sup>®</sup> Plus!</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="w-100 position-relative">
+                  <div id="wrap-comenzar"
+                    data-sec="sec1"
+                    class="btn btn-begin text-white fw-bold animate__animated animate__pulse animate__infinite py-1">
+                    Comenzar
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
-          <div class="col-12 col-md-7 mb-3 text-center">
-            <h3 class="amor text-gris-1 fw-light">Bienvenido al curso:</h3>
-            <div class="position-relative w-100 text-center mb-2">
-              <h1 class="amor fw-bold text-rosa-claro mb-0">Orientación al Cliente</h1>
-              <img src="img/adorno1.png" class="img-fluid">
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div id="sec1" class="page-sco back1 py-3 py-md-4" style="display: none;">
+  <div class="container">
+    <div class="row justify-content-center align-items-center">
+      <div class="col-12">
+        <div class="row justify-content-center">
+          <div class="col-12 col-md-10 col-lg-9 mb-3" data-sal="slide-right">
+            <div class="card bg-var-2 border-0 rounded-3 shadow-none px-3 py-2 text-blue-1">
+              <p>Gracias por iniciar este módulo. Aquí conocerás los puntos clave de <strong>OGestan<sup>®</sup> Plus</strong>, el
+                suplemento más completo para apoyar la etapa de <strong>fertilidad, embarazo y lactancia</strong>.</p>
             </div>
-            <div class="position-relative w-100 mb-4">
-              <h1 class="text-primary amor">y Empatía</h1>
-            </div>
-            <div class="w-100 position-relative">
-              <div id="wrap-comenzar" class="btn btn-begin animate__animated animate__pulse animate__infinite py-2">
-                Comenzar
+          </div>
+          <div class="col-12 apa0" style="display: none;">
+            <div class="row justify-content-center align-items-center">
+              <div class="col-7 col-md-5 col-xl-4 text-center order-2 order-md-1" data-sal="zoom-in">
+                <img src="img/01.0.png" class="img-fluid">
+              </div>
+              <div class="col-12 col-md-7 col-xl-5 order-1 order-md-2 mb-3 mb-md-0" data-sal="flip-left">
+                <h2 class="text-secondary fw-medium">¿Qué aprenderás hoy?</h2>
+                <p class="animate__animated animate__zoomIn animate__delay-2s">Al terminar este módulo podrás:</p>
+                <ul class="mb-0 bul0">
+                  <li class="animate__animated animate__fadeInUp animate__delay-4s">Comunicar qué es OGestan<sup>®</sup> Plus.</li>
+                  <li class="animate__animated animate__fadeInUp animate__delay-7s">Describir sus beneficios más importantes.</li>
+                  <li class="animate__animated animate__fadeInUp animate__delay-10s">Identificar lo que lo hace único en el mercado.</li>
+                  <li class="animate__animated animate__fadeInUp animate__delay-13s">Responder objeciones comunes de médicos.</li>
+                </ul>
               </div>
             </div>
           </div>
@@ -38,6 +87,18 @@
   $(function () {
     "use strict";
 
+    const audiom00 = CourseNav.createSound('audio/audiom00.mp3');
+    const audiom01 = CourseNav.createSound('audio/audiom01.mp3');
+
+    audiom00.on('end',function(){
+      CourseNav.audioController.stopAllSoundsAndPlay(audiom01);
+      $('.apa0').show();
+    });
+
+    audiom01.on('end',function(){
+      CourseNav.setSlideVisited();
+    });
+
     if (!CourseNav.isVisited() || CourseNav.isDebug()) {
       tour();
     } else {
@@ -46,9 +107,16 @@
 
     function showIntro() {
       $("#wrap-comenzar").removeClass("disabled");
-      $('.personaje').addClass('animate__animated animate__pulse');
     }
 
+    $("#wrap-comenzar").click(function (e) {
+      e.preventDefault();
+      CourseNav.soundClick();
+      gotoSection($(this).data('sec'));
+      CourseNav.audioController.stopAllSoundsAndPlay(audiom00);
+      $(this).removeClass('animate__animated animate__pulse animate__infinite');
+    });
+
 
     /**
      * Inicia un tour interactivo que guía al usuario a través de las funcionalidades del curso.

OgestanPlus/contenido/02.html

@@ -0,0 +1,260 @@
+<style>
+  .back0 {
+    background-image: url(img/bg02.jpg);
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+
+  .shadow-externo {
+    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
+  }
+
+  .gradient-card {
+    background: #C1C902;
+    background: linear-gradient(to right, #C1C902 0%, #006EAB 100%);
+  }
+
+  .cid0 .swiper-wrapper {
+    box-sizing: border-box;
+  }
+
+  .btn-circ {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 100%;
+    background: #F2F2F2;
+    background: linear-gradient(to bottom, #F2F2F2 11%, #BDCCD4 100%);
+    outline: 8px solid rgba(14, 28, 98, .3);
+    cursor: pointer;
+  }
+
+  .circ_interno {
+    width: 34px;
+    height: 34px;
+    border-radius: 100%;
+    background: #dcdcdc;
+  }
+
+  .btn-circ:hover .circ_interno {
+    background: #DD3352;
+    background: linear-gradient(to top, #DD3352 11%, #FEA968 100%);
+  }
+
+  .btn-circ.selected .circ_interno {
+    background: #DD3352;
+    background: linear-gradient(to top, #DD3352 11%, #FEA968 100%);
+  }
+
+  .custom-grid {
+    position: relative;
+    display: grid;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    gap: 20px;
+  }
+
+  .anim0 {
+    display: none;
+  }
+
+  @media(min-width: 768px) {
+    .text-t {
+      max-width: 25%;
+      margin-right: 3%;
+    }
+
+    .text-t1 {
+      flex: 1;
+    }
+
+    .custom-flx {
+      max-width: 70%;
+    }
+
+    .text-2 {
+      flex: 1;
+      max-width: 70%;
+      text-align: center;
+    }
+  }
+</style>
+<div class='page-sco back0 py-3 py-md-4'>
+  <div class='container'>
+    <div class='row justify-content-center align-items-center'>
+      <div class='col-12'>
+        <div class='row justify-content-center'>
+          <div class="col-12 mb-3 text-center anim0 animate__animated animate__lightSpeedInLeft">
+            <h2 class="text-primary fw-bold">La familia OGestan<sup>®</sup>: lo esencial para el proceso de fertilidad, embarazo y lactancia</h2>
+          </div>
+          <div class="col-12 col-lg-10 apa0 animate__animated animate__zoomIn" style="display: none;">
+            <div class="shadow-externo rounded-3">
+              <div class="swiper cid0">
+                <div class="swiper-wrapper">
+                  <div class="swiper-slide">
+                    <div class="card gradient-card border-0 rounded-3 shadow-none p-2">
+                      <div class="card-body bg-white border-0 rounded-3 shadow-none px-3 pt-3 pb-0">
+                        <div class="row justify-content-center align-items-center">
+                          <div class="col-6 col-md-4 text-center order-2 order-md-1">
+                            <img src="img/02.0.png" class="img-fluid">
+                          </div>
+                          <div class="col-12 col-md-8 order-1 order-md-2 mb-3 mb-md-0">
+                            <div class="row justify-content-center">
+                              <div class="col-12 mb-3">
+                                <p class="mb-0">OGestan<sup>®</sup> acompaña a la mujer —y también al hombre— durante todo el proceso reproductivo:</p>
+                              </div>
+                              <div class="col-8 col-md-7 col-lg-12 text-center mb-3">
+                                <img src="img/02.1.png" class="img-fluid">
+                              </div>
+                              <div class="col-12 text-center">
+                                <p class="mb-0">Preconcepción y 1er trimestre de embarazo.</p>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="swiper-slide">
+                    <div class="card gradient-card border-0 rounded-3 shadow-none p-2">
+                      <div class="card-body bg-white border-0 rounded-3 shadow-none px-3 pt-3 pb-0">
+                        <div class="row justify-content-center align-items-center">
+                          <div class="col-6 col-md-4 text-center order-2 order-md-1">
+                            <img src="img/02.2.png" class="img-fluid">
+                          </div>
+                          <div class="col-12 col-md-8 order-1 order-md-2 mb-3 mb-md-0">
+                            <div class="row justify-content-center">
+                              <div class="col-8 col-md-7 col-lg-12 text-center mb-3">
+                                <img src="img/02.3.png" class="img-fluid">
+                              </div>
+                              <div class="col-12 text-center">
+                                <p class="mb-0">2do trimestre, 3er trimestre y lactancia (hasta los 6 meses de lactancia).</p>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="swiper-slide">
+                    <div class="card gradient-card border-0 rounded-3 shadow-none p-2">
+                      <div class="card-body bg-white border-0 rounded-3 shadow-none px-3 py-3">
+                        <div class="row justify-content-center align-items-center">
+                          <div class="col-12">
+                            <div class="custom-grid">
+                              <div class="d-flex flex-wrap justify-content-center align-items-center gap-2">
+                                <div class="text-t">
+                                  <p class="mb-0 fw-bold text-pink">Fertilidad Femenina</p>
+                                </div>
+                                <div class="d-flex custom-flx flex-fill gap-2 justify-content-center text-center">
+                                  <div class="text-t1">
+                                    <p>1er trimestre de <br> embarazo</p>
+                                    <img src="img/02.1.png" class="img-fluid">
+                                  </div>
+                                  <div class="text-t1">
+                                    <p>2do trimestre de <br> embarazo hasta lactancia</p>
+                                    <img src="img/02.3.png" class="img-fluid">
+                                  </div>
+                                </div>
+                              </div>
+                              <div class="position-relative w-100">
+                                <img src="img/02.4" class="img-fluid">
+                              </div>
+                              <div class="d-flex flex-wrap justify-content-center align-items-center gap-2">
+                                <div class="text-t">
+                                  <p class="mb-0 fw-bold text-pink">Fertilidad masculina</p>
+                                </div>
+                                <div class="text-2 d-flex justify-content-center">
+                                  <div class="col-7 col-md-6 col-lg-8 text-center">
+                                    <img src="img/02.5.png" class="img-fluid">
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="position-relative w-100 mt-3">
+              <div class="d-flex justify-content-center align-items-center gap-4">
+                <div class="btn-circ animate__animated animate__pulse animate__infinite" data-slide="0">
+                  <div class="circ_interno"></div>
+                </div>
+                <div class="btn-circ animate__animated animate__pulse animate__infinite" data-slide="1">
+                  <div class="circ_interno"></div>
+                </div>
+                <div class="btn-circ animate__animated animate__pulse animate__infinite" data-slide="2">
+                  <div class="circ_interno"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  $(function () {
+    "use strict";
+    $('body').addClass('fake');
+
+    const audiom02a = CourseNav.createSound('audio/audiom02a.mp3');
+
+    CourseNav.audioController.stopAllSoundsAndPlay(audiom02a);
+
+    audiom02a.on('play', function () {
+      $('.anim0').show();
+    });
+
+    audiom02a.on('end',function(){
+      $('.apa0').show();
+      $('.btn-circ').first().click();
+    });
+
+    const paths = [
+      "audio/audiom02b.mp3",
+      "audio/audiom03.mp3",
+      "audio/audiom04.mp3"
+    ];
+    let audios = [];
+    paths.forEach(function (element) {
+      audios.push(CourseNav.createSound(element));
+    });
+
+    const mySwiper = new Swiper(".cid0", {
+      effect: "slide",
+      autoHeight: true,
+      slidesPerView: 1,
+      spaceBetween: 10
+    });
+
+    $('.btn-circ').click(function(){
+      CourseNav.soundClick();
+      const slideIndex = $(this).data('slide');
+      mySwiper.slideTo(slideIndex);
+      $(this).removeClass('animate__animated animate__pulse animate__infinite');
+      $('.btn-circ').removeClass('selected');
+      $(this).addClass('selected completed');
+
+      if($('.btn-circ.completed').length === $('.btn-circ').length){
+        CourseNav.setSlideVisited();
+      }
+
+      if(audios[slideIndex]){
+        CourseNav.audioController.stopAllSoundsAndPlay(audios[slideIndex]);
+      }
+    });
+  });
+</script>

OgestanPlus/contenido/03.html

@@ -0,0 +1,110 @@
+<style>
+  .back0 {
+    background-image: url(img/bg03.jpg);
+    background-size: cover;
+    background-position: 12% 100%;
+    background-repeat: no-repeat;
+  }
+
+  .back1 {
+    background-image: url(img/bg04.jpg);
+    background-size: cover;
+    background-position: 12% 100%;
+    background-repeat: no-repeat;
+  }
+
+  .text-card {
+    background-color: rgba(255, 255, 255, .7);
+    border-radius: 15px;
+    box-shadow: 0 0 8px rgba(0, 0, 0, .5);
+  }
+
+  .anim0 {
+    display: none;
+  }
+
+  @media(min-width: 768px) {
+    .back0 {
+      background-position: 28% 100%;
+    }
+
+    .text-card {
+      background-color: transparent;
+      border-radius: 0;
+      box-shadow: none;
+    }
+  }
+</style>
+<div class='page-sco'>
+  <div class="sec_i0 back0 py-2 py-md-4 flex-fill d-flex flex-column justify-content-center align-items-center">
+    <div class='container'>
+      <div class='row justify-content-center align-items-center'>
+        <div class='col-12'>
+          <div class='row justify-content-center justify-content-md-end mb-3'>
+            <div class="col-12 col-md-7 col-lg-6 text-center anim0" data-sal="slide-down">
+              <div class="d-inline-block position-relative">
+                <hr class="m-0 mb-2 opacity-100 border-top-2 text-white">
+                <div class="text-card p-2 p-md-0">
+                  <h2 class="text-primary fw-bold">¿Qué es OGestan<sup>®</sup> Plus?</h2>
+                  <p class="mb-0"><strong>OGestan<sup class="fw-bolder">®</sup> Plus</strong> es un suplemento alimenticio
+                    en cápsulas, con aceite de pescado vitaminas y minerales. Forma parte de la
+                    línea OGestan<sup>®</sup>, enfocada en acompañar a la madre y al bebé en su desarrollo.</p>
+                </div>
+                <hr class="m-0 mt-2 opacity-100 border-top-2 text-white">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="sec_i1 py-2 py-md-4" style="display: none;">
+    <div class="container">
+      <div class="row justify-content-center">
+        <div class="col-12">
+          <div class="row justify-content-center">
+            <div class="col-12 text-center">
+              <div class="btn-next-section d-inline-block animate__animated animate__pulse animate__infinite" data-sec="sec1">
+                <img src="img/nSec.png" class="img-fluid">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div id="sec1" class='page-sco py-2 py-md-4 back1'>
+  <div class="container">
+    <div class="row justify-content-center align-items-center">
+      <div class="col-12">
+        <div class="row justify-content-center"></div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  $(function () {
+    "use strict";
+    $('body').addClass('fake');
+    const audiom05 = CourseNav.createSound('audio/audiom05.mp3');
+
+    CourseNav.audioController.stopAllSoundsAndPlay(audiom05);
+
+    audiom05.on('play',function(){
+      $('.anim0').show();
+    });
+
+    audiom05.on('end',function(){
+      $('.sec_i1').show();
+      CourseNav.setSlideVisited();
+    });
+
+    $('.btn-next-section').click(function(){
+      CourseNav.soundClick();
+      $(this).removeClass('animate__animated animate__pulse animate__infinite');
+      gotoSection($(this).data('sec'));
+    });
+
+  });
+</script>

OgestanPlus/css/style.scss

@@ -262,12 +262,11 @@ h4,
 
 // Estilos para .page-sco - sticky fullpage effect
 .page-sco {
-  height: 100%;
+  min-height: 100%;
   position: sticky;
   top: 0;
   display: flex;
   flex-direction: column;
-  overflow-y: auto;
   overflow-x: hidden;
   width: 100%;
   box-sizing: border-box;
@@ -359,6 +358,7 @@ h4,
 .btn-begin {
   background: #dd3352;
   background: linear-gradient(to right, #dd3352 0%, #fe8a29 100%);
+  border-radius: 20px;
 }
 
 .btn-begin:hover {
@@ -614,3 +614,24 @@ h4,
   background: #006eab;
   background: linear-gradient(to right, #006eab 12%, #d4384f 100%);
 }
+
+.border-top-2 {
+  border-top: 3px solid;
+}
+
+ul > li {
+  margin-bottom: 0.5rem;
+}
+
+ul > li:last-child {
+  margin-bottom: 0;
+}
+
+ul.bul0 {
+  list-style-type: none;
+  list-style-image: url(../img/bul0.png);
+}
+
+.btn-next-section {
+  cursor: pointer;
+}

OgestanPlus/css/stylee.css

@@ -263,12 +263,11 @@ h4,
 }
 
 .page-sco {
-  height: 100%;
+  min-height: 100%;
   position: sticky;
   top: 0;
   display: flex;
   flex-direction: column;
-  overflow-y: auto;
   overflow-x: hidden;
   width: 100%;
   box-sizing: border-box;
@@ -358,6 +357,7 @@ h4,
 .btn-begin {
   background: #dd3352;
   background: linear-gradient(to right, #dd3352 0%, #fe8a29 100%);
+  border-radius: 20px;
 }
 
 .btn-begin:hover {
@@ -726,4 +726,25 @@ h4,
 .bg-variacolor {
   background: #006eab;
   background: linear-gradient(to right, #006eab 12%, #d4384f 100%);
+}
+
+.border-top-2 {
+  border-top: 3px solid;
+}
+
+ul > li {
+  margin-bottom: 0.5rem;
+}
+
+ul > li:last-child {
+  margin-bottom: 0;
+}
+
+ul.bul0 {
+  list-style-type: none;
+  list-style-image: url(../img/bul0.png);
+}
+
+.btn-next-section {
+  cursor: pointer;
 }

OgestanPlus/css/theme.scss

@@ -11,6 +11,7 @@ $custom-colors: (
   'blue-3': #2b72de,
   'var-1': #dcdcdc,
   'var-2': #ccdce2,
+  'var-3': #f8f8f8,
   'green-1': #00928e,
   'green-2': #c1c902,
   'orange-1': #fea968,

OgestanPlus/css/themee.css

@@ -71,6 +71,7 @@
   --bs-blue-3: #2b72de;
   --bs-var-1: #dcdcdc;
   --bs-var-2: #ccdce2;
+  --bs-var-3: #f8f8f8;
   --bs-green-1: #00928e;
   --bs-green-2: #c1c902;
   --bs-orange-1: #fea968;
@@ -100,6 +101,7 @@
   --bs-blue-3-rgb: 43, 114, 222;
   --bs-var-1-rgb: 220, 220, 220;
   --bs-var-2-rgb: 204, 220, 226;
+  --bs-var-3-rgb: 248, 248, 248;
   --bs-green-1-rgb: 0, 146, 142;
   --bs-green-2-rgb: 193, 201, 2;
   --bs-orange-1-rgb: 254, 169, 104;
@@ -3480,6 +3482,23 @@ textarea.form-control-lg {
   --bs-btn-disabled-border-color: #ccdce2;
 }
 
+.btn-var-3 {
+  --bs-btn-color: #000;
+  --bs-btn-bg: #f8f8f8;
+  --bs-btn-border-color: #f8f8f8;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #f9f9f9;
+  --bs-btn-hover-border-color: #f9f9f9;
+  --bs-btn-focus-shadow-rgb: 211, 211, 211;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #f9f9f9;
+  --bs-btn-active-border-color: #f9f9f9;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-bg: #f8f8f8;
+  --bs-btn-disabled-border-color: #f8f8f8;
+}
+
 .btn-green-1 {
   --bs-btn-color: #000;
   --bs-btn-bg: #00928e;
@@ -3973,6 +3992,23 @@ textarea.form-control-lg {
   --bs-gradient: none;
 }
 
+.btn-outline-var-3 {
+  --bs-btn-color: #f8f8f8;
+  --bs-btn-border-color: #f8f8f8;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #f8f8f8;
+  --bs-btn-hover-border-color: #f8f8f8;
+  --bs-btn-focus-shadow-rgb: 248, 248, 248;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #f8f8f8;
+  --bs-btn-active-border-color: #f8f8f8;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #f8f8f8;
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: #f8f8f8;
+  --bs-gradient: none;
+}
+
 .btn-outline-green-1 {
   --bs-btn-color: #00928e;
   --bs-btn-border-color: #00928e;
@@ -5795,6 +5831,13 @@ textarea.form-control-lg {
   --bs-alert-link-color: var(--bs-var-2-text-emphasis);
 }
 
+.alert-var-3 {
+  --bs-alert-color: var(--bs-var-3-text-emphasis);
+  --bs-alert-bg: var(--bs-var-3-bg-subtle);
+  --bs-alert-border-color: var(--bs-var-3-border-subtle);
+  --bs-alert-link-color: var(--bs-var-3-text-emphasis);
+}
+
 .alert-green-1 {
   --bs-alert-color: var(--bs-green-1-text-emphasis);
   --bs-alert-bg: var(--bs-green-1-bg-subtle);
@@ -6443,6 +6486,19 @@ textarea.form-control-lg {
   --bs-list-group-active-border-color: var(--bs-var-2-text-emphasis);
 }
 
+.list-group-item-var-3 {
+  --bs-list-group-color: var(--bs-var-3-text-emphasis);
+  --bs-list-group-bg: var(--bs-var-3-bg-subtle);
+  --bs-list-group-border-color: var(--bs-var-3-border-subtle);
+  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
+  --bs-list-group-action-hover-bg: var(--bs-var-3-border-subtle);
+  --bs-list-group-action-active-color: var(--bs-emphasis-color);
+  --bs-list-group-action-active-bg: var(--bs-var-3-border-subtle);
+  --bs-list-group-active-color: var(--bs-var-3-bg-subtle);
+  --bs-list-group-active-bg: var(--bs-var-3-text-emphasis);
+  --bs-list-group-active-border-color: var(--bs-var-3-text-emphasis);
+}
+
 .list-group-item-green-1 {
   --bs-list-group-color: var(--bs-green-1-text-emphasis);
   --bs-list-group-bg: var(--bs-green-1-bg-subtle);
@@ -8172,6 +8228,11 @@ textarea.form-control-lg {
   background-color: RGBA(var(--bs-var-2-rgb), var(--bs-bg-opacity, 1)) !important;
 }
 
+.text-bg-var-3 {
+  color: #000 !important;
+  background-color: RGBA(var(--bs-var-3-rgb), var(--bs-bg-opacity, 1)) !important;
+}
+
 .text-bg-green-1 {
   color: #000 !important;
   background-color: RGBA(var(--bs-green-1-rgb), var(--bs-bg-opacity, 1)) !important;
@@ -8461,6 +8522,17 @@ textarea.form-control-lg {
           text-decoration-color: RGBA(214, 227, 232, var(--bs-link-underline-opacity, 1)) !important;
 }
 
+.link-var-3 {
+  color: RGBA(var(--bs-var-3-rgb), var(--bs-link-opacity, 1)) !important;
+  -webkit-text-decoration-color: RGBA(var(--bs-var-3-rgb), var(--bs-link-underline-opacity, 1)) !important;
+          text-decoration-color: RGBA(var(--bs-var-3-rgb), var(--bs-link-underline-opacity, 1)) !important;
+}
+.link-var-3:hover, .link-var-3:focus {
+  color: RGBA(249, 249, 249, var(--bs-link-opacity, 1)) !important;
+  -webkit-text-decoration-color: RGBA(249, 249, 249, var(--bs-link-underline-opacity, 1)) !important;
+          text-decoration-color: RGBA(249, 249, 249, var(--bs-link-underline-opacity, 1)) !important;
+}
+
 .link-green-1 {
   color: RGBA(var(--bs-green-1-rgb), var(--bs-link-opacity, 1)) !important;
   -webkit-text-decoration-color: RGBA(var(--bs-green-1-rgb), var(--bs-link-underline-opacity, 1)) !important;
@@ -9024,6 +9096,10 @@ textarea.form-control-lg {
   --bs-focus-ring-color: rgba(var(--bs-var-2-rgb), var(--bs-focus-ring-opacity));
 }
 
+.focus-ring-var-3 {
+  --bs-focus-ring-color: rgba(var(--bs-var-3-rgb), var(--bs-focus-ring-opacity));
+}
+
 .focus-ring-green-1 {
   --bs-focus-ring-color: rgba(var(--bs-green-1-rgb), var(--bs-focus-ring-opacity));
 }
@@ -9284,6 +9360,11 @@ textarea.form-control-lg {
   border-color: rgba(var(--bs-var-2-rgb), var(--bs-border-opacity)) !important;
 }
 
+.border-var-3 {
+  --bs-border-opacity: 1;
+  border-color: rgba(var(--bs-var-3-rgb), var(--bs-border-opacity)) !important;
+}
+
 .border-green-1 {
   --bs-border-opacity: 1;
   border-color: rgba(var(--bs-green-1-rgb), var(--bs-border-opacity)) !important;
@@ -10341,6 +10422,11 @@ textarea.form-control-lg {
   color: rgba(var(--bs-var-2-rgb), var(--bs-text-opacity)) !important;
 }
 
+.text-var-3 {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-var-3-rgb), var(--bs-text-opacity)) !important;
+}
+
 .text-green-1 {
   --bs-text-opacity: 1;
   color: rgba(var(--bs-green-1-rgb), var(--bs-text-opacity)) !important;
@@ -10662,6 +10748,12 @@ textarea.form-control-lg {
           text-decoration-color: rgba(var(--bs-var-2-rgb), var(--bs-link-underline-opacity)) !important;
 }
 
+.link-underline-var-3 {
+  --bs-link-underline-opacity: 1;
+  -webkit-text-decoration-color: rgba(var(--bs-var-3-rgb), var(--bs-link-underline-opacity)) !important;
+          text-decoration-color: rgba(var(--bs-var-3-rgb), var(--bs-link-underline-opacity)) !important;
+}
+
 .link-underline-green-1 {
   --bs-link-underline-opacity: 1;
   -webkit-text-decoration-color: rgba(var(--bs-green-1-rgb), var(--bs-link-underline-opacity)) !important;
@@ -10866,6 +10958,11 @@ textarea.form-control-lg {
   background-color: rgba(var(--bs-var-2-rgb), var(--bs-bg-opacity)) !important;
 }
 
+.bg-var-3 {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-var-3-rgb), var(--bs-bg-opacity)) !important;
+}
+
 .bg-green-1 {
   --bs-bg-opacity: 1;
   background-color: rgba(var(--bs-green-1-rgb), var(--bs-bg-opacity)) !important;

OgestanPlus/index.html

@@ -17,6 +17,7 @@
     <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>
@@ -123,7 +124,7 @@
     <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%;">
-          Lineamientos de seguros
+          OGestan<sup>®</sup> Plus
         </h1>
         <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Cerrar"></button>
       </div>
@@ -150,6 +151,7 @@
     <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 -->

OgestanPlus/js/config.js

@@ -6,7 +6,7 @@
  */
 window.COURSE_CONFIG = {
   COURSE_CONFIG_URL: 'config.json',
-  DEBUG: true,
+  DEBUG: false,
   SHOW_PAGINATION: false, // Bandera para mostrar/ocultar paginación
   SHOW_TITLE: false, // Bandera para mostrar/ocultar título
   SHOW_GLOSSARY: false, // Bandera para mostrar/ocultar glosario
@@ -166,6 +166,22 @@ function animateOnScroll(selector, animationClass, options = {}) {
 document.addEventListener('DOMContentLoaded', () => {
   setupGlossaryListeners();
 
+  // Inicializar sal.js
+  if (typeof sal !== 'undefined' && document.querySelectorAll('[data-sal]').length > 0) {
+    setTimeout(() => {
+      document.querySelectorAll('[data-sal]').forEach((el) => (el.style.visibility = 'visible'));
+      sal({
+        once: false,
+        threshold: 0.3,
+        duration: 10000,
+        easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+        distance: '100px',
+        opacity: 0.2,
+        scale: 0.85,
+      });
+    }, 200);
+  }
+
   /**
    * Evento antes de cambiar de slide.
    * @event beforeSlideChange
@@ -188,6 +204,22 @@ document.addEventListener('DOMContentLoaded', () => {
     if (e.detail && typeof e.detail.slideIndex === 'number' && Array.isArray(e.detail.contentArray)) {
       console.log(e.detail.contentArray[e.detail.slideIndex].content);
 
+      // Inicializar sal.js si hay elementos con data-sal
+      if (typeof sal !== 'undefined' && document.querySelectorAll('[data-sal]').length > 0) {
+        setTimeout(() => {
+          document.querySelectorAll('[data-sal]').forEach((el) => (el.style.visibility = 'visible'));
+          sal({
+            once: false,
+            threshold: 0.3,
+            duration: 10000,
+            easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+            distance: '100px',
+            opacity: 0.2,
+            scale: 0.85,
+          });
+        }, 200);
+      }
+
       // Paginación
       const paginationEl = document.getElementById('pagination');
       const paginacionScoEl = document.querySelector('.paginacion_sco');

OgestanPlus/js/coursenav.js

@@ -377,7 +377,7 @@ var CourseNav = (function (COURSE_CONFIG) {
 
     const link = document.createElement("a");
     link.classList.add("coursenav-link");
-    link.textContent = item.title;
+    link.innerHTML = item.title;
 
     const idx = courseData.contentArray.findIndex((c) => c.content === item.content && c.title === item.title);
     link.dataset.coursenavindex = idx;

OgestanPlus/js/sal.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.sal=t():e.sal=t()}(this,(function(){return(()=>{"use strict";var e={d:(t,n)=>{for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};function n(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function r(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?n(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):n(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}e.d(t,{default:()=>j});var a="Sal was not initialised! Probably it is used in SSR.",s="Your browser does not support IntersectionObserver!\nGet a polyfill from here:\nhttps://github.com/w3c/IntersectionObserver/tree/master/polyfill",i={root:null,rootMargin:"0% 50%",threshold:.5,animateClassName:"sal-animate",disabledClassName:"sal-disabled",enterEventName:"sal:in",exitEventName:"sal:out",selector:"[data-sal]",once:!0,disabled:!1},l=[],c=null,u=function(e){e&&e!==i&&(i=r(r({},i),e))},d=function(e){e.classList.remove(i.animateClassName)},f=function(e,t){var n=new CustomEvent(e,{bubbles:!0,detail:t});t.target.dispatchEvent(n)},b=function(){document.body.classList.add(i.disabledClassName)},p=function(){c.disconnect(),c=null},m=function(){return i.disabled||"function"==typeof i.disabled&&i.disabled()},v=function(e,t){e.forEach((function(e){var n=e.target,r=void 0!==n.dataset.salRepeat,o=void 0!==n.dataset.salOnce,a=r||!(o||i.once);e.intersectionRatio>=i.threshold?(function(e){e.target.classList.add(i.animateClassName),f(i.enterEventName,e)}(e),a||t.unobserve(n)):a&&function(e){d(e.target),f(i.exitEventName,e)}(e)}))},y=function(){var e=[].filter.call(document.querySelectorAll(i.selector),(function(e){return!function(e){return e.classList.contains(i.animateClassName)}(e,i.animateClassName)}));return e.forEach((function(e){return c.observe(e)})),e},O=function(){b(),p()},h=function(){document.body.classList.remove(i.disabledClassName),c=new IntersectionObserver(v,{root:i.root,rootMargin:i.rootMargin,threshold:i.threshold}),l=y()},g=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};p(),Array.from(document.querySelectorAll(i.selector)).forEach(d),u(e),h()},w=function(){var e=y();l.push(e)};const j=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:i;if(u(e),"undefined"==typeof window)return console.warn(a),{elements:l,disable:O,enable:h,reset:g,update:w};if(!window.IntersectionObserver)throw b(),Error(s);return m()?b():h(),{elements:l,disable:O,enable:h,reset:g,update:w}};return t.default})()}));
+//# sourceMappingURL=sal.js.map