nutraceuticals | Advanced Cellular Nutrition | Human Health Line<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,300;1,400&family=Roboto+Condensed:wght@300;400;700&family=Roboto+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\n<style>\n :root {\n --forest: #1B4332;\n --forest-mid: #2D6A4F;\n --forest-light: #40916C;\n --lime: #52B788;\n --lime-light: #74C69D;\n --lime-dim: rgba(82,183,136,0.15);\n --lime-glow: rgba(82,183,136,0.30);\n --cream: #FAFAF5;\n --cream-dark: #F0EDE4;\n --cream-dim: rgba(250,250,245,0.65);\n --cream-faint: rgba(250,250,245,0.07);\n --border: rgba(82,183,136,0.22);\n --shadow: 0 8px 40px rgba(0,0,0,0.18);\n }\n * { margin: 0; padding: 0; box-sizing: border-box; }\n html { scroll-behavior: smooth; }\n body {\n background: var(--cream);\n color: var(--forest);\n font-family: 'Roboto', sans-serif;\n overflow-x: hidden;\n cursor: default;\n }\n body::before {\n content: '';\n position: fixed; inset: 0;\n background:\n radial-gradient(ellipse 80% 60% at 10% 20%, rgba(82,183,136,0.06) 0%, transparent 60%),\n radial-gradient(ellipse 60% 80% at 90% 80%, rgba(27,67,50,0.05) 0%, transparent 60%),\n repeating-linear-gradient(0deg, transparent, transparent 80px, rgba(27,67,50,0.018) 80px, rgba(27,67,50,0.018) 81px),\n repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(27,67,50,0.018) 80px, rgba(27,67,50,0.018) 81px);\n pointer-events: none;\n z-index: 0;\n }\n [type=button],[type=submit],button { white-space: unset !important; }\n button:focus, button:hover { background-color: transparent !important;\n color: #2D6A4F !important;}\n\n \/* \u2500\u2500 HERO \u2500\u2500 *\/\n .hero {\n position: relative; min-height: 100vh;\n display: flex; align-items: center;\n padding: 120px 60px 80px; overflow: hidden;\n }\n .hero-bg-img {\n position: absolute; inset: 0;\n background: url('https:\/\/crassulapharma.com\/wp-content\/uploads\/2026\/04\/hero-nutraceuticals.jpg') center\/cover;\n filter: brightness(0.4) saturate(0.9);\n z-index: 0;\n }\n .hero-overlay {\n position: absolute; inset: 0;\n background: linear-gradient(105deg, var(--forest) 42%, transparent 100%);\n z-index: 1;\n }\n .hero-content { position: relative; z-index: 2; max-width: 680px; }\n .hero-eyebrow {\n display: inline-flex; align-items: center; gap: 10px;\n font-family: 'Roboto Mono', monospace;\n font-size: 11px; letter-spacing: 3px; text-transform: uppercase;\n color: #fff; margin-bottom: 28px;\n opacity: 0; animation: fadeUp 0.8s 0.2s forwards;\n }\n .hero-eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--lime); }\n .hero-title {\n font-family: 'Roboto Condensed', sans-serif;\n font-size: clamp(52px, 7vw, 90px);\n font-weight: 700; line-height: 0.95; letter-spacing: -2px;\n color: var(--cream); margin-bottom: 12px;\n opacity: 0; animation: fadeUp 0.8s 0.4s forwards;\n }\n .hero-title .accent { color: var(--lime); }\n .hero-subtitle {\n font-family: 'Roboto Condensed', sans-serif;\n font-size: clamp(26px, 3.5vw, 44px);\n font-weight: 300; color: var(--cream-dim); margin-bottom: 28px;\n opacity: 0; animation: fadeUp 0.8s 0.55s forwards;\n }\n .hero-tagline {\n font-size: 15px; font-weight: 300; line-height: 1.7;\n color: var(--cream-dim); max-width: 480px; margin-bottom: 48px;\n opacity: 0; animation: fadeUp 0.8s 0.7s forwards;\n }\n .hero-actions {\n display: flex; gap: 16px; flex-wrap: wrap;\n opacity: 0; animation: fadeUp 0.8s 0.85s forwards;\n }\n .btn-primary {\n background: var(--lime); color: var(--forest);\n font-family: 'Roboto', sans-serif; font-weight: 700;\n font-size: 13px; letter-spacing: 2px; text-transform: uppercase;\n padding: 16px 36px; border: none; cursor: pointer; transition: all 0.3s;\n clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));\n }\n .btn-primary:hover { background: var(--lime-light) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 24px var(--lime-glow) !important; }\n .btn-outline {\n background: transparent; color: var(--cream);\n font-family: 'Roboto', sans-serif; font-weight: 500;\n font-size: 13px; letter-spacing: 2px; text-transform: uppercase;\n padding: 16px 36px; border: 1px solid rgba(250,250,245,0.28); cursor: pointer; transition: all 0.3s;\n }\n .btn-outline:hover { border-color: var(--lime); color: var(--lime); }\n\n .hero-stats {\n position: absolute; bottom: 60px; right: 60px; z-index: 2;\n display: flex; gap: 40px;\n opacity: 0; animation: fadeUp 0.8s 1s forwards;\n }\n .stat { text-align: center; }\n .stat-num { font-family: 'Roboto Condensed', sans-serif; font-size: 36px; font-weight: 700; color: var(--lime); line-height: 1; }\n .stat-label { font-size: 10px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--cream-dim); margin-top: 4px; }\n\n .scroll-hint {\n position: absolute; bottom: 40px; left: 60px; z-index: 2;\n display: flex; flex-direction: column; align-items: center; gap: 8px;\n opacity: 0; animation: fadeUp 0.8s 1.2s forwards;\n }\n .scroll-hint span {\n font-family: 'Roboto Mono', monospace;\n font-size: 9px; letter-spacing: 3px; color: var(--cream-dim);\n writing-mode: vertical-rl; transform: rotate(180deg);\n }\n .scroll-line { width: 1px; height: 60px; background: linear-gradient(to bottom, var(--lime), transparent); animation: pulse-line 2s infinite; }\n\n section { position: relative; z-index: 1; }\n\n .section-header { text-align: center; padding: 100px 60px 60px; }\n .section-label {\n display: inline-block;\n font-family: 'Roboto Mono', monospace;\n font-size: 10px; letter-spacing: 4px; text-transform: uppercase;\n color: var(--forest-mid); margin-bottom: 16px;\n }\n .section-title {\n font-family: 'Roboto Condensed', sans-serif;\n font-size: clamp(36px, 5vw, 64px);\n font-weight: 700; letter-spacing: -1px; margin-bottom: 16px; color: var(--forest);\n }\n .section-desc { font-size: 15px; font-weight: 300; color: var(--forest-mid); max-width: 560px; margin: 0 auto; line-height: 1.7; }\n\n \/* \u2500\u2500 GRID \u2500\u2500 *\/\n .products-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));\n gap: 1px; padding: 0 0 100px;\n }\n .product-card {\n position: relative; background: var(--cream); padding: 40px; overflow: hidden;\n cursor: default; opacity: 0; transform: translateY(30px);\n transition: opacity 0.6s ease, transform 0.6s ease, background 0.3s ease;\n }\n .product-card.visible { opacity: 1; transform: translateY(0); }\n .product-card:hover { background: var(--cream-dark); z-index: 2; }\n .product-card::before {\n content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;\n background: linear-gradient(90deg, transparent, var(--lime), transparent);\n opacity: 0; transition: opacity 0.4s;\n }\n .product-card:hover::before { opacity: 1; }\n\n .card-category {\n display: inline-block;\n font-family: 'Roboto Mono', monospace;\n font-size: 9px; letter-spacing: 3px; text-transform: uppercase;\n color: var(--forest); border: 1px solid var(--forest);\n padding: 4px 10px; margin-bottom: 20px;\n }\n .card-img {\n width: 100%; height: 200px !important; object-fit: cover;\n margin-bottom: 24px;\n filter: brightness(0.88) saturate(0.85); transition: filter 0.4s;\n }\n .product-card:hover .card-img { filter: brightness(1) saturate(1); }\n .card-name {\n font-family: 'Roboto Condensed', sans-serif;\n font-size: 28px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 12px;\n color: var(--forest); transition: color 0.3s;\n }\n .product-card:hover .card-name { color: var(--forest-mid); }\n .card-features { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }\n .card-feature { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: var(--forest-mid); }\n .card-feature::before { content: '\u2192'; color: var(--lime); flex-shrink: 0; font-size: 11px; margin-top: 1px; }\n\n \/* Expandible *\/\n .card-expand { max-height: 0; overflow: hidden; transition: max-height 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94); }\n .card-expand-inner { padding-top: 20px; margin-top: 8px; border-top: 1px solid rgba(27,67,50,0.12); }\n .exp-desc { font-size: 14px; font-weight: 300; line-height: 1.8; color: var(--forest-mid); margin-bottom: 24px; border-left: 2px solid var(--lime); padding-left: 16px; }\n .modal-section { margin-bottom: 24px; }\n .modal-section-title { font-family: 'Roboto Condensed', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--forest-mid); margin-bottom: 14px; }\n .dosage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\n .dosage-item { background: rgba(27,67,50,0.05); border: 1px solid var(--border); padding: 16px; }\n .dosage-label { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--forest-mid); margin-bottom: 6px; }\n .dosage-value { font-size: 13px; color: var(--forest); line-height: 1.6; }\n .exp-presentation {\n background: rgba(82,183,136,0.1); border: 1px solid var(--lime);\n padding: 16px 20px; font-family: 'Roboto Mono', monospace;\n font-size: 12px; color: var(--forest-mid); display: flex; align-items: center; gap: 10px;\n }\n .exp-presentation::before { content: '\u25a3'; color: var(--lime); }\n\n .card-footer { display: flex; flex-direction: column; gap: 16px; padding-top: 20px; border-top: 1px solid rgba(27,67,50,0.1); }\n .card-footer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }\n .card-btn {\n display: inline-flex; align-items: center; justify-content: center; gap: 8px;\n background: transparent; border: 1px solid var(--lime);\n color: var(--forest-mid); font-family: 'Roboto', sans-serif;\n font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;\n padding: 12px 16px; cursor: pointer; transition: all 0.3s;\n }\n .card-btn:hover { background: var(--lime) !important; color: var(--forest) !important; transform: translateX(2px) !important; }\n .card-btn.expanded { background: rgba(82,183,136,0.12) !important; color: var(--forest-mid) !important; }\n .card-btn-arrow {\n width: 14px; height: 1px; background: currentColor;\n position: relative; transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); flex-shrink: 0;\n }\n .card-btn-arrow::after {\n content: ''; position: absolute; right: 0; top: -3px;\n width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg);\n }\n .card-btn.expanded .card-btn-arrow { transform: rotate(180deg); }\n .card-btn-ver {\n display: inline-flex; align-items: center; justify-content: center;\n background: transparent; border: 1px solid rgba(27,67,50,0.28); color: var(--forest);\n font-family: 'Roboto', sans-serif; font-size: 11px; font-weight: 600;\n letter-spacing: 2px; text-transform: uppercase; padding: 12px 16px; cursor: pointer; transition: all 0.3s;\n }\n .card-btn-ver:hover { border-color: var(--lime); background: var(--lime) !important; color: var(--forest-mid); transform: translateY(-2px); }\n .card-presentation { font-family: 'Roboto Mono', monospace; font-size: 10px; color: var(--forest-mid); letter-spacing: 1px; }\n\n \/* Tags *\/\n .card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }\n .card-tag {\n font-family: 'Roboto Mono', monospace; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;\n padding: 3px 9px; border-radius: 3px; border: 1px solid; line-height: 1.4;\n }\n .card-tag-categoria { border-color: rgba(82,183,136,0.5); color: var(--forest-mid); background: rgba(82,183,136,0.1); }\n\n \/* \u2500\u2500 FILTROS \u2500\u2500 *\/\n .filter-bar {\n position: relative; z-index: 2; background: #fff;\n border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 28px 60px;\n }\n .filter-bar-inner { max-width: 1400px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }\n .filter-group { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 260px; }\n .filter-label {\n font-family: 'Roboto Mono', monospace; font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;\n color: var(--forest-mid); display: flex; align-items: center; gap: 8px;\n }\n .filter-label::before { content: ''; display: inline-block; width: 18px; height: 1px; background: var(--forest-mid); }\n .filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }\n .filter-chip {\n font-family: 'Roboto Condensed', sans-serif; font-size: 13px; font-weight: 400; letter-spacing: 0.3px;\n padding: 7px 16px; border-radius: 4px;\n border: 1px solid rgba(27,67,50,0.22); background: rgba(27,67,50,0.04);\n color: var(--forest); cursor: pointer; transition: all 0.2s ease; user-select: none; white-space: nowrap;\n }\n .filter-chip:hover { border-color: var(--lime); color: var(--forest-mid); background: rgba(82,183,136,0.08); }\n .filter-chip.active { background: var(--lime); border-color: var(--lime); color: var(--forest); font-weight: 700; }\n .filter-count { font-family: 'Roboto Mono', monospace; font-size: 10px; letter-spacing: 1px; color: var(--forest-mid); align-self: flex-end; padding-bottom: 2px; white-space: nowrap; }\n .filter-count span { color: var(--lime); font-weight: 700; }\n\n .product-card.filtered-out { display: none; }\n .filter-empty { display: none; grid-column: 1\/-1; text-align: center; padding: 60px 24px; color: var(--forest-mid); font-family: 'Roboto Condensed', sans-serif; }\n .filter-empty.visible { display: block; }\n .filter-empty-icon { font-size: 36px; margin-bottom: 16px; opacity: 0.4; }\n .filter-empty-title { font-size: 20px; font-weight: 600; color: var(--forest); margin-bottom: 8px; }\n .filter-empty-sub { font-size: 14px; opacity: 0.6; }\n\n @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }\n @keyframes pulse-line { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }\n ::-webkit-scrollbar { width: 4px; }\n ::-webkit-scrollbar-track { background: var(--cream); }\n ::-webkit-scrollbar-thumb { background: var(--lime); }\n\n @media (max-width: 768px) {\n .hero { padding: 100px 24px 60px; }\n .hero-stats { right: 24px; bottom: 40px; gap: 24px; }\n .stat-num { font-size: 26px; }\n .products-grid { padding: 0 0 60px; grid-template-columns: 1fr; }\n .section-header { padding: 60px 24px 40px; }\n .dosage-grid { grid-template-columns: 1fr; }\n .card-footer-actions { grid-template-columns: 1fr; }\n .filter-bar { padding: 20px 24px; }\n .filter-bar-inner { gap: 18px; }\n .filter-group { min-width: 100%; }\n .filter-chip { font-size: 12px; padding: 6px 12px; }\n }\n @media (prefers-reduced-motion: reduce) {\n .product-card { transition: none; }\n .hero-eyebrow,.hero-title,.hero-subtitle,.hero-tagline,.hero-actions,.hero-stats,.scroll-hint { animation: none !important; opacity: 1 !important; }\n .scroll-line { animation: none !important; }\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"hero\">\n <div class=\"hero-bg-img\"><\/div>\n <div class=\"hero-overlay\"><\/div>\n <div class=\"hero-content\">\n <div class=\"hero-eyebrow\">Crassula · Human Health Line<\/div>\n <h1 class=\"hero-title\">Nutraceuticals<span class=\"accent\"><\/span><\/h1>\n <p class=\"hero-subtitle\">Advanced Cellular Nutrition<\/p>\n <p class=\"hero-tagline\">More absorption. Better results. Next-generation nutraceuticals powered by QuanticSphere™ technology—engineered for cellular precision and measurable outcomes.<\/p>\n <div class=\"hero-actions\">\n <button type=\"button\" class=\"btn-primary\" onclick=\"document.getElementById('products').scrollIntoView({behavior:'smooth'})\">View Products<\/button>\n <button type=\"button\" class=\"btn-outline\" onclick=\"document.getElementById('products').scrollIntoView({behavior:'smooth'})\">Learn More<\/button>\n <\/div>\n <\/div>\n <div class=\"hero-stats\">\n <div class=\"stat\"><div class=\"stat-num\">7<\/div><div class=\"stat-label\">Products<\/div><\/div>\n <div class=\"stat\"><div class=\"stat-num\">6<\/div><div class=\"stat-label\">Health Goals<\/div><\/div>\n <div class=\"stat\"><div class=\"stat-num\">QS™<\/div><div class=\"stat-label\">Technology<\/div><\/div>\n <\/div>\n <div class=\"scroll-hint\">\n <span>Scroll<\/span>\n <div class=\"scroll-line\"><\/div>\n <\/div>\n<\/div>\n\n<section id=\"products\" style=\"padding:0;\">\n <div class=\"filter-bar\">\n <div class=\"filter-bar-inner\">\n <div class=\"filter-group\">\n <div class=\"filter-label\">Health Goal<\/div>\n <div class=\"filter-chips\" id=\"filterCategoria\">\n <button type=\"button\" class=\"filter-chip active\" data-categoria=\"all\">All Products<\/button>\n <button type=\"button\" class=\"filter-chip\" data-categoria=\"Cellular Energy\">Cellular Energy<\/button>\n <button type=\"button\" class=\"filter-chip\" data-categoria=\"Longevity\">Longevity<\/button>\n <button type=\"button\" class=\"filter-chip\" data-categoria=\"Immunity\">Immunity<\/button>\n <button type=\"button\" class=\"filter-chip\" data-categoria=\"Gut Health\">Gut Health<\/button>\n <button type=\"button\" class=\"filter-chip\" data-categoria=\"Cardiometabolic\">Cardiometabolic<\/button>\n <button type=\"button\" class=\"filter-chip\" data-categoria=\"Recovery\">Recovery<\/button>\n <\/div>\n <\/div>\n <div class=\"filter-count\" id=\"filterCount\"><span>7<\/span> products<\/div>\n <\/div>\n <\/div>\n\n <div class=\"section-header\">\n <div class=\"section-label\">Human Health Portfolio<\/div>\n <h2 class=\"section-title\">Precision <span style=\"color:var(--lime)\">Nutraceuticals<\/span><\/h2>\n <p class=\"section-desc\">Each formula combines QuanticSphere™ nano-delivery with clinically relevant actives—engineered for maximum bioavailability and targeted cellular impact.<\/p>\n <\/div>\n\n <div class=\"products-grid\" id=\"productsGrid\">\n <div class=\"filter-empty\" id=\"filterEmpty\">\n <div class=\"filter-empty-icon\">\ud83d\udd0d<\/div>\n <div class=\"filter-empty-title\">No results<\/div>\n <div class=\"filter-empty-sub\">No products match the selected filter.<\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<script>\n\/* \n categories: array \u2014 un producto aparece en TODOS los filtros que correspondan.\n La tarjeta se muestra si activeFilter === 'all' O si categories incluye el filtro activo.\n*\/\nconst PRODUCTS = [\n {\n name: \"Q-NMN\",\n category: \"Longevity \\u00b7 Cellular Energy\",\n categories: [\"Cellular Energy\", \"Longevity\", \"Cardiometabolic\"],\n desc: \"Next-generation NMN (Nicotinamide Mononucleotide) delivered via QuanticSphere\\u2122 nano-encapsulation for maximum cellular absorption. Replenishes NAD+ levels that decline with age, directly fueling mitochondrial function, DNA repair mechanisms and metabolic efficiency.\",\n features: [\n \"Increases NAD+ levels for sustained cellular energy\",\n \"Enhances mitochondrial function and metabolic rate\",\n \"Supports healthy aging and DNA repair pathways\"\n ],\n dosage: [\n { label: \"Form\", value: \"Nano-encapsulated oral supplement\" },\n { label: \"Target\", value: \"NAD+ replenishment\\nMitochondrial support\" },\n { label: \"Health Goals\", value: \"Cellular Energy\\nLongevity\\nCardiometabolic\" },\n { label: \"Technology\", value: \"QuanticSphere\\u2122 nano-delivery\\nfor enhanced bioavailability\" }\n ],\n presentation: \"QuanticSphere\\u2122 \u00b7 Oral nutraceutical\",\n productUrl: \"https:\/\/crassulapharma.com\/q-nmn\",\n img: \"https:\/\/images.unsplash.com\/photo-1559757148-5c350d0d3c56?w=600&auto=format&fit=crop\"\n },\n {\n name: \"Q-OXIVIA\",\n category: \"Cardiovascular \\u00b7 Energy\",\n categories: [\"Cellular Energy\", \"Longevity\", \"Cardiometabolic\"],\n desc: \"Advanced cardiovascular and energy support formula powered by QuanticSphere\\u2122 technology. Boosts ATP production at the mitochondrial level, supports heart muscle function and improves systemic oxygen utilization for enhanced physical and mental performance.\",\n features: [\n \"Boosts ATP production at mitochondrial level\",\n \"Supports heart health and vascular function\",\n \"Improves oxygen utilization and endurance\"\n ],\n dosage: [\n { label: \"Form\", value: \"Nano-encapsulated oral supplement\" },\n { label: \"Target\", value: \"Cardiovascular function\\nEnergy metabolism\" },\n { label: \"Health Goals\", value: \"Cellular Energy\\nLongevity\\nCardiometabolic\" },\n { label: \"Technology\", value: \"QuanticSphere\\u2122 nano-delivery\\nfor enhanced bioavailability\" }\n ],\n presentation: \"QuanticSphere\\u2122 \u00b7 Oral nutraceutical\",\n productUrl: \"https:\/\/crassulapharma.com\/q-oxivia\",\n img: \"https:\/\/crassulapharma.com\/wp-content\/uploads\/2026\/03\/q-oxivia-hero.jpg\"\n },\n {\n name: \"Q-CURVIVA\",\n category: \"Anti-Inflammatory\",\n categories: [\"Longevity\", \"Immunity\", \"Gut Health\", \"Cardiometabolic\", \"Recovery\"],\n desc: \"Precision anti-inflammatory formula leveraging QuanticSphere\\u2122-enhanced curcumin and synergistic phytochemicals. Targets oxidative stress at the cellular level, accelerates recovery from physical exertion and protects cellular integrity against chronic inflammatory damage.\",\n features: [\n \"Reduces oxidative stress and chronic inflammation\",\n \"Supports physical and tissue recovery\",\n \"Protects cellular integrity from inflammatory damage\"\n ],\n dosage: [\n { label: \"Form\", value: \"Nano-encapsulated oral supplement\" },\n { label: \"Target\", value: \"Systemic inflammation\\nOxidative stress reduction\" },\n { label: \"Health Goals\", value: \"Longevity \\u00b7 Immunity\\nGut Health \\u00b7 Recovery\\nCardiometabolic\" },\n { label: \"Technology\", value: \"QuanticSphere\\u2122 nano-delivery\\nUp to 20\\u00d7 better absorption\" }\n ],\n presentation: \"QuanticSphere\\u2122 \u00b7 Oral nutraceutical\",\n productUrl: \"https:\/\/crassulapharma.com\/q-curviva\",\n img: \"https:\/\/crassulapharma.com\/wp-content\/uploads\/2026\/03\/q-curviva-hero.jpg\"\n },\n {\n name: \"Q-VITALIS\",\n category: \"Neuro \\u00b7 Muscle Support\",\n categories: [\"Cellular Energy\", \"Longevity\", \"Recovery\"],\n desc: \"Comprehensive neuro-muscular support formula engineered to improve neuromuscular coordination, sustain cognitive performance and combat fatigue. QuanticSphere\\u2122 delivery ensures rapid uptake of key neuroactive and muscular support compounds.\",\n features: [\n \"Improves neuromuscular function and coordination\",\n \"Supports cognitive performance and mental clarity\",\n \"Reduces physical and mental fatigue\"\n ],\n dosage: [\n { label: \"Form\", value: \"Nano-encapsulated oral supplement\" },\n { label: \"Target\", value: \"Neuromuscular function\\nCognitive support\" },\n { label: \"Health Goals\", value: \"Cellular Energy\\nLongevity\\nRecovery\" },\n { label: \"Technology\", value: \"QuanticSphere\\u2122 nano-delivery\\nfor enhanced bioavailability\" }\n ],\n presentation: \"QuanticSphere\\u2122 \u00b7 Oral nutraceutical\",\n productUrl: \"https:\/\/crassulapharma.com\/q-vitalis\",\n img: \"https:\/\/crassulapharma.com\/wp-content\/uploads\/2026\/03\/q-vitalis-hero.jpg\"\n },\n {\n name: \"Q-CALIVRA\",\n category: \"Gut Health\",\n categories: [\"Immunity\", \"Gut Health\"],\n desc: \"Advanced gut microbiome restoration formula combining prebiotics, postbiotics and QuanticSphere\\u2122-delivered bioactives. Restores microbial balance, enhances the gut-immune axis and improves nutrient absorption efficiency across the intestinal barrier.\",\n features: [\n \"Restores and sustains microbiota balance\",\n \"Improves nutrient absorption and gut barrier integrity\",\n \"Supports digestion and gut-immune axis function\"\n ],\n dosage: [\n { label: \"Form\", value: \"Nano-encapsulated oral supplement\" },\n { label: \"Target\", value: \"Microbiota restoration\\nGut-immune axis\" },\n { label: \"Health Goals\", value: \"Gut Health\\nImmunity\" },\n { label: \"Technology\", value: \"QuanticSphere\\u2122 nano-delivery\\nfor enhanced bioavailability\" }\n ],\n presentation: \"QuanticSphere\\u2122 \u00b7 Oral nutraceutical\",\n productUrl: \"https:\/\/crassulapharma.com\/q-calivra\",\n img: \"https:\/\/crassulapharma.com\/wp-content\/uploads\/2026\/03\/q-calivra-hero.jpg\"\n },\n {\n name: \"Q-ERYTHRA\",\n category: \"Hematologic Support\",\n categories: [\"Cellular Energy\", \"Cardiometabolic\"],\n desc: \"Specialized hematological support formula designed to enhance hemoglobin synthesis and red blood cell quality. QuanticSphere\\u2122 nano-iron and synergistic cofactors ensure superior bioavailability compared to conventional iron supplements, with improved tolerability.\",\n features: [\n \"Enhances hemoglobin synthesis and red blood cell production\",\n \"Improves oxygen transport and cellular energy metabolism\",\n \"Superior bioavailability vs. conventional iron supplements\"\n ],\n dosage: [\n { label: \"Form\", value: \"Nano-encapsulated oral supplement\" },\n { label: \"Target\", value: \"Hemoglobin synthesis\\nOxygen transport\" },\n { label: \"Health Goals\", value: \"Cellular Energy\\nCardiometabolic\" },\n { label: \"Technology\", value: \"QuanticSphere\\u2122 nano-iron\\nHigh tolerability\" }\n ],\n presentation: \"QuanticSphere\\u2122 \u00b7 Oral nutraceutical\",\n productUrl: \"https:\/\/crassulapharma.com\/q-erythra\",\n img: \"https:\/\/crassulapharma.com\/wp-content\/uploads\/2026\/03\/VETRAERUTHRA.jpg\"\n },\n {\n name: \"Q-SYNOVI\",\n category: \"Joint Health\",\n categories: [\"Recovery\"],\n desc: \"Precision joint health formula combining QuanticSphere\\u2122-delivered collagen peptides, glucosamine analogs and anti-inflammatory phytochemicals. Supports cartilage regeneration, reduces joint inflammation and improves mobility and range of motion.\",\n features: [\n \"Supports cartilage regeneration and joint lubrication\",\n \"Reduces joint inflammation and pain signals\",\n \"Improves mobility and range of motion\"\n ],\n dosage: [\n { label: \"Form\", value: \"Nano-encapsulated oral supplement\" },\n { label: \"Target\", value: \"Cartilage regeneration\\nJoint inflammation\" },\n { label: \"Health Goals\", value: \"Recovery\" },\n { label: \"Technology\", value: \"QuanticSphere\\u2122 nano-delivery\\nfor enhanced bioavailability\" }\n ],\n presentation: \"QuanticSphere\\u2122 \u00b7 Oral nutraceutical\",\n productUrl: \"https:\/\/crassulapharma.com\/q-synovi\",\n img: \"https:\/\/crassulapharma.com\/wp-content\/uploads\/2026\/03\/q-synovi-hero-1.jpg\"\n }\n];\n\nconst PRODUCT_LINK_BASE = '';\n\nfunction productSlug(name) {\n return String(name).normalize('NFD').replace(\/[\\u0300-\\u036f]\/g,'').toLowerCase().replace(\/[^a-z0-9]+\/g,'-').replace(\/^-+|-+$\/g,'');\n}\nfunction escapeAttr(s) { return String(s).replace(\/&\/g,'&').replace(\/\"\/g,'"'); }\nfunction resolveProductUrl(p) {\n if (p.productUrl) return p.productUrl;\n if (PRODUCT_LINK_BASE) { const b = PRODUCT_LINK_BASE.endsWith('\/') ? PRODUCT_LINK_BASE : PRODUCT_LINK_BASE+'\/'; return b+productSlug(p.name); }\n return '';\n}\n\nfunction buildExpandHTML(p) {\n const dosageHTML = p.dosage.map(d => `\n <div class=\"dosage-item\">\n <div class=\"dosage-label\">${d.label}<\/div>\n <div class=\"dosage-value\">${d.value.replace(\/\\n\/g,'<br>')}<\/div>\n <\/div>`).join('');\n const tagsHTML = p.categories.map(c => `<span class=\"card-tag card-tag-categoria\">${c}<\/span>`).join('');\n return `\n <div class=\"card-expand-inner\">\n <p class=\"exp-desc\">${p.desc}<\/p>\n <div class=\"modal-section\">\n <div class=\"modal-section-title\">Product Details<\/div>\n <div class=\"dosage-grid\">${dosageHTML}<\/div>\n <\/div>\n <div style=\"display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;\">${tagsHTML}<\/div>\n <div class=\"exp-presentation\">${p.presentation}<\/div>\n <\/div>`;\n}\n\nfunction renderCards() {\n const grid = document.getElementById('productsGrid');\n PRODUCTS.forEach((p, i) => {\n const featurePreview = p.features.slice(0,3).map(f => `<div class=\"card-feature\">${f}<\/div>`).join('');\n const targetUrl = resolveProductUrl(p);\n const urlAttr = targetUrl ? ` data-product-url=\"${escapeAttr(targetUrl)}\"` : '';\n const card = document.createElement('div');\n card.className = 'product-card';\n card.style.transitionDelay = `${(i % 3) * 0.08}s`;\n card.dataset.categories = JSON.stringify(p.categories || []);\n card.innerHTML = `\n <div class=\"card-category\">${p.category}<\/div>\n <img loading=\"lazy\" decoding=\"async\" class=\"card-img\" src=\"${p.img}\" alt=\"${p.name}\" loading=\"lazy\" width=\"600\" height=\"200\">\n <div class=\"card-name\">${p.name}<\/div>\n <div class=\"card-features\">${featurePreview}<\/div>\n <div class=\"card-expand\" id=\"expand-${i}\" data-expand-root>${buildExpandHTML(p)}<\/div>\n <div class=\"card-footer\">\n <div class=\"card-footer-actions\">\n <button type=\"button\" class=\"card-btn\" data-expand-btn data-target=\"expand-${i}\" aria-expanded=\"false\">\n <span>More Info<\/span>\n <span class=\"card-btn-arrow\" aria-hidden=\"true\"><\/span>\n <\/button>\n <button type=\"button\" class=\"card-btn-ver\" data-ver-producto data-product-slug=\"${escapeAttr(productSlug(p.name))}\"${urlAttr}>View Product<\/button>\n <\/div>\n <div class=\"card-presentation\">${p.presentation}<\/div>\n <\/div>`;\n grid.appendChild(card);\n });\n}\n\nlet activeFilter = 'all';\n\nfunction applyFilters() {\n const cards = document.querySelectorAll('.product-card');\n let visible = 0;\n cards.forEach(card => {\n const cats = JSON.parse(card.dataset.categories || '[]');\n const match = activeFilter === 'all' || cats.includes(activeFilter);\n if (match) { card.classList.remove('filtered-out'); visible++; }\n else { card.classList.add('filtered-out'); }\n });\n const countEl = document.getElementById('filterCount');\n if (countEl) countEl.innerHTML = `<span>${visible}<\/span> product${visible !== 1 ? 's' : ''}`;\n const emptyEl = document.getElementById('filterEmpty');\n if (emptyEl) emptyEl.classList.toggle('visible', visible === 0);\n}\n\ndocument.getElementById('filterCategoria').addEventListener('click', e => {\n const chip = e.target.closest('.filter-chip');\n if (!chip) return;\n document.querySelectorAll('#filterCategoria .filter-chip').forEach(c => c.classList.remove('active'));\n chip.classList.add('active');\n activeFilter = chip.dataset.categoria;\n applyFilters();\n});\n\nfunction toggleExpand(btn) {\n const id = btn.getAttribute('data-target');\n const expand = document.getElementById(id);\n if (!expand) return;\n const label = btn.querySelector('span');\n const isOpen = expand.classList.contains('is-open');\n if (isOpen) {\n expand.style.maxHeight = '0px';\n expand.classList.remove('is-open');\n btn.classList.remove('expanded');\n btn.setAttribute('aria-expanded','false');\n if (label) label.textContent = 'More Info';\n } else {\n expand.classList.add('is-open');\n expand.style.maxHeight = expand.scrollHeight + 'px';\n btn.classList.add('expanded');\n btn.setAttribute('aria-expanded','true');\n if (label) label.textContent = 'Hide Info';\n }\n}\n\nfunction refreshOpenPanels() {\n document.querySelectorAll('.card-expand.is-open').forEach(el => { el.style.maxHeight = el.scrollHeight + 'px'; });\n}\n\ndocument.getElementById('productsGrid').addEventListener('click', e => {\n const expandBtn = e.target.closest('[data-expand-btn]');\n if (expandBtn) { e.preventDefault(); toggleExpand(expandBtn); return; }\n const verBtn = e.target.closest('[data-ver-producto]');\n if (!verBtn) return;\n const url = verBtn.getAttribute('data-product-url');\n if (url) { window.location.assign(url); return; }\n const card = verBtn.closest('.product-card');\n if (!card) return;\n card.scrollIntoView({ behavior: 'smooth', block: 'center' });\n const expandRoot = card.querySelector('[data-expand-root]');\n const moreBtn = card.querySelector('[data-expand-btn]');\n if (moreBtn && expandRoot && !expandRoot.classList.contains('is-open')) toggleExpand(moreBtn);\n setTimeout(() => refreshOpenPanels(), 450);\n});\n\nwindow.addEventListener('resize', () => refreshOpenPanels());\n\nfunction setupObserver() {\n const observer = new IntersectionObserver(entries => {\n entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); observer.unobserve(e.target); } });\n }, { threshold: 0.1 });\n document.querySelectorAll('.product-card').forEach(c => observer.observe(c));\n}\n\nrenderCards();\nsetupObserver();\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\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>nutraceuticals | Advanced Cellular Nutrition | Human Health Line Crassula · Human Health Line Nutraceuticals Advanced Cellular Nutrition More absorption. Better results. Next-generation nutraceuticals powered by QuanticSphere™ technology—engineered for cellular precision and measurable outcomes. View Products Learn More 7Products 6Health Goals QS™Technology Scroll Health Goal All Products Cellular Energy Longevity Immunity Gut Health Cardiometabolic Recovery […]<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"class_list":["post-11259","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/crassulapharma.com\/es\/wp-json\/wp\/v2\/pages\/11259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/crassulapharma.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/crassulapharma.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/crassulapharma.com\/es\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/crassulapharma.com\/es\/wp-json\/wp\/v2\/comments?post=11259"}],"version-history":[{"count":28,"href":"https:\/\/crassulapharma.com\/es\/wp-json\/wp\/v2\/pages\/11259\/revisions"}],"predecessor-version":[{"id":11405,"href":"https:\/\/crassulapharma.com\/es\/wp-json\/wp\/v2\/pages\/11259\/revisions\/11405"}],"wp:attachment":[{"href":"https:\/\/crassulapharma.com\/es\/wp-json\/wp\/v2\/media?parent=11259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n\nnutraceuticals | Advanced Cellular Nutrition | Human Health Line<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,300;1,400&family=Roboto+Condensed:wght@300;400;700&family=Roboto+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\n<style>\n :root {\n --forest: #1B4332;\n --forest-mid: #2D6A4F;\n --forest-light: #40916C;\n --lime: #52B788;\n --lime-light: #74C69D;\n --lime-dim: rgba(82,183,136,0.15);\n --lime-glow: rgba(82,183,136,0.30);\n --cream: #FAFAF5;\n --cream-dark: #F0EDE4;\n --cream-dim: rgba(250,250,245,0.65);\n --cream-faint: rgba(250,250,245,0.07);\n --border: rgba(82,183,136,0.22);\n --shadow: 0 8px 40px rgba(0,0,0,0.18);\n }\n * { margin: 0; padding: 0; box-sizing: border-box; }\n html { scroll-behavior: smooth; }\n body {\n background: var(--cream);\n color: var(--forest);\n font-family: 'Roboto', sans-serif;\n overflow-x: hidden;\n cursor: default;\n }\n body::before {\n content: '';\n position: fixed; inset: 0;\n background:\n radial-gradient(ellipse 80% 60% at 10% 20%, rgba(82,183,136,0.06) 0%, transparent 60%),\n radial-gradient(ellipse 60% 80% at 90% 80%, rgba(27,67,50,0.05) 0%, transparent 60%),\n repeating-linear-gradient(0deg, transparent, transparent 80px, rgba(27,67,50,0.018) 80px, rgba(27,67,50,0.018) 81px),\n repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(27,67,50,0.018) 80px, rgba(27,67,50,0.018) 81px);\n pointer-events: none;\n z-index: 0;\n }\n [type=button],[type=submit],button { white-space: unset !important; }\n button:focus, button:hover { background-color: transparent !important;\n color: #2D6A4F !important;}\n\n \/* \u2500\u2500 HERO \u2500\u2500 *\/\n .hero {\n position: relative; min-height: 100vh;\n display: flex; align-items: center;\n padding: 120px 60px 80px; overflow: hidden;\n }\n .hero-bg-img {\n position: absolute; inset: 0;\n background: url('https:\/\/crassulapharma.com\/wp-content\/uploads\/2026\/04\/hero-nutraceuticals.jpg') center\/cover;\n filter: brightness(0.4) saturate(0.9);\n z-index: 0;\n }\n .hero-overlay {\n position: absolute; inset: 0;\n background: linear-gradient(105deg, var(--forest) 42%, transparent 100%);\n z-index: 1;\n }\n .hero-content { position: relative; z-index: 2; max-width: 680px; }\n .hero-eyebrow {\n display: inline-flex; align-items: center; gap: 10px;\n font-family: 'Roboto Mono', monospace;\n font-size: 11px; letter-spacing: 3px; text-transform: uppercase;\n color: #fff; margin-bottom: 28px;\n opacity: 0; animation: fadeUp 0.8s 0.2s forwards;\n }\n .hero-eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--lime); }\n .hero-title {\n font-family: 'Roboto Condensed', sans-serif;\n font-size: clamp(52px, 7vw, 90px);\n font-weight: 700; line-height: 0.95; letter-spacing: -2px;\n color: var(--cream); margin-bottom: 12px;\n opacity: 0; animation: fadeUp 0.8s 0.4s forwards;\n }\n .hero-title .accent { color: var(--lime); }\n .hero-subtitle {\n font-family: 'Roboto Condensed', sans-serif;\n font-size: clamp(26px, 3.5vw, 44px);\n font-weight: 300; color: var(--cream-dim); margin-bottom: 28px;\n opacity: 0; animation: fadeUp 0.8s 0.55s forwards;\n }\n .hero-tagline {\n font-size: 15px; font-weight: 300; line-height: 1.7;\n color: var(--cream-dim); max-width: 480px; margin-bottom: 48px;\n opacity: 0; animation: fadeUp 0.8s 0.7s forwards;\n }\n .hero-actions {\n display: flex; gap: 16px; flex-wrap: wrap;\n opacity: 0; animation: fadeUp 0.8s 0.85s forwards;\n }\n .btn-primary {\n background: var(--lime); color: var(--forest);\n font-family: 'Roboto', sans-serif; font-weight: 700;\n font-size: 13px; letter-spacing: 2px; text-transform: uppercase;\n padding: 16px 36px; border: none; cursor: pointer; transition: all 0.3s;\n clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));\n }\n .btn-primary:hover { background: var(--lime-light) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 24px var(--lime-glow) !important; }\n .btn-outline {\n background: transparent; color: var(--cream);\n font-family: 'Roboto', sans-serif; font-weight: 500;\n font-size: 13px; letter-spacing: 2px; text-transform: uppercase;\n padding: 16px 36px; border: 1px solid rgba(250,250,245,0.28); cursor: pointer; transition: all 0.3s;\n }\n .btn-outline:hover { border-color: var(--lime); color: var(--lime); }\n\n .hero-stats {\n position: absolute; bottom: 60px; right: 60px; z-index: 2;\n display: flex; gap: 40px;\n opacity: 0; animation: fadeUp 0.8s 1s forwards;\n }\n .stat { text-align: center; }\n .stat-num { font-family: 'Roboto Condensed', sans-serif; font-size: 36px; font-weight: 700; color: var(--lime); line-height: 1; }\n .stat-label { font-size: 10px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--cream-dim); margin-top: 4px; }\n\n .scroll-hint {\n position: absolute; bottom: 40px; left: 60px; z-index: 2;\n display: flex; flex-direction: column; align-items: center; gap: 8px;\n opacity: 0; animation: fadeUp 0.8s 1.2s forwards;\n }\n .scroll-hint span {\n font-family: 'Roboto Mono', monospace;\n font-size: 9px; letter-spacing: 3px; color: var(--cream-dim);\n writing-mode: vertical-rl; transform: rotate(180deg);\n }\n .scroll-line { width: 1px; height: 60px; background: linear-gradient(to bottom, var(--lime), transparent); animation: pulse-line 2s infinite; }\n\n section { position: relative; z-index: 1; }\n\n .section-header { text-align: center; padding: 100px 60px 60px; }\n .section-label {\n display: inline-block;\n font-family: 'Roboto Mono', monospace;\n font-size: 10px; letter-spacing: 4px; text-transform: uppercase;\n color: var(--forest-mid); margin-bottom: 16px;\n }\n .section-title {\n font-family: 'Roboto Condensed', sans-serif;\n font-size: clamp(36px, 5vw, 64px);\n font-weight: 700; letter-spacing: -1px; margin-bottom: 16px; color: var(--forest);\n }\n .section-desc { font-size: 15px; font-weight: 300; color: var(--forest-mid); max-width: 560px; margin: 0 auto; line-height: 1.7; }\n\n \/* \u2500\u2500 GRID \u2500\u2500 *\/\n .products-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));\n gap: 1px; padding: 0 0 100px;\n }\n .product-card {\n position: relative; background: var(--cream); padding: 40px; overflow: hidden;\n cursor: default; opacity: 0; transform: translateY(30px);\n transition: opacity 0.6s ease, transform 0.6s ease, background 0.3s ease;\n }\n .product-card.visible { opacity: 1; transform: translateY(0); }\n .product-card:hover { background: var(--cream-dark); z-index: 2; }\n .product-card::before {\n content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;\n background: linear-gradient(90deg, transparent, var(--lime), transparent);\n opacity: 0; transition: opacity 0.4s;\n }\n .product-card:hover::before { opacity: 1; }\n\n .card-category {\n display: inline-block;\n font-family: 'Roboto Mono', monospace;\n font-size: 9px; letter-spacing: 3px; text-transform: uppercase;\n color: var(--forest); border: 1px solid var(--forest);\n padding: 4px 10px; margin-bottom: 20px;\n }\n .card-img {\n width: 100%; height: 200px !important; object-fit: cover;\n margin-bottom: 24px;\n filter: brightness(0.88) saturate(0.85); transition: filter 0.4s;\n }\n .product-card:hover .card-img { filter: brightness(1) saturate(1); }\n .card-name {\n font-family: 'Roboto Condensed', sans-serif;\n font-size: 28px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 12px;\n color: var(--forest); transition: color 0.3s;\n }\n .product-card:hover .card-name { color: var(--forest-mid); }\n .card-features { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }\n .card-feature { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: var(--forest-mid); }\n .card-feature::before { content: '\u2192'; color: var(--lime); flex-shrink: 0; font-size: 11px; margin-top: 1px; }\n\n \/* Expandible *\/\n .card-expand { max-height: 0; overflow: hidden; transition: max-height 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94); }\n .card-expand-inner { padding-top: 20px; margin-top: 8px; border-top: 1px solid rgba(27,67,50,0.12); }\n .exp-desc { font-size: 14px; font-weight: 300; line-height: 1.8; color: var(--forest-mid); margin-bottom: 24px; border-left: 2px solid var(--lime); padding-left: 16px; }\n .modal-section { margin-bottom: 24px; }\n .modal-section-title { font-family: 'Roboto Condensed', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--forest-mid); margin-bottom: 14px; }\n .dosage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\n .dosage-item { background: rgba(27,67,50,0.05); border: 1px solid var(--border); padding: 16px; }\n .dosage-label { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--forest-mid); margin-bottom: 6px; }\n .dosage-value { font-size: 13px; color: var(--forest); line-height: 1.6; }\n .exp-presentation {\n background: rgba(82,183,136,0.1); border: 1px solid var(--lime);\n padding: 16px 20px; font-family: 'Roboto Mono', monospace;\n font-size: 12px; color: var(--forest-mid); display: flex; align-items: center; gap: 10px;\n }\n .exp-presentation::before { content: '\u25a3'; color: var(--lime); }\n\n .card-footer { display: flex; flex-direction: column; gap: 16px; padding-top: 20px; border-top: 1px solid rgba(27,67,50,0.1); }\n .card-footer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }\n .card-btn {\n display: inline-flex; align-items: center; justify-content: center; gap: 8px;\n background: transparent; border: 1px solid var(--lime);\n color: var(--forest-mid); font-family: 'Roboto', sans-serif;\n font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;\n padding: 12px 16px; cursor: pointer; transition: all 0.3s;\n }\n .card-btn:hover { background: var(--lime) !important; color: var(--forest) !important; transform: translateX(2px) !important; }\n .card-btn.expanded { background: rgba(82,183,136,0.12) !important; color: var(--forest-mid) !important; }\n .card-btn-arrow {\n width: 14px; height: 1px; background: currentColor;\n position: relative; transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); flex-shrink: 0;\n }\n .card-btn-arrow::after {\n content: ''; position: absolute; right: 0; top: -3px;\n width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg);\n }\n .card-btn.expanded .card-btn-arrow { transform: rotate(180deg); }\n .card-btn-ver {\n display: inline-flex; align-items: center; justify-content: center;\n background: transparent; border: 1px solid rgba(27,67,50,0.28); color: var(--forest);\n font-family: 'Roboto', sans-serif; font-size: 11px; font-weight: 600;\n letter-spacing: 2px; text-transform: uppercase; padding: 12px 16px; cursor: pointer; transition: all 0.3s;\n }\n .card-btn-ver:hover { border-color: var(--lime); background: var(--lime) !important; color: var(--forest-mid); transform: translateY(-2px); }\n .card-presentation { font-family: 'Roboto Mono', monospace; font-size: 10px; color: var(--forest-mid); letter-spacing: 1px; }\n\n \/* Tags *\/\n .card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }\n .card-tag {\n font-family: 'Roboto Mono', monospace; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;\n padding: 3px 9px; border-radius: 3px; border: 1px solid; line-height: 1.4;\n }\n .card-tag-categoria { border-color: rgba(82,183,136,0.5); color: var(--forest-mid); background: rgba(82,183,136,0.1); }\n\n \/* \u2500\u2500 FILTROS \u2500\u2500 *\/\n .filter-bar {\n position: relative; z-index: 2; background: #fff;\n border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 28px 60px;\n }\n .filter-bar-inner { max-width: 1400px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }\n .filter-group { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 260px; }\n .filter-label {\n font-family: 'Roboto Mono', monospace; font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;\n color: var(--forest-mid); display: flex; align-items: center; gap: 8px;\n }\n .filter-label::before { content: ''; display: inline-block; width: 18px; height: 1px; background: var(--forest-mid); }\n .filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }\n .filter-chip {\n font-family: 'Roboto Condensed', sans-serif; font-size: 13px; font-weight: 400; letter-spacing: 0.3px;\n padding: 7px 16px; border-radius: 4px;\n border: 1px solid rgba(27,67,50,0.22); background: rgba(27,67,50,0.04);\n color: var(--forest); cursor: pointer; transition: all 0.2s ease; user-select: none; white-space: nowrap;\n }\n .filter-chip:hover { border-color: var(--lime); color: var(--forest-mid); background: rgba(82,183,136,0.08); }\n .filter-chip.active { background: var(--lime); border-color: var(--lime); color: var(--forest); font-weight: 700; }\n .filter-count { font-family: 'Roboto Mono', monospace; font-size: 10px; letter-spacing: 1px; color: var(--forest-mid); align-self: flex-end; padding-bottom: 2px; white-space: nowrap; }\n .filter-count span { color: var(--lime); font-weight: 700; }\n\n .product-card.filtered-out { display: none; }\n .filter-empty { display: none; grid-column: 1\/-1; text-align: center; padding: 60px 24px; color: var(--forest-mid); font-family: 'Roboto Condensed', sans-serif; }\n .filter-empty.visible { display: block; }\n .filter-empty-icon { font-size: 36px; margin-bottom: 16px; opacity: 0.4; }\n .filter-empty-title { font-size: 20px; font-weight: 600; color: var(--forest); margin-bottom: 8px; }\n .filter-empty-sub { font-size: 14px; opacity: 0.6; }\n\n @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }\n @keyframes pulse-line { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }\n ::-webkit-scrollbar { width: 4px; }\n ::-webkit-scrollbar-track { background: var(--cream); }\n ::-webkit-scrollbar-thumb { background: var(--lime); }\n\n @media (max-width: 768px) {\n .hero { padding: 100px 24px 60px; }\n .hero-stats { right: 24px; bottom: 40px; gap: 24px; }\n .stat-num { font-size: 26px; }\n .products-grid { padding: 0 0 60px; grid-template-columns: 1fr; }\n .section-header { padding: 60px 24px 40px; }\n .dosage-grid { grid-template-columns: 1fr; }\n .card-footer-actions { grid-template-columns: 1fr; }\n .filter-bar { padding: 20px 24px; }\n .filter-bar-inner { gap: 18px; }\n .filter-group { min-width: 100%; }\n .filter-chip { font-size: 12px; padding: 6px 12px; }\n }\n @media (prefers-reduced-motion: reduce) {\n .product-card { transition: none; }\n .hero-eyebrow,.hero-title,.hero-subtitle,.hero-tagline,.hero-actions,.hero-stats,.scroll-hint { animation: none !important; opacity: 1 !important; }\n .scroll-line { animation: none !important; }\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"hero\">\n <div class=\"hero-bg-img\"><\/div>\n <div class=\"hero-overlay\"><\/div>\n <div class=\"hero-content\">\n <div class=\"hero-eyebrow\">Crassula · Human Health Line<\/div>\n <h1 class=\"hero-title\">Nutraceuticals<span class=\"accent\"><\/span><\/h1>\n <p class=\"hero-subtitle\">Advanced Cellular Nutrition<\/p>\n <p class=\"hero-tagline\">More absorption. Better results. Next-generation nutraceuticals powered by QuanticSphere™ technology—engineered for cellular precision and measurable outcomes.<\/p>\n <div class=\"hero-actions\">\n <button type=\"button\" class=\"btn-primary\" onclick=\"document.getElementById('products').scrollIntoView({behavior:'smooth'})\">View Products<\/button>\n <button type=\"button\" class=\"btn-outline\" onclick=\"document.getElementById('products').scrollIntoView({behavior:'smooth'})\">Learn More<\/button>\n <\/div>\n <\/div>\n <div class=\"hero-stats\">\n <div class=\"stat\"><div class=\"stat-num\">7<\/div><div class=\"stat-label\">Products<\/div><\/div>\n <div class=\"stat\"><div class=\"stat-num\">6<\/div><div class=\"stat-label\">Health Goals<\/div><\/div>\n <div class=\"stat\"><div class=\"stat-num\">QS™<\/div><div class=\"stat-label\">Technology<\/div><\/div>\n <\/div>\n <div class=\"scroll-hint\">\n <span>Scroll<\/span>\n <div class=\"scroll-line\"><\/div>\n <\/div>\n<\/div>\n\n<section id=\"products\" style=\"padding:0;\">\n <div class=\"filter-bar\">\n <div class=\"filter-bar-inner\">\n <div class=\"filter-group\">\n <div class=\"filter-label\">Health Goal<\/div>\n <div class=\"filter-chips\" id=\"filterCategoria\">\n <button type=\"button\" class=\"filter-chip active\" data-categoria=\"all\">All Products<\/button>\n <button type=\"button\" class=\"filter-chip\" data-categoria=\"Cellular Energy\">Cellular Energy<\/button>\n <button type=\"button\" class=\"filter-chip\" data-categoria=\"Longevity\">Longevity<\/button>\n <button type=\"button\" class=\"filter-chip\" data-categoria=\"Immunity\">Immunity<\/button>\n <button type=\"button\" class=\"filter-chip\" data-categoria=\"Gut Health\">Gut Health<\/button>\n <button type=\"button\" class=\"filter-chip\" data-categoria=\"Cardiometabolic\">Cardiometabolic<\/button>\n <button type=\"button\" class=\"filter-chip\" data-categoria=\"Recovery\">Recovery<\/button>\n <\/div>\n <\/div>\n <div class=\"filter-count\" id=\"filterCount\"><span>7<\/span> products<\/div>\n <\/div>\n <\/div>\n\n <div class=\"section-header\">\n <div class=\"section-label\">Human Health Portfolio<\/div>\n <h2 class=\"section-title\">Precision <span style=\"color:var(--lime)\">Nutraceuticals<\/span><\/h2>\n <p class=\"section-desc\">Each formula combines QuanticSphere™ nano-delivery with clinically relevant actives—engineered for maximum bioavailability and targeted cellular impact.<\/p>\n <\/div>\n\n <div class=\"products-grid\" id=\"productsGrid\">\n <div class=\"filter-empty\" id=\"filterEmpty\">\n <div class=\"filter-empty-icon\">\ud83d\udd0d<\/div>\n <div class=\"filter-empty-title\">No results<\/div>\n <div class=\"filter-empty-sub\">No products match the selected filter.<\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<script>\n\/* \n categories: array \u2014 un producto aparece en TODOS los filtros que correspondan.\n La tarjeta se muestra si activeFilter === 'all' O si categories incluye el filtro activo.\n*\/\nconst PRODUCTS = [\n {\n name: \"Q-NMN\",\n category: \"Longevity \\u00b7 Cellular Energy\",\n categories: [\"Cellular Energy\", \"Longevity\", \"Cardiometabolic\"],\n desc: \"Next-generation NMN (Nicotinamide Mononucleotide) delivered via QuanticSphere\\u2122 nano-encapsulation for maximum cellular absorption. Replenishes NAD+ levels that decline with age, directly fueling mitochondrial function, DNA repair mechanisms and metabolic efficiency.\",\n features: [\n \"Increases NAD+ levels for sustained cellular energy\",\n \"Enhances mitochondrial function and metabolic rate\",\n \"Supports healthy aging and DNA repair pathways\"\n ],\n dosage: [\n { label: \"Form\", value: \"Nano-encapsulated oral supplement\" },\n { label: \"Target\", value: \"NAD+ replenishment\\nMitochondrial support\" },\n { label: \"Health Goals\", value: \"Cellular Energy\\nLongevity\\nCardiometabolic\" },\n { label: \"Technology\", value: \"QuanticSphere\\u2122 nano-delivery\\nfor enhanced bioavailability\" }\n ],\n presentation: \"QuanticSphere\\u2122 \u00b7 Oral nutraceutical\",\n productUrl: \"https:\/\/crassulapharma.com\/q-nmn\",\n img: \"https:\/\/images.unsplash.com\/photo-1559757148-5c350d0d3c56?w=600&auto=format&fit=crop\"\n },\n {\n name: \"Q-OXIVIA\",\n category: \"Cardiovascular \\u00b7 Energy\",\n categories: [\"Cellular Energy\", \"Longevity\", \"Cardiometabolic\"],\n desc: \"Advanced cardiovascular and energy support formula powered by QuanticSphere\\u2122 technology. Boosts ATP production at the mitochondrial level, supports heart muscle function and improves systemic oxygen utilization for enhanced physical and mental performance.\",\n features: [\n \"Boosts ATP production at mitochondrial level\",\n \"Supports heart health and vascular function\",\n \"Improves oxygen utilization and endurance\"\n ],\n dosage: [\n { label: \"Form\", value: \"Nano-encapsulated oral supplement\" },\n { label: \"Target\", value: \"Cardiovascular function\\nEnergy metabolism\" },\n { label: \"Health Goals\", value: \"Cellular Energy\\nLongevity\\nCardiometabolic\" },\n { label: \"Technology\", value: \"QuanticSphere\\u2122 nano-delivery\\nfor enhanced bioavailability\" }\n ],\n presentation: \"QuanticSphere\\u2122 \u00b7 Oral nutraceutical\",\n productUrl: \"https:\/\/crassulapharma.com\/q-oxivia\",\n img: \"https:\/\/crassulapharma.com\/wp-content\/uploads\/2026\/03\/q-oxivia-hero.jpg\"\n },\n {\n name: \"Q-CURVIVA\",\n category: \"Anti-Inflammatory\",\n categories: [\"Longevity\", \"Immunity\", \"Gut Health\", \"Cardiometabolic\", \"Recovery\"],\n desc: \"Precision anti-inflammatory formula leveraging QuanticSphere\\u2122-enhanced curcumin and synergistic phytochemicals. Targets oxidative stress at the cellular level, accelerates recovery from physical exertion and protects cellular integrity against chronic inflammatory damage.\",\n features: [\n \"Reduces oxidative stress and chronic inflammation\",\n \"Supports physical and tissue recovery\",\n \"Protects cellular integrity from inflammatory damage\"\n ],\n dosage: [\n { label: \"Form\", value: \"Nano-encapsulated oral supplement\" },\n { label: \"Target\", value: \"Systemic inflammation\\nOxidative stress reduction\" },\n { label: \"Health Goals\", value: \"Longevity \\u00b7 Immunity\\nGut Health \\u00b7 Recovery\\nCardiometabolic\" },\n { label: \"Technology\", value: \"QuanticSphere\\u2122 nano-delivery\\nUp to 20\\u00d7 better absorption\" }\n ],\n presentation: \"QuanticSphere\\u2122 \u00b7 Oral nutraceutical\",\n productUrl: \"https:\/\/crassulapharma.com\/q-curviva\",\n img: \"https:\/\/crassulapharma.com\/wp-content\/uploads\/2026\/03\/q-curviva-hero.jpg\"\n },\n {\n name: \"Q-VITALIS\",\n category: \"Neuro \\u00b7 Muscle Support\",\n categories: [\"Cellular Energy\", \"Longevity\", \"Recovery\"],\n desc: \"Comprehensive neuro-muscular support formula engineered to improve neuromuscular coordination, sustain cognitive performance and combat fatigue. QuanticSphere\\u2122 delivery ensures rapid uptake of key neuroactive and muscular support compounds.\",\n features: [\n \"Improves neuromuscular function and coordination\",\n \"Supports cognitive performance and mental clarity\",\n \"Reduces physical and mental fatigue\"\n ],\n dosage: [\n { label: \"Form\", value: \"Nano-encapsulated oral supplement\" },\n { label: \"Target\", value: \"Neuromuscular function\\nCognitive support\" },\n { label: \"Health Goals\", value: \"Cellular Energy\\nLongevity\\nRecovery\" },\n { label: \"Technology\", value: \"QuanticSphere\\u2122 nano-delivery\\nfor enhanced bioavailability\" }\n ],\n presentation: \"QuanticSphere\\u2122 \u00b7 Oral nutraceutical\",\n productUrl: \"https:\/\/crassulapharma.com\/q-vitalis\",\n img: \"https:\/\/crassulapharma.com\/wp-content\/uploads\/2026\/03\/q-vitalis-hero.jpg\"\n },\n {\n name: \"Q-CALIVRA\",\n category: \"Gut Health\",\n categories: [\"Immunity\", \"Gut Health\"],\n desc: \"Advanced gut microbiome restoration formula combining prebiotics, postbiotics and QuanticSphere\\u2122-delivered bioactives. Restores microbial balance, enhances the gut-immune axis and improves nutrient absorption efficiency across the intestinal barrier.\",\n features: [\n \"Restores and sustains microbiota balance\",\n \"Improves nutrient absorption and gut barrier integrity\",\n \"Supports digestion and gut-immune axis function\"\n ],\n dosage: [\n { label: \"Form\", value: \"Nano-encapsulated oral supplement\" },\n { label: \"Target\", value: \"Microbiota restoration\\nGut-immune axis\" },\n { label: \"Health Goals\", value: \"Gut Health\\nImmunity\" },\n { label: \"Technology\", value: \"QuanticSphere\\u2122 nano-delivery\\nfor enhanced bioavailability\" }\n ],\n presentation: \"QuanticSphere\\u2122 \u00b7 Oral nutraceutical\",\n productUrl: \"https:\/\/crassulapharma.com\/q-calivra\",\n img: \"https:\/\/crassulapharma.com\/wp-content\/uploads\/2026\/03\/q-calivra-hero.jpg\"\n },\n {\n name: \"Q-ERYTHRA\",\n category: \"Hematologic Support\",\n categories: [\"Cellular Energy\", \"Cardiometabolic\"],\n desc: \"Specialized hematological support formula designed to enhance hemoglobin synthesis and red blood cell quality. QuanticSphere\\u2122 nano-iron and synergistic cofactors ensure superior bioavailability compared to conventional iron supplements, with improved tolerability.\",\n features: [\n \"Enhances hemoglobin synthesis and red blood cell production\",\n \"Improves oxygen transport and cellular energy metabolism\",\n \"Superior bioavailability vs. conventional iron supplements\"\n ],\n dosage: [\n { label: \"Form\", value: \"Nano-encapsulated oral supplement\" },\n { label: \"Target\", value: \"Hemoglobin synthesis\\nOxygen transport\" },\n { label: \"Health Goals\", value: \"Cellular Energy\\nCardiometabolic\" },\n { label: \"Technology\", value: \"QuanticSphere\\u2122 nano-iron\\nHigh tolerability\" }\n ],\n presentation: \"QuanticSphere\\u2122 \u00b7 Oral nutraceutical\",\n productUrl: \"https:\/\/crassulapharma.com\/q-erythra\",\n img: \"https:\/\/crassulapharma.com\/wp-content\/uploads\/2026\/03\/VETRAERUTHRA.jpg\"\n },\n {\n name: \"Q-SYNOVI\",\n category: \"Joint Health\",\n categories: [\"Recovery\"],\n desc: \"Precision joint health formula combining QuanticSphere\\u2122-delivered collagen peptides, glucosamine analogs and anti-inflammatory phytochemicals. Supports cartilage regeneration, reduces joint inflammation and improves mobility and range of motion.\",\n features: [\n \"Supports cartilage regeneration and joint lubrication\",\n \"Reduces joint inflammation and pain signals\",\n \"Improves mobility and range of motion\"\n ],\n dosage: [\n { label: \"Form\", value: \"Nano-encapsulated oral supplement\" },\n { label: \"Target\", value: \"Cartilage regeneration\\nJoint inflammation\" },\n { label: \"Health Goals\", value: \"Recovery\" },\n { label: \"Technology\", value: \"QuanticSphere\\u2122 nano-delivery\\nfor enhanced bioavailability\" }\n ],\n presentation: \"QuanticSphere\\u2122 \u00b7 Oral nutraceutical\",\n productUrl: \"https:\/\/crassulapharma.com\/q-synovi\",\n img: \"https:\/\/crassulapharma.com\/wp-content\/uploads\/2026\/03\/q-synovi-hero-1.jpg\"\n }\n];\n\nconst PRODUCT_LINK_BASE = '';\n\nfunction productSlug(name) {\n return String(name).normalize('NFD').replace(\/[\\u0300-\\u036f]\/g,'').toLowerCase().replace(\/[^a-z0-9]+\/g,'-').replace(\/^-+|-+$\/g,'');\n}\nfunction escapeAttr(s) { return String(s).replace(\/&\/g,'&').replace(\/\"\/g,'"'); }\nfunction resolveProductUrl(p) {\n if (p.productUrl) return p.productUrl;\n if (PRODUCT_LINK_BASE) { const b = PRODUCT_LINK_BASE.endsWith('\/') ? PRODUCT_LINK_BASE : PRODUCT_LINK_BASE+'\/'; return b+productSlug(p.name); }\n return '';\n}\n\nfunction buildExpandHTML(p) {\n const dosageHTML = p.dosage.map(d => `\n <div class=\"dosage-item\">\n <div class=\"dosage-label\">${d.label}<\/div>\n <div class=\"dosage-value\">${d.value.replace(\/\\n\/g,'<br>')}<\/div>\n <\/div>`).join('');\n const tagsHTML = p.categories.map(c => `<span class=\"card-tag card-tag-categoria\">${c}<\/span>`).join('');\n return `\n <div class=\"card-expand-inner\">\n <p class=\"exp-desc\">${p.desc}<\/p>\n <div class=\"modal-section\">\n <div class=\"modal-section-title\">Product Details<\/div>\n <div class=\"dosage-grid\">${dosageHTML}<\/div>\n <\/div>\n <div style=\"display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;\">${tagsHTML}<\/div>\n <div class=\"exp-presentation\">${p.presentation}<\/div>\n <\/div>`;\n}\n\nfunction renderCards() {\n const grid = document.getElementById('productsGrid');\n PRODUCTS.forEach((p, i) => {\n const featurePreview = p.features.slice(0,3).map(f => `<div class=\"card-feature\">${f}<\/div>`).join('');\n const targetUrl = resolveProductUrl(p);\n const urlAttr = targetUrl ? ` data-product-url=\"${escapeAttr(targetUrl)}\"` : '';\n const card = document.createElement('div');\n card.className = 'product-card';\n card.style.transitionDelay = `${(i % 3) * 0.08}s`;\n card.dataset.categories = JSON.stringify(p.categories || []);\n card.innerHTML = `\n <div class=\"card-category\">${p.category}<\/div>\n <img loading=\"lazy\" decoding=\"async\" class=\"card-img\" src=\"${p.img}\" alt=\"${p.name}\" loading=\"lazy\" width=\"600\" height=\"200\">\n <div class=\"card-name\">${p.name}<\/div>\n <div class=\"card-features\">${featurePreview}<\/div>\n <div class=\"card-expand\" id=\"expand-${i}\" data-expand-root>${buildExpandHTML(p)}<\/div>\n <div class=\"card-footer\">\n <div class=\"card-footer-actions\">\n <button type=\"button\" class=\"card-btn\" data-expand-btn data-target=\"expand-${i}\" aria-expanded=\"false\">\n <span>More Info<\/span>\n <span class=\"card-btn-arrow\" aria-hidden=\"true\"><\/span>\n <\/button>\n <button type=\"button\" class=\"card-btn-ver\" data-ver-producto data-product-slug=\"${escapeAttr(productSlug(p.name))}\"${urlAttr}>View Product<\/button>\n <\/div>\n <div class=\"card-presentation\">${p.presentation}<\/div>\n <\/div>`;\n grid.appendChild(card);\n });\n}\n\nlet activeFilter = 'all';\n\nfunction applyFilters() {\n const cards = document.querySelectorAll('.product-card');\n let visible = 0;\n cards.forEach(card => {\n const cats = JSON.parse(card.dataset.categories || '[]');\n const match = activeFilter === 'all' || cats.includes(activeFilter);\n if (match) { card.classList.remove('filtered-out'); visible++; }\n else { card.classList.add('filtered-out'); }\n });\n const countEl = document.getElementById('filterCount');\n if (countEl) countEl.innerHTML = `<span>${visible}<\/span> product${visible !== 1 ? 's' : ''}`;\n const emptyEl = document.getElementById('filterEmpty');\n if (emptyEl) emptyEl.classList.toggle('visible', visible === 0);\n}\n\ndocument.getElementById('filterCategoria').addEventListener('click', e => {\n const chip = e.target.closest('.filter-chip');\n if (!chip) return;\n document.querySelectorAll('#filterCategoria .filter-chip').forEach(c => c.classList.remove('active'));\n chip.classList.add('active');\n activeFilter = chip.dataset.categoria;\n applyFilters();\n});\n\nfunction toggleExpand(btn) {\n const id = btn.getAttribute('data-target');\n const expand = document.getElementById(id);\n if (!expand) return;\n const label = btn.querySelector('span');\n const isOpen = expand.classList.contains('is-open');\n if (isOpen) {\n expand.style.maxHeight = '0px';\n expand.classList.remove('is-open');\n btn.classList.remove('expanded');\n btn.setAttribute('aria-expanded','false');\n if (label) label.textContent = 'More Info';\n } else {\n expand.classList.add('is-open');\n expand.style.maxHeight = expand.scrollHeight + 'px';\n btn.classList.add('expanded');\n btn.setAttribute('aria-expanded','true');\n if (label) label.textContent = 'Hide Info';\n }\n}\n\nfunction refreshOpenPanels() {\n document.querySelectorAll('.card-expand.is-open').forEach(el => { el.style.maxHeight = el.scrollHeight + 'px'; });\n}\n\ndocument.getElementById('productsGrid').addEventListener('click', e => {\n const expandBtn = e.target.closest('[data-expand-btn]');\n if (expandBtn) { e.preventDefault(); toggleExpand(expandBtn); return; }\n const verBtn = e.target.closest('[data-ver-producto]');\n if (!verBtn) return;\n const url = verBtn.getAttribute('data-product-url');\n if (url) { window.location.assign(url); return; }\n const card = verBtn.closest('.product-card');\n if (!card) return;\n card.scrollIntoView({ behavior: 'smooth', block: 'center' });\n const expandRoot = card.querySelector('[data-expand-root]');\n const moreBtn = card.querySelector('[data-expand-btn]');\n if (moreBtn && expandRoot && !expandRoot.classList.contains('is-open')) toggleExpand(moreBtn);\n setTimeout(() => refreshOpenPanels(), 450);\n});\n\nwindow.addEventListener('resize', () => refreshOpenPanels());\n\nfunction setupObserver() {\n const observer = new IntersectionObserver(entries => {\n entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); observer.unobserve(e.target); } });\n }, { threshold: 0.1 });\n document.querySelectorAll('.product-card').forEach(c => observer.observe(c));\n}\n\nrenderCards();\nsetupObserver();\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\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>nutraceuticals | Advanced Cellular Nutrition | Human Health Line Crassula · Human Health Line Nutraceuticals Advanced Cellular Nutrition More absorption. Better results. Next-generation nutraceuticals powered by QuanticSphere™ technology—engineered for cellular precision and measurable outcomes. View Products Learn More 7Products 6Health Goals QS™Technology Scroll Health Goal All Products Cellular Energy Longevity Immunity Gut Health Cardiometabolic Recovery […]<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"class_list":["post-11259","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/crassulapharma.com\/es\/wp-json\/wp\/v2\/pages\/11259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/crassulapharma.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/crassulapharma.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/crassulapharma.com\/es\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/crassulapharma.com\/es\/wp-json\/wp\/v2\/comments?post=11259"}],"version-history":[{"count":28,"href":"https:\/\/crassulapharma.com\/es\/wp-json\/wp\/v2\/pages\/11259\/revisions"}],"predecessor-version":[{"id":11405,"href":"https:\/\/crassulapharma.com\/es\/wp-json\/wp\/v2\/pages\/11259\/revisions\/11405"}],"wp:attachment":[{"href":"https:\/\/crassulapharma.com\/es\/wp-json\/wp\/v2\/media?parent=11259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}