Ogestan_Drossagyn_Papilocare/OgestanPre/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;
  }

  .apa0 {
    display: none;
  }

  .grid-containter-expandible {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    justify-content: center;
    align-items: center;
    min-height: 540px;
    gap: 15px;
  }

  .expandible-card {
    cursor: pointer;
    width: 100%;
    height: 80px;
    flex: 0 0 80px;
    transition: flex 0.5s ease, height 0.5s ease;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    border-radius: 1rem;
  }

  .expandible-card.selected {
    flex: 1;
    height: 360px;
  }

  .expandible-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 80px 1fr;
    justify-content: center;
    align-items: center;
  }

  .e-col-r {
    display: none;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
    overflow-y: hidden;
  }

  .e-col-l img {
    max-width: 20%;
  }

  .expandible-card.selected .e-col-r {
    display: flex;
  }

  @media(min-width: 768px) {
    .grid-containter-expandible {
      flex-direction: row;
      height: 510px;
    }

    .expandible-card {
      width: 90px;
      height: 100%;
      flex: 0 0 90px;
    }

    .expandible-card.selected {
      flex: 1;
      height: 100%;
    }

    .expandible-content {
      grid-template-columns: 90px 1fr;
      grid-template-rows: auto;
    }

    .e-col-l img {
      max-width: 100%;
    }

    .e-col-r {
      border-bottom-left-radius: 0;
    }
  }

  @media(min-width: 991px) {
    .grid-containter-expandible {
      height: 430px;
    }
  }
</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 apa0'>
        <div class='row justify-content-center'>
          <div class="col-12 text-white animate__animated animate__lightSpeedInLeft">
            <h2 class="text-pink-3 fw-bold text-center text-md-start">¿Qué es OGestan<sup class="text-pink-3">®</sup> Pré?</h2>
            <p class="animate__animated animate__zoomIn"><strong>OGestan</strong><sup><strong>® </strong></sup><strong>Pré</strong> es un <strong>suplemento alimenticio en
                cápsulas</strong> que combina <strong>L-</strong><strong>metilfolato</strong><strong>, folato, vitaminas y
                minerales</strong>, diseñado especialmente para acompañar las necesidades nutricionales de <strong>todas las mujeres
                en preconcepción</strong> y durante el <strong>primer trimestre del embarazo</strong>.</p>
            <p class="mb-0 animate__animated animate__lightSpeedInLeft animate__delay-15s">Su fórmula está orientada a brindar apoyo en las etapas más tempranas del desarrollo, cuando la suplementación es
              clave para lograr una concepción saludable.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="w-100 py-3 py-md-4 text-center next-action bg-white" style="display: none;">
    <div class="btn-next-section d-inline-block animate__animated animate__pulse animate__infinite" data-sec="sec1">
      <img src="img/nSec.png" class="img-fluid">
    </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'>
        <div class='row justify-content-center'>
          <div class="col-12">
            <div class="row justify-content-center">
              <div class="col-12">
                <div class="grid-containter-expandible">
                  <!--Expandible 1-->
                  <div class="expandible-card bg-pink-1 animate__animated animate__pulse animate__infinite">
                    <div class="expandible-content">
                      <div
                        class="e-col-l punta0 position-relative w-100 h-100 d-flex flex-row justify-content-center align-items-center align-items-md-end">
                        <img src="img/02.3.png" class="img-fluid">
                      </div>
                      <div
                        class="e-col-r position-relative w-100 h-100 flex-row justify-content-center align-items-center px-3 py-2 bg-pink-1">
                        <div class="col-12">
                          <div class="row justify-content-center align-items-center">
                            <div class="col-12 col-lg-6 text-white mb-3 mb-lg-0">
                              <h3 class="fw-bold">Presentación Comercial</h3>
                              <p class="mb-0">Caja de cartón con <strong>30 cápsulas de 1.278gr.</strong> cada una.</p>
                            </div>
                            <div class="col-5 col-md-5 col-lg-6 text-center">
                              <img src="img/02.0.png" class="img-fluid">
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!--Expandible 2-->
                  <div class="expandible-card bg-blue-1 animate__animated animate__pulse animate__infinite">
                    <div class="expandible-content">
                      <div
                        class="e-col-l punta1 position-relative w-100 h-100 d-flex flex-row justify-content-center align-items-center align-items-md-end">
                        <img src="img/02.4.png" class="img-fluid">
                      </div>
                      <div
                        class="e-col-r position-relative w-100 h-100 flex-row justify-content-center align-items-center px-3 py-2 bg-blue-1">
                        <div class="col-12">
                          <div class="row justify-content-center align-items-center">
                            <div class="col-12 col-lg-6 text-white mb-3 mb-lg-0">
                              <h3 class="fw-bold">Indicación</h3>
                              <p class="mb-0">OGestan<sup>®</sup> Pré está indicado como <strong>suplemento alimenticio para todas las mujeres en preconcepción</strong> y durante el <strong>1er trimestre del embarazo</strong>.</p>
                            </div>
                            <div class="col-5 col-md-5 col-lg-6 text-center">
                              <img src="img/02.1.png" class="img-fluid">
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!--Expandible 3-->
                  <div class="expandible-card bg-primary animate__animated animate__pulse animate__infinite">
                    <div class="expandible-content">
                      <div
                        class="e-col-l punta2 position-relative w-100 h-100 d-flex flex-row justify-content-center align-items-center align-items-md-end">
                        <img src="img/02.5.png" class="img-fluid">
                      </div>
                      <div
                        class="e-col-r position-relative w-100 h-100 flex-row justify-content-center align-items-center px-3 py-2 bg-primary">
                        <div class="col-12">
                          <div class="row justify-content-center align-items-center">
                            <div class="col-12 col-lg-6 text-white mb-3 mb-lg-0">
                              <h3 class="fw-bold">Modo de Empleo</h3>
                              <ul class="mb-0 bul0">
                                <li>Se recomienda ingerir <strong>1 cápsula al día</strong>, junto con alguno de los alimentos del día.</li>
                                <li><strong>No exceder</strong> la porción máxima recomendada.</li>
                                <li>Uso recomendado a partir de los <strong>18 años</strong>.</li>
                              </ul>
                            </div>
                            <div class="col-5 col-md-5 col-lg-6 text-center">
                              <img src="img/02.2.png" class="img-fluid">
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  $(function () {
    "use strict";

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

    CourseNav.audioController.stopAllSoundsAndPlay(audiom02);

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

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

    audiom02.on('end',function(){
      $('.next-action').show();
    });

    $('.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();
      }

      // Autoclic en el primer expandible-card después del scroll
      setTimeout(() => {
        const firstCard = $('.expandible-card').first();
        firstCard.trigger('click');
      }, 600);
    });

    $('.expandible-card').click(function () {
      if ($(this).hasClass('selected')) return;
      const cards = $('.expandible-card');
      const selectedIndex = $(this).index();
      cards.removeClass('selected');
      $(this).addClass('selected completed');
      $(this).removeClass('animate__animated animate__pulse animate__infinite');
      CourseNav.audioController.stopAllSoundsAndPlay(audios[selectedIndex]);

      if (cards.length === $('.expandible-card.completed').length) {
        CourseNav.setSlideVisited();
      }
    });
  });
</script>