<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>WebForge Palettes — 40 Design Systems</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Inter,sans-serif;background:#0a0a0a;color:#fafafa;padding:2rem}
h1{font-size:2.5rem;font-weight:800;margin-bottom:.5rem}
.subtitle{color:#a3a3a3;margin-bottom:2rem}
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2rem}
.filter-btn{padding:.5rem 1rem;border-radius:20px;border:1px solid #333;background:transparent;color:#ccc;cursor:pointer;font-size:.875rem;transition:all .2s}
.filter-btn:hover,.filter-btn.active{background:#fff;color:#000;border-color:#fff}
.search{width:100%;max-width:400px;padding:.75rem 1rem;border-radius:12px;border:1px solid #333;background:#111;color:#fff;font-size:1rem;margin-bottom:2rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:1.5rem}
.card{border-radius:16px;overflow:hidden;background:#111;border:1px solid #222;transition:transform .2s}
.card:hover{transform:translateY(-4px)}
.card-preview{display:flex;gap:0;height:180px}
.card-preview-light,.card-preview-dark{flex:1;padding:1.5rem;display:flex;flex-direction:column;justify-content:space-between}
.card-preview-light{border-right:1px solid rgba(0,0,0,.1)}
.preview-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;opacity:.5;margin-bottom:.5rem}
.preview-heading{font-size:1.25rem;font-weight:700;margin-bottom:.25rem}
.preview-body{font-size:.8rem;opacity:.7;margin-bottom:.5rem}
.preview-btn{display:inline-block;padding:.375rem .75rem;border-radius:6px;font-size:.75rem;font-weight:600}
.swatches{display:flex;gap:0;height:32px}
.swatch{flex:1}
.card-info{padding:1.25rem}
.card-title{font-size:1.1rem;font-weight:700;margin-bottom:.25rem}
.card-id{font-size:.75rem;color:#666;margin-bottom:.5rem}
.card-meta{font-size:.8rem;color:#999;margin-bottom:.75rem}
.tags{display:flex;flex-wrap:wrap;gap:.375rem}
.tag{padding:.25rem .5rem;border-radius:8px;font-size:.7rem;background:#1a1a1a;color:#aaa;border:1px solid #222}
.tag.mood{background:#1a0a2e;color:#c084fc;border-color:#2e1040}
.tag.industry{background:#0a1e14;color:#6ee7b7;border-color:#1a2e20}
.fonts{font-size:.75rem;color:#666;margin-top:.75rem}
.mode-toggle{display:flex;gap:.5rem;margin-bottom:2rem}
</style>
</head>
<body>
<h1>🎨 WebForge Palettes</h1>
<p class="subtitle">40 paletas curadas con mood, tipografías y matching por industria</p>
<input class="search" placeholder="Buscar por nombre, mood, industria..." id="search">
<div class="filters" id="filters"></div>
<div class="grid" id="grid"></div>
<script>
const palettes = [{"id":"P01","name":"Corporate Blue","mood":["profesional","confianza","corporativo","serio"],"industries":["Fintech","SaaS B2B","Consultoría","Legal","Seguros"],"colors":{"light":{"text":"#0a0a0f","background":"#f8f9fc","primary":"#1e40af","secondary":"#dbeafe","accent":"#3b82f6"},"dark":{"text":"#f0f4ff","background":"#0a0f1e","primary":"#60a5fa","secondary":"#1e293b","accent":"#3b82f6"}},"typography":{"heading":"Inter","body":"Inter","mono":"JetBrains Mono"},"radius":"8px","category":"profesional"},{"id":"P02","name":"Slate Professional","mood":["elegante","neutro","sofisticado","minimalista"],"industries":["Agencia","Portfolio","Arquitectura","Diseño","Moda"],"colors":{"light":{"text":"#0f172a","background":"#f8fafc","primary":"#334155","secondary":"#e2e8f0","accent":"#475569"},"dark":{"text":"#f1f5f9","background":"#0f172a","primary":"#94a3b8","secondary":"#1e293b","accent":"#64748b"}},"typography":{"heading":"Plus Jakarta Sans","body":"Inter","mono":"Fira Code"},"radius":"6px","category":"profesional"},{"id":"P03","name":"Navy Trust","mood":["confianza","autoridad","estable","institucional"],"industries":["Banca","Gobierno","Educación","Salud","Inmobiliaria"],"colors":{"light":{"text":"#0c1222","background":"#f5f7fa","primary":"#1e3a5f","secondary":"#d4e4f7","accent":"#2563eb"},"dark":{"text":"#e8edf5","background":"#0c1222","primary":"#5b9bd5","secondary":"#162740","accent":"#3b82f6"}},"typography":{"heading":"Merriweather","body":"Source Sans 3","mono":"Source Code Pro"},"radius":"8px","category":"profesional"},{"id":"P04","name":"Indigo SaaS","mood":["moderno","tech","innovador","limpio"],"industries":["SaaS","Startup Tech","AI/ML","DevTools","Cloud"],"colors":{"light":{"text":"#111827","background":"#fafbff","primary":"#4f46e5","secondary":"#e0e7ff","accent":"#6366f1"},"dark":{"text":"#e0e7ff","background":"#0f0e1a","primary":"#818cf8","secondary":"#1e1b4b","accent":"#6366f1"}},"typography":{"heading":"Inter","body":"Inter","mono":"JetBrains Mono"},"radius":"12px","category":"tech"},{"id":"P05","name":"Deep Violet","mood":["premium","creativo","exclusivo","lujoso"],"industries":["Fintech Premium","Crypto","Eventos VIP","Entretenimiento","Gaming"],"colors":{"light":{"text":"#1a0a2e","background":"#faf5ff","primary":"#7c3aed","secondary":"#ede9fe","accent":"#a78bfa"},"dark":{"text":"#f5f0ff","background":"#0f0a1e","primary":"#a78bfa","secondary":"#1e1533","accent":"#7c3aed"}},"typography":{"heading":"Space Grotesk","body":"DM Sans","mono":"Fira Code"},"radius":"12px","category":"premium"},{"id":"P06","name":"Forest Green","mood":["natural","orgánico","sostenible","fresco"],"industries":["Eco-friendly","Alimentación orgánica","Yoga/Wellness","Jardinería","Turismo rural"],"colors":{"light":{"text":"#0d1f0d","background":"#f5faf5","primary":"#166534","secondary":"#dcfce7","accent":"#22c55e"},"dark":{"text":"#ecfdf5","background":"#0d1a0d","primary":"#4ade80","secondary":"#14301d","accent":"#22c55e"}},"typography":{"heading":"DM Serif Display","body":"Nunito","mono":"IBM Plex Mono"},"radius":"8px","category":"natural"},{"id":"P07","name":"Sage Calm","mood":["calmado","zen","equilibrado","suave"],"industries":["Spa","Meditación","Terapia","Herboristería","Wellness"],"colors":{"light":{"text":"#1a2e1a","background":"#f6f9f4","primary":"#5f7c5f","secondary":"#e8efe4","accent":"#7da07d"},"dark":{"text":"#dce8dc","background":"#121e12","primary":"#8fbc8f","secondary":"#1a2e1a","accent":"#6b9e6b"}},"typography":{"heading":"Playfair Display","body":"Lora","mono":"Courier Prime"},"radius":"16px","category":"natural"},{"id":"P08","name":"Earth Tone","mood":["cálido","rústico","artesanal","acogedor"],"industries":["Café","Panadería","Restaurante","Cerámica","Muebles artesanales"],"colors":{"light":{"text":"#2c1810","background":"#fdf8f4","primary":"#92400e","secondary":"#fef3c7","accent":"#d97706"},"dark":{"text":"#fef3e2","background":"#1a0f08","primary":"#fbbf24","secondary":"#2c1810","accent":"#d97706"}},"typography":{"heading":"Fraunces","body":"Outfit","mono":"IBM Plex Mono"},"radius":"8px","category":"cálido"},{"id":"P09","name":"Terracotta","mood":["mediterráneo","artesanal","auténtico","cálido"],"industries":["Alfarería","Vinos","Restaurante mediterráneo","Decoración","Turismo"],"colors":{"light":{"text":"#2e1a0e","background":"#fef7f0","primary":"#c2410c","secondary":"#ffedd5","accent":"#ea580c"},"dark":{"text":"#fef0e0","background":"#1a0e06","primary":"#fb923c","secondary":"#2e1a0e","accent":"#ea580c"}},"typography":{"heading":"Cormorant Garamond","body":"Karla","mono":"Source Code Pro"},"radius":"4px","category":"cálido"},{"id":"P10","name":"Ocean Breeze","mood":["fresco","relajado","costero","limpio"],"industries":["Beach resort","Surf shop","Marisquería","Náutica","Turismo costa"],"colors":{"light":{"text":"#0a1929","background":"#f0f9ff","primary":"#0284c7","secondary":"#e0f2fe","accent":"#06b6d4"},"dark":{"text":"#e0f2fe","background":"#0a1520","primary":"#38bdf8","secondary":"#0c2a3e","accent":"#06b6d4"}},"typography":{"heading":"Outfit","body":"Inter","mono":"Fira Code"},"radius":"12px","category":"fresco"},{"id":"P11","name":"Sunrise Energy","mood":["energético","optimista","joven","dinámico"],"industries":["Fitness","Startup","Delivery","App móvil","Eventos"],"colors":{"light":{"text":"#1a0a00","background":"#fffbf5","primary":"#ea580c","secondary":"#fff7ed","accent":"#f59e0b"},"dark":{"text":"#fff5e6","background":"#1a0a00","primary":"#fb923c","secondary":"#2e1400","accent":"#f59e0b"}},"typography":{"heading":"Sora","body":"DM Sans","mono":"JetBrains Mono"},"radius":"16px","category":"energético"},{"id":"P12","name":"Electric Coral","mood":["vibrante","audaz","moderno","llamativo"],"industries":["Moda joven","Música","Club nocturno","Streetwear","Redes sociales"],"colors":{"light":{"text":"#1a0612","background":"#fff5f7","primary":"#e11d48","secondary":"#ffe4e6","accent":"#fb7185"},"dark":{"text":"#ffe4e6","background":"#1a0612","primary":"#fb7185","secondary":"#2e0a1e","accent":"#e11d48"}},"typography":{"heading":"Space Grotesk","body":"Inter","mono":"Fira Code"},"radius":"16px","category":"energético"},{"id":"P13","name":"Neon Lime","mood":["joven","deportivo","tech","fresco"],"industries":["Deportes","Esports","Bebidas energéticas","Tech startup","Fitness app"],"colors":{"light":{"text":"#0a1a00","background":"#f7fff0","primary":"#65a30d","secondary":"#ecfccb","accent":"#84cc16"},"dark":{"text":"#ecfccb","background":"#0a1200","primary":"#a3e635","secondary":"#1a2e00","accent":"#84cc16"}},"typography":{"heading":"Lexend","body":"Inter","mono":"JetBrains Mono"},"radius":"12px","category":"energético"},{"id":"P14","name":"Hot Pink","mood":["divertido","femenino","atrevido","pop"],"industries":["Belleza","Moda","Dulcería","Influencer","Lifestyle"],"colors":{"light":{"text":"#2e0a20","background":"#fff5f9","primary":"#db2777","secondary":"#fce7f3","accent":"#ec4899"},"dark":{"text":"#fce7f3","background":"#1a0612","primary":"#f472b6","secondary":"#2e0a20","accent":"#ec4899"}},"typography":{"heading":"Poppins","body":"Nunito","mono":"Source Code Pro"},"radius":"20px","category":"energético"},{"id":"P15","name":"Golden Luxury","mood":["lujoso","exclusivo","premium","sofisticado"],"industries":["Joyería","Relojería","Hotel 5*","Inmobiliaria lujo","Moda alta gama"],"colors":{"light":{"text":"#1a1000","background":"#fffdf5","primary":"#92700c","secondary":"#fef9c3","accent":"#ca8a04"},"dark":{"text":"#fef9c3","background":"#120e00","primary":"#eab308","secondary":"#1a1400","accent":"#ca8a04"}},"typography":{"heading":"Cormorant Garamond","body":"EB Garamond","mono":"IBM Plex Mono"},"radius":"2px","category":"premium"},{"id":"P16","name":"Midnight Mono","mood":["oscuro","minimalista","editorial","serio"],"industries":["Fotografía","Portfolio","Arquitectura","Galería arte","Estudio diseño"],"colors":{"light":{"text":"#0a0a0a","background":"#fafafa","primary":"#171717","secondary":"#f5f5f5","accent":"#404040"},"dark":{"text":"#fafafa","background":"#0a0a0a","primary":"#e5e5e5","secondary":"#171717","accent":"#a3a3a3"}},"typography":{"heading":"Playfair Display","body":"Inter","mono":"JetBrains Mono"},"radius":"0px","category":"minimal"},{"id":"P17","name":"Dark Elegance","mood":["elegante","nocturno","premium","sofisticado"],"industries":["Bar cocktails","Club","Cine","Música","Automotive"],"colors":{"light":{"text":"#1a1a2e","background":"#f5f5fa","primary":"#16213e","secondary":"#e2e2f0","accent":"#0f3460"},"dark":{"text":"#eaeaf5","background":"#0a0a1a","primary":"#e94560","secondary":"#16213e","accent":"#533483"}},"typography":{"heading":"Cinzel","body":"Raleway","mono":"Fira Code"},"radius":"4px","category":"premium"},{"id":"P18","name":"Carbon Tech","mood":["tech","futurista","oscuro","potente"],"industries":["Cybersecurity","DevTools","Gaming","Hardware","AI"],"colors":{"light":{"text":"#09090b","background":"#fafafa","primary":"#18181b","secondary":"#f4f4f5","accent":"#22d3ee"},"dark":{"text":"#fafafa","background":"#09090b","primary":"#22d3ee","secondary":"#18181b","accent":"#06b6d4"}},"typography":{"heading":"Space Grotesk","body":"IBM Plex Sans","mono":"JetBrains Mono"},"radius":"8px","category":"tech"},{"id":"P19","name":"Creative Purple","mood":["creativo","imaginativo","artístico","inspirador"],"industries":["Agencia creativa","Estudio diseño","Ilustración","Branding","Fotografía"],"colors":{"light":{"text":"#1e0a2e","background":"#fdf4ff","primary":"#9333ea","secondary":"#f3e8ff","accent":"#a855f7"},"dark":{"text":"#f3e8ff","background":"#0f051a","primary":"#c084fc","secondary":"#1e0a2e","accent":"#a855f7"}},"typography":{"heading":"Cabinet Grotesk","body":"Satoshi","mono":"Fira Code"},"radius":"16px","category":"creativo"},{"id":"P20","name":"Pastel Dream","mood":["suave","dulce","delicado","infantil"],"industries":["Guardería","Ilustración infantil","Pastelería","Papelería","Baby shop"],"colors":{"light":{"text":"#2e2040","background":"#fef7ff","primary":"#c084fc","secondary":"#fae8ff","accent":"#f0abfc"},"dark":{"text":"#fae8ff","background":"#1a0e2e","primary":"#d8b4fe","secondary":"#2e1a40","accent":"#e879f9"}},"typography":{"heading":"Quicksand","body":"Nunito","mono":"Source Code Pro"},"radius":"24px","category":"suave"},{"id":"P21","name":"Bold Red","mood":["urgente","poderoso","pasional","impactante"],"industries":["Fast food","Deportes","Ofertas/Deals","Emergencias","Noticias"],"colors":{"light":{"text":"#1a0000","background":"#fff5f5","primary":"#dc2626","secondary":"#fee2e2","accent":"#ef4444"},"dark":{"text":"#fee2e2","background":"#1a0505","primary":"#f87171","secondary":"#2e0a0a","accent":"#ef4444"}},"typography":{"heading":"Montserrat","body":"Open Sans","mono":"Fira Code"},"radius":"8px","category":"energético"},{"id":"P22","name":"Royal Burgundy","mood":["elegante","exclusivo","tradicional","cálido"],"industries":["Vino","Hotel boutique","Restaurante gourmet","Abogados","Moda clásica"],"colors":{"light":{"text":"#2e0a14","background":"#fdf2f4","primary":"#881337","secondary":"#ffe4e6","accent":"#be123c"},"dark":{"text":"#ffe4e6","background":"#1a0610","primary":"#fb7185","secondary":"#2e0a14","accent":"#e11d48"}},"typography":{"heading":"Cormorant Garamond","body":"Libre Baskerville","mono":"IBM Plex Mono"},"radius":"4px","category":"premium"},{"id":"P23","name":"Teal Fresh","mood":["fresco","moderno","confiable","limpio"],"industries":["Healthtech","Dentista","Clínica","Farmacia","Nutrición"],"colors":{"light":{"text":"#042f2e","background":"#f0fdfa","primary":"#0d9488","secondary":"#ccfbf1","accent":"#14b8a6"},"dark":{"text":"#ccfbf1","background":"#042f2e","primary":"#2dd4bf","secondary":"#0a2520","accent":"#14b8a6"}},"typography":{"heading":"Plus Jakarta Sans","body":"Inter","mono":"JetBrains Mono"},"radius":"12px","category":"fresco"},{"id":"P24","name":"Mint Clean","mood":["limpio","higiénico","fresco","moderno"],"industries":["Limpieza","Dental","Cosmética natural","Farmacia","Óptica"],"colors":{"light":{"text":"#0a2e20","background":"#f0fdf4","primary":"#059669","secondary":"#d1fae5","accent":"#34d399"},"dark":{"text":"#d1fae5","background":"#0a1e14","primary":"#6ee7b7","secondary":"#0a2e20","accent":"#34d399"}},"typography":{"heading":"Outfit","body":"DM Sans","mono":"Fira Code"},"radius":"12px","category":"fresco"},{"id":"P25","name":"Sky Clarity","mood":["abierto","accesible","amigable","claro"],"industries":["Educación online","Non-profit","App infantil","Comunidad","Plataforma social"],"colors":{"light":{"text":"#0c1929","background":"#f0f9ff","primary":"#0369a1","secondary":"#e0f2fe","accent":"#0ea5e9"},"dark":{"text":"#e0f2fe","background":"#0c1929","primary":"#38bdf8","secondary":"#0c2a3e","accent":"#0ea5e9"}},"typography":{"heading":"Lexend","body":"Nunito","mono":"Source Code Pro"},"radius":"16px","category":"fresco"},{"id":"P26","name":"Warm Amber","mood":["cálido","acogedor","hogar","confortable"],"industries":["Inmobiliaria","Decoración","Muebles","Airbnb","Café acogedor"],"colors":{"light":{"text":"#1c0e00","background":"#fffbeb","primary":"#b45309","secondary":"#fef3c7","accent":"#f59e0b"},"dark":{"text":"#fef3c7","background":"#1a0e00","primary":"#fbbf24","secondary":"#2e1800","accent":"#f59e0b"}},"typography":{"heading":"Fraunces","body":"Source Serif 4","mono":"IBM Plex Mono"},"radius":"8px","category":"cálido"},{"id":"P27","name":"Peach Soft","mood":["suave","femenino","delicado","cálido"],"industries":["Floristería","Cosmética","Boda/Eventos","Café","Moda femenina"],"colors":{"light":{"text":"#2e1a14","background":"#fff8f5","primary":"#c2410c","secondary":"#fed7aa","accent":"#fb923c"},"dark":{"text":"#fed7aa","background":"#1a0e0a","primary":"#fdba74","secondary":"#2e1a0e","accent":"#fb923c"}},"typography":{"heading":"Playfair Display","body":"Lato","mono":"Courier Prime"},"radius":"16px","category":"suave"},{"id":"P28","name":"Pure Monochrome","mood":["minimalista","editorial","artístico","limpio"],"industries":["Revista","Blog editorial","Fotografía B&W","Typography studio","Arte"],"colors":{"light":{"text":"#000000","background":"#ffffff","primary":"#000000","secondary":"#f5f5f5","accent":"#737373"},"dark":{"text":"#ffffff","background":"#000000","primary":"#ffffff","secondary":"#171717","accent":"#a3a3a3"}},"typography":{"heading":"Newsreader","body":"Source Serif 4","mono":"JetBrains Mono"},"radius":"0px","category":"minimal"},{"id":"P29","name":"Warm Gray","mood":["neutro","profesional","elegante","discreto"],"industries":["Consultoría","Contabilidad","Abogados","Notaría","Asesoría"],"colors":{"light":{"text":"#1c1917","background":"#fafaf9","primary":"#44403c","secondary":"#f5f5f4","accent":"#78716c"},"dark":{"text":"#fafaf9","background":"#1c1917","primary":"#d6d3d1","secondary":"#292524","accent":"#a8a29e"}},"typography":{"heading":"Merriweather","body":"Open Sans","mono":"IBM Plex Mono"},"radius":"6px","category":"profesional"},{"id":"P30","name":"Cool Zinc","mood":["moderno","limpio","tech","preciso"],"industries":["Fintech","Productivity app","Dashboard","Analytics","CRM"],"colors":{"light":{"text":"#09090b","background":"#fafafa","primary":"#27272a","secondary":"#f4f4f5","accent":"#52525b"},"dark":{"text":"#fafafa","background":"#09090b","primary":"#d4d4d8","secondary":"#18181b","accent":"#71717a"}},"typography":{"heading":"Inter","body":"Inter","mono":"JetBrains Mono"},"radius":"8px","category":"tech"},{"id":"P31","name":"Aurora Gradient","mood":["futurista","mágico","AI","innovador"],"industries":["AI/ML","Crypto","Metaverso","Music streaming","Creative tools"],"colors":{"light":{"text":"#0f0720","background":"#fafaff","primary":"#7c3aed","secondary":"#ede9fe","accent":"#06b6d4"},"dark":{"text":"#ede9fe","background":"#0f0720","primary":"#a78bfa","secondary":"#1e1040","accent":"#22d3ee"}},"gradient":{"from":"#7c3aed","via":"#ec4899","to":"#06b6d4"},"typography":{"heading":"Space Grotesk","body":"Inter","mono":"Fira Code"},"radius":"16px","category":"tech"},{"id":"P32","name":"Sunset Glow","mood":["cálido","inspirador","creativo","energético"],"industries":["Travel","Festival","Lifestyle blog","Fotografía","Coaching"],"colors":{"light":{"text":"#1a0a00","background":"#fffaf5","primary":"#ea580c","secondary":"#fff1e6","accent":"#e11d48"},"dark":{"text":"#fff1e6","background":"#1a0a00","primary":"#fb923c","secondary":"#2e1400","accent":"#fb7185"}},"gradient":{"from":"#f59e0b","via":"#ea580c","to":"#e11d48"},"typography":{"heading":"Sora","body":"Outfit","mono":"Source Code Pro"},"radius":"12px","category":"energético"},{"id":"P33","name":"Medical Clean","mood":["limpio","confiable","profesional","salud"],"industries":["Hospital","Clínica","Dentista","Fisioterapia","Laboratorio"],"colors":{"light":{"text":"#0a2540","background":"#f0f8ff","primary":"#0077b6","secondary":"#caf0f8","accent":"#00b4d8"},"dark":{"text":"#caf0f8","background":"#0a1929","primary":"#48cae4","secondary":"#023e58","accent":"#00b4d8"}},"typography":{"heading":"Plus Jakarta Sans","body":"DM Sans","mono":"IBM Plex Mono"},"radius":"12px","category":"profesional"},{"id":"P34","name":"Legal Classic","mood":["serio","respetable","tradicional","estable"],"industries":["Bufete abogados","Notaría","Tribunal","Asesoría fiscal","Gestora"],"colors":{"light":{"text":"#1a1a2e","background":"#f8f7f4","primary":"#2c2c54","secondary":"#e8e6e0","accent":"#706f6c"},"dark":{"text":"#e8e6e0","background":"#12121e","primary":"#aeaeb2","secondary":"#2c2c40","accent":"#8e8e93"}},"typography":{"heading":"Libre Baskerville","body":"Crimson Pro","mono":"Courier Prime"},"radius":"4px","category":"profesional"},{"id":"P35","name":"Restaurant Warm","mood":["apetitoso","cálido","acogedor","gastronómico"],"industries":["Restaurante","Catering","Food truck","Pizzería","Taberna"],"colors":{"light":{"text":"#2e0e00","background":"#fef9f2","primary":"#9a3412","secondary":"#fed7aa","accent":"#c2410c"},"dark":{"text":"#fed7aa","background":"#1a0800","primary":"#fb923c","secondary":"#3b1106","accent":"#ea580c"}},"typography":{"heading":"Fraunces","body":"Karla","mono":"IBM Plex Mono"},"radius":"8px","category":"cálido"},{"id":"P36","name":"Education Bright","mood":["accesible","amigable","educativo","claro"],"industries":["Colegio","Academia","E-learning","Biblioteca","Centro formación"],"colors":{"light":{"text":"#0f172a","background":"#f8fafc","primary":"#1d4ed8","secondary":"#dbeafe","accent":"#f59e0b"},"dark":{"text":"#dbeafe","background":"#0f172a","primary":"#60a5fa","secondary":"#1e293b","accent":"#fbbf24"}},"typography":{"heading":"Lexend","body":"Nunito","mono":"Source Code Pro"},"radius":"12px","category":"fresco"},{"id":"P37","name":"Real Estate","mood":["confiable","premium","estable","aspiracional"],"industries":["Inmobiliaria","Constructora","Promotora","Arquitecto","Home staging"],"colors":{"light":{"text":"#1a1a2e","background":"#f9f9f6","primary":"#1e3a5f","secondary":"#dce5f0","accent":"#c7a95c"},"dark":{"text":"#dce5f0","background":"#0e1420","primary":"#6b9dc2","secondary":"#1a2940","accent":"#d4b96a"}},"typography":{"heading":"Cormorant Garamond","body":"Raleway","mono":"Fira Code"},"radius":"4px","category":"premium"},{"id":"P38","name":"Gym Power","mood":["poderoso","motivador","energético","fuerte"],"industries":["Gimnasio","CrossFit","MMA","Personal trainer","Suplementos"],"colors":{"light":{"text":"#0a0a0a","background":"#fafafa","primary":"#dc2626","secondary":"#fef2f2","accent":"#171717"},"dark":{"text":"#fafafa","background":"#0a0a0a","primary":"#ef4444","secondary":"#1c1917","accent":"#fbbf24"}},"typography":{"heading":"Bebas Neue","body":"Barlow","mono":"JetBrains Mono"},"radius":"4px","category":"energético"},{"id":"P39","name":"Beauty Blush","mood":["femenino","elegante","delicado","premium"],"industries":["Salón belleza","Peluquería","Estética","Nail art","Cosmética"],"colors":{"light":{"text":"#2e1a20","background":"#fdf2f8","primary":"#be185d","secondary":"#fce7f3","accent":"#f9a8d4"},"dark":{"text":"#fce7f3","background":"#1a0612","primary":"#f472b6","secondary":"#2e0a1e","accent":"#ec4899"}},"typography":{"heading":"Playfair Display","body":"Lato","mono":"Source Code Pro"},"radius":"20px","category":"suave"},{"id":"P40","name":"Auto Mechanic","mood":["industrial","fuerte","práctico","fiable"],"industries":["Taller mecánico","Automoción","Ferretería","Construcción","Fontanería"],"colors":{"light":{"text":"#111827","background":"#f9fafb","primary":"#1f2937","secondary":"#e5e7eb","accent":"#f59e0b"},"dark":{"text":"#e5e7eb","background":"#111827","primary":"#d1d5db","secondary":"#1f2937","accent":"#fbbf24"}},"typography":{"heading":"Oswald","body":"Roboto","mono":"IBM Plex Mono"},"radius":"4px","category":"profesional"}];
const categories = [...new Set(palettes.map(p=>p.category))];
const filtersEl = document.getElementById('filters');
const gridEl = document.getElementById('grid');
const searchEl = document.getElementById('search');
let activeCategory = null;
filtersEl.innerHTML = '<button class="filter-btn active" data-cat="">Todas</button>' +
categories.map(c=>'<button class="filter-btn" data-cat="'+c+'">'+c.charAt(0).toUpperCase()+c.slice(1)+'</button>').join('');
filtersEl.addEventListener('click',e=>{
if(!e.target.matches('.filter-btn'))return;
filtersEl.querySelectorAll('.filter-btn').forEach(b=>b.classList.remove('active'));
e.target.classList.add('active');
activeCategory=e.target.dataset.cat||null;
render();
});
searchEl.addEventListener('input',render);
function render(){
const q = searchEl.value.toLowerCase();
const filtered = palettes.filter(p=>{
if(activeCategory && p.category !== activeCategory) return false;
if(q){
const searchable = [p.name,p.category,...p.mood,...p.industries,p.typography.heading,p.typography.body].join(' ').toLowerCase();
if(!searchable.includes(q)) return false;
}
return true;
});
gridEl.innerHTML = filtered.map(p=>{
const l = p.colors.light, d = p.colors.dark;
return `<div class="card">
<div class="card-preview">
<div class="card-preview-light" style="background:${l.background};color:${l.text}">
<div>
<div class="preview-label">Light</div>
<div class="preview-heading" style="color:${l.text}">Heading</div>
<div class="preview-body">Body text sample</div>
</div>
<div><span class="preview-btn" style="background:${l.primary};color:${l.background}">Primary</span>
<span class="preview-btn" style="background:${l.accent};color:${l.background};margin-left:4px">Accent</span></div>
</div>
<div class="card-preview-dark" style="background:${d.background};color:${d.text}">
<div>
<div class="preview-label" style="color:${d.text}">Dark</div>
<div class="preview-heading" style="color:${d.text}">Heading</div>
<div class="preview-body">Body text sample</div>
</div>
<div><span class="preview-btn" style="background:${d.primary};color:${d.background}">Primary</span>
<span class="preview-btn" style="background:${d.accent};color:${d.background};margin-left:4px">Accent</span></div>
</div>
</div>
<div class="swatches">
<div class="swatch" style="background:${l.primary}" title="Primary"></div>
<div class="swatch" style="background:${l.secondary}" title="Secondary"></div>
<div class="swatch" style="background:${l.accent}" title="Accent"></div>
<div class="swatch" style="background:${l.background}" title="Background"></div>
<div class="swatch" style="background:${l.text}" title="Text"></div>
</div>
<div class="card-info">
<div class="card-id">${p.id} · ${p.category}</div>
<div class="card-title">${p.name}</div>
<div class="card-meta">🔤 ${p.typography.heading} + ${p.typography.body} · ◉ ${p.radius}</div>
<div class="tags">
${p.mood.map(m=>'<span class="tag mood">'+m+'</span>').join('')}
</div>
<div class="tags" style="margin-top:.375rem">
${p.industries.map(i=>'<span class="tag industry">'+i+'</span>').join('')}
</div>
<div class="fonts">CSS: --primary: ${hexToHSL(l.primary)}</div>
</div>
</div>`;
}).join('');
}
function hexToHSL(hex){
let r=parseInt(hex.slice(1,3),16)/255,g=parseInt(hex.slice(3,5),16)/255,b=parseInt(hex.slice(5,7),16)/255;
const max=Math.max(r,g,b),min=Math.min(r,g,b);let h,s,l=(max+min)/2;
if(max===min){h=s=0}else{const d=max-min;s=l>.5?d/(2-max-min):d/(max+min);
switch(max){case r:h=((g-b)/d+(g<b?6:0))/6;break;case g:h=((b-r)/d+2)/6;break;case b:h=((r-g)/d+4)/6;break}}
return Math.round(h*360)+' '+Math.round(s*100)+'% '+Math.round(l*100)+'%';
}
render();
</script>
</body>
</html>
