ide_maqueta_b/index.html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>IDE Consultores – Inicio</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>

  <div id="navbar-slot"></div>

  <main>

    <!-- HERO -->
    <section class="hero hero--centered section">
      <div class="container">
        <p class="eyebrow">Todo está conectado</p>
        <h1>Mejorar una parte no siempre mejora el todo.</h1>
        <div class="divider divider--center"></div>
        <p style="font-size:1.05rem; max-width:54ch;">En una organización, cada decisión genera efectos más allá del lugar donde interviene. Antes de buscar una solución, hay que comprender el sistema.</p>

        <div class="hero__entry-cards mt-2">
          <a href="desafios.html" class="entry-card">
            <div class="label">Tengo un desafío</div>
            <p>Algo no funciona como debería, pero no sé exactamente qué necesito.</p>
          </a>
          <a href="soluciones.html" class="entry-card">
            <div class="label">Busco una solución</div>
            <p>Necesito ISO, una PMO, formación o transformación digital.</p>
          </a>
        </div>
      </div>
    </section>

    <!-- LA TENSIÓN -->
    <section class="section section--surface">
      <div class="container">
        <div style="display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;">
          <div class="fade-in">
            <p class="eyebrow">El problema real</p>
            <h2>Soluciones aisladas para problemas que nunca estuvieron realmente aislados.</h2>
            <div class="divider"></div>
            <p>Las organizaciones ya tienen procesos, herramientas y personas. Sin embargo, algunos desafíos persisten. La raíz rara vez está donde parece.</p>
          </div>
          <!-- Gráfico minimalista SVG -->
          <div class="fade-in" style="display:flex; justify-content:center;">
            <svg width="260" height="200" viewBox="0 0 260 200" fill="none" xmlns="http://www.w3.org/2000/svg">
              <!-- Nodos desconectados (problema) -->
              <circle cx="50"  cy="60"  r="18" fill="#9E9E9E" opacity="0.35"/>
              <circle cx="130" cy="40"  r="18" fill="#9E9E9E" opacity="0.35"/>
              <circle cx="210" cy="60"  r="18" fill="#9E9E9E" opacity="0.35"/>
              <!-- Nodos conectados (IDE) -->
              <circle cx="50"  cy="148" r="18" fill="#29B99A" opacity="0.8"/>
              <circle cx="130" cy="128" r="18" fill="#1B5E6E" opacity="0.9"/>
              <circle cx="210" cy="148" r="18" fill="#29B99A" opacity="0.8"/>
              <line x1="50" y1="148" x2="130" y2="128" stroke="#29B99A" stroke-width="2.5"/>
              <line x1="130" y1="128" x2="210" y2="148" stroke="#29B99A" stroke-width="2.5"/>
              <line x1="50"  y1="148" x2="210" y2="148" stroke="#29B99A" stroke-width="1.5" stroke-dasharray="4 3"/>
              <!-- Labels -->
              <text x="130" y="190" text-anchor="middle" font-size="10" fill="#29B99A" font-family="Inter,sans-serif">Sistema conectado</text>
              <text x="130" y="22"  text-anchor="middle" font-size="10" fill="#9E9E9E" font-family="Inter,sans-serif">Partes aisladas</text>
            </svg>
          </div>
        </div>
      </div>
    </section>

    <!-- METODOLOGÍA -->
    <section class="section">
      <div class="container">
        <div class="text-center mb-3 fade-in">
          <p class="eyebrow">Principio IDE</p>
          <h2>Comprender el todo para saber dónde intervenir.</h2>
        </div>
        <div class="process-steps fade-in">
          <div class="step">
            <div class="step__num">01</div>
            <div class="step__text">
              <h3>Comprender</h3>
              <p>Mapeo sistémico de la organización y su contexto.</p>
            </div>
          </div>
          <div class="step">
            <div class="step__num">02</div>
            <div class="step__text">
              <h3>Focalizar</h3>
              <p>Identificar dónde intervenir genera mayor impacto.</p>
            </div>
          </div>
          <div class="step">
            <div class="step__num">03</div>
            <div class="step__text">
              <h3>Integrar</h3>
              <p>Conectar capacidades del ecosistema IDE con precisión.</p>
            </div>
          </div>
          <div class="step">
            <div class="step__num">04</div>
            <div class="step__text">
              <h3>Transformar</h3>
              <p>Resultados sostenibles que fortalecen el sistema.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- ECOSISTEMA -->
    <section class="section section--surface">
      <div class="container">
        <div class="text-center mb-3 fade-in">
          <p class="eyebrow">Ecosistema IDE</p>
          <h2>No se trata de sumar soluciones. Se trata de conectar capacidades.</h2>
        </div>
        <div class="grid-4 fade-in">
          <a href="ecosistema.html" class="eco-card">
            <div class="eco-card__name">Excellence</div>
            <div class="eco-card__sub">Sistemas de gestión y mejora continua.</div>
          </a>
          <a href="ecosistema.html" class="eco-card">
            <div class="eco-card__name">Project</div>
            <div class="eco-card__sub">Gestión de proyectos y PMO.</div>
          </a>
          <a href="academy.html" class="eco-card">
            <div class="eco-card__name">Academy</div>
            <div class="eco-card__sub">Desarrollo de capacidades organizacionales.</div>
          </a>
          <a href="ecosistema.html" class="eco-card">
            <div class="eco-card__name">Digital</div>
            <div class="eco-card__sub">Transformación digital e inteligencia artificial.</div>
          </a>
        </div>
      </div>
    </section>

    <!-- SECTORES -->
    <section class="section">
      <div class="container fade-in">
        <p class="eyebrow">Sectores</p>
        <h2 class="mb-2">Acompañamos la transformación en contextos complejos.</h2>
        <div class="sectors">
          <div class="sector-pill">🌾 Agro</div>
          <div class="sector-pill">🏥 Salud</div>
          <div class="sector-pill">🎓 Educación</div>
          <div class="sector-pill">🏭 Industria</div>
          <div class="sector-pill">🏗️ Infraestructura</div>
          <div class="sector-pill">⚡ Energía</div>
        </div>
      </div>
    </section>

    <!-- CTA FINAL -->
    <section class="section section--dark text-center">
      <div class="container fade-in">
        <p class="eyebrow">¿Empezamos?</p>
        <h2>¿Qué desafío querés transformar?</h2>
        <p style="margin:1rem auto 2rem; max-width:42ch;">Empecemos por entenderlo.</p>
        <a href="contacto.html" class="btn btn--white">Hablemos</a>
      </div>
    </section>

  </main>

  <div id="footer-slot"></div>

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