IDE-Demo-B/modal-test.html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Diagrama de Red y Modal</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <!-- Botón para probar la apertura del modal directamente -->
  <div style="text-align: center; margin: 24px 0;">
    <button type="button" class="btn-trigger-projects" id="btnOpenProjectsModal">
      Conocer IDE Projects
    </button>
  </div>

  <!-- Contenedor del Diagrama Canvas -->
  <div class="canvas-wrapper">
    <canvas id="networkCanvas" width="1280" height="520"></canvas>
    
    <!-- Tooltip flotante -->
    <div id="tooltip" class="network-tooltip hidden">
      <h5 id="tooltip-title"></h5>
      <p id="tooltip-desc"></p>
    </div>
  </div>

  <!-- MODAL: IDE PROJECTS -->
  <div id="modal-ide-projects" class="ide-modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="modal-projects-title">
    <div class="ide-modal-container">
      
      <!-- Botón Cerrar (X) -->
      <button type="button" class="ide-modal-close" id="btnCloseModal" aria-label="Cerrar modal">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="18" y1="6" x2="6" y2="18"></line>
          <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
      </button>

      <!-- Envoltorio del contenido con scroll interno -->
      <div class="ide-modal-body-wrapper">
        <div class="ide-modal-scroll" id="modalScrollArea">
          
          <!-- Encabezado -->
          <header class="ide-modal-header">
            <div class="ide-modal-pill">IDE PROJECTS</div>
            <h2 id="modal-projects-title" class="ide-modal-title">PMO & Project Services</h2>
            <p class="ide-modal-tagline">Convertir iniciativas en resultados.</p>
          </header>

          <!-- Introducción -->
          <div class="ide-modal-lead">
            <p>Ayudamos a las organizaciones a fortalecer su capacidad para seleccionar, priorizar, planificar y ejecutar proyectos, programas y portafolios, conectando las iniciativas con los objetivos estratégicos y los recursos disponibles.</p>
            <p>Integramos metodologías, gobernanza, información y capacidades de gestión para acompañar todo el ciclo de vida de los proyectos y mejorar su contribución a los resultados de la organización.</p>
          </div>

          <!-- Capacidades -->
          <section class="ide-modal-section">
            <h3 class="ide-section-title">Nuestras capacidades</h3>
            <div class="ide-grid-cards">
              
              <div class="ide-feature-card">
                <h4>Gestión de proyectos</h4>
                <p>Planificación, organización, seguimiento y acompañamiento de proyectos para gestionar alcance, plazos, costos, recursos, riesgos, stakeholders y resultados.</p>
              </div>

              <div class="ide-feature-card">
                <h4>PMO — Oficinas de Gestión de Proyectos</h4>
                <p>Diseño, implementación y fortalecimiento de PMO adaptadas al nivel de madurez, estrategia y necesidades de cada organización.</p>
              </div>

              <div class="ide-feature-card">
                <h4>Programas y portafolios</h4>
                <p>Priorización y coordinación de iniciativas para mejorar la asignación de recursos, gestionar interdependencias y mantener alineadas las inversiones con los objetivos organizacionales.</p>
              </div>

              <div class="ide-feature-card">
                <h4>Gobernanza y metodologías</h4>
                <p>Diseño de modelos de gobernanza, procesos, roles, indicadores y metodologías predictivas, ágiles o híbridas adaptadas al contexto de cada organización.</p>
              </div>

              <div class="ide-feature-card ide-card-full">
                <h4>Diagnóstico y recuperación de proyectos</h4>
                <p>Evaluación de proyectos con dificultades o desvíos para identificar causas, redefinir prioridades y establecer planes de recuperación y seguimiento.</p>
              </div>

            </div>
          </section>

          <!-- Metodologías -->
          <section class="ide-modal-section">
            <h3 class="ide-section-title">Cómo trabajamos</h3>
            <div class="ide-tags-wrapper">
              <span class="ide-method-tag">Predictivo</span>
              <span class="ide-dot">·</span>
              <span class="ide-method-tag">Ágil</span>
              <span class="ide-dot">·</span>
              <span class="ide-method-tag">Híbrido</span>
            </div>
            <p class="ide-text-block">No partimos de una metodología predeterminada. Seleccionamos y combinamos prácticas de gestión según el tipo de proyecto, su complejidad, el contexto y las capacidades de la organización.</p>
          </section>

          <!-- Propuesta de Valor -->
          <section class="ide-modal-callout">
            <blockquote class="ide-quote-highlight">
              “No se trata de gestionar más proyectos. Se trata de gestionar mejor las iniciativas que importan.”
            </blockquote>
            <p>Fortalecemos la capacidad de transformar prioridades estratégicas en iniciativas ejecutables, generar información para decidir y mantener el foco en los resultados.</p>
          </section>

          <!-- Sinergia del Ecosistema -->
          <section class="ide-modal-synergy">
            <h4>Cuando el desafío requiere más</h4>
            <p>
              IDE Projects puede integrarse con <strong>IDE Excellence</strong>, <strong>IDE Academy</strong> e <strong>IDE Digital</strong> para rediseñar procesos, desarrollar capacidades, implementar sistemas o incorporar tecnología que fortalezca la gestión y ejecución de proyectos.
            </p>
          </section>

        </div>
      </div>

      <!-- Barra Inferior Fija (Footer) -->
      <footer class="ide-modal-footer-fixed">
        <span class="ide-scroll-hint" id="scrollHint">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
            <path d="M7 13l5 5 5-5M7 6l5 5 5-5"/>
          </svg>
          Desliza para leer más
        </span>
        <a href="#contacto" class="ide-btn-cta">
          <span>HABLEMOS</span>
          <span class="ide-btn-arrow">→</span>
        </a>
      </footer>

    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>