ide_maqueta_b/somos-ide.html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Somos IDE – IDE Consultores</title>
  <link rel="stylesheet" href="styles.css" />
  <style>
    .team-card { display:flex; gap:1rem; align-items:flex-start; }
    .team-card__avatar {
      width:56px; height:56px; border-radius:50%;
      background: linear-gradient(135deg, var(--teal-dark), var(--green));
      flex-shrink:0; display:flex; align-items:center; justify-content:center;
      font-family: var(--font-display); font-size:1.4rem; color:var(--white);
    }
    .team-card__info h3 { margin-bottom:0.2rem; }
    .team-card__info span { font-size:0.8rem; color:var(--green); font-weight:600; text-transform:uppercase; letter-spacing:0.08em; }
    .team-card__info p { font-size:0.85rem; margin-top:0.4rem; }

    .value-item { display:flex; gap:1rem; }
    .value-item__dot { width:12px; height:12px; border-radius:50%; background:var(--green); flex-shrink:0; margin-top:6px; }
  </style>
</head>
<body>

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

  <main>

    <header class="page-header">
      <div class="container">
        <p class="eyebrow">Identidad</p>
        <h1>Somos IDE Consultores</h1>
        <p>Una consultora sistémica que combina rigor metodológico con comprensión profunda de las organizaciones.</p>
      </div>
    </header>

    <!-- PROPÓSITO -->
    <section class="section">
      <div class="container">
        <div style="display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start;">
          <div class="fade-in">
            <p class="eyebrow">Nuestro propósito</p>
            <h2>Transformar organizaciones comprendiendo su sistema.</h2>
            <div class="divider"></div>
            <p>Creemos que los desafíos organizacionales rara vez tienen una única causa. Por eso, antes de proponer una solución, nos tomamos el tiempo de comprender el todo.</p>
            <p class="mt-1">IDE nació con la convicción de que el conocimiento metodológico y la mirada sistémica son inseparables.</p>
          </div>
          <div class="fade-in">
            <p class="eyebrow">Nuestros valores</p>
            <div style="display:flex; flex-direction:column; gap:1.25rem; margin-top:0.5rem;">
              <div class="value-item">
                <div class="value-item__dot"></div>
                <div>
                  <h3>Rigor sin rigidez</h3>
                  <p style="font-size:0.88rem;">Metodología sólida aplicada con criterio y adaptabilidad.</p>
                </div>
              </div>
              <div class="value-item">
                <div class="value-item__dot"></div>
                <div>
                  <h3>Mirada sistémica</h3>
                  <p style="font-size:0.88rem;">Ninguna parte se comprende fuera del todo en el que opera.</p>
                </div>
              </div>
              <div class="value-item">
                <div class="value-item__dot"></div>
                <div>
                  <h3>Compromiso real</h3>
                  <p style="font-size:0.88rem;">Nos involucramos con los resultados, no solo con las entregas.</p>
                </div>
              </div>
              <div class="value-item">
                <div class="value-item__dot"></div>
                <div>
                  <h3>Transferencia de capacidades</h3>
                  <p style="font-size:0.88rem;">El objetivo final es que la organización se fortalezca por sí misma.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- METODOLOGÍA -->
    <section class="section section--surface">
      <div class="container">
        <div class="text-center mb-3 fade-in">
          <p class="eyebrow">Metodología</p>
          <h2>Cómo trabajamos</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>Diagnóstico sistémico antes de proponer cualquier intervención.</p>
            </div>
          </div>
          <div class="step">
            <div class="step__num">02</div>
            <div class="step__text">
              <h3>Focalizar</h3>
              <p>Identificamos los puntos de mayor palanca para el cambio.</p>
            </div>
          </div>
          <div class="step">
            <div class="step__num">03</div>
            <div class="step__text">
              <h3>Integrar</h3>
              <p>Combinamos capacidades del ecosistema 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>

    <!-- EQUIPO -->
    <section class="section">
      <div class="container">
        <div class="fade-in mb-3">
          <p class="eyebrow">Equipo</p>
          <h2>Las personas detrás de IDE</h2>
        </div>
        <div class="grid-3 fade-in">
          <div class="card team-card" style="flex-direction:column; gap:1rem;">
            <div style="display:flex; gap:1rem; align-items:center;">
              <div class="team-card__avatar">JM</div>
              <div>
                <h3>Juan Martínez</h3>
                <span>Director General</span>
              </div>
            </div>
            <p style="font-size:0.85rem;">Especialista en sistemas de gestión y transformación organizacional. Más de 15 años acompañando organizaciones en procesos de cambio.</p>
          </div>
          <div class="card team-card" style="flex-direction:column; gap:1rem;">
            <div style="display:flex; gap:1rem; align-items:center;">
              <div class="team-card__avatar">LP</div>
              <div>
                <h3>Laura Peralta</h3>
                <span>Dirección de Proyectos</span>
              </div>
            </div>
            <p style="font-size:0.85rem;">PMP certificada. Diseña e implementa PMOs en organizaciones medianas y grandes. Experta en metodologías ágiles e híbridas.</p>
          </div>
          <div class="card team-card" style="flex-direction:column; gap:1rem;">
            <div style="display:flex; gap:1rem; align-items:center;">
              <div class="team-card__avatar">CR</div>
              <div>
                <h3>Carlos Ruiz</h3>
                <span>Digital & IA</span>
              </div>
            </div>
            <p style="font-size:0.85rem;">Lidera los procesos de transformación digital. Especialista en IA aplicada a operaciones y procesos de negocio.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA -->
    <section class="section section--dark text-center">
      <div class="container fade-in">
        <h2>¿Querés conocer más sobre IDE?</h2>
        <p style="margin:1rem auto 2rem;">Conversemos sobre tu organización y cómo podemos acompañarte.</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>