Files
IDE-Demo-B/index.html
T

430 lines
24 KiB
HTML

<!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>
<!-- SEO Meta Tags -->
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="assets/img/favicon.png">
<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;">
<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"/>
<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)"/>
<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(--text-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>