Files
IDE-Demo-B/index.html
T

798 lines
40 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="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<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">
<link rel="stylesheet" href="css/index.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="section-padding herobg-1">
<div class="container container-wide">
<div class="hero-grid">
<div>
<span class="eyebrow" style="text-transform: uppercase;">¿Qué pasa cuando dejamos de mirar los problemas por
separado?</span>
<h1 style="margin-bottom: 1rem; font-size: 5.5rem; line-height: 1.1; color: white;">
Conectamos el todo
</h1>
<p class="lead-text" style="margin-bottom: 2.5rem;color:white">
En IDE entendemos cómo funciona el sistema para identificar dónde intervenir, integrar las capacidades
necesarias y generar valor en el conjunto.
</p>
<!-- Hero Actions -->
<div class="hero-actions" style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
<form action="buscar.html" method="GET" class="hero-search-form"
style="display: flex; position: relative;">
<input type="text" name="q" placeholder="Buscar soluciones..." class="hero-search-input"
style="padding: 0.75rem 1rem 0.75rem 2.5rem; border-radius: 50px; border: 1px solid white; background: var(--bg-primary); width: 250px; font-family: inherit; color: white; caret-color: white;">
<button type="submit" class="hero-search-submit"
style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-muted); cursor: pointer;"
aria-label="Buscar">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</button>
</form>
<a href="contacto.html" class="btn btn-cta-unificado"
style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem;">
HABLEMOS
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 16 16 12 12 8"></polyline>
<line x1="8" y1="12" x2="16" y2="12"></line>
</svg>
</a>
</div>
</div>
<div class="hero-visual"
style="width: 100%; height: 500px; position: relative; display: flex; justify-content: center; align-items: center;">
</div>
</div>
</div>
</section>
<!-- BLOQUE 2: EL ECOSISTEMA (CARRUSEL DE 4 CAPACIDADES) -->
<section class="section-padding-sm bg2 ecosystem-section" id="ecosistema" style="background-color: var(--bg-subtle);">
<div class="container">
<!-- HEADER: eyebrow + título -->
<div class="ecosystem-header" style="text-align: center; margin-bottom: 1.5rem;">
<span class="eyebrow" style="margin-bottom: -1rem;">Cuatro capacidades. Un mismo propósito: generar impacto.</span>
<h1>Ecosistema Integrado</h1>
</div>
<!-- BOTONES / TABS -->
<div class="ecosystem-tabs" role="tablist" aria-label="Capacidades del ecosistema">
<button class="eco-tab" data-index="0" data-color="var(--ide-excellence)"
role="tab" aria-selected="true" aria-controls="slide-0">
Excellence
</button>
<button class="eco-tab" data-index="1" data-color="var(--ide-projects)"
role="tab" aria-selected="false" aria-controls="slide-1">
Project
</button>
<button class="eco-tab" data-index="2" data-color="var(--ide-digital)"
role="tab" aria-selected="false" aria-controls="slide-2">
Digital
</button>
<button class="eco-tab" data-index="3" data-color="var(--ide-academy)"
role="tab" aria-selected="false" aria-controls="slide-3">
Academy
</button>
</div>
<!-- CARRUSEL -->
<div class="ecosystem-carousel" aria-live="polite">
<!-- SLIDE 0: Excellence -->
<div class="eco-slide eco-slide--excellence" id="slide-0" role="tabpanel">
<div class="eco-slide__bg"></div>
<div class="eco-slide__overlay"></div>
<div class="eco-slide__content">
<div class="eco-slide__logo logo-excellence" aria-hidden="true"></div>
<div class="eco-slide__text">
<h3>Fortalecer la gestión</h3>
<p>Sistemas de gestión, normas ISO (9001, 14001, 45001, 50001, 22000, 27001, 28000, 39001, 21001 y 29993), gestión por procesos, calidad y mejora continua con sentido de negocio.</p>
<a href="ecosistema.html#eco-excellence" class="eco-slide__link">Explorar Excellence →</a>
</div>
</div>
</div>
<!-- SLIDE 1: Project -->
<div class="eco-slide eco-slide--project" id="slide-1" role="tabpanel" hidden>
<div class="eco-slide__bg"></div>
<div class="eco-slide__overlay"></div>
<div class="eco-slide__content">
<div class="eco-slide__logo logo-project" aria-hidden="true"></div>
<div class="eco-slide__text">
<h3>Convertir proyectos en resultados</h3>
<p>Dirección estratégica de proyectos, implementación de PMO, metodologías ágiles/híbridas y control de cumplimiento.</p>
<a href="ecosistema.html#project" class="eco-slide__link">Explorar Project →</a>
</div>
</div>
</div>
<!-- SLIDE 2: Digital -->
<div class="eco-slide eco-slide--digital" id="slide-2" role="tabpanel" hidden>
<div class="eco-slide__bg"></div>
<div class="eco-slide__overlay"></div>
<div class="eco-slide__content">
<div class="eco-slide__logo logo-digital" aria-hidden="true"></div>
<div class="eco-slide__text">
<h3>Integrar tecnología con propósito</h3>
<p>Inteligencia artificial aplicada, automatización de flujos de procesos, tableros de datos y transformación digital sensata.</p>
<a href="ecosistema.html#digital" class="eco-slide__link">Explorar Digital →</a>
</div>
</div>
</div>
<!-- SLIDE 3: Academy -->
<div class="eco-slide eco-slide--academy" id="slide-3" role="tabpanel" hidden>
<div class="eco-slide__bg"></div>
<div class="eco-slide__overlay"></div>
<div class="eco-slide__content">
<div class="eco-slide__logo logo-academy" aria-hidden="true"></div>
<div class="eco-slide__text">
<h3>Desarrollar capacidades</h3>
<p>Formación ejecutiva e In-Company que conecta conocimiento, práctica y contexto para desarrollar capacidades y sostener la transformación de tus equipos.</p>
<a href="ide-academy.html" class="eco-slide__link">Explorar Academy →</a>
</div>
</div>
</div>
</div><!-- /ecosystem-carousel -->
</div>
</section>
<!-- BLOQUE 3: SECTORES Y EXPERIENCIA INSTITUCIONAL -->
<section class="section-padding bg3" style="background-color: var(--bg-subtle);">
<div class="container" style="margin-bottom: 4rem;">
<div class="ambitos-grid" style="display: grid; grid-template-columns: 1fr 2.5fr; gap: 3rem; align-items: center;">
<!-- ENCABEZADO (Intacto) -->
<div class="ambitos-header">
<h2 style="font-size: 2.2rem; margin-bottom: 1rem; line-height: 1.2;">Ámbitos de Experiencia</h2>
<p style="font-size: 1.1rem; color: var(--text-muted); line-height: 1.6;">
Comprendemos las particularidades de cada sector para adaptar la intervención sin perder de vista el conjunto.
</p>
</div>
<!-- GRID DE TARJETAS (Refactorizado) -->
<div class="grid-5">
<div class="ambito-card hover-reveal cardi-agro">
<div class="overlay"></div>
<div class="content">
<h4>Agro & Alimentos</h4>
<p class="reveal-text">Fortalecer operaciones y generar valor sostenible.</p>
</div>
</div>
<div class="ambito-card hover-reveal cardi-industria">
<div class="overlay"></div>
<div class="content">
<h4>Industria & Servicios</h4>
<p class="reveal-text">Optimizar la gestión y potenciar la eficiencia operativa.</p>
</div>
</div>
<div class="ambito-card hover-reveal cardi-telecom">
<div class="overlay"></div>
<div class="content">
<h4>Telecomunicaciones</h4>
<p class="reveal-text">Impulsar conectividad eficiente mediante operaciones y proyectos integrados.</p>
</div>
</div>
<div class="ambito-card hover-reveal cardi-salud">
<div class="overlay"></div>
<div class="content">
<h4>Sector Salud</h4>
<p class="reveal-text">Fortalecer la calidad, la seguridad y la experiencia del paciente.</p>
</div>
</div>
<div class="ambito-card hover-reveal cardi-educacion">
<div class="overlay"></div>
<div class="content">
<h4>Educación & Gobierno</h4>
<p class="reveal-text">Fortalecer la gestión y generar mejores resultados.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- BLOQUE 4: LA BRÚJULA -->
<section class="section-padding brujula-section bg1" style="position: relative; overflow: hidden;">
<!-- MARCA DE AGUA -->
<div class="brujula-watermark" aria-hidden="true">
<svg viewBox="0 0 200 200" fill="none" stroke="currentColor" stroke-width="0.8">
<!-- Anillos exteriores e interiores -->
<circle cx="100" cy="100" r="95" stroke-width="1.2" />
<circle cx="100" cy="100" r="88" stroke-width="0.6" />
<circle cx="100" cy="100" r="65" stroke-width="0.5" stroke-dasharray="3 4" opacity="0.7" />
<circle cx="100" cy="100" r="22" stroke-width="0.8" opacity="0.5" />
<circle cx="100" cy="100" r="4" fill="currentColor" stroke="none" />
<!-- Marcas de grados exteriores (Alternadas) -->
<g stroke-width="0.8" opacity="0.8">
<!-- Marcas menores (cada 15 grados) -->
<line x1="100" y1="5" x2="100" y2="9" transform="rotate(15 100 100)" />
<line x1="100" y1="5" x2="100" y2="9" transform="rotate(45 100 100)" />
<line x1="100" y1="5" x2="100" y2="9" transform="rotate(75 100 100)" />
<line x1="100" y1="5" x2="100" y2="9" transform="rotate(105 100 100)" />
<line x1="100" y1="5" x2="100" y2="9" transform="rotate(135 100 100)" />
<line x1="100" y1="5" x2="100" y2="9" transform="rotate(165 100 100)" />
<line x1="100" y1="5" x2="100" y2="9" transform="rotate(195 100 100)" />
<line x1="100" y1="5" x2="100" y2="9" transform="rotate(225 100 100)" />
<line x1="100" y1="5" x2="100" y2="9" transform="rotate(255 100 100)" />
<line x1="100" y1="5" x2="100" y2="9" transform="rotate(285 100 100)" />
<line x1="100" y1="5" x2="100" y2="9" transform="rotate(315 100 100)" />
<line x1="100" y1="5" x2="100" y2="9" transform="rotate(345 100 100)" />
<!-- Marcas medias (cada 30 grados) -->
<line x1="100" y1="5" x2="100" y2="12" stroke-width="1" transform="rotate(30 100 100)" />
<line x1="100" y1="5" x2="100" y2="12" stroke-width="1" transform="rotate(60 100 100)" />
<line x1="100" y1="5" x2="100" y2="12" stroke-width="1" transform="rotate(120 100 100)" />
<line x1="100" y1="5" x2="100" y2="12" stroke-width="1" transform="rotate(150 100 100)" />
<line x1="100" y1="5" x2="100" y2="12" stroke-width="1" transform="rotate(210 100 100)" />
<line x1="100" y1="5" x2="100" y2="12" stroke-width="1" transform="rotate(240 100 100)" />
<line x1="100" y1="5" x2="100" y2="12" stroke-width="1" transform="rotate(300 100 100)" />
<line x1="100" y1="5" x2="100" y2="12" stroke-width="1" transform="rotate(330 100 100)" />
</g>
<!-- Marcas principales en el borde (N, S, E, O) cortadas para no pisar texto -->
<line x1="100" y1="5" x2="100" y2="14" stroke-width="1.8" />
<line x1="100" y1="186" x2="100" y2="195" stroke-width="1.8" />
<line x1="186" y1="100" x2="195" y2="100" stroke-width="1.8" />
<line x1="5" y1="100" x2="14" y2="100" stroke-width="1.8" />
<!-- Letras de los puntos cardinales (Ubicadas en espacios vacíos limpios) -->
<text x="100" y="26" font-size="14" font-weight="bold" fill="currentColor" stroke="none" text-anchor="middle">N</text>
<text x="100" y="184" font-size="14" font-weight="bold" fill="currentColor" stroke="none" text-anchor="middle">S</text>
<text x="182" y="105" font-size="14" font-weight="bold" fill="currentColor" stroke="none" text-anchor="middle">E</text>
<text x="18" y="105" font-size="14" font-weight="bold" fill="currentColor" stroke="none" text-anchor="middle">O</text>
<!-- Letras de los puntos intermedios -->
<text x="151" y="53" font-size="7" font-weight="bold" fill="currentColor" stroke="none" text-anchor="middle" opacity="0.6">NE</text>
<text x="151" y="153" font-size="7" font-weight="bold" fill="currentColor" stroke="none" text-anchor="middle" opacity="0.6">SE</text>
<text x="49" y="153" font-size="7" font-weight="bold" fill="currentColor" stroke="none" text-anchor="middle" opacity="0.6">SO</text>
<text x="49" y="53" font-size="7" font-weight="bold" fill="currentColor" stroke="none" text-anchor="middle" opacity="0.6">NO</text>
<!-- Rosa de los vientos principal (Efecto 3D con doble tono) -->
<g stroke="none">
<!-- Punta Norte -->
<polygon points="100,34 100,100 88,100" fill="currentColor" opacity="0.6" />
<polygon points="100,34 112,100 100,100" fill="currentColor" opacity="0.3" />
<!-- Punta Sur -->
<polygon points="100,166 100,100 112,100" fill="currentColor" opacity="0.6" />
<polygon points="100,166 88,100 100,100" fill="currentColor" opacity="0.3" />
<!-- Punta Este -->
<polygon points="166,100 100,100 100,88" fill="currentColor" opacity="0.6" />
<polygon points="166,100 100,112 100,100" fill="currentColor" opacity="0.3" />
<!-- Punta Oeste -->
<polygon points="34,100 100,100 100,112" fill="currentColor" opacity="0.6" />
<polygon points="34,100 100,88 100,100" fill="currentColor" opacity="0.3" />
</g>
<!-- Rosa de los vientos intermedia (Puntas más cortas) -->
<g stroke="none">
<!-- NE -->
<g transform="rotate(45 100 100)">
<polygon points="100,50 100,100 92,100" fill="currentColor" opacity="0.4" />
<polygon points="100,50 108,100 100,100" fill="currentColor" opacity="0.15" />
</g>
<!-- SE -->
<g transform="rotate(135 100 100)">
<polygon points="100,50 100,100 92,100" fill="currentColor" opacity="0.4" />
<polygon points="100,50 108,100 100,100" fill="currentColor" opacity="0.15" />
</g>
<!-- SO -->
<g transform="rotate(225 100 100)">
<polygon points="100,50 100,100 92,100" fill="currentColor" opacity="0.4" />
<polygon points="100,50 108,100 100,100" fill="currentColor" opacity="0.15" />
</g>
<!-- NO -->
<g transform="rotate(315 100 100)">
<polygon points="100,50 100,100 92,100" fill="currentColor" opacity="0.4" />
<polygon points="100,50 108,100 100,100" fill="currentColor" opacity="0.15" />
</g>
</g>
</svg>
</div>
<div class="container">
<div style="display: flex; flex-direction: column; gap: 2rem; align-items: center;">
<div class="ecosystem-header" style="text-align: center; margin-bottom: 1.5rem;">
<span class="eyebrow" style="margin-bottom: -1rem;">Encontrá donde podemos generar impacto.</span>
<h1>Brújula IDE</h1>
</div>
<div class="quiz-container" id="quiz-interactive-app" style="margin: 0; width: 100%; max-width: 1200px; box-shadow: var(--shadow-md); position: relative;">
<!-- HEADER -->
<p style="font-size: 0.95rem; color: var(--text-muted); margin-bottom: 1rem;">
Todos los desafíos no necesitan la misma estrategia.<br>Respondé 4 preguntas breves y descubrí qué capacidades de IDE pueden aportar mayor valor a tu contexto.
</p>
<!-- BARRA DE PROGRESO -->
<div class="quiz-progress-bar">
<div id="quiz-progress-fill" class="quiz-progress-fill"></div>
</div>
<!-- BOTÓN VOLVER GLOBAL -->
<button id="global-quiz-back-btn" class="quiz-back-btn" onclick="goBack()" style="display: none;">← Volver</button>
<!-- ==========================================================
PASO 1: Situación actual
========================================================== -->
<div class="quiz-step active" id="step-1">
<div class="quiz-step-header">
<div>
<h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">¿Qué describe mejor tu situación hoy?</h3>
<p style="font-size: 0.88rem; color: var(--text-muted);">Seleccioná la opción que mejor represente tu contexto:</p>
</div>
</div>
<div class="quiz-options-grid">
<div class="quiz-option-card" data-step="1" data-val="desafio">
<div>
<strong class="opt-title">
<i class="fa-solid fa-magnifying-glass"></i><span>Algo no está funcionando</span>
</strong>
<span style="font-size: 0.84rem; color: var(--text-muted);">
Tengo un problema, pero no sé bien qué solución necesito.
</span>
</div>
</div>
<div class="quiz-option-card" data-step="1" data-val="objetivo">
<div>
<strong class="opt-title">
<i class="fa-solid fa-binoculars"></i><span>Sé qué quiero lograr</span>
</strong>
<span style="font-size: 0.84rem; color: var(--text-muted);">Tengo un objetivo claro, pero no sé cómo alcanzarlo.</span>
</div>
</div>
<div class="quiz-option-card" data-step="1" data-val="solucion">
<div>
<strong class="opt-title">
<i class="fa-solid fa-gear"></i><span>Sé exactamente qué necesito</span>
</strong>
<span style="font-size: 0.84rem; color: var(--text-muted);">Busco ISO, PMO, transformación digital u otra solución concreta.</span>
</div>
</div>
<div class="quiz-option-card" data-step="1" data-val="conocimiento">
<div>
<strong class="opt-title">
<i class="fa-solid fa-book"></i><span>Quiero aprender o formarme</span>
</strong>
<span style="font-size: 0.84rem; color: var(--text-muted);">Busco formación, capacitación o conocimiento especializado.</span>
</div>
</div>
</div>
</div>
<!-- ==========================================================
PASO 2A: Desafío (¿Qué área no funciona?)
========================================================== -->
<div class="quiz-step" id="step-2a">
<div class="quiz-step-header">
<div>
<h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">¿En qué área sentís que algo no funciona como debería?</h3>
<p style="font-size: 0.88rem; color: var(--text-muted);">Identifiquemos el área crítica:</p>
</div>
</div>
<div class="quiz-options-grid">
<div class="quiz-option-card" data-step="2a" data-val="gestion">
<div>
<strong class="opt-title">
<i class="fa-solid fa-diagram-next"></i><span>Gestión y procesos</span>
</strong>
<span style="font-size: 0.84rem; color: var(--text-muted);">Los procesos no son eficientes o no están claros.</span>
</div>
</div>
<div class="quiz-option-card" data-step="2a" data-val="proyectos">
<div>
<strong class="opt-title">
<i class="fa-solid fa-thumbtack"></i><span>Proyectos y resultados</span>
</strong>
<span style="font-size: 0.84rem; color: var(--text-muted);">Los proyectos no llegan a destino o se desvían.</span>
</div>
</div>
<div class="quiz-option-card" data-step="2a" data-val="personas">
<div>
<strong class="opt-title">
<i class="fa-solid fa-user-group"></i><span>Personas y capacidades</span>
</strong>
<span style="font-size: 0.84rem; color: var(--text-muted);">El equipo necesita desarrollar nuevas habilidades.</span>
</div>
</div>
<div class="quiz-option-card" data-step="2a" data-val="tecnologia">
<div>
<strong class="opt-title">
<i class="fa-solid fa-robot"></i><span>Tecnología e innovación</span>
</strong>
<span style="font-size: 0.84rem; color: var(--text-muted);">La organización necesita digitalizarse o incorporar IA.</span>
</div>
</div>
<div class="quiz-option-card" data-step="2a" data-val="nosabe">
<div>
<strong class="opt-title">
<i class="fa-solid fa-earth-americas"></i><span>No sé bien</span>
</strong>
<span style="font-size: 0.84rem; color: var(--text-muted);">Algo no funciona, pero es difícil de identificar.</span>
</div>
</div>
</div>
</div>
<!-- ==========================================================
PASO 2B: Objetivo (¿Qué querés lograr?)
========================================================== -->
<div class="quiz-step" id="step-2b">
<div class="quiz-step-header">
<div>
<h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">¿Qué querés lograr?</h3>
<p style="font-size: 0.88rem; color: var(--text-muted);">Definí tu objetivo principal:</p>
</div>
</div>
<div class="quiz-options-grid">
<div class="quiz-option-card" data-step="2b" data-val="mejorar-gestion">
<div>
<strong class="opt-title">
<i class="fa-solid fa-diagram-project"></i><span>Mejorar gestión y procesos</span>
</strong>
<span style="font-size: 0.84rem; color: var(--text-muted);">Ordenar, optimizar y hacer más eficiente la operación.</span>
</div>
</div>
<div class="quiz-option-card" data-step="2b" data-val="profesionalizar-proyectos">
<div>
<strong class="opt-title">
<i class="fa-solid fa-diagram-predecessor"></i><span>Profesionalizar los proyectos</span>
</strong>
<span style="font-size: 0.84rem; color: var(--text-muted);">Que los proyectos se entreguen en tiempo y con los resultados esperados.</span>
</div>
</div>
<div class="quiz-option-card" data-step="2b" data-val="desarrollar-equipo">
<div>
<strong class="opt-title">
<i class="fa-solid fa-seedling"></i><span>Desarrollar capacidades</span>
</strong>
<span style="font-size: 0.84rem; color: var(--text-muted);">Que las personas estén preparadas para los desafíos que vienen.</span>
</div>
</div>
<div class="quiz-option-card" data-step="2b" data-val="transformar-digital">
<div>
<strong class="opt-title">
<i class="fa-solid fa-bolt"></i><span>Transformar la organización</span>
</strong>
<span style="font-size: 0.84rem; color: var(--text-muted);">Integrar tecnología e IA de manera estratégica y sostenible.</span>
</div>
</div>
</div>
</div>
<!-- ==========================================================
PASO 2C: Solución concreta (¿Qué solución buscás?)
========================================================== -->
<div class="quiz-step" id="step-2c">
<div class="quiz-step-header">
<div>
<h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">¿Qué solución estás buscando?</h3>
<p style="font-size: 0.88rem; color: var(--text-muted);">Seleccioná la opción que mejor se ajuste:</p>
</div>
</div>
<div class="quiz-options-grid">
<div class="quiz-option-card" data-step="2c" data-val="iso">
<div>
<strong class="opt-title">
<i class="fa-solid fa-clipboard-list"></i><span>Normas ISO y SGI</span>
</strong>
<span style="font-size: 0.84rem; color: var(--text-muted);">ISO 9001, 14001, 45001 u otra norma de gestión.</span>
</div>
</div>
<div class="quiz-option-card" data-step="2c" data-val="pmo">
<div>
<strong class="opt-title">
<i class="fa-solid fa-diagram-next"></i><span>PMO o gestión de proyectos</span>
</strong>
<span style="font-size: 0.84rem; color: var(--text-muted);">Implementar una oficina de proyectos o mejorar su gestión.</span>
</div>
</div>
<div class="quiz-option-card" data-step="2c" data-val="formacion">
<div>
<strong class="opt-title">
<i class="fa-solid fa-graduation-cap"></i><span>Formación</span>
</strong>
<span style="font-size: 0.84rem; color: var(--text-muted);">Capacitación in company o programas de desarrollo.</span>
</div>
</div>
<div class="quiz-option-card" data-step="2c" data-val="ia-digital">
<div>
<strong class="opt-title">
<i class="fa-solid fa-robot"></i><span>Digitalización e IA</span>
</strong>
<span style="font-size: 0.84rem; color: var(--text-muted);">Digitalización de procesos, automatización o IA aplicada.</span>
</div>
</div>
</div>
</div>
<!-- ==========================================================
PASO 2D: Conocimiento (¿Qué formación buscás?)
========================================================== -->
<div class="quiz-step" id="step-2d">
<div class="quiz-step-header">
<div>
<h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">¿Qué tipo de formación o conocimiento buscás?</h3>
<p style="font-size: 0.88rem; color: var(--text-muted);">Seleccioná el área de interés:</p>
</div>
</div>
<div class="quiz-options-grid">
<div class="quiz-option-card" data-step="2d" data-val="iso-form">
<div>
<strong class="opt-title">
<i class="fa-solid fa-clipboard-list"></i><span>Normas ISO y SGI</span>
</strong>
<span style="font-size: 0.84rem; color: var(--text-muted);">Auditoría interna, implementación de normas, mejora continua.</span>
</div>
</div>
<div class="quiz-option-card" data-step="2d" data-val="pm-form">
<div>
<strong class="opt-title">
<i class="fa-solid fa-thumbtack"></i><span>Gestión de proyectos</span>
</strong>
<span style="font-size: 0.84rem; color: var(--text-muted);">Herramientas, metodologías, PMP, ágil, híbrido.</span>
</div>
</div>
<div class="quiz-option-card" data-step="2d" data-val="liderazgo-form">
<div>
<strong class="opt-title">
<i class="fa-solid fa-compass"></i><span>Liderazgo</span>
</strong>
<span style="font-size: 0.84rem; color: var(--text-muted);">Desarrollo de líderes y gestión del cambio.</span>
</div>
</div>
<div class="quiz-option-card" data-step="2d" data-val="ia-form">
<div>
<strong class="opt-title">
<i class="fa-solid fa-robot"></i><span>IA y tecnología</span>
</strong>
<span style="font-size: 0.84rem; color: var(--text-muted);">IA aplicada, transformación digital para equipos no técnicos.</span>
</div>
</div>
</div>
</div>
<!-- ==========================================================
PASO 3: Momento de la organización
========================================================== -->
<div class="quiz-step" id="step-3">
<div class="quiz-step-header">
<div>
<h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">¿Cómo describirías el momento en que está tu organización?</h3>
<p style="font-size: 0.88rem; color: var(--text-muted);">Seleccioná la opción que mejor refleje tu situación:</p>
</div>
</div>
<div class="quiz-options-grid quiz-options-grid--2col">
<div class="quiz-option-card" data-step="3" data-val="explorando">
<div>
<strong class="opt-title">
<i class="fa-regular fa-map"></i><span>Estoy explorando</span>
</strong>
<span style="font-size: 0.84rem; color: var(--text-muted);">Todavía en etapa de análisis, sin decisiones tomadas.</span>
</div>
</div>
<div class="quiz-option-card" data-step="3" data-val="evaluando">
<div>
<strong class="opt-title">
<i class="fa-solid fa-gears"></i><span>Estamos evaluando opciones</span>
</strong>
<span style="font-size: 0.84rem; color: var(--text-muted);">Comparando enfoques o proveedores antes de avanzar.</span>
</div>
</div>
<div class="quiz-option-card" data-step="3" data-val="listo">
<div>
<strong class="opt-title">
<i class="fa-solid fa-rocket"></i><span>Queremos avanzar pronto</span>
</strong>
<span style="font-size: 0.84rem; color: var(--text-muted);">La decisión está tomada, necesitamos un socio para ejecutar.</span>
</div>
</div>
<div class="quiz-option-card" data-step="3" data-val="requisito">
<div>
<strong class="opt-title">
<i class="fa-regular fa-calendar"></i><span>Tenemos un requisito o plazo</span>
</strong>
<span style="font-size: 0.84rem; color: var(--text-muted);">Una certificación, licitación o cliente lo exige.</span>
</div>
</div>
</div>
</div>
<!-- ==========================================================
PASO 4: Rol
========================================================== -->
<div class="quiz-step" id="step-4">
<div class="quiz-step-header">
<div>
<h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">¿Cuál es tu rol en la organización?</h3>
<p style="font-size: 0.88rem; color: var(--text-muted);">Seleccioná tu rol para una orientación más precisa:</p>
</div>
</div>
<div class="quiz-options-grid quiz-options-grid--2col">
<div class="quiz-option-card" data-step="4" data-val="direccion">
<div>
<strong class="opt-title">
<i class="fa-solid fa-building"></i><span>Dirección o Gerencia</span>
</strong>
<span style="font-size: 0.84rem; color: var(--text-muted);">CEO, director, gerente general.</span>
</div>
</div>
<div class="quiz-option-card" data-step="4" data-val="responsable">
<div>
<strong class="opt-title">
<i class="fa-solid fa-user-tie"></i><span>Responsable de área</span>
</strong>
<span style="font-size: 0.84rem; color: var(--text-muted);">Jefe, coordinador, líder de proceso o proyecto.</span>
</div>
</div>
<div class="quiz-option-card" data-step="4" data-val="rrhh">
<div>
<strong class="opt-title">
<i class="fa-solid fa-users"></i><span>Recursos Humanos</span>
</strong>
<span style="font-size: 0.84rem; color: var(--text-muted);">Gestión de personas, formación y desarrollo.</span>
</div>
</div>
<div class="quiz-option-card" data-step="4" data-val="otro">
<div>
<strong class="opt-title">
<i class="fa-solid fa-briefcase"></i><span>Otro rol</span>
</strong>
<span style="font-size: 0.84rem; color: var(--text-muted);">Consultor, proveedor, investigador, estudiante.</span>
</div>
</div>
</div>
</div>
<!-- ==========================================================
RESULTADO
========================================================== -->
<div class="quiz-step" id="step-result">
<div class="quiz-result-box">
<h3 id="resultTitle" style="font-size: 1.4rem; color: var(--ide-primary-ligth); margin-bottom: 0.75rem;">
No necesitás tener la respuesta para empezar.
</h3>
<p id="resultBody" style="font-size: 1rem; color: var(--text-body); line-height: 1.65; margin-bottom: 1.5rem;">
Empezamos por comprender tu situación, no por ofrecerte una solución predeterminada.
</p>
<div id="resultChips" style="display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 2rem; justify-content: center;">
</div>
<div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; justify-content: center; width:100%;">
<a id="resultCTA" href="desafios.html" class="btn btn-cta-unificado" style="font-size: 0.85rem; padding: 0.5rem 1.25rem;">
Explorar por desafío →</a>
<a class="btn btn-cta-outline" style="font-size: 0.85rem; padding: 0.5rem 1.25rem;" href="contacto.html">Hablemos directamente</a>
<a class="btn btn-cta-outline" style="font-size: 0.85rem; padding: 0.5rem 1.25rem;" onclick="restartQuiz()">Reiniciar</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- BLOQUE 5: CTA-->
<section class="section-padding-sm herobg-2">
<div class="container container-wide">
<div class="hero-grid">
<div>
<h1 style="margin-bottom: 0.8rem; line-height: 1.1; color: white;">
¿Qué desafío querés transformar?
</h1>
<!-- Hero Actions -->
<div class="hero-actions" style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
<a href="contacto.html" class="btn btn-cta-unificado"
style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem;">
HABLEMOS
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 16 16 12 12 8"></polyline>
<line x1="8" y1="12" x2="16" y2="12"></line>
</svg>
</a>
</div>
</div>
<div class="hero-visual"
style="width: 100%; height: 400px; position: relative; display: flex; justify-content: center; align-items: center;">
</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>
<script src="js/index-carrousel.js"></script>
</body>
</html>