{"id":19,"date":"2026-03-12T13:48:36","date_gmt":"2026-03-12T16:48:36","guid":{"rendered":"https:\/\/diegodiazpalma.com\/?page_id=19"},"modified":"2026-03-12T13:50:46","modified_gmt":"2026-03-12T16:50:46","slug":"demo","status":"publish","type":"page","link":"https:\/\/diegodiazpalma.com\/es\/demo\/","title":{"rendered":"Demo"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\ndiegodiazpalma.com \u2014 Propuesta de Paleta de Colores<\/title>\n<style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap');\n \n * { margin: 0; padding: 0; box-sizing: border-box; }\n \n body {\n font-family: 'Inter', sans-serif;\n background: #0A0A0F;\n color: #E8E8EC;\n padding: 40px 20px;\n min-height: 100vh;\n }\n\n .container {\n max-width: 960px;\n margin: 0 auto;\n }\n\n h1 {\n font-size: 28px;\n font-weight: 700;\n margin-bottom: 6px;\n color: #FFFFFF;\n }\n\n .subtitle {\n font-size: 14px;\n color: #888;\n margin-bottom: 48px;\n font-weight: 300;\n }\n\n h2 {\n font-size: 13px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 2px;\n color: #666;\n margin-bottom: 20px;\n margin-top: 48px;\n }\n\n h2:first-of-type { margin-top: 0; }\n\n .palette-row {\n display: flex;\n gap: 12px;\n margin-bottom: 32px;\n flex-wrap: wrap;\n }\n\n .swatch {\n flex: 1;\n min-width: 140px;\n border-radius: 12px;\n overflow: hidden;\n background: #1A1A22;\n border: 1px solid #2A2A35;\n }\n\n .swatch-color {\n height: 90px;\n display: flex;\n align-items: flex-end;\n padding: 10px 14px;\n }\n\n .swatch-info {\n padding: 14px;\n }\n\n .swatch-name {\n font-size: 13px;\n font-weight: 600;\n color: #E8E8EC;\n margin-bottom: 2px;\n }\n\n .swatch-hex {\n font-size: 12px;\n color: #888;\n font-family: 'SF Mono', 'Fira Code', monospace;\n }\n\n .swatch-use {\n font-size: 11px;\n color: #666;\n margin-top: 6px;\n line-height: 1.5;\n }\n\n .swatch-tag {\n display: inline-block;\n font-size: 10px;\n font-weight: 600;\n padding: 2px 8px;\n border-radius: 4px;\n margin-bottom: 4px;\n }\n\n \/* Comparison section *\/\n .comparison {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 24px;\n margin-bottom: 40px;\n }\n\n .comp-card {\n border-radius: 12px;\n padding: 28px;\n border: 1px solid #2A2A35;\n }\n\n .comp-card h3 {\n font-size: 14px;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .comp-card .label {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n color: #888;\n margin-bottom: 16px;\n }\n\n .color-strip {\n display: flex;\n border-radius: 8px;\n overflow: hidden;\n height: 40px;\n margin-bottom: 12px;\n }\n\n .color-strip div {\n flex: 1;\n }\n\n \/* Contrast demo *\/\n .contrast-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 16px;\n margin-bottom: 40px;\n }\n\n .contrast-card {\n border-radius: 10px;\n padding: 20px 24px;\n min-height: 80px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n border: 1px solid rgba(255,255,255,0.06);\n }\n\n .contrast-card .demo-text {\n font-size: 15px;\n font-weight: 500;\n margin-bottom: 4px;\n }\n\n .contrast-card .contrast-info {\n font-size: 11px;\n opacity: 0.65;\n }\n\n \/* Mock section *\/\n .mock-section {\n border-radius: 16px;\n overflow: hidden;\n margin-bottom: 40px;\n border: 1px solid #2A2A35;\n }\n\n .mock-nav {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 14px 28px;\n font-size: 13px;\n font-weight: 500;\n }\n\n .mock-nav .nav-links {\n display: flex;\n gap: 24px;\n align-items: center;\n }\n\n .mock-nav .nav-links span {\n cursor: pointer;\n opacity: 0.7;\n }\n\n .mock-nav .fp-btn {\n padding: 6px 16px;\n border-radius: 6px;\n font-weight: 600;\n font-size: 12px;\n letter-spacing: 0.5px;\n }\n\n .mock-hero {\n padding: 80px 40px;\n text-align: center;\n }\n\n .mock-hero h3 {\n font-size: 36px;\n font-weight: 700;\n margin-bottom: 10px;\n }\n\n .mock-hero .tagline {\n font-size: 16px;\n font-weight: 300;\n opacity: 0.7;\n margin-bottom: 28px;\n }\n\n .mock-hero .cta-btn {\n display: inline-block;\n padding: 12px 32px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n text-decoration: none;\n transition: transform 0.2s;\n }\n\n .mock-fp-section {\n padding: 60px 40px;\n text-align: center;\n }\n\n .mock-fp-section .fp-label {\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 2px;\n margin-bottom: 8px;\n font-weight: 500;\n }\n\n .mock-fp-section h3 {\n font-size: 32px;\n font-weight: 700;\n margin-bottom: 16px;\n }\n\n .mock-fp-section p {\n font-size: 14px;\n max-width: 560px;\n margin: 0 auto 28px;\n line-height: 1.7;\n opacity: 0.8;\n }\n\n .mock-fp-section .fp-cta {\n display: inline-block;\n padding: 12px 32px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n text-decoration: none;\n }\n\n \/* Notes *\/\n .note-box {\n background: #12121A;\n border: 1px solid #2A2A35;\n border-left: 3px solid #F6A918;\n border-radius: 8px;\n padding: 20px 24px;\n margin: 24px 0 40px;\n font-size: 13px;\n line-height: 1.7;\n color: #AAA;\n }\n\n .note-box strong {\n color: #E8E8EC;\n }\n\n .section-divider {\n height: 1px;\n background: linear-gradient(to right, transparent, #333, transparent);\n margin: 48px 0;\n }\n\n \/* Accessibility badges *\/\n .a11y-badge {\n display: inline-block;\n font-size: 10px;\n font-weight: 700;\n padding: 2px 7px;\n border-radius: 4px;\n margin-left: 6px;\n }\n .a11y-pass { background: #1A3D2A; color: #4ADE80; }\n .a11y-warn { background: #3D2A1A; color: #FBBF24; }\n<\/style>\n<\/head>\n<body>\n<div class=\"container\">\n\n <h1>diegodiazpalma.com \u2014 Paleta de Colores<\/h1>\n <p class=\"subtitle\">Propuesta de sistema crom\u00e1tico para el Sitio 1 \u00b7 Febrero 2026<\/p>\n\n <!-- ==================== ORIGINAL vs ADJUSTED ==================== -->\n <h2>Tus colores originales vs. ajustes sugeridos<\/h2>\n\n <div class=\"comparison\">\n <div class=\"comp-card\" style=\"background: #141418;\">\n <h3 style=\"color: #FFF;\">Tus colores originales<\/h3>\n <p class=\"label\">4 colores base<\/p>\n <div class=\"color-strip\">\n <div style=\"background: #3077DB;\"><\/div>\n <div style=\"background: #F6A918;\"><\/div>\n <div style=\"background: #141414;\"><\/div>\n <div style=\"background: #FFFFFF;\"><\/div>\n <\/div>\n <p style=\"font-size: 12px; color: #888; line-height: 1.6;\">\n #3077DB \u00b7 #F6A918 \u00b7 #141414 \u00b7 #FFFFFF<br>\n Base s\u00f3lida. Buen contraste complementario azul\/naranja.\n <\/p>\n <\/div>\n <div class=\"comp-card\" style=\"background: #141418;\">\n <h3 style=\"color: #FFF;\">Sistema expandido propuesto<\/h3>\n <p class=\"label\">Mismos colores base + variantes funcionales<\/p>\n <div class=\"color-strip\">\n <div style=\"background: #1B4F8A;\"><\/div>\n <div style=\"background: #3077DB;\"><\/div>\n <div style=\"background: #5A9AE6;\"><\/div>\n <div style=\"background: #F6A918;\"><\/div>\n <div style=\"background: #141414;\"><\/div>\n <div style=\"background: #F5F5F7;\"><\/div>\n <\/div>\n <p style=\"font-size: 12px; color: #888; line-height: 1.6;\">\n Tus mismos 4 colores + 3 variantes de apoyo.<br>\n No cambia nada, solo a\u00f1ade profundidad para que el dise\u00f1ador tenga gu\u00eda.\n <\/p>\n <\/div>\n <\/div>\n\n <div class=\"section-divider\"><\/div>\n\n <!-- ==================== PRIMARY: BLUE ==================== -->\n <h2>Azul \u2014 Color principal<\/h2>\n\n <div class=\"palette-row\">\n <div class=\"swatch\">\n <div class=\"swatch-color\" style=\"background: #1B4F8A;\">\n <span class=\"swatch-tag\" style=\"background: rgba(0,0,0,0.3); color: #8BB8E8;\">Oscuro<\/span>\n <\/div>\n <div class=\"swatch-info\">\n <div class=\"swatch-name\">Blue Dark<\/div>\n <div class=\"swatch-hex\">#1B4F8A<\/div>\n <div class=\"swatch-use\">Headers, navegaci\u00f3n activa, fondos de secci\u00f3n destacada<\/div>\n <\/div>\n <\/div>\n <div class=\"swatch\" style=\"border-color: #3077DB44;\">\n <div class=\"swatch-color\" style=\"background: #3077DB;\">\n <span class=\"swatch-tag\" style=\"background: rgba(0,0,0,0.3); color: #FFF;\">Principal \u2605<\/span>\n <\/div>\n <div class=\"swatch-info\">\n <div class=\"swatch-name\">Blue Primary<\/div>\n <div class=\"swatch-hex\">#3077DB<\/div>\n <div class=\"swatch-use\">Tu color original. Links, botones secundarios, iconos, l\u00edneas de acento<\/div>\n <\/div>\n <\/div>\n <div class=\"swatch\">\n <div class=\"swatch-color\" style=\"background: #5A9AE6;\">\n <span class=\"swatch-tag\" style=\"background: rgba(0,0,0,0.2); color: #FFF;\">Claro<\/span>\n <\/div>\n <div class=\"swatch-info\">\n <div class=\"swatch-name\">Blue Light<\/div>\n <div class=\"swatch-hex\">#5A9AE6<\/div>\n <div class=\"swatch-use\">Hover states, bordes suaves, elementos secundarios<\/div>\n <\/div>\n <\/div>\n <div class=\"swatch\">\n <div class=\"swatch-color\" style=\"background: #E8F0FB;\">\n <span class=\"swatch-tag\" style=\"background: rgba(0,0,0,0.08); color: #3077DB;\">Fondo<\/span>\n <\/div>\n <div class=\"swatch-info\">\n <div class=\"swatch-name\">Blue Wash<\/div>\n <div class=\"swatch-hex\">#E8F0FB<\/div>\n <div class=\"swatch-use\">Fondos sutiles, cards, secciones alternas para romper monoton\u00eda<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- ==================== SECONDARY: ORANGE ==================== -->\n <h2>Naranja\/\u00c1mbar \u2014 Color secundario \/ Acento<\/h2>\n\n <div class=\"palette-row\">\n <div class=\"swatch\" style=\"border-color: #F6A91844;\">\n <div class=\"swatch-color\" style=\"background: #F6A918;\">\n <span class=\"swatch-tag\" style=\"background: rgba(0,0,0,0.25); color: #FFF;\">Principal \u2605<\/span>\n <\/div>\n <div class=\"swatch-info\">\n <div class=\"swatch-name\">Amber Primary<\/div>\n <div class=\"swatch-hex\">#F6A918<\/div>\n <div class=\"swatch-use\">Tu color original. CTAs principales, bot\u00f3n Fracta Paradox en nav, highlights, badges<\/div>\n <\/div>\n <\/div>\n <div class=\"swatch\">\n <div class=\"swatch-color\" style=\"background: #D4900A;\">\n <span class=\"swatch-tag\" style=\"background: rgba(0,0,0,0.25); color: #FFF;\">Oscuro<\/span>\n <\/div>\n <div class=\"swatch-info\">\n <div class=\"swatch-name\">Amber Dark<\/div>\n <div class=\"swatch-hex\">#D4900A<\/div>\n <div class=\"swatch-use\">Hover en botones naranja, bordes activos<\/div>\n <\/div>\n <\/div>\n <div class=\"swatch\">\n <div class=\"swatch-color\" style=\"background: #FFF3D6;\">\n <span class=\"swatch-tag\" style=\"background: rgba(0,0,0,0.06); color: #D4900A;\">Fondo<\/span>\n <\/div>\n <div class=\"swatch-info\">\n <div class=\"swatch-name\">Amber Wash<\/div>\n <div class=\"swatch-hex\">#FFF3D6<\/div>\n <div class=\"swatch-use\">Fondos de alertas, tooltips, o badges informativos<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- ==================== NEUTRALS ==================== -->\n <h2>Neutros \u2014 Estructura y texto<\/h2>\n\n <div class=\"palette-row\">\n <div class=\"swatch\">\n <div class=\"swatch-color\" style=\"background: #141414;\">\n <span class=\"swatch-tag\" style=\"background: rgba(255,255,255,0.12); color: #AAA;\">Base \u2605<\/span>\n <\/div>\n <div class=\"swatch-info\">\n <div class=\"swatch-name\">Near Black<\/div>\n <div class=\"swatch-hex\">#141414<\/div>\n <div class=\"swatch-use\">Tu color original. Fondo secci\u00f3n FP, textos principales<\/div>\n <\/div>\n <\/div>\n <div class=\"swatch\">\n <div class=\"swatch-color\" style=\"background: #333333;\">\n <span class=\"swatch-tag\" style=\"background: rgba(255,255,255,0.1); color: #AAA;\">Texto sec.<\/span>\n <\/div>\n <div class=\"swatch-info\">\n <div class=\"swatch-name\">Dark Gray<\/div>\n <div class=\"swatch-hex\">#333333<\/div>\n <div class=\"swatch-use\">Textos secundarios, subt\u00edtulos, p\u00e1rrafos largos<\/div>\n <\/div>\n <\/div>\n <div class=\"swatch\">\n <div class=\"swatch-color\" style=\"background: #777777;\">\n <span class=\"swatch-tag\" style=\"background: rgba(255,255,255,0.08); color: #CCC;\">Soporte<\/span>\n <\/div>\n <div class=\"swatch-info\">\n <div class=\"swatch-name\">Mid Gray<\/div>\n <div class=\"swatch-hex\">#777777<\/div>\n <div class=\"swatch-use\">Captions, meta info, placeholders<\/div>\n <\/div>\n <\/div>\n <div class=\"swatch\">\n <div class=\"swatch-color\" style=\"background: #F5F5F7;\">\n <span class=\"swatch-tag\" style=\"background: rgba(0,0,0,0.06); color: #777;\">Fondo \u2605<\/span>\n <\/div>\n <div class=\"swatch-info\">\n <div class=\"swatch-name\">Off White<\/div>\n <div class=\"swatch-hex\">#F5F5F7<\/div>\n <div class=\"swatch-use\">Fondo general del sitio (m\u00e1s suave que blanco puro)<\/div>\n <\/div>\n <\/div>\n <div class=\"swatch\">\n <div class=\"swatch-color\" style=\"background: #FFFFFF; border-bottom: 1px solid #E0E0E0;\">\n <span class=\"swatch-tag\" style=\"background: rgba(0,0,0,0.05); color: #777;\">Puro<\/span>\n <\/div>\n <div class=\"swatch-info\">\n <div class=\"swatch-name\">White<\/div>\n <div class=\"swatch-hex\">#FFFFFF<\/div>\n <div class=\"swatch-use\">Tu color original. Cards, overlays, texto sobre fondos oscuros<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"note-box\">\n <strong>\u00bfPor qu\u00e9 #F5F5F7 en vez de #FFFFFF como fondo general?<\/strong><br>\n El blanco puro (#FFFFFF) en pantalla genera un brillo que cansa la vista en sesiones largas y hace que las im\u00e1genes del portfolio \"floten\" sin contexto. El off-white (#F5F5F7) es casi imperceptiblemente m\u00e1s c\u00e1lido, reduce la fatiga visual y permite que las cards blancas (#FFFFFF) tengan separaci\u00f3n natural del fondo sin necesitar bordes ni sombras agresivas. Es un truco que usan Apple, Behance, y la mayor\u00eda de portfolios profesionales.\n <\/div>\n\n <div class=\"section-divider\"><\/div>\n\n <!-- ==================== CONTRAST CHECKS ==================== -->\n <h2>Verificaci\u00f3n de contraste (accesibilidad)<\/h2>\n\n <div class=\"contrast-grid\">\n <div class=\"contrast-card\" style=\"background: #F5F5F7;\">\n <div class=\"demo-text\" style=\"color: #141414;\">Texto oscuro sobre fondo claro <span class=\"a11y-badge a11y-pass\">AAA \u2713<\/span><\/div>\n <div class=\"contrast-info\" style=\"color: #555;\">#141414 sobre #F5F5F7 \u2014 Ratio 16.5:1<\/div>\n <\/div>\n <div class=\"contrast-card\" style=\"background: #141414;\">\n <div class=\"demo-text\" style=\"color: #FFFFFF;\">Texto blanco sobre fondo oscuro <span class=\"a11y-badge a11y-pass\">AAA \u2713<\/span><\/div>\n <div class=\"contrast-info\" style=\"color: #999;\">#FFFFFF sobre #141414 \u2014 Ratio 18.1:1<\/div>\n <\/div>\n <div class=\"contrast-card\" style=\"background: #F5F5F7;\">\n <div class=\"demo-text\" style=\"color: #3077DB;\">Link azul sobre fondo claro <span class=\"a11y-badge a11y-pass\">AA \u2713<\/span><\/div>\n <div class=\"contrast-info\" style=\"color: #555;\">#3077DB sobre #F5F5F7 \u2014 Ratio 4.6:1<\/div>\n <\/div>\n <div class=\"contrast-card\" style=\"background: #3077DB;\">\n <div class=\"demo-text\" style=\"color: #FFFFFF;\">Texto blanco sobre azul <span class=\"a11y-badge a11y-pass\">AA \u2713<\/span><\/div>\n <div class=\"contrast-info\" style=\"color: #B0CFEF;\">#FFFFFF sobre #3077DB \u2014 Ratio 4.5:1<\/div>\n <\/div>\n <div class=\"contrast-card\" style=\"background: #F6A918;\">\n <div class=\"demo-text\" style=\"color: #141414;\">Texto oscuro sobre naranja <span class=\"a11y-badge a11y-pass\">AAA \u2713<\/span><\/div>\n <div class=\"contrast-info\" style=\"color: #6B4A00;\">#141414 sobre #F6A918 \u2014 Ratio 8.3:1<\/div>\n <\/div>\n <div class=\"contrast-card\" style=\"background: #F6A918;\">\n <div class=\"demo-text\" style=\"color: #FFFFFF;\">Texto blanco sobre naranja <span class=\"a11y-badge a11y-warn\">Cuidado<\/span><\/div>\n <div class=\"contrast-info\" style=\"color: #8B6500;\">#FFFFFF sobre #F6A918 \u2014 Ratio 2.2:1 \u00b7 Usar texto oscuro en botones \u00e1mbar<\/div>\n <\/div>\n <\/div>\n\n <div class=\"note-box\">\n <strong>Dato clave para el dise\u00f1ador:<\/strong> Los botones con fondo \u00e1mbar\/naranja (#F6A918) deben llevar texto oscuro (#141414), NO blanco. El blanco sobre naranja no pasa los est\u00e1ndares de accesibilidad. Esto aplica al bot\u00f3n \"Fracta Paradox\" en la navegaci\u00f3n y a cualquier CTA con fondo naranja.\n <\/div>\n\n <div class=\"section-divider\"><\/div>\n\n <!-- ==================== MOCK PREVIEW ==================== -->\n <h2>Vista previa \u2014 Aplicaci\u00f3n de colores por secci\u00f3n<\/h2>\n\n <div class=\"mock-section\">\n <!-- Nav -->\n <div class=\"mock-nav\" style=\"background: #FFFFFF; color: #141414; border-bottom: 1px solid #E8E8EC;\">\n <span style=\"font-weight: 700; letter-spacing: 0.5px;\">DIEGO D\u00cdAZ PALMA<\/span>\n <div class=\"nav-links\">\n <span>Inicio<\/span>\n <span>Galer\u00eda<\/span>\n <span>About<\/span>\n <span>Contacto<\/span>\n <span class=\"fp-btn\" style=\"background: #F6A918; color: #141414;\">FRACTA PARADOX<\/span>\n <span style=\"opacity: 0.4; font-size: 12px;\">EN \/ ES<\/span>\n <\/div>\n <\/div>\n <!-- Hero -->\n <div class=\"mock-hero\" style=\"background: linear-gradient(135deg, #1B4F8A 0%, #3077DB 50%, #5A9AE6 100%); color: #FFFFFF;\">\n <h3>El Arte de Diego Diaz Palma<\/h3>\n <p class=\"tagline\">De la p\u00e1gina en blanco a mundos enteros<\/p>\n <a class=\"cta-btn\" style=\"background: #F6A918; color: #141414;\">View My Work \u2193<\/a>\n <\/div>\n <!-- Portfolio preview -->\n <div style=\"background: #F5F5F7; padding: 40px; text-align: center;\">\n <h3 style=\"font-size: 22px; color: #141414; margin-bottom: 6px;\">Trabajos Seleccionados<\/h3>\n <p style=\"font-size: 13px; color: #777; margin-bottom: 24px;\">A curated selection of my work across children's books, comics, and personal projects.<\/p>\n <div style=\"display: flex; gap: 12px; justify-content: center; margin-bottom: 20px;\">\n <span style=\"background: #3077DB; color: #FFF; padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: 600;\">All<\/span>\n <span style=\"background: #FFFFFF; color: #333; padding: 6px 16px; border-radius: 20px; font-size: 12px; border: 1px solid #DDD;\">Ilustraciones<\/span>\n <span style=\"background: #FFFFFF; color: #333; padding: 6px 16px; border-radius: 20px; font-size: 12px; border: 1px solid #DDD;\">Comics<\/span>\n <span style=\"background: #FFFFFF; color: #333; padding: 6px 16px; border-radius: 20px; font-size: 12px; border: 1px solid #DDD;\">Inks<\/span>\n <span style=\"background: #FFFFFF; color: #333; padding: 6px 16px; border-radius: 20px; font-size: 12px; border: 1px solid #DDD;\">L\u00e1pices<\/span>\n <\/div>\n <div style=\"display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 500px; margin: 0 auto;\">\n <div style=\"background: #D0D0D5; height: 100px; border-radius: 8px;\"><\/div>\n <div style=\"background: #C5C5CC; height: 100px; border-radius: 8px;\"><\/div>\n <div style=\"background: #D5D5DA; height: 100px; border-radius: 8px;\"><\/div>\n <div style=\"background: #CCCCD2; height: 100px; border-radius: 8px;\"><\/div>\n <div style=\"background: #D8D8DE; height: 100px; border-radius: 8px;\"><\/div>\n <div style=\"background: #C8C8CF; height: 100px; border-radius: 8px;\"><\/div>\n <\/div>\n <\/div>\n <!-- About preview -->\n <div style=\"background: #FFFFFF; padding: 40px; display: flex; gap: 32px; align-items: center;\">\n <div style=\"width: 100px; height: 100px; border-radius: 50%; background: #E8F0FB; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #3077DB; font-size: 11px; text-align: center;\">Photo \/<br>Avatar<\/div>\n <div>\n <h3 style=\"font-size: 22px; color: #141414; margin-bottom: 8px;\">Sobre M\u00ed<\/h3>\n <p style=\"font-size: 13px; color: #333; line-height: 1.7;\">I've been drawing for as long as I can remember. My grandfather was the one who first put a pencil in my hand...<\/p>\n <div style=\"display: flex; gap: 16px; margin-top: 16px;\">\n <span style=\"background: #E8F0FB; color: #1B4F8A; padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 600;\">30+ Years<\/span>\n <span style=\"background: #E8F0FB; color: #1B4F8A; padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 600;\">Self-Taught<\/span>\n <span style=\"background: #E8F0FB; color: #1B4F8A; padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 600;\">Major Publishers<\/span>\n <\/div>\n <\/div>\n <\/div>\n <!-- FP Section -->\n <div class=\"mock-fp-section\" style=\"background: #141414; color: #FFFFFF;\">\n <div class=\"fp-label\" style=\"color: #F6A918;\">Mi Novela Gr\u00e1fica<\/div>\n <h3>FRACTA PARADOX<\/h3>\n <p style=\"color: #CCCCCC;\">After 30 years illustrating other people's stories, I decided to tell my own.<\/p>\n <a class=\"fp-cta\" style=\"background: #F6A918; color: #141414; font-weight: 700;\">Enter the World of Fracta Paradox \u2192<\/a>\n <\/div>\n <!-- Contact preview -->\n <div style=\"background: #F5F5F7; padding: 40px; text-align: center;\">\n <h3 style=\"font-size: 22px; color: #141414; margin-bottom: 6px;\">Let's Talk<\/h3>\n <p style=\"font-size: 13px; color: #777; margin-bottom: 20px;\">Got a project in mind? Drop me a line. I read everything.<\/p>\n <div style=\"max-width: 320px; margin: 0 auto; text-align: left;\">\n <div style=\"background: #FFF; border: 1px solid #DDD; border-radius: 6px; padding: 10px 14px; margin-bottom: 8px; font-size: 12px; color: #AAA;\">Your name<\/div>\n <div style=\"background: #FFF; border: 1px solid #DDD; border-radius: 6px; padding: 10px 14px; margin-bottom: 8px; font-size: 12px; color: #AAA;\">Your email<\/div>\n <div style=\"background: #FFF; border: 1px solid #DDD; border-radius: 6px; padding: 10px 14px; margin-bottom: 12px; font-size: 12px; color: #AAA;\">Message<\/div>\n <div style=\"background: #3077DB; color: #FFF; text-align: center; padding: 10px; border-radius: 6px; font-size: 13px; font-weight: 600;\">Send<\/div>\n <\/div>\n <\/div>\n <!-- Footer -->\n <div style=\"background: #141414; color: #777; padding: 20px 28px; font-size: 11px; display: flex; justify-content: space-between; align-items: center;\">\n <span>\u00a9 2026 Diego D\u00edaz Palma<\/span>\n <span style=\"color: #555;\">Hecho con tinta, p\u00edxeles y terquedad en Mendoza, Argentina.<\/span>\n <\/div>\n <\/div>\n\n <div class=\"note-box\">\n <strong>Sobre la vista previa:<\/strong> Este mock es solo para visualizar la aplicaci\u00f3n de colores por secci\u00f3n. No representa el dise\u00f1o final (eso lo define el dise\u00f1ador). Lo importante es c\u00f3mo se distribuyen los colores: fondo off-white general \u2192 secci\u00f3n FP en negro \u2192 naranja como acento en CTAs y bot\u00f3n FP \u2192 azul en links, filtros activos y bot\u00f3n de env\u00edo.\n <\/div>\n\n <div class=\"section-divider\"><\/div>\n\n <!-- ==================== SUMMARY ==================== -->\n <h2>Resumen de uso por secci\u00f3n<\/h2>\n\n <table style=\"width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 40px;\">\n <thead>\n <tr style=\"border-bottom: 2px solid #333;\">\n <th style=\"text-align: left; padding: 12px 16px; color: #888; font-weight: 600;\">Secci\u00f3n<\/th>\n <th style=\"text-align: left; padding: 12px 16px; color: #888; font-weight: 600;\">Fondo<\/th>\n <th style=\"text-align: left; padding: 12px 16px; color: #888; font-weight: 600;\">Texto<\/th>\n <th style=\"text-align: left; padding: 12px 16px; color: #888; font-weight: 600;\">Acento<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr style=\"border-bottom: 1px solid #222;\">\n <td style=\"padding: 12px 16px; font-weight: 500;\">Navegaci\u00f3n<\/td>\n <td style=\"padding: 12px 16px;\"><span style=\"display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #FFFFFF; border: 1px solid #444; vertical-align: middle;\"><\/span> #FFFFFF<\/td>\n <td style=\"padding: 12px 16px;\"><span style=\"display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #141414; vertical-align: middle;\"><\/span> #141414<\/td>\n <td style=\"padding: 12px 16px;\"><span style=\"display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #F6A918; vertical-align: middle;\"><\/span> Bot\u00f3n FP<\/td>\n <\/tr>\n <tr style=\"border-bottom: 1px solid #222;\">\n <td style=\"padding: 12px 16px; font-weight: 500;\">Hero<\/td>\n <td style=\"padding: 12px 16px;\"><span style=\"display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #3077DB; vertical-align: middle;\"><\/span> Gradiente azul (o imagen + overlay)<\/td>\n <td style=\"padding: 12px 16px;\"><span style=\"display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #FFFFFF; border: 1px solid #444; vertical-align: middle;\"><\/span> #FFFFFF<\/td>\n <td style=\"padding: 12px 16px;\"><span style=\"display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #F6A918; vertical-align: middle;\"><\/span> CTA bot\u00f3n<\/td>\n <\/tr>\n <tr style=\"border-bottom: 1px solid #222;\">\n <td style=\"padding: 12px 16px; font-weight: 500;\">Galer\u00eda<\/td>\n <td style=\"padding: 12px 16px;\"><span style=\"display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #F5F5F7; border: 1px solid #444; vertical-align: middle;\"><\/span> #F5F5F7<\/td>\n <td style=\"padding: 12px 16px;\"><span style=\"display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #141414; vertical-align: middle;\"><\/span> #141414<\/td>\n <td style=\"padding: 12px 16px;\"><span style=\"display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #3077DB; vertical-align: middle;\"><\/span> Filtro activo<\/td>\n <\/tr>\n <tr style=\"border-bottom: 1px solid #222;\">\n <td style=\"padding: 12px 16px; font-weight: 500;\">About<\/td>\n <td style=\"padding: 12px 16px;\"><span style=\"display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #FFFFFF; border: 1px solid #444; vertical-align: middle;\"><\/span> #FFFFFF<\/td>\n <td style=\"padding: 12px 16px;\"><span style=\"display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #333333; vertical-align: middle;\"><\/span> #333333<\/td>\n <td style=\"padding: 12px 16px;\"><span style=\"display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #E8F0FB; vertical-align: middle;\"><\/span> Badges azul claro<\/td>\n <\/tr>\n <tr style=\"border-bottom: 1px solid #222;\">\n <td style=\"padding: 12px 16px; font-weight: 500;\">Fracta Paradox<\/td>\n <td style=\"padding: 12px 16px;\"><span style=\"display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #141414; vertical-align: middle;\"><\/span> #141414<\/td>\n <td style=\"padding: 12px 16px;\"><span style=\"display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #FFFFFF; border: 1px solid #444; vertical-align: middle;\"><\/span> #FFFFFF<\/td>\n <td style=\"padding: 12px 16px;\"><span style=\"display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #F6A918; vertical-align: middle;\"><\/span> Label + CTA<\/td>\n <\/tr>\n <tr style=\"border-bottom: 1px solid #222;\">\n <td style=\"padding: 12px 16px; font-weight: 500;\">Contacto<\/td>\n <td style=\"padding: 12px 16px;\"><span style=\"display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #F5F5F7; border: 1px solid #444; vertical-align: middle;\"><\/span> #F5F5F7<\/td>\n <td style=\"padding: 12px 16px;\"><span style=\"display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #141414; vertical-align: middle;\"><\/span> #141414<\/td>\n <td style=\"padding: 12px 16px;\"><span style=\"display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #3077DB; vertical-align: middle;\"><\/span> Bot\u00f3n enviar<\/td>\n <\/tr>\n <tr>\n <td style=\"padding: 12px 16px; font-weight: 500;\">Footer<\/td>\n <td style=\"padding: 12px 16px;\"><span style=\"display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #141414; vertical-align: middle;\"><\/span> #141414<\/td>\n <td style=\"padding: 12px 16px;\"><span style=\"display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #777777; vertical-align: middle;\"><\/span> #777777<\/td>\n <td style=\"padding: 12px 16px;\">\u2014<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n\n<\/div>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>diegodiazpalma.com \u2014 Propuesta de Paleta de Colores diegodiazpalma.com \u2014 Paleta de Colores Propuesta de sistema crom\u00e1tico para el Sitio 1 \u00b7 Febrero 2026 Tus colores originales vs. ajustes sugeridos Tus colores originales 4 colores base #3077DB \u00b7 #F6A918 \u00b7 #141414 \u00b7 #FFFFFF Base s\u00f3lida. Buen contraste complementario azul\/naranja. Sistema expandido propuesto Mismos colores base + […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-19","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Demo - Diego Diaz Palma<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/diegodiazpalma.com\/es\/demo\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Demo - Diego Diaz Palma\" \/>\n<meta property=\"og:description\" content=\"diegodiazpalma.com \u2014 Propuesta de Paleta de Colores diegodiazpalma.com \u2014 Paleta de Colores Propuesta de sistema crom\u00e1tico para el Sitio 1 \u00b7 Febrero 2026 Tus colores originales vs. ajustes sugeridos Tus colores originales 4 colores base #3077DB \u00b7 #F6A918 \u00b7 #141414 \u00b7 #FFFFFF Base s\u00f3lida. Buen contraste complementario azul\/naranja. Sistema expandido propuesto Mismos colores base + […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/diegodiazpalma.com\/es\/demo\/\" \/>\n<meta property=\"og:site_name\" content=\"Diego Diaz Palma\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-12T16:50:46+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/diegodiazpalma.com\/demo\/\",\"url\":\"https:\/\/diegodiazpalma.com\/demo\/\",\"name\":\"Demo - Diego Diaz Palma\",\"isPartOf\":{\"@id\":\"https:\/\/diegodiazpalma.com\/#website\"},\"datePublished\":\"2026-03-12T16:48:36+00:00\",\"dateModified\":\"2026-03-12T16:50:46+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/diegodiazpalma.com\/demo\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/diegodiazpalma.com\/demo\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/diegodiazpalma.com\/demo\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/diegodiazpalma.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Demo\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/diegodiazpalma.com\/#website\",\"url\":\"https:\/\/diegodiazpalma.com\/\",\"name\":\"Diego Diaz Palma\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/diegodiazpalma.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/diegodiazpalma.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/diegodiazpalma.com\/#organization\",\"name\":\"Diego Diaz Palma\",\"url\":\"https:\/\/diegodiazpalma.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/diegodiazpalma.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/diegodiazpalma.com\/wp-content\/uploads\/2026\/02\/Logo.png\",\"contentUrl\":\"https:\/\/diegodiazpalma.com\/wp-content\/uploads\/2026\/02\/Logo.png\",\"width\":1727,\"height\":1727,\"caption\":\"Diego Diaz Palma\"},\"image\":{\"@id\":\"https:\/\/diegodiazpalma.com\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Demo - Diego Diaz Palma","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/diegodiazpalma.com\/es\/demo\/","og_locale":"es_ES","og_type":"article","og_title":"Demo - Diego Diaz Palma","og_description":"diegodiazpalma.com \u2014 Propuesta de Paleta de Colores diegodiazpalma.com \u2014 Paleta de Colores Propuesta de sistema crom\u00e1tico para el Sitio 1 \u00b7 Febrero 2026 Tus colores originales vs. ajustes sugeridos Tus colores originales 4 colores base #3077DB \u00b7 #F6A918 \u00b7 #141414 \u00b7 #FFFFFF Base s\u00f3lida. Buen contraste complementario azul\/naranja. Sistema expandido propuesto Mismos colores base + […]","og_url":"https:\/\/diegodiazpalma.com\/es\/demo\/","og_site_name":"Diego Diaz Palma","article_modified_time":"2026-03-12T16:50:46+00:00","twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/diegodiazpalma.com\/demo\/","url":"https:\/\/diegodiazpalma.com\/demo\/","name":"Demo - Diego Diaz Palma","isPartOf":{"@id":"https:\/\/diegodiazpalma.com\/#website"},"datePublished":"2026-03-12T16:48:36+00:00","dateModified":"2026-03-12T16:50:46+00:00","breadcrumb":{"@id":"https:\/\/diegodiazpalma.com\/demo\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/diegodiazpalma.com\/demo\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/diegodiazpalma.com\/demo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/diegodiazpalma.com\/"},{"@type":"ListItem","position":2,"name":"Demo"}]},{"@type":"WebSite","@id":"https:\/\/diegodiazpalma.com\/#website","url":"https:\/\/diegodiazpalma.com\/","name":"Diego Diaz Palma","description":"","publisher":{"@id":"https:\/\/diegodiazpalma.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/diegodiazpalma.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/diegodiazpalma.com\/#organization","name":"Diego Diaz Palma","url":"https:\/\/diegodiazpalma.com\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/diegodiazpalma.com\/#\/schema\/logo\/image\/","url":"https:\/\/diegodiazpalma.com\/wp-content\/uploads\/2026\/02\/Logo.png","contentUrl":"https:\/\/diegodiazpalma.com\/wp-content\/uploads\/2026\/02\/Logo.png","width":1727,"height":1727,"caption":"Diego Diaz Palma"},"image":{"@id":"https:\/\/diegodiazpalma.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/diegodiazpalma.com\/es\/wp-json\/wp\/v2\/pages\/19","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/diegodiazpalma.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/diegodiazpalma.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/diegodiazpalma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/diegodiazpalma.com\/es\/wp-json\/wp\/v2\/comments?post=19"}],"version-history":[{"count":0,"href":"https:\/\/diegodiazpalma.com\/es\/wp-json\/wp\/v2\/pages\/19\/revisions"}],"wp:attachment":[{"href":"https:\/\/diegodiazpalma.com\/es\/wp-json\/wp\/v2\/media?parent=19"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}