aplicacion de cambios

2026-09-15 02:55:51 -06:00
parent d73a046a57
commit a809375946
36 changed files with 1181 additions and 398 deletions
@@ -68,7 +68,6 @@
  .btn-slide-circ.selected .circ_interno {
    background: #006EAB;
    background: linear-gradient(to right, #006EAB 0%, #00928E 100%);
-
  }

  .content-swiper {
@@ -119,10 +118,10 @@
    margin-top: 6px;
  }

-  #c1 b, #c1 strong {
+  #c1 b,
+  #c1 strong {
    color: var(--bs-green-1);
  }
-
 </style>
 <div class='page-sco py-2 py-md-4 back0'>
  <div class='container'>
@@ -135,23 +134,37 @@
          </div>
          <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">
+            <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="col-12 col-md-7"
+            data-sal="zoom-in"
+            id="c1"
+          >
            <div class="position-relative d-inline-block">
              <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="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>
+                <p class="animate__animated animate__zoomIn animate__delay-10s">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>
+                <p class="fw-bold mb-2 animate__animated animate__zoomIn animate__delay-13s">Dosificación</p>
+                <p class="mb-4 animate__animated animate__zoomIn animate__delay-13s">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="col-md-6 col-12 text-center animate__animated animate__zoomIn animate__delay-20s"
+                  >
                    <div class="d-inline-block position-relative">
                      <i class="fa-solid fa-calendar-days calendar-icon"></i>

@@ -161,18 +174,21 @@
                  </div>

                  <!-- Semana 2 -->
-                  <div class="col-md-6 col-12 text-center">
+                  <div
+                    class="col-md-6 col-12 text-center animate__animated animate__zoomIn animate__delay-24s"
+                  >
                    <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>
+                    <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 class="text-center mt-4 small animate__animated animate__zoomIn animate__delay-31s">
+                  La dosificación inicial de acuerdo a guías de <strong>tratamiento es de 3 meses</strong>.
                </p>
              </div>
            </div>
@@ -184,19 +200,33 @@
      </div>
    </div>
  </div>
-  <div class="position-relative w-100 bg-white apa0 pt-3" style="display: none;">
+  <div
+    class="position-relative w-100 bg-white apa0 pt-3"
+    style="display: none;"
+  >
    <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">
-            <img src="img/nSec.png" class="img-fluid">
+          <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>
      </div>
    </div>
  </div>
 </div>
-<div id="sec1" class='page-sco py-2 py-md-4 back1' style="display: none;">
+<div
+  id="sec1"
+  class='page-sco py-2 py-md-4 back1'
+  style="display: none;"
+>
  <div class='container'>
    <div class='row justify-content-center align-items-center'>
      <div class='col-12 anim1'>
@@ -209,7 +239,10 @@
                    <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.1.png"
+                            class="img-fluid"
+                          >
                        </div>
                        <div class="col-12 col-md-7">
                          <h4 class="fw-bold text-green-1">Forma Farmacéutica y formulación</h4>
@@ -230,12 +263,17 @@
                    <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.3.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>
-                          <p class="mb-0">Caja de cartón con un <strong>tubo de 50g</strong>, equivalente a <strong>3 meses</strong> de tratamiento con
-                            aplicador e instructivo anexo.</p>
+                          <p class="mb-0">Caja de cartón con un <strong>tubo de 50g</strong>, equivalente a
+                            <strong>3 meses</strong> de tratamiento con
+                            aplicador e instructivo anexo.
+                          </p>
                        </div>
                      </div>
                    </div>
@@ -243,7 +281,8 @@
                      <div class="row justify-content-center align-items-center h-100">
                        <div class="col-12 col-md-6 mb-2">
                          <h4 class="fw-bold text-green-1">Indicaciones</h4>
-                          <p>En el tratamiento de <strong>alteraciones relacionadas con la deficiencia de estrógenos</strong>, tales como:</p>
+                          <p>En el tratamiento de <strong>alteraciones relacionadas con la deficiencia de
+                              estrógenos</strong>, tales como:</p>
                          <ul class="mb-0">
                            <li>Vaginitis</li>
                            <li>Vulvitis</li>
@@ -265,14 +304,25 @@
                  </div>
                </div>
              </div>
-              <div class="position-relative d-flex flex-lg-column justify-content-center align-items-center mx-auto gap-4 mt-3 mt-lg-0">
-                <div class="btn-slide-circ selected completed" data-slide="0">
+              <div
+                class="position-relative d-flex flex-lg-column justify-content-center align-items-center mx-auto gap-4 mt-3 mt-lg-0"
+              >
+                <div
+                  class="btn-slide-circ selected completed"
+                  data-slide="0"
+                >
                  <div class="circ_interno"></div>
                </div>
-                <div class="btn-slide-circ animate__animated animate__pulse animate__infinite" data-slide="1">
+                <div
+                  class="btn-slide-circ animate__animated animate__pulse animate__infinite"
+                  data-slide="1"
+                >
                  <div class="circ_interno"></div>
                </div>
-                <div class="btn-slide-circ animate__animated animate__pulse animate__infinite" data-slide="2">
+                <div
+                  class="btn-slide-circ animate__animated animate__pulse animate__infinite"
+                  data-slide="2"
+                >
                  <div class="circ_interno"></div>
                </div>
              </div>
@@ -357,4 +407,4 @@
      }
    });
  });
-</script>
+</script>
@@ -47,25 +47,40 @@
          <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">
+                <img
+                  src="img/04.0.png"
+                  class="img-fluid"
+                >
              </div>
              <div class="col-5 col-md-7 col-lg-6 col-xl-5 text-center">
                <div id="svg-container"></div>
              </div>
            </div>
          </div>
-          <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
+            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">
-                  <img src="img/04.1.png" class="img-fluid">
+                  <img
+                    src="img/04.1.png"
+                    class="img-fluid"
+                  >
                </div>
                <div class="col-12 text-center">
                  <p class="mb-0">Vía de administración: <strong>Vaginal</strong></p>
                </div>
              </div>
            </div>
-            <div id="txt2" class="texts position-relative w-100">
+            <div
+              id="txt2"
+              class="texts position-relative w-100"
+            >
              <div class="row justify-content-center">
                <div class="col-12 text-center text-md-start mb-3">
                  <p class="fw-bold">Dosificación</p>
@@ -74,31 +89,46 @@
                <div class="col-12 mb-3">
                  <div class="row justify-content-center">
                    <div class="col-6 text-center">
-                      <img src="img/04.2.png" class="img-fluid mb-2"><br>
+                      <img
+                        src="img/04.2.png"
+                        class="img-fluid mb-2"
+                      ><br>
                      <p class="mb-0">1gr de crema x las noches.</p>
                    </div>
                    <div class="col-6 text-center">
-                      <img src="img/04.3.png" class="img-fluid mb-2"><br>
-                      <p class="mb-0">1gr de crema 2 a 3 veces x semana, hasta que los síntomas desaparezcan.</p>
+                      <img
+                        src="img/04.3.png"
+                        class="img-fluid mb-2"
+                      ><br>
+                      <p class="mb-0">1gr de crema 2 a 3 veces x semana, hasta que los síntomas desaparezcan.
+                      </p>
                    </div>
                  </div>
                </div>
                <div class="col-12 text-center text-md-start">
-                  <p class="mb-0">Esta dosificación puede mantenerse <strong>hasta un máximo de </strong><strong>3 meses.</strong></p>
+                  <p class="mb-0">La dosificación inicial de acuerdo a guías de <strong>tratamiento es de 3
+                      meses</strong>.</p>
                </div>
              </div>
            </div>
-            <div id="txt3" class="texts position-relative w-100">
+            <div
+              id="txt3"
+              class="texts position-relative w-100"
+            >
              <div class="row justify-content-center">
                <div class="col-12 text-center text-md-start mb-3">
                  <p class="fw-bold">Tratamiento a largo plazo</p>
                  <ul class="mb-0 text-start">
-                    <li>Tras 2 a 3 meses de uso continuo, realizar un <strong>descanso de 4 semanas</strong>.</li>
+                    <li>Tras 2 a 3 meses de uso continuo, realizar un <strong>descanso de 4 semanas</strong>.
+                    </li>
                    <li>Después de la pausa, evaluar si es necesario reiniciar el tratamiento.</li>
                  </ul>
                </div>
                <div class="col-7 col-md-12 text-center text-md-end">
-                  <img src="img/04.4.png" class="img-fluid">
+                  <img
+                    src="img/04.4.png"
+                    class="img-fluid"
+                  >
                </div>
              </div>
            </div>
@@ -68,29 +68,53 @@
          </div>
          <div class="col-12">
            <div class="grid-custom">
-              <div class="col-span" data-popid="#pop0">
+              <div
+                class="col-span"
+                data-popid="#pop0"
+              >
                <div class="d-flex flex-column justify-content-center align-items-center w-100">
                  <div class="header-span">
                    <div class="div-text d-inline-block position-relative">
-                      <img src="img/06.0.png" class="img-fluid">
+                      <img
+                        src="img/06.0.png"
+                        class="img-fluid"
+                      >
                      <div class="info">
                        <h4 class="fw-medium text-center text-secondary">¿Cuándo NO debe usarse?</h4>
                      </div>
                    </div>
                  </div>
-                  <div class="footer-span" style="z-index: 1;">
-                    <img src="img/06.1.png" class="img-fluid">
+                  <div
+                    class="footer-span"
+                    style="z-index: 1;"
+                  >
+                    <img
+                      src="img/06.1.png"
+                      class="img-fluid"
+                    >
                  </div>
                </div>
              </div>
-              <div class="col-span" data-popid="#pop1">
+              <div
+                class="col-span"
+                data-popid="#pop1"
+              >
                <div class="d-flex flex-column justify-content-center align-items-center w-100">
-                  <div class="header-span" style="z-index: 1;">
-                    <img src="img/06.2.png" class="img-fluid">
+                  <div
+                    class="header-span"
+                    style="z-index: 1;"
+                  >
+                    <img
+                      src="img/06.2.png"
+                      class="img-fluid"
+                    >
                  </div>
                  <div class="footer-span">
                    <div class="div-text d-inline-block position-relative">
-                      <img src="img/06.11.png" class="img-fluid">
+                      <img
+                        src="img/06.11.png"
+                        class="img-fluid"
+                      >
                      <div class="info">
                        <h4 class="fw-medium text-center text-secondary">Usar con precaución en…</h4>
                      </div>
@@ -98,29 +122,53 @@
                  </div>
                </div>
              </div>
-              <div class="col-span" data-popid="#pop2">
+              <div
+                class="col-span"
+                data-popid="#pop2"
+              >
                <div class="d-flex flex-column justify-content-center align-items-center w-100">
                  <div class="header-span">
                    <div class="div-text d-inline-block position-relative">
-                      <img src="img/06.0.png" class="img-fluid">
+                      <img
+                        src="img/06.0.png"
+                        class="img-fluid"
+                      >
                      <div class="info">
                        <h4 class="fw-medium text-center text-secondary">Restricciones importantes</h4>
                      </div>
                    </div>
                  </div>
-                  <div class="footer-span" style="z-index: 1;">
-                    <img src="img/06.3.png" class="img-fluid">
+                  <div
+                    class="footer-span"
+                    style="z-index: 1;"
+                  >
+                    <img
+                      src="img/06.3.png"
+                      class="img-fluid"
+                    >
                  </div>
                </div>
              </div>
-              <div class="col-span" data-popid="#pop3">
+              <div
+                class="col-span"
+                data-popid="#pop3"
+              >
                <div class="d-flex flex-column justify-content-center align-items-center w-100">
-                  <div class="header-span" style="z-index: 1;">
-                    <img src="img/06.4.png" class="img-fluid">
+                  <div
+                    class="header-span"
+                    style="z-index: 1;"
+                  >
+                    <img
+                      src="img/06.4.png"
+                      class="img-fluid"
+                    >
                  </div>
                  <div class="footer-span">
                    <div class="div-text d-inline-block position-relative">
-                      <img src="img/06.11.png" class="img-fluid">
+                      <img
+                        src="img/06.11.png"
+                        class="img-fluid"
+                      >
                      <div class="info">
                        <h4 class="fw-medium text-center text-secondary">Reacciones que pueden aparecer</h4>
                      </div>
@@ -128,18 +176,31 @@
                  </div>
                </div>
              </div>
-              <div class="col-span" data-popid="#pop4">
+              <div
+                class="col-span"
+                data-popid="#pop4"
+              >
                <div class="d-flex flex-column justify-content-center align-items-center w-100">
                  <div class="header-span">
                    <div class="div-text d-inline-block position-relative">
-                      <img src="img/06.0.png" class="img-fluid">
+                      <img
+                        src="img/06.0.png"
+                        class="img-fluid"
+                      >
                      <div class="info">
-                        <h4 class="fw-medium text-center text-secondary">Medicamentos que pueden interactuar</h4>
+                        <h4 class="fw-medium text-center text-secondary">Medicamentos que pueden interactuar
+                        </h4>
                      </div>
                    </div>
                  </div>
-                  <div class="footer-span" style="z-index: 1;">
-                    <img src="img/06.5.png" class="img-fluid">
+                  <div
+                    class="footer-span"
+                    style="z-index: 1;"
+                  >
+                    <img
+                      src="img/06.5.png"
+                      class="img-fluid"
+                    >
                  </div>
                </div>
              </div>
@@ -159,20 +220,29 @@
            <div class="position-relative w-100 z-1">
              <h3 class="fw-medium text-md-start text-green-1">Contraindicaciones</h3>
              <ul class="text-start">
-                <li><strong>Hiper sensibilidad al estriol</strong>, o a cualquier componente de la fórmula.</li>
+                <li><strong>Hiper sensibilidad al estriol</strong>, o a cualquier componente de la fórmula.
+                </li>
                <li>Embarazo y lactancia.</li>
-                <li>Posterior al <strong>tratamiento de sangrado vaginal</strong> por causas desconocidas.</li>
+                <li>Posterior al <strong>tratamiento de sangrado vaginal</strong> por causas desconocidas.
+                </li>
                <li>Hiperplasia endometrial.</li>
                <li>Endometriosis (incluyendo sospecha).</li>
                <li>Hiperplasia endometrial.</li>
-                <li>En caso de<strong> tumor estrógenos-dependiente</strong> existente, anterior o ante la sospecha de su existencia,
+                <li>En caso de<strong> tumor estrógenos-dependiente</strong> existente, anterior o ante la
+                  sospecha de su existencia,
                  tanto en endometrio como en glándula mamaria.</li>
              </ul>
-              <p class="mb-0"><em>En cualquiera de estos escenarios, el producto debe evitarse por completo.</em></p>
+              <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-none d-md-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">
+                <img
+                  src="img/06.6.png"
+                  class="img-fluid"
+                >
              </div>
            </div>
          </div>
@@ -220,9 +290,14 @@
                </div>
              </div>
            </div>
-            <div class="position-absolute img-back h-100 top-0 d-none d-md-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">
+                <img
+                  src="img/06.7.png"
+                  class="img-fluid"
+                >
              </div>
            </div>
          </div>
@@ -237,12 +312,19 @@
          <div class="card bg-transparent border-0 rounded-0 shadow-none p-4 py-5 position-relative">
            <div class="position-relative w-100 z-1 py-5">
              <h3 class="fw-medium text-md-start text-green-1">Restricciones de uso</h3>
-              <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>
+              <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-none d-md-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">
+                <img
+                  src="img/06.8.png"
+                  class="img-fluid"
+                >
              </div>
            </div>
          </div>
@@ -262,13 +344,19 @@
                <li>Nausea y/o vómito.</li>
                <li>Ligera mastalgia.</li>
              </ul>
-              <p><em>Todas las posibles reacciones adversas mencionadas, pueden llegar a suceder en los primeros días de tratamiento y
+              <p><em>Todas las posibles reacciones adversas mencionadas, pueden llegar a suceder en los
+                  primeros días de tratamiento y
                  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-none d-md-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">
+                <img
+                  src="img/06.9.png"
+                  class="img-fluid"
+                >
              </div>
            </div>
          </div>
@@ -283,18 +371,25 @@
          <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>
+              <p class="text-md-start">Algunos medicamentos pueden aumentar la acción de los estrógenos, como:
+              </p>
              <ul class="text-start">
                <li>Barbitúricos</li>
                <li>Hidantoínas</li>
                <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 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-none d-md-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">
+                <img
+                  src="img/06.10.png"
+                  class="img-fluid"
+                >
              </div>
            </div>
          </div>
@@ -325,7 +420,7 @@

    CourseNav.audioController.stopAllSoundsAndPlay(audioh10);

-    audioh10.on('play',function(){
+    audioh10.on('play', function () {
      $('.anim0').show();
      gsap.fromTo('.col-span',
        { opacity: 0, rotationY: -90 },
@@ -333,7 +428,7 @@
      );
    });

-    audioh10.on('end',function(){
+    audioh10.on('end', function () {
      $('.col-span').addClass('animate__animated animate__pulse animate__infinite').removeClass('disabled');
    });