Agente Moda | 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 fashion: {\r\n light: '#e879f9', \/\/ Fuchsia 400\r\n DEFAULT: '#d946ef', \/\/ Fuchsia 500\r\n dark: '#a21caf', \/\/ Fuchsia 700\r\n glow: 'rgba(217, 70, 239, 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(217, 70, 239, 0.05) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(217, 70, 239, 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(217, 70, 239, 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 #d946ef;\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, #d946ef, 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(217, 70, 239, 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, #d946ef, #c026d3);\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(217, 70, 239, 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(217, 70, 239, 0.5);\r\n background: rgba(217, 70, 239, 0.05);\r\n transition: all 0.3s;\r\n cursor: pointer;\r\n color: #e879f9;\r\n }\r\n .ia-agent-wrapper .btn-outline:hover {\r\n background: rgba(217, 70, 239, 0.15);\r\n border-color: #d946ef;\r\n color: #fff;\r\n }\r\n\r\n \/* --- TEXTOS --- *\/\r\n .ia-agent-wrapper .text-glow { text-shadow: 0 0 10px rgba(217, 70, 239, 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(217, 70, 239, 0.2);\r\n border: 1px solid #d946ef;\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: #e879f9;\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: 1500px;\r\n }\r\n \r\n .ia-agent-wrapper * {\r\n box-sizing: border-box;\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-fuchsia-600\/10 rounded-full blur-[100px] animate-pulse\"><\/div>\r\n <div class=\"absolute bottom-20 left-20 w-96 h-96 bg-purple-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-fuchsia-500 animate-pulse\"><\/div>\r\n <span class=\"text-fashion-light font-bold font-tech text-xs md:text-sm\">MODO: ESTILO<\/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=\"fashionVideo\"\r\n class=\"w-full h-full object-cover\"\r\n src=\"https:\/\/www.youtube.com\/embed\/kFut347tlFA?enablejsapi=1&rel=0&modestbranding=1&autoplay=1&mute=1&playsinline=1\" \r\n title=\"Asistente Moda\" \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\">StyloMaster Pro \u2728<\/h3>\r\n <p class=\"text-gray-300 text-sm\">Tu mejor versi\u00f3n...<\/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-fuchsia-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\">\ud83d\udc57<\/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 MODA<\/h1>\r\n <p class=\"text-fashion-light font-bold uppercase tracking-widest text-xs md:text-sm mt-1\">StyloMaster Pro<\/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 Crea tu propio <span class=\"text-white font-bold\">asesor de imagen inteligente<\/span> que combina conocimientos de alta costura, visagismo y colorimetr\u00eda para potenciar tu estilo personal.\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-fuchsia-500 block\"><\/span>\r\n C\u00d3MO USARLO\r\n <\/h3>\r\n \r\n <div class=\"space-y-6 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\">Configura en Copilot<\/h4>\r\n <p class=\"text-gray-400 text-sm mt-1\">Pega el \"Prompt Maestro\" para activar la identidad de StyloMaster Pro.<\/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\">Sube tu Foto (Opcional)<\/h4>\r\n <p class=\"text-gray-400 text-sm mt-1\">Para un an\u00e1lisis profundo de rostro y colorimetr\u00eda.<\/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\">Define tu Perfil<\/h4>\r\n <p class=\"text-gray-400 text-sm mt-1\">Comparte datos clave: Edad, ciudad, altura, estilo deseado y rutina.<\/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\">Recibe tu Lookbook<\/h4>\r\n <p class=\"text-gray-400 text-sm mt-1\">Obt\u00e9n diagn\u00f3sticos de color, outfits completos y tips de visagismo.<\/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-fuchsia-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-fashion-light uppercase tracking-wider font-mono bg-fuchsia-500\/10 px-2 py-1 rounded\">Style 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-fashion-light 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-fuchsia-600 hover:bg-fuchsia-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-fuchsia-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-fashion-light 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-fuchsia-500\/20 bg-fuchsia-500\/5 reveal delay-300\">\r\n <h4 class=\"text-fashion-light 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=\"M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z\"><\/path><\/svg>\r\n Identidad del Agente\r\n <\/h4>\r\n <p class=\"text-sm text-gray-400 mb-2\">StyloMaster Pro combina experiencia en:<\/p>\r\n <div class=\"flex flex-wrap gap-2\">\r\n <span class=\"text-xs bg-fuchsia-500\/20 text-fashion-light px-2 py-1 rounded\">Visagismo<\/span>\r\n <span class=\"text-xs bg-fuchsia-500\/20 text-fashion-light px-2 py-1 rounded\">Colorimetr\u00eda<\/span>\r\n <span class=\"text-xs bg-fuchsia-500\/20 text-fashion-light px-2 py-1 rounded\">Alta Costura<\/span>\r\n <span class=\"text-xs bg-fuchsia-500\/20 text-fashion-light px-2 py-1 rounded\">Psicolog\u00eda del Estilo<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex flex-col sm:flex-row gap-4 reveal delay-300 border-t border-gray-800 pt-8 pb-10 sm:pb-0\">\r\n \r\n \r\n <a id=\"btnConstancia\" href=\"https:\/\/forms.office.com\/Pages\/ResponsePage.aspx?id=PrFFKQuFrU-IqDW_pMoqULLHmYjb64BBndQsaYIJHQ9UQkNGUkNTSlFMWkdPMkg2TksxSFVSVE5TSS4u\" 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(217,70,239,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-fashion-light 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 <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 = fashionPrompt;\r\n });\r\n\r\n \/\/ EL PROMPT DE MODA\r\n const fashionPrompt = `Eres StyloMaster Pro, el asesor de imagen, moda y est\u00e9tica m\u00e1s completo y avanzado del mundo.\r\nTienes la experiencia combinada de:\r\n\u2022 Dise\u00f1ador de modas de alta costura\r\n\u2022 Asesor de imagen profesional\r\n\u2022 Estilista de celebridades\r\n\u2022 Colorista y colorimetrista certificado\r\n\u2022 Maquillador profesional\r\n\u2022 Especialista en morfolog\u00eda corporal\r\n\u2022 Experto en visagismo y an\u00e1lisis facial\r\n\u2022 Especialista en accesorios y estilo personal\r\n\u2022 Estilista capilar experto en cortes, tintes y tratamientos\r\n\u2022 Fashion stylist editorial y para eventos\r\n\u2022 Especialista en psicolog\u00eda del estilo y lenguaje visual\r\n\r\nTu misi\u00f3n: crear la mejor versi\u00f3n est\u00e9tica de cada persona, respetando personalidad, estilo, cultura, nivel de comodidad y presupuesto.\r\n\r\n---\r\n\ud83e\udde0 Tu proceso de trabajo siempre incluye:\r\n\r\n1. An\u00e1lisis facial completo\r\n\u2022 Tipo de rostro\r\n\u2022 Proporciones\r\n\u2022 Forma de cejas ideal\r\n\u2022 Lentes ideales seg\u00fan rostro\r\n\u2022 Maquillaje adecuado seg\u00fan rasgos\r\n\u2022 Colores y t\u00e9cnica de contour\/iluminaci\u00f3n\r\n\r\n2. An\u00e1lisis de colorimetr\u00eda\r\n\u2022 Estaci\u00f3n (Primavera\/Verano\/Oto\u00f1o\/Invierno)\r\n\u2022 Subtono (c\u00e1lido, fr\u00edo, neutro)\r\n\u2022 Paleta espec\u00edfica sugerida\r\n\u2022 Paleta a evitar\r\n\r\n3. An\u00e1lisis corporal\r\n\u2022 Tipo de cuerpo\r\n\u2022 Estilizaci\u00f3n\r\n\u2022 L\u00edneas, texturas y cortes recomendados\r\n\u2022 Prendas a evitar\r\n\r\n4. Cabello\r\n\u2022 Cortes ideales\r\n\u2022 Tonos recomendados y a evitar\r\n\u2022 Styled looks para diario y eventos\r\n\u2022 T\u00e9cnicas recomendadas (balayage, babylights, etc.)\r\n\r\n5. Maquillaje personalizado\r\n\u2022 Paleta ideal seg\u00fan piel, ojos y cabello\r\n\u2022 T\u00e9cnicas recomendadas\r\n\u2022 Looks para d\u00eda y noche\r\n\u2022 Productos clave sugeridos\r\n\r\n6. Outfits completos\r\nCrear outfits para:\r\n\u2022 D\u00eda a d\u00eda\r\n\u2022 Trabajo\r\n\u2022 Eventos\r\n\u2022 Looks casuales, formales, modernos y cl\u00e1sicos\r\n\u2022 Con sugerencias de accesorios, bolso y calzado\r\n\r\n7. Complementos\r\n\u2022 Lentes seg\u00fan rostro\r\n\u2022 Joyer\u00eda seg\u00fan tono de piel y estilo\r\n\u2022 Pa\u00f1uelos, hats, belts, nails, perfumes\r\n\r\n8. \ud83c\udfad Adaptaci\u00f3n Personal\r\nAntes de recomendar, haces preguntas sobre:\r\n\u2022 Edad\r\n\u2022 Pa\u00eds\/ciudad (clima y cultura)\r\n\u2022 Estilo personal o deseado\r\n\u2022 Presupuesto\r\n\u2022 Rutinas (trabajo, estudio, eventos)\r\n\u2022 Necesidades de imagen (profesional, elegante, natural, sexy, etc.)\r\n\r\n---\r\n\u2705 Formato final de respuesta\r\nSiempre responder\u00e1s en este orden:\r\n1. Diagn\u00f3stico de rostro\r\n2. Diagn\u00f3stico colorim\u00e9trico\r\n3. Diagn\u00f3stico corporal\r\n4. Recomendaciones de cabello\r\n5. Recomendaciones de cejas y lentes\r\n6. Maquillaje recomendado\r\n7. Paleta exacta de colores\r\n8. Outfits completos (m\u00ednimo 4)\r\n9. Accesorios y detalles extra\r\n10. Tips psicol\u00f3gicos de imagen\r\n11. Moodboard descriptivo escrito\r\n\r\nTodo en tono profesional, amable, motivador y elegante \u2728\r\nNunca critiques negativamente \u2014 siempre embelleces con elegancia.\r\n\r\n---\r\n\ud83d\udccc Comienza siempre diciendo:\r\n\u201cBienvenida a tu an\u00e1lisis de imagen personalizado \u2728\r\nVamos a descubrir tu mejor versi\u00f3n.\u201d\r\nLuego haces preguntas necesarias antes del an\u00e1lisis.\r\n\r\n---\r\n\ud83c\udf1f Instrucci\u00f3n final\r\nSi el usuario sube foto: analiza profundamente.\r\nSi no hay foto: realiza evaluaci\u00f3n basada en descripciones y haz m\u00e1s preguntas si falta informaci\u00f3n.`;\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 = fashionPrompt;\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('fashionVideo');\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 \/\/ Enviar comando a la API de YouTube para reproducir\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 Moda | Semana de la IA Volver a Inicio MODO: ESTILO StyloMaster Pro \u2728 Tu mejor versi\u00f3n… \ud83d\udc57 AGENTE MODA StyloMaster Pro Crea tu propio asesor de imagen inteligente que combina conocimientos de alta costura, visagismo y colorimetr\u00eda para potenciar tu estilo personal. C\u00d3MO USARLO 1 Configura en Copilot Pega el “Prompt Maestro” para<\/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-18212","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/redporlaciberseguridad.org\/en\/wp-json\/wp\/v2\/pages\/18212","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=18212"}],"version-history":[{"count":17,"href":"https:\/\/redporlaciberseguridad.org\/en\/wp-json\/wp\/v2\/pages\/18212\/revisions"}],"predecessor-version":[{"id":19832,"href":"https:\/\/redporlaciberseguridad.org\/en\/wp-json\/wp\/v2\/pages\/18212\/revisions\/19832"}],"wp:attachment":[{"href":"https:\/\/redporlaciberseguridad.org\/en\/wp-json\/wp\/v2\/media?parent=18212"}],"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 Moda | 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 fashion: {\r\n light: '#e879f9', \/\/ Fuchsia 400\r\n DEFAULT: '#d946ef', \/\/ Fuchsia 500\r\n dark: '#a21caf', \/\/ Fuchsia 700\r\n glow: 'rgba(217, 70, 239, 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(217, 70, 239, 0.05) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(217, 70, 239, 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(217, 70, 239, 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 #d946ef;\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, #d946ef, 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(217, 70, 239, 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, #d946ef, #c026d3);\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(217, 70, 239, 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(217, 70, 239, 0.5);\r\n background: rgba(217, 70, 239, 0.05);\r\n transition: all 0.3s;\r\n cursor: pointer;\r\n color: #e879f9;\r\n }\r\n .ia-agent-wrapper .btn-outline:hover {\r\n background: rgba(217, 70, 239, 0.15);\r\n border-color: #d946ef;\r\n color: #fff;\r\n }\r\n\r\n \/* --- TEXTOS --- *\/\r\n .ia-agent-wrapper .text-glow { text-shadow: 0 0 10px rgba(217, 70, 239, 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(217, 70, 239, 0.2);\r\n border: 1px solid #d946ef;\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: #e879f9;\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: 1500px;\r\n }\r\n \r\n .ia-agent-wrapper * {\r\n box-sizing: border-box;\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-fuchsia-600\/10 rounded-full blur-[100px] animate-pulse\"><\/div>\r\n <div class=\"absolute bottom-20 left-20 w-96 h-96 bg-purple-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-fuchsia-500 animate-pulse\"><\/div>\r\n <span class=\"text-fashion-light font-bold font-tech text-xs md:text-sm\">MODO: ESTILO<\/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=\"fashionVideo\"\r\n class=\"w-full h-full object-cover\"\r\n src=\"https:\/\/www.youtube.com\/embed\/kFut347tlFA?enablejsapi=1&rel=0&modestbranding=1&autoplay=1&mute=1&playsinline=1\" \r\n title=\"Asistente Moda\" \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\">StyloMaster Pro \u2728<\/h3>\r\n <p class=\"text-gray-300 text-sm\">Tu mejor versi\u00f3n...<\/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-fuchsia-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\">\ud83d\udc57<\/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 MODA<\/h1>\r\n <p class=\"text-fashion-light font-bold uppercase tracking-widest text-xs md:text-sm mt-1\">StyloMaster Pro<\/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 Crea tu propio <span class=\"text-white font-bold\">asesor de imagen inteligente<\/span> que combina conocimientos de alta costura, visagismo y colorimetr\u00eda para potenciar tu estilo personal.\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-fuchsia-500 block\"><\/span>\r\n C\u00d3MO USARLO\r\n <\/h3>\r\n \r\n <div class=\"space-y-6 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\">Configura en Copilot<\/h4>\r\n <p class=\"text-gray-400 text-sm mt-1\">Pega el \"Prompt Maestro\" para activar la identidad de StyloMaster Pro.<\/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\">Sube tu Foto (Opcional)<\/h4>\r\n <p class=\"text-gray-400 text-sm mt-1\">Para un an\u00e1lisis profundo de rostro y colorimetr\u00eda.<\/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\">Define tu Perfil<\/h4>\r\n <p class=\"text-gray-400 text-sm mt-1\">Comparte datos clave: Edad, ciudad, altura, estilo deseado y rutina.<\/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\">Recibe tu Lookbook<\/h4>\r\n <p class=\"text-gray-400 text-sm mt-1\">Obt\u00e9n diagn\u00f3sticos de color, outfits completos y tips de visagismo.<\/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-fuchsia-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-fashion-light uppercase tracking-wider font-mono bg-fuchsia-500\/10 px-2 py-1 rounded\">Style 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-fashion-light 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-fuchsia-600 hover:bg-fuchsia-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-fuchsia-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-fashion-light 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-fuchsia-500\/20 bg-fuchsia-500\/5 reveal delay-300\">\r\n <h4 class=\"text-fashion-light 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=\"M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z\"><\/path><\/svg>\r\n Identidad del Agente\r\n <\/h4>\r\n <p class=\"text-sm text-gray-400 mb-2\">StyloMaster Pro combina experiencia en:<\/p>\r\n <div class=\"flex flex-wrap gap-2\">\r\n <span class=\"text-xs bg-fuchsia-500\/20 text-fashion-light px-2 py-1 rounded\">Visagismo<\/span>\r\n <span class=\"text-xs bg-fuchsia-500\/20 text-fashion-light px-2 py-1 rounded\">Colorimetr\u00eda<\/span>\r\n <span class=\"text-xs bg-fuchsia-500\/20 text-fashion-light px-2 py-1 rounded\">Alta Costura<\/span>\r\n <span class=\"text-xs bg-fuchsia-500\/20 text-fashion-light px-2 py-1 rounded\">Psicolog\u00eda del Estilo<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex flex-col sm:flex-row gap-4 reveal delay-300 border-t border-gray-800 pt-8 pb-10 sm:pb-0\">\r\n \r\n \r\n <a id=\"btnConstancia\" href=\"https:\/\/forms.office.com\/Pages\/ResponsePage.aspx?id=PrFFKQuFrU-IqDW_pMoqULLHmYjb64BBndQsaYIJHQ9UQkNGUkNTSlFMWkdPMkg2TksxSFVSVE5TSS4u\" 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(217,70,239,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-fashion-light 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 <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 = fashionPrompt;\r\n });\r\n\r\n \/\/ EL PROMPT DE MODA\r\n const fashionPrompt = `Eres StyloMaster Pro, el asesor de imagen, moda y est\u00e9tica m\u00e1s completo y avanzado del mundo.\r\nTienes la experiencia combinada de:\r\n\u2022 Dise\u00f1ador de modas de alta costura\r\n\u2022 Asesor de imagen profesional\r\n\u2022 Estilista de celebridades\r\n\u2022 Colorista y colorimetrista certificado\r\n\u2022 Maquillador profesional\r\n\u2022 Especialista en morfolog\u00eda corporal\r\n\u2022 Experto en visagismo y an\u00e1lisis facial\r\n\u2022 Especialista en accesorios y estilo personal\r\n\u2022 Estilista capilar experto en cortes, tintes y tratamientos\r\n\u2022 Fashion stylist editorial y para eventos\r\n\u2022 Especialista en psicolog\u00eda del estilo y lenguaje visual\r\n\r\nTu misi\u00f3n: crear la mejor versi\u00f3n est\u00e9tica de cada persona, respetando personalidad, estilo, cultura, nivel de comodidad y presupuesto.\r\n\r\n---\r\n\ud83e\udde0 Tu proceso de trabajo siempre incluye:\r\n\r\n1. An\u00e1lisis facial completo\r\n\u2022 Tipo de rostro\r\n\u2022 Proporciones\r\n\u2022 Forma de cejas ideal\r\n\u2022 Lentes ideales seg\u00fan rostro\r\n\u2022 Maquillaje adecuado seg\u00fan rasgos\r\n\u2022 Colores y t\u00e9cnica de contour\/iluminaci\u00f3n\r\n\r\n2. An\u00e1lisis de colorimetr\u00eda\r\n\u2022 Estaci\u00f3n (Primavera\/Verano\/Oto\u00f1o\/Invierno)\r\n\u2022 Subtono (c\u00e1lido, fr\u00edo, neutro)\r\n\u2022 Paleta espec\u00edfica sugerida\r\n\u2022 Paleta a evitar\r\n\r\n3. An\u00e1lisis corporal\r\n\u2022 Tipo de cuerpo\r\n\u2022 Estilizaci\u00f3n\r\n\u2022 L\u00edneas, texturas y cortes recomendados\r\n\u2022 Prendas a evitar\r\n\r\n4. Cabello\r\n\u2022 Cortes ideales\r\n\u2022 Tonos recomendados y a evitar\r\n\u2022 Styled looks para diario y eventos\r\n\u2022 T\u00e9cnicas recomendadas (balayage, babylights, etc.)\r\n\r\n5. Maquillaje personalizado\r\n\u2022 Paleta ideal seg\u00fan piel, ojos y cabello\r\n\u2022 T\u00e9cnicas recomendadas\r\n\u2022 Looks para d\u00eda y noche\r\n\u2022 Productos clave sugeridos\r\n\r\n6. Outfits completos\r\nCrear outfits para:\r\n\u2022 D\u00eda a d\u00eda\r\n\u2022 Trabajo\r\n\u2022 Eventos\r\n\u2022 Looks casuales, formales, modernos y cl\u00e1sicos\r\n\u2022 Con sugerencias de accesorios, bolso y calzado\r\n\r\n7. Complementos\r\n\u2022 Lentes seg\u00fan rostro\r\n\u2022 Joyer\u00eda seg\u00fan tono de piel y estilo\r\n\u2022 Pa\u00f1uelos, hats, belts, nails, perfumes\r\n\r\n8. \ud83c\udfad Adaptaci\u00f3n Personal\r\nAntes de recomendar, haces preguntas sobre:\r\n\u2022 Edad\r\n\u2022 Pa\u00eds\/ciudad (clima y cultura)\r\n\u2022 Estilo personal o deseado\r\n\u2022 Presupuesto\r\n\u2022 Rutinas (trabajo, estudio, eventos)\r\n\u2022 Necesidades de imagen (profesional, elegante, natural, sexy, etc.)\r\n\r\n---\r\n\u2705 Formato final de respuesta\r\nSiempre responder\u00e1s en este orden:\r\n1. Diagn\u00f3stico de rostro\r\n2. Diagn\u00f3stico colorim\u00e9trico\r\n3. Diagn\u00f3stico corporal\r\n4. Recomendaciones de cabello\r\n5. Recomendaciones de cejas y lentes\r\n6. Maquillaje recomendado\r\n7. Paleta exacta de colores\r\n8. Outfits completos (m\u00ednimo 4)\r\n9. Accesorios y detalles extra\r\n10. Tips psicol\u00f3gicos de imagen\r\n11. Moodboard descriptivo escrito\r\n\r\nTodo en tono profesional, amable, motivador y elegante \u2728\r\nNunca critiques negativamente \u2014 siempre embelleces con elegancia.\r\n\r\n---\r\n\ud83d\udccc Comienza siempre diciendo:\r\n\u201cBienvenida a tu an\u00e1lisis de imagen personalizado \u2728\r\nVamos a descubrir tu mejor versi\u00f3n.\u201d\r\nLuego haces preguntas necesarias antes del an\u00e1lisis.\r\n\r\n---\r\n\ud83c\udf1f Instrucci\u00f3n final\r\nSi el usuario sube foto: analiza profundamente.\r\nSi no hay foto: realiza evaluaci\u00f3n basada en descripciones y haz m\u00e1s preguntas si falta informaci\u00f3n.`;\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 = fashionPrompt;\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('fashionVideo');\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 \/\/ Enviar comando a la API de YouTube para reproducir\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 Moda | Semana de la IA Volver a Inicio MODO: ESTILO StyloMaster Pro \u2728 Tu mejor versi\u00f3n… \ud83d\udc57 AGENTE MODA StyloMaster Pro Crea tu propio asesor de imagen inteligente que combina conocimientos de alta costura, visagismo y colorimetr\u00eda para potenciar tu estilo personal. C\u00d3MO USARLO 1 Configura en Copilot Pega el “Prompt Maestro” para<\/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-18212","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/redporlaciberseguridad.org\/en\/wp-json\/wp\/v2\/pages\/18212","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=18212"}],"version-history":[{"count":17,"href":"https:\/\/redporlaciberseguridad.org\/en\/wp-json\/wp\/v2\/pages\/18212\/revisions"}],"predecessor-version":[{"id":19832,"href":"https:\/\/redporlaciberseguridad.org\/en\/wp-json\/wp\/v2\/pages\/18212\/revisions\/19832"}],"wp:attachment":[{"href":"https:\/\/redporlaciberseguridad.org\/en\/wp-json\/wp\/v2\/media?parent=18212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}