- 
+
+
Construir una marca
-
+
+
Construcción de Identidad Estratégica
Definimos el ADN de tu marca, su posicionamiento y el camino para conectar con tu audiencia ideal de manera auténtica y memorable.
Conocer más @@ -54,11 +54,11 @@
- 
+
+
Mejorar presencia digital
-
+
+
Comunidades que Convierten
Creamos contenido de valor y gestionamos tus redes para construir una comunidad activa, fiel y comprometida con tu marca.
Conocer más @@ -69,11 +69,11 @@
- 
+
+
Generar Contenido
-
+
+
Experiencias Digitales Impactantes
Diseñamos y desarrollamos sitios web y plataformas digitales que no solo se ven bien, sino que generan resultados tangibles.
Conocer más @@ -84,11 +84,11 @@
- 
+
+
Automatizar procesos
-
+
+
Historias que Enamoran
Producimos contenido audiovisual y gráfico de alta calidad que cuenta la historia de tu marca y cautiva a tu audiencia.
Conocer más @@ -99,11 +99,11 @@
- 
+
+
Conseguir más clientes
-
+
-
+
diff --git a/scripts/main.js b/scripts/main.js
index bed7f7d..948684e 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -185,4 +185,234 @@ document.addEventListener('DOMContentLoaded', async () => {
if (yearEl) yearEl.textContent = new Date().getFullYear();
initServiciosAccordion();
+});
+
+/* ============================================
+LÓGICA DEL CUESTIONARIO DE DIAGNÓSTICO
+============================================ */
+
+// 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)." }
+ ]
+ }
+];
+
+// 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"
+ }
+};
+
+// Estado del cuestionario
+let preguntaActual = 0;
+let respuestas = [];
+
+// 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]++;
+ });
+
+ // Encontrar la letra con mayor frecuencia
+ let maxVotos = 0;
+ let ganador = respuestas[1]; // Fallback por defecto: pregunta 2 (cuello de botella)
+
+ 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;
+ }
+ }
+ }
+
+ return ganador;
+}
+
+// Función para renderizar pregunta
+function renderizarPregunta() {
+ const contenedor = document.getElementById('cuestionario-contenedor');
+ const pregunta = preguntas[preguntaActual];
+
+ contenedor.innerHTML = `
+
+
Campañas que Escalan Resultados
Gestionamos campañas de paid media en Meta, Google y LinkedIn para maximizar tu ROI y alcanzar a los clientes correctos.
Conocer más @@ -114,11 +114,11 @@
- 
+
+
Consultoría de Marketing
-
+
-
-
+
Asesoramiento Estratégico Integral
Te acompañamos en la toma de decisiones clave, optimizando tus recursos y alineando tu marketing con los objetivos de tu negocio.
Conocer más @@ -129,10 +129,37 @@Sección 3
-Contenido pendiente de definir.
+ +
+
+
+ ¿Qué necesita hoy tu negocio?
+Contamos con soluciones estratégicas para potenciar tu marca en cada etapa de su crecimiento.
+
+
+
+
+
+
+
+ Pregunta 1 de 4
+
+
+
+
+
+
+
+
+
+
+
+ `;
+
+ // Agregar event listeners a las opciones
+ document.querySelectorAll('.opcion-tarjeta').forEach(tarjeta => {
+ tarjeta.addEventListener('click', () => seleccionarOpcion(tarjeta.dataset.letra));
+ });
+}
+
+// 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();
+ }
+}
+
+// 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 = `
+ ${pregunta.titulo}
+
+ ${pregunta.opciones.map(opcion => `
+
+ `).join('')}
+
+ ${perfil.titulo}
+${perfil.diagnostico}
+
+ Solución Amor y Roma:
+ ${perfil.solucion} +
+
+ `;
+ 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 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);
+ }
});
\ No newline at end of file
diff --git a/style/main.css b/style/main.css
index 343a97f..96dc482 100644
--- a/style/main.css
+++ b/style/main.css
@@ -990,8 +990,42 @@ main section h2 {
height: 32px;
object-fit: contain;
flex-shrink: 0;
+ display: inline-block;
+ background-color: currentColor;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
}
+.icon-branding {
+ -webkit-mask-image: url("../assets/iconos/branding.svg");
+ mask-image: url("../assets/iconos/branding.svg");
+}
+.icon-rrss {
+ -webkit-mask-image: url("../assets/iconos/redes_sociales.svg");
+ mask-image: url("../assets/iconos/redes_sociales.svg");
+}
+.icon-web {
+ -webkit-mask-image: url("../assets/iconos/web.svg");
+ mask-image: url("../assets/iconos/web.svg");
+}
+.icon-auto {
+ -webkit-mask-image: url("../assets/iconos/automatizaciones.svg");
+ mask-image: url("../assets/iconos/automatizaciones.svg");
+}
+.icon-paid {
+ -webkit-mask-image: url("../assets/iconos/paid_media.svg");
+ mask-image: url("../assets/iconos/paid_media.svg");
+}
+.icon-add {
+ -webkit-mask-image: url("../assets/iconos/ad_hoc.svg");
+ mask-image: url("../assets/iconos/ad_hoc.svg");
+}
+/**/
+
.servicio-title-short {
font-family: var(--font-title);
font-style: italic;
@@ -1032,6 +1066,14 @@ main section h2 {
height: 64px;
object-fit: contain;
margin-bottom: var(--spacing-xs);
+ display: inline-block;
+ background-color: currentColor;
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ -webkit-mask-position: center;
+ mask-position: center;
+ -webkit-mask-size: contain;
+ mask-size: contain;
}
.servicio-title-long {
@@ -1122,4 +1164,269 @@ main section h2 {
width: 48px;
height: 48px;
}
+}
+/* ============================================
+SECCIÓN DIAGNÓSTICO
+============================================ */
+.diagnostico-section {
+ padding: var(--spacing-lg) var(--spacing-md);
+ background-color: var(--bg-base);
+}
+
+/* Header de la sección (título y subtítulo centrados) */
+.diagnostico-header {
+ text-align: center;
+ max-width: 700px;
+ margin: 0 auto var(--spacing-lg);
+}
+
+.diagnostico-title {
+ font-family: var(--font-title);
+ font-style: italic;
+ font-size: clamp(2rem, 4vw, 3rem);
+ color: var(--text-primary);
+ margin-bottom: var(--spacing-sm);
+ line-height: 1.15;
+}
+
+.diagnostico-subtitle {
+ font-family: var(--font-body);
+ font-size: 1.1rem;
+ color: var(--text-muted);
+ line-height: 1.6;
+}
+
+/* Tarjeta contenedora del cuestionario */
+.diagnostico-card {
+ max-width: 800px;
+ margin: 0 auto;
+ background-color: var(--bg-surface);
+ border-radius: 16px;
+ padding: var(--spacing-md);
+ box-shadow: var(--shadow);
+ border: 1px solid var(--border);
+}
+
+/* Wrapper de la barra de progreso */
+.progreso-wrapper {
+ margin-bottom: var(--spacing-md);
+}
+
+/* Barra de Progreso */
+.progreso-barra {
+ width: 100%;
+ height: 8px;
+ background-color: var(--border);
+ border-radius: 4px;
+ overflow: hidden;
+ margin-bottom: var(--spacing-xs);
+}
+
+.progreso-barra-completado {
+ height: 100%;
+ background-color: var(--btn-primary-bg);
+ width: 0%;
+ transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+ border-radius: 4px;
+}
+
+.progreso-texto {
+ font-family: var(--font-small);
+ font-size: 0.85rem;
+ color: var(--text-secondary);
+ text-align: right;
+}
+
+/* Contenedor de Preguntas */
+.pregunta-contenedor {
+ animation: fadeIn 0.4s ease;
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.pregunta-titulo {
+ font-family: var(--font-subtitle);
+ font-size: 1.35rem;
+ color: var(--text-primary);
+ margin-bottom: var(--spacing-md);
+ font-weight: 400;
+ line-height: 1.3;
+}
+
+.opciones-contenedor {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: var(--spacing-sm);
+}
+
+.opcion-tarjeta {
+ background-color: var(--bg-surface-elevated);
+ border: 2px solid var(--border);
+ border-radius: 12px;
+ padding: var(--spacing-sm);
+ cursor: pointer;
+ transition: all 0.25s ease;
+ font-family: var(--font-body);
+ font-size: 0.95rem;
+ color: var(--text-primary);
+ text-align: left;
+ width: 100%;
+}
+
+.opcion-tarjeta:hover {
+ border-color: var(--btn-primary-bg);
+ background-color: var(--bg-surface);
+ transform: translateX(4px);
+}
+
+.opcion-tarjeta:active {
+ transform: scale(0.98);
+}
+
+.opcion-tarjeta.seleccionada {
+ border-color: var(--btn-primary-bg);
+ background-color: var(--btn-primary-bg);
+ color: var(--text-on-accent);
+}
+
+/* Botón Reiniciar */
+.btn-reiniciar {
+ background: none;
+ border: 1.5px solid var(--border);
+ color: var(--text-secondary);
+ padding: 0.65rem 1.2rem;
+ border-radius: 24px;
+ cursor: pointer;
+ font-family: var(--font-small);
+ font-size: 0.9rem;
+ font-weight: 600;
+ margin-top: var(--spacing-md);
+ transition: all 0.25s ease;
+ display: inline-flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.btn-reiniciar:hover {
+ border-color: var(--btn-primary-bg);
+ color: var(--btn-primary-bg);
+ transform: translateY(-2px);
+}
+
+/* Contenedor de Resultados */
+.resultado-contenedor {
+ animation: fadeIn 0.5s ease;
+ background-color: var(--bg-surface-elevated);
+ border: 2px solid var(--btn-primary-bg);
+ border-radius: 16px;
+ padding: var(--spacing-md);
+ text-align: center;
+}
+
+.resultado-titulo {
+ font-family: var(--font-title);
+ font-style: italic;
+ font-size: clamp(1.5rem, 3vw, 2rem);
+ color: var(--btn-primary-bg);
+ margin-bottom: var(--spacing-sm);
+ font-weight: 700;
+ line-height: 1.2;
+}
+
+.resultado-diagnostico {
+ font-size: 1.05rem;
+ color: var(--text-primary);
+ margin-bottom: var(--spacing-sm);
+ line-height: 1.6;
+}
+
+.resultado-solucion {
+ background-color: var(--bg-surface);
+ border-left: 4px solid var(--btn-primary-bg);
+ padding: var(--spacing-sm);
+ margin: var(--spacing-sm) 0 var(--spacing-md);
+ text-align: left;
+ font-size: 0.95rem;
+ color: var(--text-primary);
+ border-radius: 0 8px 8px 0;
+}
+
+.resultado-cta {
+ background-color: var(--btn-primary-bg);
+ color: var(--text-on-accent);
+ border: none;
+ padding: 0.85rem 2rem;
+ border-radius: 24px;
+ font-family: var(--font-small);
+ font-size: 0.95rem;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.25s ease;
+ box-shadow: 0 4px 14px -3px rgba(186, 18, 77, 0.35);
+ display: inline-block;
+}
+
+.resultado-cta:hover {
+ background-color: var(--btn-primary-hover);
+ transform: translateY(-2px);
+ box-shadow: 0 6px 18px -4px rgba(186, 18, 77, 0.45);
+}
+
+/* ============================================
+RESPONSIVE DIAGNÓSTICO
+============================================ */
+@media (max-width: 768px) {
+ .diagnostico-section {
+ padding: var(--spacing-md) var(--spacing-sm);
+ }
+
+ .diagnostico-card {
+ padding: var(--spacing-sm);
+ }
+
+ .diagnostico-title {
+ font-size: 1.75rem;
+ }
+
+ .diagnostico-subtitle {
+ font-size: 1rem;
+ }
+
+ .pregunta-titulo {
+ font-size: 1.15rem;
+ }
+
+ .opcion-tarjeta {
+ font-size: 0.9rem;
+ padding: var(--spacing-xs);
+ }
+
+ .resultado-titulo {
+ font-size: 1.4rem;
+ }
+
+ .resultado-solucion {
+ font-size: 0.9rem;
+ }
+}
+
+@media (max-width: 480px) {
+ .diagnostico-card {
+ padding: var(--spacing-sm);
+ border-radius: 12px;
+ }
+
+ .opcion-tarjeta {
+ padding: var(--spacing-xs);
+ font-size: 0.85rem;
+ }
}
\ No newline at end of file
+ ${perfil.solucion} +