Merge branch 'main' of https://dev.e-360.com.mx/Besins/Ogestan_Drossagyn_Papilocare

Ogestan_andractiv/config.json

@@ -9,7 +9,7 @@
           "content": "contenido/01.html"
         },
         {
-          "title": "Introducción a OGestan ® Andractiv",
+          "title": "Introducción a OGestan<sup>®</sup> Andractiv",
           "content": "contenido/02.html"
         },
         {

Ogestan_andractiv/contenido/02.html

@@ -157,7 +157,7 @@
                                     hombre.</li>
                             </ul>
                         </div>
-                        <div class="col-12 col-md-7 col-xl-5 mt-md-4">
+                        <div class="col-12 col-md-7 col-xl-5 mt-4 my-md-0">
                             <img src="img/02.5.png" class="img-fluid floating" alt="Nombre comercial">
                         </div>
                     </div>
@@ -174,7 +174,7 @@
                             <h3 class="fw-semibold">Presentación</h3>
                             <p>Caja de cartón con <b class="text-yellow">30 cápsulas</b> de 1.617gr.</p>
                         </div>
-                        <div class="col-12 col-md-7 col-xl-5 mt-md-4">
+                        <div class="col-12 col-md-7 col-xl-5 mt-4 my-md-0">
                             <img src="img/02.6.png" class="img-fluid floating" alt="Nombre comercial">
                         </div>
                     </div>
@@ -192,7 +192,7 @@
                             <p>Suplemento alimenticio, para <b class="text-yellow">complementar</b> la alimentación en
                                 los hombres.</p>
                         </div>
-                        <div class="col-12 col-md-7 col-xl-5 mt-md-2">
+                        <div class="col-12 col-md-7 col-xl-5 mt-4 my-md-0">
                             <img src="img/02.7.png" class="img-fluid floating" alt="Nombre comercial">
                         </div>
                     </div>
@@ -213,7 +213,7 @@
                                 <li><b>No exceder</b> la dosis recomendada.</li>
                             </ul>
                         </div>
-                        <div class="col-12 col-md-7 col-xl-5">
+                        <div class="col-12 col-md-7 col-xl-5 mt-4 my-md-0">
                             <img src="img/02.8.png" class="img-fluid floating" alt="Nombre comercial">
                         </div>
                     </div>

Ogestan_andractiv/contenido/03.html

@@ -101,8 +101,8 @@
 
     .mySwiper .swiper-slide-active img {
         opacity: 1;
-        -webkit-transform: scale(1);
+        -webkit-transform: scale(1.4);
-        transform: scale(1);
+        transform: scale(1.4);
         object-fit: fill;
     }
 
@@ -146,7 +146,7 @@
     }
 
     .customSwiper .swiper-slide {
-        height: 300px !important;
+        height: auto !important;
     }
 
     .customSwiper .swiper-slide {
@@ -167,6 +167,20 @@
         }
 
         .swiper-nav::before {
+
+        /* Forzar slides al 100% de ancho en pantallas pequeñas para evitar cortes */
+        .mySwiper .swiper-slide,
+        .customSwiper .swiper-slide {
+            flex: 0 0 100% !important;
+            width: 100% !important;
+            max-width: 100% !important;
+            box-sizing: border-box;
+        }
+
+        /* Asegurar que el contenedor no recorte los slides */
+        .swiper {
+            overflow: visible;
+        }
             content: "";
             display: block;
             width: 60%;
@@ -204,7 +218,7 @@
     @media (max-width: 576px) {
 
         .customSwiper .swiper-slide {
-            height: 370px !important;
+            height: auto !important;
         }
 
         .avatar-circle img {
@@ -212,7 +226,7 @@
         }
 
         .mySwiper .swiper-slide-active img {
-            padding: 9px;
+            padding: 0px;
         }
 
     }
@@ -232,7 +246,7 @@
                         <div class="row justify-content-center align-items-center">
                             <div class="col-10 col-md-12">
                                 <div class="card custom-card flat">
-                                    <div class="card-body">
+                                    <div class="card-body my-3 my-md-0">
                                         <!-- Swiper -->
                                         <div class="swiper mySwiper">
                                             <div class="swiper-wrapper">
@@ -439,7 +453,7 @@
                                                         <div class="card w-100 bg-white border-custom">
                                                             <div class="card-body py-md-5 px-md-5">
                                                                 <h3 class="text-blue-4 fw-semibold">Vitamina D</h3>
-                                                                <p>Mejora la <b>calidad</b> del semen y la <b>fertilidad
+                                                                <p>Mejora la <b class="text-orange-1">calidad</b> del semen y la <b class="text-orange-1">fertilidad
                                                                         masculina</b>.</p>
                                                             </div>
                                                         </div>

Ogestan_andractiv/contenido/04.html

@@ -46,7 +46,7 @@
     }
 
     .foco-bubble {
-        background: rgba(55, 173, 255, 0.7);
+        background: rgba(55, 173, 255, 0.2);
         color: #fff;
         border: 0px solid #fff;
         border-radius: 2rem;
@@ -72,9 +72,9 @@
         font-weight: 600;
     }
 
-    .text-yellow {
+    /* .text-yellow {
         color: #ffc306 !important;
-    }
+    } */
 
     @media (max-width: 767.98px) {
         .foco-wrap {
@@ -107,7 +107,7 @@
     </div> -->
     <div class="container-fluid px-0 my-md-5 my-xl-3 d-none" id="container3">
         <div class="row justify-content-center">
-            <div class="col-12 col-md-10 text-white animate__animated animate__fadeInDown">
+            <div class="col-11 col-md-10 text-white animate__animated animate__fadeInDown">
                 <h2 class="fw-semibold text-center text-blue-6">Beneficios Generales </h2>
                 <p>Conoce los beneficios generales de <b class="text-blue-6">OGestan<sup class="text-blue-6">®</sup> Andractiv</b>. Descubre cómo mejora
                     parámetros esenciales del semen y fortalece la fertilidad masculina.</p>

Ogestan_andractiv/contenido/06.html

@@ -83,6 +83,10 @@
         background-size: cover;
     }
 
+    .rounded-15 {
+        border-radius: 35px;
+    }
+
     @media (min-width: 768px) {
         .full-screen {
             grid-template-columns: 1fr 1fr;
@@ -114,7 +118,7 @@
     <div class="full-screen">
         <div class="eletxt">
             <div class="w-100 text-center mt-md-4 mt-2 animate__animated animate__fadeInDown">
-                <h2 class="text-white fw-semibold">Competidores</h2>
+                <h2 class="fw-semibold text-blue-4"><span class="bg-white border-3 rounded-15 border border-blue-7 py-2 px-4">Competidores</span></h2>
             </div>
         </div>
         <div class="middle bg-gra1 animate__animated animate__fadeInLeft">
@@ -171,10 +175,10 @@
                 <div class="row justify-content-center align-items-center">
                     <div class="col-12 col-md-10 col-xl-8 text-center">
                         <ul class="text-start custom-li">
-                            <li>Fabricantes no establecidos, ni reconocidos en México.</li>
+                            <li>Fabricantes <b class="text-orange-1"> establecidos, ni reconocidos</b> en México.</li>
                             <li>Venta sólo por E-commerce y enviados desde el extranjero.</li>
-                            <li>Sin permisos por la autoridad mexicana.</li>
+                            <li><b class="text-orange-1">Sin permisos</b> por la autoridad mexicana.</li>
-                            <li>Sin respaldo o soporte científico.</li>
+                            <li><b class="text-orange-1">Sin respaldo</b> o soporte científico.</li>
                             <li>Calidad cuestionable.</li>
                             <li>Altos costos de envío.</li>
                         </ul>
@@ -196,7 +200,6 @@
         const audioh21 = CourseNav.createSound("audio/audioh21.mp3");
         const audioh22 = CourseNav.createSound("audio/audioh22.mp3");
 
-        CourseNav.audioController.stopAllSoundsAndPlay(audioh20);
         audioh20.on("end", () => {
             $(".wrapper-card").removeClass("disabled");
         });
@@ -282,7 +285,7 @@
                 willClose: () => {
                     CourseNav.audioController.stopAudio();
                 },
-                didClose: onclose,
+                didClose: onAllSlidesVisited,
                 didDestroy: null,
             });
         });

Ogestan_andractiv/contenido/07.html

@@ -110,9 +110,9 @@
 
     .bubble {
         position: relative;
-        background: #DD3352;
+        background: #00275bd5;
         color: #FFFFFF;
-        box-shadow: 5px 7px 7px -1px rgba(221 51 82 / 30%);
+        box-shadow: 5px 7px 7px -1px rgb(0 40 91 / 33%);
         text-align: center;
         border-radius: 15px;
         padding: 1em;
@@ -125,7 +125,7 @@
         width: 0;
         z-index: 1;
         border-style: solid;
-        border-color: #DD3352 transparent;
+        border-color: #00275bd5 transparent;
         border-width: 0 20px 20px;
         top: -20px;
         left: 50%;
@@ -136,12 +136,12 @@
     @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 #00275bd5 transparent transparent;
             /* top right bottom left */
             border-width: 20px 20px 20px 0;
             /* Colocar el triángulo centrado verticalmente y fuera a la izquierda */
             top: 50%;
-            left: -18px;
+            left: -19px;
             margin-left: 0;
             margin-top: -20px;
         }
@@ -186,7 +186,7 @@
         flex: 1;
         display: grid;
         grid-template-columns: 1fr;
-        grid-template-rows: 56% auto;
+        grid-template-rows: 70% auto;
         justify-content: center;
         align-items: center;
     }
@@ -272,7 +272,6 @@
     </div>
 </div>
 <div class="page-sco page-activity full-height py-2 pt-md-3" id="desarrollo" style="display: none;">
-
     <div class="container-xl">
         <div class="row align-items-center">
             <div class="col-12">
@@ -299,12 +298,9 @@
                     </div>
                     <div class="col-12 col-md-9 col-lg-8 col-xl-10 actividad_show" style="display: none;">
                         <div id="quiz-container" class="mt-3 w-100">
-
-                        </div>
-
                         </div>
                     </div>
-
+                </div>
             </div>
         </div>
     </div>
@@ -316,7 +312,7 @@
             <div class="flex-fill w-100 h-100 bg-pass passed" style="display: none;"></div>
             <div class="flex-fill w-100 h-100 bg-fail failed" style="display: none;"></div>
         </div>
-        <div class="part2-cierre h-100 d-flex flex-column justify-content-center align-items-center">
+        <div class="part2-cierre py-3 h-100 d-flex flex-column justify-content-center align-items-center">
             <div class="container">
                 <div class="row align-items-center justify-content-center pt-2">
                     <div class="col-12 col-md-8">
@@ -331,7 +327,7 @@
                             </div>
                             <div class="col-12 text-center animate__animated animate__fadeInLeft failed"
                                 style="display: none;">
-                                <h1 class="fw-bold text-orange-2">¡Vas muy bien!</h1>
+                                <h1 class="fw-bold text-orange-2">Puedes mejorar.</h1>
                                 <p>Varias afirmaciones no fueron correctas.</p>
                                 <p>Te recomendamos revisar nuevamente la información de <b
                                         class="text-blue-3">OGestan<sup>®</sup>
@@ -379,8 +375,6 @@
         });
 
 
-
-
         // Crear instancia de QuizManager
         const quizManager = new QuizManager({
             excelFileUrl: "manejoDeObjeciones.xlsx",

Ogestan_andractiv/contenido/08.html

@@ -26,7 +26,7 @@
         <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 col-md-7 animate__animated animate__bounceInDown">
+                    <div class="col-11 col-md-7 animate__animated animate__bounceInDown">
                         <div class="position-relative d-inline-block mb-3">
                             <h1 class="text-blue-3 fw-bold">¡Gran trabajo!</h1>
                             <hr class="m-0 text-blue-3 border-top-perso">
@@ -41,9 +41,9 @@
                             que sabes y continúa fortaleciendo tu preparación.</p>
 
                         <p class="mb-0 text-blue-4 animate__animated animate__fadeInUp animate__delay-15s">
-                            ¡<strong>¡Lo estás haciendo excelente!</strong>!</p>
+                            ¡<strong>¡Lo estás haciendo excelente!</strong></p>
                     </div>
-                    <div class="col-12 col-md-5 text-center animate__animated animate__zoomIn">
+                    <div class="col-7 col-md-5 text-center animate__animated animate__zoomIn">
                         <img src="img/celebracion.png" alt="Celebración" class="img-fluid floating">
                     </div>
                 </div>