ide_maqueta_b/insights.html

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

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

  <main>

    <header class="page-header">
      <div class="container">
        <p class="eyebrow">Insights</p>
        <h1>Conocimiento desde la práctica.</h1>
        <p>Artículos, reflexiones y recursos generados por el equipo IDE a partir del trabajo con organizaciones reales.</p>
      </div>
    </header>

    <section class="section">
      <div class="container">

        <!-- Banner de integración con WordPress -->
        <div style="background:rgba(41,185,154,0.08); border:1px solid rgba(41,185,154,0.25); border-radius:var(--radius-lg); padding:1rem 1.5rem; margin-bottom:2.5rem; display:flex; align-items:center; gap:1rem;">
          <span style="font-size:1.4rem;">⚡</span>
          <p style="font-size:0.85rem; margin:0; max-width:none;">
            <strong style="color:var(--text);">Integración WordPress activa en producción.</strong>
            Esta sección cargará automáticamente las últimas 3 publicaciones del blog en <code style="font-size:0.82rem; background:var(--surface); padding:2px 6px; border-radius:4px;">blog.ideconsultores.com.ar</code> vía API REST.
          </p>
        </div>

        <!-- Artículos demo (datos de relleno) -->
        <div class="grid-3 fade-in">

          <div class="blog-card">
            <div class="blog-card__img">📊</div>
            <div class="blog-card__body">
              <div class="blog-card__meta">12 Ago 2025 · Excellence</div>
              <div class="blog-card__title">¿Por qué el 60% de las implementaciones ISO fallan antes de la primera auditoría?</div>
              <p class="blog-card__excerpt">La norma no es el problema. El problema es abordar la implementación como un proyecto de documentación en lugar de un proceso de transformación organizacional.</p>
              <div class="mt-1"><a href="#" class="btn btn--ghost" style="font-size:0.82rem;">Leer artículo</a></div>
            </div>
          </div>

          <div class="blog-card">
            <div class="blog-card__img">🤖</div>
            <div class="blog-card__body">
              <div class="blog-card__meta">28 Jul 2025 · Digital</div>
              <div class="blog-card__title">IA en organizaciones medianas: dónde empezar sin perderse</div>
              <p class="blog-card__excerpt">La inteligencia artificial no es territorio exclusivo de las grandes empresas. Tres criterios para identificar el primer caso de uso que vale la pena implementar.</p>
              <div class="mt-1"><a href="#" class="btn btn--ghost" style="font-size:0.82rem;">Leer artículo</a></div>
            </div>
          </div>

          <div class="blog-card">
            <div class="blog-card__img">📌</div>
            <div class="blog-card__body">
              <div class="blog-card__meta">10 Jul 2025 · Project</div>
              <div class="blog-card__title">PMO: el error más común al implementarla y cómo evitarlo</div>
              <p class="blog-card__excerpt">Crear una PMO sin diagnóstico previo de la madurez en gestión de proyectos es el camino más corto para generar resistencia interna y resultados mediocres.</p>
              <div class="mt-1"><a href="#" class="btn btn--ghost" style="font-size:0.82rem;">Leer artículo</a></div>
            </div>
          </div>

        </div>

        <div class="text-center mt-3 fade-in">
          <p style="font-size:0.9rem; margin-bottom:1.25rem;">¿Querés leer más artículos sobre gestión, ISO, proyectos e IA?</p>
          <a href="https://blog.ideconsultores.com.ar" target="_blank" class="btn btn--outline">Ver todos los artículos en el Blog →</a>
        </div>

      </div>
    </section>

    <!-- Newsletter simple -->
    <section class="section section--surface">
      <div class="container" style="max-width:600px; text-align:center;">
        <div class="fade-in">
          <p class="eyebrow">Novedades</p>
          <h2>Recibí los próximos insights.</h2>
          <p class="mt-1" style="margin-inline:auto;">Artículos, recursos y reflexiones del equipo IDE, sin spam.</p>
          <div style="display:flex; gap:0.75rem; margin-top:1.75rem; flex-wrap:wrap; justify-content:center;">
            <input type="email" placeholder="tu@email.com" style="padding:0.65rem 1rem; border:1.5px solid var(--border); border-radius:var(--radius); font-family:var(--font-body); font-size:0.9rem; background:var(--bg); color:var(--text); min-width:240px;" />
            <button class="btn btn--primary">Suscribirme</button>
          </div>
        </div>
      </div>
    </section>

  </main>

  <div id="footer-slot"></div>
  <script src="layout.js"></script>
  <script src="scripts.js"></script>
</body>
</html>