aplicacion de cambios

This commit is contained in:
2026-09-15 02:55:51 -06:00
parent d73a046a57
commit a809375946
36 changed files with 1181 additions and 398 deletions
+80 -30
View File
@@ -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>
+42 -12
View File
@@ -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>
+137 -42
View File
@@ -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');
});