Blog y Novedades | Engidea<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap\" rel=\"stylesheet\">\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n engidea: {\n yellow: '#FACC15',\n dark: '#111827',\n gray: '#374151',\n light: '#F9FAFB',\n white: '#FFFFFF'\n }\n },\n fontFamily: {\n sans: ['Inter', 'sans-serif'],\n display: ['Space Grotesk', 'sans-serif'],\n }\n }\n }\n }\n <\/script>\n <style>\n body { background-color: #F9FAFB; color: #111827; }\n \n .dot-pattern {\n background-image: radial-gradient(#E5E7EB 1px, transparent 1px);\n background-size: 24px 24px;\n }\n\n \/* Efectos de tarjeta de blog *\/\n .blog-card {\n transition: all 0.3s ease;\n }\n .blog-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n }\n .blog-card:hover .blog-img {\n transform: scale(1.05);\n }\n .blog-card:hover .read-more {\n color: #CA8A04; \/* Darker yellow *\/\n gap: 0.75rem;\n }\n <\/style>\n<\/head>\n<body class=\"antialiased font-sans\">\n\n \n <header class=\"pt-24 pb-16 bg-white border-b border-gray-200 dot-pattern\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n \n \n <div class=\"text-center max-w-3xl mx-auto mb-16\">\n <h1 class=\"text-4xl md:text-5xl font-bold font-display text-engidea-dark mb-4\">Blog Engidea<\/h1>\n <p class=\"text-lg text-gray-600\">Ideas, metodolog\u00edas y noticias sobre c\u00f3mo la tecnolog\u00eda est\u00e1 transformando la educaci\u00f3n y las empresas.<\/p>\n <\/div>\n\n \n <div id=\"hero-post-container\" class=\"bg-white rounded-3xl shadow-lg border border-gray-100 overflow-hidden group cursor-pointer\" onclick=\"window.location.href='#'\">\n <div class=\"grid grid-cols-1 lg:grid-cols-2\">\n <div class=\"relative h-64 lg:h-auto overflow-hidden\">\n <img decoding=\"async\" id=\"hero-img\" src=\"https:\/\/images.unsplash.com\/photo-1509062522246-3755977927d7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80\" alt=\"Cargando...\" class=\"absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105\">\n <div id=\"hero-category\" class=\"absolute top-4 left-4 bg-engidea-yellow text-engidea-dark text-xs font-bold uppercase tracking-wide px-3 py-1 rounded-full shadow-md z-10\">\n Cargando…\n <\/div>\n <\/div>\n <div class=\"p-8 md:p-12 flex flex-col justify-center relative\">\n \n <div class=\"absolute top-0 right-0 w-32 h-32 bg-gray-50 rounded-full blur-3xl -z-10 transform translate-x-1\/2 -translate-y-1\/2\"><\/div>\n \n <div class=\"flex items-center gap-4 text-sm text-gray-500 mb-4 font-medium\">\n <span id=\"hero-date\"><i class=\"far fa-calendar-alt mr-1\"><\/i> …<\/span>\n <span class=\"w-1 h-1 bg-gray-300 rounded-full\"><\/span>\n <span><i class=\"far fa-clock mr-1\"><\/i> Blog Engidea<\/span>\n <\/div>\n <h2 id=\"hero-title\" class=\"text-3xl font-bold font-display text-engidea-dark mb-4 group-hover:text-yellow-600 transition-colors\">\n Cargando art\u00edculo destacado…\n <\/h2>\n <p id=\"hero-excerpt\" class=\"text-gray-600 mb-8 leading-relaxed\">\n Conectando con el servidor de Engidea para traer las \u00faltimas novedades.\n <\/p>\n \n <div class=\"flex items-center justify-between mt-auto\">\n <div class=\"flex items-center gap-3\">\n <img decoding=\"async\" id=\"hero-author-avatar\" src=\"https:\/\/ui-avatars.com\/api\/?name=Engidea&background=FACC15&color=111827\" alt=\"Autor\" class=\"w-10 h-10 rounded-full border-2 border-gray-100\">\n <div>\n <p id=\"hero-author-name\" class=\"text-sm font-bold text-gray-900\">Equipo Engidea<\/p>\n <p class=\"text-xs text-gray-500\">Autor<\/p>\n <\/div>\n <\/div>\n <span class=\"text-engidea-dark font-bold flex items-center gap-2 read-more transition-all\">Leer art\u00edculo <i class=\"fas fa-arrow-right\"><\/i><\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/header>\n\n \n <section class=\"py-8 bg-white sticky top-0 z-40 border-b border-gray-100 shadow-sm\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex items-center justify-start md:justify-center gap-2 md:gap-4 overflow-x-auto pb-2 scrollbar-hide\">\n <button class=\"px-6 py-2 bg-engidea-dark text-white font-bold rounded-full text-sm shrink-0 shadow-md\">Todos<\/button>\n <button class=\"px-6 py-2 bg-gray-100 text-gray-600 hover:bg-gray-200 font-bold rounded-full text-sm shrink-0 transition-colors\">Tecnolog\u00eda Educativa<\/button>\n <button class=\"px-6 py-2 bg-gray-100 text-gray-600 hover:bg-gray-200 font-bold rounded-full text-sm shrink-0 transition-colors\">Casos de \u00c9xito<\/button>\n <button class=\"px-6 py-2 bg-gray-100 text-gray-600 hover:bg-gray-200 font-bold rounded-full text-sm shrink-0 transition-colors\">Programas Engidea<\/button>\n <button class=\"px-6 py-2 bg-gray-100 text-gray-600 hover:bg-gray-200 font-bold rounded-full text-sm shrink-0 transition-colors\">Adultos Mayores (Silver)<\/button>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-16 bg-engidea-light\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div id=\"blog-grid\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\n \n \n <div class=\"col-span-full text-center py-16\">\n <i class=\"fas fa-circle-notch fa-spin text-5xl text-engidea-yellow mb-4\"><\/i>\n <p class=\"text-gray-500 font-bold text-lg\">Sincronizando publicaciones desde WordPress…<\/p>\n <\/div>\n\n <\/div>\n\n \n <div class=\"mt-16 flex justify-center\">\n <button class=\"px-8 py-3 bg-white border border-gray-200 text-engidea-dark font-bold rounded-full hover:border-engidea-yellow hover:text-engidea-dark transition-colors shadow-sm flex items-center gap-2\">\n <i class=\"fas fa-sync-alt\"><\/i> Cargar m\u00e1s art\u00edculos\n <\/button>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-20 relative overflow-hidden bg-engidea-dark border-t-4 border-engidea-yellow\">\n \n <div class=\"absolute top-0 right-0 w-64 h-64 bg-engidea-yellow rounded-full blur-3xl opacity-20 transform translate-x-1\/2 -translate-y-1\/2\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-64 h-64 bg-blue-500 rounded-full blur-3xl opacity-10 transform -translate-x-1\/2 translate-y-1\/2\"><\/div>\n \n <div class=\"max-w-4xl mx-auto px-4 text-center relative z-10\">\n <div class=\"w-16 h-16 bg-gray-800 rounded-2xl flex items-center justify-center text-engidea-yellow text-2xl mx-auto mb-6 shadow-lg border border-gray-700\">\n <i class=\"fas fa-paper-plane\"><\/i>\n <\/div>\n <h2 class=\"text-3xl font-bold font-display text-white mb-4\">No te pierdas ninguna innovaci\u00f3n<\/h2>\n <p class=\"text-gray-400 mb-8 text-lg\">\u00danete a nuestra comunidad de +10,000 educadores, padres y profesionales. Recibe nuestro resumen mensual con art\u00edculos, recursos y eventos.<\/p>\n \n <form class=\"flex flex-col sm:flex-row gap-3 max-w-lg mx-auto\">\n <input type=\"email\" placeholder=\"Tu correo electr\u00f3nico\" class=\"flex-grow bg-white\/10 border border-gray-600 text-white placeholder-gray-400 px-6 py-4 rounded-xl focus:outline-none focus:border-engidea-yellow focus:ring-1 focus:ring-engidea-yellow transition-colors\" required>\n <button type=\"submit\" class=\"bg-engidea-yellow text-engidea-dark font-bold px-8 py-4 rounded-xl hover:bg-yellow-400 transition-colors shadow-lg\">Suscribirme<\/button>\n <\/form>\n <p class=\"text-xs text-gray-500 mt-4\"><i class=\"fas fa-lock text-gray-600 mr-1\"><\/i> Respetamos tu privacidad. No enviamos spam.<\/p>\n <\/div>\n <\/section>\n\n \n <footer class=\"bg-gray-900 py-10 text-center border-t border-gray-800\">\n <p class=\"text-gray-400 text-sm font-medium\">\u00a9 2026 Engidea. Innovaci\u00f3n Educativa. Todos los derechos reservados.<\/p>\n <\/footer>\n\n \n <script>\n async function fetchWordPressPosts() {\n const grid = document.getElementById('blog-grid');\n \/\/ Llamamos a la API REST de WordPress de tu dominio. \n \/\/ El par\u00e1metro _embed trae las im\u00e1genes destacadas y los datos del autor.\n const apiUrl = 'https:\/\/proyectos.engidea.com.ve\/wp-json\/wp\/v2\/posts?_embed&per_page=7'; \n \n try {\n const response = await fetch(apiUrl);\n if (!response.ok) throw new Error('Error al conectar con WordPress');\n \n const posts = await response.json();\n \n if (posts.length === 0) {\n grid.innerHTML = '<p class=\"col-span-full text-center text-gray-500\">No hay entradas publicadas a\u00fan.<\/p>';\n return;\n }\n\n \/\/ 1. POBLAR EL ART\u00cdCULO DESTACADO (Hero Post - El m\u00e1s reciente)\n const heroPost = posts[0];\n populateHeroPost(heroPost);\n\n \/\/ 2. POBLAR EL GRID CON EL RESTO DE LOS ART\u00cdCULOS\n const gridPosts = posts.slice(1);\n grid.innerHTML = ''; \/\/ Limpiar el estado de carga (el spinner)\n \n gridPosts.forEach(post => {\n const cardData = extractPostData(post);\n \n const cardHTML = `\n <article class=\"bg-white rounded-2xl border border-gray-200 overflow-hidden blog-card flex flex-col cursor-pointer group\" onclick=\"window.location.href='${cardData.link}'\">\n <div class=\"relative h-52 overflow-hidden\">\n <img decoding=\"async\" src=\"${cardData.imageUrl}\" alt=\"${cardData.title}\" class=\"w-full h-full object-cover blog-img transition-transform duration-500\">\n <div class=\"absolute top-4 left-4 bg-white\/90 backdrop-blur text-engidea-dark text-xs font-bold uppercase tracking-wide px-3 py-1 rounded-full shadow-sm\">\n ${cardData.category}\n <\/div>\n <\/div>\n <div class=\"p-6 flex flex-col flex-grow\">\n <div class=\"flex items-center gap-3 text-xs text-gray-500 mb-3 font-medium\">\n <span>${cardData.date}<\/span>\n <span class=\"w-1 h-1 bg-gray-300 rounded-full\"><\/span>\n <span>Blog Engidea<\/span>\n <\/div>\n <h3 class=\"text-xl font-bold font-display text-engidea-dark mb-3 group-hover:text-yellow-600 transition-colors line-clamp-2\">\n ${cardData.title}\n <\/h3>\n <p class=\"text-gray-600 text-sm mb-6 line-clamp-3\">\n ${cardData.excerpt}\n <\/p>\n <div class=\"mt-auto flex items-center justify-between border-t border-gray-100 pt-4\">\n <div class=\"flex items-center gap-2\">\n <img decoding=\"async\" src=\"${cardData.authorAvatar}\" alt=\"Autor\" class=\"w-8 h-8 rounded-full bg-gray-200\">\n <span class=\"text-xs font-bold text-gray-700\">${cardData.authorName}<\/span>\n <\/div>\n <span class=\"text-sm font-bold text-engidea-dark flex items-center gap-1 read-more transition-all\">Leer <i class=\"fas fa-arrow-right text-xs\"><\/i><\/span>\n <\/div>\n <\/div>\n <\/article>\n `;\n grid.innerHTML += cardHTML;\n });\n\n } catch (error) {\n console.error(error);\n grid.innerHTML = '<p class=\"col-span-full text-center text-red-500 py-10 font-bold\"><i class=\"fas fa-exclamation-triangle mr-2\"><\/i> No se pudieron cargar las entradas. Aseg\u00farate de que la API REST en proyectos.engidea.com.ve est\u00e9 p\u00fablica.<\/p>';\n }\n }\n\n function extractPostData(post) {\n \/\/ Extraer t\u00edtulo, decodificando caracteres especiales\n const tempDiv = document.createElement(\"div\");\n tempDiv.innerHTML = post.title.rendered;\n const title = tempDiv.textContent || tempDiv.innerText || \"\";\n\n \/\/ Extraer extracto limpiando etiquetas HTML (WordPress las manda por defecto)\n tempDiv.innerHTML = post.excerpt.rendered;\n const excerpt = tempDiv.textContent || tempDiv.innerText || \"\";\n\n \/\/ Formatear Fecha al estilo \"24 Oct, 2026\"\n const dateObj = new Date(post.date);\n const date = dateObj.toLocaleDateString('es-ES', { day: 'numeric', month: 'short', year: 'numeric' });\n\n \/\/ Extraer Imagen Destacada (o usar una por defecto de respaldo)\n let imageUrl = 'https:\/\/images.unsplash.com\/photo-1516321318423-f06f85e504b3?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80'; \n if (post._embedded && post._embedded['wp:featuredmedia'] && post._embedded['wp:featuredmedia'][0].source_url) {\n imageUrl = post._embedded['wp:featuredmedia'][0].source_url;\n }\n\n \/\/ Extraer Nombre de Categor\u00eda (toma la principal)\n let category = 'Novedades';\n if (post._embedded && post._embedded['wp:term'] && post._embedded['wp:term'][0] && post._embedded['wp:term'][0][0]) {\n category = post._embedded['wp:term'][0][0].name;\n }\n\n \/\/ Extraer Datos del Autor\n let authorName = 'Equipo Engidea';\n let authorAvatar = 'https:\/\/ui-avatars.com\/api\/?name=Engidea&background=FACC15&color=111827';\n if (post._embedded && post._embedded.author && post._embedded.author[0]) {\n authorName = post._embedded.author[0].name;\n if (post._embedded.author[0].avatar_urls) {\n authorAvatar = post._embedded.author[0].avatar_urls['48'] || authorAvatar;\n }\n }\n\n return { title, excerpt, date, link: post.link, imageUrl, category, authorName, authorAvatar };\n }\n\n \/\/ Funci\u00f3n para inyectar datos en la tarjeta del Art\u00edculo Destacado superior\n function populateHeroPost(post) {\n const data = extractPostData(post);\n \n document.getElementById('hero-post-container').onclick = () => window.location.href = data.link;\n document.getElementById('hero-img').src = data.imageUrl;\n document.getElementById('hero-category').innerText = data.category;\n document.getElementById('hero-date').innerHTML = `<i class=\"far fa-calendar-alt mr-1\"><\/i> ${data.date}`;\n document.getElementById('hero-title').innerText = data.title;\n document.getElementById('hero-excerpt').innerText = data.excerpt;\n document.getElementById('hero-author-avatar').src = data.authorAvatar;\n document.getElementById('hero-author-name').innerText = data.authorName;\n }\n\n \/\/ Ejecutar la sincronizaci\u00f3n en cuanto la p\u00e1gina cargue\n document.addEventListener('DOMContentLoaded', fetchWordPressPosts);\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Blog y Novedades | Engidea Blog Engidea Ideas, metodolog\u00edas y noticias sobre c\u00f3mo la tecnolog\u00eda est\u00e1 transformando la educaci\u00f3n y las empresas. Cargando… … Blog Engidea Cargando art\u00edculo destacado… Conectando con el servidor de Engidea para traer las \u00faltimas novedades. Equipo Engidea Autor Leer art\u00edculo Todos Tecnolog\u00eda Educativa Casos de \u00c9xito Programas Engidea Adultos Mayores […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"give_campaign_id":0,"_eb_attr":"","footnotes":""},"class_list":["post-2129","page","type-page","status-publish","hentry"],"campaignId":"0","_links":{"self":[{"href":"https:\/\/proyectos.engidea.com.ve\/index.php\/wp-json\/wp\/v2\/pages\/2129","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/proyectos.engidea.com.ve\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/proyectos.engidea.com.ve\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/proyectos.engidea.com.ve\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/proyectos.engidea.com.ve\/index.php\/wp-json\/wp\/v2\/comments?post=2129"}],"version-history":[{"count":2,"href":"https:\/\/proyectos.engidea.com.ve\/index.php\/wp-json\/wp\/v2\/pages\/2129\/revisions"}],"predecessor-version":[{"id":2131,"href":"https:\/\/proyectos.engidea.com.ve\/index.php\/wp-json\/wp\/v2\/pages\/2129\/revisions\/2131"}],"wp:attachment":[{"href":"https:\/\/proyectos.engidea.com.ve\/index.php\/wp-json\/wp\/v2\/media?parent=2129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2129,"date":"2026-02-19T18:02:47","date_gmt":"2026-02-19T22:02:47","guid":{"rendered":"https:\/\/proyectos.engidea.com.ve\/?page_id=2129"},"modified":"2026-03-21T20:54:36","modified_gmt":"2026-03-22T00:54:36","slug":"blog","status":"publish","type":"page","link":"https:\/\/proyectos.engidea.com.ve\/index.php\/blog\/","title":{"rendered":"Blog de Engidea"},"content":{"rendered":"\n\n\n\n \n \n Blog y Novedades | Engidea<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap\" rel=\"stylesheet\">\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n engidea: {\n yellow: '#FACC15',\n dark: '#111827',\n gray: '#374151',\n light: '#F9FAFB',\n white: '#FFFFFF'\n }\n },\n fontFamily: {\n sans: ['Inter', 'sans-serif'],\n display: ['Space Grotesk', 'sans-serif'],\n }\n }\n }\n }\n <\/script>\n <style>\n body { background-color: #F9FAFB; color: #111827; }\n \n .dot-pattern {\n background-image: radial-gradient(#E5E7EB 1px, transparent 1px);\n background-size: 24px 24px;\n }\n\n \/* Efectos de tarjeta de blog *\/\n .blog-card {\n transition: all 0.3s ease;\n }\n .blog-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n }\n .blog-card:hover .blog-img {\n transform: scale(1.05);\n }\n .blog-card:hover .read-more {\n color: #CA8A04; \/* Darker yellow *\/\n gap: 0.75rem;\n }\n <\/style>\n<\/head>\n<body class=\"antialiased font-sans\">\n\n \n <header class=\"pt-24 pb-16 bg-white border-b border-gray-200 dot-pattern\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n \n \n <div class=\"text-center max-w-3xl mx-auto mb-16\">\n <h1 class=\"text-4xl md:text-5xl font-bold font-display text-engidea-dark mb-4\">Blog Engidea<\/h1>\n <p class=\"text-lg text-gray-600\">Ideas, metodolog\u00edas y noticias sobre c\u00f3mo la tecnolog\u00eda est\u00e1 transformando la educaci\u00f3n y las empresas.<\/p>\n <\/div>\n\n \n <div id=\"hero-post-container\" class=\"bg-white rounded-3xl shadow-lg border border-gray-100 overflow-hidden group cursor-pointer\" onclick=\"window.location.href='#'\">\n <div class=\"grid grid-cols-1 lg:grid-cols-2\">\n <div class=\"relative h-64 lg:h-auto overflow-hidden\">\n <img decoding=\"async\" id=\"hero-img\" src=\"https:\/\/images.unsplash.com\/photo-1509062522246-3755977927d7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80\" alt=\"Cargando...\" class=\"absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105\">\n <div id=\"hero-category\" class=\"absolute top-4 left-4 bg-engidea-yellow text-engidea-dark text-xs font-bold uppercase tracking-wide px-3 py-1 rounded-full shadow-md z-10\">\n Cargando…\n <\/div>\n <\/div>\n <div class=\"p-8 md:p-12 flex flex-col justify-center relative\">\n \n <div class=\"absolute top-0 right-0 w-32 h-32 bg-gray-50 rounded-full blur-3xl -z-10 transform translate-x-1\/2 -translate-y-1\/2\"><\/div>\n \n <div class=\"flex items-center gap-4 text-sm text-gray-500 mb-4 font-medium\">\n <span id=\"hero-date\"><i class=\"far fa-calendar-alt mr-1\"><\/i> …<\/span>\n <span class=\"w-1 h-1 bg-gray-300 rounded-full\"><\/span>\n <span><i class=\"far fa-clock mr-1\"><\/i> Blog Engidea<\/span>\n <\/div>\n <h2 id=\"hero-title\" class=\"text-3xl font-bold font-display text-engidea-dark mb-4 group-hover:text-yellow-600 transition-colors\">\n Cargando art\u00edculo destacado…\n <\/h2>\n <p id=\"hero-excerpt\" class=\"text-gray-600 mb-8 leading-relaxed\">\n Conectando con el servidor de Engidea para traer las \u00faltimas novedades.\n <\/p>\n \n <div class=\"flex items-center justify-between mt-auto\">\n <div class=\"flex items-center gap-3\">\n <img decoding=\"async\" id=\"hero-author-avatar\" src=\"https:\/\/ui-avatars.com\/api\/?name=Engidea&background=FACC15&color=111827\" alt=\"Autor\" class=\"w-10 h-10 rounded-full border-2 border-gray-100\">\n <div>\n <p id=\"hero-author-name\" class=\"text-sm font-bold text-gray-900\">Equipo Engidea<\/p>\n <p class=\"text-xs text-gray-500\">Autor<\/p>\n <\/div>\n <\/div>\n <span class=\"text-engidea-dark font-bold flex items-center gap-2 read-more transition-all\">Leer art\u00edculo <i class=\"fas fa-arrow-right\"><\/i><\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/header>\n\n \n <section class=\"py-8 bg-white sticky top-0 z-40 border-b border-gray-100 shadow-sm\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex items-center justify-start md:justify-center gap-2 md:gap-4 overflow-x-auto pb-2 scrollbar-hide\">\n <button class=\"px-6 py-2 bg-engidea-dark text-white font-bold rounded-full text-sm shrink-0 shadow-md\">Todos<\/button>\n <button class=\"px-6 py-2 bg-gray-100 text-gray-600 hover:bg-gray-200 font-bold rounded-full text-sm shrink-0 transition-colors\">Tecnolog\u00eda Educativa<\/button>\n <button class=\"px-6 py-2 bg-gray-100 text-gray-600 hover:bg-gray-200 font-bold rounded-full text-sm shrink-0 transition-colors\">Casos de \u00c9xito<\/button>\n <button class=\"px-6 py-2 bg-gray-100 text-gray-600 hover:bg-gray-200 font-bold rounded-full text-sm shrink-0 transition-colors\">Programas Engidea<\/button>\n <button class=\"px-6 py-2 bg-gray-100 text-gray-600 hover:bg-gray-200 font-bold rounded-full text-sm shrink-0 transition-colors\">Adultos Mayores (Silver)<\/button>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-16 bg-engidea-light\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div id=\"blog-grid\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\n \n \n <div class=\"col-span-full text-center py-16\">\n <i class=\"fas fa-circle-notch fa-spin text-5xl text-engidea-yellow mb-4\"><\/i>\n <p class=\"text-gray-500 font-bold text-lg\">Sincronizando publicaciones desde WordPress…<\/p>\n <\/div>\n\n <\/div>\n\n \n <div class=\"mt-16 flex justify-center\">\n <button class=\"px-8 py-3 bg-white border border-gray-200 text-engidea-dark font-bold rounded-full hover:border-engidea-yellow hover:text-engidea-dark transition-colors shadow-sm flex items-center gap-2\">\n <i class=\"fas fa-sync-alt\"><\/i> Cargar m\u00e1s art\u00edculos\n <\/button>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-20 relative overflow-hidden bg-engidea-dark border-t-4 border-engidea-yellow\">\n \n <div class=\"absolute top-0 right-0 w-64 h-64 bg-engidea-yellow rounded-full blur-3xl opacity-20 transform translate-x-1\/2 -translate-y-1\/2\"><\/div>\n <div class=\"absolute bottom-0 left-0 w-64 h-64 bg-blue-500 rounded-full blur-3xl opacity-10 transform -translate-x-1\/2 translate-y-1\/2\"><\/div>\n \n <div class=\"max-w-4xl mx-auto px-4 text-center relative z-10\">\n <div class=\"w-16 h-16 bg-gray-800 rounded-2xl flex items-center justify-center text-engidea-yellow text-2xl mx-auto mb-6 shadow-lg border border-gray-700\">\n <i class=\"fas fa-paper-plane\"><\/i>\n <\/div>\n <h2 class=\"text-3xl font-bold font-display text-white mb-4\">No te pierdas ninguna innovaci\u00f3n<\/h2>\n <p class=\"text-gray-400 mb-8 text-lg\">\u00danete a nuestra comunidad de +10,000 educadores, padres y profesionales. Recibe nuestro resumen mensual con art\u00edculos, recursos y eventos.<\/p>\n \n <form class=\"flex flex-col sm:flex-row gap-3 max-w-lg mx-auto\">\n <input type=\"email\" placeholder=\"Tu correo electr\u00f3nico\" class=\"flex-grow bg-white\/10 border border-gray-600 text-white placeholder-gray-400 px-6 py-4 rounded-xl focus:outline-none focus:border-engidea-yellow focus:ring-1 focus:ring-engidea-yellow transition-colors\" required>\n <button type=\"submit\" class=\"bg-engidea-yellow text-engidea-dark font-bold px-8 py-4 rounded-xl hover:bg-yellow-400 transition-colors shadow-lg\">Suscribirme<\/button>\n <\/form>\n <p class=\"text-xs text-gray-500 mt-4\"><i class=\"fas fa-lock text-gray-600 mr-1\"><\/i> Respetamos tu privacidad. No enviamos spam.<\/p>\n <\/div>\n <\/section>\n\n \n <footer class=\"bg-gray-900 py-10 text-center border-t border-gray-800\">\n <p class=\"text-gray-400 text-sm font-medium\">\u00a9 2026 Engidea. Innovaci\u00f3n Educativa. Todos los derechos reservados.<\/p>\n <\/footer>\n\n \n <script>\n async function fetchWordPressPosts() {\n const grid = document.getElementById('blog-grid');\n \/\/ Llamamos a la API REST de WordPress de tu dominio. \n \/\/ El par\u00e1metro _embed trae las im\u00e1genes destacadas y los datos del autor.\n const apiUrl = 'https:\/\/proyectos.engidea.com.ve\/wp-json\/wp\/v2\/posts?_embed&per_page=7'; \n \n try {\n const response = await fetch(apiUrl);\n if (!response.ok) throw new Error('Error al conectar con WordPress');\n \n const posts = await response.json();\n \n if (posts.length === 0) {\n grid.innerHTML = '<p class=\"col-span-full text-center text-gray-500\">No hay entradas publicadas a\u00fan.<\/p>';\n return;\n }\n\n \/\/ 1. POBLAR EL ART\u00cdCULO DESTACADO (Hero Post - El m\u00e1s reciente)\n const heroPost = posts[0];\n populateHeroPost(heroPost);\n\n \/\/ 2. POBLAR EL GRID CON EL RESTO DE LOS ART\u00cdCULOS\n const gridPosts = posts.slice(1);\n grid.innerHTML = ''; \/\/ Limpiar el estado de carga (el spinner)\n \n gridPosts.forEach(post => {\n const cardData = extractPostData(post);\n \n const cardHTML = `\n <article class=\"bg-white rounded-2xl border border-gray-200 overflow-hidden blog-card flex flex-col cursor-pointer group\" onclick=\"window.location.href='${cardData.link}'\">\n <div class=\"relative h-52 overflow-hidden\">\n <img decoding=\"async\" src=\"${cardData.imageUrl}\" alt=\"${cardData.title}\" class=\"w-full h-full object-cover blog-img transition-transform duration-500\">\n <div class=\"absolute top-4 left-4 bg-white\/90 backdrop-blur text-engidea-dark text-xs font-bold uppercase tracking-wide px-3 py-1 rounded-full shadow-sm\">\n ${cardData.category}\n <\/div>\n <\/div>\n <div class=\"p-6 flex flex-col flex-grow\">\n <div class=\"flex items-center gap-3 text-xs text-gray-500 mb-3 font-medium\">\n <span>${cardData.date}<\/span>\n <span class=\"w-1 h-1 bg-gray-300 rounded-full\"><\/span>\n <span>Blog Engidea<\/span>\n <\/div>\n <h3 class=\"text-xl font-bold font-display text-engidea-dark mb-3 group-hover:text-yellow-600 transition-colors line-clamp-2\">\n ${cardData.title}\n <\/h3>\n <p class=\"text-gray-600 text-sm mb-6 line-clamp-3\">\n ${cardData.excerpt}\n <\/p>\n <div class=\"mt-auto flex items-center justify-between border-t border-gray-100 pt-4\">\n <div class=\"flex items-center gap-2\">\n <img decoding=\"async\" src=\"${cardData.authorAvatar}\" alt=\"Autor\" class=\"w-8 h-8 rounded-full bg-gray-200\">\n <span class=\"text-xs font-bold text-gray-700\">${cardData.authorName}<\/span>\n <\/div>\n <span class=\"text-sm font-bold text-engidea-dark flex items-center gap-1 read-more transition-all\">Leer <i class=\"fas fa-arrow-right text-xs\"><\/i><\/span>\n <\/div>\n <\/div>\n <\/article>\n `;\n grid.innerHTML += cardHTML;\n });\n\n } catch (error) {\n console.error(error);\n grid.innerHTML = '<p class=\"col-span-full text-center text-red-500 py-10 font-bold\"><i class=\"fas fa-exclamation-triangle mr-2\"><\/i> No se pudieron cargar las entradas. Aseg\u00farate de que la API REST en proyectos.engidea.com.ve est\u00e9 p\u00fablica.<\/p>';\n }\n }\n\n function extractPostData(post) {\n \/\/ Extraer t\u00edtulo, decodificando caracteres especiales\n const tempDiv = document.createElement(\"div\");\n tempDiv.innerHTML = post.title.rendered;\n const title = tempDiv.textContent || tempDiv.innerText || \"\";\n\n \/\/ Extraer extracto limpiando etiquetas HTML (WordPress las manda por defecto)\n tempDiv.innerHTML = post.excerpt.rendered;\n const excerpt = tempDiv.textContent || tempDiv.innerText || \"\";\n\n \/\/ Formatear Fecha al estilo \"24 Oct, 2026\"\n const dateObj = new Date(post.date);\n const date = dateObj.toLocaleDateString('es-ES', { day: 'numeric', month: 'short', year: 'numeric' });\n\n \/\/ Extraer Imagen Destacada (o usar una por defecto de respaldo)\n let imageUrl = 'https:\/\/images.unsplash.com\/photo-1516321318423-f06f85e504b3?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80'; \n if (post._embedded && post._embedded['wp:featuredmedia'] && post._embedded['wp:featuredmedia'][0].source_url) {\n imageUrl = post._embedded['wp:featuredmedia'][0].source_url;\n }\n\n \/\/ Extraer Nombre de Categor\u00eda (toma la principal)\n let category = 'Novedades';\n if (post._embedded && post._embedded['wp:term'] && post._embedded['wp:term'][0] && post._embedded['wp:term'][0][0]) {\n category = post._embedded['wp:term'][0][0].name;\n }\n\n \/\/ Extraer Datos del Autor\n let authorName = 'Equipo Engidea';\n let authorAvatar = 'https:\/\/ui-avatars.com\/api\/?name=Engidea&background=FACC15&color=111827';\n if (post._embedded && post._embedded.author && post._embedded.author[0]) {\n authorName = post._embedded.author[0].name;\n if (post._embedded.author[0].avatar_urls) {\n authorAvatar = post._embedded.author[0].avatar_urls['48'] || authorAvatar;\n }\n }\n\n return { title, excerpt, date, link: post.link, imageUrl, category, authorName, authorAvatar };\n }\n\n \/\/ Funci\u00f3n para inyectar datos en la tarjeta del Art\u00edculo Destacado superior\n function populateHeroPost(post) {\n const data = extractPostData(post);\n \n document.getElementById('hero-post-container').onclick = () => window.location.href = data.link;\n document.getElementById('hero-img').src = data.imageUrl;\n document.getElementById('hero-category').innerText = data.category;\n document.getElementById('hero-date').innerHTML = `<i class=\"far fa-calendar-alt mr-1\"><\/i> ${data.date}`;\n document.getElementById('hero-title').innerText = data.title;\n document.getElementById('hero-excerpt').innerText = data.excerpt;\n document.getElementById('hero-author-avatar').src = data.authorAvatar;\n document.getElementById('hero-author-name').innerText = data.authorName;\n }\n\n \/\/ Ejecutar la sincronizaci\u00f3n en cuanto la p\u00e1gina cargue\n document.addEventListener('DOMContentLoaded', fetchWordPressPosts);\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Blog y Novedades | Engidea Blog Engidea Ideas, metodolog\u00edas y noticias sobre c\u00f3mo la tecnolog\u00eda est\u00e1 transformando la educaci\u00f3n y las empresas. Cargando… … Blog Engidea Cargando art\u00edculo destacado… Conectando con el servidor de Engidea para traer las \u00faltimas novedades. Equipo Engidea Autor Leer art\u00edculo Todos Tecnolog\u00eda Educativa Casos de \u00c9xito Programas Engidea Adultos Mayores […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"give_campaign_id":0,"_eb_attr":"","footnotes":""},"class_list":["post-2129","page","type-page","status-publish","hentry"],"campaignId":"0","_links":{"self":[{"href":"https:\/\/proyectos.engidea.com.ve\/index.php\/wp-json\/wp\/v2\/pages\/2129","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/proyectos.engidea.com.ve\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/proyectos.engidea.com.ve\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/proyectos.engidea.com.ve\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/proyectos.engidea.com.ve\/index.php\/wp-json\/wp\/v2\/comments?post=2129"}],"version-history":[{"count":2,"href":"https:\/\/proyectos.engidea.com.ve\/index.php\/wp-json\/wp\/v2\/pages\/2129\/revisions"}],"predecessor-version":[{"id":2131,"href":"https:\/\/proyectos.engidea.com.ve\/index.php\/wp-json\/wp\/v2\/pages\/2129\/revisions\/2131"}],"wp:attachment":[{"href":"https:\/\/proyectos.engidea.com.ve\/index.php\/wp-json\/wp\/v2\/media?parent=2129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}