cc

Drossagyn/contenido/02.html

@@ -98,24 +98,88 @@
       height: clamp(350px, 40vh, 400px);
     }
   }
+
+  .bg-light-blue {
+    background-color: #e8f4f8;
+  }
+
+  .calendar-icon {
+    font-size: 5rem;
+    color: #0077b6;
+  }
+
+  .calendar-number {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 2.2rem;
+    font-weight: bold;
+    color: #fff;
+    margin-top: 6px;
+  }
+
+  #c1 b, #c1 strong {
+    color: var(--bs-green-1);
+  }
+
 </style>
 <div class='page-sco py-2 py-md-4 back0'>
   <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-7 col-md-4 text-center order-2 order-md-1 animate__animated animate__zoomIn">
-            <img src="img/02.0.png" class="img-fluid">
+          <div class="col-12 text-center">
+            <h2 class="text-green-1 fw-bold">¿Qué es Drossagyn<sup>®</sup>?</h2>
+            <hr class="m-0 mb-2 hr-style">
           </div>
-          <div class="col-12 col-md-7 col-lg-6 order-1 order-md-2" data-sal="zoom-in">
+          <div class="col-7 col-md-5  text-center animate__animated animate__zoomIn">
+            <!-- <img src="img/02.0.png" class="img-fluid"> -->
+            <img src="img/02.3.png" class="img-fluid">
+          </div>
+          <div class="col-12 col-md-7" data-sal="zoom-in" id="c1">
             <div class="position-relative d-inline-block">
-              <hr class="m-0 mb-2 hr-style">
-              <h2 class="text-secondary fw-bold">¿Qué es Drossagyn<sup>®</sup>?</h2>
-              <p class="mb-2 animate__animated animate__lightSpeedInRight animate__delay-2s">Drossagyn<sup>®</sup> es una crema vaginal a base de <strong>estriol</strong>, diseñada para aliviar y restaurar el
-                tejido afectado por la deficiencia estrogénica.</p>
-              <hr class="m-0 mb-2 hr-style">
+              <div class="animate__animated animate__lightSpeedInRight animate__delay-2s">
+                <p class="mb-2 ">Drossagyn<sup>®</sup> es una crema vaginal a base de <strong>estriol</strong>, diseñada para aliviar y restaurar el
+                  tejido afectado por la deficiencia estrogénica.</p>
+
+                <p class=" ">Vía de administración: <b class="text-green-1">Vaginal</b></p>
+                <!-- Título -->
+                <p class="fw-bold   mb-2">Dosificación</p>
+                <p class="  mb-4">1 dosis = 1 gr de crema = 0.5 mg de Estriol</p>
+
+                <!-- Semanas -->
+                <div class="row g-4">
+                  <!-- Semana 1 -->
+                  <div class="col-md-6 col-12 text-center">
+                    <div class="d-inline-block position-relative">
+                      <i class="fa-solid fa-calendar-days calendar-icon"></i>
+
+                    </div>
+                    <h5 class="fw-bold   mt-2 mb-1">Semana 1</h5>
+                    <p class="  small mb-0">1gr de crema x las noches.</p>
+                  </div>
+
+                  <!-- Semana 2 -->
+                  <div class="col-md-6 col-12 text-center">
+                    <div class="d-inline-block position-relative">
+                      <i class="fa-solid fa-calendar-days calendar-icon"></i>
+
+                    </div>
+                    <h5 class="fw-bold   mt-2 mb-1">Semana 2</h5>
+                    <p class="  small mb-0">1gr de crema 2 a 3 veces x semana, hasta que los síntomas desaparezcan.</p>
+                  </div>
+                </div>
+                <!-- Nota final -->
+                <p class="text-center   mt-4 small">
+                  Esta dosificación puede mantenerse <strong>hasta un máximo de 3 meses.</strong>
+                </p>
+              </div>
             </div>
           </div>
+          <div class="col-12 text-center">
+            <hr class="m-0 my-3 hr-style">
+          </div>
         </div>
       </div>
     </div>
@@ -124,9 +188,7 @@
     <div class="container">
       <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"
-          data-audio="audioh03"
-          >
+          <div class="btn-next-section d-inline-block animate__animated animate__pulse animate__infinite" data-sec="sec1" data-audio="audioh03">
             <img src="img/nSec.png" class="img-fluid">
           </div>
         </div>
@@ -295,4 +357,4 @@
       }
     });
   });
-</script>
+</script>

Drossagyn/css/theme.scss

@@ -21,7 +21,7 @@ $custom-colors: (
 
 // Colores base principales - Azules profesionales
 $primary: #00928e; // Azul corporativo moderno
-$secondary: #010068; // Coral anaranjado (mantenido como acento)
+$secondary: #006c6a; // Coral anaranjado (mantenido como acento)
 
 // Variaciones del primario - Escala de azules
 $primary-light: lighten($primary, 15%);

Drossagyn/index.html

@@ -205,7 +205,7 @@
         <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>
+        <script src="js/config.js" defer></script>
         <!-- librería principal -->
         <script src="js/coursenav.min.js" defer></script>
     </body>