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 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 class="mb-0">
                              <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>
                          </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>