IDE-Demo-B/insights.html

<!DOCTYPE html>
<html lang="es" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Insights & Blog | IDE Consultores</title>
  <meta name="description" content="Artículos, análisis y perspectivas sobre pensamiento sistémico, calidad, normas ISO, gestión de proyectos y transformación digital.">
  <meta property="og:title" content="Insights & Blog | IDE Consultores">
  <meta property="og:description" content="Evidencia, metodología y reflexiones prácticas para líderes organizacionales.">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">  
  <link rel="icon" type="image/x-icon" href="assets/img/favicon.png">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>

  <header id="site-header"></header>

  <main>

    <!-- Seccion 1: Hero -->
    <section class="section-padding herobg-10">
      <div class="container">
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;">
          <div>
            <span class="eyebrow" style="text-transform: uppercase;">CONOCIMIENTO & PERSPECTIVAS</span>
            <h1 style="margin-bottom: 1.25rem; color:white">
              Ideas para comprender, conectar y transformar.
            </h1>
            <p class="lead-text" style="color:white">
              Explorar nuevas perspectivas también es una forma de transformar.
En IDE Insights compartimos tendencias, conexiones, herramientas y opiniones para ampliar la mirada sobre la gestión, generar nuevos criterios y tomar decisiones con mayor fundamento.
            </p>
            <a href="https://blog.ideconsultores.com.ar" class="btn btn-cta-unificado"
                style="border-radius: 50px; align-items: center; gap: 0.5rem; margin-top: 1.5rem; display: inline-flex;">
                Explorar Insigth
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                  stroke-linecap="round" stroke-linejoin="round">
                  <circle cx="12" cy="12" r="10"></circle>
                  <polyline points="12 16 16 12 12 8"></polyline>
                  <line x1="8" y1="12" x2="16" y2="12"></line>
                </svg>
              </a>
          </div>
        </div>
      </div>
    </section>
    

    <!-- Seccion 2: Feed Dinámico de las 3 Últimas Publicaciones -->
    <section class="section-padding bg2">
      <div class="container">
        
        <div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2.5rem; flex-wrap: wrap; gap: 1rem;">
          <div>
            <span class="eyebrow">ÚLTIMAS PUBLICACIONES</span>
            <h2>Lo más reciente en IDE Insights</h2>
          </div>
          <div>
            <span style="font-size: 0.85rem; color: var(--text-muted);">Sincronizado con IDE insights</span>
          </div>
        </div>

        <!-- Contenedor inyectado por JS (con respaldo de 3 notas y conexión WP REST API) -->
        <div class="grid-3" id="insights-feed-container">
          <!-- Fallback en caso de demora -->
          <div class="card text-center" style="grid-column: 1 / -1; padding: 2rem;">
            <p style="color: var(--text-muted);">Cargando artículos de Insights...</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Sección 3: CTA -->
     <section class="section-padding-sm herobg-2">
      <div class="container container-wide">
        <div class="hero-grid">
          <div>

            <h2 style="margin-bottom: 0.8rem; line-height: 1.1; color: white;">
              Una única solución no siempre <br>encaja para todos los desafíos.
            </h2>
            <p class="lead-text" style="margin-bottom: 2.5rem; color: white;">
              Integramos las capacidades necesarias para diseñar una respuesta que tenga sentido para tu organización y su contexto.
            </p>

            <div class="hero-actions" style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
              <a href="contacto.html" class="btn btn-cta-unificado"
                style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem;">
                HABLEMOS
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                  stroke-linecap="round" stroke-linejoin="round">
                  <circle cx="12" cy="12" r="10"></circle>
                  <polyline points="12 16 16 12 12 8"></polyline>
                  <line x1="8" y1="12" x2="16" y2="12"></line>
                </svg>
              </a>
            </div>
          </div>

          <div class="hero-visual"
            style="width: 100%; height: 400px; position: relative; display: flex; justify-content: center; align-items: center;">
          </div>

        </div>
      </div>
    </section>


  </main>

  <footer id="site-footer"></footer>
  <script src="js/main.js"></script>
</body>
</html>