{"id":860,"date":"2026-04-09T17:03:18","date_gmt":"2026-04-09T20:03:18","guid":{"rendered":"https:\/\/sitexis.com.br\/inovaco\/?page_id=860"},"modified":"2026-04-10T09:46:26","modified_gmt":"2026-04-10T12:46:26","slug":"catalogo","status":"publish","type":"page","link":"https:\/\/sitexis.com.br\/inovaco\/catalogo\/","title":{"rendered":"Cat\u00e1logo"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"860\" class=\"elementor elementor-860\" 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-flex e-con-boxed e-con e-parent\" data-id=\"22eb3e2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\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\r\n<style>\r\n*{box-sizing:border-box;margin:0;padding:0}\r\n:root{\r\n  --bg:#f5f7fb;--white:#fff;--blue:#1a5fa8;--blue2:#154d8a;\r\n  --blue-lt:#e8f0fb;--blue-md:#b8cff0;--text:#1e2d40;--muted:#6b82a0;\r\n  --border:rgba(26,95,168,0.12);--radius:10px;--trans:0.25s ease;\r\n}\r\nbody{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh}\r\n.header{background:var(--white);border-bottom:1px solid var(--border);padding:20px 32px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 1px 8px rgba(26,95,168,0.07)}\r\n.header h1{font-size:20px;font-weight:700;color:var(--blue);letter-spacing:0.5px;text-transform:uppercase;font-family:'Barlow Condensed',sans-serif}\r\n.count-badge{background:var(--blue-lt);border:1px solid var(--blue-md);color:var(--muted);font-size:12px;padding:6px 14px;border-radius:20px}\r\n.count-badge strong{color:var(--blue)}\r\n.wrap{display:flex;min-height:calc(100vh - 65px)}\r\n.sidebar{width:220px;min-width:220px;background:var(--white);border-right:1px solid var(--border);padding:24px 0;position:sticky;top:65px;height:calc(100vh - 65px);overflow-y:auto}\r\n.sidebar-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);padding:0 20px 12px;font-weight:500}\r\n.filter-btn{display:flex;align-items:center;gap:10px;width:100%;padding:11px 20px;background:transparent;border:none;border-left:3px solid transparent;color:var(--muted);font-size:13px;cursor:pointer;transition:var(--trans);text-align:left}\r\n.filter-btn:hover{color:var(--blue);background:var(--blue-lt);border-left-color:var(--blue-md)}\r\n.filter-btn.active{color:var(--blue);background:var(--blue-lt);border-left-color:var(--blue);font-weight:600}\r\n.dot{width:7px;height:7px;border-radius:50%;background:var(--blue-md);flex-shrink:0}\r\n.filter-btn.active .dot{background:var(--blue)}\r\n.fcount{margin-left:auto;font-size:11px;background:#eef2f8;color:var(--muted);padding:2px 7px;border-radius:8px}\r\n.filter-btn.active .fcount{background:var(--blue-md);color:var(--blue2)}\r\n.divider{height:1px;background:var(--border);margin:12px 20px}\r\n.main{flex:1;padding:28px 32px;overflow-y:auto}\r\n.search-wrap{position:relative;margin-bottom:28px}\r\n.search-wrap svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);opacity:0.4;color:var(--blue)}\r\n.search-input{width:100%;max-width:420px;background:var(--white);border:1px solid var(--blue-md);color:var(--text);font-size:13px;padding:11px 16px 11px 42px;border-radius:30px;outline:none;transition:var(--trans)}\r\n.search-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,95,168,0.1)}\r\n.search-input::placeholder{color:var(--muted)}\r\n.segment{margin-bottom:40px}\r\n.segment-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}\r\n.segment-head h2{font-size:16px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:1px;font-family:'Barlow Condensed',sans-serif;white-space:nowrap}\r\n.seg-line{flex:1;height:1px;background:linear-gradient(to right,var(--blue-md),transparent)}\r\n.seg-count{font-size:11px;color:var(--muted);background:var(--blue-lt);border:1px solid var(--blue-md);padding:2px 8px;border-radius:10px;white-space:nowrap}\r\n.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}\r\n.gitem{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;cursor:pointer;background:var(--blue-lt)}\r\n.gitem img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.35s ease}\r\n.gitem:hover img{transform:scale(1.07)}\r\n.gitem-overlay{position:absolute;inset:0;background:rgba(26,95,168,0.45);opacity:0;transition:opacity 0.25s;display:flex;align-items:center;justify-content:center}\r\n.gitem:hover .gitem-overlay{opacity:1}\r\n.zoom-icon{width:40px;height:40px;border:2px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;transform:scale(0.6);transition:transform 0.3s cubic-bezier(.34,1.56,.64,1)}\r\n.gitem:hover .zoom-icon{transform:scale(1)}\r\n.no-img-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:11px;flex-direction:column;gap:6px}\r\n.skel-card{aspect-ratio:1;border-radius:8px;background:linear-gradient(90deg,#eef2f8 25%,#dce6f5 50%,#eef2f8 75%);background-size:600px 100%;animation:shim 1.4s infinite}\r\n@keyframes shim{0%{background-position:-600px 0}100%{background-position:600px 0}}\r\n.empty{grid-column:1\/-1;text-align:center;padding:60px 0;color:var(--muted)}\r\n.lb-bg{position:fixed;inset:0;background:rgba(10,20,40,0.92);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.3s}\r\n.lb-bg.open{opacity:1;pointer-events:all}\r\n.lb-box{position:relative;max-width:90vw;max-height:90vh;display:flex;align-items:center;justify-content:center}\r\n.lb-img{max-width:88vw;max-height:85vh;object-fit:contain;border-radius:6px;display:block;transition:opacity 0.2s}\r\n.lb-img.fade{opacity:0}\r\n.lb-close{position:fixed;top:18px;right:18px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.3);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.2s}\r\n.lb-close:hover{background:rgba(255,255,255,0.25)}\r\n.lb-nav{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.2s;font-size:18px}\r\n.lb-nav:hover{background:rgba(255,255,255,0.25)}\r\n.lb-prev{left:16px}\r\n.lb-next{right:16px}\r\n.lb-counter{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,0.6);font-size:13px;letter-spacing:1px}\r\n.lb-title{position:fixed;bottom:50px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,0.85);font-size:14px;text-align:center;max-width:80vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\r\n.lb-nav.hidden,.lb-prev.hidden,.lb-next.hidden{opacity:0;pointer-events:none}\r\n@media(max-width:600px){\r\n  .sidebar{width:100%;min-width:unset;height:auto;position:static;display:flex;flex-wrap:wrap;padding:12px;gap:6px;border-right:none;border-bottom:1px solid var(--border)}\r\n  .sidebar-label{width:100%;padding:0 0 4px}\r\n  .divider{display:none}\r\n  .filter-btn{width:auto;padding:7px 14px;border-left:none;border-radius:20px;border:1px solid var(--border)}\r\n  .filter-btn.active{border-color:var(--blue)}\r\n  .fcount{display:none}\r\n  .wrap{flex-direction:column}\r\n  .gallery{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:7px}\r\n}\r\n<\/style>\r\n<h2 class=\"sr-only\" style=\"position:absolute;width:1px;height:1px;overflow:hidden\">Cat\u00e1logo de produtos organizado por segmento<\/h2>\r\n\r\n<header class=\"header\">\r\n  <h1>Cat\u00e1logo<\/h1>\r\n  <div class=\"count-badge\"><strong id=\"count-display\">\u2013<\/strong> produto(s)<\/div>\r\n<\/header>\r\n\r\n<div class=\"wrap\">\r\n  <aside class=\"sidebar\" id=\"sidebar\">\r\n    <div class=\"sidebar-label\">Segmentos<\/div>\r\n    <button class=\"filter-btn active\" data-cat=\"all\">\r\n      <span class=\"dot\"><\/span>Todo o cat\u00e1logo<span class=\"fcount\" id=\"count-all\">0<\/span>\r\n    <\/button>\r\n    <div class=\"divider\"><\/div>\r\n    <div id=\"cat-list\"><\/div>\r\n  <\/aside>\r\n  <main class=\"main\">\r\n    <div class=\"search-wrap\">\r\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.35-4.35\"\/><\/svg>\r\n      <input class=\"search-input\" type=\"search\" placeholder=\"Buscar produto...\" id=\"search-input\">\r\n    <\/div>\r\n    <div id=\"gallery-root\"><\/div>\r\n  <\/main>\r\n<\/div>\r\n\r\n<div class=\"lb-bg\" id=\"lb-bg\">\r\n  <div class=\"lb-box\">\r\n    <img decoding=\"async\" class=\"lb-img\" id=\"lb-img\" src=\"\" alt=\"\">\r\n  <\/div>\r\n  <button class=\"lb-close\" id=\"lb-close\" aria-label=\"Fechar\">\r\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M18 6 6 18M6 6l12 12\"\/><\/svg>\r\n  <\/button>\r\n  <button class=\"lb-nav lb-prev\" id=\"lb-prev\" aria-label=\"Anterior\">&#8592;<\/button>\r\n  <button class=\"lb-nav lb-next\" id=\"lb-next\" aria-label=\"Pr\u00f3xima\">&#8594;<\/button>\r\n  <div class=\"lb-title\" id=\"lb-title\"><\/div>\r\n  <div class=\"lb-counter\" id=\"lb-counter\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n  const API = 'https:\/\/sitexis.com.br\/inovaco\/wp-json\/catalogo\/catalogo?_embed&per_page=100';\r\n  let allProducts = [];\r\n  let activeCategory = 'all';\r\n  let searchQuery = '';\r\n  let lbImages = [];\r\n  let lbIndex = 0;\r\n\r\n  function stripHtml(h){const d=document.createElement('div');d.innerHTML=h;return d.textContent||''}\r\n  function getMediaUrl(item){try{return item._embedded['wp:featuredmedia'][0].source_url}catch(e){return null}}\r\n  function getCategories(item){\r\n    try{const terms=item._embedded['wp:term'];for(const g of terms){if(Array.isArray(g)&&g.length&&g[0].taxonomy==='categoria_catalogo')return g}}catch(e){}\r\n    return (item.class_list||[]).filter(c=>c.startsWith('categoria_catalogo-')&&c!=='categoria_catalogo-uncategorized').map(c=>({slug:c.replace('categoria_catalogo-',''),name:c.replace('categoria_catalogo-','').replace(\/-\/g,' ')}));\r\n  }\r\n  function cap(s){return s.charAt(0).toUpperCase()+s.slice(1)}\r\n\r\n  function buildSidebar(products){\r\n    const catMap={};\r\n    products.forEach(p=>{getCategories(p).forEach(c=>{const k=c.slug||c.name;if(!catMap[k])catMap[k]={name:c.name||c.slug,slug:k,count:0};catMap[k].count++})});\r\n    document.getElementById('count-all').textContent=products.length;\r\n    const list=document.getElementById('cat-list');\r\n    list.innerHTML='';\r\n    Object.values(catMap).sort((a,b)=>b.count-a.count).forEach(cat=>{\r\n      const btn=document.createElement('button');\r\n      btn.className='filter-btn';btn.dataset.cat=cat.slug;\r\n      btn.innerHTML=`<span class=\"dot\"><\/span>${cap(cat.name)}<span class=\"fcount\">${cat.count}<\/span>`;\r\n      btn.addEventListener('click',()=>setCategory(cat.slug,cap(cat.name)));\r\n      list.appendChild(btn);\r\n    });\r\n  }\r\n\r\n  function applyFilters(){\r\n    let filtered=allProducts;\r\n    if(activeCategory!=='all')filtered=filtered.filter(p=>getCategories(p).some(c=>(c.slug||c.name)===activeCategory));\r\n    if(searchQuery){const q=searchQuery.toLowerCase();filtered=filtered.filter(p=>(p.title.rendered||'').toLowerCase().includes(q)||stripHtml(p.content.rendered||'').toLowerCase().includes(q));}\r\n    renderGallery(filtered);\r\n  }\r\n\r\n  function setCategory(slug,name){\r\n    activeCategory=slug;\r\n    document.querySelectorAll('.filter-btn').forEach(b=>b.classList.toggle('active',b.dataset.cat===slug));\r\n    applyFilters();\r\n  }\r\n\r\n  function renderGallery(products){\r\n    const root=document.getElementById('gallery-root');\r\n    root.innerHTML='';\r\n    document.getElementById('count-display').textContent=products.length;\r\n    if(!products.length){root.innerHTML='<div class=\"empty\">Nenhum produto encontrado.<\/div>';return;}\r\n\r\n    if(activeCategory==='all'&&!searchQuery){\r\n      const catMap={};\r\n      const catOrder=[];\r\n      products.forEach(p=>{\r\n        const cats=getCategories(p);\r\n        const key=cats.length?(cats[0].slug||cats[0].name):'outros';\r\n        const name=cats.length?cap(cats[0].name||cats[0].slug):'Outros';\r\n        if(!catMap[key]){catMap[key]={name,items:[]};catOrder.push(key);}\r\n        catMap[key].items.push(p);\r\n      });\r\n      catOrder.forEach(key=>renderSegment(catMap[key].name,catMap[key].items,root));\r\n    } else {\r\n      renderSegment(null,products,root);\r\n    }\r\n  }\r\n\r\n  function renderSegment(segName, products, container){\r\n    const seg=document.createElement('div');\r\n    seg.className='segment';\r\n\r\n    if(segName){\r\n      const head=document.createElement('div');\r\n      head.className='segment-head';\r\n      head.innerHTML=`<h2>${segName}<\/h2><div class=\"seg-line\"><\/div><span class=\"seg-count\">${products.length}<\/span>`;\r\n      seg.appendChild(head);\r\n    }\r\n\r\n    const grid=document.createElement('div');\r\n    grid.className='gallery';\r\n\r\n    const segImgs=products.map(p=>({url:getMediaUrl(p),title:p.title.rendered}));\r\n\r\n    products.forEach((p,i)=>{\r\n      const imgUrl=getMediaUrl(p);\r\n      const title=p.title.rendered;\r\n      const item=document.createElement('div');\r\n      item.className='gitem';\r\n      if(imgUrl){\r\n        item.innerHTML=`<img decoding=\"async\" src=\"${imgUrl}\" alt=\"${title}\" loading=\"lazy\"><div class=\"gitem-overlay\"><div class=\"zoom-icon\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.35-4.35\"\/><path d=\"M11 8v6M8 11h6\" stroke-width=\"2\"\/><\/svg><\/div><\/div>`;\r\n      } else {\r\n        item.innerHTML=`<div class=\"no-img-ph\"><svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><circle cx=\"9\" cy=\"9\" r=\"2\"\/><path d=\"m21 15-5-5L5 21\"\/><\/svg><span>Sem imagem<\/span><\/div>`;\r\n      }\r\n      item.addEventListener('click',()=>openLightbox(segImgs,i));\r\n      grid.appendChild(item);\r\n    });\r\n\r\n    seg.appendChild(grid);\r\n    container.appendChild(seg);\r\n  }\r\n\r\n  function openLightbox(images,idx){\r\n    lbImages=images;lbIndex=idx;\r\n    showLbImage();\r\n    document.getElementById('lb-bg').classList.add('open');\r\n    document.body.style.overflow='hidden';\r\n  }\r\n  function closeLightbox(){\r\n    document.getElementById('lb-bg').classList.remove('open');\r\n    document.body.style.overflow='';\r\n  }\r\n  function showLbImage(){\r\n    const cur=lbImages[lbIndex];\r\n    const img=document.getElementById('lb-img');\r\n    img.classList.add('fade');\r\n    setTimeout(()=>{\r\n      img.src=cur.url||'';\r\n      img.alt=cur.title||'';\r\n      img.classList.remove('fade');\r\n    },150);\r\n    document.getElementById('lb-title').textContent=cur.title||'';\r\n    document.getElementById('lb-counter').textContent=`${lbIndex+1} \/ ${lbImages.length}`;\r\n    document.getElementById('lb-prev').classList.toggle('hidden',lbIndex===0);\r\n    document.getElementById('lb-next').classList.toggle('hidden',lbIndex===lbImages.length-1);\r\n  }\r\n  function lbGo(dir){\r\n    lbIndex=Math.max(0,Math.min(lbImages.length-1,lbIndex+dir));\r\n    showLbImage();\r\n  }\r\n\r\n  document.getElementById('lb-close').addEventListener('click',closeLightbox);\r\n  document.getElementById('lb-bg').addEventListener('click',e=>{if(e.target===document.getElementById('lb-bg'))closeLightbox();});\r\n  document.getElementById('lb-prev').addEventListener('click',()=>lbGo(-1));\r\n  document.getElementById('lb-next').addEventListener('click',()=>lbGo(1));\r\n  document.addEventListener('keydown',e=>{\r\n    if(!document.getElementById('lb-bg').classList.contains('open'))return;\r\n    if(e.key==='Escape')closeLightbox();\r\n    if(e.key==='ArrowLeft')lbGo(-1);\r\n    if(e.key==='ArrowRight')lbGo(1);\r\n  });\r\n  document.querySelector('[data-cat=\"all\"]').addEventListener('click',()=>setCategory('all','Todo o cat\u00e1logo'));\r\n  document.getElementById('search-input').addEventListener('input',function(){searchQuery=this.value.trim();applyFilters();});\r\n\r\n  async function fetchCatalog(){\r\n    const root=document.getElementById('gallery-root');\r\n    root.innerHTML=`<div class=\"gallery\">${Array(12).fill('<div class=\"skel-card\"><\/div>').join('')}<\/div>`;\r\n    try{\r\n      const res=await fetch(API,{headers:{'Accept':'application\/json'}});\r\n      if(!res.ok)throw new Error('HTTP '+res.status);\r\n      allProducts=await res.json();\r\n      buildSidebar(allProducts);\r\n      renderGallery(allProducts);\r\n    }catch(err){\r\n      root.innerHTML='<div class=\"empty\">Erro ao carregar cat\u00e1logo. Verifique sua conex\u00e3o.<\/div>';\r\n      document.getElementById('count-display').textContent='0';\r\n    }\r\n  }\r\n  fetchCatalog();\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\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 Cat\u00e1logo de produtos organizado por segmento Cat\u00e1logo \u2013 produto(s) Segmentos Todo o cat\u00e1logo0 &#8592; &#8594;<\/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-860","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sitexis.com.br\/inovaco\/wp-json\/wp\/v2\/pages\/860","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=860"}],"version-history":[{"count":13,"href":"https:\/\/sitexis.com.br\/inovaco\/wp-json\/wp\/v2\/pages\/860\/revisions"}],"predecessor-version":[{"id":936,"href":"https:\/\/sitexis.com.br\/inovaco\/wp-json\/wp\/v2\/pages\/860\/revisions\/936"}],"wp:attachment":[{"href":"https:\/\/sitexis.com.br\/inovaco\/wp-json\/wp\/v2\/media?parent=860"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}