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>

    <!-- Header Academy -->
    <section class="section-padding hero-video-section" style="background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color); position: relative; overflow: hidden; min-height: 400px;">
      <!-- Video de fondo -->
      <video autoplay muted loop playsinline style="
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.2;
        z-index: 0;
        pointer-events: none;
      ">
        <source src="/assets/video/paper.mp4" type="video/mp4">
        Tu navegador no soporta videos.
      </video>

      <!-- Overlay oscuro opcional para mejor contraste -->
      <div style="
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(19, 167, 138, 0.5);
        z-index: 1;">
      </div>
      <div class="container container-narrow text-center" style="position: relative; z-index: 2;">
        <span class="eyebrow" style="color: var(--text-main);">CONOCIMIENTO & PERSPECTIVAS</span>
        <h1 style="margin-bottom: 1.25rem;">IDE Insights: Reflexiones y Metodología</h1>
        <p class="lead-text" style="margin: 0 auto 1.75rem auto;color: var(--text-main);">
          Compartimos artículos técnicos, análisis de tendencias y casos de estudio sobre cómo abordar la complejidad organizacional sin perder el sentido de conjunto.
        </p>
        <div style="display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;">
          <a href="https://blog.ideconsultores.com.ar" target="_blank" rel="noopener noreferrer" class="btn btn-outline-cta btn-sm">
          Visitar Blog Completo <!--en WordPress--> ↗
          </a>
        </div>
      </div>
    </section>
    

    <!-- Feed Dinámico de las 3 Últimas Publicaciones -->
    <section class="section-padding">
      <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>Artículos Recientes</h2>
          </div>
          <div>
            <span style="font-size: 0.85rem; color: var(--text-muted);">Sincronizado con el Blog Oficial de IDE</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>

        <!-- CTA para ir al Blog en WordPress -->
        <div style="text-align: center; margin-top: 3.5rem;">
          <a href="https://blog.ideconsultores.com.ar" target="_blank" rel="noopener noreferrer" class="btn btn-primary btn-lg">
            Ver todos los artículos en nuestro Blog <!--de WordPress--> →
          </a>
        </div>

      </div>
    </section>

    <!-- Suscripción / Boletín de Actualizaciones -->
    <section class="section-padding-sm bg-subtle-section">
      <div class="container container-narrow text-center">
        <span class="eyebrow">BOLETÍN MENSUAL</span>
        <h2 style="font-size: 1.75rem; margin-bottom: 0.75rem;">Recibí nuestras reflexiones sobre gestión y transformación</h2>
        <p style="font-size: 0.95rem; color: var(--text-muted); margin-bottom: 1.5rem;">
          Un resumen mensual con artículos, guías descargables y novedades del Ecosistema IDE. Sin spam.
        </p>

        <form style="display: flex; gap: 0.5rem; max-width: 500px; margin: 0 auto; flex-wrap: wrap;" onsubmit="event.preventDefault(); alert('¡Gracias por suscribirte al boletín de IDE Consultores!'); this.reset();">
          <input type="email" required placeholder="Ingresá tu correo electrónico corporativo" class="form-control" style="flex: 1; min-width: 260px;">
          <button type="submit" class="btn btn-primary btn-sm">Suscribirme</button>
        </form>
      </div>
    </section>

  </main>

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