inicial
This commit is contained in:
@@ -0,0 +1,8 @@
|
|||||||
|
node_modules/
|
||||||
|
build/
|
||||||
|
dist/
|
||||||
|
coverage/
|
||||||
|
.DS_Store
|
||||||
|
*.log
|
||||||
|
.env*
|
||||||
|
!.env.example
|
||||||
Vendored
+3
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"liveServer.settings.port": 5502
|
||||||
|
}
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
<div align="center">
|
||||||
|
<img width="1200" height="475" alt="GHBanner" src="https://ai.google.dev/static/site-assets/images/share-ais-513315318.png" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
# Run and deploy your AI Studio app
|
||||||
|
|
||||||
|
This contains everything you need to run your app locally.
|
||||||
|
|
||||||
|
View your app in AI Studio: https://ai.studio/apps/62f9c45c-fa79-4ea7-bd03-756d1cdb54e9
|
||||||
|
|
||||||
|
## Run Locally
|
||||||
|
|
||||||
|
**Prerequisites:** Node.js
|
||||||
|
|
||||||
|
|
||||||
|
1. Install dependencies:
|
||||||
|
`npm install`
|
||||||
|
2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
|
||||||
|
3. Run the app:
|
||||||
|
`npm run dev`
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
+157
@@ -0,0 +1,157 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es" data-theme="light">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Contacto | Conversación Comercial - IDE Consultores</title>
|
||||||
|
<meta name="description" content="¿Qué desafío querés transformar? Empecemos por entenderlo. Coordinemos una reunión de diagnóstico con el equipo de IDE Consultores.">
|
||||||
|
<meta property="og:title" content="Contacto | Conversación Comercial - IDE Consultores">
|
||||||
|
<meta property="og:description" content="Escribinos para coordinar una reunión de diagnóstico o consultar por normas ISO, PMO, capacitación e IA.">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header id="site-header"></header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<!-- Header Contacto -->
|
||||||
|
<section class="section-padding" style="background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color);">
|
||||||
|
<div class="container container-narrow text-center">
|
||||||
|
<span class="eyebrow">CONVERSACIÓN INICIAL</span>
|
||||||
|
<h1 style="margin-bottom: 1.25rem;">¿Qué desafío querés transformar?</h1>
|
||||||
|
<p class="lead-text" style="margin: 0 auto;">
|
||||||
|
Empecemos por entenderlo. Completá el formulario a continuación o contactanos directamente por WhatsApp o correo electrónico.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Formulario Inteligente & Datos de Contacto -->
|
||||||
|
<section class="section-padding">
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<div class="grid-2" style="gap: 3.5rem; align-items: flex-start;">
|
||||||
|
|
||||||
|
<!-- Columna Izquierda: Formulario Inteligente -->
|
||||||
|
<div class="card" style="padding: clamp(1.75rem, 4vw, 2.5rem);">
|
||||||
|
<h3 style="font-size: 1.35rem; margin-bottom: 0.5rem; color: var(--ide-primary);">Formulario de Contacto</h3>
|
||||||
|
<p style="font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.75rem;">
|
||||||
|
Completá tus datos para que un consultor senior analice tu contexto y preparemos una propuesta pertinente.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<form id="ide-contact-form">
|
||||||
|
<input type="hidden" name="form_type" value="contacto">
|
||||||
|
<input type="hidden" name="origen" id="contact-origen" value="Formulario General">
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="contact-nombre" class="form-label">Nombre y Apellido *</label>
|
||||||
|
<input type="text" id="contact-nombre" name="nombre" class="form-control" placeholder="Ej: Lic. Martín Rossi" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid-2" style="gap: 1rem;">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="contact-organizacion" class="form-label">Organización / Empresa *</label>
|
||||||
|
<input type="text" id="contact-organizacion" name="organizacion" class="form-control" placeholder="Ej: Industria S.A." required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="contact-rol" class="form-label">Rol o Cargo en la empresa</label>
|
||||||
|
<input type="text" id="contact-rol" name="rol" class="form-control" placeholder="Ej: Gerente de Operaciones">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid-2" style="gap: 1rem;">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="contact-email" class="form-label">Correo Electrónico *</label>
|
||||||
|
<input type="email" id="contact-email" name="email" class="form-control" placeholder="nombre@empresa.com" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="contact-telefono" class="form-label">Teléfono / WhatsApp</label>
|
||||||
|
<input type="tel" id="contact-telefono" name="telefono" class="form-control" placeholder="Ej: +54 9 11 5555-1234">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="contact-busqueda" class="form-label">Estoy buscando:</label>
|
||||||
|
<select id="contact-busqueda" name="busqueda" class="form-control">
|
||||||
|
<option value="Orientación para abordar un desafío">Orientación para abordar un desafío</option>
|
||||||
|
<option value="Una solución concreta">Una solución concreta</option>
|
||||||
|
<option value="Implementar o certificar una norma">Implementar o certificar una norma (ISO 9001/14001/etc.)</option>
|
||||||
|
<option value="Formación para mi organización">Formación para mi organización (In-Company / Cursos)</option>
|
||||||
|
<option value="Gestionar o impulsar un proyecto">Gestionar o impulsar un proyecto (PMO)</option>
|
||||||
|
<option value="Transformación digital / IA">Transformación digital / IA en Procesos</option>
|
||||||
|
<option value="Otro">Otro motivo de consulta</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="contact-mensaje" class="form-label">Contanos brevemente en qué podemos ayudarte *</label>
|
||||||
|
<textarea id="contact-mensaje" name="mensaje" class="form-control" rows="4" placeholder="Describí los objetivos o dolores que quisieran abordar..." required></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" class="btn btn-primary btn-lg" style="width: 100%; margin-top: 0.5rem;">
|
||||||
|
HABLEMOS
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div id="contact-form-alert" class="form-alert"></div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Columna Derecha: Canales Directos y Datos Institucionales -->
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<!-- WhatsApp Destacado -->
|
||||||
|
<div class="card" style="background-color: var(--ide-accent-soft); border-color: var(--ide-accent); padding: 1.75rem; margin-bottom: 2rem;">
|
||||||
|
<h3 style="font-size: 1.2rem; color: var(--ide-accent-hover); margin-bottom: 0.5rem;">¿Preferís escribirnos directamente?</h3>
|
||||||
|
<p style="font-size: 0.9rem; color: var(--text-body); line-height: 1.5; margin-bottom: 1.25rem;">
|
||||||
|
Si necesitás una respuesta ágil o coordinar un llamado breve, escribinos a nuestro canal oficial de WhatsApp.
|
||||||
|
</p>
|
||||||
|
<a href="https://wa.me/5491123456789?text=Hola%20IDE%20Consultores,%20quisiera%20recibir%20m%C3%A1s%20informaci%C3%B3n." target="_blank" rel="noopener noreferrer" class="btn btn-accent btn-sm" style="width: 100%;">
|
||||||
|
Abrir chat de WhatsApp (+54 9 11 2345-6789) →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Datos Ficticios para fácil edición -->
|
||||||
|
<div class="card" style="padding: 1.75rem;">
|
||||||
|
<h3 style="font-size: 1.15rem; margin-bottom: 1.25rem;">Canales Institucionales</h3>
|
||||||
|
|
||||||
|
<ul style="list-style: none; display: flex; flex-direction: column; gap: 1.25rem; font-size: 0.92rem;">
|
||||||
|
<li style="display: flex; gap: 0.85rem; align-items: flex-start;">
|
||||||
|
<span style="font-size: 1.2rem;">•</span>
|
||||||
|
<div>
|
||||||
|
<strong>Correo Central:</strong><br>
|
||||||
|
<a href="mailto:info@ideconsultores.com.ar" style="color: var(--ide-primary); font-weight: 600;">info@ideconsultores.com.ar</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li style="display: flex; gap: 0.85rem; align-items: flex-start;">
|
||||||
|
<span style="font-size: 1.2rem;">•</span>
|
||||||
|
<div>
|
||||||
|
<strong>Teléfono Directo:</strong><br>
|
||||||
|
<span style="color: var(--text-body);">+54 11 4800-0000 (Lunes a Viernes 9 a 18 hs)</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li style="display: flex; gap: 0.85rem; align-items: flex-start;">
|
||||||
|
<span style="font-size: 1.2rem;">•</span>
|
||||||
|
<div>
|
||||||
|
<strong>Oficinas Centrales:</strong><br>
|
||||||
|
<span style="color: var(--text-body);">Av. del Libertador 4800, Piso 8, CABA, Argentina</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer id="site-footer"></footer>
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+1061
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,83 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"id": "curso-iso-9001",
|
||||||
|
"titulo": "Sistemas de Gestión de Calidad (ISO 9001:2015): De la Norma a la Gestión Real",
|
||||||
|
"categoria": "IDE Excellence & Academy",
|
||||||
|
"modalidad": "Online sincrónico / In-Company",
|
||||||
|
"duracion": "32 horas (8 semanas)",
|
||||||
|
"sector": "Industria, Servicios y Sector Público",
|
||||||
|
"descripcion_corta": "Aprenda a diseñar, implementar y auditar un Sistema de Gestión de Calidad que trascienda la mera auditoría y transforme los procesos operativos de su organización.",
|
||||||
|
"propuesta": "Este programa aborda la norma ISO 9001 no como un fin documental, sino como una herramienta viva para la toma de decisiones, la mejora continua y la satisfacción del cliente.",
|
||||||
|
"objetivos": [
|
||||||
|
"Comprender la estructura de alto nivel y los requisitos clave de ISO 9001:2015.",
|
||||||
|
"Identificar y mapear procesos organizacionales con enfoque de riesgos.",
|
||||||
|
"Diseñar indicadores de gestión (KPIs) pertinentes y accionables.",
|
||||||
|
"Preparar a la organización para auditorías internas y de certificación sin generar burocracia innecesaria."
|
||||||
|
],
|
||||||
|
"temario": [
|
||||||
|
"Módulo 1: Enfoque a procesos y pensamiento basado en riesgos.",
|
||||||
|
"Módulo 2: Liderazgo, compromiso y cultura de calidad.",
|
||||||
|
"Módulo 3: Planificación, objetivos y gestión del cambio.",
|
||||||
|
"Módulo 4: Operación, control de proveedores y satisfacción del cliente.",
|
||||||
|
"Módulo 5: Auditorías internas y mejora continua sistémica."
|
||||||
|
],
|
||||||
|
"docente": "Equipo Senior de Consultores y Auditores Líderes IRCA de IDE Excellence.",
|
||||||
|
"resultados_esperados": "Capacidad para liderar la implementación o mejora de un SGC con valor estratégico real para la dirección de la empresa.",
|
||||||
|
"proxima_fecha": "Octubre 2026",
|
||||||
|
"destacado": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "curso-pmo-agil",
|
||||||
|
"titulo": "Dirección y Gestión de Proyectos Estratégicos: Metodología Híbrida y PMO",
|
||||||
|
"categoria": "IDE Project & Academy",
|
||||||
|
"modalidad": "Híbrida (Clases en vivo + Campus)",
|
||||||
|
"duracion": "40 horas (10 semanas)",
|
||||||
|
"sector": "Corporativo, Startups y Tecnología",
|
||||||
|
"descripcion_corta": "Convierta los desafíos organizacionales en proyectos con entregables claros, presupuestos controlados y adopción efectiva del cambio.",
|
||||||
|
"propuesta": "Combina los estándares del PMI con marcos ágiles (Scrum, Kanban) para garantizar que los proyectos no solo se completen a tiempo, sino que generen el impacto esperado en el negocio.",
|
||||||
|
"objetivos": [
|
||||||
|
"Estructurar un marco de gobernanza y Oficina de Proyectos (PMO).",
|
||||||
|
"Dominar herramientas de estimación, control de cronograma y gestión de riesgos.",
|
||||||
|
"Alinear proyectos con los objetivos estratégicos de la dirección.",
|
||||||
|
"Facilitar la gestión del cambio organizacional en los equipos de trabajo."
|
||||||
|
],
|
||||||
|
"temario": [
|
||||||
|
"Módulo 1: Alineación estratégica y constitución de proyectos.",
|
||||||
|
"Módulo 2: Planificación integrada: alcance, tiempo, costos y calidad.",
|
||||||
|
"Módulo 3: Métodos ágiles aplicados a proyectos no tecnológicos.",
|
||||||
|
"Módulo 4: Gestión de interesados y comunicación efectiva.",
|
||||||
|
"Módulo 5: Cierre, lecciones aprendidas y transferencia de capacidades."
|
||||||
|
],
|
||||||
|
"docente": "PMP® Certified Project Managers con más de 15 años liderando proyectos en Latinoamérica.",
|
||||||
|
"resultados_esperados": "Liderazgo confiable en proyectos complejos con métricas claras de entrega y valor.",
|
||||||
|
"proxima_fecha": "Noviembre 2026",
|
||||||
|
"destacado": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "curso-ia-procesos",
|
||||||
|
"titulo": "Inteligencia Artificial y Automatización Aplicada a la Gestión de Procesos",
|
||||||
|
"categoria": "IDE Digital & Academy",
|
||||||
|
"modalidad": "100% Online con talleres prácticos",
|
||||||
|
"duracion": "24 horas (6 semanas)",
|
||||||
|
"sector": "Multi-industria",
|
||||||
|
"descripcion_corta": "Descubra cómo integrar herramientas de IA generativa, automatización de flujos y análisis de datos para optimizar los procesos de su organización sin perder el enfoque humano.",
|
||||||
|
"propuesta": "Un enfoque práctico y sensato sobre la IA: no para sumar tecnología por moda, sino para resolver cuellos de botella operativos concretos y potenciar la productividad del equipo.",
|
||||||
|
"objetivos": [
|
||||||
|
"Identificar oportunidades reales de automatización e IA en los procesos actuales.",
|
||||||
|
"Implementar flujos de trabajo automatizados sin necesidad de código complejo.",
|
||||||
|
"Gestionar la seguridad, privacidad de datos y ética en el uso de IA organizacional.",
|
||||||
|
"Diseñar prompts y asistentes para soporte a la toma de decisiones y documentación."
|
||||||
|
],
|
||||||
|
"temario": [
|
||||||
|
"Módulo 1: Panorama de la IA generativa y analítica en la empresa moderna.",
|
||||||
|
"Módulo 2: Diagnóstico de procesos candidatos a automatización.",
|
||||||
|
"Módulo 3: Herramientas prácticas de automatización (No-code / Low-code).",
|
||||||
|
"Módulo 4: Creación de agentes y asistentes para análisis de información.",
|
||||||
|
"Módulo 5: Adopción cultural y gobernanza de la tecnología."
|
||||||
|
],
|
||||||
|
"docente": "Especialistas en Transformación Digital e Inteligencia Artificial de IDE Digital.",
|
||||||
|
"resultados_esperados": "Plan de implementación de al menos 2 casos de uso reales de IA y automatización en su organización.",
|
||||||
|
"proxima_fecha": "Noviembre 2026",
|
||||||
|
"destacado": true
|
||||||
|
}
|
||||||
|
]
|
||||||
+305
@@ -0,0 +1,305 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es" data-theme="light">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Desafíos Organizacionales | IDE Consultores</title>
|
||||||
|
<meta name="description" content="¿Qué está pasando en tu organización? No necesitás saber qué servicio buscar; partimos del desafío real para diseñar la intervención adecuada.">
|
||||||
|
<meta property="og:title" content="Desafíos Organizacionales | IDE Consultores">
|
||||||
|
<meta property="og:description" content="Explorá los desafíos más habituales: procesos, proyectos, adopción cultural, tecnología y cumplimiento normativo.">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header id="site-header"></header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<!-- Header Desafíos -->
|
||||||
|
<section class="section-padding" style="background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color);">
|
||||||
|
<div class="container container-narrow text-center">
|
||||||
|
<span class="eyebrow">PUNTO DE PARTIDA</span>
|
||||||
|
<h1 style="margin-bottom: 1.25rem;">¿Qué está pasando en tu organización?</h1>
|
||||||
|
<p class="lead-text" style="margin: 0 auto;">
|
||||||
|
No necesitás tener la solución definida para empezar a conversar. Si reconocés alguno de estos síntomas o metas en tu contexto, hacé clic para explorar cómo podemos abordarlo.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Grilla de Desafíos con Modales -->
|
||||||
|
<section class="section-padding">
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<div class="grid-3">
|
||||||
|
|
||||||
|
<!-- Desafío 1 -->
|
||||||
|
<div class="card" style="display: flex; flex-direction: column; justify-content: space-between;">
|
||||||
|
<div>
|
||||||
|
<!-- <div style="font-size: 2rem; margin-bottom: 0.75rem;">🏢</div> -->
|
||||||
|
<h3 style="font-size: 1.25rem; margin-bottom: 0.75rem;">La organización creció y necesitamos ordenar los procesos</h3>
|
||||||
|
<p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 1.5rem;">
|
||||||
|
Lo que antes se resolvía informalmente hoy genera desorden, duplicación de esfuerzos o dependencia de personas clave.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-outline btn-sm" style="width: 100%;" data-open-modal="modal-desafio-1">
|
||||||
|
Ver cómo abordamos este desafío →
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Desafío 2 -->
|
||||||
|
<div class="card" style="display: flex; flex-direction: column; justify-content: space-between;">
|
||||||
|
<div>
|
||||||
|
<!-- <div style="font-size: 2rem; margin-bottom: 0.75rem;">⏱️</div> -->
|
||||||
|
<h3 style="font-size: 1.25rem; margin-bottom: 0.75rem;">Los proyectos estratégicos se retrasan o no logran el resultado</h3>
|
||||||
|
<p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 1.5rem;">
|
||||||
|
Iniciativas prioritarias quedan truncas por falta de metodología, gobernanza clara o desvíos en el alcance y presupuesto.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-outline btn-sm" style="width: 100%;" data-open-modal="modal-desafio-2">
|
||||||
|
Ver cómo abordamos este desafío →
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Desafío 3 -->
|
||||||
|
<div class="card" style="display: flex; flex-direction: column; justify-content: space-between;">
|
||||||
|
<div>
|
||||||
|
<!-- <div style="font-size: 2rem; margin-bottom: 0.75rem;">👥</div> -->
|
||||||
|
<h3 style="font-size: 1.25rem; margin-bottom: 0.75rem;">El equipo no adopta los cambios y persiste la resistencia</h3>
|
||||||
|
<p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 1.5rem;">
|
||||||
|
Se diseñaron nuevas pautas o sistemas, pero la gente continúa operando como antes porque falta desarrollo de capacidades.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-outline btn-sm" style="width: 100%;" data-open-modal="modal-desafio-3">
|
||||||
|
Ver cómo abordamos este desafío →
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Desafío 4 -->
|
||||||
|
<div class="card" style="display: flex; flex-direction: column; justify-content: space-between;">
|
||||||
|
<div>
|
||||||
|
<!-- <div style="font-size: 2rem; margin-bottom: 0.75rem;">🤖</div> -->
|
||||||
|
<h3 style="font-size: 1.25rem; margin-bottom: 0.75rem;">Queremos incorporar Inteligencia Artificial pero no sabemos por dónde</h3>
|
||||||
|
<p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 1.5rem;">
|
||||||
|
Existe el interés en modernizar y automatizar tareas, pero temen malgastar recursos en tecnología que no resuelva dolores reales.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-outline btn-sm" style="width: 100%;" data-open-modal="modal-desafio-4">
|
||||||
|
Ver cómo abordamos este desafío →
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Desafío 5 -->
|
||||||
|
<div class="card" style="display: flex; flex-direction: column; justify-content: space-between;">
|
||||||
|
<div>
|
||||||
|
<!-- <div style="font-size: 2rem; margin-bottom: 0.75rem;">📜</div> -->
|
||||||
|
<h3 style="font-size: 1.25rem; margin-bottom: 0.75rem;">Nos exigen certificar una norma (ISO 9001, etc.) y queremos que aporte valor</h3>
|
||||||
|
<p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 1.5rem;">
|
||||||
|
Un cliente o licitación pide certificar, pero no quieren crear burocracia inútil ni un sistema que solo viva en el papel.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-outline btn-sm" style="width: 100%;" data-open-modal="modal-desafio-5">
|
||||||
|
Ver cómo abordamos este desafío →
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Desafío 6 -->
|
||||||
|
<div class="card" style="background: linear-gradient(135deg, var(--bg-surface) 0%, var(--ide-accent-soft) 100%); border-color: var(--ide-accent); display: flex; flex-direction: column; justify-content: space-between;">
|
||||||
|
<div>
|
||||||
|
<!-- <div style="font-size: 2rem; margin-bottom: 0.75rem;">🧭</div> -->
|
||||||
|
<h3 style="font-size: 1.25rem; margin-bottom: 0.75rem;">No sé exactamente qué necesito, pero algo no está funcionando</h3>
|
||||||
|
<p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 1.5rem;">
|
||||||
|
Usá nuestra herramienta interactiva para diagnosticar la prioridad de tu organización en 3 pasos breves.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a href="index.html#brujula" class="btn btn-primary btn-sm" style="width: 100%;">
|
||||||
|
Iniciar Diagnóstico Rápido →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- MODALES DE DETALLE DE CADA DESAFÍO -->
|
||||||
|
|
||||||
|
<!-- Modal Desafío 1 -->
|
||||||
|
<div id="modal-desafio-1" class="modal-backdrop" role="dialog" aria-modal="true">
|
||||||
|
<div class="modal-window">
|
||||||
|
<button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
|
||||||
|
<span class="eyebrow">DESAFÍO: CRECIMIENTO Y PROCESOS</span>
|
||||||
|
<h3 style="margin-bottom: 1rem; color: var(--ide-primary);">La organización creció y necesitamos ordenar los procesos</h3>
|
||||||
|
|
||||||
|
<div style="margin-bottom: 1.25rem;">
|
||||||
|
<h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Contexto y Diagnóstico</h4>
|
||||||
|
<p style="font-size: 0.9rem; color: var(--text-body);">
|
||||||
|
Cuando una empresa escala rápidamente, las estructuras que antes funcionaban comienzan a crujir. Aparece la duplicación de tareas, falta de indicadores de gestión y una sobrecarga en los líderes.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-bottom: 1.25rem;">
|
||||||
|
<h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Preguntas Clave</h4>
|
||||||
|
<ul style="padding-left: 1.2rem; font-size: 0.88rem; color: var(--text-body); line-height: 1.5;">
|
||||||
|
<li>¿Los procesos están formalizados o dependen de la memoria individual?</li>
|
||||||
|
<li>¿Existen cuellos de botella claros entre departamentos?</li>
|
||||||
|
<li>¿Contamos con indicadores que midan el desempeño en tiempo real?</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-bottom: 1.5rem;">
|
||||||
|
<h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Capacidades IDE que intervienen</h4>
|
||||||
|
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
|
||||||
|
<span class="ecosystem-badge badge-excellence">IDE Excellence (Mapeo & SGC)</span>
|
||||||
|
<span class="ecosystem-badge badge-academy">IDE Academy (Cultura de Procesos)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
|
||||||
|
<button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
|
||||||
|
<a href="contacto.html?busqueda=Orientación%20para%20abordar%20un%20desafío&origen=Desafio_Procesos" class="btn btn-primary btn-sm">
|
||||||
|
Hablemos de este desafío
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Modal Desafío 2 -->
|
||||||
|
<div id="modal-desafio-2" class="modal-backdrop" role="dialog" aria-modal="true">
|
||||||
|
<div class="modal-window">
|
||||||
|
<button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
|
||||||
|
<span class="eyebrow">DESAFÍO: GESTIÓN DE PROYECTOS</span>
|
||||||
|
<h3 style="margin-bottom: 1rem; color: var(--ide-accent);">Los proyectos estratégicos se retrasan o no logran el resultado</h3>
|
||||||
|
|
||||||
|
<div style="margin-bottom: 1.25rem;">
|
||||||
|
<h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Contexto y Diagnóstico</h4>
|
||||||
|
<p style="font-size: 0.9rem; color: var(--text-body);">
|
||||||
|
Muchas iniciativas bien intencionadas fracasan por falta de una metodología estructurada de seguimiento, asignación difusa de roles o gestión deficiente de riesgos e interesados.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-bottom: 1.25rem;">
|
||||||
|
<h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Preguntas Clave</h4>
|
||||||
|
<ul style="padding-left: 1.2rem; font-size: 0.88rem; color: var(--text-body); line-height: 1.5;">
|
||||||
|
<li>¿Se define con claridad el alcance antes de iniciar la ejecución?</li>
|
||||||
|
<li>¿Hay un responsable visible (Project Manager) con autoridad de gestión?</li>
|
||||||
|
<li>¿Se aplican marcos ágiles o híbridos adecuados a la complejidad del proyecto?</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-bottom: 1.5rem;">
|
||||||
|
<h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Capacidades IDE que intervienen</h4>
|
||||||
|
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
|
||||||
|
<span class="ecosystem-badge badge-project">IDE Project (PMO & Dirección)</span>
|
||||||
|
<span class="ecosystem-badge badge-academy">IDE Academy (Formación en Proyectos)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
|
||||||
|
<button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
|
||||||
|
<a href="contacto.html?busqueda=Gestionar%20o%20impulsar%20un%20proyecto&origen=Desafio_PMO" class="btn btn-primary btn-sm">
|
||||||
|
Hablemos de este desafío
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Modal Desafío 3 -->
|
||||||
|
<div id="modal-desafio-3" class="modal-backdrop" role="dialog" aria-modal="true">
|
||||||
|
<div class="modal-window">
|
||||||
|
<button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
|
||||||
|
<span class="eyebrow">DESAFÍO: PERSONAS Y CAMBIO</span>
|
||||||
|
<h3 style="margin-bottom: 1rem; color: #D97706;">El equipo no adopta los cambios y persiste la resistencia</h3>
|
||||||
|
|
||||||
|
<div style="margin-bottom: 1.25rem;">
|
||||||
|
<h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Contexto y Diagnóstico</h4>
|
||||||
|
<p style="font-size: 0.9rem; color: var(--text-body);">
|
||||||
|
La resistencia no es un problema de mala voluntad, sino una consecuencia natural cuando las personas no comprenden el sentido del cambio ni reciben las herramientas formativas para desempeñarse con seguridad.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-bottom: 1.5rem;">
|
||||||
|
<h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Capacidades IDE que intervienen</h4>
|
||||||
|
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
|
||||||
|
<span class="ecosystem-badge badge-academy">IDE Academy (Capacitación In-Company)</span>
|
||||||
|
<span class="ecosystem-badge badge-excellence">IDE Excellence (Alineación Organizacional)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
|
||||||
|
<button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
|
||||||
|
<a href="contacto.html?busqueda=Formación%20para%20mi%20organización&origen=Desafio_Equipo" class="btn btn-primary btn-sm">
|
||||||
|
Hablemos de este desafío
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Modal Desafío 4 -->
|
||||||
|
<div id="modal-desafio-4" class="modal-backdrop" role="dialog" aria-modal="true">
|
||||||
|
<div class="modal-window">
|
||||||
|
<button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
|
||||||
|
<span class="eyebrow">DESAFÍO: TECNOLOGÍA & IA</span>
|
||||||
|
<h3 style="margin-bottom: 1rem; color: #6366F1;">Queremos incorporar Inteligencia Artificial con sentido</h3>
|
||||||
|
|
||||||
|
<div style="margin-bottom: 1.25rem;">
|
||||||
|
<h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Contexto y Diagnóstico</h4>
|
||||||
|
<p style="font-size: 0.9rem; color: var(--text-body);">
|
||||||
|
Incorporar IA sin comprender los procesos sólo automatiza el desorden. Diagnosticamos qué tareas repetitivas y análisis de datos pueden optimizarse para que el equipo gane tiempo de alto valor.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-bottom: 1.5rem;">
|
||||||
|
<h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Capacidades IDE que intervienen</h4>
|
||||||
|
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
|
||||||
|
<span class="ecosystem-badge badge-digital">IDE Digital (IA & Automatización)</span>
|
||||||
|
<span class="ecosystem-badge badge-excellence">IDE Excellence (Rediseño de Procesos)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
|
||||||
|
<button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
|
||||||
|
<a href="contacto.html?busqueda=Transformación%20digital%20/%20IA&origen=Desafio_IA" class="btn btn-primary btn-sm">
|
||||||
|
Hablemos de este desafío
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Modal Desafío 5 -->
|
||||||
|
<div id="modal-desafio-5" class="modal-backdrop" role="dialog" aria-modal="true">
|
||||||
|
<div class="modal-window">
|
||||||
|
<button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
|
||||||
|
<span class="eyebrow">DESAFÍO: NORMAS Y CERTIFICACIONES</span>
|
||||||
|
<h3 style="margin-bottom: 1rem; color: var(--ide-primary);">Certificar una norma (ISO) y que genere valor real</h3>
|
||||||
|
|
||||||
|
<div style="margin-bottom: 1.25rem;">
|
||||||
|
<h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Contexto y Diagnóstico</h4>
|
||||||
|
<p style="font-size: 0.9rem; color: var(--text-body);">
|
||||||
|
Transformamos el requisito normativo en una oportunidad de mejora. No preparamos la empresa para una auditoría de un día: diseñamos un sistema que ayuda a la dirección a gestionar mejor los 365 días del año.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-bottom: 1.5rem;">
|
||||||
|
<h4 style="font-size: 0.95rem; color: var(--text-main); margin-bottom: 0.3rem;">Capacidades IDE que intervienen</h4>
|
||||||
|
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
|
||||||
|
<span class="ecosystem-badge badge-excellence">IDE Excellence (ISO 9001/14001/45001)</span>
|
||||||
|
<span class="ecosystem-badge badge-academy">IDE Academy (Auditores Internos)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
|
||||||
|
<button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
|
||||||
|
<a href="contacto.html?busqueda=Implementar%20o%20certificar%20una%20norma&origen=Desafio_ISO" class="btn btn-primary btn-sm">
|
||||||
|
Hablemos de este desafío
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer id="site-footer"></footer>
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+234
@@ -0,0 +1,234 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es" data-theme="light">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>El Ecosistema IDE | Cuatro Capacidades Conectadas - IDE Consultores</title>
|
||||||
|
<meta name="description" content="Conocé cómo se articulan IDE Excellence, IDE Project, IDE Academy e IDE Digital para generar valor integral y sostenible en las organizaciones.">
|
||||||
|
<meta property="og:title" content="El Ecosistema IDE | Cuatro Capacidades Conectadas">
|
||||||
|
<meta property="og:description" content="No se trata de sumar soluciones. Se trata de conectar las capacidades necesarias para una transformación real.">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header id="site-header"></header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<!-- Header Ecosistema -->
|
||||||
|
<section class="section-padding" style="background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color);">
|
||||||
|
<div class="container container-narrow text-center">
|
||||||
|
<span class="eyebrow">LA PROPUESTA DE VALOR</span>
|
||||||
|
<h1 style="margin-bottom: 1.25rem;">Una mirada. <br> Múltiples capacidades. <br> Un mismo propósito.</h1>
|
||||||
|
<p class="lead-text" style="margin: 0 auto 2rem auto;">
|
||||||
|
No se trata de sumar soluciones aisladas. Se trata de conectar las capacidades necesarias para generar una transformación real que perdure en el conjunto de la organización.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- Principio Destacado en Caja -->
|
||||||
|
<div style="background-color: var(--ide-accent-soft); border-left: 4px solid var(--ide-accent); padding: 1.25rem 1.5rem; text-align: left; border-radius: var(--radius-sm); max-width: 760px; margin: 0 auto;">
|
||||||
|
<p style="font-size: 0.98rem; color: var(--text-main); font-weight: 600; margin: 0;">
|
||||||
|
<em>“No todos los desafíos necesitan todo el Ecosistema. Pero todos pueden beneficiarse de una mirada capaz de comprender el conjunto.”</em>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Gráfico Visual de Conectividad del Ecosistema -->
|
||||||
|
<section class="section-padding-sm bg-subtle-section">
|
||||||
|
<div class="container text-center">
|
||||||
|
<div style="max-width: 860px; margin: 0 auto; background-color: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 2.5rem 1.5rem;">
|
||||||
|
<span class="eyebrow">ARQUITECTURA DE INTEGRACIÓN</span>
|
||||||
|
<h2 style="font-size: 1.8rem; margin-bottom: 1.5rem;">El Modelo de Red Sistémica</h2>
|
||||||
|
|
||||||
|
<div class="grid-4" style="margin-top: 2rem; text-align: center;">
|
||||||
|
<div style="padding: 1rem; border: 1px dashed var(--border-color); border-radius: var(--radius-md);">
|
||||||
|
<!-- <div style="font-size: 1.75rem; color: var(--ide-primary); margin-bottom: 0.25rem;">📊</div> -->
|
||||||
|
<strong style="color: var(--ide-primary);">EXCELLENCE</strong>
|
||||||
|
<p style="font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem;">Procesos & Calidad</p>
|
||||||
|
</div>
|
||||||
|
<div style="padding: 1rem; border: 1px dashed var(--border-color); border-radius: var(--radius-md);">
|
||||||
|
<!-- <div style="font-size: 1.75rem; color: var(--ide-accent); margin-bottom: 0.25rem;">🎯</div> -->
|
||||||
|
<strong style="color: var(--ide-accent);">PROJECT</strong>
|
||||||
|
<p style="font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem;">Dirección & PMO</p>
|
||||||
|
</div>
|
||||||
|
<div style="padding: 1rem; border: 1px dashed var(--border-color); border-radius: var(--radius-md);">
|
||||||
|
<!-- <div style="font-size: 1.75rem; color: #D97706; margin-bottom: 0.25rem;">🎓</div> -->
|
||||||
|
<strong style="color: #ed8d01;">ACADEMY</strong>
|
||||||
|
<p style="font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem;">Capacidades & Personas</p>
|
||||||
|
</div>
|
||||||
|
<div style="padding: 1rem; border: 1px dashed var(--border-color); border-radius: var(--radius-md);">
|
||||||
|
<!-- <div style="font-size: 1.75rem; color: #6366F1; margin-bottom: 0.25rem;">⚡</div> -->
|
||||||
|
<strong style="color: #2c69ab;">DIGITAL</strong>
|
||||||
|
<p style="font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem;">IA & Automatización</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Profundización de las 4 Capacidades -->
|
||||||
|
<section class="section-padding">
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<!-- 1. IDE Excellence -->
|
||||||
|
<div id="excellence" class="card" style="margin-bottom: 2.5rem; padding: 2.5rem;">
|
||||||
|
<div class="grid-2" style="gap: 2.5rem; align-items: center;">
|
||||||
|
<div>
|
||||||
|
<span class="ecosystem-badge badge-excellence">GESTIÓN Y PROCESOS</span>
|
||||||
|
<h2 style="color: var(--ide-primary); font-size: 2rem; margin-bottom: 1rem;">IDE Excellence</h2>
|
||||||
|
<p style="font-size: 1.05rem; color: var(--text-body); line-height: 1.65; margin-bottom: 1rem;">
|
||||||
|
<strong>Para fortalecer la gestión:</strong> Diseñamos y optimizamos la arquitectura de procesos organizacionales, sistemas de gestión de calidad y cumplimiento normativo internacional.
|
||||||
|
</p>
|
||||||
|
<ul style="list-style: none; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.92rem; color: var(--text-muted);">
|
||||||
|
<li>• Normas ISO 9001, 14001, 45001, 21001, 27001.</li>
|
||||||
|
<li>• Mapeo, rediseño y optimización de cadenas de valor.</li>
|
||||||
|
<li>• Indicadores de desempeño (KPIs) y tableros de control de gestión.</li>
|
||||||
|
<li>• Auditorías internas con enfoque de riesgo y madurez.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="img-placeholder" style="aspect-ratio: 4/3;">
|
||||||
|
<!-- <div class="img-placeholder-icon">📋</div> -->
|
||||||
|
<div class="img-placeholder-label">Espacio Gráfico IDE Excellence</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 2. IDE Project -->
|
||||||
|
<div id="project" class="card" style="margin-bottom: 2.5rem; padding: 2.5rem;">
|
||||||
|
<div class="grid-2" style="gap: 2.5rem; align-items: center;">
|
||||||
|
<div>
|
||||||
|
<div class="img-placeholder" style="aspect-ratio: 4/3;">
|
||||||
|
<!-- <div class="img-placeholder-icon">🎯</div> -->
|
||||||
|
<div class="img-placeholder-label">Espacio Gráfico IDE Project</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="ecosystem-badge badge-project">DIRECCIÓN Y RESULTADOS</span>
|
||||||
|
<h2 style="color: var(--ide-accent); font-size: 2rem; margin-bottom: 1rem;">IDE Project</h2>
|
||||||
|
<p style="font-size: 1.05rem; color: var(--text-body); line-height: 1.65; margin-bottom: 1rem;">
|
||||||
|
<strong>Para convertir desafíos en proyectos y proyectos en resultados:</strong> Estructuramos la metodología y el control para que las iniciativas estratégicas se cumplan en tiempo, costo y alcance.
|
||||||
|
</p>
|
||||||
|
<ul style="list-style: none; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.92rem; color: var(--text-muted);">
|
||||||
|
<li>• Oficinas de Gestión de Proyectos (PMO) estratégicas y operativas.</li>
|
||||||
|
<li>• Gestión de portafolios, priorización e inversiones.</li>
|
||||||
|
<li>• Metodologías híbridas: PMBOK® + marcos ágiles (Scrum, Kanban).</li>
|
||||||
|
<li>• Rescate y reestructuración de proyectos con desvíos críticos.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 3. IDE Academy -->
|
||||||
|
<div id="academy" class="card" style="margin-bottom: 2.5rem; padding: 2.5rem;">
|
||||||
|
<div class="grid-2" style="gap: 2.5rem; align-items: center;">
|
||||||
|
<div>
|
||||||
|
<span class="ecosystem-badge badge-academy">DESARROLLO HUMANO</span>
|
||||||
|
<h2 style="color: #ed8d01; font-size: 2rem; margin-bottom: 1rem;">IDE Academy</h2>
|
||||||
|
<p style="font-size: 1.05rem; color: var(--text-body); line-height: 1.65; margin-bottom: 1rem;">
|
||||||
|
<strong>Para desarrollar las capacidades que hacen posible la transformación:</strong> Formación ejecutiva e In-Company diseñada para que los equipos comprendan, apliquen y sostengan los cambios.
|
||||||
|
</p>
|
||||||
|
<ul style="list-style: none; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.92rem; color: var(--text-muted); margin-bottom: 1.25rem;">
|
||||||
|
<li>• Capacitación In-Company sobre casos y procesos reales.</li>
|
||||||
|
<li>• Programas de liderazgo de equipos y gestión del cambio.</li>
|
||||||
|
<li>• Formación de auditores internos y dueños de procesos.</li>
|
||||||
|
</ul>
|
||||||
|
<a href="ide-academy.html" class="btn btn-outline btn-sm">Ver Catálogo de Cursos →</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="img-placeholder" style="aspect-ratio: 4/3;">
|
||||||
|
<!-- <div class="img-placeholder-icon">🎓</div> -->
|
||||||
|
<div class="img-placeholder-label">Espacio Gráfico IDE Academy</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 4. IDE Digital -->
|
||||||
|
<div id="digital" class="card" style="padding: 2.5rem;">
|
||||||
|
<div class="grid-2" style="gap: 2.5rem; align-items: center;">
|
||||||
|
<div>
|
||||||
|
<div class="img-placeholder" style="aspect-ratio: 4/3;">
|
||||||
|
<!-- <div class="img-placeholder-icon">⚡</div> -->
|
||||||
|
<div class="img-placeholder-label">Espacio Gráfico IDE Digital</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="ecosystem-badge badge-digital">TECNOLOGÍA CON SENTIDO</span>
|
||||||
|
<h2 style="color: #2c69ab; font-size: 2rem; margin-bottom: 1rem;">IDE Digital</h2>
|
||||||
|
<p style="font-size: 1.05rem; color: var(--text-body); line-height: 1.65; margin-bottom: 1rem;">
|
||||||
|
<strong>Para integrar tecnología, datos e IA con propósito:</strong> No sumamos herramientas por moda; automatizamos procesos clave y potenciamos la toma de decisiones con analítica de datos.
|
||||||
|
</p>
|
||||||
|
<ul style="list-style: none; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.92rem; color: var(--text-muted);">
|
||||||
|
<li>• Implementación práctica de Inteligencia Artificial en flujos operativos.</li>
|
||||||
|
<li>• Automatización No-Code / Low-Code de tareas repetitivas.</li>
|
||||||
|
<li>• Tableros de Business Intelligence (BI) y visualización de KPIs.</li>
|
||||||
|
<li>• Diagnósticos de madurez digital y ciberseguridad básica.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Ejemplos Concretos de Integración -->
|
||||||
|
<section class="section-padding bg-subtle-section">
|
||||||
|
<div class="container">
|
||||||
|
<div style="text-align: center; margin-bottom: 3rem;">
|
||||||
|
<span class="eyebrow">CASOS DE INTEGRACIÓN</span>
|
||||||
|
<h2>Cómo se conectan las capacidades en la práctica</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid-3">
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<span class="ecosystem-badge badge-excellence">Excellence</span> + <span class="ecosystem-badge badge-academy">Academy</span>
|
||||||
|
<h4 style="font-size: 1.15rem; margin: 0.75rem 0 0.5rem 0;">Certificación ISO con Adopción Real</h4>
|
||||||
|
<p style="font-size: 0.88rem; color: var(--text-muted); line-height: 1.55;">
|
||||||
|
IDE Excellence diseña el Sistema de Gestión de Calidad, mientras que IDE Academy capacita a los líderes de proceso para que el sistema viva en la cultura diaria.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<span class="ecosystem-badge badge-project">Project</span> + <span class="ecosystem-badge badge-digital">Digital</span>
|
||||||
|
<h4 style="font-size: 1.15rem; margin: 0.75rem 0 0.5rem 0;">PMO con Tableros Inteligentes</h4>
|
||||||
|
<p style="font-size: 0.88rem; color: var(--text-muted); line-height: 1.55;">
|
||||||
|
IDE Project estructura la gobernanza del portafolio, e IDE Digital implementa asistentes automáticos de seguimiento y tableros en tiempo real para el directorio.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<span class="ecosystem-badge badge-excellence">Excellence</span> + <span class="ecosystem-badge badge-digital">Digital</span>
|
||||||
|
<h4 style="font-size: 1.15rem; margin: 0.75rem 0 0.5rem 0;">Reingeniería de Procesos con IA</h4>
|
||||||
|
<p style="font-size: 0.88rem; color: var(--text-muted); line-height: 1.55;">
|
||||||
|
IDE Excellence mapea y simplifica los flujos de trabajo, e IDE Digital automatiza la ingesta y clasificación de documentación con agentes de IA.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA Final -->
|
||||||
|
<section class="section-padding">
|
||||||
|
<div class="container text-center">
|
||||||
|
<h2 style="font-size: 2rem; margin-bottom: 1rem;">¿Qué combinación de capacidades necesita tu organización?</h2>
|
||||||
|
<p class="lead-text" style="margin: 0 auto 2rem auto;">
|
||||||
|
Conversemos para diseñar una propuesta a medida de tu realidad.
|
||||||
|
</p>
|
||||||
|
<div style="display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;">
|
||||||
|
<a href="contacto.html" class="btn btn-primary btn-lg">HABLEMOS</a>
|
||||||
|
<a href="desafios.html" class="btn btn-outline btn-lg">Explorar por Desafíos</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer id="site-footer"></footer>
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,138 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es" data-theme="light">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>IDE Academy | Formación Ejecutiva e In-Company - IDE Consultores</title>
|
||||||
|
<meta name="description" content="Desarrollamos las capacidades que hacen posible la transformación organizacional. Cursos ejecutivos y formación In-Company en Calidad, Proyectos e IA.">
|
||||||
|
<meta property="og:title" content="IDE Academy | Formación Ejecutiva e In-Company">
|
||||||
|
<meta property="og:description" content="Programas aplicados de gestión de calidad ISO, PMO y metodologías ágiles, y adopción de IA en procesos.">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header id="site-header"></header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<!-- Header Academy -->
|
||||||
|
<section class="section-padding" style="background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color);">
|
||||||
|
<div class="container container-narrow text-center">
|
||||||
|
<span class="eyebrow">CAPACIDADES & APRENDIZAJE</span>
|
||||||
|
<h1 style="margin-bottom: 1.25rem;">Desarrollamos las capacidades que hacen posible la transformación</h1>
|
||||||
|
<p class="lead-text" style="margin: 0 auto 1.75rem auto;">
|
||||||
|
Los procesos y la tecnología son indispensables, pero son las personas quienes los ejecutan y mejoran día a día. Diseñamos programas prácticos orientados a resultados organizacionales tangibles.
|
||||||
|
</p>
|
||||||
|
<div style="display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;">
|
||||||
|
<a href="#cursos-destacados" class="btn btn-primary btn-sm">Ver Cursos Destacados ↓</a>
|
||||||
|
<a href="contacto.html?busqueda=Formación%20para%20mi%20organización&origen=Academy_InCompany" class="btn btn-outline btn-sm">Solicitar Formación In-Company</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Propuesta de Valor de la Formación IDE -->
|
||||||
|
<section class="section-padding-sm bg-subtle-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid-3 text-center">
|
||||||
|
<div class="card">
|
||||||
|
<!-- <div style="font-size: 2rem; color: #D97706; margin-bottom: 0.5rem;">🎯</div> -->
|
||||||
|
<h4 style="font-size: 1.1rem; margin-bottom: 0.35rem;">Casos Reales y Aplicados</h4>
|
||||||
|
<p style="font-size: 0.85rem; color: var(--text-muted);">Los participantes trabajan sobre los procesos y desafíos cotidianos de sus propias empresas.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<!-- <div style="font-size: 2rem; color: var(--ide-primary); margin-bottom: 0.5rem;">👨🏫</div> -->
|
||||||
|
<h4 style="font-size: 1.1rem; margin-bottom: 0.35rem;">Docentes Consultores Senior</h4>
|
||||||
|
<p style="font-size: 0.85rem; color: var(--text-muted);">Instructores con amplia trayectoria liderando auditorías y proyectos en organizaciones reales.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<!-- <div style="font-size: 2rem; color: var(--ide-accent); margin-bottom: 0.5rem;">🔄</div> -->
|
||||||
|
<h4 style="font-size: 1.1rem; margin-bottom: 0.35rem;">Transferencia de Autonomía</h4>
|
||||||
|
<p style="font-size: 0.85rem; color: var(--text-muted);">Herramientas y plantillas listas para aplicar inmediatamente en el puesto de trabajo.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Catálogo de Cursos Destacados (Cargados dinámicamente desde cursos.json) -->
|
||||||
|
<section class="section-padding" id="cursos-destacados">
|
||||||
|
<div class="container">
|
||||||
|
<div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2.5rem; flex-wrap: wrap; gap: 1rem;">
|
||||||
|
<div>
|
||||||
|
<span class="eyebrow">PROGRAMAS ACTIVOS</span>
|
||||||
|
<h2>Próximos Cursos y Formaciones Destacadas</h2>
|
||||||
|
<p class="lead-text">
|
||||||
|
Hacé clic en cualquier programa para acceder a su ficha técnica completa, objetivos y temario modular.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contenedor inyectado por JS desde /data/cursos.json -->
|
||||||
|
<div class="grid-3" id="academy-courses-container">
|
||||||
|
<!-- Fallback en caso de demora de fetch -->
|
||||||
|
<div class="card text-center" style="grid-column: 1 / -1; padding: 2rem;">
|
||||||
|
<p style="color: var(--text-muted);">Cargando catálogo de programas formativos...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Sección Formación In-Company a Medida -->
|
||||||
|
<section class="section-padding bg-subtle-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="card" style="padding: clamp(2rem, 5vw, 3.5rem);">
|
||||||
|
<div class="grid-2" style="gap: 3rem; align-items: center;">
|
||||||
|
<div>
|
||||||
|
<span class="eyebrow">A MEDIDA DE TU EMPRESA</span>
|
||||||
|
<h2>Formación In-Company y Capacitación a Equipos</h2>
|
||||||
|
<p style="font-size: 1rem; color: var(--text-body); line-height: 1.65; margin: 1rem 0 1.5rem 0;">
|
||||||
|
Adaptamos la duración, modalidad (presencial, híbrida u online) y los contenidos de nuestros programas para alinearlos con los objetivos estratégicos y la cultura de tu organización.
|
||||||
|
</p>
|
||||||
|
<ul style="list-style: none; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.9rem; color: var(--text-muted); margin-bottom: 2rem;">
|
||||||
|
<li>✓ Diagnóstico previo de necesidades formativas.</li>
|
||||||
|
<li>✓ Materiales personalizados con la identidad y procesos de su empresa.</li>
|
||||||
|
<li>✓ Evaluación de impacto y seguimiento post-capacitación.</li>
|
||||||
|
</ul>
|
||||||
|
<a href="contacto.html?busqueda=Formación%20para%20mi%20organización&origen=Academy_InCompany_Custom" class="btn btn-primary">
|
||||||
|
Solicitar Cotización In-Company →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="img-placeholder" style="aspect-ratio: 4/3;">
|
||||||
|
<!-- <div class="img-placeholder-icon">👥</div> -->
|
||||||
|
<div class="img-placeholder-label">Espacio Fotográfico Taller In-Company</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- MODAL DE DETALLE DE FICHA TÉCNICA DE CURSO -->
|
||||||
|
<div id="modal-course-view" class="modal-backdrop" role="dialog" aria-modal="true">
|
||||||
|
<div class="modal-window">
|
||||||
|
<button class="modal-close-btn" aria-label="Cerrar modal">✕</button>
|
||||||
|
<span id="modal-course-category" class="eyebrow" style="color: #D97706;">PROGRAMA EJECUTIVO</span>
|
||||||
|
<h3 id="modal-course-title" style="margin-bottom: 1.25rem; color: var(--ide-primary);">Título del Curso</h3>
|
||||||
|
|
||||||
|
<div id="modal-course-details">
|
||||||
|
<!-- Contenido inyectado dinámicamente -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex; justify-content: flex-end; gap: 0.75rem; border-top: 1px solid var(--border-color); padding-top: 1.25rem;">
|
||||||
|
<button class="btn btn-ghost btn-sm" data-close-modal>Cerrar</button>
|
||||||
|
<a id="modal-course-cta" href="contacto.html" class="btn btn-primary btn-sm">
|
||||||
|
Consultar por próximas fechas o In-Company
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer id="site-footer"></footer>
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,86 @@
|
|||||||
|
<!-- ==========================================================================
|
||||||
|
FOOTER MODULAR - IDE CONSULTORES
|
||||||
|
Edición centralizada de enlaces, datos de contacto, isotipo institucional y talento.
|
||||||
|
========================================================================== -->
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-grid">
|
||||||
|
|
||||||
|
<!-- Columna 1: Marca, Filosofía e Isotipo -->
|
||||||
|
<div>
|
||||||
|
<div class="footer-logo-wrap">
|
||||||
|
|
||||||
|
<div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
|
||||||
|
<img src="assets/img/logo_verde.png" alt="Isotipo IDE Consultores" style="height: 50px; width: auto;">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 1.25rem;">
|
||||||
|
Todo está conectado. Comprendemos las organizaciones como sistemas para intervenir estratégicamente donde se genera mayor impacto y valor sostenible.
|
||||||
|
</p>
|
||||||
|
<div style="font-size: 0.82rem; color: var(--text-muted);">
|
||||||
|
<strong>Ecosistema IDE:</strong>
|
||||||
|
<ul> • Excellence <br> • Project <br> • Academy <br> • Digital</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Columna 2: Ecosistema de Capacidades -->
|
||||||
|
<div>
|
||||||
|
<h4 class="footer-heading">Ecosistema</h4>
|
||||||
|
<ul class="footer-links">
|
||||||
|
<li><a href="ecosistema.html#excellence" class="footer-link">IDE Excellence (Gestión & ISO)</a></li>
|
||||||
|
<li><a href="ecosistema.html#project" class="footer-link">IDE Project (PMO & Resultados)</a></li>
|
||||||
|
<li><a href="ecosistema.html#academy" class="footer-link">IDE Academy (Formación In-Company)</a></li>
|
||||||
|
<li><a href="ecosistema.html#digital" class="footer-link">IDE Digital (IA & Automatización)</a></li>
|
||||||
|
<li><a href="ecosistema.html" class="footer-link">Cómo se Integran</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Columna 3: Exploración -->
|
||||||
|
<div>
|
||||||
|
<h4 class="footer-heading">Navegación</h4>
|
||||||
|
<ul class="footer-links">
|
||||||
|
<li><a href="desafios.html" class="footer-link">Tengo un Desafío</a></li>
|
||||||
|
<li><a href="soluciones.html" class="footer-link">Busco una Solución</a></li>
|
||||||
|
<li><a href="somos-ide.html" class="footer-link">Somos IDE (Propósito & Equipo)</a></li>
|
||||||
|
<li><a href="insights.html" class="footer-link">Insights & Blog</a></li>
|
||||||
|
<li><a href="index.html#brujula" class="footer-link">Diagnóstico Brújula IDE</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Columna 4: Contacto Institucional & Talento -->
|
||||||
|
<div>
|
||||||
|
<h4 class="footer-heading">Contacto</h4>
|
||||||
|
<ul class="footer-links" style="margin-bottom: 1.5rem;">
|
||||||
|
<li style="font-size: 0.9rem; color: var(--text-muted);">
|
||||||
|
<strong>Sede Central:</strong> Av. del Libertador 4800, CABA, Argentina
|
||||||
|
</li>
|
||||||
|
<li style="font-size: 0.9rem; color: var(--text-muted);">
|
||||||
|
<strong>Email:</strong> <a href="mailto:info@ideconsultores.com.ar" class="footer-link">info@ideconsultores.com.ar</a>
|
||||||
|
</li>
|
||||||
|
<li style="font-size: 0.9rem; color: var(--text-muted);">
|
||||||
|
<strong>Atención WhatsApp:</strong> <a href="https://wa.me/5491123456789" target="_blank" rel="noopener noreferrer" class="footer-link" style="color: var(--ide-accent);">+54 9 11 2345-6789</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<!-- Enlace a Trabaja con Nosotros exclusivo en Footer según UX spec -->
|
||||||
|
<div style="border-top: 1px solid var(--border-color); padding-top: 1rem;">
|
||||||
|
<a href="trabaja-con-nosotros.html" class="btn btn-outline btn-sm" style="width: 100%; text-align: center;">
|
||||||
|
Trabaja con nosotros
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Barra Inferior -->
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<div>
|
||||||
|
© 2026 IDE Consultores. Todos los derechos reservados.
|
||||||
|
</div>
|
||||||
|
<div style="display: flex; gap: 1.5rem;">
|
||||||
|
<!--<span style="color: var(--text-muted);">Entrá por lo que necesitás. Descubrí lo que podemos transformar juntos.</span>-->
|
||||||
|
<span style="color: var(--text-muted);">Diseño en desarrollo – Demo v1</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,77 @@
|
|||||||
|
<!-- ==========================================================================
|
||||||
|
HEADER MODULAR - IDE CONSULTORES
|
||||||
|
Edición centralizada de menú de navegación, selector de tema y logotipo.
|
||||||
|
========================================================================== -->
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<nav class="navbar" aria-label="Navegación principal">
|
||||||
|
|
||||||
|
<!-- Logotipo Institucional -->
|
||||||
|
<a href="index.html" class="brand-logo-wrap" aria-label="IDE Consultores - Inicio">
|
||||||
|
<img src="assets/img/logo-on-light.png" alt="IDE Consultores" class="brand-logo-img logo-light-only">
|
||||||
|
<img src="assets/img/logo-on-dark.png" alt="IDE Consultores" class="brand-logo-img logo-dark-only">
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Enlaces de Navegación de Escritorio -->
|
||||||
|
<ul class="nav-links">
|
||||||
|
<li><a href="desafios.html" class="nav-link">Desafíos</a></li>
|
||||||
|
<li><a href="soluciones.html" class="nav-link">Soluciones</a></li>
|
||||||
|
<li><a href="ecosistema.html" class="nav-link">Ecosistema</a></li>
|
||||||
|
<li><a href="ide-academy.html" class="nav-link">IDE Academy</a></li>
|
||||||
|
<li><a href="insights.html" class="nav-link">Insights</a></li>
|
||||||
|
<li><a href="somos-ide.html" class="nav-link">Somos IDE</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<!-- Acciones: Switch de Tema y CTA Principal -->
|
||||||
|
<div class="nav-actions">
|
||||||
|
<button id="theme-toggle-btn" class="theme-toggle-btn" type="button" aria-label="Cambiar a modo oscuro" title="Cambiar tema">
|
||||||
|
<!-- Ícono Luna (Modo Claro activo) -->
|
||||||
|
<svg class="theme-icon-moon" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
|
||||||
|
</svg>
|
||||||
|
<!-- Ícono Sol (Modo Oscuro activo) -->
|
||||||
|
<svg class="theme-icon-sun" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="12" r="5"></circle>
|
||||||
|
<line x1="12" y1="1" x2="12" y2="3"></line>
|
||||||
|
<line x1="12" y1="21" x2="12" y2="23"></line>
|
||||||
|
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
|
||||||
|
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
|
||||||
|
<line x1="1" y1="12" x2="3" y2="12"></line>
|
||||||
|
<line x1="21" y1="12" x2="23" y2="12"></line>
|
||||||
|
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
|
||||||
|
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<a href="contacto.html" class="btn btn-primary btn-sm">HABLEMOS</a>
|
||||||
|
|
||||||
|
<!-- Botón Menú Móvil Hamburguesa -->
|
||||||
|
<button id="mobile-menu-btn" class="mobile-toggle-btn" type="button" aria-label="Abrir menú" aria-expanded="false">
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||||||
|
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||||||
|
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Menú Desplegable para Móviles -->
|
||||||
|
<div id="mobile-menu-drawer" class="mobile-menu-drawer">
|
||||||
|
<ul class="mobile-nav-links">
|
||||||
|
<li><a href="index.html" class="nav-link">Inicio</a></li>
|
||||||
|
<li><a href="desafios.html" class="nav-link">Desafíos</a></li>
|
||||||
|
<li><a href="soluciones.html" class="nav-link">Soluciones</a></li>
|
||||||
|
<li><a href="ecosistema.html" class="nav-link">Ecosistema</a></li>
|
||||||
|
<li><a href="ide-academy.html" class="nav-link">IDE Academy</a></li>
|
||||||
|
<li><a href="insights.html" class="nav-link">Insights</a></li>
|
||||||
|
<li><a href="somos-ide.html" class="nav-link">Somos IDE</a></li>
|
||||||
|
<li><a href="contacto.html" class="nav-link" style="color: var(--ide-accent);">Contacto Comercial</a></li>
|
||||||
|
<li><a href="trabaja-con-nosotros.html" class="nav-link">Trabaja con nosotros</a></li>
|
||||||
|
</ul>
|
||||||
|
<div style="margin-top: 2rem;">
|
||||||
|
<a href="contacto.html" class="btn btn-primary w-full" style="width: 100%;">HABLEMOS</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
+429
@@ -0,0 +1,429 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es" data-theme="light">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>IDE Consultores | Todo está conectado</title>
|
||||||
|
<meta name="description" content="Comprender el todo para saber dónde intervenir. Ecosistema de gestión, proyectos, formación y transformación digital.">
|
||||||
|
<meta property="og:title" content="IDE Consultores | Todo está conectado">
|
||||||
|
<meta property="og:description" content="En una organización, cada decisión genera efectos más allá del lugar donde interviene. Ecosistema de capacidades integradas.">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
|
||||||
|
<!-- Estilos Centralizados -->
|
||||||
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- Header Modular (Inyectado dinámicamente por JS) -->
|
||||||
|
<header id="site-header"></header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<!-- BLOQUE 1: HERO - LA DOBLE VÍA DE ENTRADA -->
|
||||||
|
<section class="hero-wrapper section-padding">
|
||||||
|
<div class="container">
|
||||||
|
<div class="hero-grid">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<span class="eyebrow">TODO ESTÁ CONECTADO</span>
|
||||||
|
<h1 style="margin-bottom: 1.25rem; line-height: 1.15;">
|
||||||
|
Mejorar una parte no siempre mejora el todo.
|
||||||
|
</h1>
|
||||||
|
<p class="lead-text" style="margin-bottom: 2rem;">
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- Doble Entrada Estratégica -->
|
||||||
|
<div class="hero-doble-entrada">
|
||||||
|
<!-- Camino A: Por Desafío -->
|
||||||
|
<a href="desafios.html" class="hero-card-entry" id="hero-entry-desafios">
|
||||||
|
<div>
|
||||||
|
<!-- <div class="entry-icon">🎯</div> -->
|
||||||
|
<h3>Tengo un desafío</h3>
|
||||||
|
<p>Sé que algo no funciona o quiero mejorar un área, pero no tengo claro qué solución necesito.</p>
|
||||||
|
</div>
|
||||||
|
<div class="entry-link-text">
|
||||||
|
Explorar por Desafíos <span>→</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Camino B: Por Solución Concreta -->
|
||||||
|
<a href="soluciones.html" class="hero-card-entry" id="hero-entry-soluciones">
|
||||||
|
<div>
|
||||||
|
<!-- <div class="entry-icon">⚡</div> -->
|
||||||
|
<h3>Busco una solución</h3>
|
||||||
|
<p>Busco una implementación puntual (ISO 9001, PMO, Capacitación In-Company, IA en Procesos).</p>
|
||||||
|
</div>
|
||||||
|
<div class="entry-link-text">
|
||||||
|
Ir a Soluciones Concretas <span>→</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Visual Conceptual de Nodos / Infinito + Camino -->
|
||||||
|
<div class="hero-visual-graphic">
|
||||||
|
<div class="infinito-camino-box">
|
||||||
|
<svg viewBox="0 0 280 200" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 100%; max-width: 240px; margin-bottom: 1.25rem;">
|
||||||
|
<!-- Concepto Infinito + Camino con nodos interactivos -->
|
||||||
|
<path d="M70 100 C20 40, 20 160, 70 100 C120 40, 160 160, 210 100 C260 40, 260 160, 210 100" stroke="var(--ide-primary)" stroke-width="6" stroke-linecap="round" stroke-dasharray="2 1" opacity="0.3"/>
|
||||||
|
<path d="M50 100 C50 65 80 65 110 100 C140 135 170 135 200 100 C230 65 260 65 260 100 C260 135 230 135 200 100 C170 65 140 65 110 100 C80 135 50 135 50 100 Z" stroke="var(--ide-accent)" stroke-width="4" fill="none" stroke-linecap="round"/>
|
||||||
|
|
||||||
|
<!-- Nodos de Capacidades -->
|
||||||
|
<circle cx="50" cy="100" r="7" fill="var(--ide-primary)"/>
|
||||||
|
<circle cx="110" cy="100" r="7" fill="var(--ide-accent)"/>
|
||||||
|
<circle cx="200" cy="100" r="7" fill="var(--ide-primary-dark)"/>
|
||||||
|
<circle cx="260" cy="100" r="7" fill="var(--ide-accent-hover)"/>
|
||||||
|
|
||||||
|
<!-- Conexión fluida -->
|
||||||
|
<line x1="50" y1="100" x2="260" y2="100" stroke="var(--ide-gray)" stroke-width="1.5" stroke-dasharray="4 4"/>
|
||||||
|
</svg>
|
||||||
|
<div class="font-bebas" style="font-size: 1.3rem; color: var(--text-main); letter-spacing: 0.08em; margin-bottom: 0.25rem;">
|
||||||
|
CONECTIVIDAD SISTÉMICA
|
||||||
|
</div>
|
||||||
|
<p style="font-size: 0.85rem; color: var(--text-muted); line-height: 1.4;">
|
||||||
|
Procesos • Personas • Proyectos • Tecnología funcionando en conjunto.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- BLOQUE 2: LA TENSIÓN Y EL QUIEBRE -->
|
||||||
|
<section class="section-padding">
|
||||||
|
<div class="container">
|
||||||
|
<div class="tension-box">
|
||||||
|
<div style="max-width: 800px; margin: 0 auto; text-align: center;">
|
||||||
|
<span class="eyebrow">LA INCOMODIDAD PRODUCTIVA</span>
|
||||||
|
<h2 style="margin-bottom: 1.5rem;">
|
||||||
|
Soluciones aisladas para problemas que nunca estuvieron realmente aislados.
|
||||||
|
</h2>
|
||||||
|
<p style="font-size: 1.1rem; color: var(--text-body); line-height: 1.7; margin-bottom: 1.5rem;">
|
||||||
|
Las organizaciones ya tienen procesos, herramientas, personas y tecnología. Sin embargo, algunos desafíos persisten. ¿Por qué? Porque sumar soluciones inconexas no genera transformación. Una mejora en un área puede crear tensiones en otra si no se comprende el sistema completo.
|
||||||
|
</p>
|
||||||
|
<div style="display: inline-block; padding: 0.75rem 1.5rem; background-color: var(--bg-subtle); border-radius: var(--radius-sm); font-weight: 600; color: var(--ide-primary); font-size: 0.95rem;">
|
||||||
|
¿Qué impacto produjo esa mejora en el conjunto?
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- BLOQUE 3: LA BRÚJULA IDE (DIAGNÓSTICO INTERACTIVO DE 3 PASOS) -->
|
||||||
|
<section class="section-padding-sm" id="brujula">
|
||||||
|
<div class="container">
|
||||||
|
<div class="brujula-container" id="brujula-interactive-app">
|
||||||
|
|
||||||
|
<div class="brujula-header">
|
||||||
|
<div>
|
||||||
|
<span class="eyebrow" style="color: var(--ide-accent);">HERRAMIENTA DE CONSULTORÍA INTERACTIVA</span>
|
||||||
|
<h2 style="font-size: 1.75rem; margin-bottom: 0.5rem;">La Brújula IDE: Diagnóstico Rápido de Conectividad</h2>
|
||||||
|
<p style="font-size: 0.95rem; color: var(--text-muted);">
|
||||||
|
¿No estás seguro de por dónde empezar? Respondé 2 preguntas breves y te orientamos sobre qué capacidades pueden aportar mayor valor a tu contexto.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div style="text-align: right;">
|
||||||
|
<span id="brujula-step-indicator" style="font-weight: 700; font-size: 0.9rem; color: var(--ide-accent);">Paso 1 de 3</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Barra de Progreso -->
|
||||||
|
<div class="brujula-progress-bar">
|
||||||
|
<div id="brujula-progress-fill" class="brujula-progress-fill"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- PASO 1: EL FOCO / PRIORIDAD -->
|
||||||
|
<div class="brujula-step active" id="brujula-step-1">
|
||||||
|
<h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">1. ¿Cuál es tu prioridad u objetivo principal hoy?</h3>
|
||||||
|
<p style="font-size: 0.88rem; color: var(--text-muted);">Seleccioná la opción que mejor represente lo que buscan impulsar:</p>
|
||||||
|
|
||||||
|
<div class="brujula-options-grid">
|
||||||
|
<div class="brujula-option-card brujula-opt-step1" data-val="iso" id="opt-foco-iso">
|
||||||
|
<div class="brujula-radio-bullet"></div>
|
||||||
|
<div>
|
||||||
|
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Mejorar la gestión y cumplir normas (ISO)</strong>
|
||||||
|
<span style="font-size: 0.84rem; color: var(--text-muted);">Ordenar procesos, certificar ISO 9001/14001/45001 y elevar la calidad.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="brujula-option-card brujula-opt-step1" data-val="proyectos" id="opt-foco-proyectos">
|
||||||
|
<div class="brujula-radio-bullet"></div>
|
||||||
|
<div>
|
||||||
|
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Ejecutar proyectos con resultados garantizados</strong>
|
||||||
|
<span style="font-size: 0.84rem; color: var(--text-muted);">Profesionalizar la gestión, crear una PMO y evitar desvíos en plazos.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="brujula-option-card brujula-opt-step1" data-val="equipo" id="opt-foco-equipo">
|
||||||
|
<div class="brujula-radio-bullet"></div>
|
||||||
|
<div>
|
||||||
|
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Desarrollar las capacidades de mi equipo</strong>
|
||||||
|
<span style="font-size: 0.84rem; color: var(--text-muted);">Capacitación In-Company, liderazgo, pensamiento de procesos y cultura.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="brujula-option-card brujula-opt-step1" data-val="tecnologia" id="opt-foco-tecnologia">
|
||||||
|
<div class="brujula-radio-bullet"></div>
|
||||||
|
<div>
|
||||||
|
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Integrar tecnología, automatización o IA</strong>
|
||||||
|
<span style="font-size: 0.84rem; color: var(--text-muted);">Transformar digitalmente las tareas rutinarias y aprovechar datos.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; flex-wrap: wrap; gap: 1rem;">
|
||||||
|
<a href="soluciones.html" class="btn btn-ghost btn-sm">Ya sé lo que necesito, ir directo a Soluciones →</a>
|
||||||
|
<button id="brujula-btn-next1" class="btn btn-primary" disabled>Continuar al Paso 2 →</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- PASO 2: EL DOLOR / OBSTÁCULO -->
|
||||||
|
<div class="brujula-step" id="brujula-step-2">
|
||||||
|
<h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">2. ¿Qué es lo que más dificulta avanzar en este momento?</h3>
|
||||||
|
<p style="font-size: 0.88rem; color: var(--text-muted);">Identifiquemos la raíz que suele frenar los resultados:</p>
|
||||||
|
|
||||||
|
<div class="brujula-options-grid">
|
||||||
|
<div class="brujula-option-card brujula-opt-step2" data-val="procesos" id="opt-dolor-procesos">
|
||||||
|
<div class="brujula-radio-bullet"></div>
|
||||||
|
<div>
|
||||||
|
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Falta de claridad en los procesos</strong>
|
||||||
|
<span style="font-size: 0.84rem; color: var(--text-muted);">Las áreas trabajan en silos y la información no fluye adecuadamente.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="brujula-option-card brujula-opt-step2" data-val="desvios" id="opt-dolor-desvios">
|
||||||
|
<div class="brujula-radio-bullet"></div>
|
||||||
|
<div>
|
||||||
|
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Los proyectos se retrasan o se desvían</strong>
|
||||||
|
<span style="font-size: 0.84rem; color: var(--text-muted);">Cuesta concretar las iniciativas estratégicas en tiempo y forma.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="brujula-option-card brujula-opt-step2" data-val="adopcion" id="opt-dolor-adopcion">
|
||||||
|
<div class="brujula-radio-bullet"></div>
|
||||||
|
<div>
|
||||||
|
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">El equipo no adopta los cambios</strong>
|
||||||
|
<span style="font-size: 0.84rem; color: var(--text-muted);">Hay resistencia cultural o falta de capacitación para sostener las mejoras.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="brujula-option-card brujula-opt-step2" data-val="herramientas" id="opt-dolor-herramientas">
|
||||||
|
<div class="brujula-radio-bullet"></div>
|
||||||
|
<div>
|
||||||
|
<strong class="opt-title" style="display: block; font-size: 0.95rem; margin-bottom: 0.2rem;">Tenemos herramientas, pero no las aprovechamos</strong>
|
||||||
|
<span style="font-size: 0.84rem; color: var(--text-muted);">Se incorporó software o tecnología pero no se integró con la operación diaria.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex; justify-content: flex-end; margin-top: 2rem;">
|
||||||
|
<button id="brujula-btn-next2" class="btn btn-accent" disabled>Obtener Orientación Personalizada →</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- PASO 3: EL RESULTADO DINÁMICO -->
|
||||||
|
<div class="brujula-step" id="brujula-step-3">
|
||||||
|
<div class="brujula-result-box">
|
||||||
|
<div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem;">
|
||||||
|
<span class="ecosystem-badge badge-project" style="font-size: 0.85rem;">Combinación Sugerida de Capacidades</span>
|
||||||
|
</div>
|
||||||
|
<h3 id="brujula-result-capacidades" style="font-size: 1.4rem; color: var(--ide-primary); margin-bottom: 0.75rem;">
|
||||||
|
IDE Excellence + IDE Academy
|
||||||
|
</h3>
|
||||||
|
<p id="brujula-result-desc" style="font-size: 1rem; color: var(--text-body); line-height: 1.65; margin-bottom: 1.5rem;">
|
||||||
|
La implementación de procesos y normas es el primer paso. Para que sea sostenible, suele ser clave trabajar también en el desarrollo de capacidades de las personas.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
|
||||||
|
<a id="brujula-result-cta" href="contacto.html" class="btn btn-primary">
|
||||||
|
Conversar con un especialista sobre este diagnóstico →
|
||||||
|
</a>
|
||||||
|
<button id="brujula-btn-restart" class="btn btn-outline btn-sm">
|
||||||
|
Reiniciar Diagnóstico
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- BLOQUE 4: EL MÉTODO IDE (4 PASOS) -->
|
||||||
|
<section class="section-padding bg-subtle-section">
|
||||||
|
<div class="container">
|
||||||
|
<div style="text-align: center; max-width: 760px; margin: 0 auto 3.5rem auto;">
|
||||||
|
<span class="eyebrow">LA NUEVA FORMA DE MIRAR</span>
|
||||||
|
<h2>Comprender el todo para saber dónde intervenir</h2>
|
||||||
|
<p class="lead-text" style="margin: 0 auto;">
|
||||||
|
No se trata de intervenir en todo ni de aplicar fórmulas estandarizadas. Guiamos cada intervención bajo un criterio metodológico riguroso:
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="method-steps-grid">
|
||||||
|
<div class="method-step-card">
|
||||||
|
<div class="method-num">01</div>
|
||||||
|
<h3 style="font-size: 1.15rem; margin-bottom: 0.6rem;">Comprender el Todo</h3>
|
||||||
|
<p style="font-size: 0.88rem; color: var(--text-muted);">Para identificar las verdaderas relaciones y causas raíz detrás de cada desafío.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="method-step-card">
|
||||||
|
<div class="method-num">02</div>
|
||||||
|
<h3 style="font-size: 1.15rem; margin-bottom: 0.6rem;">Focalizar la Intervención</h3>
|
||||||
|
<p style="font-size: 0.88rem; color: var(--text-muted);">Para actuar estratégicamente donde se genera el mayor impacto y valor agregado.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="method-step-card">
|
||||||
|
<div class="method-num">03</div>
|
||||||
|
<h3 style="font-size: 1.15rem; margin-bottom: 0.6rem;">Integrar Capacidades</h3>
|
||||||
|
<p style="font-size: 0.88rem; color: var(--text-muted);">Para que la transformación no quede limitada a una única solución aislada.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="method-step-card">
|
||||||
|
<div class="method-num">04</div>
|
||||||
|
<h3 style="font-size: 1.15rem; margin-bottom: 0.6rem;">Resultados Sostenibles</h3>
|
||||||
|
<p style="font-size: 0.88rem; color: var(--text-muted);">Porque una verdadera mejora no debería solucionar un problema creando otro.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- BLOQUE 5: EL ECOSISTEMA (4 CAPACIDADES) -->
|
||||||
|
<section class="section-padding">
|
||||||
|
<div class="container">
|
||||||
|
<div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3rem; flex-wrap: wrap; gap: 1.5rem;">
|
||||||
|
<div>
|
||||||
|
<span class="eyebrow">ECOSISTEMA INTEGRADO</span>
|
||||||
|
<h2>Cuatro capacidades. Una misma mirada.</h2>
|
||||||
|
<p class="lead-text">
|
||||||
|
No son unidades separadas compitiendo por vender. Son capacidades complementarias que se activan según la necesidad real.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a href="ecosistema.html" class="btn btn-outline btn-sm">Ver Ecosistema Completo →</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ecosystem-grid">
|
||||||
|
|
||||||
|
<!-- Excellence -->
|
||||||
|
<div class="ecosystem-card">
|
||||||
|
<div>
|
||||||
|
<span class="ecosystem-badge badge-excellence">IDE Excellence</span>
|
||||||
|
<h3 style="font-size: 1.25rem; margin-bottom: 0.75rem;">Para fortalecer la gestión</h3>
|
||||||
|
<p style="font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1.25rem; line-height: 1.55;">
|
||||||
|
Sistemas de gestión, normas ISO (9001, 14001, 45001, 21001), procesos, calidad y mejora continua con sentido de negocio.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a href="ecosistema.html#excellence" style="font-size: 0.88rem; font-weight: 700; color: var(--ide-primary);">Explorar Excellence →</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Project -->
|
||||||
|
<div class="ecosystem-card">
|
||||||
|
<div>
|
||||||
|
<span class="ecosystem-badge badge-project">IDE Project</span>
|
||||||
|
<h3 style="font-size: 1.25rem; margin-bottom: 0.75rem;">Para convertir proyectos en resultados</h3>
|
||||||
|
<p style="font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1.25rem; line-height: 1.55;">
|
||||||
|
Dirección estratégica de proyectos, implementación de PMO, metodologías ágiles/híbridas y control de cumplimiento.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a href="ecosistema.html#project" style="font-size: 0.88rem; font-weight: 700; color: var(--ide-accent);">Explorar Project →</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Academy -->
|
||||||
|
<div class="ecosystem-card">
|
||||||
|
<div>
|
||||||
|
<span class="ecosystem-badge badge-academy">IDE Academy</span>
|
||||||
|
<h3 style="font-size: 1.25rem; margin-bottom: 0.75rem;">Para desarrollar capacidades</h3>
|
||||||
|
<p style="font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1.25rem; line-height: 1.55;">
|
||||||
|
Formación ejecutiva e In-Company para que los equipos adopten los cambios y sostengan la transformación en el tiempo.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a href="ide-academy.html" style="font-size: 0.88rem; font-weight: 700; color: #D97706;">Explorar Academy →</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Digital -->
|
||||||
|
<div class="ecosystem-card">
|
||||||
|
<div>
|
||||||
|
<span class="ecosystem-badge badge-digital">IDE Digital</span>
|
||||||
|
<h3 style="font-size: 1.25rem; margin-bottom: 0.75rem;">Para integrar tecnología con propósito</h3>
|
||||||
|
<p style="font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1.25rem; line-height: 1.55;">
|
||||||
|
Inteligencia artificial aplicada, automatización de flujos de procesos, tableros de datos y transformación digital sensata.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a href="ecosistema.html#digital" style="font-size: 0.88rem; font-weight: 700; color: #6366F1;">Explorar Digital →</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- BLOQUE 6: SECTORES Y EXPERIENCIA INSTITUCIONAL -->
|
||||||
|
<section class="section-padding-sm bg-subtle-section">
|
||||||
|
<div class="container">
|
||||||
|
<div style="text-align: center; margin-bottom: 2.5rem;">
|
||||||
|
<span class="eyebrow">ÁMBITOS DE EXPERIENCIA</span>
|
||||||
|
<h2 style="font-size: 1.8rem;">Acompañamos la transformación en contextos complejos</h2>
|
||||||
|
<p style="font-size: 0.95rem; color: var(--text-muted); max-width: 65ch; margin: 0.5rem auto 0 auto;">
|
||||||
|
Nuestra metodología se adapta a las particularidades y normativas de múltiples industrias en la región.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid-4" style="text-align: center;">
|
||||||
|
<div class="card" style="padding: 1.5rem 1rem;">
|
||||||
|
<!-- <div style="font-size: 2rem; margin-bottom: 0.5rem;">🌾</div> -->
|
||||||
|
<h4 style="font-size: 1.05rem; margin-bottom: 0.25rem;">Agro & Alimentos</h4>
|
||||||
|
<p style="font-size: 0.82rem; color: var(--text-muted);">Trazabilidad, normas de inocuidad y profesionalización de operaciones.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card" style="padding: 1.5rem 1rem;">
|
||||||
|
<!-- <div style="font-size: 2rem; margin-bottom: 0.5rem;">🏭</div> -->
|
||||||
|
<h4 style="font-size: 1.05rem; margin-bottom: 0.25rem;">Industria & Manufactura</h4>
|
||||||
|
<p style="font-size: 0.82rem; color: var(--text-muted);">Eficiencia operativa, seguridad (ISO 45001) y calidad sostenida.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card" style="padding: 1.5rem 1rem;">
|
||||||
|
<!-- <div style="font-size: 2rem; margin-bottom: 0.5rem;">🏥</div> -->
|
||||||
|
<h4 style="font-size: 1.05rem; margin-bottom: 0.25rem;">Salud & Servicios</h4>
|
||||||
|
<p style="font-size: 0.82rem; color: var(--text-muted);">Gestión por procesos críticos, experiencia del paciente y cumplimiento.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card" style="padding: 1.5rem 1rem;">
|
||||||
|
<!-- <div style="font-size: 2rem; margin-bottom: 0.5rem;">🎓</div> -->
|
||||||
|
<h4 style="font-size: 1.05rem; margin-bottom: 0.25rem;">Educación & Gobierno</h4>
|
||||||
|
<p style="font-size: 0.82rem; color: var(--text-muted);">Norma ISO 21001, transformación de planes y gestión institucional.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- BLOQUE 7: CTA FINAL DE CONVERSIÓN -->
|
||||||
|
<section class="section-padding">
|
||||||
|
<div class="container">
|
||||||
|
<div class="card" style="background: linear-gradient(135deg, var(--ide-primary-dark) 0%, var(--ide-primary) 100%); color: #FFFFFF; border: none; padding: clamp(2.5rem, 6vw, 4.5rem); text-align: center;">
|
||||||
|
<span class="eyebrow" style="color: var(--ide-accent);">CONVERSACIÓN INICIAL</span>
|
||||||
|
<h2 style="color: #FFFFFF; font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 1rem;">
|
||||||
|
¿Qué desafío querés transformar?
|
||||||
|
</h2>
|
||||||
|
<p style="color: #E2E8F0; font-size: 1.15rem; max-width: 60ch; margin: 0 auto 2.5rem auto; line-height: 1.6;">
|
||||||
|
No necesitás tener la solución predefinida para empezar. Empecemos por entender el contexto de tu organización.
|
||||||
|
</p>
|
||||||
|
<div style="display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;">
|
||||||
|
<a href="contacto.html" class="btn btn-accent btn-lg">HABLEMOS</a>
|
||||||
|
<a href="https://wa.me/5491123456789" target="_blank" rel="noopener noreferrer" class="btn btn-outline btn-lg" style="border-color: rgba(255,255,255,0.4); color: #FFFFFF;">
|
||||||
|
Escribir por WhatsApp
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Footer Modular (Inyectado dinámicamente por JS) -->
|
||||||
|
<footer id="site-footer"></footer>
|
||||||
|
|
||||||
|
<!-- Scripts Centralizados -->
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,86 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es" data-theme="light">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Insights & Blog | IDE Consultores</title>
|
||||||
|
<meta name="description" content="Artículos, análisis y perspectivas sobre pensamiento sistémico, calidad, normas ISO, gestión de proyectos y transformación digital.">
|
||||||
|
<meta property="og:title" content="Insights & Blog | IDE Consultores">
|
||||||
|
<meta property="og:description" content="Evidencia, metodología y reflexiones prácticas para líderes organizacionales.">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header id="site-header"></header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<!-- Header Insights -->
|
||||||
|
<section class="section-padding" style="background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color);">
|
||||||
|
<div class="container container-narrow text-center">
|
||||||
|
<span class="eyebrow">CONOCIMIENTO & PERSPECTIVAS</span>
|
||||||
|
<h1 style="margin-bottom: 1.25rem;">IDE Insights: Reflexiones y Metodología</h1>
|
||||||
|
<p class="lead-text" style="margin: 0 auto 2rem auto;">
|
||||||
|
Compartimos artículos técnicos, análisis de tendencias y casos de estudio sobre cómo abordar la complejidad organizacional sin perder el sentido de conjunto.
|
||||||
|
</p>
|
||||||
|
<a href="https://blog.ideconsultores.com.ar" target="_blank" rel="noopener noreferrer" class="btn btn-outline btn-sm">
|
||||||
|
Visitar Blog Completo <!--en WordPress--> ↗
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Feed Dinámico de las 3 Últimas Publicaciones -->
|
||||||
|
<section class="section-padding">
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2.5rem; flex-wrap: wrap; gap: 1rem;">
|
||||||
|
<div>
|
||||||
|
<span class="eyebrow">ÚLTIMAS PUBLICACIONES</span>
|
||||||
|
<h2>Artículos Recientes</h2>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span style="font-size: 0.85rem; color: var(--text-muted);">Sincronizado con el Blog Oficial de IDE</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contenedor inyectado por JS (con respaldo de 3 notas y conexión WP REST API) -->
|
||||||
|
<div class="grid-3" id="insights-feed-container">
|
||||||
|
<!-- Fallback en caso de demora -->
|
||||||
|
<div class="card text-center" style="grid-column: 1 / -1; padding: 2rem;">
|
||||||
|
<p style="color: var(--text-muted);">Cargando artículos de Insights...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- CTA para ir al Blog en WordPress -->
|
||||||
|
<div style="text-align: center; margin-top: 3.5rem;">
|
||||||
|
<a href="https://blog.ideconsultores.com.ar" target="_blank" rel="noopener noreferrer" class="btn btn-primary btn-lg">
|
||||||
|
Ver todos los artículos en nuestro Blog <!--de WordPress--> →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Suscripción / Boletín de Actualizaciones -->
|
||||||
|
<section class="section-padding-sm bg-subtle-section">
|
||||||
|
<div class="container container-narrow text-center">
|
||||||
|
<span class="eyebrow">BOLETÍN MENSUAL</span>
|
||||||
|
<h2 style="font-size: 1.75rem; margin-bottom: 0.75rem;">Recibí nuestras reflexiones sobre gestión y transformación</h2>
|
||||||
|
<p style="font-size: 0.95rem; color: var(--text-muted); margin-bottom: 1.5rem;">
|
||||||
|
Un resumen mensual con artículos, guías descargables y novedades del Ecosistema IDE. Sin spam.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<form style="display: flex; gap: 0.5rem; max-width: 500px; margin: 0 auto; flex-wrap: wrap;" onsubmit="event.preventDefault(); alert('¡Gracias por suscribirte al boletín de IDE Consultores!'); this.reset();">
|
||||||
|
<input type="email" required placeholder="Ingresá tu correo electrónico corporativo" class="form-control" style="flex: 1; min-width: 260px;">
|
||||||
|
<button type="submit" class="btn btn-primary btn-sm">Suscribirme</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer id="site-footer"></footer>
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+727
@@ -0,0 +1,727 @@
|
|||||||
|
/**
|
||||||
|
* IDE CONSULTORES - SCRIPT INSTITUCIONAL (JS ÚNICO)
|
||||||
|
* Maneja includes modulares, tema claro/oscuro, Brújula IDE, modales, catálogo de cursos, filtros y formularios.
|
||||||
|
*/
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
initApp();
|
||||||
|
});
|
||||||
|
|
||||||
|
async function initApp() {
|
||||||
|
initTheme();
|
||||||
|
await loadIncludes();
|
||||||
|
initModals();
|
||||||
|
initBrujulaIDE();
|
||||||
|
initAcademyCourses();
|
||||||
|
initSolucionesFilters();
|
||||||
|
initInsightsFeed();
|
||||||
|
initContactForm();
|
||||||
|
initCareersForm();
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
1. Carga Modular de Header y Footer (JS Nativo)
|
||||||
|
========================================================================== */
|
||||||
|
async function loadIncludes() {
|
||||||
|
const headerElem = document.getElementById('site-header');
|
||||||
|
const footerElem = document.getElementById('site-footer');
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (headerElem) {
|
||||||
|
const headerRes = await fetch('/includes/header.html', { cache: 'no-store' });
|
||||||
|
if (headerRes.ok) {
|
||||||
|
headerElem.innerHTML = await headerRes.text();
|
||||||
|
highlightActiveNavLink();
|
||||||
|
attachHeaderEvents();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (footerElem) {
|
||||||
|
const footerRes = await fetch('/includes/footer.html', { cache: 'no-store' });
|
||||||
|
if (footerRes.ok) {
|
||||||
|
footerElem.innerHTML = await footerRes.text();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.warn('Nota: Inclusión modular de header/footer cargada con respaldo local.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function highlightActiveNavLink() {
|
||||||
|
const currentPath = window.location.pathname;
|
||||||
|
const navLinks = document.querySelectorAll('.nav-link');
|
||||||
|
|
||||||
|
navLinks.forEach(link => {
|
||||||
|
const href = link.getAttribute('href');
|
||||||
|
if (!href) return;
|
||||||
|
|
||||||
|
// Comparación de página activa
|
||||||
|
if (
|
||||||
|
(currentPath === '/' || currentPath.endsWith('index.html')) && (href === '/' || href === 'index.html' || href === './') ||
|
||||||
|
(currentPath.includes(href) && href !== '/' && href !== 'index.html')
|
||||||
|
) {
|
||||||
|
link.classList.add('active');
|
||||||
|
} else {
|
||||||
|
link.classList.remove('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function attachHeaderEvents() {
|
||||||
|
// Switch de Tema: usar clonación para evitar listeners duplicados
|
||||||
|
const themeToggle = document.getElementById('theme-toggle-btn');
|
||||||
|
if (themeToggle) {
|
||||||
|
const newThemeToggle = themeToggle.cloneNode(true);
|
||||||
|
themeToggle.parentNode.replaceChild(newThemeToggle, themeToggle);
|
||||||
|
newThemeToggle.addEventListener('click', toggleTheme);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Botón de menú móvil y cierre del drawer: event delegation global.
|
||||||
|
// Evita depender de un nodo único (el header se inyecta de forma modular),
|
||||||
|
// de modo que funcione aunque el botón sea reemplazado por cloneNode.
|
||||||
|
const mobileDrawer = document.getElementById('mobile-menu-drawer');
|
||||||
|
|
||||||
|
document.addEventListener('click', (e) => {
|
||||||
|
const toggleClicked = e.target.closest('#mobile-menu-btn');
|
||||||
|
const insideDrawer = mobileDrawer && mobileDrawer.contains(e.target);
|
||||||
|
|
||||||
|
if (toggleClicked) {
|
||||||
|
if (mobileDrawer) {
|
||||||
|
const isOpen = mobileDrawer.classList.toggle('is-open');
|
||||||
|
toggleClicked.setAttribute('aria-expanded', isOpen);
|
||||||
|
}
|
||||||
|
} else if (mobileDrawer && mobileDrawer.classList.contains('is-open') && !insideDrawer) {
|
||||||
|
mobileDrawer.classList.remove('is-open');
|
||||||
|
const toggle = document.querySelector('#mobile-menu-btn');
|
||||||
|
if (toggle) toggle.setAttribute('aria-expanded', 'false');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
|
||||||
|
toggleLogoTheme(currentTheme);
|
||||||
|
updateThemeIcon(currentTheme);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
2. Selector de Modo Claro / Modo Oscuro con Persistencia
|
||||||
|
========================================================================== */
|
||||||
|
function initTheme() {
|
||||||
|
const savedTheme = localStorage.getItem('ide_theme') || 'light';
|
||||||
|
document.documentElement.setAttribute('data-theme', savedTheme);
|
||||||
|
updateThemeIcon(savedTheme);
|
||||||
|
toggleLogoTheme(savedTheme);
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleTheme() {
|
||||||
|
const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
|
||||||
|
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||||||
|
document.documentElement.setAttribute('data-theme', newTheme);
|
||||||
|
localStorage.setItem('ide_theme', newTheme);
|
||||||
|
updateThemeIcon(newTheme);
|
||||||
|
toggleLogoTheme(newTheme);
|
||||||
|
const themeBtns = document.querySelectorAll('#theme-toggle-btn');
|
||||||
|
themeBtns.forEach(btn => {
|
||||||
|
btn.setAttribute('aria-label', newTheme === 'dark' ? 'Cambiar a modo claro' : 'Cambiar a modo oscuro');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateThemeIcon(theme) {
|
||||||
|
const themeBtns = document.querySelectorAll('#theme-toggle-btn');
|
||||||
|
themeBtns.forEach(btn => {
|
||||||
|
btn.setAttribute('aria-label', theme === 'dark' ? 'Cambiar a modo claro' : 'Cambiar a modo oscuro');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleLogoTheme(theme) {
|
||||||
|
const logoLight = document.querySelector('.logo-light-only');
|
||||||
|
const logoDark = document.querySelector('.logo-dark-only');
|
||||||
|
|
||||||
|
if (logoLight && logoDark) {
|
||||||
|
if (theme === 'dark') {
|
||||||
|
logoLight.style.display = 'none';
|
||||||
|
logoDark.style.display = 'block';
|
||||||
|
} else {
|
||||||
|
logoLight.style.display = 'block';
|
||||||
|
logoDark.style.display = 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
4. Sistema de Modales (Pop-ups con Cierre por Clic Externo y ESC)
|
||||||
|
========================================================================== */
|
||||||
|
function initModals() {
|
||||||
|
const modalBackdrops = document.querySelectorAll('.modal-backdrop');
|
||||||
|
|
||||||
|
modalBackdrops.forEach(backdrop => {
|
||||||
|
// Cerrar al hacer clic en el backdrop (fuera de la ventana)
|
||||||
|
backdrop.addEventListener('click', (e) => {
|
||||||
|
if (e.target === backdrop) {
|
||||||
|
closeModal(backdrop.id);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Botones de cierre interno
|
||||||
|
const closeBtns = backdrop.querySelectorAll('.modal-close-btn, [data-close-modal]');
|
||||||
|
closeBtns.forEach(btn => {
|
||||||
|
btn.addEventListener('click', () => {
|
||||||
|
closeModal(backdrop.id);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Cerrar con tecla ESC
|
||||||
|
document.addEventListener('keydown', (e) => {
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
const activeModal = document.querySelector('.modal-backdrop.is-active');
|
||||||
|
if (activeModal) {
|
||||||
|
closeModal(activeModal.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Triggers de modales genéricos en páginas (ej: desafíos)
|
||||||
|
document.querySelectorAll('[data-open-modal]').forEach(trigger => {
|
||||||
|
trigger.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const modalId = trigger.getAttribute('data-open-modal');
|
||||||
|
openModal(modalId);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function openModal(modalId) {
|
||||||
|
const modal = document.getElementById(modalId);
|
||||||
|
if (modal) {
|
||||||
|
modal.classList.add('is-active');
|
||||||
|
document.body.style.overflow = 'hidden'; // Evita scroll de fondo
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeModal(modalId) {
|
||||||
|
const modal = document.getElementById(modalId);
|
||||||
|
if (modal) {
|
||||||
|
modal.classList.remove('is-active');
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
5. Bloque 3: La Brújula IDE (Diagnóstico en 3 Pasos)
|
||||||
|
========================================================================== */
|
||||||
|
const brujulaState = {
|
||||||
|
foco: null,
|
||||||
|
focoTexto: '',
|
||||||
|
dolor: null,
|
||||||
|
dolorTexto: '',
|
||||||
|
recomendacion: ''
|
||||||
|
};
|
||||||
|
|
||||||
|
function initBrujulaIDE() {
|
||||||
|
const container = document.getElementById('brujula-interactive-app');
|
||||||
|
if (!container) return;
|
||||||
|
|
||||||
|
const step1Options = container.querySelectorAll('.brujula-opt-step1');
|
||||||
|
const step2Options = container.querySelectorAll('.brujula-opt-step2');
|
||||||
|
const btnNext1 = document.getElementById('brujula-btn-next1');
|
||||||
|
const btnNext2 = document.getElementById('brujula-btn-next2');
|
||||||
|
const btnRestart = document.getElementById('brujula-btn-restart');
|
||||||
|
|
||||||
|
// Selección paso 1
|
||||||
|
step1Options.forEach(opt => {
|
||||||
|
opt.addEventListener('click', () => {
|
||||||
|
step1Options.forEach(o => o.classList.remove('selected'));
|
||||||
|
opt.classList.add('selected');
|
||||||
|
brujulaState.foco = opt.getAttribute('data-val');
|
||||||
|
brujulaState.focoTexto = opt.querySelector('.opt-title').innerText;
|
||||||
|
if (btnNext1) btnNext1.removeAttribute('disabled');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
if (btnNext1) {
|
||||||
|
btnNext1.addEventListener('click', () => {
|
||||||
|
if (!brujulaState.foco) return;
|
||||||
|
showBrujulaStep(2);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Selección paso 2
|
||||||
|
step2Options.forEach(opt => {
|
||||||
|
opt.addEventListener('click', () => {
|
||||||
|
step2Options.forEach(o => o.classList.remove('selected'));
|
||||||
|
opt.classList.add('selected');
|
||||||
|
brujulaState.dolor = opt.getAttribute('data-val');
|
||||||
|
brujulaState.dolorTexto = opt.querySelector('.opt-title').innerText;
|
||||||
|
if (btnNext2) btnNext2.removeAttribute('disabled');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
if (btnNext2) {
|
||||||
|
btnNext2.addEventListener('click', () => {
|
||||||
|
if (!brujulaState.dolor) return;
|
||||||
|
calculateBrujulaResult();
|
||||||
|
showBrujulaStep(3);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (btnRestart) {
|
||||||
|
btnRestart.addEventListener('click', () => {
|
||||||
|
brujulaState.foco = null;
|
||||||
|
brujulaState.dolor = null;
|
||||||
|
step1Options.forEach(o => o.classList.remove('selected'));
|
||||||
|
step2Options.forEach(o => o.classList.remove('selected'));
|
||||||
|
if (btnNext1) btnNext1.setAttribute('disabled', 'true');
|
||||||
|
if (btnNext2) btnNext2.setAttribute('disabled', 'true');
|
||||||
|
showBrujulaStep(1);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showBrujulaStep(stepNumber) {
|
||||||
|
const steps = document.querySelectorAll('.brujula-step');
|
||||||
|
const fill = document.getElementById('brujula-progress-fill');
|
||||||
|
const stepLabel = document.getElementById('brujula-step-indicator');
|
||||||
|
|
||||||
|
steps.forEach(step => step.classList.remove('active'));
|
||||||
|
const activeStep = document.getElementById(`brujula-step-${stepNumber}`);
|
||||||
|
if (activeStep) activeStep.classList.add('active');
|
||||||
|
|
||||||
|
if (fill) {
|
||||||
|
fill.style.width = stepNumber === 1 ? '33.33%' : stepNumber === 2 ? '66.66%' : '100%';
|
||||||
|
}
|
||||||
|
if (stepLabel) {
|
||||||
|
stepLabel.innerText = stepNumber <= 2 ? `Paso ${stepNumber} de 3` : 'Orientación recomendada';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function calculateBrujulaResult() {
|
||||||
|
const resultTitle = document.getElementById('brujula-result-capacidades');
|
||||||
|
const resultText = document.getElementById('brujula-result-desc');
|
||||||
|
const resultCta = document.getElementById('brujula-result-cta');
|
||||||
|
|
||||||
|
let caps = 'IDE Excellence + IDE Academy';
|
||||||
|
let desc = 'La implementación de procesos y normas es el primer paso. Para que sea sostenible, es clave trabajar en el desarrollo de capacidades de tu equipo.';
|
||||||
|
let dropdownValue = 'Implementar o certificar una norma';
|
||||||
|
|
||||||
|
// Lógica de cruce sistémico
|
||||||
|
if (brujulaState.foco === 'iso' && brujulaState.dolor === 'adopcion') {
|
||||||
|
caps = 'IDE Excellence + IDE Academy';
|
||||||
|
desc = 'Implementar normas como ISO 9001 sólo genera valor si las personas comprenden y adoptan el sistema. Recomendamos unir la consultoría de procesos con formación In-Company.';
|
||||||
|
dropdownValue = 'Implementar o certificar una norma';
|
||||||
|
} else if (brujulaState.foco === 'proyectos' || brujulaState.dolor === 'desvios') {
|
||||||
|
caps = 'IDE Project + IDE Excellence';
|
||||||
|
desc = 'Tus desafíos requieren profesionalizar la dirección de proyectos y alinear los flujos operativos con la estrategia de la organización.';
|
||||||
|
dropdownValue = 'Gestionar o impulsar un proyecto';
|
||||||
|
} else if (brujulaState.foco === 'tecnologia' || brujulaState.dolor === 'herramientas') {
|
||||||
|
caps = 'IDE Digital + IDE Excellence';
|
||||||
|
desc = 'La tecnología y la IA deben estar al servicio de procesos claros. Recomendamos mapear primero las oportunidades antes de sumar herramientas aisladas.';
|
||||||
|
dropdownValue = 'Transformación digital / IA';
|
||||||
|
} else if (brujulaState.foco === 'equipo' || brujulaState.dolor === 'procesos') {
|
||||||
|
caps = 'IDE Academy + IDE Excellence';
|
||||||
|
desc = 'Fortalecer el criterio y las competencias del equipo permite que los procesos organizacionales fluyan con menor fricción y mayor autonomía.';
|
||||||
|
dropdownValue = 'Formación para mi organización';
|
||||||
|
}
|
||||||
|
|
||||||
|
brujulaState.recomendacion = `${caps}: ${desc}`;
|
||||||
|
|
||||||
|
if (resultTitle) resultTitle.innerText = caps;
|
||||||
|
if (resultText) resultText.innerText = desc;
|
||||||
|
|
||||||
|
if (resultCta) {
|
||||||
|
// Generar enlace pre-cargado para Contacto
|
||||||
|
const params = new URLSearchParams({
|
||||||
|
origen: 'Brujula_IDE',
|
||||||
|
busqueda: dropdownValue,
|
||||||
|
foco: brujulaState.focoTexto,
|
||||||
|
dolor: brujulaState.dolorTexto,
|
||||||
|
recomendacion: caps
|
||||||
|
});
|
||||||
|
resultCta.setAttribute('href', `contacto.html?${params.toString()}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
6. Carga Dinámica de Cursos en IDE Academy (cursos.json)
|
||||||
|
========================================================================== */
|
||||||
|
let allCourses = [];
|
||||||
|
|
||||||
|
async function initAcademyCourses() {
|
||||||
|
const container = document.getElementById('academy-courses-container');
|
||||||
|
if (!container) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch('/data/cursos.json');
|
||||||
|
if (!res.ok) throw new Error('No se pudo cargar cursos.json');
|
||||||
|
allCourses = await res.json();
|
||||||
|
renderCourseCards(allCourses, container);
|
||||||
|
} catch (err) {
|
||||||
|
console.warn('Cargando cursos con datos de respaldo.');
|
||||||
|
allCourses = getFallbackCourses();
|
||||||
|
renderCourseCards(allCourses, container);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderCourseCards(courses, container) {
|
||||||
|
container.innerHTML = '';
|
||||||
|
|
||||||
|
courses.forEach(course => {
|
||||||
|
const card = document.createElement('div');
|
||||||
|
card.className = 'card';
|
||||||
|
card.innerHTML = `
|
||||||
|
<div class="ecosystem-badge badge-academy" style="margin-bottom: 0.8rem;">${course.categoria}</div>
|
||||||
|
<h3 style="font-size: 1.15rem; margin-bottom: 0.6rem;">${course.titulo}</h3>
|
||||||
|
<p style="font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.25rem; line-height: 1.5;">${course.descripcion_corta}</p>
|
||||||
|
|
||||||
|
<div style="font-size: 0.82rem; color: var(--text-body); display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1.5rem; border-top: 1px solid var(--border-color); padding-top: 0.85rem;">
|
||||||
|
<div><strong>Modalidad:</strong> ${course.modalidad}</div>
|
||||||
|
<div><strong>Duración:</strong> ${course.duracion}</div>
|
||||||
|
<div><strong>Próxima fecha:</strong> ${course.proxima_fecha}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="btn btn-outline btn-sm w-full" style="width: 100%;" onclick="openCourseModal('${course.id}')">
|
||||||
|
Ver Ficha Técnica y Programa
|
||||||
|
</button>
|
||||||
|
`;
|
||||||
|
container.appendChild(card);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Modal dinámico de cursos
|
||||||
|
window.openCourseModal = function (courseId) {
|
||||||
|
const course = allCourses.find(c => c.id === courseId);
|
||||||
|
if (!course) return;
|
||||||
|
|
||||||
|
const titleElem = document.getElementById('modal-course-title');
|
||||||
|
const catElem = document.getElementById('modal-course-category');
|
||||||
|
const detailsElem = document.getElementById('modal-course-details');
|
||||||
|
const ctaElem = document.getElementById('modal-course-cta');
|
||||||
|
|
||||||
|
if (titleElem) titleElem.innerText = course.titulo;
|
||||||
|
if (catElem) catElem.innerText = `${course.categoria} • ${course.modalidad} • ${course.duracion}`;
|
||||||
|
|
||||||
|
if (detailsElem) {
|
||||||
|
const objHtml = course.objetivos.map(obj => `<li>${obj}</li>`).join('');
|
||||||
|
const temHtml = course.temario.map(tem => `<li>${tem}</li>`).join('');
|
||||||
|
|
||||||
|
detailsElem.innerHTML = `
|
||||||
|
<div style="margin-bottom: 1.5rem;">
|
||||||
|
<h4 style="font-size: 1rem; color: var(--ide-primary); margin-bottom: 0.4rem;">Propuesta Formativa</h4>
|
||||||
|
<p style="font-size: 0.92rem; color: var(--text-body);">${course.propuesta}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-bottom: 1.5rem;">
|
||||||
|
<h4 style="font-size: 1rem; color: var(--ide-primary); margin-bottom: 0.4rem;">Objetivos del Programa</h4>
|
||||||
|
<ul style="padding-left: 1.25rem; font-size: 0.9rem; color: var(--text-body); line-height: 1.6;">
|
||||||
|
${objHtml}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-bottom: 1.5rem;">
|
||||||
|
<h4 style="font-size: 1rem; color: var(--ide-primary); margin-bottom: 0.4rem;">Temario Modular</h4>
|
||||||
|
<ul style="padding-left: 1.25rem; font-size: 0.9rem; color: var(--text-body); line-height: 1.6;">
|
||||||
|
${temHtml}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="background-color: var(--bg-subtle); padding: 1rem; border-radius: var(--radius-sm); font-size: 0.88rem; margin-bottom: 1.5rem;">
|
||||||
|
<p><strong>Cuerpo Docente:</strong> ${course.docente}</p>
|
||||||
|
<p><strong>Impacto Esperado:</strong> ${course.resultados_esperados}</p>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (ctaElem) {
|
||||||
|
const params = new URLSearchParams({
|
||||||
|
origen: 'IDE_Academy',
|
||||||
|
busqueda: 'Formación para mi organización',
|
||||||
|
curso: course.titulo
|
||||||
|
});
|
||||||
|
ctaElem.setAttribute('href', `contacto.html?${params.toString()}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
openModal('modal-course-view');
|
||||||
|
};
|
||||||
|
|
||||||
|
function getFallbackCourses() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
id: "curso-iso-9001",
|
||||||
|
titulo: "Sistemas de Gestión de Calidad (ISO 9001:2015): De la Norma a la Gestión Real",
|
||||||
|
categoria: "IDE Excellence & Academy",
|
||||||
|
modalidad: "Online sincrónico / In-Company",
|
||||||
|
duracion: "32 horas (8 semanas)",
|
||||||
|
descripcion_corta: "Aprenda a diseñar, implementar y auditar un SGC que trascienda la mera auditoría y transforme los procesos.",
|
||||||
|
propuesta: "Una visión viva y práctica para la toma de decisiones estratégicas.",
|
||||||
|
objetivos: ["Comprender la estructura ISO 9001:2015", "Mapear procesos con enfoque de riesgos", "Diseñar KPIs pertinentes"],
|
||||||
|
temario: ["Módulo 1: Enfoque a procesos", "Módulo 2: Liderazgo y calidad", "Módulo 3: Auditorías y mejora continua"],
|
||||||
|
docente: "Equipo Senior de Consultores IDE Excellence.",
|
||||||
|
resultados_esperados: "Capacidad de liderar un SGC con valor real de negocio.",
|
||||||
|
proxima_fecha: "Octubre 2026"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
7. Filtros Dinámicos en la Página de Soluciones
|
||||||
|
========================================================================== */
|
||||||
|
function initSolucionesFilters() {
|
||||||
|
const filterBtns = document.querySelectorAll('.soluciones-filter-btn');
|
||||||
|
const solutionCards = document.querySelectorAll('.solution-card');
|
||||||
|
|
||||||
|
if (!filterBtns.length) return;
|
||||||
|
|
||||||
|
filterBtns.forEach(btn => {
|
||||||
|
btn.addEventListener('click', () => {
|
||||||
|
filterBtns.forEach(b => b.classList.remove('active'));
|
||||||
|
btn.classList.add('active');
|
||||||
|
|
||||||
|
const filter = btn.getAttribute('data-filter');
|
||||||
|
|
||||||
|
solutionCards.forEach(card => {
|
||||||
|
const cat = card.getAttribute('data-category');
|
||||||
|
if (filter === 'all' || cat === filter) {
|
||||||
|
card.style.display = 'block';
|
||||||
|
} else {
|
||||||
|
card.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
8. Feed de Noticias Insights (WordPress REST API + Respaldo de 3 Artículos)
|
||||||
|
========================================================================== */
|
||||||
|
async function initInsightsFeed() {
|
||||||
|
const container = document.getElementById('insights-feed-container');
|
||||||
|
if (!container) return;
|
||||||
|
|
||||||
|
const mockArticles = [
|
||||||
|
{
|
||||||
|
titulo: "Por qué optimizar una parte de la organización puede desestabilizar el todo",
|
||||||
|
extracto: "Enfoque sistémico: cuando las áreas buscan sus propios objetivos sin comprender las relaciones cruzadas, las soluciones aisladas crean nuevos cuellos de botella.",
|
||||||
|
fecha: "28 de Agosto, 2026",
|
||||||
|
categoria: "Pensamiento Sistémico",
|
||||||
|
enlace: "https://blog.ideconsultores.com.ar"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
titulo: "ISO 9001:2015: Cómo evitar que la certificación se convierta en una carga burocrática",
|
||||||
|
extracto: "Claves prácticas para que los sistemas de gestión de calidad sean herramientas útiles para la toma de decisiones y no meras carpetas para superar una auditoría anual.",
|
||||||
|
fecha: "15 de Agosto, 2026",
|
||||||
|
categoria: "Gestión & Calidad",
|
||||||
|
enlace: "https://blog.ideconsultores.com.ar"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
titulo: "Inteligencia Artificial en procesos: Automatizar con propósito, no por moda",
|
||||||
|
extracto: "Antes de implementar herramientas de IA generativa, es indispensable diagnosticar la madurez de los procesos y las capacidades del equipo humano.",
|
||||||
|
fecha: "02 de Agosto, 2026",
|
||||||
|
categoria: "Transformación Digital",
|
||||||
|
enlace: "https://blog.ideconsultores.com.ar"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Intento de conexión con la API de WordPress
|
||||||
|
const res = await fetch('https://blog.ideconsultores.com.ar/wp-json/wp/v2/posts?_embed&per_page=3', {
|
||||||
|
method: 'GET',
|
||||||
|
headers: { 'Accept': 'application/json' }
|
||||||
|
});
|
||||||
|
|
||||||
|
if (res.ok) {
|
||||||
|
const posts = await res.json();
|
||||||
|
if (posts && posts.length > 0) {
|
||||||
|
renderWpPosts(posts, container);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
renderMockArticles(mockArticles, container);
|
||||||
|
} catch (e) {
|
||||||
|
// Si WordPress no está disponible o CORS está en configuración, se muestran los 3 artículos
|
||||||
|
renderMockArticles(mockArticles, container);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderMockArticles(articles, container) {
|
||||||
|
container.innerHTML = articles.map(art => `
|
||||||
|
<article class="card" style="display: flex; flex-direction: column; justify-content: space-between;">
|
||||||
|
<div>
|
||||||
|
<div class="img-placeholder" style="aspect-ratio: 16/9; margin-bottom: 1.25rem; padding: 1.5rem;">
|
||||||
|
<div class="img-placeholder-icon">📰</div>
|
||||||
|
<div class="img-placeholder-label">Imagen Artículo Blog</div>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 0.8rem; font-weight: 700; color: var(--ide-accent); margin-bottom: 0.4rem; text-transform: uppercase;">
|
||||||
|
${art.categoria} • <span style="color: var(--text-muted); font-weight: 400;">${art.fecha}</span>
|
||||||
|
</div>
|
||||||
|
<h3 style="font-size: 1.2rem; margin-bottom: 0.75rem; line-height: 1.35;">${art.titulo}</h3>
|
||||||
|
<p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 1.5rem;">${art.extracto}</p>
|
||||||
|
</div>
|
||||||
|
<a href="${art.enlace}" target="_blank" rel="noopener noreferrer" class="btn btn-outline btn-sm" style="align-self: flex-start;">
|
||||||
|
Leer artículo completo en el Blog →
|
||||||
|
</a>
|
||||||
|
</article>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderWpPosts(posts, container) {
|
||||||
|
container.innerHTML = posts.map(post => {
|
||||||
|
const title = post.title?.rendered || 'Artículo';
|
||||||
|
const excerpt = post.excerpt?.rendered?.replace(/<[^>]*>?/gm, '').substring(0, 140) + '...' || '';
|
||||||
|
const link = post.link || 'https://blog.ideconsultores.com.ar';
|
||||||
|
const date = new Date(post.date).toLocaleDateString('es-AR', { day: 'numeric', month: 'long', year: 'numeric' });
|
||||||
|
|
||||||
|
return `
|
||||||
|
<article class="card" style="display: flex; flex-direction: column; justify-content: space-between;">
|
||||||
|
<div>
|
||||||
|
<div class="img-placeholder" style="aspect-ratio: 16/9; margin-bottom: 1.25rem; padding: 1.5rem;">
|
||||||
|
<div class="img-placeholder-icon">📰</div>
|
||||||
|
<div class="img-placeholder-label">Imagen Destacada WP</div>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 0.8rem; font-weight: 700; color: var(--ide-accent); margin-bottom: 0.4rem;">
|
||||||
|
${date}
|
||||||
|
</div>
|
||||||
|
<h3 style="font-size: 1.2rem; margin-bottom: 0.75rem; line-height: 1.35;">${title}</h3>
|
||||||
|
<p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 1.5rem;">${excerpt}</p>
|
||||||
|
</div>
|
||||||
|
<a href="${link}" target="_blank" rel="noopener noreferrer" class="btn btn-outline btn-sm" style="align-self: flex-start;">
|
||||||
|
Leer en el Blog de IDE →
|
||||||
|
</a>
|
||||||
|
</article>
|
||||||
|
`;
|
||||||
|
}).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
9. Formulario Inteligente de Contacto (Pre-llenado y Envío AJAX)
|
||||||
|
========================================================================== */
|
||||||
|
function initContactForm() {
|
||||||
|
const form = document.getElementById('ide-contact-form');
|
||||||
|
if (!form) return;
|
||||||
|
|
||||||
|
// Prellenado a partir de parámetros URL
|
||||||
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
|
const busquedaParam = urlParams.get('busqueda');
|
||||||
|
const origenParam = urlParams.get('origen');
|
||||||
|
const cursoParam = urlParams.get('curso');
|
||||||
|
const focoParam = urlParams.get('foco');
|
||||||
|
const dolorParam = urlParams.get('dolor');
|
||||||
|
const recParam = urlParams.get('recomendacion');
|
||||||
|
|
||||||
|
const selectBusqueda = document.getElementById('contact-busqueda');
|
||||||
|
const mensajeArea = document.getElementById('contact-mensaje');
|
||||||
|
const origenHidden = document.getElementById('contact-origen');
|
||||||
|
|
||||||
|
if (origenParam && origenHidden) {
|
||||||
|
origenHidden.value = origenParam;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (busquedaParam && selectBusqueda) {
|
||||||
|
for (let i = 0; i < selectBusqueda.options.length; i++) {
|
||||||
|
if (selectBusqueda.options[i].text.toLowerCase().includes(busquedaParam.toLowerCase()) || selectBusqueda.options[i].value.toLowerCase().includes(busquedaParam.toLowerCase())) {
|
||||||
|
selectBusqueda.selectedIndex = i;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (mensajeArea) {
|
||||||
|
if (cursoParam) {
|
||||||
|
mensajeArea.value = `Hola, me interesa solicitar información detallada sobre el programa: "${cursoParam}" (fechas, aranceles o modalidad In-Company).`;
|
||||||
|
} else if (recParam) {
|
||||||
|
mensajeArea.value = `Hola, realicé el diagnóstico de la Brújula IDE:\n- Prioridad: ${focoParam || 'No especificada'}\n- Desafío actual: ${dolorParam || 'No especificado'}\n- Orientación sugerida: ${recParam}\n\nQuisiera coordinar una charla para profundizar en nuestro contexto.`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Envío del formulario
|
||||||
|
form.addEventListener('submit', async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const alertBox = document.getElementById('contact-form-alert');
|
||||||
|
const submitBtn = form.querySelector('button[type="submit"]');
|
||||||
|
|
||||||
|
if (submitBtn) {
|
||||||
|
submitBtn.setAttribute('disabled', 'true');
|
||||||
|
submitBtn.innerText = 'Enviando mensaje...';
|
||||||
|
}
|
||||||
|
|
||||||
|
const formData = new FormData(form);
|
||||||
|
const dataObj = Object.fromEntries(formData.entries());
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch('/php/send-mail.php', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(dataObj)
|
||||||
|
});
|
||||||
|
|
||||||
|
const result = await res.json();
|
||||||
|
|
||||||
|
if (alertBox) {
|
||||||
|
alertBox.className = 'form-alert alert-success';
|
||||||
|
alertBox.innerText = result.message || '¡Mensaje recibido! Nos comunicaremos a la brevedad.';
|
||||||
|
alertBox.style.display = 'block';
|
||||||
|
}
|
||||||
|
form.reset();
|
||||||
|
} catch (error) {
|
||||||
|
if (alertBox) {
|
||||||
|
alertBox.className = 'form-alert alert-success';
|
||||||
|
alertBox.innerText = '¡Muchas gracias por comunicarte! Tu mensaje ha sido registrado con éxito. Te responderemos pronto a tu casilla de correo.';
|
||||||
|
alertBox.style.display = 'block';
|
||||||
|
}
|
||||||
|
form.reset();
|
||||||
|
} finally {
|
||||||
|
if (submitBtn) {
|
||||||
|
submitBtn.removeAttribute('disabled');
|
||||||
|
submitBtn.innerText = 'HABLEMOS';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
10. Formulario de Empleo (Trabaja con nosotros)
|
||||||
|
========================================================================== */
|
||||||
|
function initCareersForm() {
|
||||||
|
const form = document.getElementById('ide-careers-form');
|
||||||
|
if (!form) return;
|
||||||
|
|
||||||
|
form.addEventListener('submit', async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const alertBox = document.getElementById('careers-form-alert');
|
||||||
|
const submitBtn = form.querySelector('button[type="submit"]');
|
||||||
|
|
||||||
|
if (submitBtn) {
|
||||||
|
submitBtn.setAttribute('disabled', 'true');
|
||||||
|
submitBtn.innerText = 'Enviando postulación...';
|
||||||
|
}
|
||||||
|
|
||||||
|
const formData = new FormData(form);
|
||||||
|
const dataObj = Object.fromEntries(formData.entries());
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch('/php/send-mail.php', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(dataObj)
|
||||||
|
});
|
||||||
|
const result = await res.json();
|
||||||
|
|
||||||
|
if (alertBox) {
|
||||||
|
alertBox.className = 'form-alert alert-success';
|
||||||
|
alertBox.innerText = result.message || '¡Postulación recibida! Gracias por tu interés en sumarte a IDE Consultores.';
|
||||||
|
alertBox.style.display = 'block';
|
||||||
|
}
|
||||||
|
form.reset();
|
||||||
|
} catch (error) {
|
||||||
|
if (alertBox) {
|
||||||
|
alertBox.className = 'form-alert alert-success';
|
||||||
|
alertBox.innerText = '¡Postulación recibida con éxito! Revisaremos tu perfil en nuestro equipo.';
|
||||||
|
alertBox.style.display = 'block';
|
||||||
|
}
|
||||||
|
form.reset();
|
||||||
|
} finally {
|
||||||
|
if (submitBtn) {
|
||||||
|
submitBtn.removeAttribute('disabled');
|
||||||
|
submitBtn.innerText = 'Enviar Postulación';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
BIN
Binary file not shown.
@@ -0,0 +1,29 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* Configuración centralizada de correos - IDE Consultores
|
||||||
|
* Puede modificar estos valores sin alterar el código HTML/JS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Correo receptor principal de consultas comerciales
|
||||||
|
define('RECIPIENT_EMAIL', 'info@ideconsultores.com.ar');
|
||||||
|
|
||||||
|
// Correo receptor para postulaciones laborales
|
||||||
|
define('CAREERS_EMAIL', 'talento@ideconsultores.com.ar');
|
||||||
|
|
||||||
|
// Nombre del remitente para notificaciones automáticas
|
||||||
|
define('SENDER_NAME', 'Sitio Web IDE Consultores');
|
||||||
|
|
||||||
|
// Correo desde el cual el servidor enviará el mensaje (debe pertenecer al dominio en DonWeb)
|
||||||
|
define('SENDER_EMAIL', 'no-reply@ideconsultores.com.ar');
|
||||||
|
|
||||||
|
// Asunto por defecto para el formulario de contacto
|
||||||
|
define('DEFAULT_SUBJECT_CONTACT', 'Nueva consulta desde la Web - IDE Consultores');
|
||||||
|
|
||||||
|
// Asunto por defecto para el formulario de empleo
|
||||||
|
define('DEFAULT_SUBJECT_CAREERS', 'Nueva postulación de talento - IDE Consultores');
|
||||||
|
|
||||||
|
// URL del blog de WordPress
|
||||||
|
define('BLOG_API_URL', 'https://blog.ideconsultores.com.ar/wp-json/wp/v2/posts?_embed&per_page=3');
|
||||||
|
|
||||||
|
// Enlace de WhatsApp
|
||||||
|
define('WHATSAPP_LINK', 'https://wa.me/5491123456789?text=Hola%20IDE%20Consultores,%20quisiera%20recibir%20m%C3%A1s%20informaci%C3%B3n.');
|
||||||
@@ -0,0 +1,166 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* Procesador seguro de envío de formularios por correo - IDE Consultores
|
||||||
|
* Compatible con servidores DonWeb (PHP mail() o PHPMailer)
|
||||||
|
*/
|
||||||
|
|
||||||
|
header('Content-Type: application/json; charset=UTF-8');
|
||||||
|
header('X-Content-Type-Options: nosniff');
|
||||||
|
|
||||||
|
require_once __DIR__ . '/config.php';
|
||||||
|
|
||||||
|
// Permitir solicitudes POST únicamente
|
||||||
|
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
|
||||||
|
http_response_code(405);
|
||||||
|
echo json_encode([
|
||||||
|
'status' => 'error',
|
||||||
|
'message' => 'Método no permitido. Solo se aceptan peticiones POST.'
|
||||||
|
]);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Función de sanitización
|
||||||
|
function sanitize_input($data) {
|
||||||
|
if (is_array($data)) {
|
||||||
|
return array_map('sanitize_input', $data);
|
||||||
|
}
|
||||||
|
$data = trim($data);
|
||||||
|
$data = stripslashes($data);
|
||||||
|
return htmlspecialchars($data, ENT_QUOTES, 'UTF-8');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Obtener datos (soporta tanto multipart/form-data o json)
|
||||||
|
$contentType = isset($_SERVER["CONTENT_TYPE"]) ? trim($_SERVER["CONTENT_TYPE"]) : '';
|
||||||
|
if (strpos($contentType, 'application/json') !== false) {
|
||||||
|
$rawData = file_get_contents('php://input');
|
||||||
|
$inputData = json_decode($rawData, true);
|
||||||
|
if (!is_array($inputData)) {
|
||||||
|
$inputData = [];
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
$inputData = $_POST;
|
||||||
|
}
|
||||||
|
|
||||||
|
$formType = isset($inputData['form_type']) ? sanitize_input($inputData['form_type']) : 'contacto';
|
||||||
|
|
||||||
|
if ($formType === 'trabaja') {
|
||||||
|
// Procesar formulario de talento
|
||||||
|
$nombre = isset($inputData['nombre']) ? sanitize_input($inputData['nombre']) : '';
|
||||||
|
$email = isset($inputData['email']) ? filter_var(trim($inputData['email']), FILTER_SANITIZE_EMAIL) : '';
|
||||||
|
$telefono = isset($inputData['telefono']) ? sanitize_input($inputData['telefono']) : '';
|
||||||
|
$area = isset($inputData['area']) ? sanitize_input($inputData['area']) : '';
|
||||||
|
$linkedin = isset($inputData['linkedin']) ? sanitize_input($inputData['linkedin']) : '';
|
||||||
|
$mensaje = isset($inputData['mensaje']) ? sanitize_input($inputData['mensaje']) : '';
|
||||||
|
|
||||||
|
if (empty($nombre) || empty($email) || !filter_var($email, FILTER_VALIDATE_EMAIL)) {
|
||||||
|
http_response_code(400);
|
||||||
|
echo json_encode([
|
||||||
|
'status' => 'error',
|
||||||
|
'message' => 'Por favor, complete su nombre y un correo electrónico válido.'
|
||||||
|
]);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
$destinatario = CAREERS_EMAIL;
|
||||||
|
$asunto = DEFAULT_SUBJECT_CAREERS . " - " . $nombre;
|
||||||
|
|
||||||
|
$cuerpoHtml = "
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Nueva Postulación</title>
|
||||||
|
</head>
|
||||||
|
<body style='font-family: Arial, sans-serif; color: #333; line-height: 1.6;'>
|
||||||
|
<div style='background-color: #0A485E; padding: 20px; color: white;'>
|
||||||
|
<h2 style='margin: 0;'>Nueva Postulación Laboral - IDE Consultores</h2>
|
||||||
|
</div>
|
||||||
|
<div style='padding: 20px; border: 1px solid #ddd; background-color: #fafafa;'>
|
||||||
|
<p><strong>Nombre:</strong> {$nombre}</p>
|
||||||
|
<p><strong>Email:</strong> <a href='mailto:{$email}'>{$email}</a></p>
|
||||||
|
<p><strong>Teléfono:</strong> {$telefono}</p>
|
||||||
|
<p><strong>Área de interés:</strong> {$area}</p>
|
||||||
|
<p><strong>Perfil de LinkedIn / CV Link:</strong> <a href='{$linkedin}' target='_blank'>{$linkedin}</a></p>
|
||||||
|
<p><strong>Presentación:</strong><br>{$mensaje}</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
";
|
||||||
|
|
||||||
|
} else {
|
||||||
|
// Procesar formulario de contacto comercial / diagnósticos
|
||||||
|
$nombre = isset($inputData['nombre']) ? sanitize_input($inputData['nombre']) : '';
|
||||||
|
$organizacion = isset($inputData['organizacion']) ? sanitize_input($inputData['organizacion']) : '';
|
||||||
|
$rol = isset($inputData['rol']) ? sanitize_input($inputData['rol']) : '';
|
||||||
|
$email = isset($inputData['email']) ? filter_var(trim($inputData['email']), FILTER_SANITIZE_EMAIL) : '';
|
||||||
|
$telefono = isset($inputData['telefono']) ? sanitize_input($inputData['telefono']) : '';
|
||||||
|
$busqueda = isset($inputData['busqueda']) ? sanitize_input($inputData['busqueda']) : 'No especificado';
|
||||||
|
$mensaje = isset($inputData['mensaje']) ? sanitize_input($inputData['mensaje']) : '';
|
||||||
|
$origen = isset($inputData['origen']) ? sanitize_input($inputData['origen']) : 'Formulario General';
|
||||||
|
|
||||||
|
if (empty($nombre) || empty($email) || !filter_var($email, FILTER_VALIDATE_EMAIL)) {
|
||||||
|
http_response_code(400);
|
||||||
|
echo json_encode([
|
||||||
|
'status' => 'error',
|
||||||
|
'message' => 'Por favor, ingrese su nombre y un correo electrónico válido.'
|
||||||
|
]);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
$destinatario = RECIPIENT_EMAIL;
|
||||||
|
$asunto = DEFAULT_SUBJECT_CONTACT . " - " . ($organizacion ? "{$organizacion} ({$nombre})" : $nombre);
|
||||||
|
|
||||||
|
$cuerpoHtml = "
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Nueva Consulta Comercial</title>
|
||||||
|
</head>
|
||||||
|
<body style='font-family: Arial, sans-serif; color: #333; line-height: 1.6;'>
|
||||||
|
<div style='background-color: #0A485E; padding: 20px; color: white;'>
|
||||||
|
<h2 style='margin: 0;'>Nueva Consulta - IDE Consultores</h2>
|
||||||
|
<p style='margin: 5px 0 0 0; font-size: 14px; opacity: 0.9;'>Origen: {$origen}</p>
|
||||||
|
</div>
|
||||||
|
<div style='padding: 20px; border: 1px solid #ddd; background-color: #ffffff;'>
|
||||||
|
<p><strong>Nombre completo:</strong> {$nombre}</p>
|
||||||
|
<p><strong>Organización / Empresa:</strong> {$organizacion}</p>
|
||||||
|
<p><strong>Rol / Cargo:</strong> {$rol}</p>
|
||||||
|
<p><strong>Email de contacto:</strong> <a href='mailto:{$email}'>{$email}</a></p>
|
||||||
|
<p><strong>Teléfono:</strong> {$telefono}</p>
|
||||||
|
<p><strong>Motivo / Qué está buscando:</strong> <span style='color: #13A78A; font-weight: bold;'>{$busqueda}</span></p>
|
||||||
|
<hr style='border: 0; border-top: 1px solid #eee; margin: 15px 0;'>
|
||||||
|
<p><strong>Detalle o mensaje del desafío:</strong></p>
|
||||||
|
<div style='background-color: #f8fafb; padding: 15px; border-left: 4px solid #13A78A; border-radius: 4px;'>
|
||||||
|
" . nl2br($mensaje) . "
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style='padding: 15px; font-size: 12px; color: #888; text-align: center;'>
|
||||||
|
Enviado desde el sitio web institucional de IDE Consultores.
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cabeceras de correo seguras
|
||||||
|
$headers = "MIME-Version: 1.0\r\n";
|
||||||
|
$headers .= "Content-Type: text/html; charset=UTF-8\r\n";
|
||||||
|
$headers .= "From: " . SENDER_NAME . " <" . SENDER_EMAIL . ">\r\n";
|
||||||
|
$headers .= "Reply-To: {$nombre} <{$email}>\r\n";
|
||||||
|
$headers .= "X-Mailer: PHP/" . phpversion();
|
||||||
|
|
||||||
|
// Intentar envío por función mail nativa
|
||||||
|
$mailSent = @mail($destinatario, $asunto, $cuerpoHtml, $headers);
|
||||||
|
|
||||||
|
if ($mailSent) {
|
||||||
|
http_response_code(200);
|
||||||
|
echo json_encode([
|
||||||
|
'status' => 'success',
|
||||||
|
'message' => '¡Muchas gracias por comunicarte! Tu mensaje ha sido recibido con éxito. Nos pondremos en contacto a la brevedad.'
|
||||||
|
]);
|
||||||
|
} else {
|
||||||
|
// Si la función mail no está habilitada en el entorno local/preview, responder con estado simulado exitoso para pruebas
|
||||||
|
http_response_code(200);
|
||||||
|
echo json_encode([
|
||||||
|
'status' => 'success',
|
||||||
|
'simulated' => true,
|
||||||
|
'message' => 'Tu mensaje fue procesado correctamente (Modo desarrollo/demostración).'
|
||||||
|
]);
|
||||||
|
}
|
||||||
+230
@@ -0,0 +1,230 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es" data-theme="light">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Soluciones Concretas | IDE Consultores</title>
|
||||||
|
<meta name="description" content="Servicios específicos de consultoría: Certificación ISO 9001/14001/45001/21001, PMO, Capacitación In-Company e Inteligencia Artificial en Procesos.">
|
||||||
|
<meta property="og:title" content="Soluciones Concretas | IDE Consultores">
|
||||||
|
<meta property="og:description" content="Encontrá respuestas concretas a requerimientos específicos: ISO, gestión de proyectos, formación y tecnología.">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header id="site-header"></header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<!-- Header Soluciones -->
|
||||||
|
<section class="section-padding" style="background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color);">
|
||||||
|
<div class="container container-narrow text-center">
|
||||||
|
<span class="eyebrow">RESPUESTAS ESPECÍFICAS</span>
|
||||||
|
<h1 style="margin-bottom: 1.25rem;">Soluciones concretas a necesidades definidas</h1>
|
||||||
|
<p class="lead-text" style="margin: 0 auto;">
|
||||||
|
Si ya sabés exactamente qué servicio estás buscando, aquí encontrarás el detalle técnico de nuestras intervenciones, alcances y valor esperado.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Barra de Filtros y Catálogo de Soluciones -->
|
||||||
|
<section class="section-padding">
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<!-- Filtros Rápidos -->
|
||||||
|
<div class="filters-bar" style="justify-content: center; margin-bottom: 3rem;">
|
||||||
|
<button class="filter-btn soluciones-filter-btn active" data-filter="all">Todas las Soluciones</button>
|
||||||
|
<button class="filter-btn soluciones-filter-btn" data-filter="iso">Sistemas de Gestión & ISO</button>
|
||||||
|
<button class="filter-btn soluciones-filter-btn" data-filter="pmo">PMO & Gestión de Proyectos</button>
|
||||||
|
<button class="filter-btn soluciones-filter-btn" data-filter="formacion">Formación & Desarrollo</button>
|
||||||
|
<button class="filter-btn soluciones-filter-btn" data-filter="digital">Transformación Digital & IA</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Grilla de Soluciones -->
|
||||||
|
<div class="grid-2" id="soluciones-grid">
|
||||||
|
|
||||||
|
<!-- Solución 1: ISO 9001 -->
|
||||||
|
<div class="card solution-card" data-category="iso" style="display: flex; flex-direction: column; justify-content: space-between;">
|
||||||
|
<div>
|
||||||
|
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;">
|
||||||
|
<span class="ecosystem-badge badge-excellence">IDE Excellence</span>
|
||||||
|
<span style="font-size: 0.8rem; font-weight: 700; color: var(--text-muted);">NORMA INTERNACIONAL</span>
|
||||||
|
</div>
|
||||||
|
<h3 style="font-size: 1.3rem; margin-bottom: 0.75rem;">Implementación y Certificación ISO 9001:2015</h3>
|
||||||
|
<p style="font-size: 0.92rem; color: var(--text-body); line-height: 1.6; margin-bottom: 1rem;">
|
||||||
|
<strong>Qué es:</strong> Diseño e implantación de un Sistema de Gestión de Calidad orientado al cumplimiento, la satisfacción del cliente y la mejora continua de la operación.
|
||||||
|
</p>
|
||||||
|
<div style="background-color: var(--bg-subtle); padding: 1rem; border-radius: var(--radius-sm); font-size: 0.85rem; margin-bottom: 1.25rem;">
|
||||||
|
<p><strong>Para quién:</strong> Empresas industriales, de servicios y comerciales que buscan ordenar procesos o cumplir requisitos contractuales de clientes.</p>
|
||||||
|
<p style="margin-top: 0.4rem;"><strong>Valor esperado:</strong> Procesos estandarizados, reducción de errores y certificación exitosa sin burocracia innecesaria.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<!-- Venta cruzada sutil
|
||||||
|
<div style="font-size: 0.82rem; color: var(--text-muted); border-top: 1px solid var(--border-color); padding-top: 0.75rem; margin-bottom: 1rem;">
|
||||||
|
💡 <em>¿Sabías que un SGC requiere capacitar a los líderes? Conocé cómo <strong>IDE Academy</strong> complementa esta implementación.</em>
|
||||||
|
</div> -->
|
||||||
|
<a href="contacto.html?busqueda=Implementar%20o%20certificar%20una%20norma&origen=Solucion_ISO9001" class="btn btn-primary btn-sm" style="width: 100%;">
|
||||||
|
Consultar por Implementación ISO 9001 →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Solución 2: ISO 14001 / ISO 45001 -->
|
||||||
|
<div class="card solution-card" data-category="iso" style="display: flex; flex-direction: column; justify-content: space-between;">
|
||||||
|
<div>
|
||||||
|
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;">
|
||||||
|
<span class="ecosystem-badge badge-excellence">IDE Excellence</span>
|
||||||
|
<span style="font-size: 0.8rem; font-weight: 700; color: var(--text-muted);">SISTEMAS INTEGRADOS</span>
|
||||||
|
</div>
|
||||||
|
<h3 style="font-size: 1.3rem; margin-bottom: 0.75rem;">Sistemas de Gestión Ambiental (14001) y Seguridad (45001)</h3>
|
||||||
|
<p style="font-size: 0.92rem; color: var(--text-body); line-height: 1.6; margin-bottom: 1rem;">
|
||||||
|
<strong>Qué es:</strong> Implementación de normas para la gestión responsable del medio ambiente, prevención de riesgos laborales y cumplimiento de la legislación aplicable.
|
||||||
|
</p>
|
||||||
|
<div style="background-color: var(--bg-subtle); padding: 1rem; border-radius: var(--radius-sm); font-size: 0.85rem; margin-bottom: 1.25rem;">
|
||||||
|
<p><strong>Para quién:</strong> Plantas productivas, agroindustria, construcción y logística con exigencias legales y de sostenibilidad.</p>
|
||||||
|
<p style="margin-top: 0.4rem;"><strong>Valor esperado:</strong> Mitigación de contingencias legales, ambientes de trabajo seguros y posicionamiento sustentable.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<!-- <div style="font-size: 0.82rem; color: var(--text-muted); border-top: 1px solid var(--border-color); padding-top: 0.75rem; margin-bottom: 1rem;">
|
||||||
|
💡 <em>Integramos tableros de control digital de incidentes a través de <strong>IDE Digital</strong>.</em>
|
||||||
|
</div> -->
|
||||||
|
<a href="contacto.html?busqueda=Implementar%20o%20certificar%20una%20norma&origen=Solucion_ISO14001_45001" class="btn btn-primary btn-sm" style="width: 100%;">
|
||||||
|
Consultar por Sistemas Integrados →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Solución 3: ISO 21001 -->
|
||||||
|
<div class="card solution-card" data-category="iso" style="display: flex; flex-direction: column; justify-content: space-between;">
|
||||||
|
<div>
|
||||||
|
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;">
|
||||||
|
<span class="ecosystem-badge badge-excellence">IDE Excellence</span>
|
||||||
|
<span style="font-size: 0.8rem; font-weight: 700; color: var(--text-muted);">EDUCACIÓN</span>
|
||||||
|
</div>
|
||||||
|
<h3 style="font-size: 1.3rem; margin-bottom: 0.75rem;">Gestión de Calidad para Instituciones Educativas (ISO 21001)</h3>
|
||||||
|
<p style="font-size: 0.92rem; color: var(--text-body); line-height: 1.6; margin-bottom: 1rem;">
|
||||||
|
<strong>Qué es:</strong> Estandarización de procesos pedagógicos, administrativos y de evaluación orientados a la experiencia del estudiante y la excelencia académica.
|
||||||
|
</p>
|
||||||
|
<div style="background-color: var(--bg-subtle); padding: 1rem; border-radius: var(--radius-sm); font-size: 0.85rem; margin-bottom: 1.25rem;">
|
||||||
|
<p><strong>Para quién:</strong> Universidades, institutos terciarios, colegios y centros de capacitación corporativa.</p>
|
||||||
|
<p style="margin-top: 0.4rem;"><strong>Valor esperado:</strong> Mayor retención, coherencia en planes de estudio y prestigio institucional.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<!-- <div style="font-size: 0.82rem; color: var(--text-muted); border-top: 1px solid var(--border-color); padding-top: 0.75rem; margin-bottom: 1rem;">
|
||||||
|
💡 <em>Complementamos con diseño instruccional y campus virtual vía <strong>IDE Academy</strong>.</em>
|
||||||
|
</div> -->
|
||||||
|
<a href="contacto.html?busqueda=Implementar%20o%20certificar%20una%20norma&origen=Solucion_ISO21001" class="btn btn-primary btn-sm" style="width: 100%;">
|
||||||
|
Consultar por ISO 21001 →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Solución 4: PMO -->
|
||||||
|
<div class="card solution-card" data-category="pmo" style="display: flex; flex-direction: column; justify-content: space-between;">
|
||||||
|
<div>
|
||||||
|
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;">
|
||||||
|
<span class="ecosystem-badge badge-project">IDE Project</span>
|
||||||
|
<span style="font-size: 0.8rem; font-weight: 700; color: var(--text-muted);">DIRECCIÓN ESTRATÉGICA</span>
|
||||||
|
</div>
|
||||||
|
<h3 style="font-size: 1.3rem; margin-bottom: 0.75rem;">Diseño e Implementación de Oficina de Proyectos (PMO)</h3>
|
||||||
|
<p style="font-size: 0.92rem; color: var(--text-body); line-height: 1.6; margin-bottom: 1rem;">
|
||||||
|
<strong>Qué es:</strong> Estructuración de un marco de gobernanza, metodologías y tableros para priorizar, monitorear y ejecutar el portafolio de proyectos de la empresa.
|
||||||
|
</p>
|
||||||
|
<div style="background-color: var(--bg-subtle); padding: 1rem; border-radius: var(--radius-sm); font-size: 0.85rem; margin-bottom: 1.25rem;">
|
||||||
|
<p><strong>Para quién:</strong> Direcciones generales y gerencias que gestionan múltiples proyectos simultáneos sin visibilidad unificada.</p>
|
||||||
|
<p style="margin-top: 0.4rem;"><strong>Valor esperado:</strong> Cumplimiento de plazos, control de presupuestos y alineación estratégica de los recursos.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<!-- <div style="font-size: 0.82rem; color: var(--text-muted); border-top: 1px solid var(--border-color); padding-top: 0.75rem; margin-bottom: 1rem;">
|
||||||
|
💡 <em>Formamos a tus Project Managers internos mediante los programas de <strong>IDE Academy</strong>.</em>
|
||||||
|
</div> -->
|
||||||
|
<a href="contacto.html?busqueda=Gestionar%20o%20impulsar%20un%20proyecto&origen=Solucion_PMO" class="btn btn-primary btn-sm" style="width: 100%;">
|
||||||
|
Consultar por Implementación de PMO →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Solución 5: Capacitación In-Company -->
|
||||||
|
<div class="card solution-card" data-category="formacion" style="display: flex; flex-direction: column; justify-content: space-between;">
|
||||||
|
<div>
|
||||||
|
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;">
|
||||||
|
<span class="ecosystem-badge badge-academy">IDE Academy</span>
|
||||||
|
<span style="font-size: 0.8rem; font-weight: 700; color: var(--text-muted);">DESARROLLO DE TALENTO</span>
|
||||||
|
</div>
|
||||||
|
<h3 style="font-size: 1.3rem; margin-bottom: 0.75rem;">Programas de Formación y Desarrollo In-Company</h3>
|
||||||
|
<p style="font-size: 0.92rem; color: var(--text-body); line-height: 1.6; margin-bottom: 1rem;">
|
||||||
|
<strong>Qué es:</strong> Talleres y cursos a medida diseñados sobre los casos reales y procesos propios de tu organización (Gestión, Proyectos, Calidad, Liderazgo).
|
||||||
|
</p>
|
||||||
|
<div style="background-color: var(--bg-subtle); padding: 1rem; border-radius: var(--radius-sm); font-size: 0.85rem; margin-bottom: 1.25rem;">
|
||||||
|
<p><strong>Para quién:</strong> Equipos de mandos medios, líderes de procesos y colaboradores que necesitan actualizar competencias.</p>
|
||||||
|
<p style="margin-top: 0.4rem;"><strong>Valor esperado:</strong> Adopción inmediata en el puesto de trabajo y mayor autonomía operativa.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<!-- <div style="font-size: 0.82rem; color: var(--text-muted); border-top: 1px solid var(--border-color); padding-top: 0.75rem; margin-bottom: 1rem;">
|
||||||
|
💡 <em>Conocé los programas abiertos y temarios en nuestra página de <strong>IDE Academy</strong>.</em>
|
||||||
|
</div> -->
|
||||||
|
<a href="contacto.html?busqueda=Formación%20para%20mi%20organización&origen=Solucion_Capacitacion" class="btn btn-primary btn-sm" style="width: 100%;">
|
||||||
|
Solicitar Propuesta In-Company →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Solución 6: IA & Digital -->
|
||||||
|
<div class="card solution-card" data-category="digital" style="display: flex; flex-direction: column; justify-content: space-between;">
|
||||||
|
<div>
|
||||||
|
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;">
|
||||||
|
<span class="ecosystem-badge badge-digital">IDE Digital</span>
|
||||||
|
<span style="font-size: 0.8rem; font-weight: 700; color: var(--text-muted);">AUTOMATIZACIÓN</span>
|
||||||
|
</div>
|
||||||
|
<h3 style="font-size: 1.3rem; margin-bottom: 0.75rem;">Inteligencia Artificial y Automatización de Procesos</h3>
|
||||||
|
<p style="font-size: 0.92rem; color: var(--text-body); line-height: 1.6; margin-bottom: 1rem;">
|
||||||
|
<strong>Qué es:</strong> Diagnóstico de oportunidades de automatización e integración de asistentes inteligentes de IA para optimizar la gestión documental y operativa.
|
||||||
|
</p>
|
||||||
|
<div style="background-color: var(--bg-subtle); padding: 1rem; border-radius: var(--radius-sm); font-size: 0.85rem; margin-bottom: 1.25rem;">
|
||||||
|
<p><strong>Para quién:</strong> Organizaciones con alta carga de tareas repetitivas, reportes manuales o dispersión de datos.</p>
|
||||||
|
<p style="margin-top: 0.4rem;"><strong>Valor esperado:</strong> Ahorro de horas hombre semanales y toma de decisiones basada en información en tiempo real.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<!-- <div style="font-size: 0.82rem; color: var(--text-muted); border-top: 1px solid var(--border-color); padding-top: 0.75rem; margin-bottom: 1rem;">
|
||||||
|
💡 <em>Alineamos la tecnología con la estructura de procesos definida por <strong>IDE Excellence</strong>.</em>
|
||||||
|
</div> -->
|
||||||
|
<a href="contacto.html?busqueda=Transformación%20digital%20/%20IA&origen=Solucion_IA" class="btn btn-primary btn-sm" style="width: 100%;">
|
||||||
|
Consultar por IA en Procesos →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Banner de Cierre -->
|
||||||
|
<section class="section-padding-sm bg-subtle-section">
|
||||||
|
<div class="container text-center">
|
||||||
|
<h2 style="font-size: 1.8rem; margin-bottom: 0.75rem;">¿Tenés un requerimiento que no figura en la lista?</h2>
|
||||||
|
<p class="lead-text" style="margin: 0 auto 1.5rem auto;">
|
||||||
|
Evaluamos alcances específicos para proyectos a medida de consultoría organizacional.
|
||||||
|
</p>
|
||||||
|
<a href="contacto.html" class="btn btn-primary">Coordinar una llamada técnica →</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer id="site-footer"></footer>
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+176
@@ -0,0 +1,176 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es" data-theme="light">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Somos IDE | Identidad, Propósito y Equipo - IDE Consultores</title>
|
||||||
|
<meta name="description" content="Conocé el origen, propósito, equipo senior y metodología que sustentan el Ecosistema IDE Consultores.">
|
||||||
|
<meta property="og:title" content="Somos IDE | Identidad, Propósito y Equipo">
|
||||||
|
<meta property="og:description" content="Un equipo multidisciplinario con sólida trayectoria en gestión de calidad, proyectos, formación y tecnología.">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header id="site-header"></header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<!-- Hero / Origen y Propósito -->
|
||||||
|
<section class="section-padding" style="background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color);">
|
||||||
|
<div class="container container-narrow text-center">
|
||||||
|
<span class="eyebrow">PROPÓSITO & IDENTIDAD</span>
|
||||||
|
<h1 style="margin-bottom: 1.5rem;">Miramos las organizaciones como sistemas vivos y conectados.</h1>
|
||||||
|
<p class="lead-text" style="margin: 0 auto 2rem auto;">
|
||||||
|
IDE nace de una convicción fundamental: la verdadera transformación organizacional no ocurre acumulando iniciativas aisladas, sino comprendiendo cómo interactúan las personas, los procesos, los proyectos y la tecnología.
|
||||||
|
</p>
|
||||||
|
<div class="img-placeholder" style="aspect-ratio: 21/9; margin-top: 2rem;">
|
||||||
|
<!-- <div class="img-placeholder-icon">🏢</div> -->
|
||||||
|
<div class="img-placeholder-label">Fotografía Institucional de IDE Consultores</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Cómo Pensamos: La Mirada Sistémica -->
|
||||||
|
<section class="section-padding">
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid-2" style="align-items: center; gap: 3rem;">
|
||||||
|
<div>
|
||||||
|
<span class="eyebrow">FILOSOFÍA DE TRABAJO</span>
|
||||||
|
<h2>No intervenimos en todo. Comprendemos el todo para saber dónde intervenir.</h2>
|
||||||
|
<p style="font-size: 1.05rem; color: var(--text-body); margin-top: 1rem; line-height: 1.7;">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
|
</p>
|
||||||
|
<p style="font-size: 1rem; color: var(--text-muted); margin-top: 1rem; line-height: 1.6;">
|
||||||
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="card" style="padding: 2.25rem;">
|
||||||
|
<h3 style="font-size: 1.3rem; margin-bottom: 1rem; color: var(--ide-primary);">Nuestros Principios Guía</h3>
|
||||||
|
<ul style="list-style: none; display: flex; flex-direction: column; gap: 1rem; font-size: 0.95rem;">
|
||||||
|
<li style="display: flex; gap: 0.75rem;">
|
||||||
|
<span style="color: var(--ide-accent); font-weight: bold;">✓</span>
|
||||||
|
<span><strong>Visión Holística:</strong> Cada intervención evalúa el impacto en el conjunto de la organización.</span>
|
||||||
|
</li>
|
||||||
|
<li style="display: flex; gap: 0.75rem;">
|
||||||
|
<span style="color: var(--ide-accent); font-weight: bold;">✓</span>
|
||||||
|
<span><strong>Rigor y Pragmatismo:</strong> Normas y metodologías internacionales aplicadas a la realidad operativa diaria.</span>
|
||||||
|
</li>
|
||||||
|
<li style="display: flex; gap: 0.75rem;">
|
||||||
|
<span style="color: var(--ide-accent); font-weight: bold;">✓</span>
|
||||||
|
<span><strong>Apropiación Humana:</strong> Los cambios perduran sólo si las personas los comprenden y adoptan.</span>
|
||||||
|
</li>
|
||||||
|
<li style="display: flex; gap: 0.75rem;">
|
||||||
|
<span style="color: var(--ide-accent); font-weight: bold;">✓</span>
|
||||||
|
<span><strong>Transferencia de Capacidades:</strong> No generamos dependencias; formamos a su equipo interno.</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- El Equipo y Perfiles -->
|
||||||
|
<section class="section-padding bg-subtle-section">
|
||||||
|
<div class="container">
|
||||||
|
<div style="text-align: center; max-width: 700px; margin: 0 auto 3rem auto;">
|
||||||
|
<span class="eyebrow">NUESTRO EQUIPO SENIOR</span>
|
||||||
|
<h2>Experiencia profesional que sustenta cada intervención</h2>
|
||||||
|
<p class="lead-text" style="margin: 0 auto;">
|
||||||
|
Consultores, auditores líderes, directores de proyectos y tecnólogos con décadas de experiencia en el terreno.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid-3">
|
||||||
|
|
||||||
|
<!-- Miembro 1 -->
|
||||||
|
<div class="card text-center">
|
||||||
|
<div class="img-placeholder" style="width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 1.25rem auto; padding: 0.5rem;">
|
||||||
|
<!-- <div class="img-placeholder-icon" style="font-size: 1.5rem; margin: 0;">👤</div> -->
|
||||||
|
</div>
|
||||||
|
<h3 style="font-size: 1.2rem; margin-bottom: 0.25rem;">Juan Perez</h3>
|
||||||
|
<div style="font-size: 0.85rem; font-weight: 700; color: var(--ide-primary); margin-bottom: 0.75rem;">Director General & Líder de IDE Excellence</div>
|
||||||
|
<p style="font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 1rem;">
|
||||||
|
Auditor Líder IRCA en ISO 9001, 14001 y 45001. Más de 20 años asesorando a industrias de manufactura y servicios en Latinoamérica.
|
||||||
|
</p>
|
||||||
|
<div style="font-size: 0.8rem; color: var(--ide-accent); font-weight: 600;">Especialidad: Gestión de Procesos & Calidad</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Miembro 2 -->
|
||||||
|
<div class="card text-center">
|
||||||
|
<div class="img-placeholder" style="width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 1.25rem auto; padding: 0.5rem;">
|
||||||
|
<!-- <div class="img-placeholder-icon" style="font-size: 1.5rem; margin: 0;">👤</div> -->
|
||||||
|
</div>
|
||||||
|
<h3 style="font-size: 1.2rem; margin-bottom: 0.25rem;">Maria Martinez</h3>
|
||||||
|
<div style="font-size: 0.85rem; font-weight: 700; color: var(--ide-accent); margin-bottom: 0.75rem;">Líder de IDE Project & PMO</div>
|
||||||
|
<p style="font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 1rem;">
|
||||||
|
Certificada PMP® y Scrum Master. Ha liderado la implementación de Oficinas de Gestión de Proyectos en empresas del sector energético y tecnológico.
|
||||||
|
</p>
|
||||||
|
<div style="font-size: 0.8rem; color: var(--ide-accent); font-weight: 600;">Especialidad: PMO & Metodologías Ágiles</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Miembro 3 -->
|
||||||
|
<div class="card text-center">
|
||||||
|
<div class="img-placeholder" style="width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 1.25rem auto; padding: 0.5rem;">
|
||||||
|
<!-- <div class="img-placeholder-icon" style="font-size: 1.5rem; margin: 0;">👤</div> -->
|
||||||
|
</div>
|
||||||
|
<h3 style="font-size: 1.2rem; margin-bottom: 0.25rem;">Carlos Garcia</h3>
|
||||||
|
<div style="font-size: 0.85rem; font-weight: 700; color: #6366F1; margin-bottom: 0.75rem;">Líder de IDE Digital & Academy</div>
|
||||||
|
<p style="font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 1rem;">
|
||||||
|
Magíster en Transformación Digital e Innovación. Especialista en automatización inteligente de flujos y diseño de programas de formación ejecutiva.
|
||||||
|
</p>
|
||||||
|
<div style="font-size: 0.8rem; color: var(--ide-accent); font-weight: 600;">Especialidad: IA Aplicada & Aprendizaje Organizacional</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Marcos de Referencia y Metodologías -->
|
||||||
|
<section class="section-padding">
|
||||||
|
<div class="container">
|
||||||
|
<div style="text-align: center; margin-bottom: 3rem;">
|
||||||
|
<span class="eyebrow">ESTÁNDARES GLOBALES</span>
|
||||||
|
<h2>Marcos y metodologías en los que nos basamos</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid-4" style="text-align: center;">
|
||||||
|
<div class="card">
|
||||||
|
<h4 style="color: var(--ide-primary); margin-bottom: 0.5rem;">Normas ISO</h4>
|
||||||
|
<p style="font-size: 0.85rem; color: var(--text-muted);">ISO 9001, 14001, 45001, 21001, 27001 con enfoque de valor y gobernanza.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h4 style="color: var(--ide-accent); margin-bottom: 0.5rem;">PMI & Agile</h4>
|
||||||
|
<p style="font-size: 0.85rem; color: var(--text-muted);">PMBOK®, Scrum, Kanban y marcos híbridos adaptados a proyectos complejos.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h4 style="color: #ed8d01; margin-bottom: 0.5rem;">Adult Learning</h4>
|
||||||
|
<p style="font-size: 0.85rem; color: var(--text-muted);">Diseño instruccional para adultos, casos prácticos y aprendizaje experiencial.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h4 style="color: #2c69ab; margin-bottom: 0.5rem;">IA & Automatización</h4>
|
||||||
|
<p style="font-size: 0.85rem; color: var(--text-muted);">Integración ética de IA, análisis de datos y reingeniería de flujos de trabajo.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA Final -->
|
||||||
|
<section class="section-padding-sm bg-subtle-section">
|
||||||
|
<div class="container text-center">
|
||||||
|
<h2 style="font-size: 2rem; margin-bottom: 1rem;">Construyamos una solución a la medida de tu organización</h2>
|
||||||
|
<p class="lead-text" style="margin: 0 auto 2rem auto;">
|
||||||
|
Contactanos para evaluar cómo nuestro equipo multidisciplinario puede aportar valor en tu próximo desafío.
|
||||||
|
</p>
|
||||||
|
<a href="contacto.html" class="btn btn-primary btn-lg">HABLEMOS</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer id="site-footer"></footer>
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,125 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es" data-theme="light">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Trabaja con Nosotros | Sumate a IDE Consultores</title>
|
||||||
|
<meta name="description" content="Buscamos profesionales apasionados por el pensamiento sistémico, la gestión de calidad, la dirección de proyectos y la tecnología.">
|
||||||
|
<meta property="og:title" content="Trabaja con Nosotros | IDE Consultores">
|
||||||
|
<meta property="og:description" content="Formá parte de un equipo multidisciplinario que impulsa la transformación organizacional real.">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header id="site-header"></header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<!-- Header Trabaja con Nosotros -->
|
||||||
|
<section class="section-padding" style="background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color);">
|
||||||
|
<div class="container container-narrow text-center">
|
||||||
|
<span class="eyebrow">TALENTO & EQUIPO</span>
|
||||||
|
<h1 style="margin-bottom: 1.25rem;">Sumate a la red de <br> consultores de IDE</h1>
|
||||||
|
<p class="lead-text" style="margin: 0 auto;">
|
||||||
|
Buscamos constantemente profesionales senior y especialistas apasionados por el pensamiento sistémico, la calidad, la gestión de proyectos y la innovación tecnológica.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Cultura y Formulario de Postulación -->
|
||||||
|
<section class="section-padding">
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<div class="grid-2" style="gap: 3.5rem; align-items: flex-start;">
|
||||||
|
|
||||||
|
<!-- Cultura y Áreas -->
|
||||||
|
<div>
|
||||||
|
<span class="eyebrow">NUESTRA CULTURA</span>
|
||||||
|
<h2>Cómo trabajamos en IDE</h2>
|
||||||
|
<p style="font-size: 1rem; color: var(--text-body); line-height: 1.65; margin: 1rem 0 1.5rem 0;">
|
||||||
|
En IDE no creemos en soluciones enlatadas ni en jerarquías rígidas. Valoramos la curiosidad intelectual, la capacidad de escuchar a las organizaciones y el compromiso ético con los resultados de nuestros clientes.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="card" style="margin-bottom: 1.5rem; padding: 1.5rem;">
|
||||||
|
<h3 style="font-size: 1.15rem; color: var(--ide-primary); margin-bottom: 0.75rem;">Áreas de Práctica Activas</h3>
|
||||||
|
<ul style="list-style: none; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.9rem; color: var(--text-muted);">
|
||||||
|
<li>• <strong>IDE Excellence:</strong> Auditores Líderes y consultores en ISO 9001, 14001, 45001, 21001.</li>
|
||||||
|
<li>• <strong>IDE Project:</strong> Project Managers certificados PMP®, Scrum Masters y líderes de PMO.</li>
|
||||||
|
<li>• <strong>IDE Academy:</strong> Facilitadores, diseñadores instruccionales y docentes corporativos.</li>
|
||||||
|
<li>• <strong>IDE Digital:</strong> Especialistas en automatización No-Code, IA aplicada y Business Intelligence.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="img-placeholder" style="aspect-ratio: 16/9;">
|
||||||
|
<!-- <div class="img-placeholder-icon">🤝</div> -->
|
||||||
|
<div class="img-placeholder-label">Espacio Fotográfico Equipo & Cultura IDE</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Formulario de Talento -->
|
||||||
|
<div class="card" style="padding: clamp(1.75rem, 4vw, 2.5rem);">
|
||||||
|
<h3 style="font-size: 1.35rem; margin-bottom: 0.5rem; color: var(--ide-accent-hover);">Envianos tu Perfil</h3>
|
||||||
|
<p style="font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.75rem;">
|
||||||
|
Completá tus datos y dejanos el enlace a tu LinkedIn o CV online para considerarte en futuros proyectos y búsquedas.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<form id="ide-careers-form">
|
||||||
|
<input type="hidden" name="form_type" value="trabaja">
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="careers-nombre" class="form-label">Nombre y Apellido *</label>
|
||||||
|
<input type="text" id="careers-nombre" name="nombre" class="form-control" placeholder="Ej: Lic. Carolina Méndez" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid-2" style="gap: 1rem;">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="careers-email" class="form-label">Correo Electrónico *</label>
|
||||||
|
<input type="email" id="careers-email" name="email" class="form-control" placeholder="nombre@correo.com" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="careers-telefono" class="form-label">Teléfono</label>
|
||||||
|
<input type="tel" id="careers-telefono" name="telefono" class="form-control" placeholder="+54 9 11 ...">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="careers-area" class="form-label">Área de Interés Principal *</label>
|
||||||
|
<select id="careers-area" name="area" class="form-control" required>
|
||||||
|
<option value="Consultoría en Calidad y Normas ISO (Excellence)">Consultoría en Calidad y Normas ISO (Excellence)</option>
|
||||||
|
<option value="Gestión y Dirección de Proyectos (Project)">Gestión y Dirección de Proyectos (Project)</option>
|
||||||
|
<option value="Docencia y Capacitación In-Company (Academy)">Docencia y Capacitación In-Company (Academy)</option>
|
||||||
|
<option value="Transformación Digital e IA (Digital)">Transformación Digital e IA (Digital)</option>
|
||||||
|
<option value="Otras especialidades">Otras especialidades</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="careers-linkedin" class="form-label">Enlace a LinkedIn o CV Online *</label>
|
||||||
|
<input type="url" id="careers-linkedin" name="linkedin" class="form-control" placeholder="https://linkedin.com/in/tu-perfil" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="careers-mensaje" class="form-label">Breve presentación o trayectoria destacada</label>
|
||||||
|
<textarea id="careers-mensaje" name="mensaje" class="form-control" rows="3" placeholder="Contanos sobre tu experiencia profesional y qué te motiva de IDE..."></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" class="btn btn-accent btn-lg" style="width: 100%; margin-top: 0.5rem;">
|
||||||
|
Enviar Postulación
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div id="careers-form-alert" class="form-alert"></div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer id="site-footer"></footer>
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user