estructura inicial

insights.html

@@ -0,0 +1,99 @@
+<!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>