Agente Chef | Semana de la IA<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600&family=Orbitron:wght@500;700;900&family=Fira+Code:wght@400;600&display=swap\" rel=\"stylesheet\">\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Inter', 'sans-serif'],\r\n tech: ['Orbitron', 'sans-serif'],\r\n mono: ['Fira Code', 'monospace'],\r\n },\r\n colors: {\r\n slate: { 950: '#020617' },\r\n chef: {\r\n light: '#fbbf24', \/\/ Amber 400\r\n DEFAULT: '#f59e0b', \/\/ Amber 500\r\n dark: '#b45309', \/\/ Amber 700\r\n glow: 'rgba(245, 158, 11, 0.5)'\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n <style>\r\n \/* --- SCOPE (ENCAPSULAMIENTO) --- *\/\r\n .ia-agent-wrapper {\r\n background-color: #020617;\r\n color: #e2e8f0;\r\n overflow: visible; \r\n position: relative;\r\n width: 100%;\r\n min-height: 100vh;\r\n isolation: isolate;\r\n }\r\n\r\n \/* --- FONDO --- *\/\r\n .ia-agent-wrapper .cyber-grid {\r\n position: absolute;\r\n top: 0; left: 0; width: 100%; height: 100%;\r\n background-image: \r\n linear-gradient(rgba(245, 158, 11, 0.05) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(245, 158, 11, 0.05) 1px, transparent 1px);\r\n background-size: 50px 50px;\r\n mask-image: linear-gradient(to bottom, black 40%, transparent 100%);\r\n z-index: 0;\r\n pointer-events: none;\r\n }\r\n\r\n \/* --- UI GLASS --- *\/\r\n .ia-agent-wrapper .glass-panel {\r\n background: rgba(15, 23, 42, 0.6);\r\n backdrop-filter: blur(12px);\r\n border: 1px solid rgba(245, 158, 11, 0.2);\r\n box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);\r\n }\r\n\r\n \/* --- TERMINAL BOX (Prompt) --- *\/\r\n .ia-agent-wrapper .terminal-box {\r\n background: #0f172a;\r\n border: 1px solid #1e293b;\r\n border-left: 4px solid #f59e0b;\r\n font-family: 'Fira Code', monospace;\r\n position: relative;\r\n overflow: hidden;\r\n transition: all 0.5s ease-in-out;\r\n }\r\n .ia-agent-wrapper .terminal-box::before {\r\n content: '';\r\n position: absolute;\r\n top: 0; left: 0; width: 100%; height: 2px;\r\n background: linear-gradient(90deg, transparent, #f59e0b, transparent);\r\n animation: scanline 3s infinite linear;\r\n }\r\n\r\n @keyframes scanline {\r\n 0% { transform: translateX(-100%); }\r\n 100% { transform: translateX(100%); }\r\n }\r\n\r\n \/* --- VIDEO FRAME --- *\/\r\n .ia-agent-wrapper .phone-frame {\r\n border: 8px solid #1e293b;\r\n border-radius: 2rem;\r\n box-shadow: 0 0 50px rgba(245, 158, 11, 0.2), inset 0 0 20px rgba(0,0,0,0.5);\r\n background: #000;\r\n position: relative;\r\n overflow: hidden;\r\n aspect-ratio: 9\/16;\r\n max-height: 80vh;\r\n }\r\n\r\n \/* --- BOTONES --- *\/\r\n .ia-agent-wrapper .btn-action {\r\n background: linear-gradient(90deg, #f59e0b, #d97706);\r\n position: relative;\r\n overflow: hidden;\r\n transition: all 0.3s ease;\r\n cursor: pointer;\r\n display: inline-flex; \r\n text-decoration: none; \r\n }\r\n .ia-agent-wrapper .btn-action:hover {\r\n box-shadow: 0 0 25px rgba(245, 158, 11, 0.6);\r\n transform: translateY(-2px);\r\n }\r\n .ia-agent-wrapper .btn-action::after {\r\n content: '';\r\n position: absolute;\r\n top: -50%; left: -50%; width: 200%; height: 200%;\r\n background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%);\r\n transform: scale(0);\r\n transition: transform 0.6s;\r\n }\r\n .ia-agent-wrapper .btn-action:hover::after { transform: scale(1); }\r\n\r\n .ia-agent-wrapper .btn-outline {\r\n border: 1px solid rgba(245, 158, 11, 0.5);\r\n background: rgba(245, 158, 11, 0.05);\r\n transition: all 0.3s;\r\n cursor: pointer;\r\n color: #fbbf24;\r\n }\r\n .ia-agent-wrapper .btn-outline:hover {\r\n background: rgba(245, 158, 11, 0.15);\r\n border-color: #f59e0b;\r\n color: #fff;\r\n }\r\n\r\n \/* --- TEXTOS --- *\/\r\n .ia-agent-wrapper .text-glow { text-shadow: 0 0 10px rgba(245, 158, 11, 0.5); }\r\n \r\n \/* --- PASO A PASO --- *\/\r\n .ia-agent-wrapper .step-circle {\r\n width: 32px; height: 32px;\r\n background: rgba(245, 158, 11, 0.2);\r\n border: 1px solid #f59e0b;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-weight: bold;\r\n color: #fbbf24;\r\n font-family: 'Orbitron', sans-serif;\r\n }\r\n\r\n \/* --- ANIMACIONES --- *\/\r\n .ia-agent-wrapper .reveal {\r\n opacity: 0; transform: translateY(20px);\r\n transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);\r\n }\r\n .ia-agent-wrapper .reveal.active { opacity: 1; transform: translateY(0); }\r\n .ia-agent-wrapper .delay-100 { transition-delay: 0.1s; }\r\n .ia-agent-wrapper .delay-200 { transition-delay: 0.2s; }\r\n .ia-agent-wrapper .delay-300 { transition-delay: 0.3s; }\r\n\r\n .ia-agent-wrapper .prompt-container {\r\n max-height: 120px;\r\n overflow: hidden;\r\n transition: max-height 0.5s ease-in-out;\r\n }\r\n .ia-agent-wrapper .prompt-container.expanded {\r\n max-height: 1000px;\r\n }\r\n \r\n .ia-agent-wrapper * {\r\n box-sizing: border-box;\r\n }\r\n\r\n \/* --- ESTADO EXPIRADO --- *\/\r\n .ia-agent-wrapper .session-expired {\r\n filter: grayscale(1) !important;\r\n opacity: 0.6 !important;\r\n pointer-events: none !important;\r\n border-color: #475569 !important;\r\n background: rgba(30, 41, 59, 0.4) !important;\r\n box-shadow: none !important;\r\n }\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <div class=\"ia-agent-wrapper font-sans antialiased\">\r\n \r\n \r\n <div class=\"absolute inset-0 z-0 pointer-events-none overflow-hidden\">\r\n <div class=\"cyber-grid\"><\/div>\r\n <div class=\"absolute bottom-0 left-0 w-full h-1\/2 bg-gradient-to-t from-slate-950 to-transparent\"><\/div>\r\n \r\n <div class=\"absolute top-20 right-20 w-96 h-96 bg-amber-600\/10 rounded-full blur-[100px] animate-pulse\"><\/div>\r\n <div class=\"absolute bottom-20 left-20 w-96 h-96 bg-orange-600\/10 rounded-full blur-[100px] animate-pulse\" style=\"animation-delay: 1s;\"><\/div>\r\n <\/div>\r\n\r\n \r\n <nav class=\"relative z-40 w-full p-4 md:p-6 flex justify-between items-center border-b border-white\/5 bg-slate-950\/50 backdrop-blur-md\">\r\n <div class=\"flex items-center gap-3\">\r\n <a href=\"https:\/\/redporlaciberseguridad.org\/semana-de-la-ia\/\" class=\"text-gray-400 hover:text-white transition-colors flex items-center gap-2 text-xs md:text-sm uppercase tracking-widest font-tech decoration-0 no-underline\">\r\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\"><\/path><\/svg>\r\n <span class=\"hidden sm:inline\">Volver a <\/span>Inicio\r\n <\/a>\r\n <\/div>\r\n <div class=\"flex items-center gap-2\">\r\n <div class=\"w-2 h-2 rounded-full bg-amber-500 animate-pulse\"><\/div>\r\n <span class=\"text-amber-400 font-bold font-tech text-xs md:text-sm\">MODO: CHEF<\/span>\r\n <\/div>\r\n <\/nav>\r\n\r\n \r\n <main class=\"relative z-10 flex-1 flex flex-col lg:flex-row items-center lg:items-start justify-center gap-8 lg:gap-16 p-4 md:p-6 lg:p-12 max-w-7xl mx-auto w-full pt-8\">\r\n \r\n \r\n <div class=\"w-full lg:w-[400px] flex-shrink-0 flex justify-center relative lg:sticky lg:top-24 mb-6 lg:mb-0 reveal\">\r\n <div class=\"phone-frame w-full max-w-[320px] lg:max-w-full group shadow-2xl bg-black relative overflow-hidden\">\r\n \r\n \r\n <iframe \r\n id=\"chefVideo\"\r\n class=\"w-full h-full object-cover\"\r\n src=\"https:\/\/www.youtube.com\/embed\/umb1duw7kh0?enablejsapi=1&rel=0&modestbranding=1&autoplay=1&mute=1&playsinline=1\" \r\n title=\"Asistente Chef\" \r\n frameborder=\"0\" \r\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" \r\n referrerpolicy=\"strict-origin-when-cross-origin\" \r\n allowfullscreen>\r\n <\/iframe>\r\n \r\n \r\n <div id=\"videoOverlay\" onclick=\"playVideo()\" class=\"absolute inset-0 z-30 cursor-pointer bg-black\/40 hover:bg-black\/20 transition-all duration-300 group\">\r\n \r\n \r\n <div class=\"absolute bottom-0 left-0 w-full p-6 bg-gradient-to-t from-black via-black\/80 to-transparent pt-20 z-10\">\r\n <h3 class=\"text-white font-bold text-lg text-glow\">Asistente Chef \ud83c\udf73<\/h3>\r\n <p class=\"text-gray-300 text-sm\">Recetas con lo que tienes...<\/p>\r\n <div class=\"w-full bg-gray-700 h-1 rounded-full mt-3 overflow-hidden\">\r\n <div class=\"w-1\/3 h-full bg-amber-500\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex-1 w-full max-w-2xl reveal delay-100\">\r\n \r\n \r\n <div class=\"mb-8 border-b border-gray-800 pb-6\">\r\n <div class=\"flex items-center gap-4 mb-2\">\r\n <span class=\"text-4xl md:text-5xl\">\ud83c\udf73<\/span>\r\n <div>\r\n <h1 class=\"text-2xl md:text-3xl lg:text-5xl font-black text-white font-tech text-glow leading-tight\">AGENTE CHEF<\/h1>\r\n <p class=\"text-amber-400 font-bold uppercase tracking-widest text-xs md:text-sm mt-1\">Tu Asistente de Cocina 24\/7<\/p>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-gray-400 text-base md:text-lg mt-4 leading-relaxed\">\r\n \u00bfCansado de no saber qu\u00e9 cocinar o tienes pocos ingredientes? <span class=\"text-white font-bold\">Convierte a la IA en tu Chef Personal<\/span> y crea recetas deliciosas con lo que hay en tu refri.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"mb-10 relative\">\r\n <h3 class=\"text-white font-bold font-tech text-lg mb-6 flex items-center gap-2\">\r\n <span class=\"w-2 h-6 bg-amber-500 block\"><\/span>\r\n C\u00d3MO ACTIVAR TU CHEF IA\r\n <\/h3>\r\n \r\n <div class=\"space-y-8 relative pl-4 border-l border-gray-800 ml-2\">\r\n \r\n <div class=\"relative pl-6\">\r\n <div class=\"absolute -left-[27px] step-circle\">1<\/div>\r\n <h4 class=\"text-white font-bold text-sm uppercase\">Entra a la Inteligencia Artificial<\/h4>\r\n <p class=\"text-gray-400 text-sm mt-1\">Haz clic en este enlace: <a href=\"https:\/\/copilot.microsoft.com\/\" target=\"_blank\" class=\"text-amber-400 underline font-bold hover:text-amber-300 transition-colors\">https:\/\/copilot.microsoft.com\/<\/a>. Tambi\u00e9n puedes descargar la aplicaci\u00f3n en tu celular buscando <b>\"Copilot de Microsoft\"<\/b> en tu tienda de aplicaciones.<\/p>\r\n <\/div>\r\n \r\n <div class=\"relative pl-6\">\r\n <div class=\"absolute -left-[27px] step-circle\">2<\/div>\r\n <h4 class=\"text-white font-bold text-sm uppercase\">Copia la Instrucci\u00f3n \"Maestra\"<\/h4>\r\n <p class=\"text-gray-400 text-sm mt-1\">Busca el recuadro oscuro de abajo que dice <b>\"EL PROMPT MAESTRO\"<\/b> y presiona el bot\u00f3n naranja <b>\"Copiar Prompt\"<\/b>. Esto copiar\u00e1 autom\u00e1ticamente las reglas que el Chef debe seguir.<\/p>\r\n <\/div>\r\n \r\n <div class=\"relative pl-6\">\r\n <div class=\"absolute -left-[27px] step-circle\">3<\/div>\r\n <h4 class=\"text-white font-bold text-sm uppercase\">Pega y Personaliza en Copilot<\/h4>\r\n <p class=\"text-gray-400 text-sm mt-1\">Regresa a la pesta\u00f1a de Copilot y pega el texto en el chat. Antes de enviarlo, <b>sustituye el texto entre corchetes<\/b> con los ingredientes reales que tienes en tu cocina.<\/p>\r\n <\/div>\r\n \r\n <div class=\"relative pl-6\">\r\n <div class=\"absolute -left-[27px] step-circle\">4<\/div>\r\n <h4 class=\"text-white font-bold text-sm uppercase\">\u00a1Listo para cocinar!<\/h4>\r\n <p class=\"text-gray-400 text-sm mt-1\">Presiona \"Enter\" y deja que la IA te gu\u00ede paso a paso. Si te falta algo, simplemente preg\u00fantale: \"\u00bfCon qu\u00e9 puedo sustituir la cebolla?\".<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"mb-10 reveal delay-200\">\r\n <div class=\"flex justify-between items-end mb-3\">\r\n <h3 class=\"text-white font-bold font-tech flex items-center gap-2 text-sm md:text-base\">\r\n <span class=\"w-2 h-6 bg-amber-500 block\"><\/span>\r\n EL PROMPT MAESTRO\r\n <\/h3>\r\n <div class=\"flex gap-2\">\r\n <span class=\"text-[10px] md:text-xs text-green-400 uppercase tracking-wider font-mono bg-green-500\/10 px-2 py-1 rounded hidden\" id=\"copySuccess\">\u00a1Copiado!<\/span>\r\n <span class=\"text-[10px] md:text-xs text-amber-400 uppercase tracking-wider font-mono bg-amber-500\/10 px-2 py-1 rounded\">Chef Mode<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"terminal-box p-4 md:p-6 rounded-lg text-sm text-gray-300 leading-relaxed shadow-2xl group relative\">\r\n <div class=\"absolute top-2 right-2 flex gap-1\">\r\n <div class=\"w-2 h-2 md:w-3 md:h-3 rounded-full bg-red-500\/20 border border-red-500\"><\/div>\r\n <div class=\"w-2 h-2 md:w-3 md:h-3 rounded-full bg-yellow-500\/20 border border-yellow-500\"><\/div>\r\n <div class=\"w-2 h-2 md:w-3 md:h-3 rounded-full bg-green-500\/20 border border-green-500\"><\/div>\r\n <\/div>\r\n \r\n <p class=\"mb-4 text-amber-300 text-xs md:text-sm\">\/\/ Instrucci\u00f3n para IA:<\/p>\r\n \r\n <div id=\"promptContainer\" class=\"prompt-container relative\">\r\n <p id=\"promptText\" class=\"whitespace-pre-line font-mono text-xs md:text-sm text-gray-300\">\r\n \r\n <\/p>\r\n <div id=\"fadeOverlay\" class=\"absolute bottom-0 left-0 w-full h-20 bg-gradient-to-t from-[#0f172a] to-transparent pointer-events-none transition-opacity duration-300\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"mt-6 flex flex-col sm:flex-row gap-3 pt-4 border-t border-gray-800\">\r\n <button onclick=\"copyFullPrompt()\" class=\"w-full sm:flex-1 bg-amber-600 hover:bg-amber-500 text-white py-3 sm:py-2 px-4 rounded text-xs font-bold uppercase tracking-wider flex items-center justify-center gap-2 transition-all hover:scale-[1.02] shadow-lg shadow-amber-900\/20 order-1 sm:order-1\">\r\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3\"><\/path><\/svg>\r\n Copiar Prompt\r\n <\/button>\r\n <button onclick=\"togglePrompt()\" id=\"toggleBtn\" class=\"w-full sm:w-auto px-4 py-3 sm:py-2 border border-gray-600 hover:border-amber-400 text-gray-400 hover:text-white rounded text-xs font-bold uppercase transition-all flex items-center justify-center gap-2 order-2 sm:order-2\">\r\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"><\/path><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z\"><\/path><\/svg>\r\n Ver Todo\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"mb-10 p-5 rounded-lg border border-amber-500\/20 bg-amber-500\/5 reveal delay-300\">\r\n <h4 class=\"text-amber-400 font-bold font-tech uppercase mb-3 flex items-center gap-2\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"><\/path><\/svg>\r\n 3 Consejos de Oro\r\n <\/h4>\r\n <ul class=\"text-sm text-gray-400 space-y-2 list-disc pl-4\">\r\n <li><span class=\"text-white font-bold\">S\u00e9 espec\u00edfico:<\/span> No digas \"tengo verdura\", di \"tengo dos zanahorias tristes\".<\/li>\r\n <li><span class=\"text-white font-bold\">Define el tiempo:<\/span> Si tienes prisa, especifica \"receta de 5 minutos\".<\/li>\r\n <li><span class=\"text-white font-bold\">Pide sustitutos:<\/span> Si te falta algo, pregunta \"\u00bfCon qu\u00e9 sustituyo la crema?\".<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex flex-col gap-6 reveal delay-300 border-t border-gray-800 pt-8 pb-10 sm:pb-0\">\r\n \r\n \r\n <div id=\"liveSessionCard\" class=\"bg-gradient-to-r from-red-900\/40 to-amber-900\/40 border border-red-500\/50 p-4 rounded-xl flex flex-col md:flex-row items-center justify-between gap-4 shadow-[0_0_15px_rgba(239,68,68,0.2)] transition-all\">\r\n <div class=\"flex items-center gap-4 text-center md:text-left\">\r\n <div class=\"relative\">\r\n <span id=\"liveIcon\" class=\"text-3xl\">\ud83d\udd34<\/span>\r\n <div id=\"livePing\" class=\"absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full animate-ping\"><\/div>\r\n <\/div>\r\n <div>\r\n <h4 id=\"liveStatus\" class=\"text-white font-bold text-base font-tech tracking-tight uppercase\">\u00a1SESI\u00d3N EN VIVO!<\/h4>\r\n <p id=\"liveDate\" class=\"text-gray-300 text-xs\">\u00danete este <span class=\"text-red-400 font-bold\">17 de Abril, 2026<\/span> para ver al Agente en acci\u00f3n.<\/p>\r\n <\/div>\r\n <\/div>\r\n <a id=\"liveLink\" href=\"https:\/\/forms.office.com\/pages\/responsepage.aspx?id=PrFFKQuFrU-IqDW_pMoqULLHmYjb64BBndQsaYIJHQ9UMkZNWkdRSTVRNDkwVDBCUFJQMFBNVDVSUS4u&route=shorturl\" target=\"_blank\" class=\"w-full md:w-auto bg-red-600 hover:bg-red-500 text-white px-6 py-2 rounded-full font-bold text-sm uppercase tracking-wider transition-all transform hover:scale-105 shadow-lg no-underline text-center\">\r\n Registrarme Ahora\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"flex flex-col sm:flex-row gap-4\">\r\n \r\n <a id=\"btnConstancia\" href=\"https:\/\/forms.office.com\/r\/E5eBbtnYtZ\" target=\"_blank\" class=\"btn-action flex-1 py-4 px-6 rounded-lg font-bold text-white text-base md:text-lg font-tech uppercase tracking-wide flex items-center justify-center gap-3 shadow-[0_0_20px_rgba(245,158,11,0.4)] decoration-0 no-underline\">\r\n <span>\ud83d\udcdc Obtener Constancia<\/span>\r\n <svg class=\"w-5 h-5 animate-pulse\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"><\/path><\/svg>\r\n <\/a>\r\n \r\n \r\n <a href=\"https:\/\/redporlaciberseguridad.org\/semana-de-la-ia\/\" class=\"btn-outline py-4 px-6 rounded-lg font-bold text-amber-400 font-tech uppercase tracking-wide flex-1 sm:flex-none flex items-center justify-center gap-2 group text-sm md:text-base decoration-0 no-underline\">\r\n <svg class=\"w-4 h-4 group-hover:-translate-x-1 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 19l-7-7m0 0l7-7m-7 7h18\"><\/path><\/svg>\r\n Ver M\u00e1s Agentes\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-center text-xs text-gray-500 mt-4 mb-8 sm:mb-0\">Al obtener tu constancia certificas que has configurado exitosamente tu agente.<\/p>\r\n\r\n <\/div>\r\n <\/main>\r\n\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Animaciones de entrada\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const reveals = document.querySelectorAll('.reveal');\r\n reveals.forEach((el, index) => {\r\n setTimeout(() => {\r\n el.classList.add('active');\r\n }, index * 100);\r\n });\r\n \r\n \/\/ Inyectar el Prompt\r\n document.getElementById('promptText').innerText = chefPrompt;\r\n\r\n \/\/ --- L\u00d3GICA DE CADUCIDAD SESI\u00d3N EN VIVO ---\r\n const expirationDate = new Date('2026-04-17T23:59:59'); \r\n const today = new Date();\r\n \r\n if (today > expirationDate) {\r\n const liveCard = document.getElementById('liveSessionCard');\r\n const liveLink = document.getElementById('liveLink');\r\n const livePing = document.getElementById('livePing');\r\n const liveIcon = document.getElementById('liveIcon');\r\n const liveStatus = document.getElementById('liveStatus');\r\n const liveDateText = document.getElementById('liveDate');\r\n\r\n if (liveCard) {\r\n liveCard.classList.add('session-expired');\r\n if (liveLink) {\r\n liveLink.innerText = 'Sesi\u00f3n Finalizada';\r\n liveLink.style.background = '#475569';\r\n }\r\n if (livePing) livePing.style.display = 'none';\r\n if (icon) liveIcon.innerText = '\u26aa';\r\n if (status) liveStatus.innerText = 'Sesi\u00f3n Concluida';\r\n if (liveDateText) liveDateText.innerHTML = 'Este evento ocurri\u00f3 el 17 de Abril, 2026.';\r\n }\r\n }\r\n });\r\n\r\n const chefPrompt = `Act\u00faa como un chef profesional experto en cocina de aprovechamiento.\r\n\r\nTengo estos ingredientes: [Ingresa aqu\u00ed tu lista, ej: 2 huevos, media cebolla, un poco de queso, lata de at\u00fan].\r\n\r\nTu misi\u00f3n:\r\n1. Dise\u00f1a una receta saludable, rica y personalizada.\r\n2. Que se prepare en menos de [Ingresa tiempo, ej: 15 minutos].\r\n3. Detalla los pasos de preparaci\u00f3n claramente.\r\n4. Dime el valor nutricional aproximado.\r\n\r\nSi te pido sustitutos para alg\u00fan ingrediente que me falte o si tengo alguna restricci\u00f3n alimentaria (gluten, vegano, alergias), adapta la receta inmediatamente.`;\r\n\r\n function togglePrompt() {\r\n const container = document.getElementById('promptContainer');\r\n const overlay = document.getElementById('fadeOverlay');\r\n const btn = document.getElementById('toggleBtn');\r\n \r\n container.classList.toggle('expanded');\r\n \r\n if (container.classList.contains('expanded')) {\r\n overlay.style.opacity = '0';\r\n overlay.style.pointerEvents = 'none';\r\n btn.innerHTML = 'Colapsar';\r\n } else {\r\n overlay.style.opacity = '1';\r\n overlay.style.pointerEvents = 'auto';\r\n btn.innerHTML = `<svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"><\/path><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z\"><\/path><\/svg> Ver Todo`;\r\n }\r\n }\r\n\r\n function copyFullPrompt() {\r\n const textArea = document.createElement(\"textarea\");\r\n textArea.value = chefPrompt;\r\n document.body.appendChild(textArea);\r\n textArea.select();\r\n try {\r\n document.execCommand('copy');\r\n const successMsg = document.getElementById('copySuccess');\r\n successMsg.classList.remove('hidden');\r\n setTimeout(() => {\r\n successMsg.classList.add('hidden');\r\n }, 3000);\r\n } catch (err) {\r\n console.error('Error al copiar: ', err);\r\n }\r\n document.body.removeChild(textArea);\r\n }\r\n\r\n function playVideo() {\r\n const iframe = document.getElementById('chefVideo');\r\n const overlay = document.getElementById('videoOverlay');\r\n \r\n if (iframe && overlay) {\r\n overlay.style.opacity = '0';\r\n overlay.style.pointerEvents = 'none';\r\n \r\n setTimeout(() => {\r\n overlay.style.display = 'none';\r\n }, 300);\r\n\r\n iframe.contentWindow.postMessage('{\"event\":\"command\",\"func\":\"playVideo\",\"args\":\"\"}', '*');\r\n }\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3d320d7 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"3d320d7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Agente Chef | Semana de la IA Volver a Inicio MODO: CHEF Asistente Chef \ud83c\udf73 Recetas con lo que tienes… \ud83c\udf73 AGENTE CHEF Tu Asistente de Cocina 24\/7 \u00bfCansado de no saber qu\u00e9 cocinar o tienes pocos ingredientes? Convierte a la IA en tu Chef Personal y crea recetas deliciosas con lo que hay en<\/p>","protected":false},"author":8,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-18117","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/redporlaciberseguridad.org\/en\/wp-json\/wp\/v2\/pages\/18117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/redporlaciberseguridad.org\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/redporlaciberseguridad.org\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/redporlaciberseguridad.org\/en\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/redporlaciberseguridad.org\/en\/wp-json\/wp\/v2\/comments?post=18117"}],"version-history":[{"count":55,"href":"https:\/\/redporlaciberseguridad.org\/en\/wp-json\/wp\/v2\/pages\/18117\/revisions"}],"predecessor-version":[{"id":19818,"href":"https:\/\/redporlaciberseguridad.org\/en\/wp-json\/wp\/v2\/pages\/18117\/revisions\/19818"}],"wp:attachment":[{"href":"https:\/\/redporlaciberseguridad.org\/en\/wp-json\/wp\/v2\/media?parent=18117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n \r\n \r\n Agente Chef | Semana de la IA<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600&family=Orbitron:wght@500;700;900&family=Fira+Code:wght@400;600&display=swap\" rel=\"stylesheet\">\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Inter', 'sans-serif'],\r\n tech: ['Orbitron', 'sans-serif'],\r\n mono: ['Fira Code', 'monospace'],\r\n },\r\n colors: {\r\n slate: { 950: '#020617' },\r\n chef: {\r\n light: '#fbbf24', \/\/ Amber 400\r\n DEFAULT: '#f59e0b', \/\/ Amber 500\r\n dark: '#b45309', \/\/ Amber 700\r\n glow: 'rgba(245, 158, 11, 0.5)'\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n <style>\r\n \/* --- SCOPE (ENCAPSULAMIENTO) --- *\/\r\n .ia-agent-wrapper {\r\n background-color: #020617;\r\n color: #e2e8f0;\r\n overflow: visible; \r\n position: relative;\r\n width: 100%;\r\n min-height: 100vh;\r\n isolation: isolate;\r\n }\r\n\r\n \/* --- FONDO --- *\/\r\n .ia-agent-wrapper .cyber-grid {\r\n position: absolute;\r\n top: 0; left: 0; width: 100%; height: 100%;\r\n background-image: \r\n linear-gradient(rgba(245, 158, 11, 0.05) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(245, 158, 11, 0.05) 1px, transparent 1px);\r\n background-size: 50px 50px;\r\n mask-image: linear-gradient(to bottom, black 40%, transparent 100%);\r\n z-index: 0;\r\n pointer-events: none;\r\n }\r\n\r\n \/* --- UI GLASS --- *\/\r\n .ia-agent-wrapper .glass-panel {\r\n background: rgba(15, 23, 42, 0.6);\r\n backdrop-filter: blur(12px);\r\n border: 1px solid rgba(245, 158, 11, 0.2);\r\n box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);\r\n }\r\n\r\n \/* --- TERMINAL BOX (Prompt) --- *\/\r\n .ia-agent-wrapper .terminal-box {\r\n background: #0f172a;\r\n border: 1px solid #1e293b;\r\n border-left: 4px solid #f59e0b;\r\n font-family: 'Fira Code', monospace;\r\n position: relative;\r\n overflow: hidden;\r\n transition: all 0.5s ease-in-out;\r\n }\r\n .ia-agent-wrapper .terminal-box::before {\r\n content: '';\r\n position: absolute;\r\n top: 0; left: 0; width: 100%; height: 2px;\r\n background: linear-gradient(90deg, transparent, #f59e0b, transparent);\r\n animation: scanline 3s infinite linear;\r\n }\r\n\r\n @keyframes scanline {\r\n 0% { transform: translateX(-100%); }\r\n 100% { transform: translateX(100%); }\r\n }\r\n\r\n \/* --- VIDEO FRAME --- *\/\r\n .ia-agent-wrapper .phone-frame {\r\n border: 8px solid #1e293b;\r\n border-radius: 2rem;\r\n box-shadow: 0 0 50px rgba(245, 158, 11, 0.2), inset 0 0 20px rgba(0,0,0,0.5);\r\n background: #000;\r\n position: relative;\r\n overflow: hidden;\r\n aspect-ratio: 9\/16;\r\n max-height: 80vh;\r\n }\r\n\r\n \/* --- BOTONES --- *\/\r\n .ia-agent-wrapper .btn-action {\r\n background: linear-gradient(90deg, #f59e0b, #d97706);\r\n position: relative;\r\n overflow: hidden;\r\n transition: all 0.3s ease;\r\n cursor: pointer;\r\n display: inline-flex; \r\n text-decoration: none; \r\n }\r\n .ia-agent-wrapper .btn-action:hover {\r\n box-shadow: 0 0 25px rgba(245, 158, 11, 0.6);\r\n transform: translateY(-2px);\r\n }\r\n .ia-agent-wrapper .btn-action::after {\r\n content: '';\r\n position: absolute;\r\n top: -50%; left: -50%; width: 200%; height: 200%;\r\n background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%);\r\n transform: scale(0);\r\n transition: transform 0.6s;\r\n }\r\n .ia-agent-wrapper .btn-action:hover::after { transform: scale(1); }\r\n\r\n .ia-agent-wrapper .btn-outline {\r\n border: 1px solid rgba(245, 158, 11, 0.5);\r\n background: rgba(245, 158, 11, 0.05);\r\n transition: all 0.3s;\r\n cursor: pointer;\r\n color: #fbbf24;\r\n }\r\n .ia-agent-wrapper .btn-outline:hover {\r\n background: rgba(245, 158, 11, 0.15);\r\n border-color: #f59e0b;\r\n color: #fff;\r\n }\r\n\r\n \/* --- TEXTOS --- *\/\r\n .ia-agent-wrapper .text-glow { text-shadow: 0 0 10px rgba(245, 158, 11, 0.5); }\r\n \r\n \/* --- PASO A PASO --- *\/\r\n .ia-agent-wrapper .step-circle {\r\n width: 32px; height: 32px;\r\n background: rgba(245, 158, 11, 0.2);\r\n border: 1px solid #f59e0b;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-weight: bold;\r\n color: #fbbf24;\r\n font-family: 'Orbitron', sans-serif;\r\n }\r\n\r\n \/* --- ANIMACIONES --- *\/\r\n .ia-agent-wrapper .reveal {\r\n opacity: 0; transform: translateY(20px);\r\n transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);\r\n }\r\n .ia-agent-wrapper .reveal.active { opacity: 1; transform: translateY(0); }\r\n .ia-agent-wrapper .delay-100 { transition-delay: 0.1s; }\r\n .ia-agent-wrapper .delay-200 { transition-delay: 0.2s; }\r\n .ia-agent-wrapper .delay-300 { transition-delay: 0.3s; }\r\n\r\n .ia-agent-wrapper .prompt-container {\r\n max-height: 120px;\r\n overflow: hidden;\r\n transition: max-height 0.5s ease-in-out;\r\n }\r\n .ia-agent-wrapper .prompt-container.expanded {\r\n max-height: 1000px;\r\n }\r\n \r\n .ia-agent-wrapper * {\r\n box-sizing: border-box;\r\n }\r\n\r\n \/* --- ESTADO EXPIRADO --- *\/\r\n .ia-agent-wrapper .session-expired {\r\n filter: grayscale(1) !important;\r\n opacity: 0.6 !important;\r\n pointer-events: none !important;\r\n border-color: #475569 !important;\r\n background: rgba(30, 41, 59, 0.4) !important;\r\n box-shadow: none !important;\r\n }\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <div class=\"ia-agent-wrapper font-sans antialiased\">\r\n \r\n \r\n <div class=\"absolute inset-0 z-0 pointer-events-none overflow-hidden\">\r\n <div class=\"cyber-grid\"><\/div>\r\n <div class=\"absolute bottom-0 left-0 w-full h-1\/2 bg-gradient-to-t from-slate-950 to-transparent\"><\/div>\r\n \r\n <div class=\"absolute top-20 right-20 w-96 h-96 bg-amber-600\/10 rounded-full blur-[100px] animate-pulse\"><\/div>\r\n <div class=\"absolute bottom-20 left-20 w-96 h-96 bg-orange-600\/10 rounded-full blur-[100px] animate-pulse\" style=\"animation-delay: 1s;\"><\/div>\r\n <\/div>\r\n\r\n \r\n <nav class=\"relative z-40 w-full p-4 md:p-6 flex justify-between items-center border-b border-white\/5 bg-slate-950\/50 backdrop-blur-md\">\r\n <div class=\"flex items-center gap-3\">\r\n <a href=\"https:\/\/redporlaciberseguridad.org\/semana-de-la-ia\/\" class=\"text-gray-400 hover:text-white transition-colors flex items-center gap-2 text-xs md:text-sm uppercase tracking-widest font-tech decoration-0 no-underline\">\r\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\"><\/path><\/svg>\r\n <span class=\"hidden sm:inline\">Volver a <\/span>Inicio\r\n <\/a>\r\n <\/div>\r\n <div class=\"flex items-center gap-2\">\r\n <div class=\"w-2 h-2 rounded-full bg-amber-500 animate-pulse\"><\/div>\r\n <span class=\"text-amber-400 font-bold font-tech text-xs md:text-sm\">MODO: CHEF<\/span>\r\n <\/div>\r\n <\/nav>\r\n\r\n \r\n <main class=\"relative z-10 flex-1 flex flex-col lg:flex-row items-center lg:items-start justify-center gap-8 lg:gap-16 p-4 md:p-6 lg:p-12 max-w-7xl mx-auto w-full pt-8\">\r\n \r\n \r\n <div class=\"w-full lg:w-[400px] flex-shrink-0 flex justify-center relative lg:sticky lg:top-24 mb-6 lg:mb-0 reveal\">\r\n <div class=\"phone-frame w-full max-w-[320px] lg:max-w-full group shadow-2xl bg-black relative overflow-hidden\">\r\n \r\n \r\n <iframe \r\n id=\"chefVideo\"\r\n class=\"w-full h-full object-cover\"\r\n src=\"https:\/\/www.youtube.com\/embed\/umb1duw7kh0?enablejsapi=1&rel=0&modestbranding=1&autoplay=1&mute=1&playsinline=1\" \r\n title=\"Asistente Chef\" \r\n frameborder=\"0\" \r\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" \r\n referrerpolicy=\"strict-origin-when-cross-origin\" \r\n allowfullscreen>\r\n <\/iframe>\r\n \r\n \r\n <div id=\"videoOverlay\" onclick=\"playVideo()\" class=\"absolute inset-0 z-30 cursor-pointer bg-black\/40 hover:bg-black\/20 transition-all duration-300 group\">\r\n \r\n \r\n <div class=\"absolute bottom-0 left-0 w-full p-6 bg-gradient-to-t from-black via-black\/80 to-transparent pt-20 z-10\">\r\n <h3 class=\"text-white font-bold text-lg text-glow\">Asistente Chef \ud83c\udf73<\/h3>\r\n <p class=\"text-gray-300 text-sm\">Recetas con lo que tienes...<\/p>\r\n <div class=\"w-full bg-gray-700 h-1 rounded-full mt-3 overflow-hidden\">\r\n <div class=\"w-1\/3 h-full bg-amber-500\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex-1 w-full max-w-2xl reveal delay-100\">\r\n \r\n \r\n <div class=\"mb-8 border-b border-gray-800 pb-6\">\r\n <div class=\"flex items-center gap-4 mb-2\">\r\n <span class=\"text-4xl md:text-5xl\">\ud83c\udf73<\/span>\r\n <div>\r\n <h1 class=\"text-2xl md:text-3xl lg:text-5xl font-black text-white font-tech text-glow leading-tight\">AGENTE CHEF<\/h1>\r\n <p class=\"text-amber-400 font-bold uppercase tracking-widest text-xs md:text-sm mt-1\">Tu Asistente de Cocina 24\/7<\/p>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-gray-400 text-base md:text-lg mt-4 leading-relaxed\">\r\n \u00bfCansado de no saber qu\u00e9 cocinar o tienes pocos ingredientes? <span class=\"text-white font-bold\">Convierte a la IA en tu Chef Personal<\/span> y crea recetas deliciosas con lo que hay en tu refri.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"mb-10 relative\">\r\n <h3 class=\"text-white font-bold font-tech text-lg mb-6 flex items-center gap-2\">\r\n <span class=\"w-2 h-6 bg-amber-500 block\"><\/span>\r\n C\u00d3MO ACTIVAR TU CHEF IA\r\n <\/h3>\r\n \r\n <div class=\"space-y-8 relative pl-4 border-l border-gray-800 ml-2\">\r\n \r\n <div class=\"relative pl-6\">\r\n <div class=\"absolute -left-[27px] step-circle\">1<\/div>\r\n <h4 class=\"text-white font-bold text-sm uppercase\">Entra a la Inteligencia Artificial<\/h4>\r\n <p class=\"text-gray-400 text-sm mt-1\">Haz clic en este enlace: <a href=\"https:\/\/copilot.microsoft.com\/\" target=\"_blank\" class=\"text-amber-400 underline font-bold hover:text-amber-300 transition-colors\">https:\/\/copilot.microsoft.com\/<\/a>. Tambi\u00e9n puedes descargar la aplicaci\u00f3n en tu celular buscando <b>\"Copilot de Microsoft\"<\/b> en tu tienda de aplicaciones.<\/p>\r\n <\/div>\r\n \r\n <div class=\"relative pl-6\">\r\n <div class=\"absolute -left-[27px] step-circle\">2<\/div>\r\n <h4 class=\"text-white font-bold text-sm uppercase\">Copia la Instrucci\u00f3n \"Maestra\"<\/h4>\r\n <p class=\"text-gray-400 text-sm mt-1\">Busca el recuadro oscuro de abajo que dice <b>\"EL PROMPT MAESTRO\"<\/b> y presiona el bot\u00f3n naranja <b>\"Copiar Prompt\"<\/b>. Esto copiar\u00e1 autom\u00e1ticamente las reglas que el Chef debe seguir.<\/p>\r\n <\/div>\r\n \r\n <div class=\"relative pl-6\">\r\n <div class=\"absolute -left-[27px] step-circle\">3<\/div>\r\n <h4 class=\"text-white font-bold text-sm uppercase\">Pega y Personaliza en Copilot<\/h4>\r\n <p class=\"text-gray-400 text-sm mt-1\">Regresa a la pesta\u00f1a de Copilot y pega el texto en el chat. Antes de enviarlo, <b>sustituye el texto entre corchetes<\/b> con los ingredientes reales que tienes en tu cocina.<\/p>\r\n <\/div>\r\n \r\n <div class=\"relative pl-6\">\r\n <div class=\"absolute -left-[27px] step-circle\">4<\/div>\r\n <h4 class=\"text-white font-bold text-sm uppercase\">\u00a1Listo para cocinar!<\/h4>\r\n <p class=\"text-gray-400 text-sm mt-1\">Presiona \"Enter\" y deja que la IA te gu\u00ede paso a paso. Si te falta algo, simplemente preg\u00fantale: \"\u00bfCon qu\u00e9 puedo sustituir la cebolla?\".<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"mb-10 reveal delay-200\">\r\n <div class=\"flex justify-between items-end mb-3\">\r\n <h3 class=\"text-white font-bold font-tech flex items-center gap-2 text-sm md:text-base\">\r\n <span class=\"w-2 h-6 bg-amber-500 block\"><\/span>\r\n EL PROMPT MAESTRO\r\n <\/h3>\r\n <div class=\"flex gap-2\">\r\n <span class=\"text-[10px] md:text-xs text-green-400 uppercase tracking-wider font-mono bg-green-500\/10 px-2 py-1 rounded hidden\" id=\"copySuccess\">\u00a1Copiado!<\/span>\r\n <span class=\"text-[10px] md:text-xs text-amber-400 uppercase tracking-wider font-mono bg-amber-500\/10 px-2 py-1 rounded\">Chef Mode<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"terminal-box p-4 md:p-6 rounded-lg text-sm text-gray-300 leading-relaxed shadow-2xl group relative\">\r\n <div class=\"absolute top-2 right-2 flex gap-1\">\r\n <div class=\"w-2 h-2 md:w-3 md:h-3 rounded-full bg-red-500\/20 border border-red-500\"><\/div>\r\n <div class=\"w-2 h-2 md:w-3 md:h-3 rounded-full bg-yellow-500\/20 border border-yellow-500\"><\/div>\r\n <div class=\"w-2 h-2 md:w-3 md:h-3 rounded-full bg-green-500\/20 border border-green-500\"><\/div>\r\n <\/div>\r\n \r\n <p class=\"mb-4 text-amber-300 text-xs md:text-sm\">\/\/ Instrucci\u00f3n para IA:<\/p>\r\n \r\n <div id=\"promptContainer\" class=\"prompt-container relative\">\r\n <p id=\"promptText\" class=\"whitespace-pre-line font-mono text-xs md:text-sm text-gray-300\">\r\n \r\n <\/p>\r\n <div id=\"fadeOverlay\" class=\"absolute bottom-0 left-0 w-full h-20 bg-gradient-to-t from-[#0f172a] to-transparent pointer-events-none transition-opacity duration-300\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"mt-6 flex flex-col sm:flex-row gap-3 pt-4 border-t border-gray-800\">\r\n <button onclick=\"copyFullPrompt()\" class=\"w-full sm:flex-1 bg-amber-600 hover:bg-amber-500 text-white py-3 sm:py-2 px-4 rounded text-xs font-bold uppercase tracking-wider flex items-center justify-center gap-2 transition-all hover:scale-[1.02] shadow-lg shadow-amber-900\/20 order-1 sm:order-1\">\r\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3\"><\/path><\/svg>\r\n Copiar Prompt\r\n <\/button>\r\n <button onclick=\"togglePrompt()\" id=\"toggleBtn\" class=\"w-full sm:w-auto px-4 py-3 sm:py-2 border border-gray-600 hover:border-amber-400 text-gray-400 hover:text-white rounded text-xs font-bold uppercase transition-all flex items-center justify-center gap-2 order-2 sm:order-2\">\r\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"><\/path><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z\"><\/path><\/svg>\r\n Ver Todo\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"mb-10 p-5 rounded-lg border border-amber-500\/20 bg-amber-500\/5 reveal delay-300\">\r\n <h4 class=\"text-amber-400 font-bold font-tech uppercase mb-3 flex items-center gap-2\">\r\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"><\/path><\/svg>\r\n 3 Consejos de Oro\r\n <\/h4>\r\n <ul class=\"text-sm text-gray-400 space-y-2 list-disc pl-4\">\r\n <li><span class=\"text-white font-bold\">S\u00e9 espec\u00edfico:<\/span> No digas \"tengo verdura\", di \"tengo dos zanahorias tristes\".<\/li>\r\n <li><span class=\"text-white font-bold\">Define el tiempo:<\/span> Si tienes prisa, especifica \"receta de 5 minutos\".<\/li>\r\n <li><span class=\"text-white font-bold\">Pide sustitutos:<\/span> Si te falta algo, pregunta \"\u00bfCon qu\u00e9 sustituyo la crema?\".<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex flex-col gap-6 reveal delay-300 border-t border-gray-800 pt-8 pb-10 sm:pb-0\">\r\n \r\n \r\n <div id=\"liveSessionCard\" class=\"bg-gradient-to-r from-red-900\/40 to-amber-900\/40 border border-red-500\/50 p-4 rounded-xl flex flex-col md:flex-row items-center justify-between gap-4 shadow-[0_0_15px_rgba(239,68,68,0.2)] transition-all\">\r\n <div class=\"flex items-center gap-4 text-center md:text-left\">\r\n <div class=\"relative\">\r\n <span id=\"liveIcon\" class=\"text-3xl\">\ud83d\udd34<\/span>\r\n <div id=\"livePing\" class=\"absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full animate-ping\"><\/div>\r\n <\/div>\r\n <div>\r\n <h4 id=\"liveStatus\" class=\"text-white font-bold text-base font-tech tracking-tight uppercase\">\u00a1SESI\u00d3N EN VIVO!<\/h4>\r\n <p id=\"liveDate\" class=\"text-gray-300 text-xs\">\u00danete este <span class=\"text-red-400 font-bold\">17 de Abril, 2026<\/span> para ver al Agente en acci\u00f3n.<\/p>\r\n <\/div>\r\n <\/div>\r\n <a id=\"liveLink\" href=\"https:\/\/forms.office.com\/pages\/responsepage.aspx?id=PrFFKQuFrU-IqDW_pMoqULLHmYjb64BBndQsaYIJHQ9UMkZNWkdRSTVRNDkwVDBCUFJQMFBNVDVSUS4u&route=shorturl\" target=\"_blank\" class=\"w-full md:w-auto bg-red-600 hover:bg-red-500 text-white px-6 py-2 rounded-full font-bold text-sm uppercase tracking-wider transition-all transform hover:scale-105 shadow-lg no-underline text-center\">\r\n Registrarme Ahora\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"flex flex-col sm:flex-row gap-4\">\r\n \r\n <a id=\"btnConstancia\" href=\"https:\/\/forms.office.com\/r\/E5eBbtnYtZ\" target=\"_blank\" class=\"btn-action flex-1 py-4 px-6 rounded-lg font-bold text-white text-base md:text-lg font-tech uppercase tracking-wide flex items-center justify-center gap-3 shadow-[0_0_20px_rgba(245,158,11,0.4)] decoration-0 no-underline\">\r\n <span>\ud83d\udcdc Obtener Constancia<\/span>\r\n <svg class=\"w-5 h-5 animate-pulse\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"><\/path><\/svg>\r\n <\/a>\r\n \r\n \r\n <a href=\"https:\/\/redporlaciberseguridad.org\/semana-de-la-ia\/\" class=\"btn-outline py-4 px-6 rounded-lg font-bold text-amber-400 font-tech uppercase tracking-wide flex-1 sm:flex-none flex items-center justify-center gap-2 group text-sm md:text-base decoration-0 no-underline\">\r\n <svg class=\"w-4 h-4 group-hover:-translate-x-1 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 19l-7-7m0 0l7-7m-7 7h18\"><\/path><\/svg>\r\n Ver M\u00e1s Agentes\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-center text-xs text-gray-500 mt-4 mb-8 sm:mb-0\">Al obtener tu constancia certificas que has configurado exitosamente tu agente.<\/p>\r\n\r\n <\/div>\r\n <\/main>\r\n\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Animaciones de entrada\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const reveals = document.querySelectorAll('.reveal');\r\n reveals.forEach((el, index) => {\r\n setTimeout(() => {\r\n el.classList.add('active');\r\n }, index * 100);\r\n });\r\n \r\n \/\/ Inyectar el Prompt\r\n document.getElementById('promptText').innerText = chefPrompt;\r\n\r\n \/\/ --- L\u00d3GICA DE CADUCIDAD SESI\u00d3N EN VIVO ---\r\n const expirationDate = new Date('2026-04-17T23:59:59'); \r\n const today = new Date();\r\n \r\n if (today > expirationDate) {\r\n const liveCard = document.getElementById('liveSessionCard');\r\n const liveLink = document.getElementById('liveLink');\r\n const livePing = document.getElementById('livePing');\r\n const liveIcon = document.getElementById('liveIcon');\r\n const liveStatus = document.getElementById('liveStatus');\r\n const liveDateText = document.getElementById('liveDate');\r\n\r\n if (liveCard) {\r\n liveCard.classList.add('session-expired');\r\n if (liveLink) {\r\n liveLink.innerText = 'Sesi\u00f3n Finalizada';\r\n liveLink.style.background = '#475569';\r\n }\r\n if (livePing) livePing.style.display = 'none';\r\n if (icon) liveIcon.innerText = '\u26aa';\r\n if (status) liveStatus.innerText = 'Sesi\u00f3n Concluida';\r\n if (liveDateText) liveDateText.innerHTML = 'Este evento ocurri\u00f3 el 17 de Abril, 2026.';\r\n }\r\n }\r\n });\r\n\r\n const chefPrompt = `Act\u00faa como un chef profesional experto en cocina de aprovechamiento.\r\n\r\nTengo estos ingredientes: [Ingresa aqu\u00ed tu lista, ej: 2 huevos, media cebolla, un poco de queso, lata de at\u00fan].\r\n\r\nTu misi\u00f3n:\r\n1. Dise\u00f1a una receta saludable, rica y personalizada.\r\n2. Que se prepare en menos de [Ingresa tiempo, ej: 15 minutos].\r\n3. Detalla los pasos de preparaci\u00f3n claramente.\r\n4. Dime el valor nutricional aproximado.\r\n\r\nSi te pido sustitutos para alg\u00fan ingrediente que me falte o si tengo alguna restricci\u00f3n alimentaria (gluten, vegano, alergias), adapta la receta inmediatamente.`;\r\n\r\n function togglePrompt() {\r\n const container = document.getElementById('promptContainer');\r\n const overlay = document.getElementById('fadeOverlay');\r\n const btn = document.getElementById('toggleBtn');\r\n \r\n container.classList.toggle('expanded');\r\n \r\n if (container.classList.contains('expanded')) {\r\n overlay.style.opacity = '0';\r\n overlay.style.pointerEvents = 'none';\r\n btn.innerHTML = 'Colapsar';\r\n } else {\r\n overlay.style.opacity = '1';\r\n overlay.style.pointerEvents = 'auto';\r\n btn.innerHTML = `<svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"><\/path><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z\"><\/path><\/svg> Ver Todo`;\r\n }\r\n }\r\n\r\n function copyFullPrompt() {\r\n const textArea = document.createElement(\"textarea\");\r\n textArea.value = chefPrompt;\r\n document.body.appendChild(textArea);\r\n textArea.select();\r\n try {\r\n document.execCommand('copy');\r\n const successMsg = document.getElementById('copySuccess');\r\n successMsg.classList.remove('hidden');\r\n setTimeout(() => {\r\n successMsg.classList.add('hidden');\r\n }, 3000);\r\n } catch (err) {\r\n console.error('Error al copiar: ', err);\r\n }\r\n document.body.removeChild(textArea);\r\n }\r\n\r\n function playVideo() {\r\n const iframe = document.getElementById('chefVideo');\r\n const overlay = document.getElementById('videoOverlay');\r\n \r\n if (iframe && overlay) {\r\n overlay.style.opacity = '0';\r\n overlay.style.pointerEvents = 'none';\r\n \r\n setTimeout(() => {\r\n overlay.style.display = 'none';\r\n }, 300);\r\n\r\n iframe.contentWindow.postMessage('{\"event\":\"command\",\"func\":\"playVideo\",\"args\":\"\"}', '*');\r\n }\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3d320d7 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"3d320d7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Agente Chef | Semana de la IA Volver a Inicio MODO: CHEF Asistente Chef \ud83c\udf73 Recetas con lo que tienes… \ud83c\udf73 AGENTE CHEF Tu Asistente de Cocina 24\/7 \u00bfCansado de no saber qu\u00e9 cocinar o tienes pocos ingredientes? Convierte a la IA en tu Chef Personal y crea recetas deliciosas con lo que hay en<\/p>","protected":false},"author":8,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-18117","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/redporlaciberseguridad.org\/en\/wp-json\/wp\/v2\/pages\/18117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/redporlaciberseguridad.org\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/redporlaciberseguridad.org\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/redporlaciberseguridad.org\/en\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/redporlaciberseguridad.org\/en\/wp-json\/wp\/v2\/comments?post=18117"}],"version-history":[{"count":55,"href":"https:\/\/redporlaciberseguridad.org\/en\/wp-json\/wp\/v2\/pages\/18117\/revisions"}],"predecessor-version":[{"id":19818,"href":"https:\/\/redporlaciberseguridad.org\/en\/wp-json\/wp\/v2\/pages\/18117\/revisions\/19818"}],"wp:attachment":[{"href":"https:\/\/redporlaciberseguridad.org\/en\/wp-json\/wp\/v2\/media?parent=18117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}