324 lines
15 KiB
HTML
324 lines
15 KiB
HTML
<style>
|
||
.fake {
|
||
background-image: url('img/mo.png');
|
||
background-size: cover;
|
||
background-position: center;
|
||
}
|
||
|
||
/* --- Contenedor de la Burbuja --- */
|
||
.speech-bubble {
|
||
position: relative;
|
||
background: #ffffff; /* Fondo blanco */
|
||
color: #333333; /* Texto oscuro para legibilidad */
|
||
border-radius: 0.5em;
|
||
padding: 1.5rem;
|
||
font-size: 1.1rem;
|
||
min-height: 120px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Sombra para resaltar sobre el fondo */
|
||
transition: all 0.3s ease-in-out;
|
||
}
|
||
|
||
.bubble-text {
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* --- Animaciones de Personajes (Foco visual) --- */
|
||
.speaker-active {
|
||
transform: scale(1.05);
|
||
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.speaker-inactive {
|
||
opacity: 0.6;
|
||
transform: scale(0.95);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
/* --- COMPORTAMIENTO MOBILE (Apilamiento vertical de Bootstrap) --- */
|
||
@media (max-width: 767.98px) {
|
||
/* Apunta hacia arriba (al Médico) */
|
||
.speech-bubble-left::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 50%;
|
||
top: -20px;
|
||
transform: translateX(-50%);
|
||
border: 20px solid transparent;
|
||
border-width: 0 20px 20px 20px;
|
||
border-bottom-color: #ffffff; /* Coincide con el fondo blanco */
|
||
margin: 0;
|
||
}
|
||
|
||
/* Apunta hacia abajo (al Representante) */
|
||
.speech-bubble-right::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 50%;
|
||
top: auto;
|
||
bottom: -20px;
|
||
transform: translateX(-50%);
|
||
border: 20px solid transparent;
|
||
border-width: 20px 20px 0 20px;
|
||
border-top-color: #ffffff; /* Coincide con el fondo blanco */
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
/* --- COMPORTAMIENTO DESKTOP (md y superior) --- */
|
||
@media (min-width: 768px) {
|
||
/* Apunta hacia la izquierda */
|
||
.speech-bubble-left::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
width: 0;
|
||
height: 0;
|
||
border: 20px solid transparent;
|
||
border-right-color: #ffffff; /* Coincide con el fondo blanco */
|
||
border-left: 0;
|
||
margin-top: -20px;
|
||
margin-left: -20px;
|
||
transform: none;
|
||
}
|
||
|
||
/* Apunta hacia la derecha */
|
||
.speech-bubble-right::after {
|
||
content: '';
|
||
position: absolute;
|
||
right: 0;
|
||
left: auto;
|
||
top: 50%;
|
||
width: 0;
|
||
height: 0;
|
||
border: 20px solid transparent;
|
||
border-left-color: #ffffff; /* Coincide con el fondo blanco */
|
||
border-right: 0;
|
||
margin-top: -20px;
|
||
margin-right: -20px;
|
||
transform: none;
|
||
}
|
||
}
|
||
</style>
|
||
</style>
|
||
|
||
<div class='page-sco py-3 py-md-4 bg-transparent'>
|
||
<div class='container'>
|
||
<div class='row justify-content-center align-items-center'>
|
||
<div class='col-12 anim0'>
|
||
<div class='row justify-content-center align-items-center'>
|
||
|
||
<div class='col-12 text-center'>
|
||
<h2 class='mb-4 fw-semibold text-center'>Manejo de Objeciones</h2>
|
||
</div>
|
||
|
||
<!-- Avatar Médico -->
|
||
<div class='col-6 col-md-3 text-center'>
|
||
<img src='img/med.png' class='img-fluid speaker-inactive' alt='Médico' id="medico">
|
||
</div>
|
||
|
||
<!-- Contenedor Dinámico de Diálogo -->
|
||
<div class='col-12 col-md-6 text-center'>
|
||
<div id="dialogue-bubble" class="speech-bubble">
|
||
<div id="dialogue-text" class="bubble-text">
|
||
<!-- El texto se inyecta dinámicamente mediante JS -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Avatar Representante -->
|
||
<div class='col-6 col-md-3 text-center'>
|
||
<img src='img/rep.png' class='img-fluid speaker-inactive' alt='Representante' id="rep">
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
/**
|
||
* Módulo de Diálogo Interactivo
|
||
* Orquesta la secuencia de texto y audio, manipulando el DOM según el hablante activo.
|
||
*/
|
||
$(function () {
|
||
"use strict";
|
||
|
||
$('body').addClass('fake');
|
||
|
||
// Configuración de la secuencia del diálogo
|
||
const mo = [
|
||
{
|
||
text: "¿Qué evidencia respalda el uso de Papilocare<sup>®</sup> en pacientes con VPH?",
|
||
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/0026-papilocare-ob1.mp3') : null,
|
||
img: '#medico'
|
||
},
|
||
{
|
||
text: "Claro, doctor, entiendo su pregunta. El sustento científico detrás de las opciones terapéuticas es sumamente importante. Y si hablamos de evidencia sólida en VPH, Papilocare<sup>®</sup> tiene datos muy consistentes, tanto en ensayos clínicos como en la vida real, y eso es lo que realmente marca la diferencia en consulta con sus pacientes.",
|
||
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo01.mp3') : null,
|
||
img: '#rep'
|
||
},
|
||
{
|
||
text: "En el ensayo clínico PALOMA, vemos que a los 6 meses casi 9 de cada 10 pacientes (84.9%) normalizan sus lesiones con Papilocare<sup>®</sup>, frente a un 64.5% con espera vigilante.",
|
||
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo02.mp3') : null,
|
||
img: '#rep'
|
||
},
|
||
{
|
||
text: "Es decir, no solo acompañamos la evolución natural, sino que aceleramos y potenciamos la reparación del epitelio cervical de forma significativa. Un dato adicional muy interesante es que, en pacientes con VPH de alto riesgo, la eficacia se incrementa aún más: 87.8% frente a 56.0% del grupo control.",
|
||
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo03.mp3') : null,
|
||
img: '#rep'
|
||
},
|
||
{
|
||
text: "Es un dato relevante, ¿no le parece, doctor? En mujeres mayores de 40 años, donde sabemos que la regresión espontánea del virus disminuye, Papilocare<sup>®</sup> consigue más del 90% de reparación (92.3%) frente a solo un 50% del grupo control.",
|
||
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo04.mp3') : null,
|
||
img: '#rep'
|
||
},
|
||
{
|
||
text: "Hablemos ahora de la práctica en el mundo real, no nos quedemos solo en estudios clínicos controlados: en el estudio PAPILOBS, en condiciones habituales de consulta, vemos que el 67% de las pacientes ya han reparado sus lesiones a los 6 meses, y si continuamos el seguimiento hasta los 12 meses, alcanzamos un 77.1% de reparación acumulada.",
|
||
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo05.mp3') : null,
|
||
img: '#rep'
|
||
},
|
||
{
|
||
text: "En resumen, doctor, lo que aporta Papilocare<sup>®</sup> a sus pacientes con VPH es tranquilidad y eficacia: evidencia clínica robusta y resultados reproducibles en la vida real, con un impacto sumamente favorable en pacientes de alto riesgo que tienen un pronóstico poco alentador.",
|
||
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo06.mp3') : null,
|
||
img: '#rep'
|
||
},
|
||
{
|
||
text: "Papilocare<sup>®</sup> es una opción terapéutica ideal como coadyuvante para sus pacientes con VPH, respaldada por evidencia científica sólida y con resultados de eficacia en aclaramiento sumamente alentadores.",
|
||
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo07.mp3') : null,
|
||
img: '#rep'
|
||
},
|
||
{
|
||
text: "Yo utilizo Deflagyn, ¿por qué debería utilizar Papilocare<sup>®</sup>?",
|
||
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/0028-papilocare-ob2.mp3') : null,
|
||
img: '#medico'
|
||
},
|
||
{
|
||
text: "Doctor, gracias por compartir conmigo el uso que hace de Deflagyn; sin duda es una alternativa interesante por su efecto barrera y su efecto antioxidante. Me gustaría mencionar la diferencia clave con Papilocare<sup>®</sup>.",
|
||
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo08.mp3') : null,
|
||
img: '#rep'
|
||
},
|
||
{
|
||
text: "Y es que este no se limita a generar una acción fisicoquímica local, sino que está diseñado para actuar de forma biológica y multi-target, abordando los factores que realmente condicionan la persistencia del VPH y la regresión de la lesión.",
|
||
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo09.mp3') : null,
|
||
img: '#rep'
|
||
},
|
||
{
|
||
text: "Por ejemplo, Papilocare<sup>®</sup> no solo protege la superficie, sino que favorece una reepitelización activa. Gracias a componentes como la Centella asiática y el ácido hialurónico, estimula la síntesis de colágeno y fibronectina, acelerando la reparación de la zona de transformación, que es justamente donde el virus tiende a integrarse y perpetuarse.",
|
||
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo10.mp3') : null,
|
||
img: '#rep'
|
||
},
|
||
{
|
||
text: "Además, tiene un componente que Deflagyn no ofrece: el Coriolus versicolor, el cual proporciona una inmunomodulación local. El Coriolus versicolor estimula la respuesta inmune en el microambiente cervical, incrementando citocinas como IL-1β, IL-6 y TNF-α, y activando células NK y macrófagos, lo que ayuda al organismo a reconocer al virus.",
|
||
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo11.mp3') : null,
|
||
img: '#rep'
|
||
},
|
||
{
|
||
text: "Un tercer punto muy relevante es la restauración de la microbiota cervical. Papilocare<sup>®</sup> incorpora Bioecolia®, un prebiótico específico que favorece selectivamente el crecimiento de Lactobacillus crispatus y limita patógenos como Gardnerella vaginalis. Esto ofrece un abordaje mucho más completo.",
|
||
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo12.mp3') : null,
|
||
img: '#rep'
|
||
},
|
||
{
|
||
text: "¿Por qué hacer que mi paciente gaste en Papilocare<sup>®</sup> si el VPH no se cura?",
|
||
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/0030-papilocare-ob3.mp3') : null,
|
||
img: '#medico'
|
||
},
|
||
|
||
{
|
||
text: "Es cierto que no hay un tratamiento antiviral curativo, pero el uso de Papilocare<sup>®</sup> mostró un aumento significativo en la tasa de aclaramiento viral a los 6 meses frente a la conducta habitual de 'esperar y vigilar': 70% versus 52%.",
|
||
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo13.mp3') : null,
|
||
img: '#rep'
|
||
},
|
||
{
|
||
text: "Además, doctor, hay un punto que muchas veces se subestima: el impacto emocional del diagnóstico sin intervención.",
|
||
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo14.mp3') : null,
|
||
img: '#rep'
|
||
},
|
||
{
|
||
text: "Para muchas pacientes, escuchar 'tiene VPH, pero solo espere' genera ansiedad, incertidumbre y, en muchos casos, las lleva a buscar alternativas sin sustento científico que pueden terminar siendo costosas o incluso perjudiciales.",
|
||
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo15.mp3') : null,
|
||
img: '#rep'
|
||
},
|
||
{
|
||
text: "Ofrecer una alternativa coadyuvante con respaldo clínico como Papilocare<sup>®</sup> le permite a la paciente asumir un rol activo en su proceso, mejora su adherencia al seguimiento citológico y le da la tranquilidad de estar siendo tratada.",
|
||
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo16.mp3') : null,
|
||
img: '#rep'
|
||
},
|
||
{
|
||
text: "De hecho, en el ensayo PALOMA, las pacientes tratadas con Papilocare<sup>®</sup> reportaron una reducción significativa del estrés percibido, mientras que el grupo en vigilancia expectante mostró un incremento en sus niveles de ansiedad. ",
|
||
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo17.mp3') : null,
|
||
img: '#rep'
|
||
},
|
||
{
|
||
text: "Más que hablar de 'hacer gastar' a la paciente, hablamos de invertir en una intervención respaldada por evidencia que acelera el aclaramiento, reduce el tiempo de persistencia viral y mejora su bienestar emocional durante el seguimiento.",
|
||
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo18.mp3') : null,
|
||
img: '#rep'
|
||
},
|
||
{
|
||
text: "Coincidiremos en que, si podemos ofrecerle a una paciente una herramienta segura que disminuya esa ventana de riesgo y le dé tranquilidad mientras seguimos su evolución, vale la pena considerarla como parte de un manejo integral, ¿no le parece?",
|
||
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo19.mp3') : null,
|
||
img: '#rep'
|
||
},
|
||
];
|
||
|
||
// Caché de elementos del DOM
|
||
const $bubble = $('#dialogue-bubble');
|
||
const $text = $('#dialogue-text');
|
||
const $medico = $('#medico');
|
||
const $rep = $('#rep');
|
||
|
||
/**
|
||
* Ejecuta un nodo de diálogo recursivamente hasta finalizar el array.
|
||
* @param {number} index - Índice actual de la conversación.
|
||
*/
|
||
function playDialogueStep(index) {
|
||
// Condición de cierre: Secuencia terminada
|
||
if (index >= mo.length) {
|
||
if (typeof CourseNav !== 'undefined' && typeof CourseNav.completeLesson === 'function') {
|
||
CourseNav.setSlideVisited();
|
||
}
|
||
return;
|
||
}
|
||
|
||
const currentStep = mo[index];
|
||
|
||
// 1. Actualizar texto con transición limpia
|
||
$text.hide().html(`<p class="mb-0 m-0">${currentStep.text}</p>`).fadeIn(300);
|
||
|
||
// 2. Gestionar la orientación de la burbuja y el foco en los personajes
|
||
if (currentStep.img === '#medico') {
|
||
$bubble.removeClass('speech-bubble-right').addClass('speech-bubble-left');
|
||
$medico.removeClass('speaker-inactive').addClass('speaker-active');
|
||
$rep.removeClass('speaker-active').addClass('speaker-inactive');
|
||
} else if (currentStep.img === '#rep') {
|
||
$bubble.removeClass('speech-bubble-left').addClass('speech-bubble-right');
|
||
$rep.removeClass('speaker-inactive').addClass('speaker-active');
|
||
$medico.removeClass('speaker-active').addClass('speaker-inactive');
|
||
}
|
||
|
||
// 3. Reproducir audio e instanciar el listener recursivo
|
||
if (typeof CourseNav !== 'undefined' && CourseNav.audioController && currentStep.sound) {
|
||
CourseNav.audioController.stopAllSoundsAndPlay(currentStep.sound);
|
||
|
||
// Asumiendo que CourseNav utiliza Howler.js u otra API basada en eventos (on/once)
|
||
currentStep.sound.once("end", function () {
|
||
playDialogueStep(index + 1);
|
||
});
|
||
} else {
|
||
// Fallback para entornos de desarrollo donde el audio no esté cargado
|
||
console.warn(`[Modo Desarrollo]: Simulando delay para el audio de: ${currentStep.img}`);
|
||
setTimeout(() => {
|
||
playDialogueStep(index + 1);
|
||
}, 4000);
|
||
}
|
||
}
|
||
|
||
// Inicializar el diálogo
|
||
playDialogueStep(0);
|
||
});
|
||
</script> |