📄 ARQ & UX – IDE CONSULTORES

1. Mapa del Sitio (Sitemap Definitivo)

La estructura está diseñada para guiar al usuario según su "nivel de conciencia" sobre su propio problema, sin obligarlo a entender la estructura interna de IDE primero.

1. Home (Resumen sistémico y doble vía de entrada)
2. Somos IDE (Identidad, propósito, equipo y metodología)
3. Desafíos (Para el que tiene el problema, pero no sabe qué solución necesita)
4. Soluciones (Para el que sabe exactamente qué busca: ISO, PMO, IA, etc.)
5. Ecosistema (La explicación del "cómo": Excellence, Project, Academy, Digital)
6. IDE Academy (Página de aterrizaje simplificada: propuesta de valor y 2-3 cursos destacados)
7. Insights (Feed dinámico de las 3 últimas entradas del blog de WordPress + enlace al blog completo)
8. Contacto (Formulario inteligente + WhatsApp + Datos)
9. Trabaja con nosotros (Página independiente en el footer para captación de talento)

---

2. Esquemática de la HOME (Wireframe Lógico por Bloques)

Regla de oro: La Home resume, las secciones desarrollan. No repetir la historia completa en cada página.

• Bloque 1: Hero (La Doble Entrada)

  • Eyebrow (Texto pequeño superior): TODO ESTÁ CONECTADO.
  • H1 (Título principal): Mejorar una parte no siempre mejora el todo.
  • Bajada: En una organización, cada decisión genera efectos más allá del lugar donde interviene. Antes de buscar una solución, hay que comprender el sistema.
  • Mecanismo de Doble Entrada (Dos tarjetas o botones prominentes):
    • [ Tengo un desafío, pero no sé exactamente qué necesito ] → Lleva a la página Desafíos.
    • [ Busco una solución concreta (ISO, Proyectos, IA) ] → Lleva a la página Soluciones.

• Bloque 2: La Tensión (El Quiebre)

  • Copy: "Las organizaciones ya tienen procesos, herramientas y personas. Sin embargo, algunos desafíos persisten. Soluciones aisladas para problemas que nunca estuvieron realmente aislados."
  • Visual: Gráfico minimalista y elegante (geometría o nodos) que contraste "partes aisladas" vs. "sistema conectado". Cero estética de "cerebros digitales" o "circuitos".

• Bloque 3: El Principio IDE (La Nueva Forma de Mirar)

  • H2: Comprender el todo para saber dónde intervenir.
  • Metodología (Visual en 4 pasos): 01. Comprender → 02. Focalizar → 03. Integrar → 04. Transformar.

• Bloque 4: El Ecosistema (Demostración de Capacidad)

  • H2: No se trata de sumar soluciones. Se trata de conectar capacidades.
  • Grid de 4 tarjetas interactivas: Excellence | Project | Academy | Digital. (Al hacer hover o clic, se expande brevemente qué resuelve cada una y un link a la página de Ecosistema).

• Bloque 5: Prueba de Autoridad / Sectores

  • Copy: "Acompañamos la transformación en contextos complejos."
  • Visual: Logos de clientes o iconografía limpia de sectores (Agro, Salud, Educación, Industria).

• Bloque 6: CTA Final de Conversión

  • H2: ¿Qué desafío querés transformar?
  • Bajada: Empecemos por entenderlo.
  • Botón Principal: [ HABLEMOS ] (Lleva a Contacto).

---

3. Esquemática de Subpáginas Clave

A. Página: Desafíos

• Propósito: Atender al usuario que dice "Algo no funciona, pero no sé qué necesito".
• Estructura:
  • Header con pregunta empática: "¿Qué está pasando en tu organización?"
  • Listado de tarjetas de desafíos (ej: "Transformar la organización", "Mejorar la gestión", "Incorporar tecnología e IA").
  • Dinámica: Al hacer clic en un desafío, no se recarga la página, se abre un Modal o Acordeón que muestra: Contexto → Preguntas clave → Posibles caminos de intervención → CTA: "Hablemos de este desafío".

B. Página: Soluciones

• Propósito: Atender al usuario que dice "Necesito ISO 9001" o "Necesito una PMO".
• Regla UX: La respuesta concreta debe estar a un clic. Sin filosofía previa.
• Estructura:
  • Buscador o filtro rápido por tipo de solución.
  • Listado claro (ej: ISO 9001, ISO 14001, Gestión de Proyectos, IA).
  • Dinámica: Al entrar a una solución específica (ej: ISO 9001), la página responde: 1. Qué es, 2. Para quién, 3. Qué problema aborda, 4. Cómo intervenimos.
  • Venta cruzada sutil al final: "¿Sabías que un sistema de gestión requiere también desarrollar capacidades en tu equipo? Conocé cómo IDE Academy puede complementar esta implementación".

C. Página: Ecosistema

• Propósito: Explicar el "por qué" y el "cómo" de IDE.
• Estructura: Explicación profunda de las 4 capacidades (Excellence, Project, Academy, Digital). Gráfico visual que muestre cómo se relacionan entre sí (ej: un diagrama de Venn o red de nodos). Énfasis en: "No todos los desafíos necesitan todo el Ecosistema, pero todos se benefician de una mirada que comprende el conjunto".

D. Página: IDE Academy (Alcance MVP)

• Propósito: Mencionar la academia y captar interés para formación In Company o futuros cursos, sin complejidad de LMS.
• Estructura:
  • Header: "Desarrollamos las capacidades que hacen posible la transformación".
  • Breve descripción de la propuesta de valor de la formación en IDE.
  • Sección "Próximos Cursos / Destacados": 2 o 3 tarjetas de cursos (con datos de relleno o planificados: Título, Modalidad, Duración).
  • Dinámica: Al hacer clic en un curso, se abre un Modal con la ficha técnica (Propuesta, Temario, Docente) y un CTA que dice: "Consultar por próximas fechas o formación In Company" (que lleva al formulario de contacto).

E. Página: Insights

• Propósito: Demostrar conocimiento y generar tráfico.
• Dinámica: La página mostrará automáticamente (vía API de WordPress) las 3 últimas entradas del blog en formato de tarjetas (Imagen, Título, Extracto, Fecha).
• CTA: Un botón claro al final: [ Ver todos los artículos en nuestro Blog ] que deriva al subdominio blog.ideconsultores.com.ar.

F. Página: Contacto

• Propósito: Convertir el interés en una conversación comercial con baja fricción.
• Estructura:
  • Mensaje de apertura: "¿Qué desafío querés transformar? Empecemos por entenderlo."
  • Formulario Inteligente:
    1. Nombre
    2. Organización
    3. Rol
    4. Email
    5. Teléfono (Opcional)
    6. Dropdown "Estoy buscando": (Orientación para un desafío / Una solución concreta / Implementar o certificar una norma / Formación para mi organización / Gestionar un proyecto / Transformación digital e IA / Otro).
    7. Campo de texto: "Contanos brevemente en qué podemos ayudarte".
    8. Botón de envío: [ HABLEMOS ]
  • Configuración técnica: El script de envío debe estar configurado para dirigir los datos a info@ideconsultores.com.ar.
  • CTA Secundario: "¿Preferís escribirnos directamente?" → Botón de WhatsApp.

G. Página: Trabaja con nosotros

• Ubicación: Enlace exclusivo en el Footer (pie de página) para no distraer a los clientes potenciales.
• Estructura: Breve texto sobre la cultura de IDE y un formulario simplificado (Nombre, Email, LinkedIn/CV, Área de interés) que también envía a info@ideconsultores.com.ar (o a un alias interno que ellos definan, ej: talento@...).

---

4. Dinámica del Sitio y Reglas de UX (Sin Código)

1. **
   Navegación Mobile First:** En dispositivos móviles, el menú se convierte en un "menú hamburguesa" limpio. Los filtros de la página de Soluciones o las tarjetas de Academy deben ser fácilmente scrolleables horizontalmente o apilados verticalmente con botones grandes (fáciles de tocar con el pulgar).
2. Uso de Modales (Pop-ups): Se utilizarán modales para las fichas de cursos de Academy y para el detalle de los "Desafíos". Esto mantiene al usuario en la misma página, reduciendo la tasa de rebote y acelerando la navegación sin recargar el entorno.
3. Transiciones y Animaciones Funcionales: Solo se usarán animaciones con propósito. Por ejemplo, un fade-in suave al hacer scroll para que los bloques de texto aparezcan con elegancia, o el despliegue fluido de un acordeón. Nada de animaciones que distraigan, mareen o ralenticen la carga.
4. Accesibilidad (A11Y) como estándar:
   • Contraste alto y validado (WCAG) entre textos y fondos en ambos modos de tema.
   • Tamaños de fuente base de al menos 16px para cuerpos de texto.
   • Etiquetas (labels) claras y visibles en todos los campos de formularios.
   • Textos alternativos (alt) descriptivos en todas las imágenes.
   • Navegación completamente operable mediante teclado.
5. Selector de Tema (Modo Claro / Modo Oscuro):
   • Funcionalidad: Un switch discreto pero accesible (ej. ícono de sol/luna) en el header o footer del sitio.
   • Estado por defecto: Modo Claro.
   • Regla de Diseño: El modo oscuro no debe parecer una estética "tech", "hacker" o "cyberpunk" (prohibido usar negros puros #000000 o acentos neón). Debe ser un gris oscuro elegante y mate (ej. #1A1A1A o #2D2D2D) que mantenga la seriedad profesional de la consultora, con textos en blanco o gris muy claro para garantizar una lectura cómoda y reducir la fatiga visual nocturna. La transición entre modos debe ser suave (transición CSS de 0.3s).
6. Integración del Blog (Insights): El desarrollador configurará un endpoint en el WordPress del subdominio para que la página principal de IDE extraiga solo el título, extracto, imagen destacada y enlace de las 3 últimas publicaciones, garantizando que el sitio principal cargue rápido y no se vea afectado por la carga del blog.