Ogestan_Drossagyn_Papilocare/OgestanPre/contenido/05.html

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

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

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

  .bg-adorno {
    background: rgba(255, 255, 255, .1);
    background: linear-gradient(to right, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .4) 100%);
    border: 3px solid #fff;
  }

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

  .apa0,
  .apa1 {
    display: none;
  }

  .grid-competidores {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    justify-items: center;
    margin-top: 12px;
  }

  .grid-competidores img {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
  }

  @media (max-width: 767px) {
    .grid-competidores {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (max-width: 480px) {
    .grid-competidores {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media(min-width: 991px) {
    .shadow-vx {
      max-width: 76%;
    }
  }
</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'>
        <div class='row justify-content-center'>
          <div class="col-12 mb-3 text-center apa0 animate__animated animate__fadeInDown">
            <h2 class="fw-bold text-blue-1">Competidores</h2>
            <div class="grid-competidores">
              <img src="img/05.0.png" class="img-fluid">
              <img src="img/05.1.png" class="img-fluid">
              <img src="img/05.2.png" class="img-fluid">
              <img src="img/05.3.png" class="img-fluid">
              <img src="img/05.4.png" class="img-fluid">
              <img src="img/05.5.png" class="img-fluid">
              <img src="img/05.6.png" class="img-fluid">
            </div>
          </div>
          <div class="col-12 apa1 animate__animated animate__zoomIn">
            <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-lg-1 me-5 me-lg-0">
                <img
                  src="img/05.7.png"
                  class="img-fluid"
                >
              </div>
              <div class="position-relative shadow-vx flex-fill order-1 order-lg-2 rounded-3">
                <div class="swiper cid1">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide visited completed">
                      <div class="card bg-adorno px-3 py-4">
                        <div class="row justify-content-center align-items-center py-2">
                          <div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
                            <h3 class="fw-medium text-purple-1">A.F. Valdecasas - Ácido fólico</h3>
                            <ul class="mb-0 bul1">
                              <li>Fórmula basada <strong class="text-secondary">solo en ácido fólico</strong>.
                              </li>
                              <li>Ofrece un soporte <strong class="text-secondary">muy limitado para la
                                  preconcepción</strong>.</li>
                              <li><strong class="text-secondary">No incluye antioxidantes ni minerales
                                  esenciales</strong>.</li>
                              <li><strong class="text-secondary">No cubre</strong> las necesidades
                                nutrimentales del <strong class="text-secondary">primer trimestre</strong>.
                              </li>
                            </ul>
                          </div>
                          <div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
                            <img
                              src="img/05.0.png"
                              class="img-fluid"
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="swiper-slide">
                      <div class="card bg-adorno px-3 py-4">
                        <div class="row justify-content-center align-items-center py-2">
                          <div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
                            <h3 class="fw-medium text-purple-1">Cilocid</h3>
                            <ul class="mb-0 bul1">
                              <li>Enfocado en <strong class="text-secondary">ácido fólico
                                  tradicional</strong>.</li>
                              <li>Opción accesible, pero <strong class="text-secondary">con formulación
                                  reducida</strong>.</li>
                              <li><strong class="text-secondary">Carece de vitaminas antioxidantes y minerales
                                  clave</strong>.</li>
                              <li>Su soporte es <strong class="text-secondary">insuficiente</strong> para
                                preconcepción y embarazo temprano.</li>
                            </ul>
                          </div>
                          <div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
                            <img
                              src="img/05.1.png"
                              class="img-fluid"
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="swiper-slide">
                      <div class="card bg-adorno px-3 py-4">
                        <div class="row justify-content-center align-items-center py-2">
                          <div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
                            <h3 class="fw-medium text-purple-1">FoliVital</h3>
                            <ul class="mb-0 bul1">
                              <li>Producto centrado en <strong class="text-secondary">ácido fólico
                                  únicamente</strong>.</li>
                              <li>Carece de un <strong class="text-secondary">perfil completo de vitaminas y
                                  minerales</strong>.</li>
                              <li>Proporciona apoyo <strong class="text-secondary">limitado al desarrollo
                                  temprano</strong>.</li>
                              <li>Menos adecuado para <strong class="text-secondary">las necesidades
                                  específicas del embarazo inicial</strong>.</li>
                            </ul>
                          </div>
                          <div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
                            <img
                              src="img/05.2.png"
                              class="img-fluid"
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="swiper-slide">
                      <div class="card bg-adorno px-3 py-4">
                        <div class="row justify-content-center align-items-center py-2">
                          <div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
                            <h3 class="fw-medium text-purple-1">Bebistan</h3>
                            <ul class="mb-0 bul1">
                              <li>Multivitamínico general con <strong class="text-secondary">composición
                                  básica</strong>.</li>
                              <li>No está formulado para <strong class="text-secondary">preconcepción ni
                                  primer trimestre</strong>.</li>
                              <li>Su perfil nutrimental es <strong class="text-secondary">limitado frente a
                                  fórmulas completas</strong>.</li>
                              <li>No cubre requerimientos <strong class="text-secondary">críticos del
                                  desarrollo temprano</strong>.</li>
                            </ul>
                          </div>
                          <div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
                            <img
                              src="img/05.3.png"
                              class="img-fluid"
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="swiper-slide">
                      <div class="card bg-adorno px-3 py-4">
                        <div class="row justify-content-center align-items-center py-2">
                          <div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
                            <h3 class="fw-medium text-purple-1">reGenesis Max</h3>
                            <ul class="mb-0 bul1">
                              <!-- <li>Enfocado en embarazo, pero <strong class="text-secondary">variable en su composición</strong>.</li>
                              <li>Puede incluir omegas, aunque <strong class="text-secondary">no de forma consistente</strong>.</li>
                              <li><strong class="text-secondary">No integra complejo B completo, antioxidantes ni minerales esenciales</strong>.</li> -->
                              <li>sulfato ferroso = posibles malestares gastrointestinales</li>
                              <li>cantidades mínimas de vitamina D.</li>
                              <li>Su enfoque es <strong class="text-secondary">menos específico</strong> para
                                el inicio del embarazo.</li>
                            </ul>
                          </div>
                          <div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
                            <img
                              src="img/05.4.png"
                              class="img-fluid"
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="swiper-slide">
                      <div class="card bg-adorno px-3 py-4">
                        <div class="row justify-content-center align-items-center py-2">
                          <div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
                            <h3 class="fw-medium text-purple-1">Previta Mom</h3>
                            <ul class="mb-0 bul1">
                              <li>Suplemento prenatal con <strong class="text-secondary">perfil
                                  general</strong> de vitaminas y minerales.</li>
                              <!--  <li>Puede tener <strong class="text-secondary">menor diversidad de
                                  nutrimentos</strong> frente a opciones más completas.</li> -->
                              <li>Contiene cantidades de <strong class="text-secondary">omega 3</strong>
                                inferiores a los requerimientos de las guías de nutrición</li>
                              <li><strong class="text-secondary">Limitado en antioxidantes</strong> y algunos
                                minerales clave.</li>
                              <li>No está enfocado específicamente para <strong
                                  class="text-secondary">preconcepción <!-- y primer trimestre --></strong>.
                              </li>
                            </ul>
                          </div>
                          <div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
                            <img
                              src="img/05.5.png"
                              class="img-fluid"
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="swiper-slide">
                      <div class="card bg-adorno px-3 py-4">
                        <div class="row justify-content-center align-items-center py-2">
                          <div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
                            <h3 class="fw-medium text-purple-1">Nocele</h3>
                            <ul class="mb-0 bul1">
                              <li>Solo tiene <strong class="text-secondary">ácido folico</strong> (su fórmula está basada únicamente en L-metilfolato)</li>
                              <!-- <li>Basado principalmente en <strong class="text-secondary">ácido fólico y
                                  nutrimentos básicos</strong>.</li> -->
                              <!-- <li>Su fórmula es <strong class="text-secondary">limitada para cubrir
                                  necesidades metabólicas complejas</strong>.</li> -->
                              <li><strong class="text-secondary">No incluye antioxidantes ni complejo B
                                  completo</strong>.</li>
                              <!-- <li>Proporciona un soporte <strong class="text-secondary">menos
                                  integral</strong> para el periodo preconcepcional y las primeras semanas.
                              </li> -->
                              <li>Proporciona un soporte <strong class="text-secondary">limitado</strong> para
                                el periodo preconcepcional y las
                                primeras semanas</li>
                            </ul>
                          </div>
                          <div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
                            <img
                              src="img/05.6.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-lg-3 animate__animated animate__pulse animate__infinite"
              >
                <img
                  src="img/05.8.png"
                  class="img-fluid"
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  $(function () {
    "use strict";

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

    const paths = [
      "audio/audiom18.mp3",
      "audio/audiom19.mp3",
      "audio/audiom20.mp3",
      "audio/audiom21.mp3",
      "audio/audiom22.mp3",
      "audio/audiom23.mp3",
      "audio/audiom24.mp3"
    ];
    let audios = [];
    paths.forEach(function (element) {
      audios.push(CourseNav.createSound(element));
    });

    CourseNav.audioController.stopAllSoundsAndPlay(audiom17);

    audiom17.on('play', function () {
      $('.apa0').show();
    });

    audiom17.on('end', function () {
      $('.grid-competidores').hide();
      $('.apa1').show();
      CourseNav.audioController.stopAllSoundsAndPlay(audios[0]);
    });

    const mySwiper = new Swiper(".cid1", {
      effect: "slide",
      autoHeight: true,
      slidesPerView: 1, // Mobile: 1 slide a la vez
      spaceBetween: 20,
      allowTouchMove: false,
      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>