Ogestan_Drossagyn_Papilocare/OgestanPlus/contenido/06.html

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

  .back1 {
    background-image: url(img/bg06.jpg);
    background-repeat: no-repeat;
    background-position: 100% 0;
    background-size: cover;
  }

  .anim0,
  .anim1 {
    display: none;
  }

  .shadow-vx {
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    max-width: 100%;
  }

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

  .btn-arrow {
    max-width: 85px;
  }

  @media(min-width: 991px) {
    .img-mx-w img {
      max-width: 71%;
    }
  }

  @media(min-width: 768px) {
    .shadow-vx {
      max-width: 76%;
    }

    .btn-arrow {
      max-width: 75px;
    }
  }
</style>
<div
  id="sec0"
  class='page-sco py-2 pt-md-3 back0'
>
  <div class='container'>
    <div class='row justify-content-center align-items-center'>
      <div class='col-12'>
        <div class='row justify-content-center'>
          <div
            class="col-12 mb-3"
            data-sal="slide-right"
          >
            <h2 class="text-secondary fw-bold">Competidores</h2>
            <p class="mb-0 animate__animated animate__lightSpeedInLeft animate__delay-1s">En el mercado de
              suplementos para maternidad existen varias marcas con características y formulaciones distintas.
              Aunque cada una ofrece beneficios, <strong>ninguna presenta la combinación tan completa de
                nutrientes que ofrece OGestan<sup>®</sup> Plus.</strong></p>
          </div>
          <div class="col-12 mb-3">
            <div class="row justify-content-center">
              <div
                class="col-5 col-md-4 img-mx-w text-center mb-3"
                data-sal="zoom-in"
                data-sal-delay="100"
              >
                <img
                  src="img/06.0.png"
                  class="img-fluid"
                >
              </div>
              <div
                class="col-5 col-md-4 img-mx-w text-center mb-3"
                data-sal="zoom-in"
                data-sal-delay="300"
              >
                <img
                  src="img/06.1.png"
                  class="img-fluid"
                >
              </div>
              <div
                class="col-5 col-md-4 img-mx-w text-center mb-3"
                data-sal="zoom-in"
                data-sal-delay="500"
              >
                <img
                  src="img/06.2.png"
                  class="img-fluid"
                >
              </div>
              <div
                class="col-5 col-md-4 img-mx-w text-center mb-3 mb-md-0"
                data-sal="zoom-in"
                data-sal-delay="600"
              >
                <img
                  src="img/06.3.png"
                  class="img-fluid"
                >
              </div>
              <div
                class="col-5 col-md-4 img-mx-w text-center"
                data-sal="zoom-in"
                data-sal-delay="800"
              >
                <img
                  src="img/06.4.png"
                  class="img-fluid"
                >
              </div>
              <div
                class="col-5 col-md-4 img-mx-w text-center"
                data-sal="zoom-in"
                data-sal-delay="1000"
              >
                <img
                  src="img/06.5.png"
                  class="img-fluid"
                >
              </div>
            </div>
          </div>
          <div
            class="col-12 text-center ins0"
            style="display: none;"
          >
            <div
              class="btn-next-section d-inline-block animate__animated animate__pulse animate__infinite"
              data-sec="sec1"
              data-audio="audiom14"
            >
              <img
                src="img/nSec.png"
                class="img-fluid"
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div
  id="sec1"
  class="page-sco back1"
  style="display: none;"
>
  <div class='container'>
    <div class='row justify-content-center align-items-center'>
      <div class='col-12'>
        <div class="row justify-content-center">
          <div
            class="col-12 text-center mb-3"
            data-sal="slide-left"
          >
            <h2 class="text-orange-2 fw-bold">No olvidemos…</h2>
          </div>
          <div
            class="col-12 col-lg-9"
            data-sal="flip-down"
          >
            <div class="d-flex flex-wrap flex-md-row justify-content-center align-items-center gap-2">
              <div class="btn-prev btn-arrow d-inline-block order-2 order-md-1">
                <img
                  src="img/06.6.png"
                  class="img-fluid"
                >
              </div>
              <div class="position-relative shadow-vx flex-fill order-1 order-md-2 rounded-3">
                <div class="swiper cid1">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide visited completed">
                      <div class="card bg-green-2 border-0 rounded-3 shadow-none p-3">
                        <div class="row justify-content-center align-items-center">
                          <div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
                            <ol>
                              <li><strong>Número</strong> de componentes.</li>
                              <li>Cantidad de <strong>Omega 3.</strong></li>
                              <li>Contenido de <strong>Vitamina D.</strong></li>
                              <li>Diferenciación del hierro (hierro <strong>bisglicinato</strong>).</li>
                            </ol>
                            <p class="fw-bold">Ninguna presenta una combinación tan completa de 19 nutrientes
                              como OGestan®
                              Plus</p>
                          </div>
                          <div class="col-7 col-md-4 text-center">
                            <img
                              src="img/06.8.png"
                              class="img-fluid"
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="swiper-slide">
                      <div class="card bg-green-2 border-0 rounded-3 shadow-none p-3">
                        <div class="row justify-content-center align-items-center">
                          <div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
                            <p class="mb-0">Destacar que <strong>Regenesis</strong><strong> Max (RM) no
                                contiene hierro </strong><strong>bisglicinato</strong>
                              (solo sulfato ferroso), y un <strong>mínimo de Vitamina D.</strong></p>
                          </div>
                          <div class="col-7 col-md-4 text-center">
                            <img
                              src="img/06.9.png"
                              class="img-fluid"
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="swiper-slide">
                      <div class="card bg-green-2 border-0 rounded-3 shadow-none p-3">
                        <div class="row justify-content-center align-items-center">
                          <div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
                            <p class="mb-0">Destacar la <strong>menor cantidad de Omega 3 en
                              </strong><strong>Previta</strong> <strong>Mom</strong><strong>.</strong></p>
                          </div>
                          <div class="col-7 col-md-4 text-center">
                            <img
                              src="img/06.10.png"
                              class="img-fluid"
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="swiper-slide">
                      <div class="card bg-green-2 border-0 rounded-3 shadow-none p-3">
                        <div class="row justify-content-center align-items-center">
                          <div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
                            <p class="mb-0">Elevit 2 Omegas <strong>no cumple con las cantidades requeridas de
                                ácido fólico</strong>.</p>
                          </div>
                          <div class="col-7 col-md-4 text-center">
                            <img
                              src="img/06.11.png"
                              class="img-fluid"
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="swiper-slide">
                      <div class="card bg-green-2 border-0 rounded-3 shadow-none p-3">
                        <div class="row justify-content-center align-items-center">
                          <div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
                            <p class="mb-0">Materplus tiene <strong>una fórmula muy limitada en
                                elementos.</strong></p>
                          </div>
                          <div class="col-7 col-md-4 text-center">
                            <img
                              src="img/06.12.png"
                              class="img-fluid"
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="btn-next btn-arrow rounded-circle d-inline-block order-2 order-md-3 animate__animated animate__pulse animate__infinite"
              >
                <img
                  src="img/06.7.png"
                  class="img-fluid"
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  $(function () {
    "use strict";

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

    CourseNav.audioController.stopAllSoundsAndPlay(audiom13);

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

    audiom13.on('end', function () {
      $('.ins0').show();
    });

    const paths = [
      "audio/audiom14.mp3",
      "audio/audiom15.mp3",
      "audio/audiom16.mp3",
      "audio/audiom17.mp3",
      "audio/audiom18.mp3"
    ];
    let audios = [];
    paths.forEach(function (element) {
      audios.push(CourseNav.createSound(element));
    });

    let sec1Shown = false;

    // Asegurar que sec0 esté visible al inicio
    $('#sec0').show();
    $('#sec1').hide();

    let isScrolling = false;

    $('.btn-next-section').click(function () {
      if (isScrolling) return;

      $(this).removeClass('animate__animated animate__pulse animate__infinite');
      sec1Shown = true;
      $('.ins0').hide();

      const currentScroll = $(window).scrollTop();
      const windowHeight = $(window).height();
      const documentHeight = $(document).height();
      const scrollNeeded = documentHeight - windowHeight;

      if (currentScroll < scrollNeeded && scrollNeeded > 0) {
        isScrolling = true;
        $('html, body').animate({
          scrollTop: scrollNeeded
        }, 600, () => {
          isScrolling = false;
          setTimeout(() => {
            gotoSection($(this).data('sec'));
          }, 200);
        });
      } else {
        gotoSection($(this).data('sec'));
      }

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

    const mySwiper = new Swiper(".cid1", {
      effect: "slide",
      autoHeight: true,
      slidesPerView: 1, // Mobile: 1 slide a la vez
      spaceBetween: 20,
      navigation: {
        nextEl: '.btn-next',
        prevEl: '.btn-prev',
      },
      on: {
        init: function () {
          // Ocultar prev en el primer slide
          $('.btn-prev').css('opacity', '.5').addClass('disabled');
        },
        slideChange: function () {
          const activeIndex = this.activeIndex;
          const slides = this.slides;
          const totalSlides = this.slides.length;

          // Controlar opacidad y clase disabled de botones
          if (activeIndex === 0) {
            $('.btn-prev').css('opacity', '.5').addClass('disabled');
          } else {
            $('.btn-prev').css('opacity', '1').removeClass('disabled');
          }

          if (activeIndex === totalSlides - 1) {
            $('.btn-next').css('opacity', '.5').addClass('disabled');
          } else {
            $('.btn-next').css('opacity', '1').removeClass('disabled');
          }

          slides[activeIndex].classList.add("visited", "completed");

          const completedSlides = $(".cid1 .swiper-slide.completed").length;

          if (completedSlides == totalSlides) {
            $('.btn-next').removeClass('animate__animated animate__pulse animate__infinite');
            CourseNav.setSlideVisited();
          }

          CourseNav.audioController.stopAllSoundsAndPlay(audios[activeIndex]);
        }
      }
    });
  });
</script>