{"id":46,"date":"2026-08-02T06:27:39","date_gmt":"2026-08-02T06:27:39","guid":{"rendered":"https:\/\/tbinternationalgroup.com\/?page_id=46"},"modified":"2026-08-12T00:46:28","modified_gmt":"2026-08-12T00:46:28","slug":"our-products","status":"publish","type":"page","link":"https:\/\/tbinternationalgroup.com\/tr\/our-products\/","title":{"rendered":"Our products"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"46\" class=\"elementor elementor-46\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6b74104 e-con e-atomic-element e-flexbox-base e-d81a3f6 \" data-id=\"6b74104\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"6b74104\" data-e-type=\"e-flexbox\" data-id=\"6b74104\">\n    \t\t<div class=\"elementor-element elementor-element-13934bb elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"13934bb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\n  ============================================================\n  T&B INTERNATIONAL GROUP \u2014 GRID DE PRODUCTOS (DIN\u00c1MICO)\n  ------------------------------------------------------------\n  Pega TODO este bloque en un widget \"HTML\" de Elementor,\n  en la p\u00e1gina Productos (debajo del hero \"Nuestros Productos\").\n\n  \u26a0\ufe0f REQUISITO: instala antes el snippet PHP \"tb-products-rest-snippet.php\"\n  en Code Snippets. Lee los productos EN VIVO desde \/wp-json\/tb\/v1\/products.\n\n  FLUJO DE COTIZACI\u00d3N (sin carrito):\n   - Cada tarjeta tiene un bot\u00f3n \"Express Interest\".\n   - Al pulsarlo, abre la p\u00e1gina de Contacto con el producto en la URL:\n        \/contact-us\/?producto=<nombre del producto>\n   - En la p\u00e1gina de Contacto, el bloque \"tb-contact-fill\" rellena el\n     campo del formulario con ese producto. Al enviar, Formidable manda\n     el correo con el producto incluido.\n\n  Editar textos -> objeto LABELS.  Colores\/fuentes -> :root.\n  ============================================================\n-->\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@500;600;700&display=swap\" rel=\"stylesheet\">\n\n<div class=\"tb-products\" id=\"tb-products\">\n  <div class=\"tb-filters\" aria-label=\"Product filters\">\n    <div class=\"tb-filter-group\" data-filter=\"category\">\n      <span class=\"tb-filter-label\">Category<\/span>\n      <div class=\"tb-chips\"><\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"tb-grid\" role=\"list\"><\/div>\n  <p class=\"tb-empty\" hidden>No products match your filters.<\/p>\n  <p class=\"tb-error\" hidden>Couldn't load products right now. Please refresh the page.<\/p>\n<\/div>\n\n<style>\n  .tb-products{\n    --tb-gold:#c9a24b;\n    --tb-title:#f4f7fb;\n    --tb-text:#8a97a6;\n    --tb-text-strong:#c7cfd8;\n    --tb-line:#2a3a4d;\n    --tb-btn:#26374d;\n    --tb-btn-hover:#32485f;\n    --tb-badge:rgba(10,22,40,.82);\n    max-width:1200px;\n    margin:0 auto;\n    padding:8px 0 48px;\n    color:var(--tb-text);\n    font-family:inherit;\n  }\n  .tb-products *{ box-sizing:border-box; }\n\n  \/* ---- Filtros ---- *\/\n  .tb-filters{ display:flex; flex-wrap:wrap; gap:14px 30px; margin:0 0 40px; }\n  .tb-filter-group{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }\n  .tb-filter-label{\n    font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;\n    color:#6b7885; font-weight:600;\n  }\n  .tb-chips{ display:flex; flex-wrap:wrap; gap:8px; }\n  .tb-chip{\n    background:transparent; border:1px solid var(--tb-line); color:#aeb8c4;\n    font:inherit; font-size:.82rem; padding:7px 15px; border-radius:999px;\n    cursor:pointer; transition:border-color .18s, color .18s, background .18s;\n  }\n  .tb-chip:hover{ border-color:var(--tb-gold); color:#fff; }\n  .tb-chip.is-active{ background:var(--tb-gold); border-color:var(--tb-gold); color:#0a1628; font-weight:600; }\n\n  \/* ---- Grid ---- *\/\n  .tb-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 24px; }\n  @media (max-width:900px){ .tb-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 18px; } }\n\n  \/* ---- M\u00f3vil: 2 columnas + escalado del contenido ---- *\/\n  @media (max-width:600px){\n    .tb-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; }\n    .tb-card{ padding:12px; }\n    .tb-filters{ gap:12px 20px; margin-bottom:28px; }\n    .tb-filter-label{ font-size:.66rem; }\n    .tb-chip{ font-size:.75rem; padding:6px 12px; }\n    .tb-badge{ font-size:.56rem; padding:5px 10px; top:10px; left:10px; letter-spacing:.1em; }\n    .tb-card__origin{ font-size:.72rem; margin:14px 0 7px; }\n    .tb-card__origin svg{ width:12px; height:12px; }\n    .tb-card__title{ font-size:1.05rem; margin-bottom:10px; }\n    .tb-card__title::after{ width:26px; margin-top:9px; }\n    .tb-card__desc{ font-size:.82rem; line-height:1.5; margin-bottom:16px; }\n    .tb-card__blabel{ font-size:.6rem; margin-bottom:10px; }\n    .tb-card__benefits{ gap:8px; margin-bottom:18px; }\n    .tb-card__benefits li{ font-size:.78rem; }\n    .tb-card__benefits svg{ width:13px; height:13px; }\n    .tb-cta{ width:100%; justify-content:center; padding:11px 14px; font-size:.8rem; }\n  }\n  @media (max-width:380px){\n    .tb-grid{ gap:20px 10px; }\n    .tb-card__title{ font-size:.96rem; }\n    .tb-card__desc{ font-size:.78rem; }\n  }\n\n  \/* ---- Tarjeta ---- *\/\n  .tb-card{\n    display:flex; flex-direction:column;\n    background:#0f2038;\n    border:1px solid rgba(255,255,255,.05);\n    border-radius:15px;\n    box-shadow:0 12px 30px rgba(0,0,0,.40);\n    padding:16px;\n  }\n  .tb-card__imgwrap{ position:relative; aspect-ratio:1\/1; border-radius:12px; overflow:hidden; background:#0b1a2f; }\n  .tb-card__img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }\n  .tb-card:hover .tb-card__img{ transform:scale(1.04); }\n  .tb-badge{\n    position:absolute; top:12px; left:12px;\n    background:var(--tb-badge); color:#fff; font-size:.6rem; font-weight:600;\n    letter-spacing:.12em; text-transform:uppercase; padding:6px 12px; border-radius:999px;\n    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);\n  }\n  .tb-card__origin{ display:flex; align-items:center; gap:6px; font-size:.76rem; color:var(--tb-text); margin:15px 0 8px; }\n  .tb-card__origin svg{ color:var(--tb-gold); flex-shrink:0; width:13px; height:13px; }\n  .tb-card__title{\n    font-family:'Playfair Display',Georgia,serif; color:#ffffff;\n    font-size:1.2rem; font-weight:700; line-height:1.18; letter-spacing:-.01em;\n    margin:0 0 10px; text-shadow:0 1px 2px rgba(0,0,0,.35);\n  }\n  .tb-card__title::after{\n    content:\"\"; display:block; width:28px; height:2px; margin-top:10px;\n    background:var(--tb-gold); border-radius:2px;\n  }\n  .tb-card__desc{ font-size:.85rem; line-height:1.55; margin:0 0 16px; }\n  .tb-card__blabel{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:#6b7885; font-weight:600; margin:0 0 10px; }\n  .tb-card__benefits{ list-style:none; padding:0; margin:0 0 18px; display:flex; flex-direction:column; gap:8px; }\n  .tb-card__benefits li{ display:flex; align-items:flex-start; gap:9px; font-size:.8rem; line-height:1.4; color:var(--tb-text-strong); }\n  .tb-card__benefits svg{ color:var(--tb-gold); flex-shrink:0; margin-top:2px; width:13px; height:13px; }\n  .tb-cta{\n    margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:8px;\n    background:var(--tb-btn); color:#fff; text-decoration:none; border:none; border-radius:999px;\n    padding:11px 18px; font:inherit; font-size:.82rem; font-weight:500; cursor:pointer;\n    transition:background .2s, transform .08s;\n  }\n  .tb-cta:hover{ background:var(--tb-btn-hover); color:#fff; }\n  .tb-cta:active{ transform:scale(.97); }\n\n  \/* ---- Estados ---- *\/\n  .tb-loading{ text-align:center; color:#6b7885; padding:50px 0; }\n  .tb-empty, .tb-error{ text-align:center; padding:40px 0; }\n  .tb-empty{ color:#6b7885; }\n  .tb-error{ color:#c98a8a; }\n\n  .tb-products :focus-visible{ outline:2px solid var(--tb-gold); outline-offset:2px; }\n  @media (prefers-reduced-motion:reduce){\n    .tb-card__img, .tb-cta{ transition:none; }\n  }\n<\/style>\n\n<script>\n(function(){\n  \"use strict\";\n\n  \/* ======= CONFIG ======= *\/\n  var API_URL = \"\/wp-json\/tb\/v1\/products\";   \/\/ endpoint del snippet PHP\n\n  \/* ======= TEXTOS DE INTERFAZ (idioma base: ingl\u00e9s) ======= *\/\n  var LABELS = {\n    all:          \"All\",\n    origin:       \"Origin:\",\n    keyBenefits:  \"Key benefits\",\n    interest:     \"Express Interest\",\n    loading:      \"Loading products\\u2026\",\n    contactUrl:   \"\/contact-us\/\"\n  };\n\n  \/* ======= SVG icons ======= *\/\n  var ICON_PIN   = '<svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>';\n  var ICON_CHECK = '<svg viewBox=\"0 0 24 24\" width=\"15\" height=\"15\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>';\n  var ICON_MAIL  = '<svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"\/><path d=\"m22 6-10 7L2 6\"\/><\/svg>';\n\n  var root      = document.getElementById(\"tb-products\");\n  var grid      = root.querySelector(\".tb-grid\");\n  var emptyMsg  = root.querySelector(\".tb-empty\");\n  var errorMsg  = root.querySelector(\".tb-error\");\n\n  var PRODUCTS = [];\n  var state = { category:\"all\" };\n\n  function esc(s){\n    return String(s == null ? \"\" : s).replace(\/[&<>\"']\/g, function(c){\n      return {\"&\":\"&amp;\",\"<\":\"&lt;\",\">\":\"&gt;\",'\"':\"&quot;\",\"'\":\"&#39;\"}[c];\n    });\n  }\n  function uniq(key){\n    var seen = [];\n    PRODUCTS.forEach(function(p){ if(p[key] && seen.indexOf(p[key])===-1) seen.push(p[key]); });\n    return seen;\n  }\n\n  \/* ---- Filtros ---- *\/\n  function buildChips(filterKey){\n    var wrap = root.querySelector('.tb-filter-group[data-filter=\"'+filterKey+'\"] .tb-chips');\n    var values = [LABELS.all].concat(uniq(filterKey));\n    wrap.innerHTML = values.map(function(v, i){\n      var val = i === 0 ? \"all\" : v;\n      var active = state[filterKey] === val ? \" is-active\" : \"\";\n      return '<button type=\"button\" class=\"tb-chip'+active+'\" data-value=\"'+esc(val)+'\">'+esc(v)+'<\/button>';\n    }).join(\"\");\n  }\n\n  \/* ---- Render grid ---- *\/\n  function render(){\n    var list = PRODUCTS.filter(function(p){\n      return (state.category === \"all\" || p.category === state.category);\n    });\n\n    emptyMsg.hidden = list.length > 0;\n\n    grid.innerHTML = list.map(function(p){\n      var img = p.image\n        ? '<img decoding=\"async\" class=\"tb-card__img\" src=\"'+esc(p.image)+'\" alt=\"'+esc(p.name)+'\" loading=\"lazy\">'\n        : '';\n      var benefits = (p.benefits || []).map(function(b){\n        return '<li>'+ICON_CHECK+'<span>'+esc(b)+'<\/span><\/li>';\n      }).join(\"\");\n      var originLine = p.origin\n        ? '<p class=\"tb-card__origin\">'+ICON_PIN+'<span>'+esc(LABELS.origin)+' '+esc(p.origin)+'<\/span><\/p>'\n        : '';\n      var badge = p.category ? '<span class=\"tb-badge\">'+esc(p.category)+'<\/span>' : '';\n      var href  = LABELS.contactUrl + '?producto=' + encodeURIComponent(p.name) + '&pid=' + encodeURIComponent(p.id);\n      return ''+\n      '<article class=\"tb-card\" role=\"listitem\">'+\n        '<div class=\"tb-card__imgwrap\">'+img+badge+'<\/div>'+\n        originLine+\n        '<h3 class=\"tb-card__title\">'+esc(p.name)+'<\/h3>'+\n        '<p class=\"tb-card__desc\">'+esc(p.desc)+'<\/p>'+\n        (benefits ? '<p class=\"tb-card__blabel\">'+esc(LABELS.keyBenefits)+'<\/p><ul class=\"tb-card__benefits\">'+benefits+'<\/ul>' : '')+\n        '<a class=\"tb-cta\" href=\"'+href+'\">'+ICON_MAIL+'<span>'+esc(LABELS.interest)+'<\/span><\/a>'+\n      '<\/article>';\n    }).join(\"\");\n  }\n\n  \/* ---- Eventos de filtro ---- *\/\n  root.addEventListener(\"click\", function(e){\n    var chip = e.target.closest(\".tb-chip\");\n    if(!chip) return;\n    var group = chip.closest(\".tb-filter-group\").getAttribute(\"data-filter\");\n    state[group] = chip.getAttribute(\"data-value\");\n    buildChips(\"category\");\n    render();\n  });\n\n  \/* ---- Init: cargar productos desde la API ---- *\/\n  function init(){\n    grid.innerHTML = '<p class=\"tb-loading\">'+esc(LABELS.loading)+'<\/p>';\n    errorMsg.hidden = true;\n    fetch(API_URL, { headers: { \"Accept\": \"application\/json\" } })\n      .then(function(r){ if(!r.ok) throw new Error(r.status); return r.json(); })\n      .then(function(data){\n        PRODUCTS = Array.isArray(data) ? data : [];\n        buildChips(\"category\");\n        render();\n      })\n      .catch(function(){\n        grid.innerHTML = \"\";\n        emptyMsg.hidden = true;\n        errorMsg.hidden = false;\n      });\n  }\n  init();\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Category No products match your filters. Couldn&#8217;t load products right now. Please refresh the page.<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-46","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tbinternationalgroup.com\/tr\/wp-json\/wp\/v2\/pages\/46","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tbinternationalgroup.com\/tr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tbinternationalgroup.com\/tr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tbinternationalgroup.com\/tr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tbinternationalgroup.com\/tr\/wp-json\/wp\/v2\/comments?post=46"}],"version-history":[{"count":43,"href":"https:\/\/tbinternationalgroup.com\/tr\/wp-json\/wp\/v2\/pages\/46\/revisions"}],"predecessor-version":[{"id":175,"href":"https:\/\/tbinternationalgroup.com\/tr\/wp-json\/wp\/v2\/pages\/46\/revisions\/175"}],"wp:attachment":[{"href":"https:\/\/tbinternationalgroup.com\/tr\/wp-json\/wp\/v2\/media?parent=46"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}