{"id":322,"date":"2026-06-15T05:45:54","date_gmt":"2026-06-15T05:45:54","guid":{"rendered":"https:\/\/aliceblue-mallard-643626.hostingersite.com\/?page_id=322"},"modified":"2026-08-19T18:35:45","modified_gmt":"2026-08-19T18:35:45","slug":"products","status":"publish","type":"page","link":"https:\/\/commerss.com\/en\/productos\/","title":{"rendered":"Products"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"322\" class=\"elementor elementor-322\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6935a97 e-con e-atomic-element e-flexbox-base e-f2f46ce \" data-id=\"6935a97\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"6935a97\" data-e-type=\"e-flexbox\" data-id=\"6935a97\">\n    \t\t<div class=\"elementor-element elementor-element-a62a783 elementor-widget elementor-widget-html\" data-id=\"a62a783\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section\r\n  id=\"commerss-products-hero\"\r\n  class=\"cphero-section\"\r\n  aria-labelledby=\"cphero-title\"\r\n>\r\n  <!-- FONDO DECORATIVO -->\r\n  <div class=\"cphero-background\" aria-hidden=\"true\">\r\n    <span class=\"cphero-grid\"><\/span>\r\n    <span class=\"cphero-glow cphero-glow-one\"><\/span>\r\n    <span class=\"cphero-glow cphero-glow-two\"><\/span>\r\n\r\n    <div class=\"cphero-blueprint\">\r\n      <span class=\"cphero-blueprint-ring ring-one\"><\/span>\r\n      <span class=\"cphero-blueprint-ring ring-two\"><\/span>\r\n      <span class=\"cphero-blueprint-ring ring-three\"><\/span>\r\n\r\n      <i class=\"cphero-blueprint-node node-one\"><\/i>\r\n      <i class=\"cphero-blueprint-node node-two\"><\/i>\r\n      <i class=\"cphero-blueprint-node node-three\"><\/i>\r\n      <i class=\"cphero-blueprint-node node-four\"><\/i>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"cphero-shell\">\r\n\r\n    <!-- META SUPERIOR -->\r\n    <div class=\"cphero-topbar cphero-reveal\">\r\n      <div class=\"cphero-topbar-left\">\r\n        <span class=\"cphero-status-dot\"><\/span>\r\n\r\n        <span>\r\n          CAT\u00c1LOGO DE PRODUCTOS\r\n        <\/span>\r\n      <\/div>\r\n\r\n      <div class=\"cphero-topbar-right\">\r\n        <span>\r\n          Buscar por proceso\r\n        <\/span>\r\n\r\n        <i><\/i>\r\n\r\n        <span>\r\n          Buscar por marca\r\n        <\/span>\r\n\r\n        <i><\/i>\r\n\r\n        <span>\r\n          Buscar por aplicaci\u00f3n\r\n        <\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- TITULAR -->\r\n    <div class=\"cphero-copy cphero-reveal\">\r\n      <span class=\"cphero-eyebrow\">\r\n        EQUIPOS INDUSTRIALES\r\n      <\/span>\r\n\r\n      <h1 id=\"cphero-title\">\r\n        Todo lo que tu proyecto necesita.\r\n        <span>En un solo lugar.<\/span>\r\n      <\/h1>\r\n\r\n      <p>\r\n        Explora equipos para almacenar, transportar,\r\n        dosificar, secar, mezclar, filtrar, medir, automatizar y mucho m\u00e1s para cada industria.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <!-- BUSCADOR PRINCIPAL -->\r\n    <div class=\"cphero-search-stage cphero-reveal\">\r\n\r\n      <form\r\n        class=\"cphero-search-form\"\r\n        action=\"\/productos\/\"\r\n        method=\"get\"\r\n      >\r\n        <label class=\"cphero-search-field\">\r\n          <span class=\"cphero-search-icon\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <circle cx=\"11\" cy=\"11\" r=\"6.7\"><\/circle>\r\n              <path d=\"M16 16l5 5\"><\/path>\r\n            <\/svg>\r\n          <\/span>\r\n\r\n          <span class=\"cphero-search-copy\">\r\n            <small>\u00bfQU\u00c9 EST\u00c1S BUSCANDO?<\/small>\r\n\r\n            <input\r\n              class=\"cphero-search-input\"\r\n              type=\"search\"\r\n              name=\"buscar\"\r\n              placeholder=\"Ej. silos de almacenamiento, dosificadores, v\u00e1lvulas...\"\r\n              autocomplete=\"off\"\r\n              aria-label=\"Buscar productos\"\r\n            >\r\n          <\/span>\r\n\r\n          <button\r\n            class=\"cphero-clear\"\r\n            type=\"button\"\r\n            aria-label=\"Borrar b\u00fasqueda\"\r\n          >\r\n            <span><\/span>\r\n            <span><\/span>\r\n          <\/button>\r\n        <\/label>\r\n\r\n        <button class=\"cphero-submit\" type=\"submit\">\r\n          Buscar productos\r\n\r\n          <span aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path d=\"M5 12h14\"><\/path>\r\n              <path d=\"M13 6l6 6-6 6\"><\/path>\r\n            <\/svg>\r\n          <\/span>\r\n        <\/button>\r\n      <\/form>\r\n\r\n      <!-- SUGERENCIAS -->\r\n      <div class=\"cphero-suggestions\">\r\n        <span class=\"cphero-suggestions-label\">\r\n          B\u00daSQUEDAS FRECUENTES\r\n        <\/span>\r\n\r\n        <div class=\"cphero-suggestion-list\">\r\n          <button type=\"button\" data-query=\"Transporte neum\u00e1tico\">\r\n            Silos\r\n          <\/button>\r\n\r\n          <button type=\"button\" data-query=\"Dosificadores\">\r\n            Tanques de agua\r\n          <\/button>\r\n\r\n          <button type=\"button\" data-query=\"Silos\">\r\n            Mezcladoras\r\n          <\/button>\r\n\r\n          <button type=\"button\" data-query=\"Mezcladoras\">\r\n            Dosificadores\r\n          <\/button>\r\n\r\n          <button type=\"button\" data-query=\"Filtraci\u00f3n\">\r\n            Tuber\u00eda\r\n          <\/button>\r\n\r\n          <button type=\"button\" data-query=\"Secadoras\">\r\n            Trampas magn\u00e9ticas\r\n          <\/button>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- MENSAJE DE APOYO -->\r\n      <div class=\"cphero-search-note\">\r\n        <span aria-hidden=\"true\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle>\r\n            <path d=\"M12 11v6\"><\/path>\r\n            <path d=\"M12 7h.01\"><\/path>\r\n          <\/svg>\r\n        <\/span>\r\n\r\n        <p>\r\n          Tambi\u00e9n puedes buscar por nombre de marca, tipo de material,\r\n          modelo o aplicaci\u00f3n industrial.\r\n        <\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- NAVEGADOR DE PROCESOS -->\r\n<!--<div class=\"cphero-process cphero-reveal\">\r\n      <div class=\"cphero-process-heading\">\r\n        <div>\r\n          <span>\r\n            EXPLORAR POR PROCESO\r\n          <\/span>\r\n\r\n          <strong>\r\n            \u00bfEn qu\u00e9 etapa necesitas una soluci\u00f3n?\r\n          <\/strong>\r\n        <\/div>\r\n\r\n        <a href=\"#catalogo-productos\">\r\n          Ver cat\u00e1logo completo\r\n          <span aria-hidden=\"true\">\u2193<\/span>\r\n        <\/a>\r\n      <\/div>\r\n\r\n      <div class=\"cphero-process-track\">\r\n\r\n        <a\r\n          class=\"cphero-process-item\"\r\n          href=\"\/productos\/?categoria=almacenamiento#catalogo-productos\"\r\n        >\r\n          <span class=\"cphero-process-index\">\r\n            01\r\n          <\/span>\r\n\r\n          <span class=\"cphero-process-icon\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 48 48\">\r\n              <path d=\"M15 8h18l4 8v25H11V16z\"><\/path>\r\n              <path d=\"M11 16h26\"><\/path>\r\n              <path d=\"M18 25h12M18 31h12\"><\/path>\r\n            <\/svg>\r\n          <\/span>\r\n\r\n          <div>\r\n            <strong>Almacenar<\/strong>\r\n            <small>Silos, tolvas y contenedores<\/small>\r\n          <\/div>\r\n\r\n          <i aria-hidden=\"true\">\u2197<\/i>\r\n        <\/a>\r\n\r\n        <a\r\n          class=\"cphero-process-item\"\r\n          href=\"\/productos\/?categoria=transporte#catalogo-productos\"\r\n        >\r\n          <span class=\"cphero-process-index\">\r\n            02\r\n          <\/span>\r\n\r\n          <span class=\"cphero-process-icon\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 48 48\">\r\n              <path d=\"M7 25h27\"><\/path>\r\n              <path d=\"M29 18l8 7-8 7\"><\/path>\r\n              <circle cx=\"13\" cy=\"25\" r=\"5\"><\/circle>\r\n              <path d=\"M38 13v24\"><\/path>\r\n            <\/svg>\r\n          <\/span>\r\n\r\n          <div>\r\n            <strong>Transportar<\/strong>\r\n            <small>Sistemas neum\u00e1ticos y mec\u00e1nicos<\/small>\r\n          <\/div>\r\n\r\n          <i aria-hidden=\"true\">\u2197<\/i>\r\n        <\/a>\r\n\r\n        <a\r\n          class=\"cphero-process-item\"\r\n          href=\"\/productos\/?categoria=dosificacion#catalogo-productos\"\r\n        >\r\n          <span class=\"cphero-process-index\">\r\n            03\r\n          <\/span>\r\n\r\n          <span class=\"cphero-process-icon\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 48 48\">\r\n              <path d=\"M14 8h20l-5 14v12l-5 6-5-6V22z\"><\/path>\r\n              <path d=\"M16 14h16\"><\/path>\r\n              <path d=\"M19 27h10\"><\/path>\r\n            <\/svg>\r\n          <\/span>\r\n\r\n          <div>\r\n            <strong>Dosificar<\/strong>\r\n            <small>Precisi\u00f3n y alimentaci\u00f3n controlada<\/small>\r\n          <\/div>\r\n\r\n          <i aria-hidden=\"true\">\u2197<\/i>\r\n        <\/a>\r\n\r\n        <a\r\n          class=\"cphero-process-item\"\r\n          href=\"\/productos\/?categoria=mezclado#catalogo-productos\"\r\n        >\r\n          <span class=\"cphero-process-index\">\r\n            04\r\n          <\/span>\r\n\r\n          <span class=\"cphero-process-icon\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 48 48\">\r\n              <path d=\"M10 11h28v24H10z\"><\/path>\r\n              <path d=\"M18 17l12 12M30 17L18 29\"><\/path>\r\n              <path d=\"M19 35v5M29 35v5\"><\/path>\r\n            <\/svg>\r\n          <\/span>\r\n\r\n          <div>\r\n            <strong>Mezclar<\/strong>\r\n            <small>Homogeneidad y preparaci\u00f3n<\/small>\r\n          <\/div>\r\n\r\n          <i aria-hidden=\"true\">\u2197<\/i>\r\n        <\/a>\r\n\r\n        <a\r\n          class=\"cphero-process-item\"\r\n          href=\"\/productos\/?categoria=filtracion#catalogo-productos\"\r\n        >\r\n          <span class=\"cphero-process-index\">\r\n            05\r\n          <\/span>\r\n\r\n          <span class=\"cphero-process-icon\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 48 48\">\r\n              <path d=\"M9 10h30L28 25v11l-8 4V25z\"><\/path>\r\n              <path d=\"M15 16h18\"><\/path>\r\n            <\/svg>\r\n          <\/span>\r\n\r\n          <div>\r\n            <strong>Filtrar<\/strong>\r\n            <small>Separaci\u00f3n y limpieza de material<\/small>\r\n          <\/div>\r\n\r\n          <i aria-hidden=\"true\">\u2197<\/i>\r\n        <\/a>\r\n\r\n        <a\r\n          class=\"cphero-process-item\"\r\n          href=\"\/productos\/?categoria=automatizacion#catalogo-productos\"\r\n        >\r\n          <span class=\"cphero-process-index\">\r\n            06\r\n          <\/span>\r\n\r\n          <span class=\"cphero-process-icon\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 48 48\">\r\n              <circle cx=\"24\" cy=\"24\" r=\"7\"><\/circle>\r\n              <path d=\"M24 7v7M24 34v7M7 24h7M34 24h7\"><\/path>\r\n              <path d=\"M12 12l5 5M31 31l5 5M36 12l-5 5M17 31l-5 5\"><\/path>\r\n            <\/svg>\r\n          <\/span>\r\n\r\n          <div>\r\n            <strong>Controlar<\/strong>\r\n            <small>Medici\u00f3n, monitoreo y automatizaci\u00f3n<\/small>\r\n          <\/div>\r\n\r\n          <i aria-hidden=\"true\">\u2197<\/i>\r\n        <\/a>\r\n\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section> -->\r\n\r\n<style>\r\n\/* ==================================================\r\n   VARIABLES Y BASE\r\n================================================== *\/\r\n\r\n#commerss-products-hero {\r\n  --cphero-navy: #063f5b;\r\n  --cphero-dark: #042f43;\r\n  --cphero-deep: #021f2d;\r\n  --cphero-teal: #4ba6a6;\r\n  --cphero-teal-light: #87d0cd;\r\n  --cphero-muted: rgba(255, 255, 255, 0.67);\r\n  --cphero-border: rgba(255, 255, 255, 0.14);\r\n  --cphero-radius: 30px;\r\n\r\n  position: relative;\r\n  isolation: isolate;\r\n\r\n  width: 100%;\r\n  overflow: hidden;\r\n\r\n  background:\r\n    linear-gradient(\r\n      145deg,\r\n      var(--cphero-navy) 0%,\r\n      var(--cphero-dark) 48%,\r\n      var(--cphero-deep) 100%\r\n    );\r\n\r\n  color: #ffffff;\r\n\r\n  font-family:\r\n    -apple-system,\r\n    BlinkMacSystemFont,\r\n    \"SF Pro Display\",\r\n    \"Segoe UI\",\r\n    sans-serif;\r\n}\r\n\r\n#commerss-products-hero *,\r\n#commerss-products-hero *::before,\r\n#commerss-products-hero *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n#commerss-products-hero button,\r\n#commerss-products-hero input {\r\n  font-family: inherit;\r\n}\r\n\r\n#commerss-products-hero a {\r\n  color: inherit;\r\n}\r\n\r\n\/* ==================================================\r\n   FONDO\r\n================================================== *\/\r\n\r\n#commerss-products-hero .cphero-background {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: -5;\r\n\r\n  pointer-events: none;\r\n}\r\n\r\n#commerss-products-hero .cphero-grid {\r\n  position: absolute;\r\n  inset: 0;\r\n\r\n  background-image:\r\n    linear-gradient(\r\n      rgba(255, 255, 255, 0.028) 1px,\r\n      transparent 1px\r\n    ),\r\n    linear-gradient(\r\n      90deg,\r\n      rgba(255, 255, 255, 0.028) 1px,\r\n      transparent 1px\r\n    );\r\n\r\n  background-size: 58px 58px;\r\n\r\n  mask-image:\r\n    linear-gradient(\r\n      180deg,\r\n      rgba(0, 0, 0, 0.9),\r\n      transparent 95%\r\n    );\r\n\r\n  -webkit-mask-image:\r\n    linear-gradient(\r\n      180deg,\r\n      rgba(0, 0, 0, 0.9),\r\n      transparent 95%\r\n    );\r\n}\r\n\r\n#commerss-products-hero .cphero-glow {\r\n  position: absolute;\r\n\r\n  border-radius: 50%;\r\n\r\n  filter: blur(95px);\r\n}\r\n\r\n#commerss-products-hero .cphero-glow-one {\r\n  top: -230px;\r\n  right: 5%;\r\n\r\n  width: 620px;\r\n  height: 620px;\r\n\r\n  background: rgba(75, 166, 166, 0.24);\r\n}\r\n\r\n#commerss-products-hero .cphero-glow-two {\r\n  left: 8%;\r\n  bottom: 0;\r\n\r\n  width: 430px;\r\n  height: 430px;\r\n\r\n  background: rgba(55, 111, 139, 0.17);\r\n}\r\n\r\n\/* BLUEPRINT *\/\r\n\r\n#commerss-products-hero .cphero-blueprint {\r\n  position: absolute;\r\n  top: 80px;\r\n  right: -170px;\r\n\r\n  width: 650px;\r\n  height: 650px;\r\n\r\n  opacity: 0.22;\r\n\r\n  animation:\r\n    cpheroBlueprintFloat\r\n    12s ease-in-out\r\n    infinite;\r\n}\r\n\r\n#commerss-products-hero .cphero-blueprint-ring {\r\n  position: absolute;\r\n  left: 50%;\r\n  top: 50%;\r\n\r\n  border: 1px solid rgba(255, 255, 255, 0.3);\r\n  border-radius: 50%;\r\n\r\n  transform: translate(-50%, -50%);\r\n}\r\n\r\n#commerss-products-hero .ring-one {\r\n  width: 260px;\r\n  height: 260px;\r\n}\r\n\r\n#commerss-products-hero .ring-two {\r\n  width: 430px;\r\n  height: 430px;\r\n}\r\n\r\n#commerss-products-hero .ring-three {\r\n  width: 620px;\r\n  height: 620px;\r\n}\r\n\r\n#commerss-products-hero .cphero-blueprint-node {\r\n  position: absolute;\r\n\r\n  width: 13px;\r\n  height: 13px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: var(--cphero-teal-light);\r\n\r\n  box-shadow:\r\n    0 0 0 10px rgba(135, 208, 205, 0.09);\r\n}\r\n\r\n#commerss-products-hero .node-one {\r\n  top: 91px;\r\n  left: 172px;\r\n}\r\n\r\n#commerss-products-hero .node-two {\r\n  top: 212px;\r\n  right: 26px;\r\n}\r\n\r\n#commerss-products-hero .node-three {\r\n  left: 92px;\r\n  bottom: 173px;\r\n}\r\n\r\n#commerss-products-hero .node-four {\r\n  right: 154px;\r\n  bottom: 55px;\r\n}\r\n\r\n@keyframes cpheroBlueprintFloat {\r\n  0%,\r\n  100% {\r\n    transform:\r\n      translateY(0)\r\n      rotate(0deg);\r\n  }\r\n\r\n  50% {\r\n    transform:\r\n      translateY(16px)\r\n      rotate(3deg);\r\n  }\r\n}\r\n\r\n\/* ==================================================\r\n   CONTENEDOR\r\n================================================== *\/\r\n\r\n#commerss-products-hero .cphero-shell {\r\n  position: relative;\r\n  z-index: 4;\r\n\r\n  width: min(1400px, calc(100% - 48px));\r\n  margin: 0 auto;\r\n\r\n  padding:\r\n    34px\r\n    0\r\n    clamp(65px, 7vw, 105px);\r\n}\r\n\r\n\/* ==================================================\r\n   TOPBAR\r\n================================================== *\/\r\n\r\n#commerss-products-hero .cphero-topbar {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 35px;\r\n\r\n  min-height: 50px;\r\n  padding-bottom: 19px;\r\n\r\n  border-bottom: 1px solid var(--cphero-border);\r\n}\r\n\r\n#commerss-products-hero .cphero-topbar-left,\r\n#commerss-products-hero .cphero-topbar-right {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n#commerss-products-hero .cphero-topbar-left {\r\n  gap: 11px;\r\n\r\n  color: rgba(255, 255, 255, 0.7);\r\n\r\n  font-size: 9px;\r\n  font-weight: 750;\r\n  letter-spacing: 0.15em;\r\n}\r\n\r\n#commerss-products-hero .cphero-status-dot {\r\n  width: 7px;\r\n  height: 7px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: var(--cphero-teal-light);\r\n\r\n  box-shadow:\r\n    0 0 0 6px rgba(135, 208, 205, 0.09);\r\n}\r\n\r\n#commerss-products-hero .cphero-topbar-right {\r\n  gap: 13px;\r\n\r\n  color: rgba(255, 255, 255, 0.42);\r\n\r\n  font-size: 9px;\r\n  font-weight: 600;\r\n}\r\n\r\n#commerss-products-hero .cphero-topbar-right i {\r\n  width: 4px;\r\n  height: 4px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: var(--cphero-teal);\r\n}\r\n\r\n\/* ==================================================\r\n   TITULAR\r\n================================================== *\/\r\n\r\n#commerss-products-hero .cphero-copy {\r\n  max-width: 1120px;\r\n  margin: 0 auto;\r\n\r\n  padding:\r\n    clamp(70px, 8vw, 120px)\r\n    0\r\n    43px;\r\n\r\n  text-align: center;\r\n}\r\n\r\n#commerss-products-hero .cphero-eyebrow {\r\n  display: block;\r\n  margin-bottom: 18px;\r\n\r\n  color: var(--cphero-teal-light);\r\n\r\n  font-size: 11px;\r\n  font-weight: 750;\r\n  letter-spacing: 0.16em;\r\n}\r\n\r\n#commerss-products-hero .cphero-copy h1 {\r\n  margin: 0;\r\n\r\n  color: #ffffff;\r\n\r\n  font-size: clamp(52px, 6.4vw, 98px);\r\n  font-weight: 620;\r\n  line-height: 0.93;\r\n  letter-spacing: -0.068em;\r\n}\r\n\r\n#commerss-products-hero .cphero-copy h1 span {\r\n  display: block;\r\n\r\n  color: rgba(255, 255, 255, 0.45);\r\n}\r\n\r\n#commerss-products-hero .cphero-copy > p {\r\n  max-width: 780px;\r\n  margin: 28px auto 0;\r\n\r\n  color: var(--cphero-muted);\r\n\r\n  font-size: clamp(16px, 1.35vw, 20px);\r\n  line-height: 1.65;\r\n}\r\n\r\n\/* ==================================================\r\n   BUSCADOR\r\n================================================== *\/\r\n\r\n#commerss-products-hero .cphero-search-stage {\r\n  max-width: 1090px;\r\n  margin: 0 auto;\r\n  padding: 12px;\r\n\r\n  border: 1px solid rgba(255, 255, 255, 0.16);\r\n  border-radius: 29px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      145deg,\r\n      rgba(255, 255, 255, 0.115),\r\n      rgba(255, 255, 255, 0.055)\r\n    );\r\n\r\n  box-shadow:\r\n    inset 0 1px 0 rgba(255, 255, 255, 0.1),\r\n    0 32px 75px rgba(0, 0, 0, 0.2);\r\n\r\n  backdrop-filter: blur(25px);\r\n  -webkit-backdrop-filter: blur(25px);\r\n}\r\n\r\n#commerss-products-hero .cphero-search-form {\r\n  display: grid;\r\n  grid-template-columns:\r\n    minmax(0, 1fr)\r\n    auto;\r\n\r\n  gap: 9px;\r\n}\r\n\r\n#commerss-products-hero .cphero-search-field {\r\n  display: grid;\r\n  grid-template-columns:\r\n    41px\r\n    minmax(0, 1fr)\r\n    42px;\r\n\r\n  align-items: center;\r\n  gap: 14px;\r\n\r\n  min-height: 76px;\r\n  padding: 0 9px 0 21px;\r\n\r\n  border-radius: 20px;\r\n\r\n  background: rgba(255, 255, 255, 0.96);\r\n  color: var(--cphero-navy);\r\n\r\n  transition:\r\n    background 0.3s ease,\r\n    box-shadow 0.3s ease;\r\n}\r\n\r\n#commerss-products-hero .cphero-search-field:focus-within {\r\n  background: #ffffff;\r\n\r\n  box-shadow:\r\n    0 0 0 3px rgba(135, 208, 205, 0.19);\r\n}\r\n\r\n#commerss-products-hero .cphero-search-icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  width: 41px;\r\n  height: 41px;\r\n\r\n  border-radius: 14px;\r\n\r\n  background: rgba(75, 166, 166, 0.11);\r\n  color: var(--cphero-teal);\r\n}\r\n\r\n#commerss-products-hero .cphero-search-icon svg {\r\n  width: 21px;\r\n  height: 21px;\r\n\r\n  fill: none;\r\n  stroke: currentColor;\r\n  stroke-width: 1.8;\r\n  stroke-linecap: round;\r\n}\r\n\r\n#commerss-products-hero .cphero-search-copy {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 5px;\r\n\r\n  min-width: 0;\r\n}\r\n\r\n#commerss-products-hero .cphero-search-copy small {\r\n  color: rgba(6, 63, 91, 0.45);\r\n\r\n  font-size: 8px;\r\n  font-weight: 750;\r\n  letter-spacing: 0.14em;\r\n}\r\n\r\n#commerss-products-hero .cphero-search-input {\r\n  width: 100%;\r\n  min-width: 0;\r\n  padding: 0;\r\n\r\n  border: 0;\r\n  outline: none;\r\n\r\n  background: transparent;\r\n  color: var(--cphero-navy);\r\n\r\n  font-size: clamp(16px, 1.5vw, 21px);\r\n  font-weight: 580;\r\n}\r\n\r\n#commerss-products-hero\r\n.cphero-search-input::placeholder {\r\n  color: rgba(6, 63, 91, 0.31);\r\n}\r\n\r\n#commerss-products-hero .cphero-clear {\r\n  position: relative;\r\n\r\n  width: 38px;\r\n  height: 38px;\r\n  padding: 0;\r\n\r\n  border: 0;\r\n  border-radius: 50%;\r\n\r\n  background: rgba(6, 63, 91, 0.06);\r\n\r\n  cursor: pointer;\r\n\r\n  opacity: 0;\r\n  pointer-events: none;\r\n\r\n  transition:\r\n    opacity 0.25s ease,\r\n    background 0.25s ease;\r\n}\r\n\r\n#commerss-products-hero .cphero-clear.is-visible {\r\n  opacity: 1;\r\n  pointer-events: auto;\r\n}\r\n\r\n#commerss-products-hero .cphero-clear:hover {\r\n  background: rgba(6, 63, 91, 0.12);\r\n}\r\n\r\n#commerss-products-hero .cphero-clear span {\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n\r\n  width: 14px;\r\n  height: 1px;\r\n\r\n  background: var(--cphero-navy);\r\n}\r\n\r\n#commerss-products-hero\r\n.cphero-clear span:first-child {\r\n  transform:\r\n    translate(-50%, -50%)\r\n    rotate(45deg);\r\n}\r\n\r\n#commerss-products-hero\r\n.cphero-clear span:last-child {\r\n  transform:\r\n    translate(-50%, -50%)\r\n    rotate(-45deg);\r\n}\r\n\r\n\/* BOT\u00d3N BUSCAR *\/\r\n\r\n#commerss-products-hero .cphero-submit {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 18px;\r\n\r\n  min-height: 76px;\r\n  padding: 0 9px 0 23px;\r\n\r\n  border: 0;\r\n  border-radius: 20px;\r\n\r\n  background: var(--cphero-teal);\r\n  color: #ffffff;\r\n\r\n  font-size: 13px;\r\n  font-weight: 650;\r\n  white-space: nowrap;\r\n\r\n  cursor: pointer;\r\n\r\n  transition:\r\n    transform 0.3s ease,\r\n    background 0.3s ease;\r\n}\r\n\r\n#commerss-products-hero .cphero-submit > span {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  width: 48px;\r\n  height: 48px;\r\n\r\n  border-radius: 15px;\r\n\r\n  background: rgba(255, 255, 255, 0.15);\r\n\r\n  transition:\r\n    transform 0.35s ease,\r\n    background 0.3s ease;\r\n}\r\n\r\n#commerss-products-hero .cphero-submit svg {\r\n  width: 21px;\r\n  height: 21px;\r\n\r\n  fill: none;\r\n  stroke: currentColor;\r\n  stroke-width: 1.8;\r\n  stroke-linecap: round;\r\n  stroke-linejoin: round;\r\n}\r\n\r\n#commerss-products-hero .cphero-submit:hover {\r\n  transform: translateY(-3px);\r\n\r\n  background: #3d9091;\r\n}\r\n\r\n#commerss-products-hero\r\n.cphero-submit:hover > span {\r\n  transform: translateX(4px);\r\n\r\n  background: rgba(255, 255, 255, 0.22);\r\n}\r\n\r\n\/* SUGERENCIAS *\/\r\n\r\n#commerss-products-hero .cphero-suggestions {\r\n  display: grid;\r\n  grid-template-columns:\r\n    auto\r\n    minmax(0, 1fr);\r\n\r\n  align-items: center;\r\n  gap: 18px;\r\n\r\n  padding: 17px 10px 7px;\r\n}\r\n\r\n#commerss-products-hero .cphero-suggestions-label {\r\n  color: rgba(255, 255, 255, 0.38);\r\n\r\n  font-size: 8px;\r\n  font-weight: 750;\r\n  letter-spacing: 0.14em;\r\n  white-space: nowrap;\r\n}\r\n\r\n#commerss-products-hero .cphero-suggestion-list {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 7px;\r\n}\r\n\r\n#commerss-products-hero\r\n.cphero-suggestion-list button {\r\n  display: inline-flex;\r\n  align-items: center;\r\n\r\n  min-height: 32px;\r\n  padding: 0 11px;\r\n\r\n  border: 1px solid rgba(255, 255, 255, 0.13);\r\n  border-radius: 999px;\r\n\r\n  background: rgba(255, 255, 255, 0.06);\r\n  color: rgba(255, 255, 255, 0.62);\r\n\r\n  font-size: 9px;\r\n  font-weight: 600;\r\n\r\n  cursor: pointer;\r\n\r\n  transition:\r\n    transform 0.25s ease,\r\n    background 0.25s ease,\r\n    color 0.25s ease,\r\n    border-color 0.25s ease;\r\n}\r\n\r\n#commerss-products-hero\r\n.cphero-suggestion-list button:hover {\r\n  transform: translateY(-2px);\r\n\r\n  border-color: rgba(135, 208, 205, 0.35);\r\n\r\n  background: rgba(75, 166, 166, 0.19);\r\n  color: #ffffff;\r\n}\r\n\r\n\/* NOTA *\/\r\n\r\n#commerss-products-hero .cphero-search-note {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n\r\n  padding: 10px 10px 2px;\r\n}\r\n\r\n#commerss-products-hero .cphero-search-note > span {\r\n  display: flex;\r\n  flex-shrink: 0;\r\n\r\n  color: var(--cphero-teal-light);\r\n}\r\n\r\n#commerss-products-hero .cphero-search-note svg {\r\n  width: 16px;\r\n  height: 16px;\r\n\r\n  fill: none;\r\n  stroke: currentColor;\r\n  stroke-width: 1.7;\r\n  stroke-linecap: round;\r\n  stroke-linejoin: round;\r\n}\r\n\r\n#commerss-products-hero .cphero-search-note p {\r\n  margin: 0;\r\n\r\n  color: rgba(255, 255, 255, 0.38);\r\n\r\n  font-size: 9px;\r\n  line-height: 1.45;\r\n}\r\n\r\n\/* ==================================================\r\n   NAVEGADOR DE PROCESOS\r\n================================================== *\/\r\n\r\n#commerss-products-hero .cphero-process {\r\n  margin-top: 78px;\r\n}\r\n\r\n#commerss-products-hero .cphero-process-heading {\r\n  display: flex;\r\n  align-items: flex-end;\r\n  justify-content: space-between;\r\n  gap: 40px;\r\n\r\n  margin-bottom: 20px;\r\n}\r\n\r\n#commerss-products-hero\r\n.cphero-process-heading > div > span {\r\n  display: block;\r\n  margin-bottom: 8px;\r\n\r\n  color: var(--cphero-teal-light);\r\n\r\n  font-size: 8px;\r\n  font-weight: 750;\r\n  letter-spacing: 0.14em;\r\n}\r\n\r\n#commerss-products-hero\r\n.cphero-process-heading strong {\r\n  display: block;\r\n\r\n  color: #ffffff;\r\n\r\n  font-size: clamp(22px, 2.2vw, 34px);\r\n  font-weight: 620;\r\n  letter-spacing: -0.035em;\r\n}\r\n\r\n#commerss-products-hero\r\n.cphero-process-heading > a {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 9px;\r\n\r\n  color: rgba(255, 255, 255, 0.65);\r\n\r\n  font-size: 11px;\r\n  font-weight: 650;\r\n  text-decoration: none;\r\n}\r\n\r\n#commerss-products-hero\r\n.cphero-process-heading > a > span {\r\n  color: var(--cphero-teal-light);\r\n\r\n  font-size: 16px;\r\n\r\n  transition: transform 0.3s ease;\r\n}\r\n\r\n#commerss-products-hero\r\n.cphero-process-heading > a:hover > span {\r\n  transform: translateY(4px);\r\n}\r\n\r\n\/* TRACK *\/\r\n\r\n#commerss-products-hero .cphero-process-track {\r\n  display: grid;\r\n  grid-template-columns:\r\n    repeat(6, minmax(0, 1fr));\r\n\r\n  overflow: hidden;\r\n\r\n  border: 1px solid var(--cphero-border);\r\n  border-radius: 26px;\r\n\r\n  background: rgba(255, 255, 255, 0.045);\r\n\r\n  box-shadow:\r\n    inset 0 1px 0 rgba(255, 255, 255, 0.07);\r\n\r\n  backdrop-filter: blur(18px);\r\n  -webkit-backdrop-filter: blur(18px);\r\n}\r\n\r\n#commerss-products-hero .cphero-process-item {\r\n  position: relative;\r\n\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  min-width: 0;\r\n  min-height: 245px;\r\n  padding: 21px 18px 20px;\r\n\r\n  color: #ffffff;\r\n  text-decoration: none;\r\n\r\n  transition:\r\n    background 0.35s ease,\r\n    transform 0.4s cubic-bezier(.22, .61, .36, 1);\r\n}\r\n\r\n#commerss-products-hero\r\n.cphero-process-item + .cphero-process-item {\r\n  border-left: 1px solid var(--cphero-border);\r\n}\r\n\r\n#commerss-products-hero .cphero-process-item:hover {\r\n  z-index: 3;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 80% 5%,\r\n      rgba(135, 208, 205, 0.18),\r\n      transparent 40%\r\n    ),\r\n    rgba(255, 255, 255, 0.075);\r\n\r\n  transform: translateY(-5px);\r\n}\r\n\r\n#commerss-products-hero .cphero-process-index {\r\n  color: rgba(255, 255, 255, 0.34);\r\n\r\n  font-size: 8px;\r\n  font-weight: 750;\r\n  letter-spacing: 0.13em;\r\n}\r\n\r\n#commerss-products-hero .cphero-process-icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  width: 63px;\r\n  height: 63px;\r\n  margin: 27px 0 auto;\r\n\r\n  border: 1px solid rgba(255, 255, 255, 0.13);\r\n  border-radius: 19px;\r\n\r\n  background: rgba(255, 255, 255, 0.07);\r\n  color: var(--cphero-teal-light);\r\n\r\n  transition:\r\n    transform 0.4s ease,\r\n    background 0.3s ease,\r\n    color 0.3s ease;\r\n}\r\n\r\n#commerss-products-hero\r\n.cphero-process-item:hover\r\n.cphero-process-icon {\r\n  transform:\r\n    rotate(-3deg)\r\n    scale(1.06);\r\n\r\n  background: var(--cphero-teal);\r\n  color: #ffffff;\r\n}\r\n\r\n#commerss-products-hero .cphero-process-icon svg {\r\n  width: 35px;\r\n  height: 35px;\r\n\r\n  fill: none;\r\n  stroke: currentColor;\r\n  stroke-width: 1.7;\r\n  stroke-linecap: round;\r\n  stroke-linejoin: round;\r\n}\r\n\r\n#commerss-products-hero\r\n.cphero-process-item > div {\r\n  margin-top: 27px;\r\n}\r\n\r\n#commerss-products-hero\r\n.cphero-process-item strong {\r\n  display: block;\r\n\r\n  color: #ffffff;\r\n\r\n  font-size: 16px;\r\n  font-weight: 650;\r\n}\r\n\r\n#commerss-products-hero\r\n.cphero-process-item small {\r\n  display: block;\r\n  margin-top: 7px;\r\n\r\n  color: rgba(255, 255, 255, 0.45);\r\n\r\n  font-size: 9px;\r\n  line-height: 1.4;\r\n}\r\n\r\n#commerss-products-hero\r\n.cphero-process-item > i {\r\n  position: absolute;\r\n  top: 18px;\r\n  right: 17px;\r\n\r\n  color: var(--cphero-teal-light);\r\n\r\n  font-size: 17px;\r\n  font-style: normal;\r\n\r\n  opacity: 0;\r\n  transform: translate(-4px, 4px);\r\n\r\n  transition:\r\n    opacity 0.3s ease,\r\n    transform 0.3s ease;\r\n}\r\n\r\n#commerss-products-hero\r\n.cphero-process-item:hover > i {\r\n  opacity: 1;\r\n  transform: translate(0, 0);\r\n}\r\n\r\n\/* ==================================================\r\n   ENTRADA\r\n================================================== *\/\r\n\r\n#commerss-products-hero .cphero-reveal {\r\n  opacity: 0;\r\n  transform: translateY(27px);\r\n}\r\n\r\n#commerss-products-hero\r\n.cphero-reveal.is-visible {\r\n  opacity: 1;\r\n  transform: translateY(0);\r\n\r\n  transition:\r\n    opacity 0.85s ease,\r\n    transform 0.85s cubic-bezier(.22, .61, .36, 1);\r\n}\r\n\r\n#commerss-products-hero\r\n.cphero-copy.is-visible {\r\n  transition-delay: 0.05s;\r\n}\r\n\r\n#commerss-products-hero\r\n.cphero-search-stage.is-visible {\r\n  transition-delay: 0.1s;\r\n}\r\n\r\n#commerss-products-hero\r\n.cphero-process.is-visible {\r\n  transition-delay: 0.15s;\r\n}\r\n\r\n\/* ==================================================\r\n   TABLET\r\n================================================== *\/\r\n\r\n@media (max-width: 1100px) {\r\n  #commerss-products-hero .cphero-process-track {\r\n    grid-template-columns:\r\n      repeat(3, minmax(0, 1fr));\r\n  }\r\n\r\n  #commerss-products-hero\r\n  .cphero-process-item:nth-child(4) {\r\n    border-left: 0;\r\n  }\r\n\r\n  #commerss-products-hero\r\n  .cphero-process-item:nth-child(n + 4) {\r\n    border-top: 1px solid var(--cphero-border);\r\n  }\r\n}\r\n\r\n\/* ==================================================\r\n   M\u00d3VIL\r\n================================================== *\/\r\n\r\n@media (max-width: 767px) {\r\n  #commerss-products-hero {\r\n    --cphero-radius: 23px;\r\n  }\r\n\r\n  #commerss-products-hero .cphero-shell {\r\n    width: calc(100% - 28px);\r\n\r\n    padding:\r\n      24px\r\n      0\r\n      60px;\r\n  }\r\n\r\n  #commerss-products-hero .cphero-topbar {\r\n    align-items: flex-start;\r\n    flex-direction: column;\r\n    gap: 15px;\r\n  }\r\n\r\n  #commerss-products-hero .cphero-topbar-right {\r\n    flex-wrap: wrap;\r\n  }\r\n\r\n  #commerss-products-hero .cphero-copy {\r\n    padding:\r\n      65px\r\n      0\r\n      35px;\r\n  }\r\n\r\n  #commerss-products-hero .cphero-copy h1 {\r\n    font-size: clamp(49px, 14vw, 66px);\r\n  }\r\n\r\n  #commerss-products-hero .cphero-copy > p {\r\n    font-size: 15px;\r\n  }\r\n\r\n  #commerss-products-hero .cphero-search-stage {\r\n    padding: 8px;\r\n\r\n    border-radius: 23px;\r\n  }\r\n\r\n  #commerss-products-hero .cphero-search-form {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  #commerss-products-hero .cphero-search-field {\r\n    grid-template-columns:\r\n      39px\r\n      minmax(0, 1fr)\r\n      36px;\r\n\r\n    min-height: 74px;\r\n    padding-left: 13px;\r\n  }\r\n\r\n  #commerss-products-hero .cphero-search-icon {\r\n    width: 39px;\r\n    height: 39px;\r\n  }\r\n\r\n  #commerss-products-hero .cphero-submit {\r\n    justify-content: space-between;\r\n\r\n    width: 100%;\r\n    min-height: 59px;\r\n\r\n    border-radius: 17px;\r\n  }\r\n\r\n  #commerss-products-hero .cphero-submit > span {\r\n    width: 43px;\r\n    height: 43px;\r\n\r\n    border-radius: 13px;\r\n  }\r\n\r\n  #commerss-products-hero .cphero-suggestions {\r\n    grid-template-columns: 1fr;\r\n    gap: 11px;\r\n\r\n    padding-top: 19px;\r\n  }\r\n\r\n  #commerss-products-hero .cphero-search-note {\r\n    align-items: flex-start;\r\n\r\n    padding-top: 14px;\r\n  }\r\n\r\n  #commerss-products-hero .cphero-process {\r\n    margin-top: 60px;\r\n  }\r\n\r\n  #commerss-products-hero .cphero-process-heading {\r\n    align-items: flex-start;\r\n    flex-direction: column;\r\n    gap: 15px;\r\n  }\r\n\r\n  #commerss-products-hero .cphero-process-track {\r\n    display: flex;\r\n\r\n    overflow-x: auto;\r\n\r\n    border-radius: 22px;\r\n\r\n    scroll-snap-type: x mandatory;\r\n    scrollbar-width: none;\r\n  }\r\n\r\n  #commerss-products-hero\r\n  .cphero-process-track::-webkit-scrollbar {\r\n    display: none;\r\n  }\r\n\r\n  #commerss-products-hero .cphero-process-item {\r\n    flex: 0 0 75%;\r\n    min-height: 235px;\r\n\r\n    border-top: 0 !important;\r\n    border-left: 1px solid var(--cphero-border);\r\n\r\n    scroll-snap-align: center;\r\n  }\r\n\r\n  #commerss-products-hero\r\n  .cphero-process-item:first-child {\r\n    border-left: 0;\r\n  }\r\n\r\n  #commerss-products-hero\r\n  .cphero-process-item > i {\r\n    opacity: 1;\r\n    transform: none;\r\n  }\r\n\r\n  #commerss-products-hero .cphero-blueprint {\r\n    top: 180px;\r\n    right: -330px;\r\n\r\n    width: 560px;\r\n    height: 560px;\r\n  }\r\n}\r\n\r\n\/* ==================================================\r\n   MOVIMIENTO REDUCIDO\r\n================================================== *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  #commerss-products-hero *,\r\n  #commerss-products-hero *::before,\r\n  #commerss-products-hero *::after {\r\n    transition-duration: 0.01ms !important;\r\n    animation-duration: 0.01ms !important;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function () {\r\n  const root = document.getElementById(\r\n    'commerss-products-hero'\r\n  );\r\n\r\n  if (!root || root.dataset.ready === 'true') {\r\n    return;\r\n  }\r\n\r\n  root.dataset.ready = 'true';\r\n\r\n  const form = root.querySelector(\r\n    '.cphero-search-form'\r\n  );\r\n\r\n  const input = root.querySelector(\r\n    '.cphero-search-input'\r\n  );\r\n\r\n  const clearButton = root.querySelector(\r\n    '.cphero-clear'\r\n  );\r\n\r\n  const suggestions = Array.from(\r\n    root.querySelectorAll(\r\n      '.cphero-suggestion-list button'\r\n    )\r\n  );\r\n\r\n  const reveals = root.querySelectorAll(\r\n    '.cphero-reveal'\r\n  );\r\n\r\n  function updateClearButton() {\r\n    clearButton.classList.toggle(\r\n      'is-visible',\r\n      Boolean(input.value.trim())\r\n    );\r\n  }\r\n\r\n  input.addEventListener(\r\n    'input',\r\n    updateClearButton\r\n  );\r\n\r\n  clearButton.addEventListener(\r\n    'click',\r\n    function () {\r\n      input.value = '';\r\n      input.focus();\r\n\r\n      updateClearButton();\r\n    }\r\n  );\r\n\r\n  suggestions.forEach(function (button) {\r\n    button.addEventListener(\r\n      'click',\r\n      function () {\r\n        input.value = button.dataset.query || '';\r\n\r\n        updateClearButton();\r\n        input.focus();\r\n      }\r\n    );\r\n  });\r\n\r\n  form.addEventListener(\r\n    'submit',\r\n    function (event) {\r\n      event.preventDefault();\r\n\r\n      const query = input.value.trim();\r\n\r\n      if (!query) {\r\n        input.focus();\r\n        return;\r\n      }\r\n\r\n      window.location.href =\r\n        '\/productos\/?buscar=' +\r\n        encodeURIComponent(query) +\r\n        '#catalogo-productos';\r\n    }\r\n  );\r\n\r\n  if ('IntersectionObserver' in window) {\r\n    const observer =\r\n      new IntersectionObserver(\r\n        function (entries) {\r\n          entries.forEach(function (entry) {\r\n            if (!entry.isIntersecting) {\r\n              return;\r\n            }\r\n\r\n            entry.target.classList.add(\r\n              'is-visible'\r\n            );\r\n\r\n            observer.unobserve(\r\n              entry.target\r\n            );\r\n          });\r\n        },\r\n        {\r\n          threshold: 0.1\r\n        }\r\n      );\r\n\r\n    reveals.forEach(function (element) {\r\n      observer.observe(element);\r\n    });\r\n  } else {\r\n    reveals.forEach(function (element) {\r\n      element.classList.add(\r\n        'is-visible'\r\n      );\r\n    });\r\n  }\r\n\r\n  updateClearButton();\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-9cf588b e-con e-atomic-element e-flexbox-base e-9cf588b-d713f0f \" data-id=\"9cf588b\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"9cf588b\" data-e-type=\"e-flexbox\" data-id=\"9cf588b\">\n    \t\t<div class=\"elementor-element elementor-element-f3f74f8 elementor-widget elementor-widget-html\" data-id=\"f3f74f8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section\r\n  id=\"catalogo-productos\"\r\n  class=\"cpcv1-section\"\r\n  aria-labelledby=\"cpcv1-title\"\r\n>\r\n  <div class=\"cpcv1-shell\">\r\n\r\n    <!-- ==================================================\r\n         ENCABEZADO\r\n    =================================================== -->\r\n\r\n    <header class=\"cpcv1-header cpcv1-reveal\">\r\n      <div class=\"cpcv1-heading\">\r\n        <span class=\"cpcv1-eyebrow\">\r\n          CAT\u00c1LOGO DE PRODUCTOS\r\n        <\/span>\r\n\r\n        <h2 id=\"cpcv1-title\">\r\n          Explora nuestro portafolio.\r\n          Encuentra tus equipos.\r\n        <\/h2>\r\n      <\/div>\r\n\r\n      <div class=\"cpcv1-intro\">\r\n        <p>\r\n          Consulta los productos disponibles dentro del portafolio\r\n          de Commerss y filtra por nombre, marca, categor\u00eda o industria.\r\n        <\/p>\r\n\r\n        <div class=\"cpcv1-catalog-status\">\r\n          <span class=\"cpcv1-status-light\"><\/span>\r\n\r\n          <div>\r\n            <small>CAT\u00c1LOGO CONECTADO<\/small>\r\n            <strong class=\"cpcv1-total-label\">\r\n              Cargando productos\u2026\r\n            <\/strong>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/header>\r\n\r\n    <!-- ==================================================\r\n         FILTROS\r\n    =================================================== -->\r\n\r\n    <div class=\"cpcv1-filter-dock cpcv1-reveal\">\r\n\r\n      <!-- BUSCADOR -->\r\n\r\n      <label class=\"cpcv1-search\">\r\n        <span class=\"cpcv1-search-icon\" aria-hidden=\"true\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <circle cx=\"11\" cy=\"11\" r=\"6.5\"><\/circle>\r\n            <path d=\"M16 16l5 5\"><\/path>\r\n          <\/svg>\r\n        <\/span>\r\n\r\n        <span class=\"cpcv1-search-content\">\r\n          <small>BUSCAR PRODUCTO<\/small>\r\n\r\n          <input\r\n            class=\"cpcv1-search-input\"\r\n            type=\"search\"\r\n            placeholder=\"Nombre, modelo, marca o aplicaci\u00f3n\"\r\n            autocomplete=\"off\"\r\n            aria-label=\"Buscar productos\"\r\n          >\r\n        <\/span>\r\n\r\n        <button\r\n          class=\"cpcv1-search-clear\"\r\n          type=\"button\"\r\n          aria-label=\"Borrar b\u00fasqueda\"\r\n        >\r\n          <i><\/i>\r\n          <i><\/i>\r\n        <\/button>\r\n      <\/label>\r\n\r\n      <!-- SELECTORES -->\r\n\r\n      <div class=\"cpcv1-select-grid\">\r\n\r\n        <label class=\"cpcv1-select-wrapper\">\r\n          <small>MARCA<\/small>\r\n\r\n          <select\r\n            class=\"cpcv1-filter-brand\"\r\n            aria-label=\"Filtrar por marca\"\r\n          >\r\n            <option value=\"\">Todas las marcas<\/option>\r\n          <\/select>\r\n\r\n          <span aria-hidden=\"true\">\u2304<\/span>\r\n        <\/label>\r\n\r\n        <label class=\"cpcv1-select-wrapper\">\r\n          <small>CATEGOR\u00cdA<\/small>\r\n\r\n          <select\r\n            class=\"cpcv1-filter-category\"\r\n            aria-label=\"Filtrar por categor\u00eda\"\r\n          >\r\n            <option value=\"\">Todas las categor\u00edas<\/option>\r\n          <\/select>\r\n\r\n          <span aria-hidden=\"true\">\u2304<\/span>\r\n        <\/label>\r\n\r\n        <label class=\"cpcv1-select-wrapper\">\r\n          <small>INDUSTRIA<\/small>\r\n\r\n          <select\r\n            class=\"cpcv1-filter-industry\"\r\n            aria-label=\"Filtrar por industria\"\r\n          >\r\n            <option value=\"\">Todas las industrias<\/option>\r\n          <\/select>\r\n\r\n          <span aria-hidden=\"true\">\u2304<\/span>\r\n        <\/label>\r\n\r\n        <label class=\"cpcv1-select-wrapper\">\r\n          <small>ORDENAR<\/small>\r\n\r\n          <select\r\n            class=\"cpcv1-filter-sort\"\r\n            aria-label=\"Ordenar productos\"\r\n          >\r\n            <option value=\"default\">Relevancia<\/option>\r\n            <option value=\"az\">Nombre A\u2013Z<\/option>\r\n            <option value=\"za\">Nombre Z\u2013A<\/option>\r\n            <option value=\"newest\">M\u00e1s recientes<\/option>\r\n          <\/select>\r\n\r\n          <span aria-hidden=\"true\">\u2304<\/span>\r\n        <\/label>\r\n\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- ==================================================\r\n         META DE RESULTADOS\r\n    =================================================== -->\r\n\r\n    <div class=\"cpcv1-results-bar\">\r\n      <div>\r\n        <span class=\"cpcv1-results-count\" aria-live=\"polite\">\r\n          Cargando cat\u00e1logo\u2026\r\n        <\/span>\r\n\r\n      <span class=\"cpcv1-results-context\">\r\n          Productos \r\n        \r\n        <\/span>\r\n      <\/div>\r\n\r\n      <button\r\n        class=\"cpcv1-reset\"\r\n        type=\"button\"\r\n      >\r\n        Limpiar filtros\r\n\r\n        <span aria-hidden=\"true\">\u00d7<\/span>\r\n      <\/button>\r\n    <\/div>\r\n\r\n    <!-- ==================================================\r\n         \u00c1REA DEL CAT\u00c1LOGO\r\n    =================================================== -->\r\n\r\n    <div class=\"cpcv1-catalog\">\r\n\r\n      <!-- SKELETONS -->\r\n\r\n      <div\r\n        class=\"cpcv1-skeleton-grid\"\r\n        aria-hidden=\"true\"\r\n      >\r\n        <article class=\"cpcv1-skeleton-card\">\r\n          <span><\/span>\r\n          <div><i><\/i><i><\/i><i><\/i><\/div>\r\n        <\/article>\r\n\r\n        <article class=\"cpcv1-skeleton-card\">\r\n          <span><\/span>\r\n          <div><i><\/i><i><\/i><i><\/i><\/div>\r\n        <\/article>\r\n\r\n        <article class=\"cpcv1-skeleton-card\">\r\n          <span><\/span>\r\n          <div><i><\/i><i><\/i><i><\/i><\/div>\r\n        <\/article>\r\n\r\n        <article class=\"cpcv1-skeleton-card\">\r\n          <span><\/span>\r\n          <div><i><\/i><i><\/i><i><\/i><\/div>\r\n        <\/article>\r\n\r\n        <article class=\"cpcv1-skeleton-card\">\r\n          <span><\/span>\r\n          <div><i><\/i><i><\/i><i><\/i><\/div>\r\n        <\/article>\r\n\r\n        <article class=\"cpcv1-skeleton-card\">\r\n          <span><\/span>\r\n          <div><i><\/i><i><\/i><i><\/i><\/div>\r\n        <\/article>\r\n\r\n        <article class=\"cpcv1-skeleton-card\">\r\n          <span><\/span>\r\n          <div><i><\/i><i><\/i><i><\/i><\/div>\r\n        <\/article>\r\n\r\n        <article class=\"cpcv1-skeleton-card\">\r\n          <span><\/span>\r\n          <div><i><\/i><i><\/i><i><\/i><\/div>\r\n        <\/article>\r\n      <\/div>\r\n\r\n      <!-- PRODUCTOS -->\r\n\r\n      <div\r\n        class=\"cpcv1-product-grid\"\r\n        aria-live=\"polite\"\r\n        hidden\r\n      ><\/div>\r\n\r\n      <!-- SIN RESULTADOS -->\r\n\r\n      <div class=\"cpcv1-empty\" hidden>\r\n        <div class=\"cpcv1-empty-icon\">\r\n          <svg viewBox=\"0 0 48 48\" aria-hidden=\"true\">\r\n            <circle cx=\"21\" cy=\"21\" r=\"12\"><\/circle>\r\n            <path d=\"M30 30l10 10\"><\/path>\r\n            <path d=\"M16 21h10\"><\/path>\r\n          <\/svg>\r\n        <\/div>\r\n\r\n        <span>NO ENCONTRAMOS COINCIDENCIAS<\/span>\r\n\r\n        <h3>\r\n          Intenta con otra b\u00fasqueda.\r\n        <\/h3>\r\n\r\n        <p>\r\n          Cambia el t\u00e9rmino, selecciona otra categor\u00eda\r\n          o elimina los filtros activos.\r\n        <\/p>\r\n\r\n        <button type=\"button\">\r\n          Mostrar todos los productos\r\n        <\/button>\r\n      <\/div>\r\n\r\n      <!-- ERROR DE CONEXI\u00d3N -->\r\n\r\n      <div class=\"cpcv1-error\" hidden>\r\n        <div class=\"cpcv1-error-icon\">\r\n          <svg viewBox=\"0 0 48 48\" aria-hidden=\"true\">\r\n            <circle cx=\"24\" cy=\"24\" r=\"20\"><\/circle>\r\n            <path d=\"M24 13v14\"><\/path>\r\n            <path d=\"M24 34h.01\"><\/path>\r\n          <\/svg>\r\n        <\/div>\r\n\r\n        <span>CONEXI\u00d3N PENDIENTE<\/span>\r\n\r\n        <h3>\r\n          No pudimos localizar el cat\u00e1logo.\r\n        <\/h3>\r\n\r\n        <p class=\"cpcv1-error-message\">\r\n          Revisa que el tipo de contenido de productos\r\n          est\u00e9 habilitado dentro de la REST API de WordPress.\r\n        <\/p>\r\n\r\n        <button type=\"button\">\r\n          Intentar nuevamente\r\n        <\/button>\r\n      <\/div>\r\n\r\n      <!-- INFINITE SCROLL -->\r\n\r\n      <div class=\"cpcv1-load-area\" hidden aria-hidden=\"true\">\r\n        <div class=\"cpcv1-infinite-loader\">\r\n          <span><\/span>\r\n          <small>Cargando m\u00e1s productos\u2026<\/small>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- ==================================================\r\n         AYUDA INFERIOR\r\n    =================================================== -->\r\n\r\n    <div class=\"cpcv1-help cpcv1-reveal\">\r\n      <div class=\"cpcv1-help-graphic\" aria-hidden=\"true\">\r\n        <span><\/span>\r\n        <span><\/span>\r\n        <span><\/span>\r\n\r\n        <i><\/i>\r\n        <i><\/i>\r\n        <i><\/i>\r\n      <\/div>\r\n\r\n      <div class=\"cpcv1-help-copy\">\r\n        <span class=\"cpcv1-eyebrow\">\r\n          B\u00daSQUEDA ASISTIDA\r\n        <\/span>\r\n\r\n        <h3>\r\n          \u00bfNo encuentras el equipo exacto?\r\n        <\/h3>\r\n\r\n        <p>\r\n        Te ayudamos a encontrar el equipo adecuado para tu proyecto.\r\n\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <a\r\n        class=\"cpcv1-help-button\"\r\n        href=\"\/contacto\/\"\r\n      >\r\n        Solicitar orientaci\u00f3n\r\n\r\n        <span aria-hidden=\"true\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M7 17L17 7\"><\/path>\r\n            <path d=\"M8 7h9v9\"><\/path>\r\n          <\/svg>\r\n        <\/span>\r\n      <\/a>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n\/* ==================================================\r\n   BASE\r\n================================================== *\/\r\n\r\n#catalogo-productos {\r\n  --cpcv1-navy: #063f5b;\r\n  --cpcv1-dark: #042f43;\r\n  --cpcv1-deep: #021f2d;\r\n  --cpcv1-teal: #4ba6a6;\r\n  --cpcv1-teal-light: #87d0cd;\r\n  --cpcv1-text: #657984;\r\n  --cpcv1-soft: #f5f5f7;\r\n  --cpcv1-border: rgba(6, 63, 91, 0.1);\r\n  --cpcv1-radius: 28px;\r\n\r\n  width: 100%;\r\n  overflow: hidden;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 93% 4%,\r\n      rgba(75, 166, 166, 0.1),\r\n      transparent 22%\r\n    ),\r\n    linear-gradient(\r\n      180deg,\r\n      #f5f6f7 0%,\r\n      #ffffff 34%,\r\n      #ffffff 100%\r\n    );\r\n\r\n  color: var(--cpcv1-navy);\r\n\r\n  font-family:\r\n    -apple-system,\r\n    BlinkMacSystemFont,\r\n    \"SF Pro Display\",\r\n    \"Segoe UI\",\r\n    sans-serif;\r\n}\r\n\r\n#catalogo-productos *,\r\n#catalogo-productos *::before,\r\n#catalogo-productos *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n#catalogo-productos button,\r\n#catalogo-productos input,\r\n#catalogo-productos select {\r\n  font-family: inherit;\r\n}\r\n\r\n#catalogo-productos .cpcv1-shell {\r\n  width: min(1400px, calc(100% - 48px));\r\n  margin: 0 auto;\r\n\r\n  padding:\r\n    clamp(78px, 8vw, 125px)\r\n    0\r\n    clamp(75px, 8vw, 115px);\r\n}\r\n\r\n\/* ==================================================\r\n   HEADER\r\n================================================== *\/\r\n\r\n#catalogo-productos .cpcv1-header {\r\n  display: grid;\r\n  grid-template-columns:\r\n    minmax(0, 1.2fr)\r\n    minmax(330px, 0.65fr);\r\n\r\n  align-items: end;\r\n  gap: clamp(50px, 8vw, 120px);\r\n\r\n  margin-bottom: 46px;\r\n}\r\n\r\n#catalogo-productos .cpcv1-eyebrow {\r\n  display: block;\r\n  margin-bottom: 15px;\r\n\r\n  color: var(--cpcv1-teal);\r\n\r\n  font-size: 11px;\r\n  font-weight: 750;\r\n  letter-spacing: 0.15em;\r\n}\r\n\r\n#catalogo-productos .cpcv1-heading h2 {\r\n  margin: 0;\r\n\r\n  color: var(--cpcv1-navy);\r\n\r\n  font-size: clamp(43px, 5.2vw, 76px);\r\n  font-weight: 640;\r\n  line-height: 0.98;\r\n  letter-spacing: -0.055em;\r\n}\r\n\r\n#catalogo-productos .cpcv1-intro > p {\r\n  margin: 0;\r\n\r\n  color: var(--cpcv1-text);\r\n\r\n  font-size: clamp(16px, 1.25vw, 19px);\r\n  line-height: 1.65;\r\n}\r\n\r\n#catalogo-productos .cpcv1-catalog-status {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 13px;\r\n\r\n  margin-top: 24px;\r\n  padding-top: 20px;\r\n\r\n  border-top: 1px solid var(--cpcv1-border);\r\n}\r\n\r\n#catalogo-productos .cpcv1-status-light {\r\n  width: 10px;\r\n  height: 10px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: var(--cpcv1-teal);\r\n\r\n  box-shadow:\r\n    0 0 0 7px rgba(75, 166, 166, 0.1);\r\n}\r\n\r\n#catalogo-productos .cpcv1-catalog-status small {\r\n  display: block;\r\n  margin-bottom: 4px;\r\n\r\n  color: var(--cpcv1-text);\r\n\r\n  font-size: 8px;\r\n  font-weight: 750;\r\n  letter-spacing: 0.13em;\r\n}\r\n\r\n#catalogo-productos .cpcv1-catalog-status strong {\r\n  color: var(--cpcv1-navy);\r\n\r\n  font-size: 13px;\r\n  font-weight: 650;\r\n}\r\n\r\n\/* ==================================================\r\n   FILTROS\r\n================================================== *\/\r\n\r\n#catalogo-productos .cpcv1-filter-dock {\r\n  position: sticky;\r\n  top: 80px;\r\n  z-index: 40;\r\n\r\n  display: grid;\r\n  grid-template-columns:\r\n    minmax(300px, 1.08fr)\r\n    minmax(0, 1.6fr);\r\n\r\n  gap: 10px;\r\n\r\n  padding: 10px;\r\n\r\n  border: 1px solid var(--cpcv1-border);\r\n  border-radius: 25px;\r\n\r\n  background: rgba(255, 255, 255, 0.9);\r\n\r\n  box-shadow:\r\n    0 15px 38px rgba(6, 63, 91, 0.085);\r\n\r\n  backdrop-filter: blur(24px) saturate(170%);\r\n  -webkit-backdrop-filter: blur(24px) saturate(170%);\r\n}\r\n\r\n\/* BUSCADOR *\/\r\n\r\n#catalogo-productos .cpcv1-search {\r\n  display: grid;\r\n  grid-template-columns:\r\n    43px\r\n    minmax(0, 1fr)\r\n    39px;\r\n\r\n  align-items: center;\r\n  gap: 12px;\r\n\r\n  min-height: 68px;\r\n  padding: 0 9px 0 13px;\r\n\r\n  border-radius: 18px;\r\n\r\n  background: var(--cpcv1-soft);\r\n\r\n  transition:\r\n    background 0.3s ease,\r\n    box-shadow 0.3s ease;\r\n}\r\n\r\n#catalogo-productos .cpcv1-search:focus-within {\r\n  background: #ffffff;\r\n\r\n  box-shadow:\r\n    0 0 0 3px rgba(75, 166, 166, 0.13);\r\n}\r\n\r\n#catalogo-productos .cpcv1-search-icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  width: 43px;\r\n  height: 43px;\r\n\r\n  border-radius: 14px;\r\n\r\n  background: rgba(75, 166, 166, 0.11);\r\n  color: var(--cpcv1-teal);\r\n}\r\n\r\n#catalogo-productos .cpcv1-search-icon svg {\r\n  width: 21px;\r\n  height: 21px;\r\n\r\n  fill: none;\r\n  stroke: currentColor;\r\n  stroke-width: 1.8;\r\n  stroke-linecap: round;\r\n}\r\n\r\n#catalogo-productos .cpcv1-search-content {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 4px;\r\n\r\n  min-width: 0;\r\n}\r\n\r\n#catalogo-productos .cpcv1-search-content small {\r\n  color: rgba(6, 63, 91, 0.42);\r\n\r\n  font-size: 7px;\r\n  font-weight: 750;\r\n  letter-spacing: 0.13em;\r\n}\r\n\r\n#catalogo-productos .cpcv1-search-input {\r\n  width: 100%;\r\n  min-width: 0;\r\n  padding: 0;\r\n\r\n  border: 0;\r\n  outline: none;\r\n\r\n  background: transparent;\r\n  color: var(--cpcv1-navy);\r\n\r\n  font-size: 14px;\r\n  font-weight: 580;\r\n}\r\n\r\n#catalogo-productos\r\n.cpcv1-search-input::placeholder {\r\n  color: rgba(6, 63, 91, 0.32);\r\n}\r\n\r\n#catalogo-productos .cpcv1-search-clear {\r\n  position: relative;\r\n\r\n  width: 36px;\r\n  height: 36px;\r\n  padding: 0;\r\n\r\n  border: 0;\r\n  border-radius: 50%;\r\n\r\n  background: rgba(6, 63, 91, 0.06);\r\n\r\n  cursor: pointer;\r\n\r\n  opacity: 0;\r\n  pointer-events: none;\r\n\r\n  transition:\r\n    opacity 0.25s ease,\r\n    background 0.25s ease;\r\n}\r\n\r\n#catalogo-productos\r\n.cpcv1-search-clear.is-visible {\r\n  opacity: 1;\r\n  pointer-events: auto;\r\n}\r\n\r\n#catalogo-productos\r\n.cpcv1-search-clear:hover {\r\n  background: rgba(6, 63, 91, 0.12);\r\n}\r\n\r\n#catalogo-productos .cpcv1-search-clear i {\r\n  position: absolute;\r\n  left: 50%;\r\n  top: 50%;\r\n\r\n  width: 14px;\r\n  height: 1px;\r\n\r\n  background: var(--cpcv1-navy);\r\n}\r\n\r\n#catalogo-productos\r\n.cpcv1-search-clear i:first-child {\r\n  transform:\r\n    translate(-50%, -50%)\r\n    rotate(45deg);\r\n}\r\n\r\n#catalogo-productos\r\n.cpcv1-search-clear i:last-child {\r\n  transform:\r\n    translate(-50%, -50%)\r\n    rotate(-45deg);\r\n}\r\n\r\n\/* SELECTORES *\/\r\n\r\n#catalogo-productos .cpcv1-select-grid {\r\n  display: grid;\r\n  grid-template-columns:\r\n    repeat(4, minmax(0, 1fr));\r\n\r\n  gap: 7px;\r\n}\r\n\r\n#catalogo-productos .cpcv1-select-wrapper {\r\n  position: relative;\r\n\r\n  display: flex;\r\n  justify-content: center;\r\n  flex-direction: column;\r\n\r\n  min-width: 0;\r\n  min-height: 68px;\r\n  padding: 8px 31px 8px 14px;\r\n\r\n  border: 1px solid transparent;\r\n  border-radius: 17px;\r\n\r\n  background: var(--cpcv1-soft);\r\n\r\n  transition:\r\n    background 0.3s ease,\r\n    border-color 0.3s ease;\r\n}\r\n\r\n#catalogo-productos\r\n.cpcv1-select-wrapper:focus-within {\r\n  border-color: rgba(75, 166, 166, 0.23);\r\n  background: #ffffff;\r\n}\r\n\r\n#catalogo-productos .cpcv1-select-wrapper small {\r\n  margin-bottom: 5px;\r\n\r\n  color: rgba(6, 63, 91, 0.41);\r\n\r\n  font-size: 7px;\r\n  font-weight: 750;\r\n  letter-spacing: 0.13em;\r\n}\r\n\r\n#catalogo-productos .cpcv1-select-wrapper select {\r\n  width: 100%;\r\n  min-width: 0;\r\n  padding: 0;\r\n\r\n  border: 0;\r\n  outline: none;\r\n\r\n  appearance: none;\r\n  -webkit-appearance: none;\r\n\r\n  background: transparent;\r\n  color: var(--cpcv1-navy);\r\n\r\n  font-size: 11px;\r\n  font-weight: 630;\r\n\r\n  cursor: pointer;\r\n}\r\n\r\n#catalogo-productos\r\n.cpcv1-select-wrapper > span {\r\n  position: absolute;\r\n  right: 13px;\r\n  bottom: 17px;\r\n\r\n  color: var(--cpcv1-teal);\r\n\r\n  font-size: 14px;\r\n\r\n  pointer-events: none;\r\n}\r\n\r\n\/* ==================================================\r\n   RESULTADOS\r\n================================================== *\/\r\n\r\n#catalogo-productos .cpcv1-results-bar {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 25px;\r\n\r\n  min-height: 74px;\r\n  padding: 0 4px;\r\n\r\n  border-bottom: 1px solid var(--cpcv1-border);\r\n}\r\n\r\n#catalogo-productos .cpcv1-results-bar > div {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 16px;\r\n}\r\n\r\n#catalogo-productos .cpcv1-results-count {\r\n  color: var(--cpcv1-navy);\r\n\r\n  font-size: 13px;\r\n  font-weight: 650;\r\n}\r\n\r\n#catalogo-productos .cpcv1-results-context {\r\n  color: var(--cpcv1-text);\r\n\r\n  font-size: 10px;\r\n}\r\n\r\n#catalogo-productos .cpcv1-reset {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n\r\n  padding: 0;\r\n\r\n  border: 0;\r\n\r\n  background: transparent;\r\n  color: var(--cpcv1-teal);\r\n\r\n  font-size: 10px;\r\n  font-weight: 700;\r\n\r\n  cursor: pointer;\r\n\r\n  opacity: 0;\r\n  pointer-events: none;\r\n\r\n  transition: opacity 0.25s ease;\r\n}\r\n\r\n#catalogo-productos .cpcv1-reset.is-visible {\r\n  opacity: 1;\r\n  pointer-events: auto;\r\n}\r\n\r\n#catalogo-productos .cpcv1-reset span {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  width: 22px;\r\n  height: 22px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: rgba(75, 166, 166, 0.11);\r\n}\r\n\r\n\/* ==================================================\r\n   CAT\u00c1LOGO Y SKELETON\r\n================================================== *\/\r\n\r\n#catalogo-productos .cpcv1-catalog {\r\n  padding-top: 23px;\r\n}\r\n\r\n#catalogo-productos .cpcv1-skeleton-grid,\r\n#catalogo-productos .cpcv1-product-grid {\r\n  display: grid;\r\n  grid-template-columns:\r\n    repeat(4, minmax(0, 1fr));\r\n\r\n  gap: 13px;\r\n}\r\n\r\n#catalogo-productos .cpcv1-skeleton-card {\r\n  overflow: hidden;\r\n\r\n  border: 1px solid var(--cpcv1-border);\r\n  border-radius: 24px;\r\n\r\n  background: #ffffff;\r\n}\r\n\r\n#catalogo-productos .cpcv1-skeleton-card > span {\r\n  display: block;\r\n\r\n  aspect-ratio: 1.22 \/ 1;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      #eef0f1 20%,\r\n      #f7f8f8 45%,\r\n      #eef0f1 70%\r\n    );\r\n\r\n  background-size: 220% 100%;\r\n\r\n  animation:\r\n    cpcv1Skeleton\r\n    1.4s linear\r\n    infinite;\r\n}\r\n\r\n#catalogo-productos .cpcv1-skeleton-card > div {\r\n  padding: 20px;\r\n}\r\n\r\n#catalogo-productos .cpcv1-skeleton-card i {\r\n  display: block;\r\n\r\n  height: 11px;\r\n  margin-top: 10px;\r\n\r\n  border-radius: 999px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      #eef0f1 20%,\r\n      #f7f8f8 45%,\r\n      #eef0f1 70%\r\n    );\r\n\r\n  background-size: 220% 100%;\r\n\r\n  animation:\r\n    cpcv1Skeleton\r\n    1.4s linear\r\n    infinite;\r\n}\r\n\r\n#catalogo-productos\r\n.cpcv1-skeleton-card i:nth-child(1) {\r\n  width: 34%;\r\n}\r\n\r\n#catalogo-productos\r\n.cpcv1-skeleton-card i:nth-child(2) {\r\n  width: 82%;\r\n  height: 18px;\r\n}\r\n\r\n#catalogo-productos\r\n.cpcv1-skeleton-card i:nth-child(3) {\r\n  width: 65%;\r\n}\r\n\r\n@keyframes cpcv1Skeleton {\r\n  from {\r\n    background-position: 130% 0;\r\n  }\r\n\r\n  to {\r\n    background-position: -120% 0;\r\n  }\r\n}\r\n\r\n\/* ==================================================\r\n   TARJETA DE PRODUCTO\r\n================================================== *\/\r\n\r\n#catalogo-productos .cpcv1-product-card {\r\n  position: relative;\r\n  isolation: isolate;\r\n\r\n  min-width: 0;\r\n  overflow: hidden;\r\n\r\n  border: 1px solid var(--cpcv1-border);\r\n  border-radius: 24px;\r\n\r\n  background: #ffffff;\r\n  color: var(--cpcv1-navy);\r\n\r\n  text-decoration: none;\r\n\r\n  box-shadow:\r\n    0 3px 9px rgba(6, 63, 91, 0.025),\r\n    0 17px 38px rgba(6, 63, 91, 0.045);\r\n\r\n  transform: translateY(0);\r\n\r\n  transition:\r\n    transform 0.48s cubic-bezier(.22, .61, .36, 1),\r\n    border-color 0.35s ease,\r\n    box-shadow 0.48s ease;\r\n}\r\n\r\n#catalogo-productos .cpcv1-product-card:hover {\r\n  z-index: 5;\r\n\r\n  transform: translateY(-8px);\r\n\r\n  border-color: rgba(75, 166, 166, 0.32);\r\n\r\n  box-shadow:\r\n    0 14px 29px rgba(6, 63, 91, 0.08),\r\n    0 35px 67px rgba(6, 63, 91, 0.12);\r\n}\r\n\r\n\/* IMAGEN *\/\r\n\r\n#catalogo-productos .cpcv1-product-media {\r\n  position: relative;\r\n\r\n  aspect-ratio: 1.22 \/ 1;\r\n  overflow: hidden;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 80% 10%,\r\n      rgba(75, 166, 166, 0.17),\r\n      transparent 35%\r\n    ),\r\n    var(--cpcv1-soft);\r\n}\r\n\r\n#catalogo-productos .cpcv1-product-media img {\r\n  display: block;\r\n\r\n  width: 100%;\r\n  height: 100%;\r\n\r\n  object-fit: contain;\r\n  padding: 17px;\r\n\r\n  transition:\r\n    transform 0.7s cubic-bezier(.22, .61, .36, 1);\r\n}\r\n\r\n#catalogo-productos\r\n.cpcv1-product-card:hover\r\n.cpcv1-product-media img {\r\n  transform: scale(1.055);\r\n}\r\n\r\n#catalogo-productos .cpcv1-image-placeholder {\r\n  position: absolute;\r\n  inset: 0;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n#catalogo-productos .cpcv1-image-placeholder span {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  width: 105px;\r\n  height: 105px;\r\n\r\n  border: 1px solid rgba(6, 63, 91, 0.09);\r\n  border-radius: 30px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      145deg,\r\n      #ffffff,\r\n      rgba(75, 166, 166, 0.14)\r\n    );\r\n\r\n  color: var(--cpcv1-navy);\r\n\r\n  font-size: 35px;\r\n  font-weight: 680;\r\n  letter-spacing: -0.06em;\r\n\r\n  box-shadow:\r\n    0 13px 28px rgba(6, 63, 91, 0.07);\r\n\r\n  transition:\r\n    transform 0.5s ease;\r\n}\r\n\r\n#catalogo-productos\r\n.cpcv1-product-card:hover\r\n.cpcv1-image-placeholder span {\r\n  transform:\r\n    rotate(-3deg)\r\n    scale(1.06);\r\n}\r\n\r\n\/* BADGES *\/\r\n\r\n#catalogo-productos .cpcv1-media-badges {\r\n  position: absolute;\r\n  top: 13px;\r\n  left: 13px;\r\n  right: 13px;\r\n  z-index: 4;\r\n\r\n  display: flex;\r\n  align-items: flex-start;\r\n  justify-content: space-between;\r\n  gap: 10px;\r\n}\r\n\r\n#catalogo-productos .cpcv1-category-badge {\r\n  display: inline-flex;\r\n  align-items: center;\r\n\r\n  min-height: 29px;\r\n  max-width: 72%;\r\n  padding: 0 11px;\r\n\r\n  border: 1px solid rgba(255, 255, 255, 0.65);\r\n  border-radius: 999px;\r\n\r\n  background: rgba(255, 255, 255, 0.83);\r\n  color: var(--cpcv1-navy);\r\n\r\n  font-size: 7px;\r\n  font-weight: 750;\r\n  letter-spacing: 0.1em;\r\n  text-transform: uppercase;\r\n\r\n  backdrop-filter: blur(12px);\r\n  -webkit-backdrop-filter: blur(12px);\r\n\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n#catalogo-productos .cpcv1-card-arrow {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n\r\n  width: 36px;\r\n  height: 36px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: rgba(6, 63, 91, 0.86);\r\n  color: #ffffff;\r\n\r\n  opacity: 0;\r\n  transform: translate(-4px, 4px);\r\n\r\n  transition:\r\n    opacity 0.3s ease,\r\n    transform 0.35s ease,\r\n    background 0.3s ease;\r\n}\r\n\r\n#catalogo-productos\r\n.cpcv1-product-card:hover\r\n.cpcv1-card-arrow {\r\n  opacity: 1;\r\n  transform: translate(0, 0);\r\n\r\n  background: var(--cpcv1-teal);\r\n}\r\n\r\n#catalogo-productos .cpcv1-card-arrow svg {\r\n  width: 17px;\r\n  height: 17px;\r\n\r\n  fill: none;\r\n  stroke: currentColor;\r\n  stroke-width: 1.8;\r\n  stroke-linecap: round;\r\n  stroke-linejoin: round;\r\n}\r\n\r\n\/* CONTENIDO *\/\r\n\r\n#catalogo-productos .cpcv1-product-content {\r\n  padding: 21px;\r\n}\r\n\r\n#catalogo-productos .cpcv1-product-brand {\r\n  display: block;\r\n  margin-bottom: 9px;\r\n\r\n  color: var(--cpcv1-teal);\r\n\r\n  font-size: 8px;\r\n  font-weight: 750;\r\n  letter-spacing: 0.13em;\r\n  text-transform: uppercase;\r\n}\r\n\r\n#catalogo-productos .cpcv1-product-title {\r\n  display: -webkit-box;\r\n  min-height: 51px;\r\n  margin: 0;\r\n\r\n  overflow: hidden;\r\n\r\n  color: var(--cpcv1-navy);\r\n\r\n  font-size: 20px;\r\n  font-weight: 650;\r\n  line-height: 1.22;\r\n  letter-spacing: -0.03em;\r\n\r\n  -webkit-box-orient: vertical;\r\n  -webkit-line-clamp: 2;\r\n}\r\n\r\n#catalogo-productos .cpcv1-product-excerpt {\r\n  display: -webkit-box;\r\n  min-height: 54px;\r\n  margin: 13px 0 0;\r\n\r\n  overflow: hidden;\r\n\r\n  color: var(--cpcv1-text);\r\n\r\n  font-size: 11px;\r\n  line-height: 1.55;\r\n\r\n  -webkit-box-orient: vertical;\r\n  -webkit-line-clamp: 3;\r\n}\r\n\r\n#catalogo-productos .cpcv1-card-footer {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 15px;\r\n\r\n  margin-top: 19px;\r\n  padding-top: 15px;\r\n\r\n  border-top: 1px solid var(--cpcv1-border);\r\n}\r\n\r\n#catalogo-productos .cpcv1-card-footer span {\r\n  color: var(--cpcv1-navy);\r\n\r\n  font-size: 10px;\r\n  font-weight: 650;\r\n}\r\n\r\n#catalogo-productos .cpcv1-card-footer small {\r\n  color: var(--cpcv1-teal);\r\n\r\n  font-size: 17px;\r\n\r\n  transition: transform 0.3s ease;\r\n}\r\n\r\n#catalogo-productos\r\n.cpcv1-product-card:hover\r\n.cpcv1-card-footer small {\r\n  transform: translateX(4px);\r\n}\r\n\r\n\/* ==================================================\r\n   EMPTY Y ERROR\r\n================================================== *\/\r\n\r\n#catalogo-productos .cpcv1-empty,\r\n#catalogo-productos .cpcv1-error {\r\n  padding: 72px 25px;\r\n\r\n  border: 1px dashed rgba(6, 63, 91, 0.18);\r\n  border-radius: 27px;\r\n\r\n  background: rgba(255, 255, 255, 0.7);\r\n\r\n  text-align: center;\r\n}\r\n\r\n#catalogo-productos .cpcv1-empty-icon,\r\n#catalogo-productos .cpcv1-error-icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  width: 78px;\r\n  height: 78px;\r\n  margin: 0 auto 22px;\r\n\r\n  border-radius: 24px;\r\n\r\n  background: rgba(75, 166, 166, 0.11);\r\n  color: var(--cpcv1-teal);\r\n}\r\n\r\n#catalogo-productos .cpcv1-empty-icon svg,\r\n#catalogo-productos .cpcv1-error-icon svg {\r\n  width: 43px;\r\n  height: 43px;\r\n\r\n  fill: none;\r\n  stroke: currentColor;\r\n  stroke-width: 1.7;\r\n  stroke-linecap: round;\r\n  stroke-linejoin: round;\r\n}\r\n\r\n#catalogo-productos .cpcv1-empty > span,\r\n#catalogo-productos .cpcv1-error > span {\r\n  display: block;\r\n  margin-bottom: 10px;\r\n\r\n  color: var(--cpcv1-teal);\r\n\r\n  font-size: 9px;\r\n  font-weight: 750;\r\n  letter-spacing: 0.14em;\r\n}\r\n\r\n#catalogo-productos .cpcv1-empty h3,\r\n#catalogo-productos .cpcv1-error h3 {\r\n  margin: 0;\r\n\r\n  color: var(--cpcv1-navy);\r\n\r\n  font-size: 31px;\r\n  font-weight: 650;\r\n  letter-spacing: -0.04em;\r\n}\r\n\r\n#catalogo-productos .cpcv1-empty p,\r\n#catalogo-productos .cpcv1-error p {\r\n  max-width: 590px;\r\n  margin: 13px auto 23px;\r\n\r\n  color: var(--cpcv1-text);\r\n\r\n  font-size: 13px;\r\n  line-height: 1.6;\r\n}\r\n\r\n#catalogo-productos .cpcv1-empty button,\r\n#catalogo-productos .cpcv1-error button {\r\n  min-height: 49px;\r\n  padding: 0 20px;\r\n\r\n  border: 0;\r\n  border-radius: 999px;\r\n\r\n  background: var(--cpcv1-navy);\r\n  color: #ffffff;\r\n\r\n  font-size: 11px;\r\n  font-weight: 650;\r\n\r\n  cursor: pointer;\r\n\r\n  transition:\r\n    transform 0.3s ease,\r\n    background 0.3s ease;\r\n}\r\n\r\n#catalogo-productos .cpcv1-empty button:hover,\r\n#catalogo-productos .cpcv1-error button:hover {\r\n  transform: translateY(-3px);\r\n\r\n  background: var(--cpcv1-teal);\r\n}\r\n\r\n\/* ==================================================\r\n   CARGAR M\u00c1S \/ INFINITE SCROLL\r\n================================================== *\/\r\n\r\n#catalogo-productos .cpcv1-load-area {\r\n  display: flex;\r\n  justify-content: center;\r\n\r\n  padding-top: 36px;\r\n}\r\n\r\n#catalogo-productos .cpcv1-load-more {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 16px;\r\n\r\n  min-height: 57px;\r\n  padding: 0 8px 0 23px;\r\n\r\n  border: 0;\r\n  border-radius: 999px;\r\n\r\n  background: var(--cpcv1-navy);\r\n  color: #ffffff;\r\n\r\n  font-size: 12px;\r\n  font-weight: 650;\r\n\r\n  cursor: pointer;\r\n\r\n  transition:\r\n    transform 0.3s ease,\r\n    background 0.3s ease;\r\n}\r\n\r\n#catalogo-productos .cpcv1-load-more > span {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  width: 43px;\r\n  height: 43px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: var(--cpcv1-teal);\r\n\r\n  transition:\r\n    transform 0.35s ease,\r\n    background 0.3s ease;\r\n}\r\n\r\n#catalogo-productos .cpcv1-load-more svg {\r\n  width: 19px;\r\n  height: 19px;\r\n\r\n  fill: none;\r\n  stroke: currentColor;\r\n  stroke-width: 1.8;\r\n  stroke-linecap: round;\r\n  stroke-linejoin: round;\r\n}\r\n\r\n#catalogo-productos .cpcv1-load-more:hover {\r\n  transform: translateY(-4px);\r\n\r\n  background: var(--cpcv1-teal);\r\n}\r\n\r\n#catalogo-productos\r\n.cpcv1-load-more:hover > span {\r\n  transform: translateY(3px);\r\n\r\n  background: var(--cpcv1-navy);\r\n}\r\n\r\n\/* ==================================================\r\n   AYUDA\r\n================================================== *\/\r\n\r\n#catalogo-productos .cpcv1-help {\r\n  position: relative;\r\n  isolation: isolate;\r\n\r\n  display: grid;\r\n  grid-template-columns:\r\n    minmax(200px, 0.45fr)\r\n    minmax(0, 1.2fr)\r\n    auto;\r\n\r\n  align-items: center;\r\n  gap: clamp(35px, 5vw, 75px);\r\n\r\n  min-height: 295px;\r\n  margin-top: clamp(65px, 7vw, 100px);\r\n  padding: clamp(34px, 4.5vw, 62px);\r\n  overflow: hidden;\r\n\r\n  border-radius: 32px;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 8% 50%,\r\n      rgba(135, 208, 205, 0.33),\r\n      transparent 29%\r\n    ),\r\n    linear-gradient(\r\n      135deg,\r\n      var(--cpcv1-navy),\r\n      var(--cpcv1-deep)\r\n    );\r\n\r\n  color: #ffffff;\r\n\r\n  box-shadow:\r\n    0 28px 68px rgba(6, 63, 91, 0.17);\r\n}\r\n\r\n#catalogo-productos .cpcv1-help-graphic {\r\n  position: relative;\r\n\r\n  width: 200px;\r\n  height: 200px;\r\n}\r\n\r\n#catalogo-productos .cpcv1-help-graphic span {\r\n  position: absolute;\r\n  left: 50%;\r\n  top: 50%;\r\n\r\n  border: 1px solid rgba(255, 255, 255, 0.19);\r\n  border-radius: 50%;\r\n\r\n  transform: translate(-50%, -50%);\r\n}\r\n\r\n#catalogo-productos\r\n.cpcv1-help-graphic span:nth-child(1) {\r\n  width: 90px;\r\n  height: 90px;\r\n\r\n  background: rgba(75, 166, 166, 0.28);\r\n}\r\n\r\n#catalogo-productos\r\n.cpcv1-help-graphic span:nth-child(2) {\r\n  width: 145px;\r\n  height: 145px;\r\n}\r\n\r\n#catalogo-productos\r\n.cpcv1-help-graphic span:nth-child(3) {\r\n  width: 195px;\r\n  height: 195px;\r\n}\r\n\r\n#catalogo-productos .cpcv1-help-graphic i {\r\n  position: absolute;\r\n\r\n  width: 10px;\r\n  height: 10px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: var(--cpcv1-teal-light);\r\n\r\n  box-shadow:\r\n    0 0 0 8px rgba(135, 208, 205, 0.08);\r\n}\r\n\r\n#catalogo-productos\r\n.cpcv1-help-graphic i:nth-of-type(1) {\r\n  top: 30px;\r\n  left: 37px;\r\n}\r\n\r\n#catalogo-productos\r\n.cpcv1-help-graphic i:nth-of-type(2) {\r\n  right: 2px;\r\n  top: 96px;\r\n}\r\n\r\n#catalogo-productos\r\n.cpcv1-help-graphic i:nth-of-type(3) {\r\n  left: 75px;\r\n  bottom: 1px;\r\n}\r\n\r\n#catalogo-productos .cpcv1-help-copy {\r\n  position: relative;\r\n  z-index: 4;\r\n}\r\n\r\n#catalogo-productos .cpcv1-help-copy h3 {\r\n  margin: 0;\r\n\r\n  color: #ffffff;\r\n\r\n  font-size: clamp(35px, 3.6vw, 55px);\r\n  font-weight: 620;\r\n  line-height: 1;\r\n  letter-spacing: -0.052em;\r\n}\r\n\r\n#catalogo-productos .cpcv1-help-copy p {\r\n  max-width: 700px;\r\n  margin: 17px 0 0;\r\n\r\n  color: rgba(255, 255, 255, 0.67);\r\n\r\n  font-size: 13px;\r\n  line-height: 1.6;\r\n}\r\n\r\n#catalogo-productos .cpcv1-help-button {\r\n  position: relative;\r\n  z-index: 4;\r\n\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 16px;\r\n\r\n  min-height: 57px;\r\n  padding: 0 8px 0 22px;\r\n\r\n  border-radius: 999px;\r\n\r\n  background: #ffffff;\r\n  color: var(--cpcv1-navy);\r\n\r\n  font-size: 12px;\r\n  font-weight: 650;\r\n  text-decoration: none;\r\n  white-space: nowrap;\r\n\r\n  transition:\r\n    transform 0.3s ease,\r\n    background 0.3s ease,\r\n    color 0.3s ease;\r\n}\r\n\r\n#catalogo-productos .cpcv1-help-button > span {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  width: 43px;\r\n  height: 43px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: var(--cpcv1-teal);\r\n  color: #ffffff;\r\n\r\n  transition:\r\n    transform 0.35s ease,\r\n    background 0.3s ease;\r\n}\r\n\r\n#catalogo-productos .cpcv1-help-button svg {\r\n  width: 19px;\r\n  height: 19px;\r\n\r\n  fill: none;\r\n  stroke: currentColor;\r\n  stroke-width: 1.8;\r\n  stroke-linecap: round;\r\n  stroke-linejoin: round;\r\n}\r\n\r\n#catalogo-productos .cpcv1-help-button:hover {\r\n  transform: translateY(-4px);\r\n\r\n  background: var(--cpcv1-teal);\r\n  color: #ffffff;\r\n}\r\n\r\n#catalogo-productos\r\n.cpcv1-help-button:hover > span {\r\n  transform:\r\n    rotate(5deg)\r\n    scale(1.06);\r\n\r\n  background: var(--cpcv1-navy);\r\n}\r\n\r\n\/* ==================================================\r\n   REVEAL\r\n================================================== *\/\r\n\r\n#catalogo-productos .cpcv1-reveal {\r\n  opacity: 0;\r\n  transform: translateY(28px);\r\n}\r\n\r\n#catalogo-productos\r\n.cpcv1-reveal.is-visible {\r\n  opacity: 1;\r\n  transform: translateY(0);\r\n\r\n  transition:\r\n    opacity 0.85s ease,\r\n    transform 0.85s cubic-bezier(.22, .61, .36, 1);\r\n}\r\n\r\n\/* ==================================================\r\n   TABLET\r\n================================================== *\/\r\n\r\n@media (max-width: 1150px) {\r\n  #catalogo-productos .cpcv1-filter-dock {\r\n    position: relative;\r\n    top: auto;\r\n\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  #catalogo-productos .cpcv1-product-grid,\r\n  #catalogo-productos .cpcv1-skeleton-grid {\r\n    grid-template-columns:\r\n      repeat(3, minmax(0, 1fr));\r\n  }\r\n\r\n  #catalogo-productos .cpcv1-help {\r\n    grid-template-columns:\r\n      160px\r\n      minmax(0, 1fr);\r\n\r\n    align-items: center;\r\n  }\r\n\r\n  #catalogo-productos .cpcv1-help-button {\r\n    grid-column: 2;\r\n    justify-self: start;\r\n  }\r\n\r\n  #catalogo-productos .cpcv1-help-graphic {\r\n    width: 160px;\r\n    height: 160px;\r\n  }\r\n\r\n  #catalogo-productos\r\n  .cpcv1-help-graphic span:nth-child(3) {\r\n    width: 155px;\r\n    height: 155px;\r\n  }\r\n}\r\n\r\n@media (max-width: 950px) {\r\n  #catalogo-productos .cpcv1-header {\r\n    grid-template-columns: 1fr;\r\n    gap: 27px;\r\n  }\r\n\r\n  #catalogo-productos .cpcv1-intro {\r\n    max-width: 730px;\r\n  }\r\n\r\n  #catalogo-productos .cpcv1-select-grid {\r\n    grid-template-columns:\r\n      repeat(2, minmax(0, 1fr));\r\n  }\r\n\r\n  #catalogo-productos .cpcv1-product-grid,\r\n  #catalogo-productos .cpcv1-skeleton-grid {\r\n    grid-template-columns:\r\n      repeat(2, minmax(0, 1fr));\r\n  }\r\n}\r\n\r\n\/* ==================================================\r\n   M\u00d3VIL\r\n================================================== *\/\r\n\r\n@media (max-width: 767px) {\r\n  #catalogo-productos {\r\n    --cpcv1-radius: 23px;\r\n  }\r\n\r\n  #catalogo-productos .cpcv1-shell {\r\n    width: calc(100% - 28px);\r\n\r\n    padding:\r\n      62px\r\n      0\r\n      68px;\r\n  }\r\n\r\n  #catalogo-productos .cpcv1-heading h2 {\r\n    font-size: 44px;\r\n  }\r\n\r\n  #catalogo-productos .cpcv1-header {\r\n    margin-bottom: 34px;\r\n  }\r\n\r\n  #catalogo-productos .cpcv1-filter-dock {\r\n    padding: 8px;\r\n\r\n    border-radius: 21px;\r\n  }\r\n\r\n  #catalogo-productos .cpcv1-search {\r\n    grid-template-columns:\r\n      39px\r\n      minmax(0, 1fr)\r\n      36px;\r\n\r\n    padding-left: 10px;\r\n  }\r\n\r\n  #catalogo-productos .cpcv1-search-icon {\r\n    width: 39px;\r\n    height: 39px;\r\n  }\r\n\r\n  #catalogo-productos .cpcv1-select-grid {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  #catalogo-productos .cpcv1-results-bar {\r\n    align-items: flex-start;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    gap: 9px;\r\n\r\n    padding: 15px 3px;\r\n  }\r\n\r\n  #catalogo-productos .cpcv1-results-bar > div {\r\n    align-items: flex-start;\r\n    flex-direction: column;\r\n    gap: 5px;\r\n  }\r\n\r\n  #catalogo-productos .cpcv1-product-grid,\r\n  #catalogo-productos .cpcv1-skeleton-grid {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  #catalogo-productos .cpcv1-product-media {\r\n    aspect-ratio: 1.35 \/ 1;\r\n  }\r\n\r\n  #catalogo-productos .cpcv1-card-arrow {\r\n    opacity: 1;\r\n    transform: none;\r\n  }\r\n\r\n  #catalogo-productos .cpcv1-help {\r\n    grid-template-columns: 1fr;\r\n\r\n    padding: 32px 25px;\r\n\r\n    border-radius: 25px;\r\n  }\r\n\r\n  #catalogo-productos .cpcv1-help-graphic {\r\n    width: 150px;\r\n    height: 150px;\r\n  }\r\n\r\n  #catalogo-productos .cpcv1-help-button {\r\n    grid-column: auto;\r\n\r\n    justify-content: space-between;\r\n    justify-self: stretch;\r\n  }\r\n}\r\n\r\n\/* ==================================================\r\n   MOVIMIENTO REDUCIDO\r\n================================================== *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  #catalogo-productos *,\r\n  #catalogo-productos *::before,\r\n  #catalogo-productos *::after {\r\n    transition-duration: 0.01ms !important;\r\n    animation-duration: 0.01ms !important;\r\n  }\r\n}\r\n\r\n\/* ==================================================\r\n   ESTADOS REALES DEL CAT\u00c1LOGO\r\n\r\n   El skeleton ya no compite con la grilla de productos.\r\n   El contenedor cambia de estado:\r\n   - is-loading: muestra placeholders\r\n   - is-ready: muestra productos\r\n   - is-empty: muestra mensaje sin resultados\r\n   - is-error: muestra error\r\n================================================== *\/\r\n\r\n#catalogo-productos .cpcv1-skeleton-grid,\r\n#catalogo-productos .cpcv1-product-grid,\r\n#catalogo-productos .cpcv1-empty,\r\n#catalogo-productos .cpcv1-error,\r\n#catalogo-productos .cpcv1-load-area {\r\n  display: none;\r\n}\r\n\r\n#catalogo-productos.is-loading .cpcv1-skeleton-grid {\r\n  display: grid;\r\n}\r\n\r\n#catalogo-productos.is-ready .cpcv1-product-grid {\r\n  display: grid;\r\n}\r\n\r\n#catalogo-productos.is-empty .cpcv1-empty {\r\n  display: block;\r\n}\r\n\r\n#catalogo-productos.is-error .cpcv1-error {\r\n  display: block;\r\n}\r\n\r\n#catalogo-productos.has-more .cpcv1-load-area {\r\n  display: flex;\r\n}\r\n\r\n\r\n\/* ==================================================\r\n   INFINITE SCROLL DEL CAT\u00c1LOGO\r\n\r\n   El bot\u00f3n se elimina visualmente y el \u00e1rea inferior\r\n   funciona como sentinel para cargar m\u00e1s productos\r\n   autom\u00e1ticamente al hacer scroll.\r\n================================================== *\/\r\n\r\n#catalogo-productos .cpcv1-load-more {\r\n  display: none !important;\r\n}\r\n\r\n#catalogo-productos .cpcv1-infinite-loader {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 12px;\r\n\r\n  min-height: 52px;\r\n  padding: 0 18px;\r\n\r\n  border: 1px solid rgba(75, 166, 166, 0.18);\r\n  border-radius: 999px;\r\n\r\n  background: rgba(255, 255, 255, 0.74);\r\n  color: var(--cpcv1-teal);\r\n\r\n  box-shadow:\r\n    0 10px 26px rgba(6, 63, 91, 0.055);\r\n\r\n  backdrop-filter: blur(14px);\r\n  -webkit-backdrop-filter: blur(14px);\r\n}\r\n\r\n#catalogo-productos .cpcv1-infinite-loader span {\r\n  width: 16px;\r\n  height: 16px;\r\n\r\n  border: 2px solid rgba(75, 166, 166, 0.18);\r\n  border-top-color: var(--cpcv1-teal);\r\n  border-radius: 50%;\r\n\r\n  animation: cpcv1InfiniteSpin 0.75s linear infinite;\r\n}\r\n\r\n#catalogo-productos .cpcv1-infinite-loader small {\r\n  color: var(--cpcv1-navy);\r\n\r\n  font-size: 10px;\r\n  font-weight: 700;\r\n  letter-spacing: 0.09em;\r\n  text-transform: uppercase;\r\n}\r\n\r\n@keyframes cpcv1InfiniteSpin {\r\n  to {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n\r\n\r\n\r\n\/* ==================================================\r\n   AJUSTES DE NAVEGACI\u00d3N Y RENDIMIENTO\r\n================================================== *\/\r\n\r\n#catalogo-productos {\r\n  scroll-margin-top: 105px;\r\n}\r\n\r\n#catalogo-productos .cpcv1-product-card {\r\n  content-visibility: auto;\r\n  contain-intrinsic-size: 420px 520px;\r\n}\r\n\r\n<\/style>\r\n\r\n<script>\r\n(function () {\r\n  const root = document.getElementById('catalogo-productos');\r\n\r\n  if (!root || root.dataset.ready === 'true') {\r\n    return;\r\n  }\r\n\r\n  root.dataset.ready = 'true';\r\n\r\n  const CONFIG = {\r\n    endpointCandidates: [\r\n      '\/?wc-ajax=commerss_catalog',\r\n      '\/wp-admin\/admin-ajax.php?action=commerss_catalog'\r\n    ],\r\n    perPage: 8,\r\n    searchDelay: 280,\r\n    priorityImageCount: 4\r\n  };\r\n\r\n  const searchInput = root.querySelector('.cpcv1-search-input');\r\n  const searchClear = root.querySelector('.cpcv1-search-clear');\r\n  const brandSelect = root.querySelector('.cpcv1-filter-brand');\r\n  const categorySelect = root.querySelector('.cpcv1-filter-category');\r\n  const industrySelect = root.querySelector('.cpcv1-filter-industry');\r\n  const sortSelect = root.querySelector('.cpcv1-filter-sort');\r\n  const resetButton = root.querySelector('.cpcv1-reset');\r\n  const resultCount = root.querySelector('.cpcv1-results-count');\r\n  const totalLabel = root.querySelector('.cpcv1-total-label');\r\n  const productGrid = root.querySelector('.cpcv1-product-grid');\r\n  const skeletonGrid = root.querySelector('.cpcv1-skeleton-grid');\r\n  const emptyState = root.querySelector('.cpcv1-empty');\r\n  const emptyButton = emptyState ? emptyState.querySelector('button') : null;\r\n  const errorState = root.querySelector('.cpcv1-error');\r\n  const errorMessage = root.querySelector('.cpcv1-error-message');\r\n  const retryButton = errorState ? errorState.querySelector('button') : null;\r\n  const loadArea = root.querySelector('.cpcv1-load-area');\r\n  const reveals = root.querySelectorAll('.cpcv1-reveal');\r\n\r\n  let activeEndpoint = '';\r\n  let currentPage = 1;\r\n  let totalItems = 0;\r\n  let totalPages = 1;\r\n  let isLoading = false;\r\n  let requestController = null;\r\n  let requestSerial = 0;\r\n  let infiniteObserver = null;\r\n  let filtersLoaded = false;\r\n  let searchTimer = null;\r\n\r\n  function slugify(value) {\r\n    return String(value || '')\r\n      .normalize('NFD')\r\n      .replace(\/[\\u0300-\\u036f]\/g, '')\r\n      .toLowerCase()\r\n      .trim()\r\n      .replace(\/&\/g, ' y ')\r\n      .replace(\/\\+\/g, ' plus ')\r\n      .replace(\/[^a-z0-9]+\/g, '-')\r\n      .replace(\/^-+|-+$\/g, '');\r\n  }\r\n\r\n  function initials(value) {\r\n    const ignored = ['de', 'del', 'la', 'el', 'y', 'the', 'of'];\r\n    const words = String(value || '')\r\n      .replace(\/[()]\/g, ' ')\r\n      .split(\/\\s+\/)\r\n      .filter(Boolean)\r\n      .filter(function (word) {\r\n        return !ignored.includes(slugify(word));\r\n      });\r\n\r\n    if (!words.length) {\r\n      return 'PR';\r\n    }\r\n\r\n    if (words.length === 1) {\r\n      return words[0].slice(0, 2).toUpperCase();\r\n    }\r\n\r\n    return (words[0].charAt(0) + words[words.length - 1].charAt(0)).toUpperCase();\r\n  }\r\n\r\n  function setCatalogViewState(state) {\r\n    root.classList.remove('is-loading', 'is-ready', 'is-empty', 'is-error');\r\n    root.classList.add('is-' + state);\r\n\r\n    if (skeletonGrid) {\r\n      skeletonGrid.hidden = state !== 'loading';\r\n    }\r\n\r\n    if (productGrid) {\r\n      productGrid.hidden = state !== 'ready';\r\n    }\r\n\r\n    if (emptyState) {\r\n      emptyState.hidden = state !== 'empty';\r\n    }\r\n\r\n    if (errorState) {\r\n      errorState.hidden = state !== 'error';\r\n    }\r\n  }\r\n\r\n  function setLoadMoreVisible(visible) {\r\n    root.classList.toggle('has-more', Boolean(visible));\r\n\r\n    if (loadArea) {\r\n      loadArea.hidden = !visible;\r\n    }\r\n  }\r\n\r\n  function filtersAreActive() {\r\n    return Boolean(\r\n      searchInput.value.trim() ||\r\n      brandSelect.value ||\r\n      categorySelect.value ||\r\n      industrySelect.value ||\r\n      sortSelect.value !== 'default'\r\n    );\r\n  }\r\n\r\n  function updateControlState() {\r\n    searchClear.classList.toggle('is-visible', Boolean(searchInput.value.trim()));\r\n    resetButton.classList.toggle('is-visible', filtersAreActive());\r\n  }\r\n\r\n  function getURLParameters() {\r\n    const parameters = new URLSearchParams(window.location.search);\r\n\r\n    return {\r\n      search: parameters.get('buscar') || '',\r\n      brand: parameters.get('marca') || '',\r\n      category: parameters.get('categoria') || '',\r\n      industry: parameters.get('industria') || '',\r\n      sort: parameters.get('orden') || 'default'\r\n    };\r\n  }\r\n\r\n  function applyInitialURLValues() {\r\n    const parameters = getURLParameters();\r\n    searchInput.value = parameters.search;\r\n    sortSelect.value = ['default', 'az', 'za', 'newest'].includes(parameters.sort)\r\n      ? parameters.sort\r\n      : 'default';\r\n  }\r\n\r\n  function selectOptionByValue(select, value) {\r\n    if (!select || !value) {\r\n      return;\r\n    }\r\n\r\n    const requested = slugify(value);\r\n    const option = Array.from(select.options).find(function (item) {\r\n      return slugify(item.value) === requested || slugify(item.textContent) === requested;\r\n    });\r\n\r\n    if (option) {\r\n      select.value = option.value;\r\n    }\r\n  }\r\n\r\n  function applyURLFilterSelections() {\r\n    const parameters = getURLParameters();\r\n    selectOptionByValue(brandSelect, parameters.brand);\r\n    selectOptionByValue(categorySelect, parameters.category);\r\n    selectOptionByValue(industrySelect, parameters.industry);\r\n  }\r\n\r\n  function updateURL() {\r\n    const url = new URL(window.location.href);\r\n    const values = {\r\n      buscar: searchInput.value.trim(),\r\n      marca: brandSelect.value,\r\n      categoria: categorySelect.value,\r\n      industria: industrySelect.value,\r\n      orden: sortSelect.value !== 'default' ? sortSelect.value : ''\r\n    };\r\n\r\n    Object.keys(values).forEach(function (key) {\r\n      if (values[key]) {\r\n        url.searchParams.set(key, values[key]);\r\n      } else {\r\n        url.searchParams.delete(key);\r\n      }\r\n    });\r\n\r\n    window.history.replaceState({}, '', url.pathname + url.search + '#catalogo-productos');\r\n  }\r\n\r\n  function populateSelect(select, items, placeholder) {\r\n    if (!select) {\r\n      return;\r\n    }\r\n\r\n    const currentValue = select.value;\r\n    select.innerHTML = '';\r\n\r\n    const defaultOption = document.createElement('option');\r\n    defaultOption.value = '';\r\n    defaultOption.textContent = placeholder;\r\n    select.appendChild(defaultOption);\r\n\r\n    (items || []).forEach(function (item) {\r\n      const option = document.createElement('option');\r\n      option.value = item.value || '';\r\n      option.textContent = item.label || item.value || '';\r\n      select.appendChild(option);\r\n    });\r\n\r\n    if (currentValue) {\r\n      selectOptionByValue(select, currentValue);\r\n    }\r\n  }\r\n\r\n  function applyFilterOptions(filters) {\r\n    if (!filters) {\r\n      return;\r\n    }\r\n\r\n    populateSelect(brandSelect, filters.brands, 'Todas las marcas');\r\n    populateSelect(categorySelect, filters.categories, 'Todas las categor\u00edas');\r\n    populateSelect(industrySelect, filters.industries, 'Todas las industrias');\r\n\r\n    filtersLoaded = true;\r\n    applyURLFilterSelections();\r\n  }\r\n\r\n  function buildRequestURL(endpoint, page, includeFilters) {\r\n    const url = new URL(endpoint, window.location.origin);\r\n    const initial = getURLParameters();\r\n\r\n    url.searchParams.set('page', String(page));\r\n    url.searchParams.set('per_page', String(CONFIG.perPage));\r\n\r\n    const search = searchInput.value.trim();\r\n    const brand = filtersLoaded ? brandSelect.value : initial.brand;\r\n    const category = filtersLoaded ? categorySelect.value : initial.category;\r\n    const industry = filtersLoaded ? industrySelect.value : initial.industry;\r\n    const sort = sortSelect.value || 'default';\r\n\r\n    if (search) {\r\n      url.searchParams.set('search', search);\r\n    }\r\n    if (brand) {\r\n      url.searchParams.set('brand', brand);\r\n    }\r\n    if (category) {\r\n      url.searchParams.set('category', category);\r\n    }\r\n    if (industry) {\r\n      url.searchParams.set('industry', industry);\r\n    }\r\n    if (sort) {\r\n      url.searchParams.set('sort', sort);\r\n    }\r\n    if (includeFilters) {\r\n      url.searchParams.set('include_filters', '1');\r\n    }\r\n\r\n    return url.toString();\r\n  }\r\n\r\n  function createImagePlaceholder(value) {\r\n    const placeholder = document.createElement('div');\r\n    placeholder.className = 'cpcv1-image-placeholder';\r\n\r\n    const monogram = document.createElement('span');\r\n    monogram.textContent = initials(value);\r\n\r\n    placeholder.appendChild(monogram);\r\n    return placeholder;\r\n  }\r\n\r\n  function createProductCard(product, index) {\r\n    const card = document.createElement('a');\r\n    card.className = 'cpcv1-product-card';\r\n    card.href = product.link;\r\n    card.setAttribute('aria-label', 'Ver producto ' + product.title);\r\n\r\n    const media = document.createElement('div');\r\n    media.className = 'cpcv1-product-media';\r\n\r\n    const badges = document.createElement('div');\r\n    badges.className = 'cpcv1-media-badges';\r\n\r\n    const category = document.createElement('span');\r\n    category.className = 'cpcv1-category-badge';\r\n    category.textContent = product.category || 'Producto industrial';\r\n\r\n    const arrow = document.createElement('span');\r\n    arrow.className = 'cpcv1-card-arrow';\r\n    arrow.setAttribute('aria-hidden', 'true');\r\n    arrow.innerHTML =\r\n      '<svg viewBox=\"0 0 24 24\">' +\r\n      '<path d=\"M7 17L17 7\"><\/path>' +\r\n      '<path d=\"M8 7h9v9\"><\/path>' +\r\n      '<\/svg>';\r\n\r\n    badges.appendChild(category);\r\n    badges.appendChild(arrow);\r\n    media.appendChild(badges);\r\n\r\n    if (product.image) {\r\n      const image = document.createElement('img');\r\n      const prioritizeImage = currentPage === 1 && index < CONFIG.priorityImageCount;\r\n\r\n      image.src = product.image;\r\n      image.alt = product.title;\r\n      image.loading = prioritizeImage ? 'eager' : 'lazy';\r\n      image.decoding = 'async';\r\n\r\n      if (prioritizeImage) {\r\n        image.setAttribute('fetchpriority', 'high');\r\n      }\r\n\r\n      image.addEventListener('error', function () {\r\n        image.remove();\r\n        media.appendChild(createImagePlaceholder(product.brand || product.title));\r\n      });\r\n\r\n      media.appendChild(image);\r\n    } else {\r\n      media.appendChild(createImagePlaceholder(product.brand || product.title));\r\n    }\r\n\r\n    const content = document.createElement('div');\r\n    content.className = 'cpcv1-product-content';\r\n\r\n    const brand = document.createElement('span');\r\n    brand.className = 'cpcv1-product-brand';\r\n    brand.textContent = product.brand || 'Commerss';\r\n\r\n    const title = document.createElement('h3');\r\n    title.className = 'cpcv1-product-title';\r\n    title.textContent = product.title;\r\n\r\n    const excerpt = document.createElement('p');\r\n    excerpt.className = 'cpcv1-product-excerpt';\r\n    excerpt.textContent = product.excerpt || 'Consulta caracter\u00edsticas, aplicaciones y disponibilidad de este producto.';\r\n\r\n    const footer = document.createElement('div');\r\n    footer.className = 'cpcv1-card-footer';\r\n\r\n    const footerText = document.createElement('span');\r\n    footerText.textContent = 'Ver producto';\r\n\r\n    const footerArrow = document.createElement('small');\r\n    footerArrow.setAttribute('aria-hidden', 'true');\r\n    footerArrow.textContent = '\u2192';\r\n\r\n    footer.appendChild(footerText);\r\n    footer.appendChild(footerArrow);\r\n\r\n    content.appendChild(brand);\r\n    content.appendChild(title);\r\n    content.appendChild(excerpt);\r\n    content.appendChild(footer);\r\n\r\n    card.appendChild(media);\r\n    card.appendChild(content);\r\n\r\n    return card;\r\n  }\r\n\r\n  function updateResultLabels(loadedCount) {\r\n    totalLabel.textContent = totalItems === 1\r\n      ? '1 producto disponible'\r\n      : totalItems + ' productos disponibles';\r\n\r\n    if (totalItems === 0) {\r\n      resultCount.textContent = '0 productos encontrados';\r\n      return;\r\n    }\r\n\r\n    if (filtersAreActive()) {\r\n      resultCount.textContent = totalItems === 1\r\n        ? '1 producto encontrado'\r\n        : totalItems + ' productos encontrados';\r\n      return;\r\n    }\r\n\r\n    resultCount.textContent = 'Mostrando ' + loadedCount + ' de ' + totalItems + ' productos';\r\n  }\r\n\r\n  async function requestProducts(options) {\r\n    const append = Boolean(options && options.append);\r\n    const includeFilters = Boolean(options && options.includeFilters);\r\n    const page = append ? currentPage + 1 : 1;\r\n\r\n    if (isLoading) {\r\n      if (append) {\r\n        return;\r\n      }\r\n      if (requestController) {\r\n        requestController.abort();\r\n      }\r\n    }\r\n\r\n    requestController = new AbortController();\r\n    const requestId = ++requestSerial;\r\n    isLoading = true;\r\n\r\n    if (!append) {\r\n      setLoadMoreVisible(false);\r\n      setCatalogViewState('loading');\r\n      resultCount.textContent = 'Consultando cat\u00e1logo\u2026';\r\n    }\r\n\r\n    try {\r\n      const endpoints = activeEndpoint\r\n        ? [activeEndpoint]\r\n        : CONFIG.endpointCandidates.slice();\r\n\r\n      let response = null;\r\n      let lastStatus = 0;\r\n\r\n      for (let endpointIndex = 0; endpointIndex < endpoints.length; endpointIndex++) {\r\n        const endpoint = endpoints[endpointIndex];\r\n\r\n        response = await fetch(buildRequestURL(endpoint, page, includeFilters), {\r\n          credentials: 'same-origin',\r\n          signal: requestController.signal,\r\n          headers: {\r\n            Accept: 'application\/json'\r\n          }\r\n        });\r\n\r\n        if (response.ok) {\r\n          activeEndpoint = endpoint;\r\n          break;\r\n        }\r\n\r\n        lastStatus = response.status;\r\n\r\n        if (activeEndpoint || response.status !== 404) {\r\n          break;\r\n        }\r\n      }\r\n\r\n      if (!response || !response.ok) {\r\n        throw new Error('WordPress respondi\u00f3 con el estado ' + (lastStatus || 'desconocido') + '.');\r\n      }\r\n\r\n      const data = await response.json();\r\n      const items = Array.isArray(data.items) ? data.items : [];\r\n\r\n      if (data.filters) {\r\n        applyFilterOptions(data.filters);\r\n\r\n        if (includeFilters && filtersAreActive()) {\r\n          isLoading = false;\r\n          return requestProducts({ append: false, includeFilters: false });\r\n        }\r\n      }\r\n\r\n      currentPage = Number(data.page || page);\r\n      totalItems = Number(data.total || 0);\r\n      totalPages = Number(data.total_pages || 1);\r\n\r\n      if (!append) {\r\n        productGrid.innerHTML = '';\r\n      }\r\n\r\n      const existingIds = new Set(\r\n        Array.from(productGrid.querySelectorAll('[data-product-id]')).map(function (card) {\r\n          return card.getAttribute('data-product-id');\r\n        })\r\n      );\r\n\r\n      items.forEach(function (product, index) {\r\n        const id = String(product.id || '');\r\n        if (id && existingIds.has(id)) {\r\n          return;\r\n        }\r\n\r\n        const card = createProductCard(product, index);\r\n        if (id) {\r\n          card.setAttribute('data-product-id', id);\r\n        }\r\n        productGrid.appendChild(card);\r\n      });\r\n\r\n      const loadedCount = productGrid.children.length;\r\n      updateResultLabels(loadedCount);\r\n      updateControlState();\r\n\r\n      if (!loadedCount) {\r\n        setCatalogViewState('empty');\r\n        setLoadMoreVisible(false);\r\n      } else {\r\n        setCatalogViewState('ready');\r\n        setLoadMoreVisible(Boolean(data.has_more && currentPage < totalPages));\r\n      }\r\n    } catch (error) {\r\n      if (error && error.name === 'AbortError') {\r\n        return;\r\n      }\r\n\r\n      if (!append) {\r\n        setCatalogViewState('error');\r\n        setLoadMoreVisible(false);\r\n        resultCount.textContent = 'Cat\u00e1logo no conectado';\r\n        totalLabel.textContent = 'Configuraci\u00f3n pendiente';\r\n        errorMessage.textContent = error.message + ' Verifica que SYCSA RFQ Cart 1.7.8 est\u00e9 activo.';\r\n      }\r\n    } finally {\r\n      if (requestId === requestSerial) {\r\n        isLoading = false;\r\n      }\r\n    }\r\n  }\r\n\r\n  function resetFilters(updateAddress) {\r\n    searchInput.value = '';\r\n    brandSelect.value = '';\r\n    categorySelect.value = '';\r\n    industrySelect.value = '';\r\n    sortSelect.value = 'default';\r\n\r\n    if (updateAddress) {\r\n      updateURL();\r\n    }\r\n\r\n    updateControlState();\r\n    requestProducts({ append: false, includeFilters: false });\r\n  }\r\n\r\n  function refreshCatalog(updateAddress) {\r\n    if (updateAddress) {\r\n      updateURL();\r\n    }\r\n\r\n    requestProducts({ append: false, includeFilters: false });\r\n  }\r\n\r\n  function setupInfiniteScroll() {\r\n    if (!loadArea) {\r\n      return;\r\n    }\r\n\r\n    if ('IntersectionObserver' in window) {\r\n      infiniteObserver = new IntersectionObserver(\r\n        function (entries) {\r\n          entries.forEach(function (entry) {\r\n            if (!entry.isIntersecting || isLoading || !root.classList.contains('has-more')) {\r\n              return;\r\n            }\r\n\r\n            requestProducts({ append: true, includeFilters: false });\r\n          });\r\n        },\r\n        {\r\n          root: null,\r\n          rootMargin: '350px 0px 350px 0px',\r\n          threshold: 0\r\n        }\r\n      );\r\n\r\n      infiniteObserver.observe(loadArea);\r\n      return;\r\n    }\r\n\r\n    window.addEventListener(\r\n      'scroll',\r\n      function () {\r\n        if (isLoading || !root.classList.contains('has-more')) {\r\n          return;\r\n        }\r\n\r\n        const rect = loadArea.getBoundingClientRect();\r\n        if (rect.top < window.innerHeight + 350) {\r\n          requestProducts({ append: true, includeFilters: false });\r\n        }\r\n      },\r\n      { passive: true }\r\n    );\r\n  }\r\n\r\n  searchInput.addEventListener('input', function () {\r\n    window.clearTimeout(searchTimer);\r\n    updateControlState();\r\n\r\n    searchTimer = window.setTimeout(function () {\r\n      refreshCatalog(true);\r\n    }, CONFIG.searchDelay);\r\n  });\r\n\r\n  searchClear.addEventListener('click', function () {\r\n    searchInput.value = '';\r\n    searchInput.focus();\r\n    refreshCatalog(true);\r\n  });\r\n\r\n  [brandSelect, categorySelect, industrySelect, sortSelect].forEach(function (select) {\r\n    select.addEventListener('change', function () {\r\n      refreshCatalog(true);\r\n    });\r\n  });\r\n\r\n  resetButton.addEventListener('click', function () {\r\n    resetFilters(true);\r\n  });\r\n\r\n  if (emptyButton) {\r\n    emptyButton.addEventListener('click', function () {\r\n      resetFilters(true);\r\n    });\r\n  }\r\n\r\n  if (retryButton) {\r\n    retryButton.addEventListener('click', function () {\r\n      requestProducts({ append: false, includeFilters: !filtersLoaded });\r\n    });\r\n  }\r\n\r\n  if ('IntersectionObserver' in window) {\r\n    const observer = new IntersectionObserver(\r\n      function (entries) {\r\n        entries.forEach(function (entry) {\r\n          if (!entry.isIntersecting) {\r\n            return;\r\n          }\r\n\r\n          entry.target.classList.add('is-visible');\r\n          observer.unobserve(entry.target);\r\n        });\r\n      },\r\n      { threshold: 0.1 }\r\n    );\r\n\r\n    reveals.forEach(function (element) {\r\n      observer.observe(element);\r\n    });\r\n  } else {\r\n    reveals.forEach(function (element) {\r\n      element.classList.add('is-visible');\r\n    });\r\n  }\r\n\r\n  applyInitialURLValues();\r\n  updateControlState();\r\n  setupInfiniteScroll();\r\n  requestProducts({ append: false, includeFilters: true });\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>CAT\u00c1LOGO DE PRODUCTOS Buscar por proceso Buscar por marca Buscar por aplicaci\u00f3n EQUIPOS INDUSTRIALES Todo lo que tu proyecto necesita. En un solo lugar. Explora equipos para almacenar, transportar, dosificar, secar, mezclar, filtrar, medir, automatizar y mucho m\u00e1s para cada industria. \u00bfQU\u00c9 EST\u00c1S BUSCANDO? Buscar productos B\u00daSQUEDAS FRECUENTES Silos Tanques de agua Mezcladoras Dosificadores Tuber\u00eda [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-322","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/commerss.com\/en\/wp-json\/wp\/v2\/pages\/322","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/commerss.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/commerss.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/commerss.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/commerss.com\/en\/wp-json\/wp\/v2\/comments?post=322"}],"version-history":[{"count":46,"href":"https:\/\/commerss.com\/en\/wp-json\/wp\/v2\/pages\/322\/revisions"}],"predecessor-version":[{"id":5329,"href":"https:\/\/commerss.com\/en\/wp-json\/wp\/v2\/pages\/322\/revisions\/5329"}],"wp:attachment":[{"href":"https:\/\/commerss.com\/en\/wp-json\/wp\/v2\/media?parent=322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}