{"id":613,"date":"2026-04-08T16:55:12","date_gmt":"2026-04-08T19:55:12","guid":{"rendered":"https:\/\/sitexis.com.br\/infinity2\/?page_id=613"},"modified":"2026-04-08T17:12:08","modified_gmt":"2026-04-08T20:12:08","slug":"modelos","status":"publish","type":"page","link":"https:\/\/sitexis.com.br\/infinity2\/modelos\/","title":{"rendered":"Modelos"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"613\" class=\"elementor elementor-613\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-93fd562 e-flex e-con-boxed e-con e-parent\" data-id=\"93fd562\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f2f726e e-flex e-con-boxed e-con e-parent\" data-id=\"f2f726e\" data-element_type=\"container\" data-e-type=\"container\" id=\"modelos\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a3451e2 elementor-widget elementor-widget-html\" data-id=\"a3451e2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n  \/* ==========================================================================\r\n     VITRINE INFINITY COM FILTROS - LIGHT MODE (UNIQUE SCOPED CSS)\r\n     ========================================================================== *\/\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;500;700;800&display=swap');\r\n\r\n  \/* Base & Vari\u00e1veis isoladas *\/\r\n  .ifb-vit-section {\r\n    --ifb-vit-dark: #15181E !important;\r\n    --ifb-vit-cardbg: #ffffff !important; \/* Fundo Branco no card *\/\r\n    --ifb-vit-bg: #ffffff !important; \/* Fundo Branco na se\u00e7\u00e3o *\/\r\n    --ifb-vit-border: #e5e7eb !important; \/* Borda cinza clara *\/\r\n    --ifb-vit-text: #15181E !important; \/* Texto escuro *\/\r\n    --ifb-vit-muted: #666666 !important; \/* Texto secund\u00e1rio cinza *\/\r\n    --ifb-vit-orange: #E79917 !important; \/* Laranja da Marca *\/\r\n\r\n    background-color: var(--ifb-vit-bg) !important;\r\n    font-family: 'Roboto', sans-serif !important;\r\n    padding: 80px 20px !important;\r\n    width: 100% !important;\r\n    display: flex !important;\r\n    flex-direction: column !important;\r\n    align-items: center !important;\r\n    box-sizing: border-box !important;\r\n  }\r\n\r\n  .ifb-vit-section * {\r\n    box-sizing: border-box !important;\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n  }\r\n\r\n  \/* Cabe\u00e7alho *\/\r\n  .ifb-vit-header {\r\n    text-align: center !important;\r\n    margin-bottom: 25px !important;\r\n    width: 100% !important;\r\n  }\r\n\r\n  .ifb-vit-header h2 {\r\n    font-size: 38px !important;\r\n    font-weight: 800 !important;\r\n    margin-bottom: 12px !important;\r\n    display: flex !important;\r\n    align-items: center !important;\r\n    justify-content: center !important;\r\n    gap: 8px !important;\r\n    color: var(--ifb-vit-text) !important;\r\n    letter-spacing: -1px !important;\r\n  }\r\n\r\n  .ifb-vit-header h2 span {\r\n    color: var(--ifb-vit-orange) !important; \/* O \"&\" em Laranja *\/\r\n  }\r\n\r\n  .ifb-vit-header p {\r\n    color: var(--ifb-vit-muted) !important;\r\n    font-size: 16px !important;\r\n    font-weight: 400 !important;\r\n  }\r\n\r\n  \/* ==========================================================================\r\n     FILTROS DE CATEGORIA (BOT\u00d5ES)\r\n     ========================================================================== *\/\r\n  .ifb-vit-filters {\r\n    display: flex !important;\r\n    flex-wrap: wrap !important;\r\n    justify-content: center !important;\r\n    gap: 12px !important;\r\n    margin-bottom: 50px !important;\r\n    width: 100% !important;\r\n    max-width: 900px !important;\r\n  }\r\n\r\n  .ifb-vit-filter-btn {\r\n    background-color: transparent !important;\r\n    border: 1px solid var(--ifb-vit-border) !important;\r\n    color: var(--ifb-vit-muted) !important;\r\n    padding: 10px 22px !important;\r\n    border-radius: 50px !important;\r\n    font-size: 14px !important;\r\n    font-weight: 500 !important;\r\n    font-family: 'Roboto', sans-serif !important;\r\n    cursor: pointer !important;\r\n    transition: all 0.3s ease !important;\r\n    outline: none !important;\r\n  }\r\n\r\n  .ifb-vit-filter-btn:hover {\r\n    border-color: var(--ifb-vit-dark) !important;\r\n    color: var(--ifb-vit-dark) !important;\r\n  }\r\n\r\n  .ifb-vit-filter-btn.active {\r\n    background-color: var(--ifb-vit-orange) !important;\r\n    border-color: var(--ifb-vit-orange) !important;\r\n    color: #ffffff !important; \/* Texto branco no bot\u00e3o laranja ativo *\/\r\n    font-weight: 700 !important;\r\n    box-shadow: 0 4px 15px rgba(231, 153, 23, 0.3) !important; \/* Sombra Laranja *\/\r\n  }\r\n\r\n  \/* Grid *\/\r\n  .ifb-vit-grid {\r\n    display: grid !important;\r\n    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;\r\n    gap: 30px !important;\r\n    width: 100% !important;\r\n    max-width: 1200px !important;\r\n  }\r\n\r\n  \/* ==========================================================================\r\n     CARD DO PRODUTO\r\n     ========================================================================== *\/\r\n  @keyframes ifb-vit-fadein {\r\n    from { opacity: 0; transform: translateY(15px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n  }\r\n\r\n  .ifb-vit-card {\r\n    background-color: var(--ifb-vit-cardbg) !important;\r\n    border: 1px solid var(--ifb-vit-border) !important;\r\n    box-shadow: 0 8px 24px rgba(21, 24, 30, 0.05) !important; \/* Sombra suave para fundo claro *\/\r\n    border-radius: 20px !important;\r\n    display: flex !important;\r\n    flex-direction: column !important;\r\n    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;\r\n    overflow: hidden !important;\r\n    position: relative !important;\r\n    animation: ifb-vit-fadein 0.5s ease forwards !important; \r\n  }\r\n\r\n  .ifb-vit-card:hover {\r\n    transform: translateY(-8px) !important;\r\n    box-shadow: 0 16px 40px rgba(21, 24, 30, 0.12) !important;\r\n    border-color: var(--ifb-vit-orange) !important; \/* Borda laranja no hover *\/\r\n  }\r\n\r\n  \/* \u00c1rea da Imagem *\/\r\n  .ifb-vit-image-wrap {\r\n    position: relative !important;\r\n    background-color: #ffffff !important;\r\n    height: 280px !important;\r\n    display: flex !important;\r\n    align-items: center !important;\r\n    justify-content: center !important;\r\n    padding: 30px !important;\r\n    border-bottom: 1px solid var(--ifb-vit-border) !important;\r\n    overflow: hidden !important;\r\n  }\r\n\r\n  .ifb-vit-image-wrap img {\r\n    width: 100% !important;\r\n    height: 100% !important;\r\n    object-fit: contain !important;\r\n    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;\r\n    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.05)) !important;\r\n  }\r\n\r\n  .ifb-vit-card:hover .ifb-vit-image-wrap img {\r\n    transform: scale(1.08) translateY(-5px) !important;\r\n  }\r\n\r\n  \/* Badges *\/\r\n  .ifb-vit-badge {\r\n    position: absolute !important;\r\n    top: 16px !important;\r\n    padding: 6px 14px !important;\r\n    border-radius: 30px !important;\r\n    font-size: 11px !important;\r\n    font-weight: 800 !important;\r\n    text-transform: uppercase !important;\r\n    color: #fff !important;\r\n    z-index: 2 !important;\r\n    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;\r\n    letter-spacing: 0.5px !important;\r\n  }\r\n\r\n  .ifb-vit-badge-off {\r\n    right: 16px !important; \r\n    background-color: var(--ifb-vit-orange) !important; \/* Laranja *\/\r\n  }\r\n\r\n  \/* \u00c1rea de Informa\u00e7\u00f5es *\/\r\n  .ifb-vit-info {\r\n    padding: 25px 20px !important;\r\n    display: flex !important;\r\n    flex-direction: column !important;\r\n    flex-grow: 1 !important;\r\n  }\r\n\r\n  .ifb-vit-info h3 {\r\n    font-size: 19px !important;\r\n    font-weight: 700 !important;\r\n    margin-bottom: 16px !important;\r\n    line-height: 1.3 !important;\r\n    color: var(--ifb-vit-text) !important;\r\n    text-align: left !important;\r\n    transition: color 0.3s ease !important;\r\n  }\r\n  \r\n  .ifb-vit-card:hover .ifb-vit-info h3 {\r\n    color: var(--ifb-vit-orange) !important;\r\n  }\r\n\r\n  \/* Box de Pre\u00e7o *\/\r\n  .ifb-vit-price-box {\r\n    margin-bottom: 16px !important;\r\n    display: flex !important;\r\n    flex-direction: column !important;\r\n    align-items: flex-start !important;\r\n    background-color: rgba(231, 153, 23, 0.05) !important;\r\n    padding: 12px 16px !important;\r\n    border-radius: 12px !important;\r\n    border: 1px solid rgba(231, 153, 23, 0.1) !important;\r\n  }\r\n\r\n  .ifb-vit-old-price {\r\n    display: flex !important;\r\n    align-items: center !important;\r\n    gap: 8px !important;\r\n    font-size: 13px !important;\r\n    color: var(--ifb-vit-muted) !important;\r\n    margin-bottom: 2px !important;\r\n  }\r\n\r\n  .ifb-vit-old-price del {\r\n    text-decoration: line-through !important;\r\n  }\r\n\r\n  .ifb-vit-old-price .ifb-vit-discount-percent {\r\n    color: var(--ifb-vit-orange) !important; \r\n    font-weight: 700 !important;\r\n  }\r\n\r\n  .ifb-vit-current-price {\r\n    font-size: 24px !important;\r\n    font-weight: 800 !important;\r\n    color: var(--ifb-vit-dark) !important; \/* Pre\u00e7o principal em escuro no light mode *\/\r\n    line-height: 1 !important;\r\n  }\r\n\r\n  .ifb-vit-current-price span {\r\n    font-size: 14px !important;\r\n    font-weight: 500 !important;\r\n    color: var(--ifb-vit-muted) !important;\r\n    margin-left: 2px !important;\r\n  }\r\n\r\n  \/* Extras *\/\r\n  .ifb-vit-volume {\r\n    color: var(--ifb-vit-orange) !important;\r\n    font-size: 13px !important;\r\n    font-weight: 700 !important;\r\n    margin-bottom: 6px !important;\r\n    display: flex !important;\r\n    align-items: center !important;\r\n    gap: 5px !important;\r\n    text-align: left !important;\r\n  }\r\n\r\n  .ifb-vit-shipping {\r\n    color: var(--ifb-vit-muted) !important;\r\n    font-size: 12px !important;\r\n    margin-bottom: 25px !important;\r\n    text-align: left !important;\r\n  }\r\n\r\n  \/* ==========================================================================\r\n     BOT\u00c3O SHINE (PADR\u00c3O INFINITY)\r\n     ========================================================================== *\/\r\n  .ifb-vit-btn-wrapper {\r\n    position: relative !important;\r\n    display: block !important;\r\n    margin-top: auto !important;\r\n    width: 100% !important;\r\n  }\r\n\r\n  .ifb-vit-btn-shine {\r\n    position: relative !important;\r\n    margin: 0 !important;\r\n    padding: 16px 0 !important;\r\n    width: 100% !important;\r\n    outline: none !important;\r\n    text-decoration: none !important;\r\n    display: flex !important;\r\n    justify-content: center !important;\r\n    align-items: center !important;\r\n    cursor: pointer !important;\r\n    text-transform: uppercase !important;\r\n    background-color: var(--ifb-vit-dark) !important;\r\n    border: 1px solid var(--ifb-vit-dark) !important;\r\n    border-radius: 12px !important;\r\n    color: #fff !important;\r\n    font-weight: 500 !important;\r\n    font-family: 'Roboto', sans-serif !important;\r\n    z-index: 0 !important;\r\n    overflow: hidden !important;\r\n    transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1) !important;\r\n    box-shadow: 0 4px 15px rgba(21, 24, 30, 0.15) !important;\r\n  }\r\n\r\n  .ifb-vit-btn-shine span {\r\n    color: #fff !important;\r\n    font-size: 14px !important;\r\n    font-weight: 700 !important;\r\n    letter-spacing: 0.7px !important;\r\n    z-index: 20 !important;\r\n  }\r\n\r\n  .ifb-vit-btn-shine:hover {\r\n    background-color: var(--ifb-vit-orange) !important;\r\n    border-color: var(--ifb-vit-orange) !important;\r\n    box-shadow: 0 8px 25px rgba(231, 153, 23, 0.25) !important;\r\n    transform: translateY(-2px) !important;\r\n  }\r\n\r\n  @keyframes ifb-vit-rotate {\r\n    0% { transform: rotate(0deg); }\r\n    25% { transform: rotate(3deg); }\r\n    50% { transform: rotate(-3deg); }\r\n    75% { transform: rotate(1deg); }\r\n    100% { transform: rotate(0deg); }\r\n  }\r\n\r\n  .ifb-vit-btn-shine:after {\r\n    background: var(--ifb-vit-orange) !important;\r\n    content: \"\" !important;\r\n    height: 155px !important;\r\n    left: -75px !important;\r\n    opacity: 0.8 !important;\r\n    position: absolute !important;\r\n    top: -50px !important;\r\n    transform: rotate(35deg) !important;\r\n    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1) !important;\r\n    width: 50px !important;\r\n    z-index: -10 !important;\r\n  }\r\n\r\n  .ifb-vit-btn-shine:hover:after {\r\n    left: 120% !important;\r\n  }\r\n\r\n  \/* ==========================================================================\r\n     SKELETON LOADING (CLARO) & ERROS\r\n     ========================================================================== *\/\r\n  .ifb-vit-skeleton {\r\n    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;\r\n    background-size: 200% 100% !important;\r\n    animation: ifb-vit-shimmer 1.5s infinite !important;\r\n    border-radius: 8px !important;\r\n  }\r\n\r\n  @keyframes ifb-vit-shimmer {\r\n    0% { background-position: -200% 0; }\r\n    100% { background-position: 200% 0; }\r\n  }\r\n\r\n  .ifb-vit-skeleton-card {\r\n    background-color: var(--ifb-vit-cardbg) !important;\r\n    border: 1px solid var(--ifb-vit-border) !important;\r\n    border-radius: 20px !important;\r\n    overflow: hidden !important;\r\n  }\r\n\r\n  .ifb-vit-skeleton-img { height: 280px !important; width: 100% !important; border-radius: 0 !important; }\r\n  .ifb-vit-skeleton-text { height: 20px !important; margin: 24px 24px 16px 24px !important; width: 70% !important; }\r\n  .ifb-vit-skeleton-price { height: 60px !important; margin: 0 24px 16px 24px !important; border-radius: 12px !important; }\r\n  .ifb-vit-skeleton-btn { height: 50px !important; margin: 20px 24px 24px 24px !important; border-radius: 12px !important; }\r\n\r\n  .ifb-vit-error {\r\n    text-align: center !important;\r\n    padding: 60px 20px !important;\r\n    color: var(--ifb-vit-muted) !important;\r\n    font-size: 15px !important;\r\n    width: 100% !important;\r\n    grid-column: 1 \/ -1 !important;\r\n    border-radius: 20px !important;\r\n    border: 1px dashed var(--ifb-vit-border) !important;\r\n  }\r\n\r\n  @media (max-width: 600px) {\r\n    .ifb-vit-grid { grid-template-columns: 1fr !important; }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"ifb-vit-section\" id=\"ifb-vit-section\">\r\n\r\n  <div class=\"ifb-vit-header\">\r\n    <h2>Modelos <span>&<\/span> Cores<\/h2>\r\n    <p>Confira todas as op\u00e7\u00f5es de bon\u00e9s dispon\u00edveis para personaliza\u00e7\u00e3o<\/p>\r\n  <\/div>\r\n\r\n  <div class=\"ifb-vit-filters\" id=\"ifb-vit-filters\">\r\n    <button class=\"ifb-vit-filter-btn active\">Carregando categorias...<\/button>\r\n  <\/div>\r\n\r\n  <div class=\"ifb-vit-grid\" id=\"ifb-vit-grid\">\r\n    <div class=\"ifb-vit-skeleton-card\"><div class=\"ifb-vit-skeleton ifb-vit-skeleton-img\"><\/div><div class=\"ifb-vit-skeleton ifb-vit-skeleton-text\"><\/div><div class=\"ifb-vit-skeleton ifb-vit-skeleton-price\"><\/div><div class=\"ifb-vit-skeleton ifb-vit-skeleton-btn\"><\/div><\/div>\r\n    <div class=\"ifb-vit-skeleton-card\"><div class=\"ifb-vit-skeleton ifb-vit-skeleton-img\"><\/div><div class=\"ifb-vit-skeleton ifb-vit-skeleton-text\"><\/div><div class=\"ifb-vit-skeleton ifb-vit-skeleton-price\"><\/div><div class=\"ifb-vit-skeleton ifb-vit-skeleton-btn\"><\/div><\/div>\r\n    <div class=\"ifb-vit-skeleton-card\"><div class=\"ifb-vit-skeleton ifb-vit-skeleton-img\"><\/div><div class=\"ifb-vit-skeleton ifb-vit-skeleton-text\"><\/div><div class=\"ifb-vit-skeleton ifb-vit-skeleton-price\"><\/div><div class=\"ifb-vit-skeleton ifb-vit-skeleton-btn\"><\/div><\/div>\r\n    <div class=\"ifb-vit-skeleton-card\"><div class=\"ifb-vit-skeleton ifb-vit-skeleton-img\"><\/div><div class=\"ifb-vit-skeleton ifb-vit-skeleton-text\"><\/div><div class=\"ifb-vit-skeleton ifb-vit-skeleton-price\"><\/div><div class=\"ifb-vit-skeleton ifb-vit-skeleton-btn\"><\/div><\/div>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n  \/\/ ============================================================================\r\n  \/\/ \u2699\ufe0f CONFIGURA\u00c7\u00d5ES - EDITE AQUI\r\n  \/\/ ============================================================================\r\n\r\n  const CONFIG = {\r\n    STORE_URL: 'https:\/\/sitexis.com.br\/infinity2', \/\/ Sua URL\r\n    METHOD: 'store_api', \/\/ Padr\u00e3o\r\n    \r\n    \/\/ Carregar mais produtos para que os filtros funcionem bem\r\n    PER_PAGE: 30, \r\n    ORDER_BY: 'popularity',\r\n    \r\n    BUTTON_TEXT: 'Personalizar Agora',\r\n    VOLUME_TEXT: '\u26a1 A partir de R$ 19,00 no Atacado',\r\n    SHIPPING_TEXT: 'A partir de 5 un. | Frete fixo R$50',\r\n  };\r\n\r\n  let allProductsData = []; \/\/ Armazena todos os produtos carregados para filtrar no JS\r\n\r\n  \/\/ ============================================================================\r\n  \/\/ \ud83d\udd0c FUN\u00c7\u00d5ES BASE\r\n  \/\/ ============================================================================\r\n\r\n  function buildApiUrl() {\r\n    const base = CONFIG.STORE_URL.replace(\/\\\/$\/, '');\r\n    return `${base}\/wp-json\/wc\/store\/v1\/products?per_page=${CONFIG.PER_PAGE}&orderby=${CONFIG.ORDER_BY}&order=desc`;\r\n  }\r\n\r\n  function normalizeProduct(raw) {\r\n    const prices = raw.prices || {};\r\n    const regularPrice = parseInt(prices.regular_price || '0') \/ Math.pow(10, prices.currency_minor_unit || 2);\r\n    const salePrice = parseInt(prices.sale_price || prices.price || '0') \/ Math.pow(10, prices.currency_minor_unit || 2);\r\n    const currentPrice = parseInt(prices.price || '0') \/ Math.pow(10, prices.currency_minor_unit || 2);\r\n    const onSale = regularPrice > currentPrice;\r\n    const image = raw.images && raw.images.length > 0 ? raw.images[0].src : 'https:\/\/via.placeholder.com\/400x400\/f5f5f5\/999999?text=Sem+Imagem';\r\n\r\n    \/\/ Extrair Categorias\r\n    let categories = [];\r\n    if(raw.categories && Array.isArray(raw.categories)) {\r\n      categories = raw.categories.map(c => ({ name: c.name, slug: c.slug }));\r\n    }\r\n\r\n    return {\r\n      id: raw.id, name: raw.name, url: raw.permalink, image: image,\r\n      imageAlt: raw.images?.[0]?.alt || raw.name,\r\n      regularPrice: regularPrice, currentPrice: currentPrice,\r\n      onSale: onSale, categories: categories\r\n    };\r\n  }\r\n\r\n  function formatBRL(value) {\r\n    return value.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });\r\n  }\r\n\r\n  \/\/ ============================================================================\r\n  \/\/ \ud83c\udfa8 RENDERIZA\u00c7\u00c3O DOM\r\n  \/\/ ============================================================================\r\n\r\n  \/\/ Monta os bot\u00f5es de filtro dinamicamente\r\n  function renderFilters() {\r\n    const filterContainer = document.getElementById('ifb-vit-filters');\r\n    if(!filterContainer) return;\r\n\r\n    \/\/ Contar produtos por categoria\r\n    const catMap = {};\r\n    allProductsData.forEach(p => {\r\n      p.categories.forEach(c => {\r\n        if(!catMap[c.slug]) catMap[c.slug] = { name: c.name, count: 0 };\r\n        catMap[c.slug].count++;\r\n      });\r\n    });\r\n\r\n    \/\/ Bot\u00e3o \"Todos\"\r\n    let html = `<button class=\"ifb-vit-filter-btn active\" data-filter=\"all\">Todos (${allProductsData.length})<\/button>`;\r\n    \r\n    \/\/ Bot\u00f5es de categorias din\u00e2micas\r\n    for(const [slug, data] of Object.entries(catMap)) {\r\n      html += `<button class=\"ifb-vit-filter-btn\" data-filter=\"${slug}\">${data.name} (${data.count})<\/button>`;\r\n    }\r\n\r\n    filterContainer.innerHTML = html;\r\n\r\n    \/\/ Evento de Clique nos Filtros\r\n    const btns = filterContainer.querySelectorAll('.ifb-vit-filter-btn');\r\n    btns.forEach(btn => {\r\n      btn.addEventListener('click', (e) => {\r\n        \/\/ Atualiza estado ativo\r\n        btns.forEach(b => b.classList.remove('active'));\r\n        e.target.classList.add('active');\r\n        \r\n        \/\/ Filtra os produtos\r\n        const slug = e.target.getAttribute('data-filter');\r\n        renderProducts(slug);\r\n      });\r\n    });\r\n  }\r\n\r\n  \/\/ Exibe os produtos filtrados\r\n  function renderProducts(filterSlug = 'all') {\r\n    const grid = document.getElementById('ifb-vit-grid');\r\n    grid.innerHTML = ''; \/\/ Limpa a grid\r\n\r\n    \/\/ Filtra array em mem\u00f3ria\r\n    const filteredProducts = allProductsData.filter(p => {\r\n      if(filterSlug === 'all') return true;\r\n      return p.categories.some(c => c.slug === filterSlug);\r\n    });\r\n\r\n    if(filteredProducts.length === 0) {\r\n      grid.innerHTML = `<div class=\"ifb-vit-error\">Nenhum produto nesta categoria.<\/div>`;\r\n      return;\r\n    }\r\n\r\n    \/\/ Gera HTML dos cards\r\n    const cardsHTML = filteredProducts.map(product => {\r\n      const discount = (product.onSale && product.regularPrice > product.currentPrice) \r\n        ? Math.round(((product.regularPrice - product.currentPrice) \/ product.regularPrice) * 100) \r\n        : 0;\r\n\r\n      let badgesHTML = '';\r\n      if (discount > 0) {\r\n        badgesHTML += `<span class=\"ifb-vit-badge ifb-vit-badge-off\">-${discount}% OFF<\/span>`;\r\n      }\r\n\r\n      let priceHTML = '';\r\n      if (product.onSale && discount > 0) {\r\n        priceHTML = `\r\n          <div class=\"ifb-vit-old-price\">\r\n            <del>${formatBRL(product.regularPrice)}<\/del>\r\n            <span class=\"ifb-vit-discount-percent\">-${discount}%<\/span>\r\n          <\/div>\r\n          <div class=\"ifb-vit-current-price\">${formatBRL(product.currentPrice)}<span>\/un<\/span><\/div>`;\r\n      } else {\r\n        priceHTML = `<div class=\"ifb-vit-current-price\">${formatBRL(product.currentPrice)}<span>\/un<\/span><\/div>`;\r\n      }\r\n\r\n      let volumeHTML = CONFIG.VOLUME_TEXT ? `<div class=\"ifb-vit-volume\">${CONFIG.VOLUME_TEXT}<\/div>` : '';\r\n      let shippingHTML = CONFIG.SHIPPING_TEXT ? `<div class=\"ifb-vit-shipping\">${CONFIG.SHIPPING_TEXT}<\/div>` : '';\r\n\r\n      return `\r\n        <div class=\"ifb-vit-card\">\r\n          <div class=\"ifb-vit-image-wrap\">\r\n            ${badgesHTML}\r\n            <img decoding=\"async\" src=\"${product.image}\" alt=\"${product.imageAlt}\" loading=\"lazy\">\r\n          <\/div>\r\n          <div class=\"ifb-vit-info\">\r\n            <h3>${product.name}<\/h3>\r\n            <div class=\"ifb-vit-price-box\">\r\n              ${priceHTML}\r\n            <\/div>\r\n            ${volumeHTML}\r\n            ${shippingHTML}\r\n            <div class=\"ifb-vit-btn-wrapper\">\r\n              <a href=\"${product.url}\" class=\"ifb-vit-btn-shine\">\r\n                <span>${CONFIG.BUTTON_TEXT}<\/span>\r\n              <\/a>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>`;\r\n    }).join('');\r\n\r\n    grid.innerHTML = cardsHTML;\r\n  }\r\n\r\n  function renderError(message) {\r\n    document.getElementById('ifb-vit-filters').innerHTML = '';\r\n    document.getElementById('ifb-vit-grid').innerHTML = `\r\n      <div class=\"ifb-vit-error\">\r\n        <div class=\"ifb-vit-error-icon\">\u26a0\ufe0f<\/div>\r\n        <div class=\"ifb-vit-error-title\">Ops, algo deu errado<\/div>\r\n        <p>${message}<\/p>\r\n      <\/div>`;\r\n  }\r\n\r\n  \/\/ ============================================================================\r\n  \/\/ \ud83d\ude80 INICIALIZAR E BUSCAR DADOS\r\n  \/\/ ============================================================================\r\n\r\n  async function init() {\r\n    try {\r\n      const response = await fetch(buildApiUrl());\r\n      if (!response.ok) throw new Error(`HTTP ${response.status}`);\r\n      \r\n      const data = await response.json();\r\n      \r\n      if (!Array.isArray(data) || data.length === 0) {\r\n        renderError('Nenhum produto encontrado na loja.');\r\n        return;\r\n      }\r\n      \r\n      \/\/ Salva e normaliza dados\r\n      allProductsData = data.map(normalizeProduct);\r\n      \r\n      \/\/ Constr\u00f3i tela inicial\r\n      renderFilters();\r\n      renderProducts('all');\r\n\r\n    } catch (err) {\r\n      console.error('[Vitrine Infinity]', err);\r\n      renderError('N\u00e3o foi poss\u00edvel carregar os produtos. Verifique sua conex\u00e3o ou a URL da loja.');\r\n    }\r\n  }\r\n\r\n  if (document.readyState === 'loading') {\r\n    document.addEventListener('DOMContentLoaded', init);\r\n  } else {\r\n    init();\r\n  }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a9f4bae e-flex e-con-boxed e-con e-parent\" data-id=\"a9f4bae\" 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-02fdd6a elementor-widget elementor-widget-html\" data-id=\"02fdd6a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n  \/* ==========================================================================\r\n     ESPECIFICA\u00c7\u00d5ES DO PRODUTO INFINITY - UNIQUE SCOPED CSS (LIGHT MODE)\r\n     ========================================================================== *\/\r\n\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;500;700;800&display=swap');\r\n\r\n  \/* Base & Vari\u00e1veis Isoladas na Se\u00e7\u00e3o *\/\r\n  .ifb-spec-section {\r\n    --ifb-spec-primary: #E79917 !important; \/* Laranja da Marca *\/\r\n    --ifb-spec-dark: #15181E !important;    \/* Chumbo Escuro *\/\r\n    --ifb-spec-bg: #ffffff !important;      \/* Fundo Branco *\/\r\n    --ifb-spec-cardbg: #ffffff !important;  \/* Fundo do Card *\/\r\n    --ifb-spec-muted: #666666 !important;   \/* Texto secund\u00e1rio *\/\r\n    --ifb-spec-border: #e5e7eb !important;  \/* Borda suave *\/\r\n\r\n    background-color: var(--ifb-spec-bg) !important;\r\n    color: var(--ifb-spec-dark) !important;\r\n    font-family: 'Roboto', system-ui, -apple-system, sans-serif !important;\r\n    padding: 40px 20px !important;\r\n    display: flex !important;\r\n    flex-direction: column !important;\r\n    align-items: center !important;\r\n    box-sizing: border-box !important;\r\n    width: 100% !important;\r\n  }\r\n\r\n  .ifb-spec-section * {\r\n    box-sizing: border-box !important;\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n  }\r\n\r\n  \/* Container Principal que centraliza tudo *\/\r\n  .ifb-spec-container {\r\n    width: 100% !important;\r\n    max-width: 1140px !important;\r\n    display: flex !important;\r\n    flex-direction: column !important;\r\n    gap: 25px !important;\r\n  }\r\n\r\n  \/* ==========================================================================\r\n     BLOCO DE ESPECIFICA\u00c7\u00d5ES\r\n     ========================================================================== *\/\r\n  .ifb-spec-box {\r\n    background-color: var(--ifb-spec-cardbg) !important;\r\n    border: 1px solid var(--ifb-spec-border) !important;\r\n    border-radius: 16px !important;\r\n    padding: 40px 45px !important;\r\n    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;\r\n  }\r\n\r\n  .ifb-spec-title {\r\n    font-size: 22px !important;\r\n    font-weight: 800 !important;\r\n    color: var(--ifb-spec-dark) !important;\r\n    margin-bottom: 30px !important;\r\n    letter-spacing: -0.5px !important;\r\n  }\r\n\r\n  \/* Grid 2x2 *\/\r\n  .ifb-spec-grid {\r\n    display: grid !important;\r\n    grid-template-columns: repeat(2, 1fr) !important;\r\n    row-gap: 35px !important;\r\n    column-gap: 20px !important;\r\n  }\r\n\r\n  .ifb-spec-item {\r\n    display: flex !important;\r\n    flex-direction: column !important;\r\n    align-items: flex-start !important;\r\n    gap: 6px !important;\r\n  }\r\n\r\n  .ifb-spec-label {\r\n    font-size: 24px !important;\r\n    font-weight: 800 !important;\r\n    color: var(--ifb-spec-dark) !important;\r\n    letter-spacing: -0.5px !important;\r\n  }\r\n\r\n  .ifb-spec-value {\r\n    font-size: 15px !important;\r\n    font-weight: 400 !important;\r\n    color: var(--ifb-spec-muted) !important;\r\n  }\r\n\r\n  \/* ==========================================================================\r\n     BLOCO DE DICA DE PERSONALIZA\u00c7\u00c3O (HIGHLIGHT)\r\n     ========================================================================== *\/\r\n  .ifb-spec-tip-box {\r\n    background-color: rgba(231, 153, 23, 0.04) !important; \/* Fundo levemente laranja *\/\r\n    border: 1px solid var(--ifb-spec-primary) !important; \/* Borda Laranja da Marca *\/\r\n    border-radius: 16px !important;\r\n    padding: 25px 35px !important;\r\n    display: flex !important;\r\n    flex-direction: column !important;\r\n    gap: 12px !important;\r\n    box-shadow: 0 4px 15px rgba(231, 153, 23, 0.05) !important;\r\n  }\r\n\r\n  .ifb-spec-tip-header {\r\n    display: flex !important;\r\n    align-items: center !important;\r\n    gap: 10px !important;\r\n  }\r\n\r\n  .ifb-spec-tip-header svg {\r\n    width: 20px !important;\r\n    height: 20px !important;\r\n    fill: none !important;\r\n    stroke: var(--ifb-spec-primary) !important;\r\n    stroke-width: 2 !important;\r\n    stroke-linecap: round !important;\r\n    stroke-linejoin: round !important;\r\n  }\r\n\r\n  .ifb-spec-tip-title {\r\n    font-size: 18px !important;\r\n    font-weight: 700 !important;\r\n    color: var(--ifb-spec-primary) !important; \/* T\u00edtulo Laranja *\/\r\n  }\r\n\r\n  .ifb-spec-tip-text {\r\n    font-size: 15px !important;\r\n    font-weight: 400 !important;\r\n    line-height: 1.6 !important;\r\n    color: #4b5563 !important; \/* Cinza escuro para boa leitura no fundo claro *\/\r\n  }\r\n\r\n  \/* Responsividade *\/\r\n  @media (max-width: 650px) {\r\n    .ifb-spec-box {\r\n      padding: 30px 25px !important;\r\n    }\r\n    .ifb-spec-grid {\r\n      grid-template-columns: 1fr !important; \/* Fica 1 coluna no celular *\/\r\n      row-gap: 25px !important;\r\n    }\r\n    .ifb-spec-tip-box {\r\n      padding: 20px 25px !important;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"ifb-spec-section\">\r\n  \r\n  <div class=\"ifb-spec-container\">\r\n    \r\n    <div class=\"ifb-spec-box\">\r\n      <h3 class=\"ifb-spec-title\">Especifica\u00e7\u00f5es do Modelo<\/h3>\r\n      \r\n      <div class=\"ifb-spec-grid\">\r\n        \r\n        <div class=\"ifb-spec-item\">\r\n          <span class=\"ifb-spec-label\">Tipo<\/span>\r\n          <span class=\"ifb-spec-value\">Bon\u00e9 Personalizado<\/span>\r\n        <\/div>\r\n        \r\n        <div class=\"ifb-spec-item\">\r\n          <span class=\"ifb-spec-label\">Material<\/span>\r\n          <span class=\"ifb-spec-value\">100% Algod\u00e3o Premium<\/span>\r\n        <\/div>\r\n        \r\n        <div class=\"ifb-spec-item\">\r\n          <span class=\"ifb-spec-label\">Ajuste<\/span>\r\n          <span class=\"ifb-spec-value\">Regul\u00e1vel com fivela<\/span>\r\n        <\/div>\r\n        \r\n        <div class=\"ifb-spec-item\">\r\n          <span class=\"ifb-spec-label\">Tamanhos<\/span>\r\n          <span class=\"ifb-spec-value\">\u00danico (ajust\u00e1vel)<\/span>\r\n        <\/div>\r\n        \r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"ifb-spec-tip-box\">\r\n      \r\n      <div class=\"ifb-spec-tip-header\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path d=\"M9 18h6\"><\/path>\r\n          <path d=\"M10 22h4\"><\/path>\r\n          <path d=\"M12 2v1\"><\/path>\r\n          <path d=\"M12 14c1.66 0 3-1.34 3-3 0-1.28-.84-2.4-2-2.82V5h-2v3.18C9.84 8.6 9 9.72 9 11c0 1.66 1.34 3 3 3z\"><\/path>\r\n          <path d=\"M4.93 4.93l.71.71\"><\/path>\r\n          <path d=\"M18.36 18.36l.71.71\"><\/path>\r\n          <path d=\"M2 12h1\"><\/path>\r\n          <path d=\"M21 12h1\"><\/path>\r\n          <path d=\"M18.36 5.64l-.71.71\"><\/path>\r\n          <path d=\"M4.93 19.07l-.71-.71\"><\/path>\r\n        <\/svg>\r\n        <h4 class=\"ifb-spec-tip-title\">Dica de Personaliza\u00e7\u00e3o<\/h4>\r\n      <\/div>\r\n      \r\n      <p class=\"ifb-spec-tip-text\">\r\n        Logos escuras funcionam melhor em bon\u00e9s claros (branco, cinza claro) e logos claras destacam-se em bon\u00e9s escuros (preto, marinho). Nossa equipe pode te ajudar a escolher a melhor combina\u00e7\u00e3o!\r\n      <\/p>\r\n      \r\n    <\/div>\r\n\r\n  <\/div>\r\n  \r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2e7c759 e-flex e-con-boxed e-con e-parent\" data-id=\"2e7c759\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5c5c550 elementor-widget elementor-widget-html\" data-id=\"5c5c550\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t    <style>\r\n        \/* Container que agrupa o bon\u00e9 e os olhos *\/\r\n        .character-container {\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center; \/* Centraliza o bon\u00e9 e os olhos horizontalmente *\/\r\n        }\r\n\r\n        .eyes-container {\r\n            display: flex;\r\n            gap: 15px; \/* Espa\u00e7o entre os olhos *\/\r\n            margin-top: -25px; \/* Puxa os olhos para cima, colando no bon\u00e9 (ajuste se necess\u00e1rio) *\/\r\n            z-index: 1;\r\n        }\r\n\r\n        .eye {\r\n            width: 60px;\r\n            height: 60px;\r\n            background: #fff;\r\n            border-radius: 50%;\r\n            border: 4px solid #1a1a1a;\r\n            position: relative;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            overflow: hidden; \r\n            box-shadow: 0 5px 15px rgba(0,0,0,0.1);\r\n        }\r\n\r\n        .pupil {\r\n            width: 25px;\r\n            height: 25px;\r\n            background: #1a1a1a;\r\n            border-radius: 50%;\r\n            transition: transform 0.05s ease-out;\r\n            position: relative;\r\n        }\r\n        \r\n        .pupil::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 5px;\r\n            left: 5px;\r\n            width: 8px;\r\n            height: 8px;\r\n            background: rgba(255,255,255,0.8);\r\n            border-radius: 50%;\r\n        }\r\n\r\n        \/* Anima\u00e7\u00e3o de piscar *\/\r\n        .eye::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background-color: #f0f2f5; \/* Deve ser a mesma cor do fundo atr\u00e1s do personagem *\/\r\n            border-radius: 50%;\r\n            transform: scaleY(0);\r\n            transform-origin: top;\r\n            z-index: 10;\r\n            animation: blink 6s infinite;\r\n        }\r\n\r\n        @keyframes blink {\r\n            0%, 95%, 100% { transform: scaleY(0); }\r\n            97% { transform: scaleY(1); }\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"character-container\">\r\n         <div class=\"eyes-container\">\r\n            <div class=\"eye\">\r\n                <div class=\"pupil\"><\/div>\r\n            <\/div>\r\n            <div class=\"eye\">\r\n                <div class=\"pupil\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        const eyes = document.querySelectorAll('.eye');\r\n\r\n        document.addEventListener('mousemove', (e) => {\r\n            eyes.forEach(eye => {\r\n                const pupil = eye.querySelector('.pupil');\r\n\r\n                const rect = eye.getBoundingClientRect();\r\n                const eyeCenterX = rect.left + rect.width \/ 2;\r\n                const eyeCenterY = rect.top + rect.height \/ 2;\r\n\r\n                const angle = Math.atan2(e.clientY - eyeCenterY, e.clientX - eyeCenterX);\r\n\r\n                \/\/ Ajustei a dist\u00e2ncia m\u00e1xima baseada no novo tamanho do olho (60px) e pupila (25px)\r\n                \/\/ Raio do olho (30) - Raio da pupila (12.5) = 17.5. Usei 14 para ter uma margem de seguran\u00e7a.\r\n                const maxDistance = 14; \r\n\r\n                const moveX = Math.cos(angle) * maxDistance;\r\n                const moveY = Math.sin(angle) * maxDistance;\r\n\r\n                pupil.style.transform = `translate(${moveX}px, ${moveY}px)`;\r\n            });\r\n        });\r\n    <\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1a569f9 elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"1a569f9\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInLeft&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Pronto para come\u00e7ar?<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-59213f3 elementor-widget elementor-widget-text-editor\" data-id=\"59213f3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Junte-se a mais de 2.500+ empresas que confiam na Infinity Bon\u00e9s<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-07724dc elementor-invisible elementor-widget elementor-widget-html\" data-id=\"07724dc\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"btn-wrapper\">\r\n    <img decoding=\"async\" src=\"https:\/\/sitexis.com.br\/infinity2\/wp-content\/uploads\/2026\/03\/cap-1.svg\" class=\"cap-icon\" alt=\"Bon\u00e9\">\r\n    \r\n    <button class=\"btn-shine\"  onclick=\"window.location.href='#modelos'\">\r\n        <span>Criar Meu Bon\u00e9 Agora<\/span>\r\n    <\/button>\r\n<\/div>\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>Modelos &#038; Cores Confira todas as op\u00e7\u00f5es de bon\u00e9s dispon\u00edveis para personaliza\u00e7\u00e3o Carregando categorias&#8230; Especifica\u00e7\u00f5es do Modelo Tipo Bon\u00e9 Personalizado Material 100% Algod\u00e3o Premium Ajuste Regul\u00e1vel com fivela Tamanhos \u00danico (ajust\u00e1vel) Dica de Personaliza\u00e7\u00e3o Logos escuras funcionam melhor em bon\u00e9s claros (branco, cinza claro) e logos claras destacam-se em bon\u00e9s escuros (preto, marinho). Nossa equipe [&hellip;]<\/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-613","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sitexis.com.br\/infinity2\/wp-json\/wp\/v2\/pages\/613","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sitexis.com.br\/infinity2\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sitexis.com.br\/infinity2\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sitexis.com.br\/infinity2\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sitexis.com.br\/infinity2\/wp-json\/wp\/v2\/comments?post=613"}],"version-history":[{"count":25,"href":"https:\/\/sitexis.com.br\/infinity2\/wp-json\/wp\/v2\/pages\/613\/revisions"}],"predecessor-version":[{"id":653,"href":"https:\/\/sitexis.com.br\/infinity2\/wp-json\/wp\/v2\/pages\/613\/revisions\/653"}],"wp:attachment":[{"href":"https:\/\/sitexis.com.br\/infinity2\/wp-json\/wp\/v2\/media?parent=613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}