Ogestan_Drossagyn_Papilocare/Ogestan_andractiv/contenido/04.html

<style>
    .page-sco {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .foco-wrap {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .foco-img {
        width: 100%;
        height: auto;
        object-fit: contain;
        filter: drop-shadow(0 0 18px #fff8) drop-shadow(0 0 8px #ffe06633);
        transition: filter 0.6s cubic-bezier(.68, -0.55, .27, 1.55), transform 0.35s;
        cursor: pointer;
    }

    .foco-prendido {
        filter: drop-shadow(0 0 32px #fff) drop-shadow(0 0 16px #FBC518aa);
    }

    .foco-prendido:hover,
    .foco-prendido:focus {
        filter: drop-shadow(0 0 48px #fff) drop-shadow(0 0 28px #FBC518cc) brightness(1.2);
        transform: scale(1.04) rotate(-2deg);
    }

    .foco-apagado {
        filter: drop-shadow(0 0 6px #aaa2) grayscale(0.2);
    }

    .foco-apagado:hover,
    .foco-apagado:focus,
    .btn-open-pop:hover {
        filter: drop-shadow(0 0 28px #fff) drop-shadow(0 0 14px #FBC51899);
        transform: scale(1.04) rotate(2deg);
    }

    .foco-bubble {
        background: rgba(55, 173, 255, 0.2);
        color: #fff;
        border: 0px solid #fff;
        border-radius: 2rem;
        padding: 1.5rem 2rem;
        line-height: 1.45;
        box-shadow: 0 6px 28px -8px #0008;
        margin: 0.5rem 0;
        position: relative;
        transition: box-shadow 0.3s;
        display: none;
        /* Ocultar inicialmente */
    }

    .foco-bubble.show {
        display: block;
    }

    .foco-bubble .resalta {
        background: #FBC518;
        color: #222;
        border-radius: 0.33em;
        padding: 0 0.25em;
        font-weight: 600;
    }

    /* .text-yellow {
        color: #ffc306 !important;
    } */

    @media (max-width: 767.98px) {
        .foco-wrap {
            width: 100%;
            height: 100%;
        }

        .foco-img {
            width: 100%;
            height: auto;
        }

        .foco-bubble {
            padding: 1rem 1.2rem;
        }
    }

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

<section class="page-sco back0 py-md-4 py-2">
    <!-- <div class="container-fluid">

    </div> -->
    <div class="container-fluid px-0 my-md-5 my-xl-3 d-none" id="container3">
        <div class="row justify-content-center">
            <div class="col-11 col-md-10 text-white animate__animated animate__fadeInDown">
                <h2 class="fw-semibold text-center text-blue-6">Beneficios Generales </h2>
                <p>Conoce los beneficios generales de <b class="text-blue-6">OGestan<sup class="text-blue-6">®</sup> Andractiv</b>. Descubre cómo mejora
                    parámetros esenciales del semen y fortalece la fertilidad masculina.</p>
            </div>
        </div>
        <div class="row  align-items-center mb-md-2 animate__animated animate__fadeInLeft">
            <!-- Foco izquierda -->
            <div class="col-6 col-md-3 col-xl-2 d-flex justify-content-center mb-3 mb-md-0">
                <div class="foco-wrap">
                    <img src="img/foco1.png" data-on="img/foco1.png" data-off="img/foco1off.png" alt="Foco encendido"
                        class="foco-img" id="focoIzquierda" />
                </div>
            </div>
            <!-- Texto derecha -->
            <div class="col-12 col-md-8 col-xl-6">
                <div class="foco-bubble">
                    Esta combinación de <b class="text-yellow">Antioxidantes, Vitaminas, Minerales y Omega–3</b> está
                    diseñada para la mejora en la
                    cantidad, calidad y motilidad espermática.
                </div>
            </div>
        </div>

        <div class="row align-items-center justify-content-start flex-row-reverse animate__animated animate__fadeInRight d-none"
            id="focoDerecha">
            <!-- Foco derecha -->
            <div class="col-6 col-md-3 col-xl-2 d-flex justify-content-center mb-3 mb-md-0">
                <div class="foco-wrap">
                    <img src="img/foco2.png" data-on="img/foco2on.png" data-off="img/foco2.png" alt="Foco apagado"
                        class="foco-img foco-apagado" id="focoDerechaImg" />
                </div>
            </div>
            <!-- Texto izquierda -->
            <div class="col-12 col-md-8 col-xl-6">
                <div class="foco-bubble">
                    <ul class="my-0">
                        <li>Mejora la <b class="text-yellow">motilidad</b> de los espermatozoides.</li>
                        <li>Mejora la <b class="text-yellow">morfología</b> del espermatozoide.</li>
                        <li>Mejora el <b class="text-yellow">recuento</b> de espermatozoides.</li>
                        <li>Mejora el <b class="text-yellow">volumen</b> del semen.</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
<script>
    $(function () {
        'use strict';

        // Focos (usa IDs o clases únicas)
        const $focoIzquierda = $("#focoIzquierda");
        const $focoDerecha = $("#focoDerechaImg");

        const audioh17 = CourseNav.createSound('audio/audioh17.mp3');
        const audioh18 = CourseNav.createSound('audio/audioh18.mp3');
        const audioh19 = CourseNav.createSound('audio/audioh19.mp3');


        function setFocoState($img, state) {
            // state = 'on' | 'off'
            if (!$img.length) return;
            const onSrc = $img.data("on");
            const offSrc = $img.data("off");
            if (state === 'on') {
                $img.removeClass('foco-apagado').addClass('foco-prendido');
                if (onSrc) $img.attr('src', onSrc);
            } else {
                $img.removeClass('foco-prendido').addClass('foco-apagado');
                if (offSrc) $img.attr('src', offSrc);
            }
        }


        setFocoState($focoIzquierda, 'off');
        setFocoState($focoDerecha, 'off');
        $focoIzquierda.removeClass('foco-prendido').addClass('foco-apagado');
        $focoDerecha.removeClass('foco-prendido').addClass('foco-apagado');

        // Cuando termina audioh17, muestra container3 y arranca audioh18

        audioh17.on("play", function () {
            $("#container3").removeClass("d-none");
            $("#focoDerecha").removeClass("d-none");
        });

        audioh17.on("end", function () {
            $('.foco-img').addClass('animate__animated animate__headShake animate__infinite');
        });

        // Funcionalidad de clic para el foco izquierdo
        $focoIzquierda.on('click', function () {
            // Mostrar su bubble correspondiente
            $(this).closest('.row').find('.foco-bubble').addClass('show');
            // Reproducir audioh18
            CourseNav.audioController.stopAllSoundsAndPlay(audioh18);
            // Cambiar estado visual
            setFocoState($focoIzquierda, 'on');
            // setFocoState($focoDerecha, 'off');

            $(this).removeClass('animate__animated animate__headShake animate__infinite')
        });

        // Funcionalidad de clic para el foco derecho
        $focoDerecha.on('click', function () {
            // Mostrar su bubble correspondiente
            $(this).closest('.row').find('.foco-bubble').addClass('show');
            // Reproducir audioh19
            CourseNav.audioController.stopAllSoundsAndPlay(audioh19);
            // Cambiar estado visual
            setFocoState($focoDerecha, 'on');
            // setFocoState($focoIzquierda, 'off');
            $(this).removeClass('animate__animated animate__heartBeat animate__infinite')
        });

        // Cuando terminan los audios, marcar como visitado si ambos bubbles están visibles
        function checkCompletion() {
            const bubble1Visible = $('.foco-bubble').eq(0).hasClass('show');
            const bubble2Visible = $('.foco-bubble').eq(1).hasClass('show');
            if (bubble1Visible && bubble2Visible) {
                // Prende ambos focos al completar
                // setFocoState($focoIzquierda, 'on');
                // setFocoState($focoDerecha, 'on');
                CourseNav.setSlideVisited();
            }
        }

        audioh18.on("end", checkCompletion);
        audioh19.on("end", checkCompletion);

        CourseNav.audioController.stopAllSoundsAndPlay(audioh17);

    });
</script>