estructura de nosotros y contacto
This commit is contained in:
+261
-209
@@ -190,224 +190,282 @@ document.addEventListener('DOMContentLoaded', async () => {
|
||||
});
|
||||
|
||||
/* ============================================
|
||||
LÓGICA DEL CUESTIONARIO DE DIAGNÓSTICO
|
||||
DIAGNÓSTICO INTERACTIVO
|
||||
============================================ */
|
||||
function initDiagnostico() {
|
||||
// Elementos del DOM
|
||||
const bienvenida = document.getElementById('diagnostico-bienvenida');
|
||||
const quiz = document.getElementById('diagnostico-quiz');
|
||||
const resultado = document.getElementById('resultado-contenedor');
|
||||
const btnComenzar = document.getElementById('btn-comenzar');
|
||||
const contenedorPreguntas = document.getElementById('cuestionario-contenedor');
|
||||
const barraCompletado = document.getElementById('progreso-completado');
|
||||
const textoProgreso = document.getElementById('progreso-texto');
|
||||
|
||||
// Datos del cuestionario
|
||||
const preguntas = [
|
||||
{
|
||||
id: 1,
|
||||
titulo: "¿En qué etapa se encuentra hoy tu negocio o proyecto?",
|
||||
opciones: [
|
||||
{ letra: "A", texto: "Creando el proyecto desde cero o formalizando una idea reciente." },
|
||||
{ letra: "B", texto: "Negocio o local activo, pero con una imagen visual que no refleja la calidad de lo que vendo." },
|
||||
{ letra: "C", texto: "En pleno movimiento comercial, pero desbordados para contestar consultas a tiempo." },
|
||||
{ letra: "D", texto: "Establecido y con ventas, pero con un techo de crecimiento que necesitamos romper con publicidad." },
|
||||
{ letra: "E", texto: "Empresa consolidada que busca liderazgo de mercado y delegar todo su marketing de punta a punta." },
|
||||
{ letra: "F", texto: "Emprendimiento personal que gestiono por mi cuenta y donde necesito resolver piezas puntuales." }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
titulo: "¿Cuál es tu cuello de botella más urgente hoy?",
|
||||
opciones: [
|
||||
{ letra: "A", texto: "No tengo logo profesional ni página web; me falta confianza frente a la competencia." },
|
||||
{ letra: "B", texto: "No tengo tiempo ni equipo para sacar fotos o grabar videos de buena calidad de mis productos/servicios." },
|
||||
{ letra: "C", texto: "Perdemos clientes potenciales porque tardamos horas en responder WhatsApp o mensajes de redes." },
|
||||
{ letra: "D", texto: "Dependemos del boca a boca o de publicar en redes sin conseguir ventas constantes ni predecibles." },
|
||||
{ letra: "E", texto: "Tenemos acciones aisladas sin una dirección estratégica clara ni medición profesional de métricas." },
|
||||
{ letra: "F", texto: "Me faltan herramientas gráficas o plantillas para diseñar mis propias publicaciones sin perder horas." }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
titulo: "¿Con qué infraestructura digital cuentas actualmente?",
|
||||
opciones: [
|
||||
{ letra: "A", texto: "Prácticamente nada formal (solo una idea, perfil personal o logo provisional)." },
|
||||
{ letra: "B", texto: "Perfil comercial en redes sociales, pero con fotos caseras tomadas con el celular." },
|
||||
{ letra: "C", texto: "Redes y/o tienda activa con alto volumen de mensajes directos diarios sin automatizar." },
|
||||
{ letra: "D", texto: "Redes y web en marcha, pero sin campañas activas de publicidad paga (Meta Ads / Google Ads)." },
|
||||
{ letra: "E", texto: "Ecosistema activo (redes, web, pauta), pero disperso entre distintos proveedores sin sinergia." },
|
||||
{ letra: "F", texto: "Manejo mis propios canales y solo requiero recursos gráficos específicos para seguir operando." }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
titulo: "¿Qué tipo de solución buscas contratar en Amor y Roma?",
|
||||
opciones: [
|
||||
{ letra: "A", texto: "Proyecto inicial integral: crear mi identidad de marca y mi sitio web para salir al mercado." },
|
||||
{ letra: "B", texto: "Acompañamiento mensual con sesiones presenciales de fotos/video para no preocuparme del contenido." },
|
||||
{ letra: "C", texto: "Implementación tecnológica: automatizaciones inteligentes y asistentes para WhatsApp y redes." },
|
||||
{ letra: "D", texto: "Gestión de campañas de publicidad digital y páginas de venta enfocadas 100% en conversión." },
|
||||
{ letra: "E", texto: "Gestión integral 360°: estrategia de marca completa, pauta multicanal, redes y dirección creativa." },
|
||||
{ letra: "F", texto: "Un entregable puntual (diseño de plantilla, digitalización de logo o sesión única de fotos)." }
|
||||
]
|
||||
}
|
||||
];
|
||||
if (!bienvenida || !quiz || !resultado || !btnComenzar) return;
|
||||
|
||||
// Perfiles de resultado
|
||||
const perfiles = {
|
||||
A: {
|
||||
titulo: "Mix Lanzamiento Integral",
|
||||
diagnostico: "Tu proyecto necesita bases sólidas y credibilidad inmediata para competir y generar confianza.",
|
||||
solucion: "Identidad visual completa (Branding) + Diseño Web institucional + Gestión de Redes Sociales (Plan Esencial, $250.000/mes).",
|
||||
cta: "Cotizar Mix Lanzamiento"
|
||||
},
|
||||
B: {
|
||||
titulo: "Mix Comercio & Presencia Visual",
|
||||
diagnostico: "Tu producto o servicio tiene potencial comercial, pero la calidad visual actual en redes te resta ventas.",
|
||||
solucion: "Plan Premium de Redes Sociales ($650.000/mes), que incluye sesión presencial quincenal de fotos y videos profesionales, 8 reels, asistencia con IA y dirección creativa.",
|
||||
cta: "Ver Plan Premium"
|
||||
},
|
||||
C: {
|
||||
titulo: "Solución Eficiencia & Automatización",
|
||||
diagnostico: "Tu principal fuga de dinero es el tiempo de respuesta: consultas demoradas son ventas perdidas.",
|
||||
solucion: "Implementación de Automatizaciones con Asistentes Inteligentes para WhatsApp, Instagram y Facebook + Plan Impulso ($420.000/mes) para ordenar el flujo de mensajes.",
|
||||
cta: "Automatizar mi Atención"
|
||||
},
|
||||
D: {
|
||||
titulo: "Mix Acelerador & Conversión",
|
||||
diagnostico: "Tu marca ya está ordenada visualmente; ahora necesita tráfico calificado y un sistema predecible de atracción de clientes.",
|
||||
solucion: "Servicio de Paid Media (Meta Ads + Google Ads) + Optimización de Landing Page / Catálogo + Creatividades publicitarias de alto impacto.",
|
||||
cta: "Escalar mis Ventas"
|
||||
},
|
||||
E: {
|
||||
titulo: "Servicio Corporativo 360°",
|
||||
diagnostico: "Tu empresa busca liderazgo absoluto de mercado, unificación de imagen y tercerización completa del departamento de marketing.",
|
||||
solucion: "Plan Élite de Redes ($1.000.000/mes) + Branding Integral (packaging, cartelería física) + Pauta multicanal (Meta, TikTok, Google) + Reportes quincenales avanzados con KPIs.",
|
||||
cta: "Agendar Reunión Estratégica"
|
||||
},
|
||||
F: {
|
||||
titulo: "Solución Autogestor / Servicios Puntuales",
|
||||
diagnostico: "Buscas resolver necesidades gráficas puntuales sin comprometerte con un abono mensual recurrente.",
|
||||
solucion: "Paquetes individuales a medida: Digitalización y vectorización de logo, Pack de plantillas editables personalizadas o Producción fotográfica por jornada.",
|
||||
cta: "Elegir Servicios Puntuales"
|
||||
}
|
||||
};
|
||||
// Banco de preguntas
|
||||
const preguntas = [
|
||||
{
|
||||
id: 1,
|
||||
titulo: '¿En qué etapa se encuentra hoy tu negocio o proyecto?',
|
||||
opciones: [
|
||||
{ texto: 'Creando el proyecto desde cero o formalizando una idea reciente.', valor: 'inicio' },
|
||||
{ texto: 'Negocio activo, pero con una imagen visual que no refleja la calidad de lo que vendo.', valor: 'identidad' },
|
||||
{ texto: 'En pleno movimiento comercial, pero desbordados para contestar consultas a tiempo.', valor: 'automatizacion' },
|
||||
{ texto: 'Establecido y con ventas, pero con un techo de crecimiento que necesitamos romper con publicidad.', valor: 'paid' },
|
||||
{ texto: 'Empresa consolidada que busca liderazgo de mercado y delegar todo su marketing.', valor: 'corporativo' },
|
||||
{ texto: 'Emprendimiento personal que gestiono por mi cuenta y necesito resolver piezas puntuales.', valor: 'consultoria' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
titulo: '¿Cuál es tu mayor desafío actual en marketing?',
|
||||
opciones: [
|
||||
{ texto: 'No tengo una identidad clara ni coherente en mis canales.', valor: 'identidad' },
|
||||
{ texto: 'Tengo redes pero no generan consultas ni ventas reales.', valor: 'redes' },
|
||||
{ texto: 'Mi sitio web está desactualizado o no convierte visitantes en clientes.', valor: 'web' },
|
||||
{ texto: 'No tengo tiempo ni equipo para producir contenido constante.', valor: 'contenido' },
|
||||
{ texto: 'Invierto en pauta pero no sé si estoy llegando a la audiencia correcta.', valor: 'paid' },
|
||||
{ texto: 'No tengo una estrategia clara y voy tomando decisiones sobre la marcha.', valor: 'consultoria' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
titulo: '¿Qué objetivo prioritario tenés para los próximos 6 meses?',
|
||||
opciones: [
|
||||
{ texto: 'Lanzar mi marca con una identidad sólida y profesional.', valor: 'identidad' },
|
||||
{ texto: 'Construir una comunidad activa y fiel en redes sociales.', valor: 'redes' },
|
||||
{ texto: 'Tener un sitio web que venda por mí las 24 horas.', valor: 'web' },
|
||||
{ texto: 'Automatizar procesos para ganar tiempo y escalar.', valor: 'automatizacion' },
|
||||
{ texto: 'Escalar ventas con campañas de publicidad pagada.', valor: 'paid' },
|
||||
{ texto: 'Tener un partner estratégico que me acompañe en las decisiones.', valor: 'consultoria' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
titulo: '¿Cómo describirías tu inversión actual en marketing?',
|
||||
opciones: [
|
||||
{ texto: 'Casi nula o muy básica, recién estoy empezando.', valor: 'inicio' },
|
||||
{ texto: 'Baja, hago algunas cosas por mi cuenta pero me falta estructura.', valor: 'identidad' },
|
||||
{ texto: 'Media, invierto en contenido pero no veo retorno claro.', valor: 'contenido' },
|
||||
{ texto: 'Media-alta, ya tengo equipo o freelancers pero falta dirección.', valor: 'consultoria' },
|
||||
{ texto: 'Alta, invierto en pauta y necesito maximizar el ROI.', valor: 'paid' },
|
||||
{ texto: 'Integral, busco una agencia que gestione todo 360°.', valor: 'corporativo' }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
// Estado del cuestionario
|
||||
let preguntaActual = 0;
|
||||
let respuestas = [];
|
||||
// Mapeo de resultados según valor más frecuente
|
||||
const resultados = {
|
||||
inicio: {
|
||||
titulo: 'Plan Esencial',
|
||||
diagnostico: 'Estás en una etapa fundacional. Tu marca necesita bases sólidas antes de escalar.',
|
||||
solucion: 'Te recomendamos comenzar con un <strong>Plan Esencial</strong>: identidad visual básica, sitio web institucional y gestión inicial de redes. Es el punto de partida ideal para construir con estrategia desde el día uno.'
|
||||
},
|
||||
identidad: {
|
||||
titulo: 'Construcción de Identidad Estratégica',
|
||||
diagnostico: 'Tu negocio tiene potencial, pero la percepción visual no está a la altura de lo que ofrecés.',
|
||||
solucion: 'Necesitás un trabajo de <strong>Branding integral</strong>: definir el ADN de tu marca, su posicionamiento y el camino para conectar con tu audiencia ideal de manera auténtica y memorable.'
|
||||
},
|
||||
redes: {
|
||||
titulo: 'Comunidades que Convierten',
|
||||
diagnostico: 'Tenés presencia pero no estás generando el impacto ni la conexión que buscás.',
|
||||
solucion: 'Te recomendamos nuestro servicio de <strong>Gestión de Redes Sociales</strong>: creamos contenido de valor y gestionamos tus canales para construir una comunidad activa, fiel y comprometida con tu marca.'
|
||||
},
|
||||
web: {
|
||||
titulo: 'Experiencias Digitales Impactantes',
|
||||
diagnostico: 'Tu sitio web no está cumpliendo su rol como herramienta de venta y conversión.',
|
||||
solucion: 'Necesitás un <strong>rediseño o desarrollo web estratégico</strong>: un sitio que no solo se vea bien, sino que genere resultados tangibles y convierta visitantes en clientes.'
|
||||
},
|
||||
contenido: {
|
||||
titulo: 'Historias que Enamoran',
|
||||
diagnostico: 'Tenés el negocio andando pero te falta el contenido que conecte emocionalmente con tu audiencia.',
|
||||
solucion: 'Te recomendamos nuestro servicio de <strong>Producción de Contenido Audiovisual y Gráfico</strong>: contenido de alta calidad que cuente la historia de tu marca y cautive a tu audiencia.'
|
||||
},
|
||||
automatizacion: {
|
||||
titulo: 'Automatización de Procesos',
|
||||
diagnostico: 'El crecimiento te está desbordando. Necesitás sistemas que trabajen por vos.',
|
||||
solucion: 'Necesitás <strong>automatizaciones inteligentes</strong>: flujos de WhatsApp, respuestas automáticas y sistemas que liberen tu tiempo para que te enfoques en lo estratégico.'
|
||||
},
|
||||
paid: {
|
||||
titulo: 'Campañas que Escalan Resultados',
|
||||
diagnostico: 'Tenés producto y demanda, pero necesitás acelerar el crecimiento con inversión publicitaria inteligente.',
|
||||
solucion: 'Te recomendamos <strong>Paid Media en Meta, Google y LinkedIn</strong>: campañas gestionadas estratégicamente para maximizar tu ROI y alcanzar a los clientes correctos.'
|
||||
},
|
||||
consultoria: {
|
||||
titulo: 'Asesoramiento Estratégico Integral',
|
||||
diagnostico: 'Tenés recursos y voluntad, pero te falta una brújula estratégica que alinee tus esfuerzos.',
|
||||
solucion: 'Necesitás una <strong>Consultoría de Marketing</strong>: te acompañamos en la toma de decisiones clave, optimizando tus recursos y alineando tu marketing con los objetivos de tu negocio.'
|
||||
},
|
||||
corporativo: {
|
||||
titulo: 'Plan Corporativo 360°',
|
||||
diagnostico: 'Tu empresa está en un nivel donde necesitás un equipo dedicado que gestione todo de forma integral.',
|
||||
solucion: 'Te recomendamos el <strong>Plan Corporativo</strong>: dirección creativa y estratégica, branding integral, pauta multicanal, reportes con KPIs y un equipo dedicado exclusivamente a tu marca.'
|
||||
}
|
||||
};
|
||||
|
||||
// Función para calcular el perfil
|
||||
function calcularPerfil(respuestas) {
|
||||
const conteo = { A: 0, B: 0, C: 0, D: 0, E: 0, F: 0 };
|
||||
|
||||
respuestas.forEach(r => {
|
||||
if (conteo[r] !== undefined) conteo[r]++;
|
||||
// Estado
|
||||
let preguntaActual = 0;
|
||||
const respuestas = [];
|
||||
|
||||
// Iniciar cuestionario
|
||||
btnComenzar.addEventListener('click', () => {
|
||||
bienvenida.style.display = 'none';
|
||||
quiz.style.display = 'block';
|
||||
resultado.style.display = 'none';
|
||||
preguntaActual = 0;
|
||||
respuestas.length = 0;
|
||||
renderizarPregunta();
|
||||
});
|
||||
|
||||
// Encontrar la letra con mayor frecuencia
|
||||
let maxVotos = 0;
|
||||
let ganador = respuestas[1]; // Fallback por defecto: pregunta 2 (cuello de botella)
|
||||
// Renderizar pregunta actual
|
||||
function renderizarPregunta() {
|
||||
const pregunta = preguntas[preguntaActual];
|
||||
const progreso = ((preguntaActual) / preguntas.length) * 100;
|
||||
|
||||
for (const letra in conteo) {
|
||||
if (conteo[letra] > maxVotos) {
|
||||
maxVotos = conteo[letra];
|
||||
ganador = letra;
|
||||
} else if (conteo[letra] === maxVotos && maxVotos > 0) {
|
||||
// Desempate: priorizar la respuesta de la Pregunta 2
|
||||
if (respuestas[1] === letra) {
|
||||
ganador = letra;
|
||||
}
|
||||
barraCompletado.style.width = `${progreso}%`;
|
||||
textoProgreso.textContent = `Pregunta ${preguntaActual + 1} de ${preguntas.length}`;
|
||||
|
||||
let html = `
|
||||
<div class="pregunta-contenedor">
|
||||
<h3 class="pregunta-titulo">${pregunta.titulo}</h3>
|
||||
<div class="opciones-contenedor">
|
||||
`;
|
||||
|
||||
pregunta.opciones.forEach((opcion, index) => {
|
||||
const seleccionada = respuestas[preguntaActual] === opcion.valor ? 'seleccionada' : '';
|
||||
html += `
|
||||
<button class="opcion-tarjeta ${seleccionada}" data-valor="${opcion.valor}" data-index="${index}">
|
||||
<span class="opcion-numero">${index + 1}</span>
|
||||
<span class="opcion-texto">${opcion.texto}</span>
|
||||
</button>
|
||||
`;
|
||||
});
|
||||
|
||||
html += `</div>`;
|
||||
|
||||
// Navegación
|
||||
html += `
|
||||
<div class="pregunta-navegacion">
|
||||
<button class="btn-anterior" ${preguntaActual === 0 ? 'style="visibility: hidden;"' : ''}>
|
||||
← Anterior
|
||||
</button>
|
||||
<button class="btn-siguiente" ${!respuestas[preguntaActual] ? 'disabled' : ''}>
|
||||
${preguntaActual === preguntas.length - 1 ? 'Ver resultado' : 'Siguiente →'}
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
html += `</div>`;
|
||||
|
||||
contenedorPreguntas.innerHTML = html;
|
||||
|
||||
// Event listeners de opciones
|
||||
const opciones = contenedorPreguntas.querySelectorAll('.opcion-tarjeta');
|
||||
opciones.forEach(opcion => {
|
||||
opcion.addEventListener('click', () => {
|
||||
const valor = opcion.dataset.valor;
|
||||
respuestas[preguntaActual] = valor;
|
||||
|
||||
// Actualizar UI
|
||||
opciones.forEach(o => o.classList.remove('seleccionada'));
|
||||
opcion.classList.add('seleccionada');
|
||||
|
||||
// Habilitar botón siguiente
|
||||
const btnSiguiente = contenedorPreguntas.querySelector('.btn-siguiente');
|
||||
if (btnSiguiente) btnSiguiente.disabled = false;
|
||||
});
|
||||
});
|
||||
|
||||
// Navegación
|
||||
const btnAnterior = contenedorPreguntas.querySelector('.btn-anterior');
|
||||
const btnSiguiente = contenedorPreguntas.querySelector('.btn-siguiente');
|
||||
|
||||
if (btnAnterior) {
|
||||
btnAnterior.addEventListener('click', () => {
|
||||
if (preguntaActual > 0) {
|
||||
preguntaActual--;
|
||||
renderizarPregunta();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (btnSiguiente) {
|
||||
btnSiguiente.addEventListener('click', () => {
|
||||
if (respuestas[preguntaActual]) {
|
||||
if (preguntaActual < preguntas.length - 1) {
|
||||
preguntaActual++;
|
||||
renderizarPregunta();
|
||||
} else {
|
||||
mostrarResultado();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return ganador;
|
||||
}
|
||||
// Calcular y mostrar resultado
|
||||
function mostrarResultado() {
|
||||
// Contar frecuencia de cada valor
|
||||
const conteo = {};
|
||||
respuestas.forEach(valor => {
|
||||
conteo[valor] = (conteo[valor] || 0) + 1;
|
||||
});
|
||||
|
||||
// Función para renderizar pregunta
|
||||
function renderizarPregunta() {
|
||||
const contenedor = document.getElementById('cuestionario-contenedor');
|
||||
const pregunta = preguntas[preguntaActual];
|
||||
|
||||
contenedor.innerHTML = `
|
||||
<div class="pregunta-contenedor">
|
||||
<h3 class="pregunta-titulo">${pregunta.titulo}</h3>
|
||||
<div class="opciones-contenedor">
|
||||
${pregunta.opciones.map(opcion => `
|
||||
<button class="opcion-tarjeta" data-letra="${opcion.letra}">
|
||||
${opcion.texto}
|
||||
</button>
|
||||
`).join('')}
|
||||
// Obtener el valor más frecuente
|
||||
let valorGanador = Object.keys(conteo).reduce((a, b) =>
|
||||
conteo[a] > conteo[b] ? a : b
|
||||
);
|
||||
|
||||
const resultadoData = resultados[valorGanador] || resultados.consultoria;
|
||||
|
||||
// Actualizar barra al 100%
|
||||
barraCompletado.style.width = '100%';
|
||||
textoProgreso.textContent = `Completado`;
|
||||
|
||||
// Ocultar quiz y mostrar resultado
|
||||
quiz.style.display = 'none';
|
||||
resultado.style.display = 'block';
|
||||
|
||||
resultado.innerHTML = `
|
||||
<div class="resultado-encabezado">
|
||||
<h3 class="resultado-titulo">${resultadoData.titulo}</h3>
|
||||
<p class="resultado-subtitulo">Según tus respuestas, esto es lo que más te conviene:</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Agregar event listeners a las opciones
|
||||
document.querySelectorAll('.opcion-tarjeta').forEach(tarjeta => {
|
||||
tarjeta.addEventListener('click', () => seleccionarOpcion(tarjeta.dataset.letra));
|
||||
});
|
||||
}
|
||||
<p class="resultado-diagnostico">${resultadoData.diagnostico}</p>
|
||||
<div class="resultado-solucion">
|
||||
${resultadoData.solucion}
|
||||
</div>
|
||||
<div class="resultado-acciones">
|
||||
<a href="contacto.html" class="resultado-cta">
|
||||
Hablemos sobre esto
|
||||
<span aria-hidden="true">→</span>
|
||||
</a>
|
||||
<button class="btn-reiniciar" id="btn-reiniciar-resultado">
|
||||
<span aria-hidden="true">↻</span>
|
||||
Reiniciar diagnóstico
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Función para seleccionar opción
|
||||
function seleccionarOpcion(letra) {
|
||||
respuestas[preguntaActual] = letra;
|
||||
|
||||
// Actualizar barra de progreso
|
||||
const progreso = ((preguntaActual + 1) / preguntas.length) * 100;
|
||||
document.getElementById('progreso-completado').style.width = `${progreso}%`;
|
||||
|
||||
// Avanzar o mostrar resultado
|
||||
if (preguntaActual < preguntas.length - 1) {
|
||||
preguntaActual++;
|
||||
document.getElementById('progreso-texto').textContent = `Pregunta ${preguntaActual + 1} de ${preguntas.length}`;
|
||||
renderizarPregunta();
|
||||
} else {
|
||||
mostrarResultado();
|
||||
// Event listener del botón reiniciar
|
||||
const btnReiniciar = document.getElementById('btn-reiniciar-resultado');
|
||||
if (btnReiniciar) {
|
||||
btnReiniciar.addEventListener('click', () => {
|
||||
resultado.style.display = 'none';
|
||||
bienvenida.style.display = 'flex';
|
||||
preguntaActual = 0;
|
||||
respuestas.length = 0;
|
||||
barraCompletado.style.width = '0%';
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Función para mostrar resultado
|
||||
function mostrarResultado() {
|
||||
const perfilLetra = calcularPerfil(respuestas);
|
||||
const perfil = perfiles[perfilLetra];
|
||||
|
||||
// Ocultar cuestionario y barra de progreso
|
||||
document.getElementById('cuestionario-contenedor').style.display = 'none';
|
||||
document.querySelector('.progreso-barra').style.display = 'none';
|
||||
document.getElementById('progreso-texto').style.display = 'none';
|
||||
document.getElementById('btn-reiniciar').style.display = 'none';
|
||||
|
||||
// Mostrar resultado
|
||||
const resultadoContenedor = document.getElementById('resultado-contenedor');
|
||||
resultadoContenedor.innerHTML = `
|
||||
<h2 class="resultado-titulo">${perfil.titulo}</h2>
|
||||
<p class="resultado-diagnostico">${perfil.diagnostico}</p>
|
||||
<div class="resultado-solucion">
|
||||
<strong>Solución Amor y Roma:</strong><br>
|
||||
${perfil.solucion}
|
||||
</div>
|
||||
<button class="resultado-cta">${perfil.cta}</button>
|
||||
`;
|
||||
resultadoContenedor.style.display = 'block';
|
||||
|
||||
// Event listener al CTA (placeholder por ahora)
|
||||
document.querySelector('.resultado-cta').addEventListener('click', () => {
|
||||
alert('CTA - Por definir acción');
|
||||
});
|
||||
}
|
||||
|
||||
// Función para reiniciar
|
||||
function reiniciarCuestionario() {
|
||||
preguntaActual = 0;
|
||||
respuestas = [];
|
||||
|
||||
// Resetear barra de progreso
|
||||
document.getElementById('progreso-completado').style.width = '0%';
|
||||
document.getElementById('progreso-texto').textContent = 'Pregunta 1 de 4';
|
||||
|
||||
// Mostrar elementos
|
||||
document.getElementById('cuestionario-contenedor').style.display = 'block';
|
||||
document.querySelector('.progreso-barra').style.display = 'block';
|
||||
document.getElementById('progreso-texto').style.display = 'block';
|
||||
document.getElementById('btn-reiniciar').style.display = 'inline-flex';
|
||||
document.getElementById('resultado-contenedor').style.display = 'none';
|
||||
|
||||
// Renderizar primera pregunta
|
||||
renderizarPregunta();
|
||||
}
|
||||
|
||||
// Inicializar cuando el DOM esté listo
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initDiagnostico();
|
||||
});
|
||||
/* ============================================
|
||||
ANIMACIÓN AUTOMÁTICA DE METODOLOGÍA
|
||||
============================================ */
|
||||
@@ -671,15 +729,9 @@ function initNavbarAutoHide() {
|
||||
|
||||
// Inicializar cuestionario al cargar la página
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Solo inicializar si estamos en la sección de diagnóstico
|
||||
if (document.getElementById('cuestionario-contenedor')) {
|
||||
renderizarPregunta();
|
||||
|
||||
// Event listener al botón de reiniciar
|
||||
document.getElementById('btn-reiniciar').addEventListener('click', reiniciarCuestionario);
|
||||
}
|
||||
// Eliminar el bloque del diagnóstico (ya se maneja en initDiagnostico)
|
||||
initMetodologiaAnimation();
|
||||
initPlanesFocusEffect();
|
||||
initPortfolioCarousel();
|
||||
|
||||
initMarqueeHover(); // ← además, esta NUNCA se está llamando
|
||||
});
|
||||
@@ -0,0 +1,74 @@
|
||||
/* ============================================
|
||||
SELECTOR DE PLANES
|
||||
============================================ */
|
||||
function initPlanesSelector() {
|
||||
const tabs = document.querySelectorAll('.plan-tab');
|
||||
const pills = document.querySelectorAll('.plan-pill');
|
||||
const panels = document.querySelectorAll('.plan-panel');
|
||||
|
||||
if (tabs.length === 0 || panels.length === 0) return;
|
||||
|
||||
function activarPlan(planId) {
|
||||
// Desactivar todos los tabs y pills
|
||||
tabs.forEach(tab => {
|
||||
tab.classList.remove('active');
|
||||
tab.setAttribute('aria-selected', 'false');
|
||||
});
|
||||
pills.forEach(pill => {
|
||||
pill.classList.remove('active');
|
||||
pill.setAttribute('aria-selected', 'false');
|
||||
});
|
||||
|
||||
// Desactivar todos los panels
|
||||
panels.forEach(panel => panel.classList.remove('active'));
|
||||
|
||||
// Activar el tab y pill correspondientes
|
||||
const tabActivo = document.querySelector(`.plan-tab[data-plan="${planId}"]`);
|
||||
const pillActivo = document.querySelector(`.plan-pill[data-plan="${planId}"]`);
|
||||
const panelActivo = document.getElementById(`panel-${planId}`);
|
||||
|
||||
if (tabActivo) {
|
||||
tabActivo.classList.add('active');
|
||||
tabActivo.setAttribute('aria-selected', 'true');
|
||||
}
|
||||
if (pillActivo) {
|
||||
pillActivo.classList.add('active');
|
||||
pillActivo.setAttribute('aria-selected', 'true');
|
||||
}
|
||||
if (panelActivo) {
|
||||
panelActivo.classList.add('active');
|
||||
}
|
||||
|
||||
// Scroll suave al panel
|
||||
if (panelActivo) {
|
||||
panelActivo.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
}
|
||||
}
|
||||
|
||||
// Event listeners para tabs
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
const planId = tab.dataset.plan;
|
||||
activarPlan(planId);
|
||||
});
|
||||
});
|
||||
|
||||
// Event listeners para pills
|
||||
pills.forEach(pill => {
|
||||
pill.addEventListener('click', () => {
|
||||
const planId = pill.dataset.plan;
|
||||
activarPlan(planId);
|
||||
});
|
||||
});
|
||||
|
||||
// Soporte para hash en URL (ej: planes.html#premium)
|
||||
const hash = window.location.hash.replace('#', '');
|
||||
if (hash && document.getElementById(`panel-${hash}`)) {
|
||||
activarPlan(hash);
|
||||
}
|
||||
}
|
||||
|
||||
// Inicializar cuando el DOM esté listo
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initPlanesSelector();
|
||||
});
|
||||
Reference in New Issue
Block a user