Eduverso Design Kit | The Pitchtionary Edition<\/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 href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600;800&display=swap\" rel=\"stylesheet\">\n\n <style>\n body { font-famil<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Eduverso Design Kit | The Pitchtionary Edition<\/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 href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600;800&display=swap\" rel=\"stylesheet\">\n\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n <style>\n body { font-family: 'Inter', sans-serif; scroll-behavior: smooth; }\n \n \/* Animaciones *\/\n .fade-in { animation: fadeIn 1s ease-out; }\n .float { animation: float 6s ease-in-out infinite; }\n \n @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }\n @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } }\n\n \/* Colores de Fases (Insertos) *\/\n .phase-blue { border-color: #3b82f6; background-color: #eff6ff; color: #1e3a8a; }\n .phase-green { border-color: #22c55e; background-color: #f0fdf4; color: #14532d; }\n .phase-yellow { border-color: #eab308; background-color: #fefce8; color: #713f12; }\n .phase-orange { border-color: #f97316; background-color: #fff7ed; color: #7c2d12; }\n .phase-red { border-color: #ef4444; background-color: #fef2f2; color: #7f1d1d; }\n\n \/* Modal *\/\n #modal { transition: opacity 0.3s ease; }\n #modal.hidden { opacity: 0; pointer-events: none; }\n #modal:not(.hidden) { opacity: 1; pointer-events: auto; }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50 text-slate-900\">\n\n <div id=\"root\"><\/div>\n\n <script type=\"text\/babel\">\n const { useState } = 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 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 ArrowLeft = (props) => <Icon {...props} path={<><line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"\/><polyline points=\"12 19 5 12 12 5\"\/><\/>} \/>;\n\n \/\/ --- DATOS DEL DESIGN KIT ---\n \n const phases = [\n { \n title: \"1. Empatizar\", \n subtitle: \"Comprender al Usuario\",\n desc: \"El equipo utiliza los dados y Leti para investigar profundamente el problema. Se busca entender necesidades reales, no suposiciones.\", \n tool: \"Inserto Azul\",\n details: \"Entregable: Mapa de Empat\u00eda o User Persona validado por IA.\",\n color: \"phase-blue\", \n icon: \"fas fa-eye\" \n },\n { \n title: \"2. Definir\", \n subtitle: \"Encuadrar el Problema\",\n desc: \"Fase de convergencia. El 'Analista' lidera la s\u00edntesis de la informaci\u00f3n para redactar el reto central que el equipo resolver\u00e1.\", \n tool: \"Inserto Verde\",\n details: \"Entregable: Declaraci\u00f3n del Problema (Point of View).\",\n color: \"phase-green\", \n icon: \"fas fa-bullseye\" \n },\n { \n title: \"3. Idear\", \n subtitle: \"Lluvia de Soluciones\",\n desc: \"Divergencia total. Se usan los dados morados para a\u00f1adir restricciones creativas y generar cientos de ideas en poco tiempo.\", \n tool: \"Inserto Amarillo\",\n details: \"Entregable: Matriz de Priorizaci\u00f3n de Ideas.\",\n color: \"phase-yellow\", \n icon: \"far fa-lightbulb\" \n },\n { \n title: \"4. Prototipar\", \n subtitle: \"Materializar la Idea\",\n desc: \"El coraz\u00f3n del 'Pitchtionary'. El 'Prototipador' tiene 60s para construir una versi\u00f3n f\u00edsica de la soluci\u00f3n con los bloques de acr\u00edlico.\", \n tool: \"Inserto Naranja\",\n details: \"Entregable: Prototipo de Baja Fidelidad (3D\/Dibujo).\",\n color: \"phase-orange\", \n icon: \"fas fa-layer-group\" \n },\n { \n title: \"5. Testear\", \n subtitle: \"Validaci\u00f3n Final\",\n desc: \"La hora de la verdad. El 'Validador' presenta el prototipo a Leti, quien simula ser un usuario cr\u00edtico y da feedback.\", \n tool: \"Inserto Rojo\",\n details: \"Entregable: Malla Receptora de Informaci\u00f3n.\",\n color: \"phase-red\", \n icon: \"fas fa-flag-checkered\" \n }\n ];\n\n const roles = [\n { name: \"Prototipador\", desc: \"El constructor. Materializa las ideas dibujando o usando los bloques 3D.\", icon: \"fas fa-pen-nib\", color: \"text-orange-500\" },\n { name: \"Tecno-Investigador\", desc: \"El enlace digital. Recibe los prompts de Leti y busca datos en tiempo real.\", icon: \"fas fa-search\", color: \"text-purple-500\" },\n { name: \"Analista\", desc: \"El cerebro l\u00f3gico. Sintetiza la informaci\u00f3n dispersa para el equipo.\", icon: \"fas fa-chart-pie\", color: \"text-blue-500\" },\n { name: \"Validador\", desc: \"El guardi\u00e1n de calidad. Asegura que la soluci\u00f3n cumpla los criterios de \u00e9xito.\", icon: \"fas fa-check-circle\", color: \"text-green-500\" }\n ];\n\n const projects = [\n {\n title: \"Dise\u00f1o de Apps M\u00f3viles\",\n desc: \"Ideal para prototipar flujos de usuario (UX\/UI). Usa las pizarras para dibujar pantallas y los dados para simular errores de sistema.\",\n icon: \"fas fa-mobile-alt\",\n tag: \"Producto Digital\"\n },\n {\n title: \"Innovaci\u00f3n en Servicios\",\n desc: \"Redise\u00f1a la experiencia de un restaurante o banco. Usa los bloques de acr\u00edlico para representar espacios f\u00edsicos y recorridos.\",\n icon: \"fas fa-concierge-bell\",\n tag: \"Service Design\"\n },\n {\n title: \"Soluciones de Impacto Social\",\n desc: \"Aborda problemas complejos como el reciclaje o la educaci\u00f3n. La fase de 'Empatizar' con Leti es crucial para entender el contexto real.\",\n icon: \"fas fa-hand-holding-heart\",\n tag: \"Social Tech\"\n }\n ];\n\n const components = [\n { name: \"Tablero Universal Blanco\", desc: \"Base minimalista de alta resistencia para colocar los insertos.\" },\n { name: \"5 Insertos de Fase\", desc: \"L\u00e1minas de acr\u00edlico trasl\u00facido (Azul, Verde, Amarillo, Naranja, Rojo).\" },\n { name: \"Set Bloques Acr\u00edlico\", desc: \"Piezas geom\u00e9tricas para construcci\u00f3n de prototipos 3D.\" },\n { name: \"Dados Morados\", desc: \"Para avance y modificadores de dificultad del turno.\" },\n { name: \"Leti (AI Assistant)\", desc: \"La compa\u00f1era digital para validaci\u00f3n, retos y cron\u00f3metro.\" },\n { name: \"Pizarras y Marcadores\", desc: \"Para comunicaci\u00f3n visual r\u00e1pida durante los retos de 60s.\" }\n ];\n\n \/\/ --- COMPONENTES DE UI ---\n\n const WaitlistModal = ({ isOpen, onClose }) => {\n if (!isOpen) return null;\n return (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4 modal-overlay fade-in\">\n <div className=\"bg-white rounded-2xl shadow-2xl w-full max-w-md relative overflow-hidden transform transition-all scale-100\">\n <button onClick={onClose} className=\"absolute top-4 right-4 text-gray-400 hover:text-gray-900\"><X className=\"w-6 h-6\"\/><\/button>\n <div className=\"p-8\">\n <div className=\"text-center mb-6\">\n <div className=\"w-16 h-16 bg-purple-100 text-purple-600 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl\">\n <i class=\"fas fa-rocket\"><\/i>\n <\/div>\n <h3 className=\"text-2xl font-bold text-slate-900\">Reservar Design Kit<\/h3>\n <p className=\"text-gray-500 text-sm mt-2\">\u00danete a la lista de espera para la edici\u00f3n \"The Pitchtionary\".<\/p>\n <\/div>\n <form action=\"https:\/\/formsubmit.co\/learningforti.app@gmail.com\" method=\"POST\" className=\"space-y-4\">\n <input type=\"hidden\" name=\"_subject\" value=\"Inter\u00e9s Eduverso DESIGN KIT\" \/>\n <input type=\"hidden\" name=\"_captcha\" value=\"false\" \/>\n \n <div>\n <label className=\"block text-xs font-bold text-gray-700 uppercase mb-1\">Nombre Completo<\/label>\n <input type=\"text\" name=\"name\" required className=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 outline-none transition\" placeholder=\"Tu nombre\" \/>\n <\/div>\n <div>\n <label className=\"block text-xs font-bold text-gray-700 uppercase 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-lg focus:ring-2 focus:ring-purple-600 outline-none transition\" placeholder=\"tu@email.com\" \/>\n <\/div>\n <button className=\"w-full bg-slate-900 text-white font-bold py-3 rounded-lg hover:bg-purple-700 transition shadow-lg mt-2\">Confirmar Inter\u00e9s<\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n const Hero = ({ onOpenModal }) => {\n return (\n <section className=\"bg-white pt-12 pb-24 border-b border-gray-100 relative overflow-hidden\">\n <div className=\"absolute top-0 right-0 w-[500px] h-[500px] bg-orange-50 rounded-full blur-3xl opacity-60 -z-10\"><\/div>\n <div className=\"absolute bottom-0 left-0 w-[500px] h-[500px] bg-purple-50 rounded-full blur-3xl opacity-60 -z-10\"><\/div>\n\n <div className=\"max-w-7xl mx-auto px-4 grid md:grid-cols-2 gap-16 items-center\">\n <div className=\"text-center md:text-left fade-in\">\n <div className=\"inline-flex items-center bg-orange-50 text-orange-700 px-4 py-2 rounded-full text-xs font-bold mb-6 border border-orange-100 uppercase tracking-wide shadow-sm\">\n <i className=\"fas fa-pencil-alt mr-2\"><\/i> The Pitchtionary Edition\n <\/div>\n <h1 className=\"text-5xl lg:text-7xl font-extrabold text-slate-900 mb-6 leading-tight\">\n Dise\u00f1a y Dibuja tu idea con <br\/>\n <span className=\"text-transparent bg-clip-text bg-gradient-to-r from-orange-500 to-purple-600\">Eduverso Design Kit<\/span>\n <\/h1>\n <p className=\"text-xl text-gray-600 mb-10 leading-relaxed max-w-lg mx-auto md:mx-0\">\n El juego de prototipado r\u00e1pido e investigaci\u00f3n asistida por IA. Convierte la teor\u00eda del <strong>Design Thinking<\/strong> en una pr\u00e1ctica l\u00fadica y tangible, guiada por <strong>Leti<\/strong>, tu asistente virtual.\n <\/p>\n <div className=\"flex flex-col sm:flex-row gap-4 justify-center md:justify-start\">\n <button onClick={onOpenModal} className=\"bg-slate-900 text-white px-10 py-4 rounded-xl font-bold text-lg hover:bg-slate-800 transition shadow-xl hover:-translate-y-1 transform duration-200\">\n Reservar Kit\n <\/button>\n <a href=\"#mecanica\" className=\"px-10 py-4 rounded-xl text-slate-600 font-bold border border-gray-200 hover:border-purple-500 hover:text-purple-600 transition flex items-center justify-center bg-white\">\n Ver Mec\u00e1nica\n <\/a>\n <\/div>\n <\/div>\n <div className=\"relative flex justify-center fade-in delay-200\">\n <div className=\"relative rounded-3xl overflow-hidden shadow-2xl border border-gray-100 bg-white p-2 transform rotate-1 hover:rotate-0 transition duration-500 w-full max-w-lg\">\n {\/* FOTO PRINCIPAL: CAJA DEL KIT *\/}\n <img decoding=\"async\" \n src=\"https:\/\/i.ibb.co\/rRXwSqHy\/tablero-kit.jpg\" \n alt=\"Caja Eduverso Design Kit\" \n className=\"w-full h-auto object-cover rounded-2xl\"\n \/>\n <div className=\"absolute bottom-6 right-6 bg-white\/90 backdrop-blur px-4 py-2 rounded-lg shadow-lg flex items-center gap-2 border border-gray-200\">\n <i className=\"fas fa-robot text-purple-600 text-xl\"><\/i>\n <div>\n <p className=\"text-[10px] font-bold text-gray-400 uppercase leading-none\">Powered by<\/p>\n <p className=\"text-sm font-bold text-slate-900 leading-none\">Leti AI<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n );\n };\n\n const Methodology = () => {\n return (\n <section className=\"py-24 bg-white relative\">\n <div className=\"max-w-7xl mx-auto px-4\">\n <div className=\"text-center mb-20\">\n <h2 className=\"text-4xl font-extrabold text-slate-900 mb-4\">Tu Ruta de Design Thinking<\/h2>\n <p className=\"text-xl text-gray-500 max-w-3xl mx-auto\">\n 5 Fases representadas por 5 insertos de acr\u00edlico de colores. El objetivo es simple: Desbloquear cada fase para llegar a la \"Meta del Mercado\".\n <\/p>\n <\/div>\n <div className=\"grid gap-6 md:grid-cols-2 lg:grid-cols-5\">\n {phases.map((phase, idx) => (\n <div key={idx} className={`p-6 rounded-2xl border-t-8 shadow-md ${phase.color} transition hover:-translate-y-2 hover:shadow-xl bg-white h-full flex flex-col`}>\n <div className=\"mb-4 inline-flex items-center justify-center w-12 h-12 bg-white rounded-full shadow-sm mx-auto\">\n <i className={`${phase.icon} text-xl`}><\/i>\n <\/div>\n <h4 className=\"font-bold text-lg text-slate-900 mb-2\">{phase.title}<\/h4>\n <p className=\"text-sm font-bold text-gray-500 mb-2 uppercase tracking-wide\">{phase.subtitle}<\/p>\n <p className=\"text-sm text-gray-600 leading-relaxed mb-4 flex-grow\">{phase.desc}<\/p>\n <div className=\"pt-4 border-t border-gray-100 mt-auto\">\n <p className=\"text-xs font-bold text-slate-400 uppercase mb-1\">Herramienta:<\/p>\n <p className=\"text-xs text-slate-700 font-bold mb-2\">{phase.tool}<\/p>\n <p className=\"text-[10px] text-gray-500 italic bg-white\/50 px-2 py-1 rounded border border-gray-100\">{phase.details}<\/p>\n <\/div>\n <\/div>\n ))}\n <\/div>\n <\/div>\n <\/section>\n );\n };\n\n const Mechanics = () => {\n return (\n <section id=\"mecanica\" className=\"py-24 bg-gray-50 border-y border-gray-200\">\n <div className=\"max-w-6xl mx-auto px-4\">\n <div className=\"text-center mb-20\">\n <span className=\"text-purple-600 font-bold uppercase tracking-wider text-sm mb-2 block\">Mec\u00e1nica de Juego<\/span>\n <h2 className=\"text-4xl font-extrabold text-slate-900\">\u00bfC\u00f3mo se juega al Pitchtionary?<\/h2>\n <p className=\"text-xl text-gray-500 mt-4 max-w-2xl mx-auto\">Una carrera contra el tiempo para comunicar, investigar y validar.<\/p>\n <\/div>\n\n <div className=\"grid lg:grid-cols-2 gap-16 items-center\">\n <div className=\"space-y-12\">\n <div className=\"flex gap-6\">\n <div className=\"w-16 h-16 bg-purple-100 rounded-2xl flex items-center justify-center text-purple-600 flex-shrink-0 font-bold text-2xl shadow-sm border border-purple-200\">1<\/div>\n <div>\n <h3 className=\"font-bold text-slate-900 text-xl mb-2\">El Reto Visual (60s)<\/h3>\n <p className=\"text-gray-600 leading-relaxed\">\n Al caer en una casilla, <strong>Leti<\/strong> (la App) env\u00eda un concepto t\u00e9cnico secreto al \"Prototipador\". Tiene solo 60 segundos para que su equipo lo adivine usando <strong>dibujos en la pizarra<\/strong> o construyendo con los <strong>bloques 3D<\/strong>. \u00a1Prohibido hablar!\n <\/p>\n <\/div>\n <\/div>\n <div className=\"flex gap-6\">\n <div className=\"w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center text-blue-600 flex-shrink-0 font-bold text-2xl shadow-sm border border-blue-200\">2<\/div>\n <div>\n <h3 className=\"font-bold text-slate-900 text-xl mb-2\">Investigaci\u00f3n Asistida<\/h3>\n <p className=\"text-gray-600 leading-relaxed\">\n Si el equipo adivina a tiempo, ganan un \"Prompt de Investigaci\u00f3n\". El \"Tecno-Investigador\" usa este prompt con la IA para obtener datos reales del mercado o usuario y avanzar en el tablero.\n <\/p>\n <\/div>\n <\/div>\n <div className=\"flex gap-6\">\n <div className=\"w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center text-green-600 flex-shrink-0 font-bold text-2xl shadow-sm border border-green-200\">3<\/div>\n <div>\n <h3 className=\"font-bold text-slate-900 text-xl mb-2\">Muros de Validaci\u00f3n<\/h3>\n <p className=\"text-gray-600 leading-relaxed\">\n Para desbloquear la siguiente fase (ej. pasar de Azul a Verde), el equipo debe presentar un entregable tangible a Leti. Solo si la IA valida la calidad y coherencia, pueden cambiar el <strong>inserto de color<\/strong> f\u00edsico del tablero.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div className=\"relative\">\n {\/* FOTO DEL TABLERO CON COMPONENTES *\/}\n <div className=\"rounded-3xl overflow-hidden shadow-2xl border border-gray-200 bg-white group\">\n <img decoding=\"async\" \n src=\"https:\/\/i.ibb.co\/V0z0hCzC\/Gemini-Generated-Image-uzlcqduzlcqduzlc.png\" \n alt=\"Tablero Eduverso Design Kit\" \n className=\"w-full h-auto object-cover transform group-hover:scale-105 transition duration-700\"\n \/>\n {\/* Overlay al hacer hover *\/}\n <div className=\"absolute inset-0 bg-black\/40 opacity-0 group-hover:opacity-100 transition duration-300 flex items-center justify-center\">\n <span className=\"text-white font-bold border border-white px-6 py-3 rounded-full backdrop-blur-md\">Ver Detalle del Tablero<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n );\n };\n\n const Projects = () => {\n return (\n <section className=\"py-24 bg-slate-900 text-white\">\n <div className=\"max-w-7xl mx-auto px-4\">\n <div className=\"text-center mb-16\">\n <h2 className=\"text-3xl font-bold text-white\">Proyectos de Impacto<\/h2>\n <p className=\"text-slate-400 mt-2 text-lg\">\u00bfQu\u00e9 puedes construir con este kit?<\/p>\n <\/div>\n <div className=\"grid md:grid-cols-3 gap-8\">\n {projects.map((proj, idx) => (\n <div key={idx} className=\"bg-slate-800 p-8 rounded-2xl border border-slate-700 hover:border-purple-500 transition duration-300\">\n <div className=\"mb-6 p-3 bg-slate-700 rounded-xl w-fit shadow-sm text-purple-400 text-2xl\">\n <i className={proj.icon}><\/i>\n <\/div>\n <span className=\"text-xs font-bold uppercase tracking-wider text-purple-400 mb-2 block\">{proj.tag}<\/span>\n <h4 className=\"font-bold text-xl text-white mb-3\">{proj.title}<\/h4>\n <p className=\"text-slate-400 text-sm leading-relaxed\">{proj.desc}<\/p>\n <\/div>\n ))}\n <\/div>\n <\/div>\n <\/section>\n );\n };\n\n const Roles = () => {\n return (\n <section className=\"py-24 bg-white\">\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div className=\"text-center mb-12\">\n <h2 className=\"text-2xl font-bold text-slate-900\">Tokens de Rol<\/h2>\n <p className=\"text-gray-500 mt-2 text-lg\">Roles especializados para la din\u00e1mica Pitchtionary<\/p>\n <\/div>\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8\">\n {roles.map((role, idx) => (\n <div key={idx} className=\"bg-gray-50 p-8 rounded-2xl border border-gray-100 text-center hover:bg-white hover:shadow-xl hover:-translate-y-1 transition duration-300 group\">\n <div className={`mb-6 inline-block p-4 bg-white rounded-full shadow-md text-3xl ${role.color} group-hover:scale-110 transition`}>\n <i className={role.icon}><\/i>\n <\/div>\n <h4 className=\"font-bold text-xl text-slate-900 mb-2\">{role.name}<\/h4>\n <p className=\"text-sm text-gray-500 leading-relaxed\">{role.desc}<\/p>\n <\/div>\n ))}\n <\/div>\n <\/div>\n <\/section>\n );\n };\n\n const Components = () => {\n return (\n <section className=\"py-24 bg-gray-50 border-t border-gray-200\">\n <div className=\"max-w-5xl mx-auto px-4\">\n <h2 className=\"text-3xl font-extrabold mb-12 text-center text-slate-900\">Contenido de la Caja<\/h2>\n \n <div className=\"bg-white rounded-3xl p-10 border border-gray-200 shadow-xl grid md:grid-cols-2 gap-x-16 gap-y-8 relative overflow-hidden\">\n {\/* Decoraci\u00f3n *\/}\n <div className=\"absolute top-0 right-0 w-32 h-32 bg-orange-100 rounded-bl-full -mr-16 -mt-16 z-0\"><\/div>\n\n {components.map((item, idx) => (\n <div key={idx} className=\"flex items-start gap-4 border-b border-gray-100 pb-4 last:border-0 md:last:border-b md:nth-last-child-2:border-0 relative z-10\">\n <div className=\"w-8 h-8 rounded-lg bg-orange-50 flex items-center justify-center text-orange-500 flex-shrink-0 mt-1\">\n <i className=\"fas fa-check text-xs\"><\/i>\n <\/div>\n <div>\n <strong className=\"block text-slate-900 text-base mb-1\">{item.name}<\/strong>\n <span className=\"text-gray-500 text-sm leading-snug block\">{item.desc}<\/span>\n <\/div>\n <\/div>\n ))}\n \n {\/* Foto Equipo (Integrada en la lista) *\/}\n <div className=\"md:col-span-2 mt-8 rounded-2xl overflow-hidden shadow-lg border border-gray-200\">\n <img decoding=\"async\" src=\"https:\/\/i.ibb.co\/rRXwSqHy\/tablero-kit.jpg\" alt=\"Equipo jugando\" className=\"w-full h-64 object-cover object-center\"\/>\n <div className=\"bg-slate-900 text-white p-4 text-center text-sm font-bold\">\n Dise\u00f1ado para equipos de 3 a 6 personas\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n );\n };\n\n const Cta = ({ onOpenModal }) => {\n return (\n <section className=\"py-24 bg-white text-center\">\n <div className=\"max-w-3xl mx-auto px-4\">\n <h2 className=\"text-4xl font-extrabold text-slate-900 mb-6\">\u00bfListo para prototipar el futuro?<\/h2>\n <p className=\"text-xl text-gray-500 mb-10\">Convierte la teor\u00eda en pr\u00e1ctica l\u00fadica y tangible hoy mismo.<\/p>\n <button onClick={onOpenModal} className=\"bg-purple-600 text-white px-12 py-5 rounded-xl font-bold text-xl hover:bg-purple-700 transition shadow-2xl hover:-translate-y-1 transform duration-200 flex items-center gap-3 mx-auto\">\n <i className=\"fas fa-rocket\"><\/i> Reservar Design Kit\n <\/button>\n <\/div>\n <\/section>\n );\n };\n\n const App = () => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n return (\n <div className=\"min-h-screen flex flex-col bg-white\">\n {\/* NAV SIMPLE DE RETORNO *\/}\n <nav className=\"absolute top-0 left-0 w-full z-50 p-6 flex justify-between items-center max-w-7xl mx-auto\">\n <a href=\"https:\/\/eduverso.club\" className=\"text-gray-500 hover:text-purple-700 transition font-bold text-sm flex items-center gap-2 bg-white\/90 backdrop-blur px-4 py-2 rounded-full border border-gray-200 shadow-sm\">\n <ArrowLeft className=\"w-4 h-4\"\/> Volver al Hub\n <\/a>\n <\/nav>\n\n <Hero onOpenModal={() => setIsModalOpen(true)} \/>\n <Methodology \/>\n <Mechanics \/>\n <Projects \/>\n <Roles \/>\n <Components \/>\n <Cta onOpenModal={() => setIsModalOpen(true)} \/>\n <WaitlistModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} \/>\n <\/div>\n );\n };\n\n const root = ReactDOM.createRoot(document.getElementById('root'));\n root.render(<App \/>);\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Eduverso Design Kit | The Pitchtionary Edition<\/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-567","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/eduverso.club\/index.php?rest_route=\/wp\/v2\/pages\/567","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=567"}],"version-history":[{"count":13,"href":"https:\/\/eduverso.club\/index.php?rest_route=\/wp\/v2\/pages\/567\/revisions"}],"predecessor-version":[{"id":623,"href":"https:\/\/eduverso.club\/index.php?rest_route=\/wp\/v2\/pages\/567\/revisions\/623"}],"wp:attachment":[{"href":"https:\/\/eduverso.club\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":567,"date":"2026-02-15T17:40:59","date_gmt":"2026-02-15T21:40:59","guid":{"rendered":"https:\/\/eduverso.club\/?page_id=567"},"modified":"2026-02-16T11:05:52","modified_gmt":"2026-02-16T15:05:52","slug":"designkit","status":"publish","type":"page","link":"https:\/\/eduverso.club\/?page_id=567","title":{"rendered":"Eduverso Design Kit"},"content":{"rendered":"\n\n\n\n \n \n Eduverso Design Kit | The Pitchtionary Edition<\/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 href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600;800&display=swap\" rel=\"stylesheet\">\n\n <style>\n body { font-famil<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Eduverso Design Kit | The Pitchtionary Edition<\/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 href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600;800&display=swap\" rel=\"stylesheet\">\n\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n <style>\n body { font-family: 'Inter', sans-serif; scroll-behavior: smooth; }\n \n \/* Animaciones *\/\n .fade-in { animation: fadeIn 1s ease-out; }\n .float { animation: float 6s ease-in-out infinite; }\n \n @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }\n @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } }\n\n \/* Colores de Fases (Insertos) *\/\n .phase-blue { border-color: #3b82f6; background-color: #eff6ff; color: #1e3a8a; }\n .phase-green { border-color: #22c55e; background-color: #f0fdf4; color: #14532d; }\n .phase-yellow { border-color: #eab308; background-color: #fefce8; color: #713f12; }\n .phase-orange { border-color: #f97316; background-color: #fff7ed; color: #7c2d12; }\n .phase-red { border-color: #ef4444; background-color: #fef2f2; color: #7f1d1d; }\n\n \/* Modal *\/\n #modal { transition: opacity 0.3s ease; }\n #modal.hidden { opacity: 0; pointer-events: none; }\n #modal:not(.hidden) { opacity: 1; pointer-events: auto; }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50 text-slate-900\">\n\n <div id=\"root\"><\/div>\n\n <script type=\"text\/babel\">\n const { useState } = 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 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 ArrowLeft = (props) => <Icon {...props} path={<><line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"\/><polyline points=\"12 19 5 12 12 5\"\/><\/>} \/>;\n\n \/\/ --- DATOS DEL DESIGN KIT ---\n \n const phases = [\n { \n title: \"1. Empatizar\", \n subtitle: \"Comprender al Usuario\",\n desc: \"El equipo utiliza los dados y Leti para investigar profundamente el problema. Se busca entender necesidades reales, no suposiciones.\", \n tool: \"Inserto Azul\",\n details: \"Entregable: Mapa de Empat\u00eda o User Persona validado por IA.\",\n color: \"phase-blue\", \n icon: \"fas fa-eye\" \n },\n { \n title: \"2. Definir\", \n subtitle: \"Encuadrar el Problema\",\n desc: \"Fase de convergencia. El 'Analista' lidera la s\u00edntesis de la informaci\u00f3n para redactar el reto central que el equipo resolver\u00e1.\", \n tool: \"Inserto Verde\",\n details: \"Entregable: Declaraci\u00f3n del Problema (Point of View).\",\n color: \"phase-green\", \n icon: \"fas fa-bullseye\" \n },\n { \n title: \"3. Idear\", \n subtitle: \"Lluvia de Soluciones\",\n desc: \"Divergencia total. Se usan los dados morados para a\u00f1adir restricciones creativas y generar cientos de ideas en poco tiempo.\", \n tool: \"Inserto Amarillo\",\n details: \"Entregable: Matriz de Priorizaci\u00f3n de Ideas.\",\n color: \"phase-yellow\", \n icon: \"far fa-lightbulb\" \n },\n { \n title: \"4. Prototipar\", \n subtitle: \"Materializar la Idea\",\n desc: \"El coraz\u00f3n del 'Pitchtionary'. El 'Prototipador' tiene 60s para construir una versi\u00f3n f\u00edsica de la soluci\u00f3n con los bloques de acr\u00edlico.\", \n tool: \"Inserto Naranja\",\n details: \"Entregable: Prototipo de Baja Fidelidad (3D\/Dibujo).\",\n color: \"phase-orange\", \n icon: \"fas fa-layer-group\" \n },\n { \n title: \"5. Testear\", \n subtitle: \"Validaci\u00f3n Final\",\n desc: \"La hora de la verdad. El 'Validador' presenta el prototipo a Leti, quien simula ser un usuario cr\u00edtico y da feedback.\", \n tool: \"Inserto Rojo\",\n details: \"Entregable: Malla Receptora de Informaci\u00f3n.\",\n color: \"phase-red\", \n icon: \"fas fa-flag-checkered\" \n }\n ];\n\n const roles = [\n { name: \"Prototipador\", desc: \"El constructor. Materializa las ideas dibujando o usando los bloques 3D.\", icon: \"fas fa-pen-nib\", color: \"text-orange-500\" },\n { name: \"Tecno-Investigador\", desc: \"El enlace digital. Recibe los prompts de Leti y busca datos en tiempo real.\", icon: \"fas fa-search\", color: \"text-purple-500\" },\n { name: \"Analista\", desc: \"El cerebro l\u00f3gico. Sintetiza la informaci\u00f3n dispersa para el equipo.\", icon: \"fas fa-chart-pie\", color: \"text-blue-500\" },\n { name: \"Validador\", desc: \"El guardi\u00e1n de calidad. Asegura que la soluci\u00f3n cumpla los criterios de \u00e9xito.\", icon: \"fas fa-check-circle\", color: \"text-green-500\" }\n ];\n\n const projects = [\n {\n title: \"Dise\u00f1o de Apps M\u00f3viles\",\n desc: \"Ideal para prototipar flujos de usuario (UX\/UI). Usa las pizarras para dibujar pantallas y los dados para simular errores de sistema.\",\n icon: \"fas fa-mobile-alt\",\n tag: \"Producto Digital\"\n },\n {\n title: \"Innovaci\u00f3n en Servicios\",\n desc: \"Redise\u00f1a la experiencia de un restaurante o banco. Usa los bloques de acr\u00edlico para representar espacios f\u00edsicos y recorridos.\",\n icon: \"fas fa-concierge-bell\",\n tag: \"Service Design\"\n },\n {\n title: \"Soluciones de Impacto Social\",\n desc: \"Aborda problemas complejos como el reciclaje o la educaci\u00f3n. La fase de 'Empatizar' con Leti es crucial para entender el contexto real.\",\n icon: \"fas fa-hand-holding-heart\",\n tag: \"Social Tech\"\n }\n ];\n\n const components = [\n { name: \"Tablero Universal Blanco\", desc: \"Base minimalista de alta resistencia para colocar los insertos.\" },\n { name: \"5 Insertos de Fase\", desc: \"L\u00e1minas de acr\u00edlico trasl\u00facido (Azul, Verde, Amarillo, Naranja, Rojo).\" },\n { name: \"Set Bloques Acr\u00edlico\", desc: \"Piezas geom\u00e9tricas para construcci\u00f3n de prototipos 3D.\" },\n { name: \"Dados Morados\", desc: \"Para avance y modificadores de dificultad del turno.\" },\n { name: \"Leti (AI Assistant)\", desc: \"La compa\u00f1era digital para validaci\u00f3n, retos y cron\u00f3metro.\" },\n { name: \"Pizarras y Marcadores\", desc: \"Para comunicaci\u00f3n visual r\u00e1pida durante los retos de 60s.\" }\n ];\n\n \/\/ --- COMPONENTES DE UI ---\n\n const WaitlistModal = ({ isOpen, onClose }) => {\n if (!isOpen) return null;\n return (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4 modal-overlay fade-in\">\n <div className=\"bg-white rounded-2xl shadow-2xl w-full max-w-md relative overflow-hidden transform transition-all scale-100\">\n <button onClick={onClose} className=\"absolute top-4 right-4 text-gray-400 hover:text-gray-900\"><X className=\"w-6 h-6\"\/><\/button>\n <div className=\"p-8\">\n <div className=\"text-center mb-6\">\n <div className=\"w-16 h-16 bg-purple-100 text-purple-600 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl\">\n <i class=\"fas fa-rocket\"><\/i>\n <\/div>\n <h3 className=\"text-2xl font-bold text-slate-900\">Reservar Design Kit<\/h3>\n <p className=\"text-gray-500 text-sm mt-2\">\u00danete a la lista de espera para la edici\u00f3n \"The Pitchtionary\".<\/p>\n <\/div>\n <form action=\"https:\/\/formsubmit.co\/learningforti.app@gmail.com\" method=\"POST\" className=\"space-y-4\">\n <input type=\"hidden\" name=\"_subject\" value=\"Inter\u00e9s Eduverso DESIGN KIT\" \/>\n <input type=\"hidden\" name=\"_captcha\" value=\"false\" \/>\n \n <div>\n <label className=\"block text-xs font-bold text-gray-700 uppercase mb-1\">Nombre Completo<\/label>\n <input type=\"text\" name=\"name\" required className=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 outline-none transition\" placeholder=\"Tu nombre\" \/>\n <\/div>\n <div>\n <label className=\"block text-xs font-bold text-gray-700 uppercase 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-lg focus:ring-2 focus:ring-purple-600 outline-none transition\" placeholder=\"tu@email.com\" \/>\n <\/div>\n <button className=\"w-full bg-slate-900 text-white font-bold py-3 rounded-lg hover:bg-purple-700 transition shadow-lg mt-2\">Confirmar Inter\u00e9s<\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n const Hero = ({ onOpenModal }) => {\n return (\n <section className=\"bg-white pt-12 pb-24 border-b border-gray-100 relative overflow-hidden\">\n <div className=\"absolute top-0 right-0 w-[500px] h-[500px] bg-orange-50 rounded-full blur-3xl opacity-60 -z-10\"><\/div>\n <div className=\"absolute bottom-0 left-0 w-[500px] h-[500px] bg-purple-50 rounded-full blur-3xl opacity-60 -z-10\"><\/div>\n\n <div className=\"max-w-7xl mx-auto px-4 grid md:grid-cols-2 gap-16 items-center\">\n <div className=\"text-center md:text-left fade-in\">\n <div className=\"inline-flex items-center bg-orange-50 text-orange-700 px-4 py-2 rounded-full text-xs font-bold mb-6 border border-orange-100 uppercase tracking-wide shadow-sm\">\n <i className=\"fas fa-pencil-alt mr-2\"><\/i> The Pitchtionary Edition\n <\/div>\n <h1 className=\"text-5xl lg:text-7xl font-extrabold text-slate-900 mb-6 leading-tight\">\n Dise\u00f1a y Dibuja tu idea con <br\/>\n <span className=\"text-transparent bg-clip-text bg-gradient-to-r from-orange-500 to-purple-600\">Eduverso Design Kit<\/span>\n <\/h1>\n <p className=\"text-xl text-gray-600 mb-10 leading-relaxed max-w-lg mx-auto md:mx-0\">\n El juego de prototipado r\u00e1pido e investigaci\u00f3n asistida por IA. Convierte la teor\u00eda del <strong>Design Thinking<\/strong> en una pr\u00e1ctica l\u00fadica y tangible, guiada por <strong>Leti<\/strong>, tu asistente virtual.\n <\/p>\n <div className=\"flex flex-col sm:flex-row gap-4 justify-center md:justify-start\">\n <button onClick={onOpenModal} className=\"bg-slate-900 text-white px-10 py-4 rounded-xl font-bold text-lg hover:bg-slate-800 transition shadow-xl hover:-translate-y-1 transform duration-200\">\n Reservar Kit\n <\/button>\n <a href=\"#mecanica\" className=\"px-10 py-4 rounded-xl text-slate-600 font-bold border border-gray-200 hover:border-purple-500 hover:text-purple-600 transition flex items-center justify-center bg-white\">\n Ver Mec\u00e1nica\n <\/a>\n <\/div>\n <\/div>\n <div className=\"relative flex justify-center fade-in delay-200\">\n <div className=\"relative rounded-3xl overflow-hidden shadow-2xl border border-gray-100 bg-white p-2 transform rotate-1 hover:rotate-0 transition duration-500 w-full max-w-lg\">\n {\/* FOTO PRINCIPAL: CAJA DEL KIT *\/}\n <img decoding=\"async\" \n src=\"https:\/\/i.ibb.co\/rRXwSqHy\/tablero-kit.jpg\" \n alt=\"Caja Eduverso Design Kit\" \n className=\"w-full h-auto object-cover rounded-2xl\"\n \/>\n <div className=\"absolute bottom-6 right-6 bg-white\/90 backdrop-blur px-4 py-2 rounded-lg shadow-lg flex items-center gap-2 border border-gray-200\">\n <i className=\"fas fa-robot text-purple-600 text-xl\"><\/i>\n <div>\n <p className=\"text-[10px] font-bold text-gray-400 uppercase leading-none\">Powered by<\/p>\n <p className=\"text-sm font-bold text-slate-900 leading-none\">Leti AI<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n );\n };\n\n const Methodology = () => {\n return (\n <section className=\"py-24 bg-white relative\">\n <div className=\"max-w-7xl mx-auto px-4\">\n <div className=\"text-center mb-20\">\n <h2 className=\"text-4xl font-extrabold text-slate-900 mb-4\">Tu Ruta de Design Thinking<\/h2>\n <p className=\"text-xl text-gray-500 max-w-3xl mx-auto\">\n 5 Fases representadas por 5 insertos de acr\u00edlico de colores. El objetivo es simple: Desbloquear cada fase para llegar a la \"Meta del Mercado\".\n <\/p>\n <\/div>\n <div className=\"grid gap-6 md:grid-cols-2 lg:grid-cols-5\">\n {phases.map((phase, idx) => (\n <div key={idx} className={`p-6 rounded-2xl border-t-8 shadow-md ${phase.color} transition hover:-translate-y-2 hover:shadow-xl bg-white h-full flex flex-col`}>\n <div className=\"mb-4 inline-flex items-center justify-center w-12 h-12 bg-white rounded-full shadow-sm mx-auto\">\n <i className={`${phase.icon} text-xl`}><\/i>\n <\/div>\n <h4 className=\"font-bold text-lg text-slate-900 mb-2\">{phase.title}<\/h4>\n <p className=\"text-sm font-bold text-gray-500 mb-2 uppercase tracking-wide\">{phase.subtitle}<\/p>\n <p className=\"text-sm text-gray-600 leading-relaxed mb-4 flex-grow\">{phase.desc}<\/p>\n <div className=\"pt-4 border-t border-gray-100 mt-auto\">\n <p className=\"text-xs font-bold text-slate-400 uppercase mb-1\">Herramienta:<\/p>\n <p className=\"text-xs text-slate-700 font-bold mb-2\">{phase.tool}<\/p>\n <p className=\"text-[10px] text-gray-500 italic bg-white\/50 px-2 py-1 rounded border border-gray-100\">{phase.details}<\/p>\n <\/div>\n <\/div>\n ))}\n <\/div>\n <\/div>\n <\/section>\n );\n };\n\n const Mechanics = () => {\n return (\n <section id=\"mecanica\" className=\"py-24 bg-gray-50 border-y border-gray-200\">\n <div className=\"max-w-6xl mx-auto px-4\">\n <div className=\"text-center mb-20\">\n <span className=\"text-purple-600 font-bold uppercase tracking-wider text-sm mb-2 block\">Mec\u00e1nica de Juego<\/span>\n <h2 className=\"text-4xl font-extrabold text-slate-900\">\u00bfC\u00f3mo se juega al Pitchtionary?<\/h2>\n <p className=\"text-xl text-gray-500 mt-4 max-w-2xl mx-auto\">Una carrera contra el tiempo para comunicar, investigar y validar.<\/p>\n <\/div>\n\n <div className=\"grid lg:grid-cols-2 gap-16 items-center\">\n <div className=\"space-y-12\">\n <div className=\"flex gap-6\">\n <div className=\"w-16 h-16 bg-purple-100 rounded-2xl flex items-center justify-center text-purple-600 flex-shrink-0 font-bold text-2xl shadow-sm border border-purple-200\">1<\/div>\n <div>\n <h3 className=\"font-bold text-slate-900 text-xl mb-2\">El Reto Visual (60s)<\/h3>\n <p className=\"text-gray-600 leading-relaxed\">\n Al caer en una casilla, <strong>Leti<\/strong> (la App) env\u00eda un concepto t\u00e9cnico secreto al \"Prototipador\". Tiene solo 60 segundos para que su equipo lo adivine usando <strong>dibujos en la pizarra<\/strong> o construyendo con los <strong>bloques 3D<\/strong>. \u00a1Prohibido hablar!\n <\/p>\n <\/div>\n <\/div>\n <div className=\"flex gap-6\">\n <div className=\"w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center text-blue-600 flex-shrink-0 font-bold text-2xl shadow-sm border border-blue-200\">2<\/div>\n <div>\n <h3 className=\"font-bold text-slate-900 text-xl mb-2\">Investigaci\u00f3n Asistida<\/h3>\n <p className=\"text-gray-600 leading-relaxed\">\n Si el equipo adivina a tiempo, ganan un \"Prompt de Investigaci\u00f3n\". El \"Tecno-Investigador\" usa este prompt con la IA para obtener datos reales del mercado o usuario y avanzar en el tablero.\n <\/p>\n <\/div>\n <\/div>\n <div className=\"flex gap-6\">\n <div className=\"w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center text-green-600 flex-shrink-0 font-bold text-2xl shadow-sm border border-green-200\">3<\/div>\n <div>\n <h3 className=\"font-bold text-slate-900 text-xl mb-2\">Muros de Validaci\u00f3n<\/h3>\n <p className=\"text-gray-600 leading-relaxed\">\n Para desbloquear la siguiente fase (ej. pasar de Azul a Verde), el equipo debe presentar un entregable tangible a Leti. Solo si la IA valida la calidad y coherencia, pueden cambiar el <strong>inserto de color<\/strong> f\u00edsico del tablero.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div className=\"relative\">\n {\/* FOTO DEL TABLERO CON COMPONENTES *\/}\n <div className=\"rounded-3xl overflow-hidden shadow-2xl border border-gray-200 bg-white group\">\n <img decoding=\"async\" \n src=\"https:\/\/i.ibb.co\/V0z0hCzC\/Gemini-Generated-Image-uzlcqduzlcqduzlc.png\" \n alt=\"Tablero Eduverso Design Kit\" \n className=\"w-full h-auto object-cover transform group-hover:scale-105 transition duration-700\"\n \/>\n {\/* Overlay al hacer hover *\/}\n <div className=\"absolute inset-0 bg-black\/40 opacity-0 group-hover:opacity-100 transition duration-300 flex items-center justify-center\">\n <span className=\"text-white font-bold border border-white px-6 py-3 rounded-full backdrop-blur-md\">Ver Detalle del Tablero<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n );\n };\n\n const Projects = () => {\n return (\n <section className=\"py-24 bg-slate-900 text-white\">\n <div className=\"max-w-7xl mx-auto px-4\">\n <div className=\"text-center mb-16\">\n <h2 className=\"text-3xl font-bold text-white\">Proyectos de Impacto<\/h2>\n <p className=\"text-slate-400 mt-2 text-lg\">\u00bfQu\u00e9 puedes construir con este kit?<\/p>\n <\/div>\n <div className=\"grid md:grid-cols-3 gap-8\">\n {projects.map((proj, idx) => (\n <div key={idx} className=\"bg-slate-800 p-8 rounded-2xl border border-slate-700 hover:border-purple-500 transition duration-300\">\n <div className=\"mb-6 p-3 bg-slate-700 rounded-xl w-fit shadow-sm text-purple-400 text-2xl\">\n <i className={proj.icon}><\/i>\n <\/div>\n <span className=\"text-xs font-bold uppercase tracking-wider text-purple-400 mb-2 block\">{proj.tag}<\/span>\n <h4 className=\"font-bold text-xl text-white mb-3\">{proj.title}<\/h4>\n <p className=\"text-slate-400 text-sm leading-relaxed\">{proj.desc}<\/p>\n <\/div>\n ))}\n <\/div>\n <\/div>\n <\/section>\n );\n };\n\n const Roles = () => {\n return (\n <section className=\"py-24 bg-white\">\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div className=\"text-center mb-12\">\n <h2 className=\"text-2xl font-bold text-slate-900\">Tokens de Rol<\/h2>\n <p className=\"text-gray-500 mt-2 text-lg\">Roles especializados para la din\u00e1mica Pitchtionary<\/p>\n <\/div>\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8\">\n {roles.map((role, idx) => (\n <div key={idx} className=\"bg-gray-50 p-8 rounded-2xl border border-gray-100 text-center hover:bg-white hover:shadow-xl hover:-translate-y-1 transition duration-300 group\">\n <div className={`mb-6 inline-block p-4 bg-white rounded-full shadow-md text-3xl ${role.color} group-hover:scale-110 transition`}>\n <i className={role.icon}><\/i>\n <\/div>\n <h4 className=\"font-bold text-xl text-slate-900 mb-2\">{role.name}<\/h4>\n <p className=\"text-sm text-gray-500 leading-relaxed\">{role.desc}<\/p>\n <\/div>\n ))}\n <\/div>\n <\/div>\n <\/section>\n );\n };\n\n const Components = () => {\n return (\n <section className=\"py-24 bg-gray-50 border-t border-gray-200\">\n <div className=\"max-w-5xl mx-auto px-4\">\n <h2 className=\"text-3xl font-extrabold mb-12 text-center text-slate-900\">Contenido de la Caja<\/h2>\n \n <div className=\"bg-white rounded-3xl p-10 border border-gray-200 shadow-xl grid md:grid-cols-2 gap-x-16 gap-y-8 relative overflow-hidden\">\n {\/* Decoraci\u00f3n *\/}\n <div className=\"absolute top-0 right-0 w-32 h-32 bg-orange-100 rounded-bl-full -mr-16 -mt-16 z-0\"><\/div>\n\n {components.map((item, idx) => (\n <div key={idx} className=\"flex items-start gap-4 border-b border-gray-100 pb-4 last:border-0 md:last:border-b md:nth-last-child-2:border-0 relative z-10\">\n <div className=\"w-8 h-8 rounded-lg bg-orange-50 flex items-center justify-center text-orange-500 flex-shrink-0 mt-1\">\n <i className=\"fas fa-check text-xs\"><\/i>\n <\/div>\n <div>\n <strong className=\"block text-slate-900 text-base mb-1\">{item.name}<\/strong>\n <span className=\"text-gray-500 text-sm leading-snug block\">{item.desc}<\/span>\n <\/div>\n <\/div>\n ))}\n \n {\/* Foto Equipo (Integrada en la lista) *\/}\n <div className=\"md:col-span-2 mt-8 rounded-2xl overflow-hidden shadow-lg border border-gray-200\">\n <img decoding=\"async\" src=\"https:\/\/i.ibb.co\/rRXwSqHy\/tablero-kit.jpg\" alt=\"Equipo jugando\" className=\"w-full h-64 object-cover object-center\"\/>\n <div className=\"bg-slate-900 text-white p-4 text-center text-sm font-bold\">\n Dise\u00f1ado para equipos de 3 a 6 personas\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n );\n };\n\n const Cta = ({ onOpenModal }) => {\n return (\n <section className=\"py-24 bg-white text-center\">\n <div className=\"max-w-3xl mx-auto px-4\">\n <h2 className=\"text-4xl font-extrabold text-slate-900 mb-6\">\u00bfListo para prototipar el futuro?<\/h2>\n <p className=\"text-xl text-gray-500 mb-10\">Convierte la teor\u00eda en pr\u00e1ctica l\u00fadica y tangible hoy mismo.<\/p>\n <button onClick={onOpenModal} className=\"bg-purple-600 text-white px-12 py-5 rounded-xl font-bold text-xl hover:bg-purple-700 transition shadow-2xl hover:-translate-y-1 transform duration-200 flex items-center gap-3 mx-auto\">\n <i className=\"fas fa-rocket\"><\/i> Reservar Design Kit\n <\/button>\n <\/div>\n <\/section>\n );\n };\n\n const App = () => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n return (\n <div className=\"min-h-screen flex flex-col bg-white\">\n {\/* NAV SIMPLE DE RETORNO *\/}\n <nav className=\"absolute top-0 left-0 w-full z-50 p-6 flex justify-between items-center max-w-7xl mx-auto\">\n <a href=\"https:\/\/eduverso.club\" className=\"text-gray-500 hover:text-purple-700 transition font-bold text-sm flex items-center gap-2 bg-white\/90 backdrop-blur px-4 py-2 rounded-full border border-gray-200 shadow-sm\">\n <ArrowLeft className=\"w-4 h-4\"\/> Volver al Hub\n <\/a>\n <\/nav>\n\n <Hero onOpenModal={() => setIsModalOpen(true)} \/>\n <Methodology \/>\n <Mechanics \/>\n <Projects \/>\n <Roles \/>\n <Components \/>\n <Cta onOpenModal={() => setIsModalOpen(true)} \/>\n <WaitlistModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} \/>\n <\/div>\n );\n };\n\n const root = ReactDOM.createRoot(document.getElementById('root'));\n root.render(<App \/>);\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Eduverso Design Kit | The Pitchtionary Edition<\/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-567","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/eduverso.club\/index.php?rest_route=\/wp\/v2\/pages\/567","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=567"}],"version-history":[{"count":13,"href":"https:\/\/eduverso.club\/index.php?rest_route=\/wp\/v2\/pages\/567\/revisions"}],"predecessor-version":[{"id":623,"href":"https:\/\/eduverso.club\/index.php?rest_route=\/wp\/v2\/pages\/567\/revisions\/623"}],"wp:attachment":[{"href":"https:\/\/eduverso.club\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}