inicial

ide-academy.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>