{"id":8,"date":"2026-04-09T12:48:30","date_gmt":"2026-04-09T16:48:30","guid":{"rendered":"http:\/\/34.236.19.161\/?page_id=8"},"modified":"2026-04-09T15:19:26","modified_gmt":"2026-04-09T19:19:26","slug":"pixel-lab-by-diego","status":"publish","type":"page","link":"https:\/\/pixellabpr.com\/","title":{"rendered":"Pixel Lab by Diego"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nPixel Lab by Diego<\/title>\r\n<style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Press+Start+2P&family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap');\r\n\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\n :root {\r\n --neon-cyan: #00f0ff;\r\n --neon-blue: #0066ff;\r\n --neon-green: #00ff88;\r\n --neon-purple: #b44dff;\r\n --neon-pink: #ff2d95;\r\n --dark-bg: #000000;\r\n --card-bg: #0a0a0a;\r\n }\r\n\r\n html { scroll-behavior: smooth; }\r\n\r\n body {\r\n background: var(--dark-bg);\r\n color: #ffffff;\r\n font-family: 'Rajdhani', sans-serif;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* ========== HERO SECTION ========== *\/\r\n #hero {\r\n position: relative;\r\n width: 100%;\r\n height: 100vh;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n overflow: hidden;\r\n background: radial-gradient(ellipse at 50% 50%, #0a0a2e 0%, #000000 70%);\r\n }\r\n\r\n \/* Animated grid floor *\/\r\n .grid-floor {\r\n position: absolute;\r\n bottom: 0;\r\n left: -50%;\r\n width: 200%;\r\n height: 60%;\r\n background:\r\n linear-gradient(90deg, rgba(0,240,255,0.08) 1px, transparent 1px),\r\n linear-gradient(rgba(0,240,255,0.08) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n transform: perspective(500px) rotateX(60deg);\r\n transform-origin: center top;\r\n animation: gridScroll 20s linear infinite;\r\n }\r\n @keyframes gridScroll {\r\n 0% { background-position: 0 0; }\r\n 100% { background-position: 0 60px; }\r\n }\r\n\r\n \/* Particle canvas *\/\r\n #particles {\r\n position: absolute;\r\n top: 0; left: 0;\r\n width: 100%; height: 100%;\r\n z-index: 1;\r\n }\r\n\r\n \/* Smoke canvas *\/\r\n #smoke {\r\n position: absolute;\r\n top: 0; left: 0;\r\n width: 100%; height: 100%;\r\n z-index: 2;\r\n opacity: 0.5;\r\n pointer-events: none;\r\n }\r\n\r\n \/* Logo container *\/\r\n .logo-container {\r\n position: relative;\r\n z-index: 10;\r\n text-align: center;\r\n perspective: 1000px;\r\n animation: floatIn 2s ease-out;\r\n }\r\n @keyframes floatIn {\r\n 0% { opacity: 0; transform: translateY(80px) scale(0.8); }\r\n 100% { opacity: 1; transform: translateY(0) scale(1); }\r\n }\r\n\r\n \/* 3D Logo wrapper *\/\r\n .logo-3d {\r\n display: inline-block;\r\n transform-style: preserve-3d;\r\n animation: logo3d 6s ease-in-out infinite;\r\n }\r\n @keyframes logo3d {\r\n 0%, 100% { transform: rotateY(-3deg) rotateX(2deg); }\r\n 50% { transform: rotateY(3deg) rotateX(-2deg); }\r\n }\r\n\r\n \/* Beaker icon *\/\r\n .beaker-icon {\r\n width: 80px;\r\n height: 80px;\r\n margin: 0 auto 15px;\r\n position: relative;\r\n animation: beakerGlow 3s ease-in-out infinite;\r\n }\r\n @keyframes beakerGlow {\r\n 0%, 100% { filter: drop-shadow(0 0 15px rgba(0,240,255,0.8)); }\r\n 50% { filter: drop-shadow(0 0 30px rgba(0,255,136,0.9)); }\r\n }\r\n\r\n \/* Main title *\/\r\n .logo-title {\r\n font-family: 'Press Start 2P', monospace;\r\n font-size: clamp(2rem, 6vw, 4.5rem);\r\n letter-spacing: 0.1em;\r\n background: linear-gradient(135deg, var(--neon-cyan), var(--neon-green), var(--neon-blue), var(--neon-purple));\r\n background-size: 300% 300%;\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n animation: gradientShift 4s ease infinite;\r\n text-shadow: none;\r\n position: relative;\r\n padding: 10px 0;\r\n }\r\n .logo-title::after {\r\n content: 'PIXEL LAB';\r\n position: absolute;\r\n top: 10px; left: 0;\r\n width: 100%;\r\n background: linear-gradient(135deg, var(--neon-cyan), var(--neon-green));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n filter: blur(20px);\r\n opacity: 0.6;\r\n z-index: -1;\r\n }\r\n @keyframes gradientShift {\r\n 0% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n 100% { background-position: 0% 50%; }\r\n }\r\n\r\n .logo-subtitle {\r\n font-family: 'Orbitron', sans-serif;\r\n font-size: clamp(1rem, 3vw, 1.8rem);\r\n color: var(--neon-cyan);\r\n letter-spacing: 0.5em;\r\n margin-top: 5px;\r\n text-shadow: 0 0 20px rgba(0,240,255,0.5);\r\n animation: subtitlePulse 3s ease-in-out infinite;\r\n }\r\n @keyframes subtitlePulse {\r\n 0%, 100% { opacity: 0.8; text-shadow: 0 0 20px rgba(0,240,255,0.5); }\r\n 50% { opacity: 1; text-shadow: 0 0 40px rgba(0,240,255,0.8), 0 0 80px rgba(0,240,255,0.3); }\r\n }\r\n\r\n .tagline {\r\n font-family: 'Rajdhani', sans-serif;\r\n font-size: clamp(0.9rem, 2vw, 1.3rem);\r\n color: rgba(255,255,255,0.6);\r\n margin-top: 25px;\r\n letter-spacing: 0.3em;\r\n text-transform: uppercase;\r\n }\r\n\r\n \/* Decorative icons row *\/\r\n .icon-row {\r\n display: flex;\r\n gap: 30px;\r\n margin-top: 30px;\r\n justify-content: center;\r\n z-index: 10;\r\n position: relative;\r\n }\r\n .icon-row svg {\r\n width: 35px; height: 35px;\r\n opacity: 0.5;\r\n animation: iconFloat 4s ease-in-out infinite;\r\n }\r\n .icon-row svg:nth-child(2) { animation-delay: -1s; }\r\n .icon-row svg:nth-child(3) { animation-delay: -2s; }\r\n .icon-row svg:nth-child(4) { animation-delay: -3s; }\r\n @keyframes iconFloat {\r\n 0%, 100% { transform: translateY(0); opacity: 0.5; }\r\n 50% { transform: translateY(-8px); opacity: 0.8; }\r\n }\r\n\r\n \/* Scroll indicator *\/\r\n .scroll-indicator {\r\n position: absolute;\r\n bottom: 30px;\r\n z-index: 10;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 8px;\r\n animation: scrollBounce 2s ease-in-out infinite;\r\n cursor: pointer;\r\n }\r\n .scroll-indicator span {\r\n font-family: 'Rajdhani', sans-serif;\r\n font-size: 0.8rem;\r\n color: rgba(255,255,255,0.4);\r\n letter-spacing: 0.3em;\r\n text-transform: uppercase;\r\n }\r\n .scroll-arrow {\r\n width: 20px; height: 20px;\r\n border-right: 2px solid var(--neon-cyan);\r\n border-bottom: 2px solid var(--neon-cyan);\r\n transform: rotate(45deg);\r\n opacity: 0.5;\r\n }\r\n @keyframes scrollBounce {\r\n 0%, 100% { transform: translateY(0); }\r\n 50% { transform: translateY(10px); }\r\n }\r\n\r\n \/* ========== NAVBAR ========== *\/\r\n nav {\r\n position: fixed;\r\n top: 0; left: 0;\r\n width: 100%;\r\n padding: 15px 40px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n z-index: 1000;\r\n background: rgba(0,0,0,0.8);\r\n backdrop-filter: blur(20px);\r\n border-bottom: 1px solid rgba(0,240,255,0.1);\r\n transform: translateY(-100%);\r\n transition: transform 0.4s ease;\r\n }\r\n nav.visible { transform: translateY(0); }\r\n nav .nav-brand {\r\n font-family: 'Press Start 2P', monospace;\r\n font-size: 0.8rem;\r\n background: linear-gradient(135deg, var(--neon-cyan), var(--neon-green));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n nav .nav-links {\r\n display: flex;\r\n gap: 30px;\r\n list-style: none;\r\n }\r\n nav .nav-links a {\r\n color: rgba(255,255,255,0.6);\r\n text-decoration: none;\r\n font-family: 'Rajdhani', sans-serif;\r\n font-size: 1rem;\r\n letter-spacing: 0.15em;\r\n text-transform: uppercase;\r\n transition: all 0.3s ease;\r\n }\r\n nav .nav-links a:hover {\r\n color: var(--neon-cyan);\r\n text-shadow: 0 0 15px rgba(0,240,255,0.5);\r\n }\r\n\r\n \/* ========== SECTION STYLES ========== *\/\r\n section {\r\n padding: 100px 5%;\r\n position: relative;\r\n }\r\n\r\n .section-title {\r\n font-family: 'Orbitron', sans-serif;\r\n font-size: clamp(1.5rem, 4vw, 2.5rem);\r\n text-align: center;\r\n margin-bottom: 15px;\r\n background: linear-gradient(135deg, var(--neon-cyan), var(--neon-green));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n .section-subtitle {\r\n text-align: center;\r\n color: rgba(255,255,255,0.5);\r\n font-size: 1.1rem;\r\n letter-spacing: 0.2em;\r\n margin-bottom: 60px;\r\n }\r\n\r\n \/* ========== ABOUT SECTION ========== *\/\r\n #about {\r\n background: linear-gradient(180deg, #000 0%, #050510 100%);\r\n }\r\n .about-content {\r\n max-width: 900px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 40px;\r\n align-items: center;\r\n }\r\n .about-text {\r\n font-size: 1.1rem;\r\n line-height: 1.8;\r\n color: rgba(255,255,255,0.75);\r\n text-align: justify;\r\n }\r\n .about-text strong {\r\n color: var(--neon-cyan);\r\n font-weight: 600;\r\n }\r\n .about-stats {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 20px;\r\n }\r\n .stat-card {\r\n background: rgba(0,240,255,0.03);\r\n border: 1px solid rgba(0,240,255,0.1);\r\n border-radius: 12px;\r\n padding: 25px;\r\n text-align: center;\r\n transition: all 0.4s ease;\r\n }\r\n .stat-card:hover {\r\n border-color: var(--neon-cyan);\r\n box-shadow: 0 0 30px rgba(0,240,255,0.1);\r\n transform: translateY(-5px);\r\n }\r\n .stat-number {\r\n font-family: 'Orbitron', sans-serif;\r\n font-size: 2rem;\r\n color: var(--neon-cyan);\r\n display: block;\r\n }\r\n .stat-label {\r\n font-size: 0.85rem;\r\n color: rgba(255,255,255,0.5);\r\n margin-top: 5px;\r\n letter-spacing: 0.1em;\r\n text-transform: uppercase;\r\n }\r\n\r\n \/* ========== PRODUCTS GALLERY ========== *\/\r\n #products {\r\n background: linear-gradient(180deg, #050510 0%, #000 100%);\r\n }\r\n\r\n \/* Category filter *\/\r\n .category-filter {\r\n display: flex;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n gap: 12px;\r\n margin-bottom: 50px;\r\n }\r\n .filter-btn {\r\n background: transparent;\r\n border: 1px solid rgba(0,240,255,0.2);\r\n color: rgba(255,255,255,0.6);\r\n padding: 10px 25px;\r\n border-radius: 30px;\r\n font-family: 'Rajdhani', sans-serif;\r\n font-size: 0.95rem;\r\n letter-spacing: 0.1em;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n .filter-btn:hover, .filter-btn.active {\r\n background: rgba(0,240,255,0.1);\r\n border-color: var(--neon-cyan);\r\n color: var(--neon-cyan);\r\n box-shadow: 0 0 20px rgba(0,240,255,0.15);\r\n }\r\n\r\n \/* Product grid *\/\r\n .product-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\r\n gap: 30px;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n }\r\n\r\n .product-card {\r\n background: var(--card-bg);\r\n border: 1px solid rgba(255,255,255,0.06);\r\n border-radius: 16px;\r\n overflow: hidden;\r\n transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);\r\n position: relative;\r\n cursor: pointer;\r\n }\r\n .product-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0; left: 0;\r\n width: 100%; height: 100%;\r\n background: linear-gradient(135deg, rgba(0,240,255,0.05), rgba(0,255,136,0.05));\r\n opacity: 0;\r\n transition: opacity 0.5s ease;\r\n z-index: 1;\r\n pointer-events: none;\r\n }\r\n .product-card:hover {\r\n transform: translateY(-10px) scale(1.02);\r\n border-color: rgba(0,240,255,0.3);\r\n box-shadow:\r\n 0 20px 60px rgba(0,0,0,0.5),\r\n 0 0 40px rgba(0,240,255,0.1);\r\n }\r\n .product-card:hover::before { opacity: 1; }\r\n\r\n .product-card img {\r\n width: 100%;\r\n aspect-ratio: 1;\r\n object-fit: cover;\r\n display: block;\r\n transition: transform 0.6s ease;\r\n }\r\n .product-card:hover img {\r\n transform: scale(1.05);\r\n }\r\n\r\n .product-info {\r\n padding: 20px;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n .product-category {\r\n font-size: 0.7rem;\r\n color: var(--neon-green);\r\n letter-spacing: 0.2em;\r\n text-transform: uppercase;\r\n margin-bottom: 5px;\r\n font-family: 'Rajdhani', sans-serif;\r\n font-weight: 600;\r\n }\r\n .product-name {\r\n font-family: 'Orbitron', sans-serif;\r\n font-size: 1.05rem;\r\n color: #fff;\r\n margin-bottom: 8px;\r\n }\r\n .product-desc {\r\n font-size: 0.9rem;\r\n color: rgba(255,255,255,0.5);\r\n line-height: 1.5;\r\n }\r\n .product-badge {\r\n position: absolute;\r\n top: 15px;\r\n right: 15px;\r\n background: linear-gradient(135deg, var(--neon-cyan), var(--neon-green));\r\n color: #000;\r\n font-family: 'Rajdhani', sans-serif;\r\n font-size: 0.7rem;\r\n font-weight: 700;\r\n padding: 5px 12px;\r\n border-radius: 20px;\r\n letter-spacing: 0.1em;\r\n text-transform: uppercase;\r\n z-index: 5;\r\n }\r\n\r\n \/* ========== PROCESS SECTION ========== *\/\r\n #process {\r\n background: linear-gradient(180deg, #000 0%, #050510 100%);\r\n }\r\n .process-steps {\r\n display: flex;\r\n justify-content: center;\r\n gap: 40px;\r\n max-width: 1000px;\r\n margin: 0 auto;\r\n flex-wrap: wrap;\r\n }\r\n .step {\r\n flex: 1;\r\n min-width: 200px;\r\n text-align: center;\r\n position: relative;\r\n }\r\n .step-number {\r\n font-family: 'Press Start 2P', monospace;\r\n font-size: 2rem;\r\n color: var(--neon-cyan);\r\n opacity: 0.3;\r\n margin-bottom: 15px;\r\n }\r\n .step-icon {\r\n width: 70px;\r\n height: 70px;\r\n margin: 0 auto 20px;\r\n background: rgba(0,240,255,0.05);\r\n border: 1px solid rgba(0,240,255,0.2);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.4s ease;\r\n }\r\n .step:hover .step-icon {\r\n border-color: var(--neon-cyan);\r\n box-shadow: 0 0 30px rgba(0,240,255,0.2);\r\n transform: scale(1.1);\r\n }\r\n .step-icon svg { width: 30px; height: 30px; }\r\n .step-title {\r\n font-family: 'Orbitron', sans-serif;\r\n font-size: 1rem;\r\n margin-bottom: 8px;\r\n }\r\n .step-desc {\r\n font-size: 0.9rem;\r\n color: rgba(255,255,255,0.5);\r\n line-height: 1.6;\r\n }\r\n\r\n \/* ========== CONTACT \/ CTA ========== *\/\r\n #contact {\r\n background: linear-gradient(180deg, #050510 0%, #000 100%);\r\n text-align: center;\r\n padding: 120px 5%;\r\n }\r\n .cta-box {\r\n max-width: 600px;\r\n margin: 0 auto;\r\n background: rgba(0,240,255,0.03);\r\n border: 1px solid rgba(0,240,255,0.15);\r\n border-radius: 24px;\r\n padding: 60px 40px;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n .cta-box::before {\r\n content: '';\r\n position: absolute;\r\n top: -50%; left: -50%;\r\n width: 200%; height: 200%;\r\n background: conic-gradient(from 0deg, transparent, rgba(0,240,255,0.05), transparent, rgba(0,255,136,0.05), transparent);\r\n animation: ctaSpin 10s linear infinite;\r\n }\r\n @keyframes ctaSpin { 100% { transform: rotate(360deg); } }\r\n .cta-box > * { position: relative; z-index: 1; }\r\n .cta-title {\r\n font-family: 'Orbitron', sans-serif;\r\n font-size: 1.5rem;\r\n margin-bottom: 15px;\r\n }\r\n .cta-text {\r\n color: rgba(255,255,255,0.6);\r\n margin-bottom: 30px;\r\n line-height: 1.7;\r\n }\r\n .cta-btn {\r\n display: inline-block;\r\n padding: 15px 40px;\r\n background: linear-gradient(135deg, var(--neon-cyan), var(--neon-green));\r\n color: #000;\r\n text-decoration: none;\r\n font-family: 'Orbitron', sans-serif;\r\n font-size: 0.9rem;\r\n font-weight: 700;\r\n letter-spacing: 0.15em;\r\n border-radius: 50px;\r\n transition: all 0.4s ease;\r\n box-shadow: 0 0 30px rgba(0,240,255,0.3);\r\n }\r\n .cta-btn:hover {\r\n transform: scale(1.05);\r\n box-shadow: 0 0 50px rgba(0,240,255,0.5);\r\n }\r\n\r\n \/* ========== FOOTER ========== *\/\r\n footer {\r\n text-align: center;\r\n padding: 30px;\r\n border-top: 1px solid rgba(255,255,255,0.05);\r\n font-size: 0.8rem;\r\n color: rgba(255,255,255,0.3);\r\n letter-spacing: 0.15em;\r\n }\r\n footer .heart { color: var(--neon-pink); }\r\n\r\n \/* ========== LIGHTBOX ========== *\/\r\n .lightbox {\r\n display: none;\r\n position: fixed;\r\n top: 0; left: 0;\r\n width: 100%; height: 100%;\r\n background: rgba(0,0,0,0.95);\r\n z-index: 9999;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n }\r\n .lightbox.active { display: flex; }\r\n .lightbox img {\r\n max-width: 90%;\r\n max-height: 90vh;\r\n border-radius: 12px;\r\n box-shadow: 0 0 60px rgba(0,240,255,0.2);\r\n }\r\n .lightbox-close {\r\n position: absolute;\r\n top: 20px; right: 30px;\r\n font-size: 2rem;\r\n color: rgba(255,255,255,0.5);\r\n cursor: pointer;\r\n font-family: 'Rajdhani', sans-serif;\r\n }\r\n\r\n \/* ========== RESPONSIVE ========== *\/\r\n @media (max-width: 768px) {\r\n .about-content { grid-template-columns: 1fr; }\r\n .process-steps { flex-direction: column; align-items: center; }\r\n nav .nav-links { gap: 15px; }\r\n nav .nav-links a { font-size: 0.8rem; }\r\n .product-grid { grid-template-columns: 1fr; }\r\n .cta-box { padding: 40px 25px; }\r\n }\r\n\r\n \/* Reveal animations *\/\r\n .reveal {\r\n opacity: 0;\r\n transform: translateY(40px);\r\n transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);\r\n }\r\n .reveal.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- NAVBAR -->\r\n<nav id=\"navbar\">\r\n <div class=\"nav-brand\"><img decoding=\"async\" src=\"https:\/\/pixellabpr.com\/wp-content\/uploads\/2026\/04\/ChatGPT-Image-Apr-9-2026-02_26_03-PM.png\" alt=\"Pixel Lab\" style=\"height:80px;\"><\/div>\r\n <ul class=\"nav-links\">\r\n <li><a href=\"#hero\">Inicio<\/a><\/li>\r\n <li><a href=\"#about\">Nosotros<\/a><\/li>\r\n <li><a href=\"#products\">Productos<\/a><\/li>\r\n <li><a href=\"#process\">Proceso<\/a><\/li>\r\n <li><a href=\"#contact\">Contacto<\/a><\/li>\r\n <\/ul>\r\n<\/nav>\r\n\r\n<!-- HERO SECTION -->\r\n<section id=\"hero\">\r\n <div class=\"grid-floor\"><\/div>\r\n <canvas id=\"particles\"><\/canvas>\r\n <canvas id=\"smoke\"><\/canvas>\r\n\r\n <div class=\"logo-container\">\r\n <div class=\"logo-3d\">\r\n <img decoding=\"async\" src=\"https:\/\/pixellabpr.com\/wp-content\/uploads\/2026\/04\/ChatGPT-Image-Apr-9-2026-02_26_03-PM.png\" alt=\"Pixel Lab\" style=\"max-width:500px;width:100%;\">\r\n <\/div>\r\n <p class=\"tagline\">Arte pixel hecho a mano • Llaveros • Pantallas • Marcos • y más<\/p>\r\n\r\n <!-- Tool icons -->\r\n <div class=\"icon-row\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--neon-cyan)\" stroke-width=\"1.5\">\r\n <rect x=\"6\" y=\"3\" width=\"12\" height=\"18\" rx=\"2\"\/>\r\n <line x1=\"6\" y1=\"7\" x2=\"18\" y2=\"7\"\/>\r\n <line x1=\"6\" y1=\"17\" x2=\"18\" y2=\"17\"\/>\r\n <circle cx=\"12\" cy=\"20\" r=\"0.5\" fill=\"var(--neon-cyan)\"\/>\r\n <\/svg>\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--neon-green)\" stroke-width=\"1.5\">\r\n <path d=\"M6 11V6a6 6 0 1 1 12 0v5\"\/>\r\n <rect x=\"4\" y=\"11\" width=\"16\" height=\"10\" rx=\"2\"\/>\r\n <circle cx=\"12\" cy=\"16\" r=\"2\"\/>\r\n <\/svg>\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--neon-purple)\" stroke-width=\"1.5\">\r\n <path d=\"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\"\/>\r\n <\/svg>\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--neon-pink)\" stroke-width=\"1.5\">\r\n <path d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"scroll-indicator\" onclick=\"document.getElementById('about').scrollIntoView({behavior:'smooth'})\">\r\n <span>Explora<\/span>\r\n <div class=\"scroll-arrow\"><\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ABOUT SECTION -->\r\n<section id=\"about\">\r\n <h2 class=\"section-title reveal\">Sobre Pixel Lab<\/h2>\r\n <p class=\"section-subtitle reveal\">Donde la creatividad se encuentra con los píxeles<\/p>\r\n\r\n <div class=\"about-content\">\r\n <div class=\"about-text reveal\">\r\n <p>\r\n <strong>Pixel Lab<\/strong> nació de la mente creativa de <strong>Diego<\/strong>, un joven emprendedor de 10 años apasionado por el deporte, arte pixel y los videojuegos.\r\n <\/p>\r\n <br>\r\n <p>\r\n Cada pieza es <strong>hecha a mano<\/strong> con perler beads, fusionando el mundo gamer con accesorios únicos que puedes llevar a todas partes. Desde tus personajes favoritos de <strong>Mario Bros<\/strong>, <strong>Star Wars<\/strong>, <strong>Among Us<\/strong> y más, hasta diseños originales.\r\n <\/p>\r\n <br>\r\n <p>\r\n Con el apoyo de mamá y papá, Diego está construyendo algo especial: un negocio donde la imaginación no tiene límites.\r\n <\/p>\r\n <\/div>\r\n <div class=\"about-stats reveal\">\r\n <div class=\"stat-card\">\r\n <span class=\"stat-number\">25+<\/span>\r\n <span class=\"stat-label\">Diseños<\/span>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <span class=\"stat-number\">10+<\/span>\r\n <span class=\"stat-label\">Colecciones<\/span>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <span class=\"stat-number\">100%<\/span>\r\n <span class=\"stat-label\">Handmade<\/span>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <span class=\"stat-number\">∞<\/span>\r\n <span class=\"stat-label\">Creatividad<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- PRODUCTS SECTION -->\r\n<section id=\"products\">\r\n <h2 class=\"section-title reveal\">Nuestros Productos<\/h2>\r\n <p class=\"section-subtitle reveal\">Colecciones hechas con pasión, pixel por pixel<\/p>\r\n\r\n <div class=\"category-filter reveal\">\r\n <button class=\"filter-btn active\" data-filter=\"all\">Todos<\/button>\r\n <button class=\"filter-btn\" data-filter=\"gaming\">Gaming<\/button>\r\n <button class=\"filter-btn\" data-filter=\"anime\">Anime<\/button>\r\n <button class=\"filter-btn\" data-filter=\"movies\">Películas & Series<\/button>\r\n <button class=\"filter-btn\" data-filter=\"sports\">Deportes<\/button>\r\n <button class=\"filter-btn\" data-filter=\"nature\">Naturaleza<\/button>\r\n <\/div>\r\n\r\n <div class=\"product-grid\" id=\"productGrid\">\r\n\r\n <div class=\"product-card reveal\" data-category=\"gaming\">\r\n <span class=\"product-badge\">Popular<\/span>\r\n <img decoding=\"async\" src=\"https:\/\/pixellabpr.com\/wp-content\/uploads\/2026\/04\/mario-group.jpeg\" alt=\"Colección Mario Bros\" loading=\"lazy\">\r\n <div class=\"product-info\">\r\n <div class=\"product-category\">Gaming<\/div>\r\n <div class=\"product-name\">Colección Mario Bros<\/div>\r\n <div class=\"product-desc\">Mario, Luigi, Peach, Yoshi y más personajes del mundo Mushroom Kingdom<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"product-card reveal\" data-category=\"gaming\">\r\n <img decoding=\"async\" src=\"https:\/\/pixellabpr.com\/wp-content\/uploads\/2026\/04\/among-us-group.jpeg\" alt=\"Colección Among Us\" loading=\"lazy\">\r\n <div class=\"product-info\">\r\n <div class=\"product-category\">Gaming<\/div>\r\n <div class=\"product-name\">Colección Among Us<\/div>\r\n <div class=\"product-desc\">Crewmates en todos los colores. ¿Quién es el impostor?<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"product-card reveal\" data-category=\"movies\">\r\n <span class=\"product-badge\">Nuevo<\/span>\r\n <img decoding=\"async\" src=\"https:\/\/pixellabpr.com\/wp-content\/uploads\/2026\/04\/star-wars-group.jpeg\" alt=\"Colección Star Wars\" loading=\"lazy\">\r\n <div class=\"product-info\">\r\n <div class=\"product-category\">Películas<\/div>\r\n <div class=\"product-name\">Colección Star Wars<\/div>\r\n <div class=\"product-desc\">Baby Yoda, R2-D2, BB-8 y lightsabers del universo Star Wars<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"product-card reveal\" data-category=\"movies\">\r\n <img decoding=\"async\" src=\"https:\/\/pixellabpr.com\/wp-content\/uploads\/2026\/04\/tmnt-group.jpeg\" alt=\"Colección TMNT\" loading=\"lazy\">\r\n <div class=\"product-info\">\r\n <div class=\"product-category\">Series<\/div>\r\n <div class=\"product-name\">Tortugas Ninja<\/div>\r\n <div class=\"product-desc\">Leonardo, Raphael, Donatello y Michelangelo con sus pizzas<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"product-card reveal\" data-category=\"movies\">\r\n <img decoding=\"async\" src=\"https:\/\/pixellabpr.com\/wp-content\/uploads\/2026\/04\/hp-group.jpeg\" alt=\"Colección Harry Potter\" loading=\"lazy\">\r\n <div class=\"product-info\">\r\n <div class=\"product-category\">Películas<\/div>\r\n <div class=\"product-name\">Colección Harry Potter<\/div>\r\n <div class=\"product-desc\">Los magos más queridos de Hogwarts en pixel art<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"product-card reveal\" data-category=\"movies\">\r\n <img decoding=\"async\" src=\"https:\/\/pixellabpr.com\/wp-content\/uploads\/2026\/04\/squid-group.jpeg\" alt=\"Colección Squid Game\" loading=\"lazy\">\r\n <div class=\"product-info\">\r\n <div class=\"product-category\">Series<\/div>\r\n <div class=\"product-name\">Colección Squid Game<\/div>\r\n <div class=\"product-desc\">La muñeca, los guardias y los jugadores del juego del calamar<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"product-card reveal\" data-category=\"movies\">\r\n <img decoding=\"async\" src=\"https:\/\/pixellabpr.com\/wp-content\/uploads\/2026\/04\/stranger-group.jpeg\" alt=\"Colección Stranger Things\" loading=\"lazy\">\r\n <div class=\"product-info\">\r\n <div class=\"product-category\">Series<\/div>\r\n <div class=\"product-name\">Colección Stranger Things<\/div>\r\n <div class=\"product-desc\">Los personajes del Upside Down hechos pixel art<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"product-card reveal\" data-category=\"anime\">\r\n <span class=\"product-badge\">Popular<\/span>\r\n <img decoding=\"async\" src=\"https:\/\/pixellabpr.com\/wp-content\/uploads\/2026\/04\/anime-group.jpeg\" alt=\"Colección Anime\" loading=\"lazy\">\r\n <div class=\"product-info\">\r\n <div class=\"product-category\">Anime<\/div>\r\n <div class=\"product-name\">Colección Anime<\/div>\r\n <div class=\"product-desc\">Tus personajes favoritos del anime en llaveros pixel art<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"product-card reveal\" data-category=\"nature\">\r\n <img decoding=\"async\" src=\"https:\/\/pixellabpr.com\/wp-content\/uploads\/2026\/04\/flower-group.jpeg\" alt=\"Colección Flores\" loading=\"lazy\">\r\n <div class=\"product-info\">\r\n <div class=\"product-category\">Naturaleza<\/div>\r\n <div class=\"product-name\">Colección Flores<\/div>\r\n <div class=\"product-desc\">Hibiscus tropicales en todos los colores del arcoiris<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"product-card reveal\" data-category=\"nature\">\r\n <img decoding=\"async\" src=\"https:\/\/pixellabpr.com\/wp-content\/uploads\/2026\/04\/dog-group.jpeg\" alt=\"Colección Balloon Dogs\" loading=\"lazy\">\r\n <div class=\"product-info\">\r\n <div class=\"product-category\">Naturaleza<\/div>\r\n <div class=\"product-name\">Colección Balloon Dogs<\/div>\r\n <div class=\"product-desc\">Adorables perritos globo en rosa, azul y morado<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"product-card reveal\" data-category=\"sports\">\r\n <img decoding=\"async\" src=\"https:\/\/pixellabpr.com\/wp-content\/uploads\/2026\/04\/sports-ball-group.jpeg\" alt=\"Colección Deportes\" loading=\"lazy\">\r\n <div class=\"product-info\">\r\n <div class=\"product-category\">Deportes<\/div>\r\n <div class=\"product-name\">Colección Deportes<\/div>\r\n <div class=\"product-desc\">Basketball, volleyball y fútbol para los fans del deporte<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"product-card reveal\" data-category=\"sports\">\r\n <img decoding=\"async\" src=\"https:\/\/pixellabpr.com\/wp-content\/uploads\/2026\/04\/soccer-group.jpeg\" alt=\"Colección Fútbol\" loading=\"lazy\">\r\n <div class=\"product-info\">\r\n <div class=\"product-category\">Deportes<\/div>\r\n <div class=\"product-name\">Colección Jerseys<\/div>\r\n <div class=\"product-desc\">Camisetas de los mejores equipos y leyendas del fútbol<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"product-card reveal\" data-category=\"movies\">\r\n <img decoding=\"async\" src=\"https:\/\/pixellabpr.com\/wp-content\/uploads\/2026\/04\/badbo-group.jpeg\" alt=\"Colección Mixta\" loading=\"lazy\">\r\n <div class=\"product-info\">\r\n <div class=\"product-category\">Especial<\/div>\r\n <div class=\"product-name\">Colección Especial<\/div>\r\n <div class=\"product-desc\">Diseños únicos y accesorios especiales para coleccionar<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- PROCESS SECTION -->\r\n<section id=\"process\">\r\n <h2 class=\"section-title reveal\">Nuestro Proceso<\/h2>\r\n <p class=\"section-subtitle reveal\">De la idea al llavero<\/p>\r\n\r\n <div class=\"process-steps\">\r\n <div class=\"step reveal\">\r\n <div class=\"step-number\">01<\/div>\r\n <div class=\"step-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--neon-cyan)\" stroke-width=\"1.5\">\r\n <path d=\"M12 2a7 7 0 0 1 7 7c0 2.38-1.19 4.47-3 5.74V17a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-2.26C6.19 13.47 5 11.38 5 9a7 7 0 0 1 7-7z\"\/>\r\n <line x1=\"9\" y1=\"22\" x2=\"15\" y2=\"22\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"step-title\">Imaginar<\/div>\r\n <div class=\"step-desc\">Escogemos el personaje o diseño perfecto para crear<\/div>\r\n <\/div>\r\n\r\n <div class=\"step reveal\">\r\n <div class=\"step-number\">02<\/div>\r\n <div class=\"step-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--neon-green)\" stroke-width=\"1.5\">\r\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/>\r\n <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"\/>\r\n <line x1=\"3\" y1=\"15\" x2=\"21\" y2=\"15\"\/>\r\n <line x1=\"9\" y1=\"3\" x2=\"9\" y2=\"21\"\/>\r\n <line x1=\"15\" y1=\"3\" x2=\"15\" y2=\"21\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"step-title\">Diseñar<\/div>\r\n <div class=\"step-desc\">Creamos el patrón pixel por pixel en la tableta<\/div>\r\n <\/div>\r\n\r\n <div class=\"step reveal\">\r\n <div class=\"step-number\">03<\/div>\r\n <div class=\"step-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--neon-purple)\" stroke-width=\"1.5\">\r\n <circle cx=\"12\" cy=\"12\" r=\"3\"\/>\r\n <path d=\"M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"step-title\">Fusionar<\/div>\r\n <div class=\"step-desc\">Colocamos los beads y los fusionamos con calor<\/div>\r\n <\/div>\r\n\r\n <div class=\"step reveal\">\r\n <div class=\"step-number\">04<\/div>\r\n <div class=\"step-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--neon-pink)\" stroke-width=\"1.5\">\r\n <path d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"step-title\">Disfrutar<\/div>\r\n <div class=\"step-desc\">Tu llavero único y handmade está listo para brillar<\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- CONTACT \/ CTA -->\r\n<section id=\"contact\">\r\n <div class=\"cta-box reveal\">\r\n <h2 class=\"cta-title\">🎮 ¿Quieres tu propio diseño?<\/h2>\r\n <p class=\"cta-text\">\r\n Aceptamos pedidos personalizados. Tu personaje favorito, tu equipo, tu símbolo...\r\n ¡lo que imagines, lo hacemos realidad en pixel art!\r\n <\/p>\r\n\r\n <form id=\"contactForm\" style=\"margin-top:30px; display:flex; flex-direction:column; gap:15px; max-width:480px; margin-left:auto; margin-right:auto;\">\r\n <input type=\"text\" name=\"nombre\" placeholder=\"Tu nombre\" required\r\n style=\"padding:14px 18px; background:rgba(255,255,255,0.05); border:1px solid rgba(0,240,255,0.3); border-radius:8px; color:#fff; font-family:'Rajdhani',sans-serif; font-size:1rem; outline:none;\">\r\n <input type=\"email\" name=\"email\" placeholder=\"Tu correo electrónico\" required\r\n style=\"padding:14px 18px; background:rgba(255,255,255,0.05); border:1px solid rgba(0,240,255,0.3); border-radius:8px; color:#fff; font-family:'Rajdhani',sans-serif; font-size:1rem; outline:none;\">\r\n <input type=\"tel\" name=\"telefono\" placeholder=\"Tu teléfono (opcional)\"\r\n style=\"padding:14px 18px; background:rgba(255,255,255,0.05); border:1px solid rgba(0,240,255,0.3); border-radius:8px; color:#fff; font-family:'Rajdhani',sans-serif; font-size:1rem; outline:none;\">\r\n <textarea name=\"mensaje\" placeholder=\"¿Qué diseño quieres? Cuéntanos...\" rows=\"4\" required\r\n style=\"padding:14px 18px; background:rgba(255,255,255,0.05); border:1px solid rgba(0,240,255,0.3); border-radius:8px; color:#fff; font-family:'Rajdhani',sans-serif; font-size:1rem; outline:none; resize:vertical;\"><\/textarea>\r\n <button type=\"submit\" class=\"cta-btn\" style=\"border:none; cursor:pointer; font-family:'Orbitron',sans-serif;\">ENVIAR MENSAJE<\/button>\r\n <p id=\"formMsg\" style=\"display:none; color:var(--neon-green); font-size:0.95rem; text-align:center;\">✓ ¡Mensaje enviado! Te contactaremos pronto.<\/p>\r\n <\/form>\r\n\r\n <p style=\"margin-top:20px; font-size:0.8rem; color:rgba(255,255,255,0.3);\">Página en construcción • Próximamente tienda online<\/p>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\n document.getElementById('contactForm').addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n document.getElementById('formMsg').style.display = 'block';\r\n this.reset();\r\n });\r\n<\/script>\r\n\r\n<!-- FOOTER -->\r\n<footer>\r\n <p>PIXEL LAB by Diego © 2026 • Hecho con <span class=\"heart\">♥<\/span> y muchos píxeles<\/p>\r\n<\/footer>\r\n\r\n<!-- LIGHTBOX -->\r\n<div class=\"lightbox\" id=\"lightbox\" onclick=\"this.classList.remove('active')\">\r\n <span class=\"lightbox-close\">×<\/span>\r\n <img decoding=\"async\" id=\"lightboxImg\" src=\"\" alt=\"\">\r\n<\/div>\r\n\r\n<script>\r\n\/\/ ========== PARTICLE SYSTEM ==========\r\nconst particleCanvas = document.getElementById('particles');\r\nconst pCtx = particleCanvas.getContext('2d');\r\n\r\nfunction resizeCanvas() {\r\n particleCanvas.width = window.innerWidth;\r\n particleCanvas.height = window.innerHeight;\r\n smokeCanvas.width = window.innerWidth;\r\n smokeCanvas.height = window.innerHeight;\r\n}\r\n\r\nclass Particle {\r\n constructor() { this.reset(); }\r\n reset() {\r\n this.x = Math.random() * particleCanvas.width;\r\n this.y = Math.random() * particleCanvas.height;\r\n this.size = Math.random() * 2 + 0.5;\r\n this.speedX = (Math.random() - 0.5) * 0.5;\r\n this.speedY = (Math.random() - 0.5) * 0.5;\r\n this.opacity = Math.random() * 0.5 + 0.1;\r\n const colors = ['0,240,255', '0,255,136', '180,77,255', '255,45,149'];\r\n this.color = colors[Math.floor(Math.random() * colors.length)];\r\n this.pulse = Math.random() * Math.PI * 2;\r\n }\r\n update() {\r\n this.x += this.speedX;\r\n this.y += this.speedY;\r\n this.pulse += 0.02;\r\n if (this.x < 0 || this.x > particleCanvas.width || this.y < 0 || this.y > particleCanvas.height) this.reset();\r\n }\r\n draw() {\r\n const glow = Math.sin(this.pulse) * 0.3 + 0.7;\r\n pCtx.beginPath();\r\n pCtx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\r\n pCtx.fillStyle = `rgba(${this.color},${this.opacity * glow})`;\r\n pCtx.fill();\r\n \/\/ Glow\r\n pCtx.beginPath();\r\n pCtx.arc(this.x, this.y, this.size * 3, 0, Math.PI * 2);\r\n pCtx.fillStyle = `rgba(${this.color},${this.opacity * glow * 0.15})`;\r\n pCtx.fill();\r\n }\r\n}\r\n\r\nconst particles = [];\r\nfor (let i = 0; i < 120; i++) particles.push(new Particle());\r\n\r\n\/\/ ========== SMOKE SYSTEM ==========\r\nconst smokeCanvas = document.getElementById('smoke');\r\nconst sCtx = smokeCanvas.getContext('2d');\r\n\r\nclass SmokeParticle {\r\n constructor() { this.reset(); }\r\n reset() {\r\n this.x = smokeCanvas.width * 0.3 + Math.random() * smokeCanvas.width * 0.4;\r\n this.y = smokeCanvas.height * 0.55 + Math.random() * 40;\r\n this.size = Math.random() * 60 + 30;\r\n this.speedX = (Math.random() - 0.5) * 0.8;\r\n this.speedY = -(Math.random() * 1.5 + 0.3);\r\n this.opacity = 0;\r\n this.maxOpacity = Math.random() * 0.08 + 0.02;\r\n this.life = 0;\r\n this.maxLife = Math.random() * 200 + 100;\r\n this.growing = true;\r\n }\r\n update() {\r\n this.x += this.speedX;\r\n this.y += this.speedY;\r\n this.size += 0.3;\r\n this.life++;\r\n if (this.life < this.maxLife * 0.3) {\r\n this.opacity = (this.life \/ (this.maxLife * 0.3)) * this.maxOpacity;\r\n } else {\r\n this.opacity = this.maxOpacity * (1 - (this.life - this.maxLife * 0.3) \/ (this.maxLife * 0.7));\r\n }\r\n if (this.life >= this.maxLife) this.reset();\r\n }\r\n draw() {\r\n const grad = sCtx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);\r\n grad.addColorStop(0, `rgba(0,240,255,${this.opacity})`);\r\n grad.addColorStop(0.5, `rgba(0,180,255,${this.opacity * 0.5})`);\r\n grad.addColorStop(1, `rgba(0,100,200,0)`);\r\n sCtx.beginPath();\r\n sCtx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\r\n sCtx.fillStyle = grad;\r\n sCtx.fill();\r\n }\r\n}\r\n\r\nconst smokeParts = [];\r\nfor (let i = 0; i < 40; i++) {\r\n const s = new SmokeParticle();\r\n s.life = Math.random() * s.maxLife;\r\n smokeParts.push(s);\r\n}\r\n\r\n\/\/ ========== ANIMATION LOOP ==========\r\nfunction animate() {\r\n \/\/ Particles\r\n pCtx.clearRect(0, 0, particleCanvas.width, particleCanvas.height);\r\n particles.forEach(p => { p.update(); p.draw(); });\r\n\r\n \/\/ Smoke\r\n sCtx.clearRect(0, 0, smokeCanvas.width, smokeCanvas.height);\r\n smokeParts.forEach(s => { s.update(); s.draw(); });\r\n\r\n requestAnimationFrame(animate);\r\n}\r\n\r\nwindow.addEventListener('resize', resizeCanvas);\r\nresizeCanvas();\r\nanimate();\r\n\r\n\/\/ ========== NAVBAR SCROLL ==========\r\nconst navbar = document.getElementById('navbar');\r\nwindow.addEventListener('scroll', () => {\r\n navbar.classList.toggle('visible', window.scrollY > window.innerHeight * 0.5);\r\n});\r\n\r\n\/\/ ========== REVEAL ON SCROLL ==========\r\nconst revealElements = document.querySelectorAll('.reveal');\r\nconst revealObserver = new IntersectionObserver((entries) => {\r\n entries.forEach((entry, i) => {\r\n if (entry.isIntersecting) {\r\n setTimeout(() => entry.target.classList.add('visible'), i * 100);\r\n revealObserver.unobserve(entry.target);\r\n }\r\n });\r\n}, { threshold: 0.1 });\r\nrevealElements.forEach(el => revealObserver.observe(el));\r\n\r\n\/\/ ========== CATEGORY FILTER ==========\r\nconst filterBtns = document.querySelectorAll('.filter-btn');\r\nconst productCards = document.querySelectorAll('.product-card');\r\n\r\nfilterBtns.forEach(btn => {\r\n btn.addEventListener('click', () => {\r\n filterBtns.forEach(b => b.classList.remove('active'));\r\n btn.classList.add('active');\r\n const filter = btn.dataset.filter;\r\n productCards.forEach(card => {\r\n if (filter === 'all' || card.dataset.category === filter) {\r\n card.style.display = 'block';\r\n setTimeout(() => { card.style.opacity = 1; card.style.transform = 'translateY(0)'; }, 50);\r\n } else {\r\n card.style.opacity = 0;\r\n card.style.transform = 'translateY(20px)';\r\n setTimeout(() => { card.style.display = 'none'; }, 400);\r\n }\r\n });\r\n });\r\n});\r\n\r\n\/\/ ========== LIGHTBOX ==========\r\nconst lightbox = document.getElementById('lightbox');\r\nconst lightboxImg = document.getElementById('lightboxImg');\r\nproductCards.forEach(card => {\r\n card.addEventListener('click', () => {\r\n const img = card.querySelector('img');\r\n lightboxImg.src = img.src;\r\n lightbox.classList.add('active');\r\n });\r\n});\r\n\r\n\/\/ ========== PARALLAX MOUSE ==========\r\nconst logoContainer = document.querySelector('.logo-container');\r\ndocument.getElementById('hero').addEventListener('mousemove', (e) => {\r\n const x = (e.clientX \/ window.innerWidth - 0.5) * 20;\r\n const y = (e.clientY \/ window.innerHeight - 0.5) * 10;\r\n logoContainer.style.transform = `translateX(${x}px) translateY(${y}px)`;\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Pixel Lab by Diego Inicio Nosotros Productos Proceso Contacto Arte pixel hecho a mano • Llaveros • Pantallas • Marcos • y más Explora Sobre Pixel Lab Donde la creatividad se encuentra con los píxeles Pixel Lab nació de la mente creativa de Diego, un joven emprendedor de 10 años apasionado por el deporte, arte […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pixellabpr.com\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pixellabpr.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pixellabpr.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pixellabpr.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pixellabpr.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":46,"href":"https:\/\/pixellabpr.com\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":9,"href":"https:\/\/pixellabpr.com\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/9"}],"wp:attachment":[{"href":"https:\/\/pixellabpr.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}