IDE-Demo-B/ide-academy.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 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="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">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>

  <header id="site-header"></header>

  <main>

    <!-- Header Academy -->
    <section class="section-padding hero-video-section" style="background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color); position: relative; overflow: hidden; min-height: 400px;">
      <!-- Video de fondo -->
      <video autoplay muted loop playsinline style="
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.2;
        z-index: 0;
        pointer-events: none;
      ">
        <source src="/assets/video/capacitacion.mp4" type="video/mp4">
        Tu navegador no soporta videos.
      </video>

      <!-- Overlay oscuro opcional para mejor contraste -->
      <div style="
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(19, 167, 138, 0.5);
        z-index: 1;">
      </div>
      <div class="container container-narrow text-center" style="position: relative; z-index: 2;">
        <span class="eyebrow" style="color: var(--text-main);">Executive Learning & Capability Development</span>
        <h1 style="margin-bottom: 1.25rem;">Desarrollamos capacidades para gestionar, liderar y transformar</h1>
        <p class="lead-text" style="margin: 0 auto 1.75rem auto;color: var(--text-main);">
          Diseñamos experiencias de aprendizaje que conectan conocimiento, práctica y contexto para fortalecer las capacidades que profesionales, equipos y organizaciones necesitan para convertir el aprendizaje en acción.
        </p>
        <div style="display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;">
          <a href="#cursos-destacados" class="btn btn-primary btn-sm">EXPLORAR CURSOS Y PROGRAMAS →</a>
          <a href="contacto.html?busqueda=Formación%20para%20mi%20organización&origen=Academy_InCompany" class="btn btn-outline btn-sm" style="color: var(--text-inverse);">FORMACIÓN IN-COMPANY →</a>
        </div>
      </div>
    </section>

    <!-- 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>
            <span class="eyebrow">APRENDER CON IDE</span>
            <h2>Conocimiento que se conecta con la práctica</h2>
            <p class="lead-text">
              Aprender no es solamente incorporar conceptos. Es comprender cómo aplicarlos, relacionarlos con otros saberes y convertirlos en mejores decisiones y formas de actuar.
            <p class="lead-text">
              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.
            </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>

    <!-- Propuesta de Valor de la Formación IDE -->
    <section class="section-padding bg-subtle-section">
      <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">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>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">
                  <span class="icono-fabrica"></span>
                </div>
                <div class="card-cursos-content">
                  <h2 style="font-size: 1.05rem; margin-bottom: 0.25rem;">In Company</h2>
                  <p style="font-size: 0.82rem;">Programa diseñado exclusivamente para tu organización. Contenido adaptado, casos reales, dinámica acorde al equipo.</p>
                </div>
              </div>
              <div class="card-cursos">
                <div class="card-cursos-icon">
                  <svg viewBox="0 0 32 32" fill="currentColor">
                    <use href="./assets/iconos/calendar_color.svg"></use>
                  </svg>
                </div>
                <div class="card-cursos-content">
                  <h2 style="font-size: 1.05rem; margin-bottom: 0.25rem;">Cursos Abiertos</h2>
                  <p style="font-size: 0.82rem;">Formación en grupos reducidos, con profesionales de distintas organizaciones. Networking y perspectivas diversas.</p>
                </div>
              </div>
          </div>
        </div>
      </div>
      <div class="container" style="margin-top: clamp(2.5rem, 4vw, 3.5rem);">
        <div class="grid-3 text-center">
          <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 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 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="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>

              <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>
        </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>
        <div id="modal-course-category" class="eyebrow">PROGRAMA EJECUTIVO</div>
        <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>