303 lines
12 KiB
HTML
303 lines
12 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: "No utilizo Drossagyn porque la terapia hormonal aumenta el riesgo de cáncer (principalmente de mama) en las pacientes.",
|
||
|
|
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/0027-Drossagyn-ob1.mp3') : null,
|
||
|
|
img: '#medico'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "Doctor, entiendo perfectamente esa preocupación, porque durante muchos años el tema del riesgo oncológico asociado a la terapia hormonal generó mucha cautela en la práctica clínica.",
|
||
|
|
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo01.mp3') : null,
|
||
|
|
img: '#rep'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "Sin embargo, en los últimos años la evidencia ha permitido confirmar la seguridad de la terapia hormonal.",
|
||
|
|
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo02.mp3') : null,
|
||
|
|
img: '#rep'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "De hecho, este cambio de perspectiva fue tan contundente que en 2025 la FDA retiró las advertencias de seguridad, precisamente porque la evidencia acumulada permitió redefinir el verdadero perfil riesgo-beneficio de estas terapias.",
|
||
|
|
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo03.mp3') : null,
|
||
|
|
img: '#rep'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "Además, cuando hablamos de Drossagyn, estamos hablando de estriol administrado por vía local; la absorción sistémica es mínima, con concentraciones plasmáticas muy bajas, insuficientes para generar la exposición hormonal sostenida que en el pasado se asociaba a preocupación oncológica en las terapias sistémicas.",
|
||
|
|
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo04.mp3') : null,
|
||
|
|
img: '#rep'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "Al mismo tiempo, la administración local de Drossagyn logra una excelente eficacia sobre los tejidos vaginales, restaurando el grosor epitelial, la elasticidad y la lubricación, con un impacto clínico muy claro sobre los síntomas y la calidad de vida de la paciente.",
|
||
|
|
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo05.mp3') : null,
|
||
|
|
img: '#rep'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "Mis pacientes, en general, tienen mala adherencia a tratamientos con cremas vaginales.",
|
||
|
|
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/0029-Drossagyn-ob2.mp3') : null,
|
||
|
|
img: '#medico'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "Entiendo, doctor, de acuerdo con lo que me comenta, que algunas pacientes pueden tener dudas iniciales sobre la aplicación vaginal",
|
||
|
|
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo06.mp3') : null,
|
||
|
|
img: '#rep'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "Sin embargo, cuando experimentan la mejoría directa en síntomas como resequedad, ardor o dispareunia, la adherencia mejora significativamente.",
|
||
|
|
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo07.mp3') : null,
|
||
|
|
img: '#rep'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "Drossagyn actúa directamente en el tejido afectado, lo que permite una recuperación más fisiológica y eficaz del epitelio vaginal, favoreciendo que la paciente perciba el beneficio y continúe el tratamiento.",
|
||
|
|
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo08.mp3') : null,
|
||
|
|
img: '#rep'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "¿No le parece que valdría mucho la pena transmitir a sus pacientes los beneficios que pueden obtener en relación con su calidad de vida con el uso de Drossagyn?",
|
||
|
|
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo09.mp3') : null,
|
||
|
|
img: '#rep'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "Reconozco la importancia de la terapia hormonal local, sin embargo, me funciona muy bien Ovestin. ¿Por qué cambiaría?",
|
||
|
|
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/0031-Drossagyn-ob3.mp3') : null,
|
||
|
|
img: '#medico'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "Doctor, gracias por su comentario.",
|
||
|
|
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo10.mp3') : null,
|
||
|
|
img: '#rep'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "Entiendo con esto que ya cuenta con experiencia en el uso de estriol local. Permítame mencionarle una de las ventajas de Drossagyn: ofrece estriol en una formulación farmacéutica desarrollada bajo estándares europeos y con el respaldo científico de Besins Healthcare, líder global en salud hormonal femenina.",
|
||
|
|
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo11.mp3') : null,
|
||
|
|
img: '#rep'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "Esto le permite contar con una opción confiable dentro de un portafolio especializado en el manejo del síndrome genitourinario de la menopausia. Aunado a lo anterior, Drossagyn es una crema muy ligera y de fácil aplicación que no dejará residuos molestos en la paciente.",
|
||
|
|
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo12.mp3') : null,
|
||
|
|
img: '#rep'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "Un beneficio adicional es que su presentación cubrirá los 3 meses iniciales de tratamiento indicados por las guías para tratar los síntomas genitourinarios de la menopausia.",
|
||
|
|
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo13.mp3') : null,
|
||
|
|
img: '#rep'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "Sin duda, es un tema que puede llamar la atención de sus pacientes.",
|
||
|
|
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo14.mp3') : null,
|
||
|
|
img: '#rep'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "¿no le parece, Doctor?",
|
||
|
|
sound: typeof CourseNav !== 'undefined' ? CourseNav.createSound('audio/mo/mo15.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>
|