Ogestan_Drossagyn_Papilocare/Drossagyn/contenido/02.html

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

  .back1 {
    background-image: url(img/bg03.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .hr-style {
    border-top: 3px solid #fff;
    opacity: 1;
  }

  .anim0 {
    display: none;
  }

  .shadow-externo {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 50px;
    background-image: url(img/02.2.png);
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: 100% 100%;
    justify-content: center;
    align-items: center;
  }

  .cid0 .swiper-wrapper {
    box-sizing: border-box;
  }

  .btn-slide-circ {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background: #F2F2F2;
    background: linear-gradient(to bottom, #F2F2F2 11%, #BDCCD4 100%);
    outline: 4px solid rgba(14, 28, 98, .3);
    cursor: pointer;
  }

  .circ_interno {
    width: 34px;
    height: 34px;
    border-radius: 100%;
    background: #dcdcdc;
  }

  .btn-slide-circ:hover .circ_interno {
    background: #006EAB;
    background: linear-gradient(to left, #006EAB 0%, #00928E 100%);
  }

  .btn-slide-circ.selected .circ_interno {
    background: #006EAB;
    background: linear-gradient(to right, #006EAB 0%, #00928E 100%);

  }

  .content-swiper {
    min-width: 100%;
  }

  ul.li-sp li {
    list-style-type: none;
  }

  ul.li-sp li>ul>li {
    list-style-type: disc;
  }

  @media(min-width: 991px) {
    .shadow-externo {
      grid-template-columns: auto 50px;
      grid-template-rows: 1fr;
      gap: 12px;
    }

    .content-swiper {
      height: max-content;
    }

    .cid0 {
      height: clamp(350px, 40vh, 400px);
    }
  }
</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>
          <div class="col-12 col-md-7 col-lg-6 order-1 order-md-2" data-sal="zoom-in">
            <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>
          </div>
        </div>
      </div>
    </div>
  </div>
  <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>
        </div>
      </div>
    </div>
  </div>
</div>
<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'>
        <div class="row justify-content-center align-items-center">
          <div class="col-12 col-lg-9">
            <div class="shadow-externo rounded-3 px-4 py-5 p-lg-5">
              <div class="position-relative content-swiper">
                <div class="swiper cid0">
                  <div class="swiper-wrapper">
                    <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">
                        </div>
                        <div class="col-12 col-md-7">
                          <h4 class="fw-bold text-green-1">Forma Farmacéutica y formulación</h4>
                          <p>Principio activo: <strong>Estriol</strong></p>
                          <p>Forma farmacéutica: <strong>Crema</strong></p>
                          <p>Formulación:</p>
                          <ul class="li-sp mb-0">
                            <li>Cada 100 gramos contienen:
                              <ul class="mb-0 mt-3">
                                <li><strong>Estriol</strong> 50mg</li>
                                <li>Excipiente cbp 100g</li>
                              </ul>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                    <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">
                        </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>
                        </div>
                      </div>
                    </div>
                    <div class="swiper-slide">
                      <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>
                          <ul class="mb-0">
                            <li>Vaginitis</li>
                            <li>Vulvitis</li>
                            <li>Prurito vulvar y vaginal</li>
                            <li>Craurosis (atrofia progresiva crónica de la piel y mucosa vulvar)</li>
                          </ul>
                        </div>
                        <div class="col-12 col-md-6">
                          <ul class="mb-0">
                            <li>Secreciones</li>
                            <li>Úlceras por presión en pacientes que utilizan pesario</li>
                            <li>Facilitar la discriminación en los frotis vaginales difíciles de evaluar</li>
                            <li>Pre y post tratamiento de cirugía vaginal</li>
                            <li>Tratamiento coadyuvante en las infecciones vaginales</li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </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="circ_interno"></div>
                </div>
                <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="circ_interno"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  $(function () {
    "use strict";

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

    const paths = [
      "audio/audioh03.mp3",
      "audio/audioh04.mp3",
      "audio/audioh05.mp3"
    ];
    let audios = [];
    paths.forEach(function (element) {
      audios.push(CourseNav.createSound(element));
    });

    CourseNav.audioController.stopAllSoundsAndPlay(audioh02);

    audioh02.on('play', function () {
      $('.anim0').show();
    });

    audioh02.on('end', function () {
      $('.apa0').show();
      //$('.btn-slide-circ').first().click();
    });

    $('.btn-next-section').click(function () {
      $(this).removeClass('animate__animated animate__pulse animate__infinite');
      gotoSection($(this).data('sec'));
      $(this).parent().hide();

      const audioName = $(this).data('audio');
      if (audioName) {
        setTimeout(() => {
          CourseNav.audioController.stopAllSoundsAndPlay(eval(audioName));
        }, 500);
      } else {
        CourseNav.soundClick();
      }
    });

    const mySwiper = new Swiper(".cid0", {
      effect: "slide",
      autoHeight: true,
      slidesPerView: 1,
      spaceBetween: 10,
      direction: 'horizontal',
      breakpoints: {
        991: {
          direction: 'vertical',
          autoHeight: false
        }
      }
    });

    $('.btn-slide-circ').click(function () {
      CourseNav.soundClick();
      const slideIndex = $(this).data('slide');
      mySwiper.slideTo(slideIndex);
      $(this).removeClass('animate__animated animate__pulse animate__infinite');
      $('.btn-slide-circ').removeClass('selected');
      $(this).addClass('selected completed');

      if ($('.btn-slide-circ.completed').length === $('.btn-slide-circ').length) {
        CourseNav.setSlideVisited();
      }

      if (audios[slideIndex]) {
        CourseNav.audioController.stopAllSoundsAndPlay(audios[slideIndex]);
      }
    });
  });
</script>