339 lines
16 KiB
HTML
339 lines
16 KiB
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;
|
|
}
|
|
|
|
@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>
|
|
<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></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 () {
|
|
$('.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>
|