{"id":605,"date":"2026-03-30T18:10:11","date_gmt":"2026-03-30T21:10:11","guid":{"rendered":"https:\/\/sitexis.com.br\/inovaco\/?page_id=605"},"modified":"2026-04-09T17:04:21","modified_gmt":"2026-04-09T20:04:21","slug":"produtos","status":"publish","type":"page","link":"https:\/\/sitexis.com.br\/inovaco\/produtos\/","title":{"rendered":"Produtos"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"605\" class=\"elementor elementor-605\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6a563d2 e-flex e-con-boxed e-con e-parent\" data-id=\"6a563d2\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t\t\t<h2 \n\t\tdata-interaction-id=\"18b05c8\" \n\t\tclass=\"e-18b05c8-b7c9476 e-heading-base\" \n\t\t \n\t\tdata-e-type=\"widget\" data-id=\"18b05c8\"\n\t>\n\t\n\t\t\tCAT\u00c1LOGO\n\t\t<\/h2>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-22eb3e2 e-con-full e-flex e-con e-parent\" data-id=\"22eb3e2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7eec430 elementor-widget elementor-widget-html\" data-id=\"7eec430\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"inovaco-vitrine\">\r\n<style>\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   VARI\u00c1VEIS GLOBAIS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#inovaco-vitrine {\r\n    --v-primary: #064A74;\r\n    --v-accent: #00a8cc;\r\n    --v-gradient: linear-gradient(135deg, #064A74 0%, #00a8cc 100%);\r\n    --v-dark: #0a1628;\r\n    --v-text: #2d3748;\r\n    --v-text-light: #94a3b8;\r\n    --v-text-muted: #b0bec5;\r\n    --v-bg: #ffffff;\r\n    --v-bg-subtle: #f1f5f9;\r\n    --v-bg-card: #ffffff;\r\n    --v-border: #e2e8f0;\r\n    --v-radius: 20px;\r\n    --v-radius-sm: 12px;\r\n    --v-shadow: 0 4px 24px rgba(6,74,116,0.06);\r\n    --v-shadow-hover: 0 20px 60px rgba(6,74,116,0.15);\r\n    --v-ease: cubic-bezier(0.165, 0.84, 0.44, 1);\r\n    font-family: 'Poppins', sans-serif;\r\n    color: var(--v-text);\r\n}\r\n#inovaco-vitrine *, #inovaco-vitrine *::before, #inovaco-vitrine *::after { box-sizing: border-box; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   HERO SECTION\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#inovaco-vitrine .v-hero {\r\n    position: relative;\r\n    width: 100%;\r\n    min-height: clamp(580px, 72vh, 780px);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    overflow: hidden;\r\n}\r\n#inovaco-vitrine .v-hero-media {\r\n    position: absolute;\r\n    inset: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    z-index: 0;\r\n}\r\n\r\n\/* Hero fundo branco por padr\u00e3o *\/\r\n#inovaco-vitrine .v-hero { background: #ffffff; }\r\n\r\n\/* Imagem do segmento \u2014 estado inicial *\/\r\n#inovaco-vitrine .v-hero-img {\r\n    position: absolute;\r\n    inset: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    opacity: 0;\r\n    z-index: 2;\r\n    transform: scale(1.06);\r\n    will-change: opacity, transform;\r\n    \/* Transi\u00e7\u00e3o controlada 100% via JS inline-style para evitar conflito de especificidade *\/\r\n}\r\n\r\n\/* Overlay principal \u2014 leve, s\u00f3 para legibilidade sobre imagens de segmento *\/\r\n#inovaco-vitrine .v-hero-overlay {\r\n    position: absolute;\r\n    inset: 0;\r\n    background: rgba(255,255,255,0);\r\n    z-index: 3;\r\n    transition: background 0.7s ease;\r\n    pointer-events: none;\r\n}\r\n#inovaco-vitrine .v-hero-overlay.has-img {\r\n    background: rgba(255,255,255,0.38);\r\n}\r\n\r\n\/* Gradiente na base para legibilidade do conte\u00fado *\/\r\n#inovaco-vitrine .v-hero-gradient {\r\n    position: absolute;\r\n    inset: 0;\r\n    background: linear-gradient(\r\n        to bottom,\r\n        transparent 0%,\r\n        rgba(255,255,255,0.08) 40%,\r\n        rgba(255,255,255,0.35) 100%\r\n    );\r\n    z-index: 3;\r\n    pointer-events: none;\r\n}\r\n\r\n\/* Conte\u00fado sobre o overlay *\/\r\n#inovaco-vitrine .v-hero-content {\r\n    position: relative;\r\n    z-index: 4;\r\n    width: 100%;\r\n    max-width: 1300px;\r\n    margin: 0 auto;\r\n    padding: 36px 28px 40px;\r\n}\r\n#inovaco-vitrine .v-hero-title {\r\n    font-size: clamp(20px, 2.8vw, 32px);\r\n    font-weight: 700;\r\n    color: var(--v-primary);\r\n    margin: 0 0 4px;\r\n    line-height: 1.2;\r\n    letter-spacing: -0.5px;\r\n    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n#inovaco-vitrine .v-hero-subtitle {\r\n    font-size: 13px;\r\n    color: var(--v-text-light);\r\n    margin: 0 0 20px;\r\n    font-weight: 400;\r\n    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   PAINEL DE FILTROS \u2014 mais compacto\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#inovaco-vitrine .v-filter-panel {\r\n    background: rgba(255,255,255,0.82);\r\n    backdrop-filter: blur(18px);\r\n    -webkit-backdrop-filter: blur(18px);\r\n    border: 1px solid rgba(255,255,255,0.92);\r\n    border-radius: var(--v-radius);\r\n    box-shadow: 0 8px 40px rgba(6,74,116,0.10);\r\n    padding: 16px 18px 14px;\r\n}\r\n#inovaco-vitrine .v-search-row {\r\n    display: flex;\r\n    gap: 10px;\r\n    margin-bottom: 12px;\r\n    align-items: stretch;\r\n}\r\n#inovaco-vitrine .v-search-box { position: relative; flex: 1; }\r\n#inovaco-vitrine .v-search-input {\r\n    width: 100%;\r\n    padding: 10px 16px 10px 42px;\r\n    font-family: 'Poppins', sans-serif;\r\n    font-size: 13px; font-weight: 500;\r\n    color: var(--v-text);\r\n    background: var(--v-bg);\r\n    border: 2px solid var(--v-border);\r\n    border-radius: var(--v-radius);\r\n    outline: none;\r\n    transition: all 0.3s var(--v-ease);\r\n}\r\n#inovaco-vitrine .v-search-input::placeholder { color: var(--v-text-muted); }\r\n#inovaco-vitrine .v-search-input:focus {\r\n    border-color: var(--v-accent);\r\n    box-shadow: 0 0 0 3px rgba(0,168,204,0.1);\r\n}\r\n#inovaco-vitrine .v-search-icon {\r\n    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);\r\n    width: 16px; height: 16px; color: var(--v-text-muted); pointer-events: none;\r\n}\r\n#inovaco-vitrine .v-counter-badge {\r\n    display: flex; align-items: center;\r\n    padding: 0 16px;\r\n    background: var(--v-bg-subtle);\r\n    border-radius: var(--v-radius);\r\n    font-size: 12px; font-weight: 300; color: var(--v-text-light);\r\n    white-space: nowrap;\r\n    border: 2px solid var(--v-border);\r\n}\r\n#inovaco-vitrine .v-counter-badge strong {\r\n    color: var(--v-primary); font-size: 18px; margin-right: 5px;\r\n    transition: all 0.3s ease;\r\n}\r\n#inovaco-vitrine .v-filter-all-row { margin-bottom: 10px; }\r\n#inovaco-vitrine .v-filter-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 10px;\r\n    align-items: start;\r\n}\r\n#inovaco-vitrine .v-filter-col {\r\n    background: var(--v-bg);\r\n    border: 1px solid var(--v-border);\r\n    border-radius: var(--v-radius-sm);\r\n    overflow: hidden;\r\n}\r\n#inovaco-vitrine .v-filter-col-header {\r\n    display: flex; align-items: center; gap: 6px;\r\n    padding: 7px 12px;\r\n    border-bottom: 1px solid var(--v-border);\r\n    background: var(--v-bg-subtle);\r\n}\r\n#inovaco-vitrine .v-filter-col-header svg { width: 12px; height: 12px; flex-shrink: 0; }\r\n#inovaco-vitrine .v-filter-col-title {\r\n    font-size: 9.5px; font-weight: 700;\r\n    letter-spacing: 1.5px; text-transform: uppercase;\r\n    color: var(--v-text-light);\r\n}\r\n#inovaco-vitrine .v-filter-col.segmentos { border-color: rgba(0,168,204,0.2); }\r\n#inovaco-vitrine .v-filter-col.segmentos .v-filter-col-header {\r\n    background: linear-gradient(135deg, rgba(6,74,116,0.04) 0%, rgba(0,168,204,0.07) 100%);\r\n    border-bottom-color: rgba(0,168,204,0.15);\r\n}\r\n#inovaco-vitrine .v-filter-col.segmentos .v-filter-col-title { color: var(--v-accent); }\r\n#inovaco-vitrine .v-pills-grid {\r\n    display: flex; flex-wrap: wrap; gap: 5px; padding: 9px 10px;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   PILLS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#inovaco-vitrine .v-pill {\r\n    position: relative; flex: 0 0 auto;\r\n    padding: 6px 13px;\r\n    font-family: 'DM Sans', sans-serif;\r\n    font-size: 12px; font-weight: 400;\r\n    color: var(--v-text);\r\n    background: var(--v-bg-subtle);\r\n    border: 2px solid transparent;\r\n    border-radius: 50px;\r\n    cursor: pointer;\r\n    transition: all 0.35s var(--v-ease);\r\n    white-space: nowrap;\r\n    display: inline-flex; align-items: center; gap: 6px;\r\n    user-select: none;\r\n}\r\n#inovaco-vitrine .v-pill.all-pill { padding: 8px 20px; font-size: 13px; font-weight: 500; }\r\n#inovaco-vitrine .v-pill::before {\r\n    content: ''; position: absolute; inset: 0;\r\n    background: var(--v-gradient); opacity: 0;\r\n    transition: opacity 0.35s ease; border-radius: 50px;\r\n}\r\n#inovaco-vitrine .v-pill > * { position: relative; z-index: 2; }\r\n#inovaco-vitrine .v-pill:hover {\r\n    border-color: rgba(0,168,204,0.3);\r\n    transform: translateY(-1px);\r\n    box-shadow: 0 4px 12px rgba(6,74,116,0.08);\r\n}\r\n#inovaco-vitrine .v-pill.active {\r\n    color: #fff; border-color: transparent;\r\n    transform: translateY(-1px);\r\n    box-shadow: 0 6px 20px rgba(6,74,116,0.25);\r\n}\r\n#inovaco-vitrine .v-pill.active::before { opacity: 1; }\r\n#inovaco-vitrine .v-pill-count {\r\n    font-size: 10px; font-weight: 600;\r\n    padding: 1px 6px; border-radius: 50px;\r\n    background: rgba(6,74,116,0.07); color: var(--v-primary);\r\n    transition: all 0.35s ease;\r\n}\r\n#inovaco-vitrine .v-pill.active .v-pill-count { background: rgba(255,255,255,0.22); color: #fff; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   \u00c1REA DOS PRODUTOS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#inovaco-vitrine .v-products-area {\r\n    max-width: 1300px;\r\n    margin: 0 auto;\r\n    padding: 32px 20px 60px;\r\n}\r\n#inovaco-vitrine .v-line {\r\n    height: 3px; background: var(--v-gradient);\r\n    border-radius: 50px; margin-bottom: 28px;\r\n    position: relative; overflow: hidden;\r\n}\r\n#inovaco-vitrine .v-line::after {\r\n    content: ''; position: absolute; top:0; left:-40%;\r\n    width: 40%; height: 100%;\r\n    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);\r\n    animation: vShimmer 2.5s infinite;\r\n}\r\n@keyframes vShimmer { 0%{left:-40%} 100%{left:140%} }\r\n\r\n#inovaco-vitrine .v-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));\r\n    gap: 24px;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   CARD\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#inovaco-vitrine .v-card {\r\n    position: relative;\r\n    background: var(--v-bg-card);\r\n    border-radius: var(--v-radius);\r\n    overflow: hidden;\r\n    box-shadow: var(--v-shadow);\r\n    transition: all 0.45s var(--v-ease);\r\n    display: flex; flex-direction: column;\r\n}\r\n#inovaco-vitrine .v-card:hover { transform: translateY(-8px); box-shadow: var(--v-shadow-hover); }\r\n#inovaco-vitrine .v-card-img-wrap {\r\n    position: relative; width: 100%; padding-top: 100%;\r\n    overflow: hidden; background: var(--v-bg-subtle);\r\n}\r\n#inovaco-vitrine .v-card-img {\r\n    position: absolute; inset: 0; width: 100%; height: 100%;\r\n    object-fit: cover; transition: transform 0.6s var(--v-ease);\r\n}\r\n#inovaco-vitrine .v-card:hover .v-card-img { transform: scale(1.08); }\r\n#inovaco-vitrine .v-card-badge {\r\n    position: absolute; top: 16px; left: 16px;\r\n    padding: 6px 14px;\r\n    font-size: 10px; font-weight: 300;\r\n    letter-spacing: 1.5px; text-transform: uppercase;\r\n    color: #fff; background: var(--v-gradient);\r\n    border-radius: 50px; z-index: 3;\r\n    box-shadow: 0 4px 12px rgba(6,74,116,0.3);\r\n}\r\n#inovaco-vitrine .v-card-overlay {\r\n    position: absolute; inset: 0;\r\n    background: linear-gradient(to top, rgba(6,74,116,0.85) 0%, rgba(6,74,116,0.2) 50%, transparent 100%);\r\n    display: flex; align-items: flex-end; justify-content: center;\r\n    padding: 24px; opacity: 0; transition: opacity 0.4s ease; z-index: 2;\r\n}\r\n#inovaco-vitrine .v-card:hover .v-card-overlay { opacity: 1; }\r\n#inovaco-vitrine .v-card-overlay-btn {\r\n    display: inline-flex; align-items: center; gap: 8px;\r\n    padding: 12px 28px;\r\n    font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 300;\r\n    color: var(--v-primary); background: #fff;\r\n    border: none; border-radius: 50px; cursor: pointer; text-decoration: none;\r\n    transform: translateY(20px); transition: all 0.4s var(--v-ease);\r\n    box-shadow: 0 8px 24px rgba(0,0,0,0.2);\r\n}\r\n#inovaco-vitrine .v-card:hover .v-card-overlay-btn { transform: translateY(0); }\r\n#inovaco-vitrine .v-card-overlay-btn:hover { background: var(--v-accent); color: #fff; }\r\n#inovaco-vitrine .v-card-body {\r\n    padding: 20px 24px 24px;\r\n    display: flex; flex-direction: column; flex: 1;\r\n}\r\n#inovaco-vitrine .v-card-cat {\r\n    font-size: 10.5px; font-weight: 300;\r\n    letter-spacing: 2px; text-transform: uppercase;\r\n    color: var(--v-accent); margin-bottom: 8px;\r\n}\r\n#inovaco-vitrine .v-card-title {\r\n    font-family: 'Poppins', serif; font-size: 18px; font-weight: 400;\r\n    color: var(--v-dark); line-height: 1.25; margin: 0 0 12px;\r\n}\r\n#inovaco-vitrine .v-card-desc {\r\n    font-size: 13px; line-height: 1.6; color: var(--v-text-light);\r\n    margin-bottom: 20px; flex: 1;\r\n    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;\r\n}\r\n#inovaco-vitrine .v-card-footer { display: flex; gap: 10px; margin-top: auto; }\r\n#inovaco-vitrine .v-btn-details {\r\n    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;\r\n    padding: 12px 20px;\r\n    font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 300;\r\n    color: #fff; background: var(--v-gradient);\r\n    border: none; border-radius: var(--v-radius-sm);\r\n    cursor: pointer; text-decoration: none;\r\n    transition: all 0.35s var(--v-ease);\r\n    position: relative; overflow: hidden;\r\n}\r\n#inovaco-vitrine .v-btn-details::before {\r\n    content: ''; position: absolute; top:0; left:-100%; width:100%; height:100%;\r\n    background: rgba(255,255,255,0.15); transition: left 0.5s ease;\r\n}\r\n#inovaco-vitrine .v-btn-details:hover::before { left: 100%; }\r\n#inovaco-vitrine .v-btn-details:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(6,74,116,0.3); }\r\n#inovaco-vitrine .v-btn-whatsapp {\r\n    display: inline-flex; align-items: center; justify-content: center;\r\n    width: 48px; height: 48px;\r\n    background: #25d366; border: none; border-radius: var(--v-radius-sm);\r\n    cursor: pointer; transition: all 0.35s var(--v-ease);\r\n    color: #fff; font-size: 20px; flex-shrink: 0;\r\n}\r\n#inovaco-vitrine .v-btn-whatsapp:hover {\r\n    background: #1fb855; transform: translateY(-2px);\r\n    box-shadow: 0 8px 24px rgba(37,211,102,0.35);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   SKELETON\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#inovaco-vitrine .v-skeleton-card {\r\n    border-radius: var(--v-radius); overflow: hidden;\r\n    background: var(--v-bg-card); box-shadow: var(--v-shadow);\r\n}\r\n#inovaco-vitrine .v-skeleton-img {\r\n    width: 100%; padding-top: 100%;\r\n    background: linear-gradient(110deg, #f0f0f0 30%, #e0e0e0 50%, #f0f0f0 70%);\r\n    background-size: 200% 100%; animation: vSkeleton 1.5s infinite;\r\n}\r\n#inovaco-vitrine .v-skeleton-body { padding: 20px 24px 24px; }\r\n#inovaco-vitrine .v-skeleton-line {\r\n    height: 12px; border-radius: 6px;\r\n    background: linear-gradient(110deg, #f0f0f0 30%, #e0e0e0 50%, #f0f0f0 70%);\r\n    background-size: 200% 100%; animation: vSkeleton 1.5s infinite; margin-bottom: 10px;\r\n}\r\n#inovaco-vitrine .v-skeleton-line:nth-child(1){width:40%;height:8px}\r\n#inovaco-vitrine .v-skeleton-line:nth-child(2){width:75%;height:16px}\r\n#inovaco-vitrine .v-skeleton-line:nth-child(3){width:90%}\r\n#inovaco-vitrine .v-skeleton-line:nth-child(4){width:100%;height:44px;margin-top:16px;border-radius:12px}\r\n@keyframes vSkeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   ESTADO VAZIO\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#inovaco-vitrine .v-empty {\r\n    display: none; text-align: center; padding: 80px 20px; grid-column: 1\/-1;\r\n}\r\n#inovaco-vitrine .v-empty.visible { display: block; }\r\n#inovaco-vitrine .v-empty-icon {\r\n    width: 80px; height: 80px; margin: 0 auto 20px;\r\n    background: var(--v-bg-subtle); border-radius: 50%;\r\n    display: flex; align-items: center; justify-content: center; font-size: 36px;\r\n}\r\n#inovaco-vitrine .v-empty strong { display: block; font-size: 18px; color: var(--v-dark); margin-bottom: 8px; }\r\n#inovaco-vitrine .v-empty p { color: var(--v-text-light); font-size: 14px; margin: 0; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   ANIMA\u00c7\u00d5ES CARD\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@keyframes vFadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }\r\n#inovaco-vitrine .v-card.v-visible { animation: vFadeUp 0.5s var(--v-ease) both; }\r\n#inovaco-vitrine .v-card.v-hidden { display: none; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   RESPONSIVO\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@media (max-width: 900px) {\r\n    #inovaco-vitrine .v-hero { min-height: 540px; }\r\n    #inovaco-vitrine .v-filter-grid { grid-template-columns: 1fr; }\r\n}\r\n@media (max-width: 768px) {\r\n    #inovaco-vitrine .v-hero { min-height: 580px; }\r\n    #inovaco-vitrine .v-hero-content { padding: 24px 14px 28px; }\r\n    #inovaco-vitrine .v-search-row { flex-direction: column; }\r\n    #inovaco-vitrine .v-counter-badge { justify-content: center; padding: 10px; }\r\n    #inovaco-vitrine .v-grid { grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 16px; }\r\n    #inovaco-vitrine .v-products-area { padding: 20px 12px 40px; }\r\n}\r\n@media (max-width: 480px) {\r\n    #inovaco-vitrine .v-grid { grid-template-columns: 1fr; }\r\n    #inovaco-vitrine .v-card-body { padding: 16px 18px 20px; }\r\n    #inovaco-vitrine .v-filter-panel { padding: 12px; }\r\n}\r\n<\/style>\r\n\r\n<!-- \u2550\u2550\u2550 HERO \u2550\u2550\u2550 -->\r\n<section class=\"v-hero\" id=\"v-hero\">\r\n    <div class=\"v-hero-media\">\r\n        <img decoding=\"async\" class=\"v-hero-img\" id=\"v-hero-img\" src=\"\" alt=\"\">\r\n    <\/div>\r\n    <div class=\"v-hero-overlay\" id=\"v-hero-overlay\"><\/div>\r\n    <div class=\"v-hero-gradient\"><\/div>\r\n\r\n    <div class=\"v-hero-content\">\r\n        <h2 class=\"v-hero-title\" id=\"v-hero-title\">Explore nosso Cat\u00e1logo<\/h2>\r\n        <p class=\"v-hero-subtitle\" id=\"v-hero-subtitle\">Filtre por categoria ou segmento de mercado<\/p>\r\n\r\n        <div class=\"v-filter-panel\">\r\n            <div class=\"v-search-row\">\r\n                <div class=\"v-search-box\">\r\n                    <input type=\"text\" class=\"v-search-input\" id=\"v-search\"\r\n                           placeholder=\"Buscar produto por nome...\" autocomplete=\"off\">\r\n                    <svg class=\"v-search-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                         stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                        <circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.35-4.35\"\/>\r\n                    <\/svg>\r\n                <\/div>\r\n                <div class=\"v-counter-badge\">\r\n                    <strong id=\"v-count\">0<\/strong> produtos\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"v-filter-all-row\" id=\"v-filter-all-row\">\r\n                <div style=\"padding:4px;color:var(--v-text-muted);font-size:12px;\">Carregando filtros...<\/div>\r\n            <\/div>\r\n\r\n            <div class=\"v-filter-grid\" id=\"v-filter-grid\" style=\"display:none;\">\r\n                <div class=\"v-filter-col categorias\">\r\n                    <div class=\"v-filter-col-header\">\r\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                             stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"color:var(--v-text-light)\">\r\n                            <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"\/>\r\n                            <rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"\/>\r\n                            <rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"\/>\r\n                            <rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"\/>\r\n                        <\/svg>\r\n                        <span class=\"v-filter-col-title\">Categorias<\/span>\r\n                    <\/div>\r\n                    <div class=\"v-pills-grid\" id=\"v-pills-cats\"><\/div>\r\n                <\/div>\r\n                <div class=\"v-filter-col segmentos\">\r\n                    <div class=\"v-filter-col-header\">\r\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                             stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"color:var(--v-accent)\">\r\n                            <path d=\"M12 2L2 7l10 5 10-5-10-5z\"\/>\r\n                            <path d=\"M2 17l10 5 10-5\"\/>\r\n                            <path d=\"M2 12l10 5 10-5\"\/>\r\n                        <\/svg>\r\n                        <span class=\"v-filter-col-title\">Segmentos<\/span>\r\n                    <\/div>\r\n                    <div class=\"v-pills-grid\" id=\"v-pills-segs\"><\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550 PRODUTOS \u2550\u2550\u2550 -->\r\n<div class=\"v-products-area\">\r\n    <div class=\"v-line\"><\/div>\r\n    <div class=\"v-grid\" id=\"v-grid\">\r\n        <div class=\"v-skeleton-card\"><div class=\"v-skeleton-img\"><\/div><div class=\"v-skeleton-body\"><div class=\"v-skeleton-line\"><\/div><div class=\"v-skeleton-line\"><\/div><div class=\"v-skeleton-line\"><\/div><div class=\"v-skeleton-line\"><\/div><\/div><\/div>\r\n        <div class=\"v-skeleton-card\"><div class=\"v-skeleton-img\"><\/div><div class=\"v-skeleton-body\"><div class=\"v-skeleton-line\"><\/div><div class=\"v-skeleton-line\"><\/div><div class=\"v-skeleton-line\"><\/div><div class=\"v-skeleton-line\"><\/div><\/div><\/div>\r\n        <div class=\"v-skeleton-card\"><div class=\"v-skeleton-img\"><\/div><div class=\"v-skeleton-body\"><div class=\"v-skeleton-line\"><\/div><div class=\"v-skeleton-line\"><\/div><div class=\"v-skeleton-line\"><\/div><div class=\"v-skeleton-line\"><\/div><\/div><\/div>\r\n        <div class=\"v-skeleton-card\"><div class=\"v-skeleton-img\"><\/div><div class=\"v-skeleton-body\"><div class=\"v-skeleton-line\"><\/div><div class=\"v-skeleton-line\"><\/div><div class=\"v-skeleton-line\"><\/div><div class=\"v-skeleton-line\"><\/div><\/div><\/div>\r\n    <\/div>\r\n    <div class=\"v-empty\" id=\"v-empty\">\r\n        <div class=\"v-empty-icon\">\ud83d\udd0d<\/div>\r\n        <strong>Nenhum produto encontrado<\/strong>\r\n        <p>Tente outro filtro ou termo de busca<\/p>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n    'use strict';\r\n\r\n    \/* \u2550\u2550\u2550 CONFIG \u2550\u2550\u2550 *\/\r\n    const BASE          = 'https:\/\/sitexis.com.br\/inovaco';\r\n    const API_PRODUTOS  = BASE + '\/wp-json\/produtos\/produtos?per_page=100';\r\n    const API_TAXONOMIA = BASE + '\/wp-json\/wp\/v2\/tipo_de_produto?per_page=100&hide_empty=true';\r\n    const WHATSAPP      = '556292697192';\r\n\r\n    let allProducts  = [];\r\n    let normalCats   = [];\r\n    let segmentCats  = [];\r\n    let mediaCache   = {};\r\n    let segImgCache  = {};\r\n    let activeFilter = 'all';\r\n    let searchTerm   = '';\r\n    let heroTransitionTimer = null;\r\n\r\n    const grid         = document.getElementById('v-grid');\r\n    const filterAllRow = document.getElementById('v-filter-all-row');\r\n    const filterGrid   = document.getElementById('v-filter-grid');\r\n    const pillsCats    = document.getElementById('v-pills-cats');\r\n    const pillsSegs    = document.getElementById('v-pills-segs');\r\n    const countEl      = document.getElementById('v-count');\r\n    const emptyEl      = document.getElementById('v-empty');\r\n    const searchInput  = document.getElementById('v-search');\r\n    const heroImg      = document.getElementById('v-hero-img');\r\n    const heroOverlay  = document.getElementById('v-hero-overlay');\r\n    const heroTitle    = document.getElementById('v-hero-title');\r\n    const heroSubtitle = document.getElementById('v-hero-subtitle');\r\n\r\n    \/* \u2550\u2550\u2550 INIT \u2550\u2550\u2550 *\/\r\n    async function init() {\r\n        try {\r\n            const [prodRes, catRes] = await Promise.all([\r\n                fetch(API_PRODUTOS).then(r => r.json()),\r\n                fetch(API_TAXONOMIA).then(r => r.json())\r\n            ]);\r\n\r\n            allProducts = prodRes || [];\r\n\r\n            const allCats = (catRes || []).map(t => ({\r\n                id:      t.id,\r\n                slug:    t.slug,\r\n                name:    t.name,\r\n                count:   t.count,\r\n                segmento: isSegmento(t),\r\n                imgRaw:  t.imagem_de_destaque_do_segmento ?? null\r\n            })).sort((a, b) => a.name.localeCompare(b.name));\r\n\r\n            normalCats  = allCats.filter(c => !c.segmento);\r\n            segmentCats = allCats.filter(c =>  c.segmento);\r\n\r\n            await resolveSegmentImages(segmentCats);\r\n\r\n            const mediaIds = [...new Set(allProducts.map(p => p.featured_media))].filter(id => id && id > 0);\r\n            await fetchAllMedia(mediaIds);\r\n\r\n            renderPills();\r\n            renderGrid();\r\n            setupSearch();\r\n\r\n        } catch (e) {\r\n            console.error('Vitrine Error:', e);\r\n            grid.innerHTML = '<p style=\"text-align:center;padding:40px;color:#e74c3c;font-weight:600;\">Erro ao carregar produtos.<\/p>';\r\n        }\r\n    }\r\n\r\n    \/* \u2550\u2550\u2550 DETECTA SEGMENTO \u2550\u2550\u2550 *\/\r\n    function isSegmento(cat) {\r\n        const v = cat.e_um_segmento;\r\n        if (!v || v === '0' || (Array.isArray(v) && v.length === 0)) return false;\r\n        return true;\r\n    }\r\n\r\n    \/* \u2550\u2550\u2550 RESOLVE IMAGENS DOS SEGMENTOS \u2550\u2550\u2550\r\n       Trata TODOS os formatos poss\u00edveis do WP:\r\n       1. Objeto WP attachment (com guid \/ post_content_filtered)\r\n       2. String HTTP direto\r\n       3. ID num\u00e9rico (string ou number)\r\n       4. Array vazio \u2192 sem imagem\r\n    *\/\r\n    async function resolveSegmentImages(segs) {\r\n        const toResolve = segs.filter(s => {\r\n            const r = s.imgRaw;\r\n            return r && !(Array.isArray(r) && r.length === 0) && r !== false;\r\n        });\r\n\r\n        await Promise.all(toResolve.map(async (seg) => {\r\n            try {\r\n                const raw = seg.imgRaw;\r\n\r\n                \/* CASO 1: Objeto WP attachment completo (retorno do Pods \/ ACF como objeto) *\/\r\n                if (raw && typeof raw === 'object' && !Array.isArray(raw)) {\r\n                    \/\/ guid cont\u00e9m a URL direta do arquivo\r\n                    const url = raw.guid || raw.source_url || '';\r\n                    if (url && url.startsWith('http')) {\r\n                        segImgCache[seg.slug] = url;\r\n                        console.log(`[Vitrine] Seg \"${seg.slug}\" \u2192 objeto guid:`, url);\r\n                        return;\r\n                    }\r\n                    \/\/ Tenta pelo ID dentro do objeto\r\n                    const id = parseInt(raw.ID || raw.id, 10);\r\n                    if (!isNaN(id) && id > 0) {\r\n                        const res = await fetch(`${BASE}\/wp-json\/wp\/v2\/media\/${id}?_fields=source_url,media_details`);\r\n                        if (res.ok) {\r\n                            const data = await res.json();\r\n                            const sizes = data.media_details?.sizes || {};\r\n                            segImgCache[seg.slug] =\r\n                                sizes.large?.source_url ||\r\n                                sizes.medium_large?.source_url ||\r\n                                data.source_url || '';\r\n                            console.log(`[Vitrine] Seg \"${seg.slug}\" \u2192 media ID ${id}:`, segImgCache[seg.slug]);\r\n                        }\r\n                    }\r\n                    return;\r\n                }\r\n\r\n                \/* CASO 2: String URL direta *\/\r\n                if (typeof raw === 'string' && raw.startsWith('http')) {\r\n                    segImgCache[seg.slug] = raw;\r\n                    console.log(`[Vitrine] Seg \"${seg.slug}\" \u2192 URL direta:`, raw);\r\n                    return;\r\n                }\r\n\r\n                \/* CASO 3: ID num\u00e9rico como string ou number *\/\r\n                const id = parseInt(raw, 10);\r\n                if (!isNaN(id) && id > 0) {\r\n                    const res = await fetch(`${BASE}\/wp-json\/wp\/v2\/media\/${id}?_fields=source_url,media_details`);\r\n                    if (res.ok) {\r\n                        const data = await res.json();\r\n                        const sizes = data.media_details?.sizes || {};\r\n                        segImgCache[seg.slug] =\r\n                            sizes.large?.source_url ||\r\n                            sizes.medium_large?.source_url ||\r\n                            data.source_url || '';\r\n                        console.log(`[Vitrine] Seg \"${seg.slug}\" \u2192 media ID ${id}:`, segImgCache[seg.slug]);\r\n                    }\r\n                }\r\n            } catch(e) {\r\n                console.warn(`[Vitrine] Erro ao resolver imagem do segmento \"${seg.slug}\":`, e);\r\n            }\r\n        }));\r\n        console.log('[Vitrine] segImgCache final:', segImgCache);\r\n    }\r\n\r\n    \/* \u2550\u2550\u2550 FETCH MEDIA (produtos) \u2550\u2550\u2550 *\/\r\n    async function fetchAllMedia(ids) {\r\n        if (!ids.length) return;\r\n        const chunks = [];\r\n        for (let i = 0; i < ids.length; i += 100) chunks.push(ids.slice(i, i + 100));\r\n        for (const chunk of chunks) {\r\n            try {\r\n                const res = await fetch(`${BASE}\/wp-json\/wp\/v2\/media?include=${chunk.join(',')}&per_page=100`);\r\n                if (!res.ok) continue;\r\n                const list = await res.json();\r\n                list.forEach(m => {\r\n                    const s = m.media_details?.sizes || {};\r\n                    mediaCache[m.id] = {\r\n                        medium: s.medium_large?.source_url || s.medium?.source_url || m.source_url,\r\n                        full: m.source_url\r\n                    };\r\n                });\r\n            } catch(e) { console.warn('Erro imagens:', e); }\r\n        }\r\n    }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       HERO: Transi\u00e7\u00e3o imagem \u2194 branco\r\n       - Segmentos com imagem \u2192 mostra imagem\r\n       - Todos \/ categorias normais \u2192 branco\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    function setHeroBackground(slug) {\r\n        if (heroTransitionTimer) clearTimeout(heroTransitionTimer);\r\n\r\n        const imgUrl    = segImgCache[slug];\r\n        const isSegment = segmentCats.some(s => s.slug === slug);\r\n        const showImage = isSegment && !!imgUrl;\r\n\r\n        if (showImage) {\r\n            const seg = segmentCats.find(s => s.slug === slug);\r\n            const preload = new Image();\r\n            preload.onload  = () => doImageIn(imgUrl, seg);\r\n            preload.onerror = () => doImageIn(imgUrl, seg);\r\n            preload.src = imgUrl;\r\n            animateHeroText(seg ? seg.name : '', 'Segmento selecionado \u2014 filtrando produtos');\r\n        } else {\r\n            doWhiteIn(slug);\r\n        }\r\n    }\r\n\r\n    function doImageIn(imgUrl, seg) {\r\n        \/\/ Reseta imagem sem transi\u00e7\u00e3o\r\n        heroImg.style.transition = 'none';\r\n        heroImg.style.opacity    = '0';\r\n        heroImg.style.transform  = 'scale(1.07)';\r\n        heroImg.src = imgUrl;\r\n\r\n        \/\/ Overlay leve sobre a imagem\r\n        heroOverlay.classList.add('has-img');\r\n\r\n        \/\/ For\u00e7a reflow\r\n        void heroImg.offsetHeight;\r\n\r\n        \/\/ Fade in suave com leve dezoom\r\n        heroImg.style.transition = 'opacity 1.1s cubic-bezier(0.4,0,0.2,1), transform 1.4s cubic-bezier(0.4,0,0.2,1)';\r\n        heroImg.style.opacity    = '1';\r\n        heroImg.style.transform  = 'scale(1)';\r\n    }\r\n\r\n    function doWhiteIn(slug) {\r\n        \/\/ Fade out da imagem\r\n        heroImg.style.transition = 'opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.9s cubic-bezier(0.4,0,0.2,1)';\r\n        heroImg.style.opacity    = '0';\r\n        heroImg.style.transform  = 'scale(1.04)';\r\n        heroOverlay.classList.remove('has-img');\r\n\r\n        heroTransitionTimer = setTimeout(() => {\r\n            heroImg.src = '';\r\n            heroImg.style.transform = 'scale(1.07)';\r\n        }, 750);\r\n\r\n        \/\/ Texto padr\u00e3o conforme contexto\r\n        const isNormalCat = normalCats.some(c => c.slug === slug);\r\n        if (isNormalCat) {\r\n            const cat = normalCats.find(c => c.slug === slug);\r\n            animateHeroText(cat ? cat.name : 'Produtos', 'Filtrando por categoria');\r\n        } else {\r\n            animateHeroText('Explore nossos Produtos', 'Filtre por categoria ou segmento de mercado');\r\n        }\r\n    }\r\n\r\n    function animateHeroText(title, subtitle) {\r\n        \/\/ Fade out\r\n        heroTitle.style.opacity    = '0';\r\n        heroTitle.style.transform  = 'translateY(6px)';\r\n        heroSubtitle.style.opacity = '0';\r\n        heroSubtitle.style.transform = 'translateY(6px)';\r\n\r\n        setTimeout(() => {\r\n            heroTitle.textContent    = title;\r\n            heroSubtitle.textContent = subtitle;\r\n            \/\/ Fade in\r\n            heroTitle.style.transition    = 'opacity 0.5s ease, transform 0.5s ease';\r\n            heroSubtitle.style.transition = 'opacity 0.5s ease 0.08s, transform 0.5s ease 0.08s';\r\n            heroTitle.style.opacity    = '1';\r\n            heroTitle.style.transform  = 'translateY(0)';\r\n            heroSubtitle.style.opacity = '1';\r\n            heroSubtitle.style.transform = 'translateY(0)';\r\n        }, 220);\r\n    }\r\n\r\n    \/* \u2550\u2550\u2550 PARSE CONTENT \u2550\u2550\u2550 *\/\r\n    function parseContent(html) {\r\n        const div = document.createElement('div');\r\n        div.innerHTML = html;\r\n        const ps = div.querySelectorAll('p');\r\n        let description = '';\r\n        if (ps.length >= 2) description = ps[1].textContent.replace(\/;\\s*\/g, '. ').trim();\r\n        return { description };\r\n    }\r\n\r\n    \/* \u2550\u2550\u2550 CATEGORY HELPERS \u2550\u2550\u2550 *\/\r\n    function getCatSlugs(product) {\r\n        return (product.class_list || [])\r\n            .filter(c => c.startsWith('tipo_de_produto-'))\r\n            .map(c => c.replace('tipo_de_produto-', ''));\r\n    }\r\n    function getCatName(product) {\r\n        const slugs = getCatSlugs(product);\r\n        if (!slugs.length) return '';\r\n        const cat = [...normalCats, ...segmentCats].find(c => c.slug === slugs[0]);\r\n        return cat ? cat.name : '';\r\n    }\r\n\r\n    \/* \u2550\u2550\u2550 RENDER PILLS \u2550\u2550\u2550 *\/\r\n    function renderPills() {\r\n        filterAllRow.innerHTML = `\r\n            <button class=\"v-pill all-pill active\" data-filter=\"all\" onclick=\"window._vFilter('all',this)\">\r\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                    <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"\/>\r\n                    <rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"\/>\r\n                <\/svg>\r\n                <span>Todos os Produtos<\/span>\r\n                <span class=\"v-pill-count\">${allProducts.length}<\/span>\r\n            <\/button>`;\r\n\r\n        pillsCats.innerHTML = normalCats.length\r\n            ? normalCats.map(cat => `\r\n                <button class=\"v-pill\" data-filter=\"${cat.slug}\" onclick=\"window._vFilter('${cat.slug}',this)\">\r\n                    <span>${cat.name}<\/span>\r\n                    <span class=\"v-pill-count\">${cat.count}<\/span>\r\n                <\/button>`).join('')\r\n            : '<span style=\"font-size:12px;color:var(--v-text-muted);padding:4px 8px;\">Nenhuma categoria<\/span>';\r\n\r\n        pillsSegs.innerHTML = segmentCats.length\r\n            ? segmentCats.map(cat => `\r\n                <button class=\"v-pill\" data-filter=\"${cat.slug}\" onclick=\"window._vFilter('${cat.slug}',this)\">\r\n                    <span>${cat.name}<\/span>\r\n                    <span class=\"v-pill-count\">${cat.count}<\/span>\r\n                <\/button>`).join('')\r\n            : '<span style=\"font-size:12px;color:var(--v-text-muted);padding:4px 8px;\">Nenhum segmento<\/span>';\r\n\r\n        filterGrid.style.display = 'grid';\r\n\r\n        document.querySelectorAll('.v-pill').forEach((pill, i) => {\r\n            pill.style.opacity = '0';\r\n            pill.style.transform = 'translateY(8px)';\r\n            setTimeout(() => {\r\n                pill.style.transition = 'all 0.35s ease';\r\n                pill.style.opacity = '1';\r\n                pill.style.transform = 'translateY(0)';\r\n            }, i * 25);\r\n        });\r\n    }\r\n\r\n    \/* \u2550\u2550\u2550 RENDER GRID \u2550\u2550\u2550 *\/\r\n    function renderGrid() {\r\n        const filtered = getFiltered();\r\n        if (!filtered.length) {\r\n            grid.innerHTML = '';\r\n            emptyEl.classList.add('visible');\r\n            updateCount(0);\r\n            return;\r\n        }\r\n        emptyEl.classList.remove('visible');\r\n        grid.innerHTML = filtered.map((prod, i) => {\r\n            const media   = mediaCache[prod.featured_media] || {};\r\n            const imgSrc  = media.medium || media.full || '';\r\n            const title   = prod.title?.rendered || 'Sem t\u00edtulo';\r\n            const link    = prod.link || '#';\r\n            const catName = getCatName(prod);\r\n            const { description } = parseContent(prod.content?.rendered || '');\r\n            const whatsMsg = encodeURIComponent(`Ol\u00e1! Gostaria de saber mais sobre o produto: ${title}`);\r\n            return `\r\n                <div class=\"v-card v-visible\" style=\"animation-delay:${(i%15)*50}ms\">\r\n                    <div class=\"v-card-img-wrap\">\r\n                        ${catName ? `<div class=\"v-card-badge\">${catName}<\/div>` : ''}\r\n                        ${imgSrc\r\n                            ? `<img decoding=\"async\" class=\"v-card-img\" src=\"${imgSrc}\" alt=\"${title}\" loading=\"lazy\">`\r\n                            : `<div style=\"position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#b0bec5;font-size:12px;\">Sem imagem<\/div>`}\r\n                        <div class=\"v-card-overlay\">\r\n                            <a href=\"${link}\" class=\"v-card-overlay-btn\">\r\n                                <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                                    <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"\/><circle cx=\"12\" cy=\"12\" r=\"3\"\/>\r\n                                <\/svg>\r\n                                Ver Produto\r\n                            <\/a>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"v-card-body\">\r\n                        ${catName ? `<div class=\"v-card-cat\">${catName}<\/div>` : ''}\r\n                        <h3 class=\"v-card-title\">${title}<\/h3>\r\n                        ${description ? `<p class=\"v-card-desc\">${description}<\/p>` : ''}\r\n                        <div class=\"v-card-footer\">\r\n                            <a href=\"${link}\" class=\"v-btn-details\">\r\n                                <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                                    <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"\/><circle cx=\"12\" cy=\"12\" r=\"3\"\/>\r\n                                <\/svg>\r\n                                Ver Detalhes\r\n                            <\/a>\r\n                            <button class=\"v-btn-whatsapp\"\r\n                                onclick=\"window.open('https:\/\/wa.me\/${WHATSAPP}?text=${whatsMsg}','_blank')\"\r\n                                title=\"Falar no WhatsApp\">\r\n                                <i class=\"fa fa-whatsapp\"><\/i>\r\n                            <\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>`;\r\n        }).join('');\r\n        updateCount(filtered.length);\r\n    }\r\n\r\n    \/* \u2550\u2550\u2550 FILTER \u2550\u2550\u2550 *\/\r\n    function getFiltered() {\r\n        return allProducts.filter(prod => {\r\n            const slugs = getCatSlugs(prod);\r\n            const matchesCat    = activeFilter === 'all' || slugs.includes(activeFilter);\r\n            const matchesSearch = !searchTerm ||\r\n                (prod.title?.rendered || '').toLowerCase().includes(searchTerm) ||\r\n                (prod.content?.rendered || '').toLowerCase().includes(searchTerm);\r\n            return matchesCat && matchesSearch;\r\n        });\r\n    }\r\n\r\n    window._vFilter = function(slug, btn) {\r\n        activeFilter = slug;\r\n        document.querySelectorAll('.v-pill').forEach(p => p.classList.remove('active'));\r\n        if (btn) btn.classList.add('active');\r\n        setHeroBackground(slug);\r\n        renderGrid();\r\n    };\r\n\r\n    \/* \u2550\u2550\u2550 SEARCH \u2550\u2550\u2550 *\/\r\n    function setupSearch() {\r\n        let timer;\r\n        searchInput.addEventListener('input', function() {\r\n            clearTimeout(timer);\r\n            timer = setTimeout(() => { searchTerm = this.value.trim().toLowerCase(); renderGrid(); }, 200);\r\n        });\r\n        searchInput.addEventListener('keydown', function(e) {\r\n            if (e.key === 'Escape') { this.value = ''; searchTerm = ''; renderGrid(); }\r\n        });\r\n    }\r\n\r\n    \/* \u2550\u2550\u2550 COUNTER \u2550\u2550\u2550 *\/\r\n    function updateCount(n) {\r\n        countEl.style.transform = 'scale(1.4)';\r\n        setTimeout(() => { countEl.textContent = n; countEl.style.transform = 'scale(1)'; }, 150);\r\n    }\r\n\r\n    init();\r\n})();\r\n<\/script>\r\n<\/div>\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>CAT\u00c1LOGO Explore nosso Cat\u00e1logo Filtre por categoria ou segmento de mercado 0 produtos Carregando filtros&#8230; Categorias Segmentos \ud83d\udd0d Nenhum produto encontrado Tente outro filtro ou termo de busca<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-605","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sitexis.com.br\/inovaco\/wp-json\/wp\/v2\/pages\/605","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sitexis.com.br\/inovaco\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sitexis.com.br\/inovaco\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sitexis.com.br\/inovaco\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sitexis.com.br\/inovaco\/wp-json\/wp\/v2\/comments?post=605"}],"version-history":[{"count":48,"href":"https:\/\/sitexis.com.br\/inovaco\/wp-json\/wp\/v2\/pages\/605\/revisions"}],"predecessor-version":[{"id":867,"href":"https:\/\/sitexis.com.br\/inovaco\/wp-json\/wp\/v2\/pages\/605\/revisions\/867"}],"wp:attachment":[{"href":"https:\/\/sitexis.com.br\/inovaco\/wp-json\/wp\/v2\/media?parent=605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}