Documentación del prototipo

1. Concepto visual

«El puente»: un sitio que pregunta antes de mostrar. La dirección de arte cruza tres registros: la sobriedad de una publicación editorial (serif grande, mucho aire, jerarquía clara), la fotografía documental de los encuentros reales de Enlazando Almas y una interfaz digital contenida que solo aparece donde hay una decisión que tomar.

La fotografía de Vibra Fest es el principal diferenciador: rostros, abrazos, auditorios llenos, manos. Hace el trabajo de prueba social que hoy no hace ningún texto, y aleja el sitio de la estética de banco de imágenes del sector.

El único recurso gráfico propio es el hilo: una línea vertical con nodos que viene del tallo y el círculo del símbolo. Aparece solo donde hay un recorrido (progreso del test, pasos de la ruta, historia). No hay formas orgánicas decorativas, degradados ni íconos espirituales.

2. Identidad: paleta y tipografías

La carpeta no incluía manual de identidad visual, logotipo, tipografías ni paleta. Se tomaron del sitio publicado y de las fotografías:

• Logotipo: se conserva el actual. Se vectorizó desde el PNG publicado en enlazandoalmas.com y se crearon una versión horizontal (header) y versiones claras. Conviene reemplazarlo por el archivo vectorial original si existe.
• Color: salvia #959863 (símbolo), grafito #575757 (wordmark), olivo #656742 (el color que más usa el sitio actual). Se añadieron noche y papel para el ritmo de fondos, y ámbar #C4863A —la luz dorada de las fotos— como único acento.
• Tipografía: el sitio actual usa las fuentes por defecto de Elementor (Roboto), que además no cargan. Se proponen Newsreader (títulos) y Hanken Grotesk (texto), libres y autoalojadas. La caligrafía del logo no se usa como fuente.

Ver el sistema de diseño completo

3. Arquitectura

Una sola taxonomía de cinco necesidades atraviesa todo el sitio. La navegación responde a preguntas de la persona, no a la estructura interna.

Menú principal: Temas (panel con las cinco necesidades y entrada al test) · Programas · Experiencias · La Red · Nosotros · botón «Haz el Test ALMA». Enlace secundario «Soy profesional». En móvil: menú a pantalla completa y barra inferior fija con la acción principal de cada página.

4. Páginas desarrolladas

No se creó página de Comunidad: en el MVP es un módulo dentro de Programas y Experiencias, porque la comunidad no se vende sola.

5. Componentes y patrones

Cada sección lleva en el código un atributo data-pattern. Es la unidad que se convierte en plantilla o sección global de Elementor. Activa «Ver notas de decisión» en el botón Prototipo para ver el porqué de cada una.

Componentes base: botón (primario, claro, línea, pequeño), enlace con flecha, etiqueta, chip de filtro, opción (radio en tarjeta), campo, autorización de datos, aviso, tarjeta de profesional, fila de experiencia, lista de artículos, acordeón, el hilo.

6. Recorrido principal

Llega → se reconoce → se orienta → recibe su ruta → da un primer paso → se acompaña → profundiza → vuelve.

1. Llega desde Instagram, Google o Vibra Fest a la home o a un tema.
2. La home le pregunta: «No sé por dónde empezar», «Sé lo que quiero trabajar» o «Busco una experiencia o un acompañante».
3. Hace el Test ALMA (o elige su tema).
4. Ve su resultado breve sin dar datos y deja su contacto para recibir la ruta completa: primera conversión.
5. La ruta le propone lecturas, la guía «Tu brújula interior», profesionales verificados y encuentros, en el orden que prefiera.
6. Compra la guía, entra a la comunidad y al círculo mensual.
7. Más adelante, Ruta ALMA, una experiencia o un profesional. Una nueva necesidad la trae de vuelta.

Ninguna página es terminal: todas tienen un siguiente paso.

7. Función del Test ALMA

Es el mecanismo de orientación del sitio, y por eso cumple tres funciones a la vez: puerta de entrada para quien no sabe por dónde empezar, captación del contacto y segmentación del CRM. No es un producto ni el centro de todo: es una de las tres entradas de la home, la destacada.

• 8 preguntas. Las cuatro primeras puntúan los cinco temas; las cuatro siguientes ordenan y filtran la ruta (experiencia previa, forma de avanzar, ciudad, tiempo).
• Gratuito, no clínico, con aviso visible y derivación a atención en salud.
• Devuelve las mismas necesidades de la taxonomía: así puede recomendar contenido, producto, profesional y experiencia con una sola regla.
• Envía a Brevo: necesidad, secundaria, preferencia, ciudad, tiempo, experiencia previa, origen y canal. Cada resultado activa su secuencia.
• La pregunta de muestra de la home ya inicia el test: el primer clic cuenta.

Las preguntas y el puntaje son de ejemplo. Deben validarse con dos o tres profesionales y partir de «Tu brújula interior».

8. Función de los profesionales

La plataforma orienta primero y conecta después. El directorio deja de ser la puerta principal y se convierte en La Red, que aparece de tres maneras:

• Como resultado: dos o tres fichas en la ruta del test y en cada tema.
• Como confianza: «Pocas personas. Verificadas.», con lo que se verifica a la vista.
• Como índice secundario: /red/ con filtros por necesidad, ciudad y modalidad, para quien llega buscando a alguien concreto.

Cada ficha muestra qué se verificó y cuándo. El teléfono no es público: «Quiero hablar con este profesional» registra el contacto en Brevo y abre WhatsApp con un mensaje listo. Los profesionales firman los artículos de la Biblioteca y los módulos de Ruta ALMA.

9. Decisiones UX relevantes

• Tres intenciones en el hero en lugar de siete botones.
• El test muestra su primera pregunta en la home y avanza solo al elegir; siempre se puede volver.
• Resultado breve sin pedir datos; la ruta completa a cambio del contacto (con opción de seguir sin dejarlos, para discutir en la reunión).
• El orden de la ruta cambia según cómo prefiere avanzar la persona.
• Una acción principal por bloque. En móvil, barra inferior fija con la acción principal de la página.
• El precio aparece donde se decide, nunca en el primer pantallazo.
• Formularios cortos, con autorización explícita de datos (Ley 1581 de 2012). La postulación de profesionales pasa de siete pasos a uno.
• Accesibilidad: un H1 por página, contraste AA, foco visible, navegación por teclado, texto alternativo descriptivo, respeto a «reducir movimiento».

10. Decisiones que todavía requieren validación

11. Recomendaciones para WordPress + Elementor

Modelo de contenido

• Taxonomía compartida necesidad (emociones, relaciones, reconexión, hábitos, propósito) aplicada a entradas, profesionales, programas y experiencias. Es la columna vertebral.
• CPT profesional: rol, ciudad, modalidad, años de práctica, formación, proceso personal (sí/no), fecha de entrevista, fecha de última revisión, servicios (repetidor: nombre, detalle, precio), foto con punto focal, texto en primera persona, WhatsApp (privado). Taxonomías: necesidad, ciudad, modalidad.
• CPT programa: estado (disponible, lista de espera, próximamente), precio, enlace de checkout, qué incluye (repetidor), etapas con profesional guía (relación).
• CPT experiencia: fecha, lugar, tipo (círculo, taller, retiro, festival), facilitador (relación), enlace de pago o boletería.
• Entradas (Biblioteca): autor = profesional (relación), tipo (guía, artículo, práctica), siguiente paso (test, producto o profesional).

Plantillas en Elementor (Theme Builder)

• Header, footer y barra móvil como plantillas globales.
• Single de profesional, programa, experiencia y entrada; archivo de la taxonomía necesidad (página de tema) y de cada CPT, construidos con Loop Grid y consultas filtradas por necesidad.
• Cada data-pattern como plantilla de sección guardada; las tarjetas (profesional, experiencia, artículo) como plantillas de Loop Item.
• Colores y tipografías en los ajustes globales del kit con los mismos nombres del sistema. Nada de valores sueltos por widget.
• Las fuentes se suben como archivos .woff2 (no Google Fonts remoto). En el prototipo están embebidas solo para poder abrirlo sin servidor.

Funcionalidad

• Test ALMA: formulario con lógica condicional y cálculo (Fluent Forms ya está instalado; verificar licencia) que redirige a la página de resultado de cada necesidad y envía los atributos a Brevo. La lógica de puntaje se documenta fuera del plugin.
• Contacto con profesionales: formulario corto → Brevo → WhatsApp con mensaje prellenado y parámetros de origen.
• Analítica: GA4 con Tag Manager y eventos estables desde el primer día: inicio y fin del test, contacto, clic a compra, compra, contacto a profesional.
• Un solo constructor, un solo plugin de formularios, un solo píxel. Sin plugin de directorio, de reservas ni de eventos.

Rendimiento

• Imágenes exportadas en dos tamaños (820 y 1800 px) con srcset; en WordPress, WebP o AVIF automático y carga diferida salvo la imagen del hero.
• Las animaciones del prototipo son CSS y un IntersectionObserver; en Elementor usar los efectos de entrada nativos con la misma suavidad, o ninguno.

12. Fuentes y límites

• Estrategia: propuesta de reestructuración de Elizabeth Echavarría, auditoría estratégica del sitio (7 de octubre de 2026) y documento de definición de la nueva web.
• Voz: manual de voz de marca de Enlazando Almas. Todo el texto se escribió con sus atributos y su territorio prohibido.
• Datos de historia: página /nosotros/ y subdominio de Vibra Fest del sitio actual (2012, más de 25.000 revistas, 6 ediciones, cinco ediciones de Vibra Fest hasta 2025; la de 2026, 19 y 20 de septiembre, con más de 20 expertos).
• Fotografías: carpeta de Vibra Fest. Se usaron 32 de 223, exportadas para web en assets/img/. Las fichas de ejemplo usan fotos reales de facilitadores y asistentes con roles y ciudades ficticios: deben reemplazarse por fichas curadas reales, con autorización de cada persona.
• Todo lo marcado «Ejemplo», «Por definir» o «Por migrar» es ilustrativo.
• El prototipo no envía datos: los formularios muestran qué ocurriría en el CRM.