avances en mejoras

ide-academy.html

@@ -31,7 +31,7 @@
         z-index: 0;
         pointer-events: none;
       ">
-        <source src="/assets/video/linea_reparto.mp4" type="video/mp4">
+        <source src="/assets/video/capacitacion.mp4" type="video/mp4">
         Tu navegador no soporta videos.
       </video>
 
@@ -58,8 +58,8 @@
       </div>
     </section>
 
-    <!-- Catálogo de Cursos Destacados (Cargados dinámicamente desde cursos.json) -->
-    <section class="section-padding" id="cursos-destacados">
+    <!-- Aprender con IDE -->
+    <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>
@@ -71,6 +71,82 @@
               Por eso, en IDE Academy diseñamos experiencias de aprendizaje que parten de situaciones reales, integran herramientas aplicables y promueven el intercambio entre profesionales.
           </div>
         </div>
+        <!--Tarjetas descriptivas-->
+        <div class="grid-5 cc01">
+          <div class="card academy-card">
+            <div class="curso-header">
+              <span class="icono-academy-contexto"></span>
+              <h4>CONTEXTO REAL</h4>
+            </div>
+            <div class="curso-body">
+              <p>Trabajamos sobre situaciones, desafíos y decisiones que forman parte de la realidad profesional y organizacional.</p>
+            </div>
+            <div class="curso-footer">
+            </div>
+          </div>
+
+          <div class="card academy-card">
+            <div class="curso-header">
+              <span class="icono-academy-aprende"></span>
+              <h4>APRENDER HACIENDO</h4>
+            </div>
+            <div class="curso-body">
+              <p>Casos, herramientas y experiencias permiten llevar los conceptos a la práctica durante el proceso de aprendizaje.</p>
+            </div>
+            <div class="curso-footer">
+            </div>
+          </div>
+
+          <div class="card academy-card">
+            <div class="curso-header">
+              <span class="icono-academy-integral"></span>
+              <h4>MIRADA INTEGRAL</h4>
+            </div>
+            <div class="curso-body">
+              <p>Conectamos gestión, proyectos, personas, procesos y tecnología para comprender cada tema más allá de una única disciplina.</p>
+            </div>
+            <div class="curso-footer">
+            </div>
+          </div>
+
+          <div class="card academy-card">
+            <div class="curso-header">
+              <span class="icono-academy-enriquece"></span>
+              <h4>INTERCAMBIO QUE ENRIQUECE</h4>
+            </div>
+            <div class="curso-body">
+              <p>La experiencia y las perspectivas de quienes participan también forman parte del aprendizaje.</p>
+            </div>
+            <div class="curso-footer">
+            </div>
+          </div>
+
+          <div class="card academy-card">
+            <div class="curso-header">
+              <span class="icono-academy-aplicacion"></span>
+              <h4>APLICACIÓN QUE CONTINÚA</h4>
+            </div>
+            <div class="curso-body">
+              <p>Buscamos que cada experiencia deje herramientas, criterios y capacidades que puedan seguir utilizándose después del curso.</p>
+            </div>
+            <div class="curso-footer">
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </section>
+
+    <!--Cursos-->
+    <section class="section-padding-sm" 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">PRÓXIMAS EXPERIENCIAS</span>
+            <h2>Elegí qué capacidad querés desarrollar.</h2>
+            <p class="lead-text">
+              Cursos y programas diseñados para conectar conocimiento, práctica y contexto, con herramientas que podés llevar a tu realidad profesional desde el primer día.
+        </div>
 
         <!-- Contenedor inyectado por JS desde /data/cursos.json -->
         <div class="grid-3" id="academy-courses-container">
@@ -88,17 +164,16 @@
       <div class="container">
         <div style="display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;">
           <div class="fade-in visible">
-            <p class="eyebrow">¿Por qué Academy?</p>
-            <h2 style="padding-bottom: 15px;">La formación como parte del sistema, no como un apéndice.</h2>
+            <p class="eyebrow">DOS FORMAS DE APRENDER CON IDE</p>
+            <h2 style="padding-bottom: 15px;">Elegí la experiencia que mejor se adapte a tu contexto.</h2>
             <div class="divider"></div>
-            <p>Cada programa de Academy se diseña considerando el contexto de la organización, sus desafíos actuales y las capacidades que necesita desarrollar. No dictamos cursos estándar a audiencias genéricas.<br>Academy es la capacidad del Ecosistema IDE que acompaña y sostiene cualquier proceso de transformación.</p>
+            <p>Podés participar de nuestras experiencias abiertas junto a profesionales de distintas organizaciones o desarrollar una propuesta In-Company diseñada a partir de las necesidades de tu equipo.</p>
+            <p>En ambos casos, compartimos una misma forma de aprender: conocimiento conectado con la práctica, intercambio y aplicación en contextos reales.</p>
           </div>
           <div style="display: flex; flex-direction: column; gap: 1rem;">
               <div class="card-incompany">
                 <div class="card-cursos-icon">
-                  <svg viewBox="0 0 32 32" fill="currentColor">
-                    <use href="./assets/iconos/fabrica_color.svg"></use>
-                  </svg>
+                  <span class="icono-fabrica"></span>
                 </div>
                 <div class="card-cursos-content">
                   <h2 style="font-size: 1.05rem; margin-bottom: 0.25rem;">In Company</h2>
@@ -121,45 +196,127 @@
       </div>
       <div class="container" style="margin-top: clamp(2.5rem, 4vw, 3.5rem);">
         <div class="grid-3 text-center">
-          <div class="card">
-            <!-- <div style="font-size: 2rem; color: #D97706; margin-bottom: 0.5rem;">🎯</div> -->
+          <div class="card academy-card">
             <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> -->
+          <div class="card academy-card">
             <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> -->
+          <div class="card academy-card">
             <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>
+
     <!-- Sección Formación In-Company a Medida -->
-    <section class="bg-subtle-section" style="padding-bottom: clamp(3.5rem, 7vw, 6.5rem);">
-      <div class="container">
-        <div class="card">
-          <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>
+  <section class="section-padding bg-subtle-section">
+    <div class="container">
+      <div class="card">
+        <div class="grid-2" style="gap: 3rem; align-items: center;">
+          <div>
+            <h2>Formación In-Company</h2>
+            <p style="font-size: 1rem; color: var(--text-body); line-height: 1.65; margin: 1rem 0 0 0;">
+              Diseñamos experiencias de aprendizaje para una organización y su equipo, adaptando objetivos, contenidos, casos y actividades a su contexto. Ideal para Organizaciones que necesitan desarrollar capacidades compartidas, acompañar iniciativas o fortalecer la forma en que sus equipos gestionan y trabajan.
+            </p>
+            <p style="margin-top: 0.5rem;">Podemos diseñar:</p>
+
+            <!-- Sub-grid: lista a la izquierda, botón a la derecha abajo -->
+            <div class="incompany-subgrid">
+              <ul class="incompany-tags">
+                <li><i class="fa-solid fa-tag"></i> Cursos.</li>
+                <li><i class="fa-solid fa-tag"></i> Workshops</li>
+                <li><i class="fa-solid fa-tag"></i> Programas</li>
+                <li><i class="fa-solid fa-tag"></i> Rutas de Aprendizaje</li>
               </ul>
-              <a href="contacto.html?busqueda=Formación%20para%20mi%20organización&origen=Academy_InCompany_Custom" class="btn btn-primary-cta btn-sm">
-                Solicitar Cotización In-Company →
+
+              <div class="incompany-cta">
+                <a href="contacto.html?busqueda=Formación%20para%20mi%20organización&origen=Academy_InCompany_Custom" class="btn btn-primary-cta btn-sm">
+                  HABLEMOS
+                </a>
+              </div>
+            </div>
+          </div>
+
+          <div class="card-academia"></div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+    <!-- Facilitadores / Quiénes facilitan el aprendizaje -->
+    <section class="section-padding">
+      <div class="container">
+        <div class="text-center" style="max-width: 720px; margin: 0 auto 2.5rem auto;">
+          <span class="eyebrow">QUIÉNES FACILITAN EL APRENDIZAJE</span>
+          <h2 style="margin-bottom: 1rem;">Experiencias que se comparten</h2>
+          <p class="lead-text" style="margin: 0 auto;">
+            En IDE Academy, la formación está a cargo de profesionales que combinan experiencia en consultoría, gestión, proyectos, docencia y práctica organizacional.
+          </p>
+        </div>
+
+        <div class="grid-3 facilitadores-grid">
+          <!-- Facilitador 1 -->
+          <div class="facilitador-item">
+            <div class="facilitador-avatar">
+              <img src="assets/img/facilitador-1.jpg" alt="Nombre del facilitador 1">
+            </div>
+            <h4 class="facilitador-nombre">Nombre Apellido</h4>
+            <p class="facilitador-rol">Consultoría & Gestión</p>
+          </div>
+
+          <!-- Facilitador 2 -->
+          <div class="facilitador-item">
+            <div class="facilitador-avatar">
+              <img src="assets/img/facilitador-2.jpg" alt="Nombre del facilitador 2">
+            </div>
+            <h4 class="facilitador-nombre">Nombre Apellido</h4>
+            <p class="facilitador-rol">Proyectos & Agile</p>
+          </div>
+
+          <!-- Facilitador 3 -->
+          <div class="facilitador-item">
+            <div class="facilitador-avatar">
+              <img src="assets/img/facilitador-3.jpg" alt="Nombre del facilitador 3">
+            </div>
+            <h4 class="facilitador-nombre">Nombre Apellido</h4>
+            <p class="facilitador-rol">Calidad & Mejora Continua</p>
+          </div>
+        </div>
+
+        <div style="display: flex; justify-content: center; margin-top: 2.5rem;">
+          <a href="somos-ide.html" class="btn btn-primary btn-sm">
+            CONOCER A NUESTROS FACILITADORES →
+          </a>
+        </div>
+      </div>
+    </section>
+
+    <!-- Sección IDE Academy Virtual / Campus -->
+    <section class="section-padding">
+      <div class="container">
+        <div class="card" style="background: linear-gradient(135deg, var(--ide-primary) 0%, #0f7a63 100%); border: none;">
+          <div class="grid-2" style="gap: 2.5rem; align-items: center;">
+            <div>
+              <span class="eyebrow" style="color: rgba(255,255,255,0.75);">CAMPUS VIRTUAL</span>
+              <h2 style="color: #ffffff; margin-bottom: 0.75rem;">¿Ya sos parte de IDE Academy?</h2>
+              <p style="color: rgba(255,255,255,0.9); font-size: 1rem; line-height: 1.65; margin: 0; max-width: 520px;">
+                Accedé a tus cursos, materiales y actividades desde nuestro entorno de aprendizaje.
+              </p>
+            </div>
+            <div style="display: flex; justify-content: flex-end; align-items: center;">
+              <a href="https://campus.ideconsultores.com" target="_blank" rel="noopener" class="btn btn-sm" style="
+                background-color: #ffffff;
+                color: var(--ide-primary);
+                font-weight: 600;
+                white-space: nowrap;
+              ">
+                INGRESAR AL CAMPUS IDE ↗
               </a>
             </div>
-            <div class="card-academia"></div>
           </div>
         </div>
       </div>