Ogestan_Drossagyn_Papilocare/Drossagyn/contenido/06.html

<style>
  .back0 {
    background-image: url(img/bg07.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .grid-custom {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }

  .col-span {
    width: 40%;
    cursor: pointer;
  }

  .footer-span {
    margin-top: -50px;
  }

  .info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
  }

  .anim0 {
    display: none;
  }

  .img-back {
    max-width: 240px;
    right: 3%;
  }

  @media(min-width: 768px) {
    .col-span {
      width: 25%;
    }
  }

  @media(min-width: 991px) {
    .col-span {
      width: calc(20% - 16px);
    }
  }
</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'>
          <div class="col-12 mb-3 text-center animate__animated animate__bounceInDown">
            <h2 class="fw-bold text-secondary">Seguridad y Consideraciones de Uso</h2>
          </div>
          <div class="col-12">
            <div class="grid-custom">
              <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">
                      <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>
                </div>
              </div>
              <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>
                  <div class="footer-span">
                    <div class="div-text d-inline-block position-relative">
                      <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>
                    </div>
                  </div>
                </div>
              </div>
              <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">
                      <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>
                </div>
              </div>
              <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>
                  <div class="footer-span">
                    <div class="div-text d-inline-block position-relative">
                      <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>
                    </div>
                  </div>
                </div>
              </div>
              <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">
                      <div class="info">
                        <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>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="d-none">
  <div id="pop0">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-12">
          <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">Contraindicaciones</h3>
              <ul class="text-start">
                <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>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,
                  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>
            </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-relative w-100 text-center">
                <img src="img/06.6.png" class="img-fluid">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="pop1">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-12">
          <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">
              <div class="row justify-content-center">
                <div class="col-12 mb-3 text-md-start">
                  <h3 class="fw-medium text-md-start text-green-1 mb-0">Contraindicaciones</h3>
                </div>
                <div class="col-12 text-md-start mb-3">
                  <p class="mb-0">Se debe tener un monitoreo especial a pacientes con:</p>
                </div>
                <div class="col-12 col-md-6 mb-2 mb-md-0">
                  <ul class="mb-0 text-start">
                    <li>Insuficiencia hepática grave</li>
                    <li>Enfermedad grave del miocardio</li>
                    <li>Insuficiencia renal</li>
                    <li>Epilepsia</li>
                    <li>Migraña</li>
                    <li>Diabetes mellitus</li>
                    <li>Hiperlipidemia</li>
                  </ul>
                </div>
                <div class="col-12 col-md-6">
                  <ul class="mb-0 text-start">
                    <li>Hipertensión</li>
                    <li>Porfiria</li>
                    <li>Pacientes con urticaria severa</li>
                    <li>Erupción vesicular</li>
                    <li>Otosclerosis</li>
                    <li>Tromboflebitis</li>
                    <li>Enfermedad tromboembólica</li>
                  </ul>
                </div>
                <div class="col-12 text-center mt-3">
                  <p class="mb-0"><em>En estos casos, es indispensable el seguimiento profesional.</em></p>
                </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-relative w-100 text-center">
                <img src="img/06.7.png" class="img-fluid">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="pop2">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-12">
          <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>
            </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-relative w-100 text-center">
                <img src="img/06.8.png" class="img-fluid">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="pop3">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-12">
          <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">Reacciones secundarias y adversas</h3>
              <ul class="text-start">
                <li>Mareos, dolores de cabeza.</li>
                <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
                  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-relative w-100 text-center">
                <img src="img/06.9.png" class="img-fluid">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="pop4">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-12">
          <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>
              <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>
            </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-relative w-100 text-center">
                <img src="img/06.10.png" class="img-fluid">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  $(function () {
    "use strict";

    $('.col-span').addClass('disabled');

    const audioh10 = CourseNav.createSound('audio/audioh10.mp3');

    const paths = [
      "audio/audioh11.mp3",
      "audio/audioh12.mp3",
      "audio/audioh13.mp3",
      "audio/audioh14.mp3",
      "audio/audioh15.mp3"
    ];
    let audios = [];
    paths.forEach(function (element) {
      audios.push(CourseNav.createSound(element));
    });

    CourseNav.audioController.stopAllSoundsAndPlay(audioh10);

    audioh10.on('play',function(){
      $('.anim0').show();
      gsap.fromTo('.col-span',
        { opacity: 0, rotationY: -90 },
        { opacity: 1, rotationY: 0, duration: 1, stagger: 0.7 }
      );
    });

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

    $('.col-span').click(function (e) {
      e.preventDefault();
      $(this).removeClass('animate__animated animate__pulse animate__infinite').addClass('completed');
      const index = $('.col-span').index(this);
      CourseNav.audioController.stopAllSoundsAndPlay(audios[index]);
      const html = $($(this).data('popid')).html();
      Swal.fire({
        html: html,
        target: "body",
        customClass: {
          popup: 'pop-type0 bg-transparent p-0',
          htmlContainer: 'html-pop-style2 p-3',
          confirmButton: 'btn btn-begin pop-button-confirm text-white fw-bold animate__animated animate__pulse animate__infinite p-2'
        },
        confirmButtonText: '<div class="inside-card px-4 py-2">Cerrar</div>',
        showConfirmButton: true,
        allowOutsideClick: false,
        allowEscapeKey: false,
        focusConfirm: false,
        backdrop: "rgba(201, 224, 221, .8)",
        width: "70em",
        heightAuto: false,
        didOpen: () => {
          document.body.style.paddingRight = '';
        },
        didClose: () => {
          document.body.style.paddingRight = '';
          CourseNav.audioController.stopAudio();
          if ($('.col-span').length == $('.col-span.completed').length) {
            CourseNav.setSlideVisited();
          }
        },
      });
    });
  });
</script>