# INSTRUCTIVO TÉCNICO Y DE DISEÑO: REFACTORIZACIÓN DEFINITIVA WEB "IDE CONSULTORES"

Este documento contiene las especificaciones técnicas (HTML5, CSS3, JavaScript), de interfaz (UI/UX) y de redacción comercial (Copywriting) para guiar la corrección y reestructuración total del sitio web demo de **IDE Consultores**. 

El objetivo es eliminar todo aspecto genérico o sintético ("aspecto de IA") y sustituirlo por una presencia digital auténtica, minimalista, ejecutiva y orientada a la conversión, donde convivan fluidamente el storytelling sistémico y la búsqueda de soluciones técnicas directas.

---

## 1. PRINCIPIOS DE DISEÑO Y DIRECTRICES TÉCNICAS GLOBALES

1. **Estilo Visual e Identidad:**
   
   * **Minimalismo ejecutivo:** Espacios en blanco amplios, composiciones geométricas limpias, sin saturación de gradientes ni fondos oscuros pesados.
   * **Tipografía:** Jerarquía estricta. Fuentes sans-serif modernas y legibles (`Poppins` para títulos principales / `Inter` o `Mulish` para texto de lectura y metadatos).
   * **Paleta Cromática del Ecosistema: (variables en styles.css)**
     * **Color Institucional / Base:** --ide-primary y --ide-accent
     * **IDE Excellence:** --ide-excellence.
     * **IDE Projects:** --ide-projects.
     * **IDE Digital:** --ide-digital.
     * **IDE Academy:** --ide-academy
     

2. **Componentes Globales Estandarizados:**

   * **Ensanchar el sitio:** Utilizar mas los anchos de la pantalla para optimizar el contenido de cada sección.   
   * **Buscador predictivo superior:** Agregar un botón de búsqueda (`<button class="search-btn"><svg class="icon-search">...</svg></button>`) ubicado permanentemente en el header junto al botón principal. Debe permitir la búsqueda rápida de términos clave (*ISO 9001, Productividad, Telecomunicaciones, FTTH, PMO, Procesos, IA, Capacitación*).
   * **Botón CTA Unificado:** Unificar el botón **HABLEMOS →** (`.btn-cta-unificado`). Mismo padding, border-radius (estilo píldora), color corporativo y flecha circular en todas las páginas (header, cierres de sección y footer). No utilizar textos largos como "VER CÓMO AFRONTAMOS ESTE DESAFÍO".
   * **Footer Global Idéntico:** Unificar un único footer en todas las páginas con la siguiente estructura:
     * Izquierda: Logotipo IDE Consultores + lema `"Convertimos la gestión en una ventaja competitiva"`.
     * Centro: Navegación directa (`Inicio` | `Por dónde empezar` | `Soluciones` | `Ecosistema` | `Insights` | `Nosotros`).
     * Derecha: Datos de contacto reales (`info@ideconsultores.com.ar` | Sedes: Salta y Jujuy | Teléfonos: `+54 9 388 4880536` y `+54 9 387 6132059`).
     * Inferior: Enlaces legales (`Política de privacidad` y `Términos y condiciones`) + Redes sociales validadas (LinkedIn, Instagram y Facebook; verificar que el enlace de Facebook no tenga etiqueta de YouTube).

3. **Tratamiento de Contenidos:**
   
   * **Insercion de imagenes de fondos:** Aplicar estilos, layers de colores, degrades y demases efectos visuales y respecto de la imagen que se insertará dejar un placeholder para que luego se escoga del repositorio cual es el archivo de imagen mas adecuado.
  
---

## 2. ARQUITECTURA DEL SITIO Y RUTAS

/
├── index.html              -> INICIO (Conexión sistémica, pilares, ámbitos de experiencia y Brújula)
├── desafios.html           -> POR DÓNDE EMPEZAR (Identificación de problemas organizacionales)
├── soluciones.html         -> SOLUCIONES (Las 6 familias de soluciones + Nivel 2 concreto)
├── ecosistema.html         -> ECOSISTEMA (Infinito interactivo + Nivel 2 desplegable de unidades)
├── insights.html           -> INSIGHTS (Artículos de opinión, tendencias y herramientas descargables)
└── nosotros.html           -> NOSOTROS (Somos IDE: Socios reales, propósito y Trabajá con nosotros)

---

## 3. TAREAS DE REFACTORIZACIÓN POR PANTALLA

### PANTALLA 1: INICIO (`index.html`)

1. **Header / Hero Section:**
   
   * **Mensaje Central:** Invertir la jerarquía. El claim rector debe ser **"CONECTAMOS EL TODO"**.
   * **Pregunta de tensión:** `¿Qué pasa cuando dejamos de mirar los problemas por separado?`
   * **Texto descriptivo (sintetizado):** 
     
     > *"En IDE entendemos cómo funciona el sistema para identificar dónde intervenir, integrar las capacidades necesarias y generar valor en el conjunto."*
   * **Fondo visual:** Reemplazar la animación de malla ("efecto pecera") por un fondo estático limpio con degradado hacia el texto para máxima legibilidad, acompañado de una cinta de infinito sutil con halos en los cuatro colores del ecosistema.
   * **Elementos UI:** Input o botón directo con lupa para el buscador rápido + botón **HABLEMOS →**.

2. **Sección Cuatro Pilares (Ecosistema):**
   
   * **Título:** `"Cuatro capacidades, un mismo propósito: generar impacto."` (en un solo renglón, sin eyebrow redundante).
   * **Diseño:** Grilla 2x2 apaisada o 4 columnas limpias con tarjeta estilizada: foto real de contexto superior, ola de color distintiva, ícono vectorial y títulos en mayor escala:
     * *IDE Excellence:* `PARA FORTALECER LA GESTIÓN`
     * *IDE Projects:* `PARA CONVERTIR PROYECTOS EN RESULTADOS`
     * *IDE Digital:* `PARA INTEGRAR TECNOLOGÍA CON PROPÓSITO`
     * *IDE Academy:* `PARA DESARROLLAR CAPACIDADES`

3. **Sección Ámbitos de Experiencia:**
   
   * **Estructura:** Título a la izquierda y tarjetas interactivas a la derecha.
   * **Bajada:** `"Comprendemos las particularidades de cada sector para adaptar la intervención sin perder de vista el conjunto."`
   * **Ajuste fotográfico:** Cambiar la foto de fondo de *Industria & Servicios* por una planta industrial/metalmecánica o línea de montaje (no alimenticia).
   * **Incorporación obligatoria:** Añadir la tarjeta de **Telecomunicaciones**.
   * **Comportamiento UI:** Las tarjetas solo muestran el título por defecto; el texto descriptivo aparece exclusivamente en estado `:hover`:
     * *Agro & Alimentos* $\rightarrow$ `"Fortalecer operaciones y generar valor sostenible."`
     * *Industria & Servicios* $\rightarrow$ `"Optimizar la gestión y potenciar la eficiencia operativa."`
     * *Telecomunicaciones* $\rightarrow$ `"Impulsar conectividad eficiente mediante operaciones y proyectos integrados."`
     * *Sector Salud* $\rightarrow$ `"Fortalecer la calidad, la seguridad y la experiencia del paciente."`
     * *Educación & Gobierno* $\rightarrow$ `"Fortalecer la gestión y generar mejores resultados."`

4. **Sección Incomodidad Productiva & Brújula IDE:**
   
   * Unificar ambas secciones en un solo bloque para optimizar la altura de la página.
   * **Título:** `"¿Qué impacto tendrá esa mejora en el conjunto?"`
   * **Cuerpo:** `"Una mejora puede resolver una necesidad puntual. En IDE vamos un paso más allá: ¿qué impacto tendrá esa mejora en el conjunto?"`
   * **Brújula IDE:** Ubicar el componente interactivo en paralelo con una marca de agua suave de brújula.

5. **Cierre de Conversión:**
   
   * Módulo limpio: `"¿Qué desafío querés transformar?"` + botón **HABLEMOS →**.

---

### PANTALLA 2: POR DÓNDE EMPEZAR / DESAFÍOS (`desafios.html`)

1. **Cabecera Asimétrica:**
   
   * Texto a la izquierda (en 2 líneas): `"¿Qué está pasando en tu organización?"`
   * Bajada: `"A veces el desafío es evidente. Otras, aparece como una señal, una necesidad de cambio o una oportunidad. Empecemos por comprenderlo para identificar dónde intervenir."`
   * Gráfico a la derecha: Cinta de infinito pausada interconectando Estrategia, Procesos, Tecnología, Personas y Resultados.

2. **Grilla de Señales y Desafíos:**
   
   * Tarjetas simplificadas sin textos densos. Sustituir el botón de texto por un selector circular `+` o flecha unificada:
     1. *"La organización creció y necesitamos ordenar los procesos."*
     2. *"Necesitamos mejorar la eficiencia y los resultados."*
     3. *"Queremos desarrollar a nuestras personas y fortalecer equipos."*
     4. *"Buscamos incorporar tecnología o avanzar en la transformación digital."*
     5. *"Necesitamos fortalecer la calidad, el cumplimiento o la gestión de riesgos."*
     6. *Tarjeta de escape:* *"No sé exactamente qué necesito."* $\rightarrow$ `INICIAR BRÚJULA IDE →`

3. **Modales de Diagnóstico:**
   
   * Eliminar cajas monocromáticas y etiquetas pesadas tipo "Contexto y diagnóstico".
   * Estructura limpia: Preguntas disparadoras del cliente, capacidades que intervienen (etiquetas de color) y botón directo de contacto.

4. **Cierre:**
   
   * `"¿Tu situación es diferente? Conversemos..."` + botón **HABLEMOS →**.

---

### PANTALLA 3: ECOSISTEMA (`ecosistema.html`)

1. **Hero del Ecosistema:**
   
   * **Foco Absoluto:** El infinito vectorial como protagonista sobre fondo neutro (eliminar fotos de paisajes).
   * **Animación Funcional:** Ciclo de iluminación suave cada 4 segundos mostrando combinaciones reales de capacidades (e.g., *Excellence + Digital* para "sistemas de gestión con tableros en tiempo real").
   * **Acción:** Al hacer clic en un nodo o tarjeta de capacidad, desplazarse suavemente y abrir el Nivel 2 correspondiente debajo (sin abrir ventanas modales flotantes).

2. **Arquitectura Nivel 2 (Despliegue en la misma página):**
   
   * Configurar anclas y URLs directas (e.g., `/ecosistema#excellence`).
   * **IDE Excellence:**
     * Título: `"Procesos más eficientes, organizaciones más confiables."`
     * Copys revisados: Sustituir "certificación" por *"preparación y acompañamiento para certificar"* (norma ética de consultoría).
     * Chips de normas: `ISO 9001` | `ISO 14001` | `ISO 45001` | `ISO 21001` | `Mejora de procesos` | `RNE / RNPA`.
     * Tarjetas de soluciones con íconos vectoriales y marcas de agua suaves.
   * **IDE Projects:**
     * Título: `"Convertimos iniciativas en resultados concretos."`
     * Ciclo de vida: `1. Planificación y diseño` $\rightarrow$ `2. Ejecución y coordinación` $\rightarrow$ `3. Control y seguimiento` $\rightarrow$ `4. Cierre y resultados`.
     * Sectores clave: Incluir en primer término **Telecomunicaciones (Despliegue de redes FTTH y proyectos de conectividad)**, seguido de Industria, Construcción, Organizaciones educativas y Empresas de servicios.
   * **IDE Digital:**
     * Título: `"Digitalizamos procesos para generar más valor."`
     * Servicios: Automatización de procesos, Integración de plataformas, Dashboards de BI, Soluciones a medida, IA aplicada y Capacitación digital.
     * *Ajuste crítico:* Retirar logotipos no autorizados de terceros (SAP, WTM, TOA) salvo que exista validación documental escrita de alianzas.
   * **IDE Academy:**
     * Tarjeta con botón de redirección directa al sitio específico de Academy (`/academy` o página dedicada).

3. **Preguntas Frecuentes (FAQ):**
   
   * Acordeón desplegable nativo (`<details><summary>...`) que resuelva objeciones comerciales reales: alcance geográfico, contratación independiente de capacidades y seguimiento post-implementación.

---

### PANTALLA 4: IDE ACADEMY (`academy.html`)

1. **Estilo:** Paleta borgoña (`#C21E3A`), estética formativa moderna y académica.
2. **Diferenciales ("Aprender con IDE"):** Tarjetas conectadas por una línea guía sutil con íconos vectoriales (*Contexto Real*, *Aprender Haciendo*, *Mirada Integral*, *Intercambio que Enriquece*, *Aplicación que Continúa*).
3. **Próximas Experiencias:** Carrusel o grilla de 3 cursos destacados con metadatos clave (modalidad sincrónica/presencial, duración en horas, nivel de complejidad y fecha).
4. **Formación In-Company:** Distribución en 3 columnas: (1) Texto conceptual, (2) Bullets de formatos (Cursos, Workshops, Programas, Rutas de aprendizaje) y (3) Fotografía real de capacitación en planta/oficina.
5. **Ajuste de contenido:** **Eliminar** la sección *"Quiénes facilitan el aprendizaje"* en Academy para no duplicar los perfiles de los socios que ya se presentan en la página institucional.
6. **Campus y Recursos:** Bloque dividido al 50%: botón de acceso a *Campus IDE (LMS)* y botón a *Herramientas descargables (plantillas Excel, Business Model Canvas, etc.)*.

---

### PANTALLA 5: SOLUCIONES (`soluciones.html`)

1. **Hero:** Continuidad visual con la cabecera de Desafíos (paso de la detección a la ejecución).
2. **Las Seis Familias:** Grilla de 6 tarjetas con diseño minimalista e íconos de trazo fino:
   * *Procesos y gestión*
   * *Proyectos e innovación*
   * *Tecnología e IA*
   * *Personas y desarrollo*
   * *Calidad, riesgos y cumplimiento*
   * *Sostenibilidad y valor*
3. **Modales de Solución:** Ventana limpia con resumen ejecutivo, listado estructurado de normas/servicios en bullets y botón directo de contacto.
4. **Soluciones Relacionadas:** Módulo inferior que refuerza la sinergia con las cuatro unidades del Ecosistema antes del CTA final.

---

### PANTALLA 6: SOMOS IDE & TRABAJÁ CON NOSOTROS (`nosotros.html`)

1. **Apertura:** Claim institucional: `"Vemos organizaciones. Entendemos sistemas. Conectamos el todo."` junto a la foto grupal real `team4.jpg`.
2. **Filosofía de Trabajo:** Síntesis visual mediante íconos y textos breves de los Principios Guía (*Mirada Sistémica*, *Rigor con sentido práctico*, *Personas como parte del Sistema*, *Capacidades que permanecen*).
3. **Equipo Directivo (Perfiles Reales de los 4 Socios):**
   * Reemplazar maquetas previas por las fotografías reales:
     * **Claudia Raquel Andrés (`CRA.png`):** Socia Fundadora | Estrategia y Gestión de la Calidad.
     * **José Alberto Pugliese (`JAP.png`):** Socio | Proyectos y Metodologías Ágiles.
     * **Miguel Ángel Rojas (`MAR.png`):** Socio | Operaciones, Infraestructura y Mejora Continua.
     * **Víctor Ulises Barrionuevo (`VUB.png`):** Socio | Telecomunicaciones y Operaciones de Red.
   * **Tarjeta de Red de Especialistas:** Incluir como quinto elemento la tarjeta: *"Y una red de consultores y especialistas que nos permite llevar la mejor solución a cada desafío"*.
   * **Enlaces a LinkedIn:** Ícono vectorial en tono oscuro/monocromático con enlace verificado a cada perfil:
     * Claudia Raquel Andrés: `https://www.linkedin.com/in/claudia-raquel-andres/`
     * José Alberto Pugliese: `https://www.linkedin.com/in/ing-josé-pugliese-706445413/`
     * Miguel Ángel Rojas: `https://www.linkedin.com/in/ingenieromiguelrojas/`
     * Víctor Ulises Barrionuevo: `www.linkedin.com/in/victor-ulises-barrionuevo`
4. **Eliminación:** Quitar la sección *"Estándares Globales"*.
5. **Trabajá con Nosotros:** Formulario limpio con campos: Nombre y apellido, Email, Teléfono, Ciudad/País, Área de interés, Mensaje, campo para CV/LinkedIn y casilla de consentimiento legal. Acompañar con la frase de cierre: `"El cambio también se construye en equipo."`

---

## 4. CHECKLIST DE CONTROL DE CALIDAD PARA LA IA DE CÓDIGO

- [ ] ¿El header tiene el buscador predictivo (lupa) de forma fija junto al botón de contacto?
- [ ] ¿El botón "HABLEMOS →" mantiene idéntico tamaño, padding, radio de borde y tipografía en todo el sitio?
- [ ] ¿Se eliminaron los fondos con movimiento rápido ("efecto pecera") y el grafo de 35 nodos?
- [ ] ¿La categoría "Telecomunicaciones" y los proyectos FTTH están integrados en Ámbitos de Experiencia y en IDE Projects?
- [ ] ¿Se reemplazaron todas las fotos del equipo por los archivos `CRA.png`, `JAP.png`, `MAR.png`, `VUB.png` y `team4.jpg`?
- [ ] ¿Los perfiles de los socios tienen sus enlaces de LinkedIn correctos en formato monocromático?
- [ ] ¿En IDE Excellence se corrigió la redacción a "preparación para certificar" en lugar de adjudicarse la certificación?
- [ ] ¿Se eliminó la sección duplicada de facilitadores en IDE Academy?
- [ ] ¿El footer es exactamente igual y homogéneo en todas las páginas?