Eduverso – Ecosistema \u00c1gil<\/title>\n \n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n \n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\n \n \n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n \n <style>\n html { scroll-behavior: smooth; }\n body { font-family: system-ui, -apple-system, sans-serif; }\n .modal-overlay { background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); }\n .animate-fade-in-up { animation: fade-in-up 0.8s ease-out forwards; }\n @keyframes fade-in-up {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n \/* Gradientes para las metodolog\u00edas *\/\n .bg-method-design { background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); border-left: 4px solid #f97316; }\n .bg-method-lean { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); border-left: 4px solid #3b82f6; }\n .bg-method-scamper { background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%); border-left: 4px solid #06b6d4; }\n <\/style>\n<\/head>\n<body class=\"bg-white text-gray-900\">\n <div id=\"root\"><\/div>\n\n <script type=\"text\/babel\">\n const { useState, useEffect } = React;\n\n \/\/ --- ICONOS SVG ---\n const Icon = ({ path, className }) => (\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}>\n {path}\n <\/svg>\n );\n\n const ChevronRight = (props) => <Icon {...props} path={<polyline points=\"9 18 15 12 9 6\"\/>} \/>;\n const Clock = (props) => <Icon {...props} path={<><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/>} \/>;\n const ImageIcon = (props) => <Icon {...props} path={<><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"\/><circle cx=\"9\" cy=\"9\" r=\"2\"\/><path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"\/><\/>} \/>;\n const Sparkles = (props) => <Icon {...props} path={<><path d=\"m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z\"\/><path d=\"M5 3v4\"\/><path d=\"M9 5H5\"\/><path d=\"M5 19v4\"\/><path d=\"M9 19H5\"\/><\/>} \/>;\n const Brain = (props) => <Icon {...props} path={<><path d=\"M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z\"\/><path d=\"M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z\"\/><\/>} \/>;\n const PenTool = (props) => <Icon {...props} path={<><path d=\"m12 19 7-7 3 3-7 7-3-3z\"\/><path d=\"m18 13-1.5-7.5L2 2l3.5 14.5L13 18l5-5z\"\/><path d=\"m2 2 7.586 7.586\"\/><circle cx=\"11\" cy=\"11\" r=\"2\"\/><\/>} \/>;\n const Rocket = (props) => <Icon {...props} path={<><path d=\"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z\"\/><path d=\"m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z\"\/><path d=\"M9 12H4s.55-3.03 2-4c1.62-1.1 4 0 4 0\"\/><path d=\"M12 15v5s3.03-.55 4-2c1.1-1.62 0-4 0-4\"\/><\/>} \/>;\n const CheckCircle2 = (props) => <Icon {...props} path={<><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m9 12 2 2 4-4\"\/><\/>} \/>;\n const Heart = (props) => <Icon {...props} path={<path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\"\/>} \/>;\n const Smile = (props) => <Icon {...props} path={<><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M8 14s1.5 2 4 2 4-2 4-2\"\/><line x1=\"9\" x2=\"9.01\" y1=\"9\" y2=\"9\"\/><line x1=\"15\" x2=\"15.01\" y1=\"9\" y2=\"9\"\/><\/>} \/>;\n const Globe = (props) => <Icon {...props} path={<><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"2\" x2=\"22\" y1=\"12\" y2=\"12\"\/><path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"\/><\/>} \/>;\n const Grid = (props) => <Icon {...props} path={<><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"\/><line x1=\"3\" x2=\"21\" y1=\"9\" y2=\"9\"\/><line x1=\"3\" x2=\"21\" y1=\"15\" y2=\"15\"\/><line x1=\"9\" x2=\"9\" y1=\"3\" y2=\"21\"\/><line x1=\"15\" x2=\"15\" y1=\"3\" y2=\"21\"\/><\/>} \/>;\n const Smartphone = (props) => <Icon {...props} path={<rect width=\"14\" height=\"20\" x=\"5\" y=\"2\" rx=\"2\" ry=\"2\"\/>} \/>;\n const Target = (props) => <Icon {...props} path={<><circle cx=\"12\" cy=\"12\" r=\"10\"\/><circle cx=\"12\" cy=\"12\" r=\"6\"\/><circle cx=\"12\" cy=\"12\" r=\"2\"\/><\/>} \/>;\n const User = (props) => <Icon {...props} path={<><path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"\/><circle cx=\"12\" cy=\"7\" r=\"4\"\/><\/>} \/>;\n const Mail = (props) => <Icon {...props} path={<><rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\"\/><path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\"\/><\/>} \/>;\n const X = (props) => <Icon {...props} path={<><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/>} \/>;\n const RotateCw = (props) => <Icon {...props} path={<><path d=\"M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8\"\/><path d=\"M21 3v5h-5\"\/><\/>} \/>;\n\n \/\/ --- DATOS ---\n\n const products = [\n {\n id: 1,\n title: \"Eduverso Design Kit\",\n subtitle: \"The Pitchtionary Edition\",\n description: \"El juego de prototipado r\u00e1pido e investigaci\u00f3n asistida por IA. Dibuja, construye y valida retos en 60 segundos con Leti, tu asistente virtual.\",\n image: \"https:\/\/i.ibb.co\/SDJrHYYY\/Gemini-Generated-Image-nxm4zmnxm4zmnxm4-1.png\", \n link: \"https:\/\/eduverso.club\/designkit\/\",\n color: \"orange\",\n badge: \"M\u00e1s Vendido\"\n },\n {\n id: 2,\n title: \"Eduverso Lean Kit\",\n subtitle: \"Simulaci\u00f3n de Negocios\",\n description: \"Inspirado en el Monopoly. Un tablero h\u00edbrido donde gestionas recursos operativos en el per\u00edmetro y validas tu modelo de negocio Lean Canvas en el centro.\",\n image: \"https:\/\/i.ibb.co\/zWM4DfvH\/1771190646937.png\",\n link: \"https:\/\/eduverso.club\/leankit\/\",\n color: \"blue\",\n badge: \"Nuevo Lanzamiento\"\n },\n {\n id: 3,\n title: \"Eduverso Scamper Kit\",\n subtitle: \"Innovation Mystery\",\n description: \"El juego de deducci\u00f3n estrat\u00e9gica estilo CLUE. Resuelve el 'Misterio de la Innovaci\u00f3n' combinando t\u00e9cnicas SCAMPER con tecnolog\u00edas habilitadoras.\",\n image: \"https:\/\/i.ibb.co\/rGpq1tmD\/Gemini-Generated-Image-13y63d13y63d13y6.png\",\n link: \"https:\/\/eduverso.club\/scamperkit\/\",\n color: \"cyan\",\n badge: \"En Pre-venta\"\n }\n ];\n\n const methodologies = [\n {\n title: \"Design Thinking\",\n desc: \"Un enfoque centrado en el humano para la resoluci\u00f3n creativa de problemas. Empatizar, Definir, Idear, Prototipar y Testear.\",\n icon: \"fas fa-lightbulb\",\n color: \"text-orange-600\",\n bg: \"bg-method-design\"\n },\n {\n title: \"Lean Startup\",\n desc: \"Construir, Medir, Aprender. Una metodolog\u00eda cient\u00edfica para desarrollar negocios y productos viables, reduciendo el riesgo de fracaso.\",\n icon: \"fas fa-chart-line\",\n color: \"text-blue-600\",\n bg: \"bg-method-lean\"\n },\n {\n title: \"SCAMPER\",\n desc: \"T\u00e9cnica de creatividad para mejorar productos o servicios. Sustituir, Combinar, Adaptar, Modificar, Poner en otro uso, Eliminar, Reorganizar.\",\n icon: \"fas fa-search\",\n color: \"text-cyan-600\",\n bg: \"bg-method-scamper\"\n }\n ];\n\n const projectScenarios = [\n {\n title: \"Comunidades Mujeres Tech\",\n desc: \"Empoderando el liderazgo femenino. Utilizamos el Eduverso Kit en hackathones y mentor\u00edas para visibilizar roles de decisi\u00f3n t\u00e9cnica y estrat\u00e9gica.\",\n icon: <Heart className=\"w-8 h-8 text-pink-600\" \/>,\n color: \"bg-pink-50 border-pink-100\"\n },\n {\n title: \"Comunidad Silver\",\n desc: \"Digitalizaci\u00f3n sin edad. Talleres donde la generaci\u00f3n senior traduce su experiencia de vida en soluciones digitales usando el tablero f\u00edsico.\",\n icon: <Smile className=\"w-8 h-8 text-blue-600\" \/>,\n color: \"bg-blue-50 border-blue-100\"\n },\n {\n title: \"J\u00f3venes Innovadores\",\n desc: \"Agentes de cambio del ma\u00f1ana. Programas donde nativos digitales aplican Design Thinking para resolver problemas reales de sus comunidades.\",\n icon: <Globe className=\"w-8 h-8 text-green-600\" \/>,\n color: \"bg-green-50 border-green-100\"\n }\n ];\n\n const labProducts = [\n {\n title: \"Business Canvas\",\n desc: \"Reimaginando el modelo de negocio. Bloques que conectan hip\u00f3tesis con validaci\u00f3n IA.\",\n icon: <Grid className=\"text-blue-500 w-8 h-8\" \/>,\n status: \"En Dise\u00f1o\",\n color: \"bg-blue-50 border-blue-100\"\n },\n {\n title: \"App Bit\u00e1cora\",\n desc: \"Aplicaci\u00f3n para escanear tableros y guardar el historial de tus sprints f\u00edsicos.\",\n icon: <Smartphone className=\"text-gray-800 w-8 h-8\" \/>,\n status: \"En Desarrollo\",\n color: \"bg-gray-50 border-gray-200\"\n },\n {\n title: \"User Journey Map\",\n desc: \"Mapas de suelo gigantes para caminar la experiencia del usuario.\",\n icon: <Target className=\"text-orange-500 w-8 h-8\" \/>,\n status: \"Concepto\",\n color: \"bg-orange-50 border-orange-100\"\n }\n ];\n\n \/\/ --- COMPONENTES ---\n\n const Hero = ({ onOpenModal }) => {\n return (\n <section className=\"relative pt-24 pb-20 lg:pt-32 lg:pb-32 overflow-hidden bg-white\">\n {\/* Background Gradients *\/}\n <div className=\"absolute top-0 right-0 -mr-40 -mt-40 w-[600px] h-[600px] rounded-full bg-purple-100\/50 blur-3xl\"><\/div>\n <div className=\"absolute bottom-0 left-0 -ml-40 -mb-40 w-[500px] h-[500px] rounded-full bg-yellow-100\/50 blur-3xl\"><\/div>\n\n <div className=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center\">\n \n <div className=\"inline-flex items-center px-4 py-2 rounded-full bg-purple-50 border border-purple-100 text-purple-700 font-medium text-sm mb-8 animate-fade-in-up shadow-sm\">\n <Clock size={16} className=\"mr-2\" \/>\n Ecosistema de Innovaci\u00f3n Tangible\n <\/div>\n \n <h1 className=\"text-5xl md:text-7xl font-extrabold text-gray-900 leading-tight mb-6 tracking-tight\">\n Dise\u00f1ando el futuro <br \/>\n <span className=\"text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-indigo-600\">\n tangible de la agilidad\n <\/span>\n <\/h1>\n \n {\/* INTRODUCCI\u00d3N DETALLADA *\/}\n <div className=\"mt-8 bg-white\/60 backdrop-blur-sm border border-gray-200 rounded-2xl p-8 shadow-lg text-left grid md:grid-cols-2 gap-8 animate-fade-in-up\">\n <div>\n <div className=\"flex items-center gap-3 mb-3\">\n <div className=\"p-2 bg-purple-100 rounded-lg text-purple-600\"><Grid className=\"w-5 h-5\"\/><\/div>\n <h3 className=\"font-bold text-gray-900 text-lg\">Herramientas F\u00edsicas<\/h3>\n <\/div>\n <p className=\"text-gray-600 text-sm leading-relaxed\">\n Transformamos salas de reuniones en centros de comando. Nuestros kits f\u00edsicos (tableros, cartas, tokens) sacan a los equipos de las pantallas y fomentan la colaboraci\u00f3n real y el pensamiento estrat\u00e9gico.\n <\/p>\n <\/div>\n <div>\n <div className=\"flex items-center gap-3 mb-3\">\n <div className=\"p-2 bg-blue-100 rounded-lg text-blue-600\"><Smartphone className=\"w-5 h-5\"\/><\/div>\n <h3 className=\"font-bold text-gray-900 text-lg\">Inteligencia Digital<\/h3>\n <\/div>\n <p className=\"text-gray-600 text-sm leading-relaxed\">\n Cada kit f\u00edsico se conecta con nuestra App. La tecnolog\u00eda valida las decisiones tomadas en el tablero, gestiona presupuestos en tiempo real y ofrece feedback instant\u00e1neo mediante IA.\n <\/p>\n <\/div>\n <\/div>\n\n <div className=\"flex flex-col sm:flex-row justify-center gap-4 mt-10\">\n <button onClick={onOpenModal} className=\"px-8 py-4 rounded-xl bg-gray-900 text-white font-bold text-lg hover:bg-black transition shadow-xl shadow-gray-900\/20 flex items-center justify-center group\">\n Unirse a la Comunidad <ChevronRight className=\"ml-1 group-hover:translate-x-1 transition\" \/>\n <\/button>\n <\/div>\n <\/div>\n <\/section>\n );\n };\n\n const Methodology = () => {\n const steps = [\n {\n step: \"01\",\n title: \"Aprende\",\n subtitle: \"Habilidades Agiles + Blandas + Duras\",\n description: \"Domina una nueva mentalidad. Aprende sobre metodolog\u00edas \u00c1giles, competencias blandas y habilidades t\u00e9cnicas.\",\n icon: <Brain className=\"w-8 h-8 text-white\" \/>,\n color: \"bg-purple-600\",\n lightColor: \"bg-purple-50\",\n textColor: \"text-purple-600\",\n checkList: [\"Design thinking\", \"Lean Canvas Model\", \"SCAMPER\"]\n },\n {\n step: \"02\",\n title: \"Crea\",\n subtitle: \"Colaboraci\u00f3n Tangible\",\n description: \"Materializa ideas en equipo o individual, crea proyectos de impacto que resuelven problemas reales.\",\n icon: <PenTool className=\"w-8 h-8 text-white\" \/>,\n color: \"bg-yellow-500\",\n lightColor: \"bg-yellow-50\",\n textColor: \"text-yellow-600\",\n checkList: [\"Productos M\u00ednimos Viables (MVP)\", \"Validaci\u00f3n Temprana\", \"Prototipado R\u00e1pido\"]\n },\n {\n step: \"03\",\n title: \"Transforma\",\n subtitle: \"Digitalizaci\u00f3n y Escala\",\n description: \"Transforma tu entorno, comunidad o equipos de trabajo.\",\n icon: <Rocket className=\"w-8 h-8 text-white\" \/>,\n color: \"bg-gray-900\",\n lightColor: \"bg-gray-50\",\n textColor: \"text-gray-900\",\n checkList: [\"Crea comunidades\", \"Ense\u00f1a\", \"Cultura \u00c1gil\"]\n }\n ];\n \n return (\n <section id=\"metodologia\" className=\"py-24 bg-white relative overflow-hidden border-t border-gray-100\">\n <div className=\"hidden lg:block absolute top-1\/2 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-gray-200 to-transparent -translate-y-1\/2 z-0\"><\/div>\n \n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10\">\n <div className=\"text-center mb-20\">\n <span className=\"text-purple-600 font-bold tracking-wider uppercase text-sm bg-purple-50 px-3 py-1 rounded-full\">Nuestro Prop\u00f3sito<\/span>\n <h2 className=\"mt-4 text-4xl md:text-5xl font-extrabold text-gray-900\">\n Aprende. Crea. Transforma.\n <\/h2>\n <p className=\"mt-4 max-w-3xl mx-auto text-xl text-gray-500 leading-relaxed\">\n Trata de aprender a apropiarse de las habilidades \u00e1giles, blandas y duras, para luego crear proyectos con prop\u00f3sito y transformar nuestro entorno.\n <\/p>\n <\/div>\n \n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n {steps.map((item, index) => (\n <div key={index} className=\"relative group\">\n <div className={`w-full bg-white rounded-3xl p-8 border border-gray-100 hover:border-transparent hover:shadow-[0_20px_50px_rgba(0,0,0,0.1)] transition-all duration-500 relative z-10 h-full flex flex-col`}>\n \n <div className={`absolute -top-5 left-8 px-4 py-2 rounded-xl text-sm font-bold text-white shadow-lg ${item.color} flex items-center gap-2`}>\n <span>Paso {item.step}<\/span>\n <\/div>\n\n <div className={`w-16 h-16 rounded-2xl ${item.lightColor} flex items-center justify-center mb-6 mt-4 group-hover:scale-110 transition duration-300`}>\n <div className={item.textColor.replace('text-', 'bg-').replace('600', '100') + ' p-2 rounded-lg'}>\n {item.icon}\n <\/div>\n <\/div>\n \n <h3 className=\"text-2xl font-bold text-gray-900 mb-1\">{item.title}<\/h3>\n <h4 className={`text-sm font-bold uppercase tracking-wider mb-4 ${item.textColor}`}>{item.subtitle}<\/h4>\n \n <p className=\"text-gray-500 leading-relaxed mb-6 flex-grow\">\n {item.description}\n <\/p>\n\n <ul className=\"space-y-2 pt-6 border-t border-gray-50\">\n {item.checkList.map((point, i) => (\n <li key={i} className=\"flex items-center text-sm text-gray-600 font-medium\">\n <CheckCircle2 className={`w-4 h-4 mr-2 ${item.textColor}`} \/> {point}\n <\/li>\n ))}\n <\/ul>\n <\/div>\n <\/div>\n ))}\n <\/div>\n <\/div>\n <\/section>\n );\n };\n\n \/\/ \ud83d\udfe2 NUEVA SECCI\u00d3N DE METODOLOG\u00cdAS \ud83d\udfe2\n const MethodologiesSection = () => {\n return (\n <section id=\"metodologias-base\" className=\"py-24 bg-white border-t border-gray-100\">\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div className=\"text-center mb-16\">\n <h2 className=\"text-3xl font-extrabold text-gray-900\">Metodolog\u00edas Base<\/h2>\n <p className=\"mt-4 text-lg text-gray-500\">Nuestros kits no son solo juegos; son sistemas de aprendizaje basados en est\u00e1ndares globales.<\/p>\n <\/div>\n \n <div className=\"grid md:grid-cols-3 gap-8\">\n {methodologies.map((method, idx) => (\n <div key={idx} className={`p-8 rounded-2xl ${method.bg} hover:shadow-lg transition duration-300`}>\n <div className={`mb-4 text-4xl ${method.color}`}>\n <i className={method.icon}><\/i>\n <\/div>\n <h3 className=\"text-xl font-bold text-gray-900 mb-3\">{method.title}<\/h3>\n <p className=\"text-gray-600 text-sm leading-relaxed\">{method.desc}<\/p>\n <\/div>\n ))}\n <\/div>\n <\/div>\n <\/section>\n );\n };\n\n \/\/ \ud83d\udfe2 SECCI\u00d3N DE PRODUCTOS \ud83d\udfe2\n const ProductsSection = () => {\n const getColorClasses = (color) => {\n const map = {\n orange: { badge: 'bg-orange-600', sub: 'text-orange-600', btn: 'bg-orange-600 hover:bg-orange-700 shadow-orange-200' },\n blue: { badge: 'bg-blue-600', sub: 'text-blue-600', btn: 'bg-blue-600 hover:bg-blue-700 shadow-blue-200' },\n cyan: { badge: 'bg-cyan-600', sub: 'text-cyan-600', btn: 'bg-cyan-600 hover:bg-cyan-700 shadow-cyan-200' },\n purple: { badge: 'bg-purple-600', sub: 'text-purple-600', btn: 'bg-purple-600 hover:bg-purple-700 shadow-purple-200' }\n };\n return map[color] || map.purple;\n };\n\n return (\n <section id=\"productos\" className=\"py-24 bg-gray-50 border-t border-gray-200\">\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div className=\"text-center mb-16\">\n <h2 className=\"text-4xl font-extrabold text-gray-900\">Nuestros Productos<\/h2>\n <p className=\"mt-4 text-xl text-gray-500\">Herramientas dise\u00f1adas para potenciar la innovaci\u00f3n en tu organizaci\u00f3n.<\/p>\n <\/div>\n\n <div className=\"grid md:grid-cols-3 gap-8\">\n {products.map((product) => {\n const styles = getColorClasses(product.color);\n return (\n <div key={product.id} className=\"bg-white rounded-3xl overflow-hidden shadow-xl border border-gray-100 hover:shadow-2xl transition-all duration-300 flex flex-col group\">\n {\/* Imagen del Producto *\/}\n <div className=\"h-56 overflow-hidden relative bg-gray-100 flex items-center justify-center\">\n <div className={`absolute top-4 right-4 text-white text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider z-10 ${styles.badge}`}>\n {product.badge}\n <\/div>\n <img \n src={product.image} \n alt={product.title} \n className=\"w-full h-full object-cover transform group-hover:scale-105 transition duration-500\"\n \/>\n <\/div>\n \n {\/* Contenido *\/}\n <div className=\"p-8 flex flex-col flex-grow\">\n <h3 className=\"text-xl font-bold text-gray-900 mb-2\">{product.title}<\/h3>\n <h4 className={`text-xs font-bold uppercase tracking-wider mb-4 ${styles.sub}`}>\n {product.subtitle}\n <\/h4>\n <p className=\"text-gray-500 text-sm mb-8 leading-relaxed flex-grow\">\n {product.description}\n <\/p>\n \n <a href={product.link} className={`w-full py-3 rounded-xl font-bold text-center text-white text-sm transition shadow-lg transform active:scale-95 ${styles.btn}`}>\n Ver Detalles\n <\/a>\n <\/div>\n <\/div>\n );\n })}\n <\/div>\n <\/div>\n <\/section>\n );\n };\n\n const UseCases = () => {\n return (\n <section id=\"comunidades\" className=\"py-24 bg-gray-900 text-white\">\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div className=\"text-center mb-16\">\n <span className=\"text-purple-400 font-bold tracking-wide uppercase text-sm mb-2 block\">Impacto Social<\/span>\n <h2 className=\"text-3xl font-bold text-white\">Impulsando Comunidades<\/h2>\n <p className=\"mt-4 text-gray-400\">Herramientas adaptables para transformar la educaci\u00f3n y la inclusi\u00f3n.<\/p>\n <\/div>\n\n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n {projectScenarios.map((useCase, idx) => (\n <div key={idx} className={`p-8 rounded-2xl bg-gray-800 border border-gray-700 hover:border-purple-500 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300`}>\n <div className=\"mb-6 p-3 bg-gray-700 rounded-xl shadow-sm w-fit\">\n {useCase.icon}\n <\/div>\n <h3 className=\"text-xl font-bold text-white mb-3\">{useCase.title}<\/h3>\n <p className=\"text-gray-400 text-sm leading-relaxed mb-6\">\n {useCase.desc}\n <\/p>\n <\/div>\n ))}\n <\/div>\n <\/div>\n <\/section>\n );\n };\n\n const DesignLab = () => {\n return (\n <section id=\"lab\" className=\"py-24 bg-slate-50 border-t border-gray-200 relative overflow-hidden\">\n <div className=\"absolute inset-0 opacity-[0.03]\" style={{ backgroundImage: 'radial-gradient(#000 1px, transparent 1px)', backgroundSize: '20px 20px' }}><\/div>\n \n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10\">\n <div className=\"text-center mb-16\">\n <span className=\"text-blue-600 font-bold tracking-wide uppercase text-sm mb-2 block\">R&D - Futuro<\/span>\n <h2 className=\"text-3xl font-bold text-gray-900\">Eduverso Design Lab<\/h2>\n <p className=\"mt-4 text-gray-500 max-w-2xl mx-auto\">\n Nuestro equipo est\u00e1 cocinando las pr\u00f3ximas herramientas. Un vistazo exclusivo a lo que viene.\n <\/p>\n <\/div>\n \n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n {labProducts.map((item, index) => (\n <div key={index} className={`relative rounded-2xl p-8 border border-dashed border-gray-300 bg-white hover:border-blue-400 transition-all duration-300 hover:shadow-lg group`}>\n <div className=\"absolute top-4 right-4 bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-xs font-bold shadow-sm border border-blue-100\">\n {item.status}\n <\/div>\n \n <div className=\"mb-6 bg-gray-50 w-16 h-16 rounded-2xl flex items-center justify-center shadow-sm group-hover:bg-blue-50 transition-colors\">\n {item.icon}\n <\/div>\n \n <h3 className=\"text-xl font-bold text-gray-900 mb-3\">{item.title}<\/h3>\n <p className=\"text-gray-600 leading-relaxed mb-6 text-sm\">{item.desc}<\/p>\n \n <div className=\"flex items-center text-gray-400 text-sm font-medium\">\n <Clock size={14} className=\"mr-2\" \/> \n {item.status === \"En Dise\u00f1o\" ? \"Estimado Q3 2026\" : \"Fecha por definir\"}\n <\/div>\n <\/div>\n ))}\n <\/div>\n <\/div>\n <\/section>\n );\n };\n\n const WaitlistModal = ({ isOpen, onClose }) => {\n const [status, setStatus] = useState(null);\n\n if (!isOpen) return null;\n\n const handleSubmit = (e) => {\n e.preventDefault();\n setStatus('sending');\n const form = e.target;\n const data = new FormData(form);\n\n fetch(form.action, {\n method: form.method,\n body: data,\n headers: { 'Accept': 'application\/json' }\n }).then(response => {\n if (response.ok) {\n setStatus('success');\n form.reset();\n } else {\n setStatus('error');\n }\n }).catch(error => {\n setStatus('error');\n });\n };\n\n return (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4 modal-overlay animate-fade-in-up\">\n <div className=\"bg-white rounded-2xl shadow-2xl w-full max-w-md relative overflow-hidden\">\n <button onClick={onClose} className=\"absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition\">\n <X className=\"w-6 h-6\" \/>\n <\/button>\n \n <div className=\"p-8\">\n <h3 className=\"text-2xl font-bold text-center text-gray-900 mb-2\">\u00danete a la Comunidad<\/h3>\n <p className=\"text-center text-gray-500 mb-6 text-sm\">\n Recibe noticias sobre lanzamientos y eventos.\n <\/p>\n\n {status === 'success' ? (\n <div className=\"bg-green-50 border border-green-100 rounded-xl p-6 text-center\">\n <div className=\"w-12 h-12 bg-green-100 rounded-full flex items-center justify-center text-green-600 mx-auto mb-3\">\n <CheckCircle2 className=\"w-6 h-6\" \/>\n <\/div>\n <h4 className=\"text-green-800 font-bold mb-1\">\u00a1Gracias por unirte!<\/h4>\n <button onClick={onClose} className=\"mt-4 text-sm font-bold text-green-700 hover:underline\">Cerrar<\/button>\n <\/div>\n ) : (\n <form action=\"https:\/\/formsubmit.co\/learningforti.app@gmail.com\" method=\"POST\" onSubmit={handleSubmit} className=\"space-y-4\">\n <input type=\"hidden\" name=\"_subject\" value=\"Nuevo registro Comunidad Eduverso\" \/>\n <input type=\"hidden\" name=\"_captcha\" value=\"false\" \/>\n <div>\n <label className=\"block text-sm font-bold text-gray-700 mb-1\">Nombre<\/label>\n <input type=\"text\" name=\"name\" required className=\"w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 outline-none\" placeholder=\"Tu nombre\" \/>\n <\/div>\n <div>\n <label className=\"block text-sm font-bold text-gray-700 mb-1\">Correo Electr\u00f3nico<\/label>\n <input type=\"email\" name=\"email\" required className=\"w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 outline-none\" placeholder=\"hola@ejemplo.com\" \/>\n <\/div>\n <button type=\"submit\" disabled={status === 'sending'} className=\"w-full bg-gray-900 text-white font-bold py-3 rounded-xl hover:bg-purple-900 transition flex items-center justify-center disabled:opacity-50\">\n {status === 'sending' ? <span className=\"flex items-center\"><RotateCw className=\"w-5 h-5 mr-2 animate-spin\" \/> Enviando...<\/span> : \"Apuntarme ahora\"}\n <\/button>\n <\/form>\n )}\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n const App = () => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n return (\n <div className=\"font-sans antialiased text-gray-900 bg-white selection:bg-purple-100 selection:text-purple-900\">\n <Hero onOpenModal={() => setIsModalOpen(true)} \/>\n <Methodology \/>\n <MethodologiesSection \/>\n <ProductsSection \/>\n <UseCases \/>\n <DesignLab \/>\n <WaitlistModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} \/>\n <\/div>\n );\n };\n\n \/\/ Renderizado\n const root = ReactDOM.createRoot(document.getElementById('root'));\n root.render(<App \/>);\n\n <\/script>\n<\/body>\n<\/html>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Eduverso – Ecosistema \u00c1gil<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-697","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/eduverso.club\/index.php?rest_route=\/wp\/v2\/pages\/697","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eduverso.club\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eduverso.club\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eduverso.club\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/eduverso.club\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=697"}],"version-history":[{"count":7,"href":"https:\/\/eduverso.club\/index.php?rest_route=\/wp\/v2\/pages\/697\/revisions"}],"predecessor-version":[{"id":716,"href":"https:\/\/eduverso.club\/index.php?rest_route=\/wp\/v2\/pages\/697\/revisions\/716"}],"wp:attachment":[{"href":"https:\/\/eduverso.club\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\n\n\n \n \n Eduverso – Ecosistema \u00c1gil<\/title>\n \n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n \n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\n \n \n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n \n <style>\n html { scroll-behavior: smooth; }\n body { font-family: system-ui, -apple-system, sans-serif; }\n .modal-overlay { background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); }\n .animate-fade-in-up { animation: fade-in-up 0.8s ease-out forwards; }\n @keyframes fade-in-up {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n \/* Gradientes para las metodolog\u00edas *\/\n .bg-method-design { background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); border-left: 4px solid #f97316; }\n .bg-method-lean { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); border-left: 4px solid #3b82f6; }\n .bg-method-scamper { background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%); border-left: 4px solid #06b6d4; }\n <\/style>\n<\/head>\n<body class=\"bg-white text-gray-900\">\n <div id=\"root\"><\/div>\n\n <script type=\"text\/babel\">\n const { useState, useEffect } = React;\n\n \/\/ --- ICONOS SVG ---\n const Icon = ({ path, className }) => (\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}>\n {path}\n <\/svg>\n );\n\n const ChevronRight = (props) => <Icon {...props} path={<polyline points=\"9 18 15 12 9 6\"\/>} \/>;\n const Clock = (props) => <Icon {...props} path={<><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/>} \/>;\n const ImageIcon = (props) => <Icon {...props} path={<><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"\/><circle cx=\"9\" cy=\"9\" r=\"2\"\/><path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"\/><\/>} \/>;\n const Sparkles = (props) => <Icon {...props} path={<><path d=\"m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z\"\/><path d=\"M5 3v4\"\/><path d=\"M9 5H5\"\/><path d=\"M5 19v4\"\/><path d=\"M9 19H5\"\/><\/>} \/>;\n const Brain = (props) => <Icon {...props} path={<><path d=\"M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z\"\/><path d=\"M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z\"\/><\/>} \/>;\n const PenTool = (props) => <Icon {...props} path={<><path d=\"m12 19 7-7 3 3-7 7-3-3z\"\/><path d=\"m18 13-1.5-7.5L2 2l3.5 14.5L13 18l5-5z\"\/><path d=\"m2 2 7.586 7.586\"\/><circle cx=\"11\" cy=\"11\" r=\"2\"\/><\/>} \/>;\n const Rocket = (props) => <Icon {...props} path={<><path d=\"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z\"\/><path d=\"m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z\"\/><path d=\"M9 12H4s.55-3.03 2-4c1.62-1.1 4 0 4 0\"\/><path d=\"M12 15v5s3.03-.55 4-2c1.1-1.62 0-4 0-4\"\/><\/>} \/>;\n const CheckCircle2 = (props) => <Icon {...props} path={<><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m9 12 2 2 4-4\"\/><\/>} \/>;\n const Heart = (props) => <Icon {...props} path={<path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\"\/>} \/>;\n const Smile = (props) => <Icon {...props} path={<><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M8 14s1.5 2 4 2 4-2 4-2\"\/><line x1=\"9\" x2=\"9.01\" y1=\"9\" y2=\"9\"\/><line x1=\"15\" x2=\"15.01\" y1=\"9\" y2=\"9\"\/><\/>} \/>;\n const Globe = (props) => <Icon {...props} path={<><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"2\" x2=\"22\" y1=\"12\" y2=\"12\"\/><path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"\/><\/>} \/>;\n const Grid = (props) => <Icon {...props} path={<><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"\/><line x1=\"3\" x2=\"21\" y1=\"9\" y2=\"9\"\/><line x1=\"3\" x2=\"21\" y1=\"15\" y2=\"15\"\/><line x1=\"9\" x2=\"9\" y1=\"3\" y2=\"21\"\/><line x1=\"15\" x2=\"15\" y1=\"3\" y2=\"21\"\/><\/>} \/>;\n const Smartphone = (props) => <Icon {...props} path={<rect width=\"14\" height=\"20\" x=\"5\" y=\"2\" rx=\"2\" ry=\"2\"\/>} \/>;\n const Target = (props) => <Icon {...props} path={<><circle cx=\"12\" cy=\"12\" r=\"10\"\/><circle cx=\"12\" cy=\"12\" r=\"6\"\/><circle cx=\"12\" cy=\"12\" r=\"2\"\/><\/>} \/>;\n const User = (props) => <Icon {...props} path={<><path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"\/><circle cx=\"12\" cy=\"7\" r=\"4\"\/><\/>} \/>;\n const Mail = (props) => <Icon {...props} path={<><rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\"\/><path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\"\/><\/>} \/>;\n const X = (props) => <Icon {...props} path={<><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/>} \/>;\n const RotateCw = (props) => <Icon {...props} path={<><path d=\"M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8\"\/><path d=\"M21 3v5h-5\"\/><\/>} \/>;\n\n \/\/ --- DATOS ---\n\n const products = [\n {\n id: 1,\n title: \"Eduverso Design Kit\",\n subtitle: \"The Pitchtionary Edition\",\n description: \"El juego de prototipado r\u00e1pido e investigaci\u00f3n asistida por IA. Dibuja, construye y valida retos en 60 segundos con Leti, tu asistente virtual.\",\n image: \"https:\/\/i.ibb.co\/SDJrHYYY\/Gemini-Generated-Image-nxm4zmnxm4zmnxm4-1.png\", \n link: \"https:\/\/eduverso.club\/designkit\/\",\n color: \"orange\",\n badge: \"M\u00e1s Vendido\"\n },\n {\n id: 2,\n title: \"Eduverso Lean Kit\",\n subtitle: \"Simulaci\u00f3n de Negocios\",\n description: \"Inspirado en el Monopoly. Un tablero h\u00edbrido donde gestionas recursos operativos en el per\u00edmetro y validas tu modelo de negocio Lean Canvas en el centro.\",\n image: \"https:\/\/i.ibb.co\/zWM4DfvH\/1771190646937.png\",\n link: \"https:\/\/eduverso.club\/leankit\/\",\n color: \"blue\",\n badge: \"Nuevo Lanzamiento\"\n },\n {\n id: 3,\n title: \"Eduverso Scamper Kit\",\n subtitle: \"Innovation Mystery\",\n description: \"El juego de deducci\u00f3n estrat\u00e9gica estilo CLUE. Resuelve el 'Misterio de la Innovaci\u00f3n' combinando t\u00e9cnicas SCAMPER con tecnolog\u00edas habilitadoras.\",\n image: \"https:\/\/i.ibb.co\/rGpq1tmD\/Gemini-Generated-Image-13y63d13y63d13y6.png\",\n link: \"https:\/\/eduverso.club\/scamperkit\/\",\n color: \"cyan\",\n badge: \"En Pre-venta\"\n }\n ];\n\n const methodologies = [\n {\n title: \"Design Thinking\",\n desc: \"Un enfoque centrado en el humano para la resoluci\u00f3n creativa de problemas. Empatizar, Definir, Idear, Prototipar y Testear.\",\n icon: \"fas fa-lightbulb\",\n color: \"text-orange-600\",\n bg: \"bg-method-design\"\n },\n {\n title: \"Lean Startup\",\n desc: \"Construir, Medir, Aprender. Una metodolog\u00eda cient\u00edfica para desarrollar negocios y productos viables, reduciendo el riesgo de fracaso.\",\n icon: \"fas fa-chart-line\",\n color: \"text-blue-600\",\n bg: \"bg-method-lean\"\n },\n {\n title: \"SCAMPER\",\n desc: \"T\u00e9cnica de creatividad para mejorar productos o servicios. Sustituir, Combinar, Adaptar, Modificar, Poner en otro uso, Eliminar, Reorganizar.\",\n icon: \"fas fa-search\",\n color: \"text-cyan-600\",\n bg: \"bg-method-scamper\"\n }\n ];\n\n const projectScenarios = [\n {\n title: \"Comunidades Mujeres Tech\",\n desc: \"Empoderando el liderazgo femenino. Utilizamos el Eduverso Kit en hackathones y mentor\u00edas para visibilizar roles de decisi\u00f3n t\u00e9cnica y estrat\u00e9gica.\",\n icon: <Heart className=\"w-8 h-8 text-pink-600\" \/>,\n color: \"bg-pink-50 border-pink-100\"\n },\n {\n title: \"Comunidad Silver\",\n desc: \"Digitalizaci\u00f3n sin edad. Talleres donde la generaci\u00f3n senior traduce su experiencia de vida en soluciones digitales usando el tablero f\u00edsico.\",\n icon: <Smile className=\"w-8 h-8 text-blue-600\" \/>,\n color: \"bg-blue-50 border-blue-100\"\n },\n {\n title: \"J\u00f3venes Innovadores\",\n desc: \"Agentes de cambio del ma\u00f1ana. Programas donde nativos digitales aplican Design Thinking para resolver problemas reales de sus comunidades.\",\n icon: <Globe className=\"w-8 h-8 text-green-600\" \/>,\n color: \"bg-green-50 border-green-100\"\n }\n ];\n\n const labProducts = [\n {\n title: \"Business Canvas\",\n desc: \"Reimaginando el modelo de negocio. Bloques que conectan hip\u00f3tesis con validaci\u00f3n IA.\",\n icon: <Grid className=\"text-blue-500 w-8 h-8\" \/>,\n status: \"En Dise\u00f1o\",\n color: \"bg-blue-50 border-blue-100\"\n },\n {\n title: \"App Bit\u00e1cora\",\n desc: \"Aplicaci\u00f3n para escanear tableros y guardar el historial de tus sprints f\u00edsicos.\",\n icon: <Smartphone className=\"text-gray-800 w-8 h-8\" \/>,\n status: \"En Desarrollo\",\n color: \"bg-gray-50 border-gray-200\"\n },\n {\n title: \"User Journey Map\",\n desc: \"Mapas de suelo gigantes para caminar la experiencia del usuario.\",\n icon: <Target className=\"text-orange-500 w-8 h-8\" \/>,\n status: \"Concepto\",\n color: \"bg-orange-50 border-orange-100\"\n }\n ];\n\n \/\/ --- COMPONENTES ---\n\n const Hero = ({ onOpenModal }) => {\n return (\n <section className=\"relative pt-24 pb-20 lg:pt-32 lg:pb-32 overflow-hidden bg-white\">\n {\/* Background Gradients *\/}\n <div className=\"absolute top-0 right-0 -mr-40 -mt-40 w-[600px] h-[600px] rounded-full bg-purple-100\/50 blur-3xl\"><\/div>\n <div className=\"absolute bottom-0 left-0 -ml-40 -mb-40 w-[500px] h-[500px] rounded-full bg-yellow-100\/50 blur-3xl\"><\/div>\n\n <div className=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center\">\n \n <div className=\"inline-flex items-center px-4 py-2 rounded-full bg-purple-50 border border-purple-100 text-purple-700 font-medium text-sm mb-8 animate-fade-in-up shadow-sm\">\n <Clock size={16} className=\"mr-2\" \/>\n Ecosistema de Innovaci\u00f3n Tangible\n <\/div>\n \n <h1 className=\"text-5xl md:text-7xl font-extrabold text-gray-900 leading-tight mb-6 tracking-tight\">\n Dise\u00f1ando el futuro <br \/>\n <span className=\"text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-indigo-600\">\n tangible de la agilidad\n <\/span>\n <\/h1>\n \n {\/* INTRODUCCI\u00d3N DETALLADA *\/}\n <div className=\"mt-8 bg-white\/60 backdrop-blur-sm border border-gray-200 rounded-2xl p-8 shadow-lg text-left grid md:grid-cols-2 gap-8 animate-fade-in-up\">\n <div>\n <div className=\"flex items-center gap-3 mb-3\">\n <div className=\"p-2 bg-purple-100 rounded-lg text-purple-600\"><Grid className=\"w-5 h-5\"\/><\/div>\n <h3 className=\"font-bold text-gray-900 text-lg\">Herramientas F\u00edsicas<\/h3>\n <\/div>\n <p className=\"text-gray-600 text-sm leading-relaxed\">\n Transformamos salas de reuniones en centros de comando. Nuestros kits f\u00edsicos (tableros, cartas, tokens) sacan a los equipos de las pantallas y fomentan la colaboraci\u00f3n real y el pensamiento estrat\u00e9gico.\n <\/p>\n <\/div>\n <div>\n <div className=\"flex items-center gap-3 mb-3\">\n <div className=\"p-2 bg-blue-100 rounded-lg text-blue-600\"><Smartphone className=\"w-5 h-5\"\/><\/div>\n <h3 className=\"font-bold text-gray-900 text-lg\">Inteligencia Digital<\/h3>\n <\/div>\n <p className=\"text-gray-600 text-sm leading-relaxed\">\n Cada kit f\u00edsico se conecta con nuestra App. La tecnolog\u00eda valida las decisiones tomadas en el tablero, gestiona presupuestos en tiempo real y ofrece feedback instant\u00e1neo mediante IA.\n <\/p>\n <\/div>\n <\/div>\n\n <div className=\"flex flex-col sm:flex-row justify-center gap-4 mt-10\">\n <button onClick={onOpenModal} className=\"px-8 py-4 rounded-xl bg-gray-900 text-white font-bold text-lg hover:bg-black transition shadow-xl shadow-gray-900\/20 flex items-center justify-center group\">\n Unirse a la Comunidad <ChevronRight className=\"ml-1 group-hover:translate-x-1 transition\" \/>\n <\/button>\n <\/div>\n <\/div>\n <\/section>\n );\n };\n\n const Methodology = () => {\n const steps = [\n {\n step: \"01\",\n title: \"Aprende\",\n subtitle: \"Habilidades Agiles + Blandas + Duras\",\n description: \"Domina una nueva mentalidad. Aprende sobre metodolog\u00edas \u00c1giles, competencias blandas y habilidades t\u00e9cnicas.\",\n icon: <Brain className=\"w-8 h-8 text-white\" \/>,\n color: \"bg-purple-600\",\n lightColor: \"bg-purple-50\",\n textColor: \"text-purple-600\",\n checkList: [\"Design thinking\", \"Lean Canvas Model\", \"SCAMPER\"]\n },\n {\n step: \"02\",\n title: \"Crea\",\n subtitle: \"Colaboraci\u00f3n Tangible\",\n description: \"Materializa ideas en equipo o individual, crea proyectos de impacto que resuelven problemas reales.\",\n icon: <PenTool className=\"w-8 h-8 text-white\" \/>,\n color: \"bg-yellow-500\",\n lightColor: \"bg-yellow-50\",\n textColor: \"text-yellow-600\",\n checkList: [\"Productos M\u00ednimos Viables (MVP)\", \"Validaci\u00f3n Temprana\", \"Prototipado R\u00e1pido\"]\n },\n {\n step: \"03\",\n title: \"Transforma\",\n subtitle: \"Digitalizaci\u00f3n y Escala\",\n description: \"Transforma tu entorno, comunidad o equipos de trabajo.\",\n icon: <Rocket className=\"w-8 h-8 text-white\" \/>,\n color: \"bg-gray-900\",\n lightColor: \"bg-gray-50\",\n textColor: \"text-gray-900\",\n checkList: [\"Crea comunidades\", \"Ense\u00f1a\", \"Cultura \u00c1gil\"]\n }\n ];\n \n return (\n <section id=\"metodologia\" className=\"py-24 bg-white relative overflow-hidden border-t border-gray-100\">\n <div className=\"hidden lg:block absolute top-1\/2 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-gray-200 to-transparent -translate-y-1\/2 z-0\"><\/div>\n \n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10\">\n <div className=\"text-center mb-20\">\n <span className=\"text-purple-600 font-bold tracking-wider uppercase text-sm bg-purple-50 px-3 py-1 rounded-full\">Nuestro Prop\u00f3sito<\/span>\n <h2 className=\"mt-4 text-4xl md:text-5xl font-extrabold text-gray-900\">\n Aprende. Crea. Transforma.\n <\/h2>\n <p className=\"mt-4 max-w-3xl mx-auto text-xl text-gray-500 leading-relaxed\">\n Trata de aprender a apropiarse de las habilidades \u00e1giles, blandas y duras, para luego crear proyectos con prop\u00f3sito y transformar nuestro entorno.\n <\/p>\n <\/div>\n \n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n {steps.map((item, index) => (\n <div key={index} className=\"relative group\">\n <div className={`w-full bg-white rounded-3xl p-8 border border-gray-100 hover:border-transparent hover:shadow-[0_20px_50px_rgba(0,0,0,0.1)] transition-all duration-500 relative z-10 h-full flex flex-col`}>\n \n <div className={`absolute -top-5 left-8 px-4 py-2 rounded-xl text-sm font-bold text-white shadow-lg ${item.color} flex items-center gap-2`}>\n <span>Paso {item.step}<\/span>\n <\/div>\n\n <div className={`w-16 h-16 rounded-2xl ${item.lightColor} flex items-center justify-center mb-6 mt-4 group-hover:scale-110 transition duration-300`}>\n <div className={item.textColor.replace('text-', 'bg-').replace('600', '100') + ' p-2 rounded-lg'}>\n {item.icon}\n <\/div>\n <\/div>\n \n <h3 className=\"text-2xl font-bold text-gray-900 mb-1\">{item.title}<\/h3>\n <h4 className={`text-sm font-bold uppercase tracking-wider mb-4 ${item.textColor}`}>{item.subtitle}<\/h4>\n \n <p className=\"text-gray-500 leading-relaxed mb-6 flex-grow\">\n {item.description}\n <\/p>\n\n <ul className=\"space-y-2 pt-6 border-t border-gray-50\">\n {item.checkList.map((point, i) => (\n <li key={i} className=\"flex items-center text-sm text-gray-600 font-medium\">\n <CheckCircle2 className={`w-4 h-4 mr-2 ${item.textColor}`} \/> {point}\n <\/li>\n ))}\n <\/ul>\n <\/div>\n <\/div>\n ))}\n <\/div>\n <\/div>\n <\/section>\n );\n };\n\n \/\/ \ud83d\udfe2 NUEVA SECCI\u00d3N DE METODOLOG\u00cdAS \ud83d\udfe2\n const MethodologiesSection = () => {\n return (\n <section id=\"metodologias-base\" className=\"py-24 bg-white border-t border-gray-100\">\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div className=\"text-center mb-16\">\n <h2 className=\"text-3xl font-extrabold text-gray-900\">Metodolog\u00edas Base<\/h2>\n <p className=\"mt-4 text-lg text-gray-500\">Nuestros kits no son solo juegos; son sistemas de aprendizaje basados en est\u00e1ndares globales.<\/p>\n <\/div>\n \n <div className=\"grid md:grid-cols-3 gap-8\">\n {methodologies.map((method, idx) => (\n <div key={idx} className={`p-8 rounded-2xl ${method.bg} hover:shadow-lg transition duration-300`}>\n <div className={`mb-4 text-4xl ${method.color}`}>\n <i className={method.icon}><\/i>\n <\/div>\n <h3 className=\"text-xl font-bold text-gray-900 mb-3\">{method.title}<\/h3>\n <p className=\"text-gray-600 text-sm leading-relaxed\">{method.desc}<\/p>\n <\/div>\n ))}\n <\/div>\n <\/div>\n <\/section>\n );\n };\n\n \/\/ \ud83d\udfe2 SECCI\u00d3N DE PRODUCTOS \ud83d\udfe2\n const ProductsSection = () => {\n const getColorClasses = (color) => {\n const map = {\n orange: { badge: 'bg-orange-600', sub: 'text-orange-600', btn: 'bg-orange-600 hover:bg-orange-700 shadow-orange-200' },\n blue: { badge: 'bg-blue-600', sub: 'text-blue-600', btn: 'bg-blue-600 hover:bg-blue-700 shadow-blue-200' },\n cyan: { badge: 'bg-cyan-600', sub: 'text-cyan-600', btn: 'bg-cyan-600 hover:bg-cyan-700 shadow-cyan-200' },\n purple: { badge: 'bg-purple-600', sub: 'text-purple-600', btn: 'bg-purple-600 hover:bg-purple-700 shadow-purple-200' }\n };\n return map[color] || map.purple;\n };\n\n return (\n <section id=\"productos\" className=\"py-24 bg-gray-50 border-t border-gray-200\">\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div className=\"text-center mb-16\">\n <h2 className=\"text-4xl font-extrabold text-gray-900\">Nuestros Productos<\/h2>\n <p className=\"mt-4 text-xl text-gray-500\">Herramientas dise\u00f1adas para potenciar la innovaci\u00f3n en tu organizaci\u00f3n.<\/p>\n <\/div>\n\n <div className=\"grid md:grid-cols-3 gap-8\">\n {products.map((product) => {\n const styles = getColorClasses(product.color);\n return (\n <div key={product.id} className=\"bg-white rounded-3xl overflow-hidden shadow-xl border border-gray-100 hover:shadow-2xl transition-all duration-300 flex flex-col group\">\n {\/* Imagen del Producto *\/}\n <div className=\"h-56 overflow-hidden relative bg-gray-100 flex items-center justify-center\">\n <div className={`absolute top-4 right-4 text-white text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider z-10 ${styles.badge}`}>\n {product.badge}\n <\/div>\n <img \n src={product.image} \n alt={product.title} \n className=\"w-full h-full object-cover transform group-hover:scale-105 transition duration-500\"\n \/>\n <\/div>\n \n {\/* Contenido *\/}\n <div className=\"p-8 flex flex-col flex-grow\">\n <h3 className=\"text-xl font-bold text-gray-900 mb-2\">{product.title}<\/h3>\n <h4 className={`text-xs font-bold uppercase tracking-wider mb-4 ${styles.sub}`}>\n {product.subtitle}\n <\/h4>\n <p className=\"text-gray-500 text-sm mb-8 leading-relaxed flex-grow\">\n {product.description}\n <\/p>\n \n <a href={product.link} className={`w-full py-3 rounded-xl font-bold text-center text-white text-sm transition shadow-lg transform active:scale-95 ${styles.btn}`}>\n Ver Detalles\n <\/a>\n <\/div>\n <\/div>\n );\n })}\n <\/div>\n <\/div>\n <\/section>\n );\n };\n\n const UseCases = () => {\n return (\n <section id=\"comunidades\" className=\"py-24 bg-gray-900 text-white\">\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div className=\"text-center mb-16\">\n <span className=\"text-purple-400 font-bold tracking-wide uppercase text-sm mb-2 block\">Impacto Social<\/span>\n <h2 className=\"text-3xl font-bold text-white\">Impulsando Comunidades<\/h2>\n <p className=\"mt-4 text-gray-400\">Herramientas adaptables para transformar la educaci\u00f3n y la inclusi\u00f3n.<\/p>\n <\/div>\n\n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n {projectScenarios.map((useCase, idx) => (\n <div key={idx} className={`p-8 rounded-2xl bg-gray-800 border border-gray-700 hover:border-purple-500 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300`}>\n <div className=\"mb-6 p-3 bg-gray-700 rounded-xl shadow-sm w-fit\">\n {useCase.icon}\n <\/div>\n <h3 className=\"text-xl font-bold text-white mb-3\">{useCase.title}<\/h3>\n <p className=\"text-gray-400 text-sm leading-relaxed mb-6\">\n {useCase.desc}\n <\/p>\n <\/div>\n ))}\n <\/div>\n <\/div>\n <\/section>\n );\n };\n\n const DesignLab = () => {\n return (\n <section id=\"lab\" className=\"py-24 bg-slate-50 border-t border-gray-200 relative overflow-hidden\">\n <div className=\"absolute inset-0 opacity-[0.03]\" style={{ backgroundImage: 'radial-gradient(#000 1px, transparent 1px)', backgroundSize: '20px 20px' }}><\/div>\n \n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10\">\n <div className=\"text-center mb-16\">\n <span className=\"text-blue-600 font-bold tracking-wide uppercase text-sm mb-2 block\">R&D - Futuro<\/span>\n <h2 className=\"text-3xl font-bold text-gray-900\">Eduverso Design Lab<\/h2>\n <p className=\"mt-4 text-gray-500 max-w-2xl mx-auto\">\n Nuestro equipo est\u00e1 cocinando las pr\u00f3ximas herramientas. Un vistazo exclusivo a lo que viene.\n <\/p>\n <\/div>\n \n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n {labProducts.map((item, index) => (\n <div key={index} className={`relative rounded-2xl p-8 border border-dashed border-gray-300 bg-white hover:border-blue-400 transition-all duration-300 hover:shadow-lg group`}>\n <div className=\"absolute top-4 right-4 bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-xs font-bold shadow-sm border border-blue-100\">\n {item.status}\n <\/div>\n \n <div className=\"mb-6 bg-gray-50 w-16 h-16 rounded-2xl flex items-center justify-center shadow-sm group-hover:bg-blue-50 transition-colors\">\n {item.icon}\n <\/div>\n \n <h3 className=\"text-xl font-bold text-gray-900 mb-3\">{item.title}<\/h3>\n <p className=\"text-gray-600 leading-relaxed mb-6 text-sm\">{item.desc}<\/p>\n \n <div className=\"flex items-center text-gray-400 text-sm font-medium\">\n <Clock size={14} className=\"mr-2\" \/> \n {item.status === \"En Dise\u00f1o\" ? \"Estimado Q3 2026\" : \"Fecha por definir\"}\n <\/div>\n <\/div>\n ))}\n <\/div>\n <\/div>\n <\/section>\n );\n };\n\n const WaitlistModal = ({ isOpen, onClose }) => {\n const [status, setStatus] = useState(null);\n\n if (!isOpen) return null;\n\n const handleSubmit = (e) => {\n e.preventDefault();\n setStatus('sending');\n const form = e.target;\n const data = new FormData(form);\n\n fetch(form.action, {\n method: form.method,\n body: data,\n headers: { 'Accept': 'application\/json' }\n }).then(response => {\n if (response.ok) {\n setStatus('success');\n form.reset();\n } else {\n setStatus('error');\n }\n }).catch(error => {\n setStatus('error');\n });\n };\n\n return (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4 modal-overlay animate-fade-in-up\">\n <div className=\"bg-white rounded-2xl shadow-2xl w-full max-w-md relative overflow-hidden\">\n <button onClick={onClose} className=\"absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition\">\n <X className=\"w-6 h-6\" \/>\n <\/button>\n \n <div className=\"p-8\">\n <h3 className=\"text-2xl font-bold text-center text-gray-900 mb-2\">\u00danete a la Comunidad<\/h3>\n <p className=\"text-center text-gray-500 mb-6 text-sm\">\n Recibe noticias sobre lanzamientos y eventos.\n <\/p>\n\n {status === 'success' ? (\n <div className=\"bg-green-50 border border-green-100 rounded-xl p-6 text-center\">\n <div className=\"w-12 h-12 bg-green-100 rounded-full flex items-center justify-center text-green-600 mx-auto mb-3\">\n <CheckCircle2 className=\"w-6 h-6\" \/>\n <\/div>\n <h4 className=\"text-green-800 font-bold mb-1\">\u00a1Gracias por unirte!<\/h4>\n <button onClick={onClose} className=\"mt-4 text-sm font-bold text-green-700 hover:underline\">Cerrar<\/button>\n <\/div>\n ) : (\n <form action=\"https:\/\/formsubmit.co\/learningforti.app@gmail.com\" method=\"POST\" onSubmit={handleSubmit} className=\"space-y-4\">\n <input type=\"hidden\" name=\"_subject\" value=\"Nuevo registro Comunidad Eduverso\" \/>\n <input type=\"hidden\" name=\"_captcha\" value=\"false\" \/>\n <div>\n <label className=\"block text-sm font-bold text-gray-700 mb-1\">Nombre<\/label>\n <input type=\"text\" name=\"name\" required className=\"w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 outline-none\" placeholder=\"Tu nombre\" \/>\n <\/div>\n <div>\n <label className=\"block text-sm font-bold text-gray-700 mb-1\">Correo Electr\u00f3nico<\/label>\n <input type=\"email\" name=\"email\" required className=\"w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-500 outline-none\" placeholder=\"hola@ejemplo.com\" \/>\n <\/div>\n <button type=\"submit\" disabled={status === 'sending'} className=\"w-full bg-gray-900 text-white font-bold py-3 rounded-xl hover:bg-purple-900 transition flex items-center justify-center disabled:opacity-50\">\n {status === 'sending' ? <span className=\"flex items-center\"><RotateCw className=\"w-5 h-5 mr-2 animate-spin\" \/> Enviando...<\/span> : \"Apuntarme ahora\"}\n <\/button>\n <\/form>\n )}\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n const App = () => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n return (\n <div className=\"font-sans antialiased text-gray-900 bg-white selection:bg-purple-100 selection:text-purple-900\">\n <Hero onOpenModal={() => setIsModalOpen(true)} \/>\n <Methodology \/>\n <MethodologiesSection \/>\n <ProductsSection \/>\n <UseCases \/>\n <DesignLab \/>\n <WaitlistModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} \/>\n <\/div>\n );\n };\n\n \/\/ Renderizado\n const root = ReactDOM.createRoot(document.getElementById('root'));\n root.render(<App \/>);\n\n <\/script>\n<\/body>\n<\/html>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Eduverso – Ecosistema \u00c1gil<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-697","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/eduverso.club\/index.php?rest_route=\/wp\/v2\/pages\/697","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eduverso.club\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eduverso.club\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eduverso.club\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/eduverso.club\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=697"}],"version-history":[{"count":7,"href":"https:\/\/eduverso.club\/index.php?rest_route=\/wp\/v2\/pages\/697\/revisions"}],"predecessor-version":[{"id":716,"href":"https:\/\/eduverso.club\/index.php?rest_route=\/wp\/v2\/pages\/697\/revisions\/716"}],"wp:attachment":[{"href":"https:\/\/eduverso.club\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}