{"id":298,"date":"2026-06-15T05:22:38","date_gmt":"2026-06-15T05:22:38","guid":{"rendered":"https:\/\/aliceblue-mallard-643626.hostingersite.com\/?page_id=298"},"modified":"2026-07-28T19:16:30","modified_gmt":"2026-07-28T19:16:30","slug":"brands","status":"publish","type":"page","link":"https:\/\/commerss.com\/en\/marcas\/","title":{"rendered":"Brands"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"298\" class=\"elementor elementor-298\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a1da47f e-con-full e-flex e-con e-parent\" data-id=\"a1da47f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d1014a6 elementor-widget elementor-widget-html\" data-id=\"d1014a6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section\r\n  id=\"commerss-brands-hero-v2\"\r\n  class=\"cbhv2-hero\"\r\n  aria-labelledby=\"cbhv2-title\"\r\n>\r\n  <div class=\"cbhv2-background\" aria-hidden=\"true\">\r\n    <span class=\"cbhv2-glow cbhv2-glow-one\"><\/span>\r\n    <span class=\"cbhv2-glow cbhv2-glow-two\"><\/span>\r\n    <span class=\"cbhv2-grid-pattern\"><\/span>\r\n  <\/div>\r\n\r\n  <div class=\"cbhv2-shell\">\r\n\r\n    <!-- CONTENIDO IZQUIERDO -->\r\n    <div class=\"cbhv2-copy cbhv2-reveal\">\r\n\r\n      <div class=\"cbhv2-kicker-row\">\r\n        <span class=\"cbhv2-kicker\">\r\n          PORTAFOLIO DE MARCAS\r\n        <\/span>\r\n\r\n        <span class=\"cbhv2-count\">\r\n          <i aria-hidden=\"true\"><\/i>\r\n          100 marcas\r\n        <\/span>\r\n      <\/div>\r\n\r\n      <h1 id=\"cbhv2-title\">\r\n        Un contacto.<br>\r\n        Decenas de marcas.<br>\r\n        Cientos de aplicaciones.\r\n      <\/h1>\r\n\r\n      <p class=\"cbhv2-description\">\r\n       Como comercializadora industrial, conectamos tu proyecto\r\n        con fabricantes y tecnolog\u00edas especializadas para el almacenamiento, dosificaci\u00f3n, filtraci\u00f3n, mezclado y automatizaci\u00f3n.\r\n      <\/p>\r\n\r\n      <div class=\"cbhv2-actions\">\r\n        <a\r\n          class=\"cbhv2-primary\"\r\n          href=\"#catalogo-marcas\"\r\n        >\r\n          Explorar portafolio\r\n\r\n          <span aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path d=\"M12 5v14\"><\/path>\r\n              <path d=\"M6 13l6 6 6-6\"><\/path>\r\n            <\/svg>\r\n          <\/span>\r\n        <\/a>\r\n\r\n        <a\r\n          class=\"cbhv2-secondary\"\r\n          href=\"\/contacto\/\"\r\n        >\r\n          Hablar con un especialista\r\n\r\n          <span aria-hidden=\"true\">\u2197<\/span>\r\n        <\/a>\r\n      <\/div>\r\n\r\n      <div class=\"cbhv2-trust\">\r\n        <span class=\"cbhv2-trust-line\"><\/span>\r\n\r\n        <p>\r\n          Distintos productos.<br>\r\n          Una sola relaci\u00f3n comercial.\r\n        <\/p>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- UNIVERSO DE MARCAS -->\r\n    <div\r\n      class=\"cbhv2-universe cbhv2-reveal\"\r\n      aria-label=\"Algunas marcas del portafolio de Commerss\"\r\n    >\r\n      <div class=\"cbhv2-universe-light\"><\/div>\r\n\r\n      <span class=\"cbhv2-orbit cbhv2-orbit-one\"><\/span>\r\n      <span class=\"cbhv2-orbit cbhv2-orbit-two\"><\/span>\r\n      <span class=\"cbhv2-orbit cbhv2-orbit-three\"><\/span>\r\n\r\n      <!-- N\u00daCLEO \u00b7 SYCSA -->\r\n      <a\r\n        class=\"cbhv2-core\"\r\n        href=\"\/marca\/sycsa\/\"\r\n        aria-label=\"Explorar SYCSA\"\r\n      >\r\n        <div class=\"cbhv2-core-logo\">\r\n          <img\r\n            src=\"\/wp-content\/uploads\/2026\/06\/commerss-logo.svg\"\r\n            alt=\"SYCSA\"\r\n            loading=\"eager\"\r\n            decoding=\"async\"\r\n            fetchpriority=\"high\"\r\n          >\r\n        <\/div>\r\n\r\n        <span>COMERCIALIZADORA INDUSTRIAL<\/span>\r\n      <\/a>\r\n\r\n      <!-- MARCAS -->\r\n      <a\r\n        class=\"cbhv2-brand cbhv2-brand-1\"\r\n        href=\"\/marca\/morris-coupling\/\"\r\n      >\r\n        <i><\/i>\r\n        Morris Coupling\r\n      <\/a>\r\n\r\n      <a\r\n        class=\"cbhv2-brand cbhv2-brand-2\"\r\n        href=\"\/marca\/wam\/\"\r\n      >\r\n        <i><\/i>\r\n        WAM\r\n      <\/a>\r\n\r\n      <a\r\n        class=\"cbhv2-brand cbhv2-brand-3\"\r\n        href=\"\/marca\/vortex\/\"\r\n      >\r\n        <i><\/i>\r\n        Vortex\r\n      <\/a>\r\n\r\n      <a\r\n        class=\"cbhv2-brand cbhv2-brand-4\"\r\n        href=\"\/marca\/gardner-denver\/\"\r\n      >\r\n        <i><\/i>\r\n        Gardner Denver\r\n      <\/a>\r\n\r\n      <a\r\n        class=\"cbhv2-brand cbhv2-brand-5\"\r\n        href=\"\/marca\/mixaco\/\"\r\n      >\r\n        <i><\/i>\r\n        Mixaco\r\n      <\/a>\r\n\r\n      <a\r\n        class=\"cbhv2-brand cbhv2-brand-6\"\r\n        href=\"\/marca\/sodimate\/\"\r\n      >\r\n        <i><\/i>\r\n        Sodimate\r\n      <\/a>\r\n\r\n      <a\r\n        class=\"cbhv2-brand cbhv2-brand-7\"\r\n        href=\"\/marca\/cablevey\/\"\r\n      >\r\n        <i><\/i>\r\n        SYCSA\r\n      <\/a>\r\n\r\n      <a\r\n        class=\"cbhv2-brand cbhv2-brand-8\"\r\n        href=\"\/marca\/uwt\/\"\r\n      >\r\n        <i><\/i>\r\n        UWT\r\n      <\/a>\r\n\r\n      <a\r\n        class=\"cbhv2-brand cbhv2-brand-9\"\r\n        href=\"\/marca\/rembe\/\"\r\n      >\r\n        <i><\/i>\r\n        Rembe\r\n      <\/a>\r\n\r\n      <a\r\n        class=\"cbhv2-brand cbhv2-brand-10\"\r\n        href=\"\/marca\/siemens\/\"\r\n      >\r\n        <i><\/i>\r\n        Siemens\r\n      <\/a>\r\n\r\n      <a\r\n        class=\"cbhv2-brand cbhv2-brand-11\"\r\n        href=\"\/marca\/bunting\/\"\r\n      >\r\n        <i><\/i>\r\n        Bunting\r\n      <\/a>\r\n\r\n      <a\r\n        class=\"cbhv2-brand cbhv2-brand-12\"\r\n        href=\"\/marca\/munters\/\"\r\n      >\r\n        <i><\/i>\r\n        Munters\r\n      <\/a>\r\n\r\n      <!-- INDICADOR INFERIOR -->\r\n      <div class=\"cbhv2-universe-footer\">\r\n        <span>\r\n          MARCAS DESTACADAS\r\n        <\/span>\r\n\r\n        <strong>\r\n          13 de 100\r\n        <\/strong>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <!-- FRANJA INFERIOR DEL HERO -->\r\n  <div class=\"cbhv2-bottom\">\r\n    <div class=\"cbhv2-bottom-inner\">\r\n\r\n   <!--  <div>\r\n        <span>01<\/span>\r\n        <p>\r\n          Tecnolog\u00edas especializadas\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <div>\r\n        <span>02<\/span>\r\n        <p>\r\n          Selecci\u00f3n seg\u00fan aplicaci\u00f3n\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <div>\r\n        <span>03<\/span>\r\n        <p>\r\n          Integraci\u00f3n de soluciones\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <div class=\"cbhv2-scroll-hint\">\r\n        <span>DESCUBRIR MARCAS<\/span>\r\n\r\n        <i aria-hidden=\"true\">\r\n          <b><\/b>\r\n        <\/i>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section> -->\r\n\r\n<style>\r\n\/* ==================================================\r\n   VARIABLES Y CONFIGURACI\u00d3N GENERAL\r\n================================================== *\/\r\n\r\n#commerss-brands-hero-v2 {\r\n  --cbhv2-navy: #063f5b;\r\n  --cbhv2-dark: #042f43;\r\n  --cbhv2-deep: #021f2d;\r\n  --cbhv2-teal: #4ba6a6;\r\n  --cbhv2-teal-light: #87d0cd;\r\n  --cbhv2-white: #ffffff;\r\n  --cbhv2-muted: rgba(255, 255, 255, 0.68);\r\n  --cbhv2-line: rgba(255, 255, 255, 0.14);\r\n\r\n  position: relative;\r\n  isolation: isolate;\r\n\r\n  width: 100%;\r\n  min-height: 760px;\r\n  overflow: hidden;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      var(--cbhv2-navy) 0%,\r\n      var(--cbhv2-dark) 45%,\r\n      var(--cbhv2-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-brands-hero-v2 *,\r\n#commerss-brands-hero-v2 *::before,\r\n#commerss-brands-hero-v2 *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n#commerss-brands-hero-v2 a {\r\n  color: inherit;\r\n}\r\n\r\n\/* ==================================================\r\n   FONDO\r\n================================================== *\/\r\n\r\n#commerss-brands-hero-v2 .cbhv2-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-brands-hero-v2 .cbhv2-glow {\r\n  position: absolute;\r\n\r\n  border-radius: 50%;\r\n\r\n  filter: blur(80px);\r\n  opacity: 0.7;\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-glow-one {\r\n  top: -140px;\r\n  right: 5%;\r\n\r\n  width: 470px;\r\n  height: 470px;\r\n\r\n  background: rgba(75, 166, 166, 0.25);\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-glow-two {\r\n  bottom: -220px;\r\n  left: 20%;\r\n\r\n  width: 470px;\r\n  height: 470px;\r\n\r\n  background: rgba(45, 111, 140, 0.2);\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-grid-pattern {\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.025) 1px,\r\n      transparent 1px\r\n    ),\r\n    linear-gradient(\r\n      90deg,\r\n      rgba(255, 255, 255, 0.025) 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 92%\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 92%\r\n    );\r\n}\r\n\r\n\/* ==================================================\r\n   CONTENEDOR PRINCIPAL\r\n================================================== *\/\r\n\r\n#commerss-brands-hero-v2 .cbhv2-shell {\r\n  position: relative;\r\n  z-index: 3;\r\n\r\n  display: grid;\r\n  grid-template-columns:\r\n    minmax(0, 1.05fr)\r\n    minmax(500px, 0.95fr);\r\n\r\n  align-items: center;\r\n  gap: clamp(55px, 7vw, 115px);\r\n\r\n  width: min(1400px, calc(100% - 48px));\r\n  min-height: 680px;\r\n  margin: 0 auto;\r\n\r\n  padding:\r\n    clamp(75px, 8vw, 120px)\r\n    0\r\n    70px;\r\n}\r\n\r\n\/* ==================================================\r\n   CONTENIDO IZQUIERDO\r\n================================================== *\/\r\n\r\n#commerss-brands-hero-v2 .cbhv2-copy {\r\n  position: relative;\r\n  z-index: 5;\r\n\r\n  max-width: 790px;\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-kicker-row {\r\n  display: flex;\r\n  align-items: center;\r\n  flex-wrap: wrap;\r\n  gap: 12px;\r\n\r\n  margin-bottom: 21px;\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-kicker {\r\n  color: var(--cbhv2-teal-light);\r\n\r\n  font-size: 11px;\r\n  font-weight: 750;\r\n  letter-spacing: 0.15em;\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-count {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n\r\n  min-height: 30px;\r\n  padding: 0 12px;\r\n\r\n  border: 1px solid rgba(255, 255, 255, 0.17);\r\n  border-radius: 999px;\r\n\r\n  background: rgba(255, 255, 255, 0.075);\r\n  color: rgba(255, 255, 255, 0.7);\r\n\r\n  font-size: 10px;\r\n  font-weight: 650;\r\n\r\n  backdrop-filter: blur(14px);\r\n  -webkit-backdrop-filter: blur(14px);\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-count i {\r\n  width: 6px;\r\n  height: 6px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: var(--cbhv2-teal-light);\r\n\r\n  box-shadow:\r\n    0 0 0 5px rgba(135, 208, 205, 0.09);\r\n}\r\n\r\n#commerss-brands-hero-v2 h1 {\r\n  max-width: 790px;\r\n  margin: 0;\r\n\r\n  color: #ffffff;\r\n\r\n  font-size: clamp(55px, 5.9vw, 92px);\r\n  font-weight: 620;\r\n  line-height: 0.94;\r\n  letter-spacing: -0.064em;\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-description {\r\n  max-width: 680px;\r\n  margin: 28px 0 0;\r\n\r\n  color: var(--cbhv2-muted);\r\n\r\n  font-size: clamp(16px, 1.28vw, 19px);\r\n  line-height: 1.65;\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-actions {\r\n  display: flex;\r\n  align-items: center;\r\n  flex-wrap: wrap;\r\n  gap: 11px;\r\n\r\n  margin-top: 34px;\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-primary,\r\n#commerss-brands-hero-v2 .cbhv2-secondary {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  min-height: 53px;\r\n\r\n  border-radius: 999px;\r\n\r\n  font-size: 13px;\r\n  font-weight: 650;\r\n  text-decoration: none;\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    border-color 0.3s ease;\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-primary {\r\n  gap: 14px;\r\n\r\n  padding: 0 7px 0 22px;\r\n\r\n  background: #ffffff;\r\n  color: var(--cbhv2-navy);\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-primary > span {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  width: 39px;\r\n  height: 39px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: var(--cbhv2-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#commerss-brands-hero-v2 .cbhv2-primary svg {\r\n  width: 18px;\r\n  height: 18px;\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-brands-hero-v2 .cbhv2-primary:hover {\r\n  transform: translateY(-3px);\r\n\r\n  background: var(--cbhv2-teal);\r\n  color: #ffffff;\r\n}\r\n\r\n#commerss-brands-hero-v2\r\n.cbhv2-primary:hover > span {\r\n  transform: translateY(3px);\r\n  background: var(--cbhv2-navy);\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-secondary {\r\n  gap: 9px;\r\n\r\n  padding: 0 22px;\r\n\r\n  border: 1px solid rgba(255, 255, 255, 0.23);\r\n\r\n  background: rgba(255, 255, 255, 0.075);\r\n  color: #ffffff;\r\n\r\n  backdrop-filter: blur(14px);\r\n  -webkit-backdrop-filter: blur(14px);\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-secondary span {\r\n  color: var(--cbhv2-teal-light);\r\n  font-size: 18px;\r\n\r\n  transition: transform 0.3s ease;\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-secondary:hover {\r\n  transform: translateY(-3px);\r\n\r\n  border-color: rgba(255, 255, 255, 0.45);\r\n  background: rgba(255, 255, 255, 0.13);\r\n}\r\n\r\n#commerss-brands-hero-v2\r\n.cbhv2-secondary:hover span {\r\n  transform: translate(3px, -3px);\r\n}\r\n\r\n\/* CONFIANZA *\/\r\n\r\n#commerss-brands-hero-v2 .cbhv2-trust {\r\n  display: grid;\r\n  grid-template-columns: 48px minmax(0, 1fr);\r\n  align-items: start;\r\n  gap: 15px;\r\n\r\n  margin-top: 46px;\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-trust-line {\r\n  display: block;\r\n\r\n  width: 48px;\r\n  height: 1px;\r\n  margin-top: 9px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      var(--cbhv2-teal-light),\r\n      rgba(135, 208, 205, 0)\r\n    );\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-trust p {\r\n  margin: 0;\r\n\r\n  color: rgba(255, 255, 255, 0.46);\r\n\r\n  font-size: 10px;\r\n  font-weight: 620;\r\n  line-height: 1.55;\r\n  letter-spacing: 0.04em;\r\n  text-transform: uppercase;\r\n}\r\n\r\n\/* ==================================================\r\n   UNIVERSO\r\n================================================== *\/\r\n\r\n#commerss-brands-hero-v2 .cbhv2-universe {\r\n  position: relative;\r\n  isolation: isolate;\r\n\r\n  min-height: 560px;\r\n  overflow: hidden;\r\n\r\n  border: 1px solid rgba(255, 255, 255, 0.15);\r\n  border-radius: 36px;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 50% 46%,\r\n      rgba(75, 166, 166, 0.18),\r\n      transparent 33%\r\n    ),\r\n    rgba(255, 255, 255, 0.052);\r\n\r\n  box-shadow:\r\n    inset 0 1px 0 rgba(255, 255, 255, 0.08),\r\n    0 35px 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  transition:\r\n    transform 0.55s cubic-bezier(.22, .61, .36, 1),\r\n    border-color 0.4s ease;\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-universe:hover {\r\n  transform: translateY(-7px);\r\n\r\n  border-color: rgba(135, 208, 205, 0.32);\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-universe-light {\r\n  position: absolute;\r\n  left: 50%;\r\n  top: 47%;\r\n\r\n  width: 260px;\r\n  height: 260px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: rgba(75, 166, 166, 0.2);\r\n\r\n  filter: blur(62px);\r\n\r\n  transform: translate(-50%, -50%);\r\n}\r\n\r\n\/* \u00d3RBITAS *\/\r\n\r\n#commerss-brands-hero-v2 .cbhv2-orbit {\r\n  position: absolute;\r\n  left: 50%;\r\n  top: 47%;\r\n\r\n  border: 1px solid rgba(255, 255, 255, 0.13);\r\n  border-radius: 50%;\r\n\r\n  transform: translate(-50%, -50%);\r\n\r\n  transition:\r\n    transform 1.1s cubic-bezier(.22, .61, .36, 1);\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-orbit-one {\r\n  width: 235px;\r\n  height: 235px;\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-orbit-two {\r\n  width: 370px;\r\n  height: 370px;\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-orbit-three {\r\n  width: 510px;\r\n  height: 510px;\r\n}\r\n\r\n#commerss-brands-hero-v2\r\n.cbhv2-universe:hover\r\n.cbhv2-orbit-one {\r\n  transform:\r\n    translate(-50%, -50%)\r\n    rotate(8deg);\r\n}\r\n\r\n#commerss-brands-hero-v2\r\n.cbhv2-universe:hover\r\n.cbhv2-orbit-two {\r\n  transform:\r\n    translate(-50%, -50%)\r\n    rotate(-6deg);\r\n}\r\n\r\n#commerss-brands-hero-v2\r\n.cbhv2-universe:hover\r\n.cbhv2-orbit-three {\r\n  transform:\r\n    translate(-50%, -50%)\r\n    rotate(4deg);\r\n}\r\n\r\n\/* N\u00daCLEO *\/\r\n\r\n#commerss-brands-hero-v2 .cbhv2-core {\r\n  position: absolute;\r\n  left: 50%;\r\n  top: 47%;\r\n  z-index: 5;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-direction: column;\r\n\r\n  width: 216px;\r\n  height: 216px;\r\n\r\n  border: 1px solid rgba(255, 255, 255, 0.24);\r\n  border-radius: 50%;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 32% 24%,\r\n      rgba(255, 255, 255, 0.18),\r\n      transparent 38%\r\n    ),\r\n    linear-gradient(\r\n      145deg,\r\n      rgba(75, 166, 166, 0.55),\r\n      rgba(2, 31, 45, 0.96)\r\n    );\r\n\r\n  box-shadow:\r\n    0 0 0 15px rgba(255, 255, 255, 0.025),\r\n    0 0 0 30px rgba(75, 166, 166, 0.045),\r\n    0 0 70px rgba(135, 208, 205, 0.2),\r\n    0 32px 70px rgba(0, 0, 0, 0.3);\r\n\r\n  transform: translate(-50%, -50%);\r\n\r\n  text-decoration: none;\r\n\r\n  transition:\r\n    transform 0.55s cubic-bezier(.22, .61, .36, 1),\r\n    box-shadow 0.45s ease,\r\n    border-color 0.4s ease;\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-core:hover {\r\n  border-color: rgba(135, 208, 205, 0.58);\r\n\r\n  box-shadow:\r\n    0 0 0 15px rgba(255, 255, 255, 0.035),\r\n    0 0 0 32px rgba(75, 166, 166, 0.07),\r\n    0 0 85px rgba(135, 208, 205, 0.3),\r\n    0 36px 78px rgba(0, 0, 0, 0.34);\r\n}\r\n\r\n#commerss-brands-hero-v2\r\n.cbhv2-universe:hover\r\n.cbhv2-core {\r\n  transform:\r\n    translate(-50%, -50%)\r\n    scale(1.04);\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-core-logo {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  width: 158px;\r\n  min-height: 58px;\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-core img {\r\n  display: block;\r\n\r\n  width: 158px;\r\n  max-height: 64px;\r\n\r\n  object-fit: contain;\r\n\r\n  filter: brightness(0) invert(1);\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-core > span {\r\n  margin-top: 15px;\r\n\r\n  color: rgba(255, 255, 255, 0.62);\r\n\r\n  font-size: 7px;\r\n  font-weight: 750;\r\n  letter-spacing: 0.15em;\r\n  text-align: center;\r\n}\r\n\r\n\/* MARCAS *\/\r\n\r\n#commerss-brands-hero-v2 .cbhv2-brand {\r\n  position: absolute;\r\n  z-index: 7;\r\n\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  min-height: 35px;\r\n  padding: 0 13px;\r\n\r\n  border: 1px solid rgba(255, 255, 255, 0.19);\r\n  border-radius: 999px;\r\n\r\n  background: rgba(255, 255, 255, 0.1);\r\n  color: rgba(255, 255, 255, 0.75);\r\n\r\n  font-size: 9px;\r\n  font-weight: 650;\r\n  text-decoration: none;\r\n  white-space: nowrap;\r\n\r\n  backdrop-filter: blur(14px);\r\n  -webkit-backdrop-filter: blur(14px);\r\n\r\n  transition:\r\n    transform 0.35s ease,\r\n    color 0.3s ease,\r\n    background 0.3s ease,\r\n    border-color 0.3s ease;\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-brand i {\r\n  width: 5px;\r\n  height: 5px;\r\n  margin-right: 7px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: var(--cbhv2-teal-light);\r\n\r\n  box-shadow:\r\n    0 0 0 5px rgba(135, 208, 205, 0.08);\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-brand:hover {\r\n  z-index: 10;\r\n\r\n  transform:\r\n    translateY(-4px)\r\n    scale(1.03);\r\n\r\n  border-color: rgba(135, 208, 205, 0.42);\r\n\r\n  background: rgba(75, 166, 166, 0.25);\r\n  color: #ffffff;\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-brand-1 {\r\n  top: 9%;\r\n  left: 29%;\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-brand-2 {\r\n  top: 17%;\r\n  right: 8%;\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-brand-3 {\r\n  top: 39%;\r\n  right: 3%;\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-brand-4 {\r\n  bottom: 17%;\r\n  right: 7%;\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-brand-5 {\r\n  bottom: 8%;\r\n  left: 40%;\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-brand-6 {\r\n  bottom: 17%;\r\n  left: 7%;\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-brand-7 {\r\n  top: 50%;\r\n  left: 3%;\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-brand-8 {\r\n  top: 21%;\r\n  left: 7%;\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-brand-9 {\r\n  top: 6%;\r\n  right: 28%;\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-brand-10 {\r\n  bottom: 6%;\r\n  right: 28%;\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-brand-11 {\r\n  top: 64%;\r\n  right: 23%;\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-brand-12 {\r\n  top: 66%;\r\n  left: 25%;\r\n}\r\n\r\n\/* PIE DEL UNIVERSO *\/\r\n\r\n#commerss-brands-hero-v2 .cbhv2-universe-footer {\r\n  position: absolute;\r\n  left: 26px;\r\n  right: 26px;\r\n  bottom: 20px;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n\r\n  padding-top: 14px;\r\n\r\n  border-top: 1px solid rgba(255, 255, 255, 0.12);\r\n}\r\n\r\n#commerss-brands-hero-v2\r\n.cbhv2-universe-footer span {\r\n  color: rgba(255, 255, 255, 0.4);\r\n\r\n  font-size: 8px;\r\n  font-weight: 700;\r\n  letter-spacing: 0.14em;\r\n}\r\n\r\n#commerss-brands-hero-v2\r\n.cbhv2-universe-footer strong {\r\n  color: rgba(255, 255, 255, 0.68);\r\n\r\n  font-size: 9px;\r\n  font-weight: 650;\r\n}\r\n\r\n\/* ==================================================\r\n   PARTE INFERIOR\r\n================================================== *\/\r\n\r\n#commerss-brands-hero-v2 .cbhv2-bottom {\r\n  position: relative;\r\n  z-index: 6;\r\n\r\n  border-top: 1px solid rgba(255, 255, 255, 0.12);\r\n\r\n  background: rgba(2, 31, 45, 0.31);\r\n\r\n  backdrop-filter: blur(16px);\r\n  -webkit-backdrop-filter: blur(16px);\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-bottom-inner {\r\n  display: grid;\r\n  grid-template-columns:\r\n    repeat(3, minmax(0, 1fr))\r\n    auto;\r\n\r\n  align-items: center;\r\n\r\n  width: min(1400px, calc(100% - 48px));\r\n  min-height: 80px;\r\n  margin: 0 auto;\r\n}\r\n\r\n#commerss-brands-hero-v2\r\n.cbhv2-bottom-inner > div {\r\n  display: grid;\r\n  grid-template-columns: 27px minmax(0, 1fr);\r\n  align-items: center;\r\n  gap: 10px;\r\n\r\n  min-height: 48px;\r\n  padding-right: 25px;\r\n}\r\n\r\n#commerss-brands-hero-v2\r\n.cbhv2-bottom-inner > div + div {\r\n  padding-left: 25px;\r\n\r\n  border-left: 1px solid rgba(255, 255, 255, 0.11);\r\n}\r\n\r\n#commerss-brands-hero-v2\r\n.cbhv2-bottom-inner > div > span {\r\n  color: var(--cbhv2-teal-light);\r\n\r\n  font-size: 9px;\r\n  font-weight: 700;\r\n  letter-spacing: 0.12em;\r\n}\r\n\r\n#commerss-brands-hero-v2\r\n.cbhv2-bottom-inner p {\r\n  margin: 0;\r\n\r\n  color: rgba(255, 255, 255, 0.55);\r\n\r\n  font-size: 10px;\r\n  font-weight: 600;\r\n}\r\n\r\n#commerss-brands-hero-v2 .cbhv2-scroll-hint {\r\n  display: flex !important;\r\n  grid-template-columns: none !important;\r\n  align-items: center;\r\n  gap: 15px !important;\r\n\r\n  padding-left: 40px !important;\r\n  padding-right: 0 !important;\r\n}\r\n\r\n#commerss-brands-hero-v2\r\n.cbhv2-scroll-hint > span {\r\n  color: rgba(255, 255, 255, 0.4) !important;\r\n\r\n  font-size: 8px !important;\r\n  letter-spacing: 0.13em !important;\r\n}\r\n\r\n#commerss-brands-hero-v2\r\n.cbhv2-scroll-hint > i {\r\n  position: relative;\r\n\r\n  display: block;\r\n\r\n  width: 22px;\r\n  height: 36px;\r\n\r\n  border: 1px solid rgba(255, 255, 255, 0.25);\r\n  border-radius: 999px;\r\n}\r\n\r\n#commerss-brands-hero-v2\r\n.cbhv2-scroll-hint > i b {\r\n  position: absolute;\r\n  left: 50%;\r\n  top: 7px;\r\n\r\n  width: 3px;\r\n  height: 7px;\r\n\r\n  border-radius: 999px;\r\n\r\n  background: var(--cbhv2-teal-light);\r\n\r\n  transform: translateX(-50%);\r\n\r\n  animation:\r\n    cbhv2ScrollHint\r\n    1.7s ease-in-out\r\n    infinite;\r\n}\r\n\r\n@keyframes cbhv2ScrollHint {\r\n  0% {\r\n    opacity: 0;\r\n    transform:\r\n      translate(-50%, 0);\r\n  }\r\n\r\n  30% {\r\n    opacity: 1;\r\n  }\r\n\r\n  100% {\r\n    opacity: 0;\r\n    transform:\r\n      translate(-50%, 13px);\r\n  }\r\n}\r\n\r\n\/* ==================================================\r\n   ANIMACI\u00d3N DE ENTRADA\r\n================================================== *\/\r\n\r\n#commerss-brands-hero-v2 .cbhv2-reveal {\r\n  opacity: 0;\r\n  transform: translateY(28px);\r\n}\r\n\r\n#commerss-brands-hero-v2\r\n.cbhv2-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-brands-hero-v2\r\n.cbhv2-universe.is-visible {\r\n  transition-delay: 0.1s;\r\n}\r\n\r\n\/* ==================================================\r\n   TABLET\r\n================================================== *\/\r\n\r\n@media (max-width: 1100px) {\r\n  #commerss-brands-hero-v2 {\r\n    min-height: auto;\r\n  }\r\n\r\n  #commerss-brands-hero-v2 .cbhv2-shell {\r\n    grid-template-columns: 1fr;\r\n    gap: 54px;\r\n\r\n    min-height: auto;\r\n    padding-bottom: 60px;\r\n  }\r\n\r\n  #commerss-brands-hero-v2 .cbhv2-copy {\r\n    max-width: 900px;\r\n  }\r\n\r\n  #commerss-brands-hero-v2 .cbhv2-universe {\r\n    min-height: 590px;\r\n  }\r\n\r\n  #commerss-brands-hero-v2 .cbhv2-bottom-inner {\r\n    grid-template-columns:\r\n      repeat(3, minmax(0, 1fr));\r\n  }\r\n\r\n  #commerss-brands-hero-v2 .cbhv2-scroll-hint {\r\n    display: none !important;\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-brands-hero-v2 .cbhv2-shell {\r\n    width: calc(100% - 28px);\r\n\r\n    padding:\r\n      66px\r\n      0\r\n      46px;\r\n  }\r\n\r\n  #commerss-brands-hero-v2 h1 {\r\n    font-size: clamp(49px, 14.5vw, 66px);\r\n    line-height: 0.95;\r\n  }\r\n\r\n  #commerss-brands-hero-v2 .cbhv2-description {\r\n    font-size: 15px;\r\n  }\r\n\r\n  #commerss-brands-hero-v2 .cbhv2-actions {\r\n    align-items: stretch;\r\n    flex-direction: column;\r\n  }\r\n\r\n  #commerss-brands-hero-v2 .cbhv2-primary,\r\n  #commerss-brands-hero-v2 .cbhv2-secondary {\r\n    justify-content: space-between;\r\n\r\n    width: 100%;\r\n  }\r\n\r\n  #commerss-brands-hero-v2 .cbhv2-trust {\r\n    margin-top: 35px;\r\n  }\r\n\r\n  \/* UNIVERSO EN M\u00d3VIL *\/\r\n\r\n  #commerss-brands-hero-v2 .cbhv2-universe {\r\n    display: grid;\r\n    grid-template-columns:\r\n      repeat(2, minmax(0, 1fr));\r\n\r\n    align-content: end;\r\n    gap: 8px;\r\n\r\n    min-height: 560px;\r\n    padding:\r\n      245px\r\n      15px\r\n      55px;\r\n\r\n    border-radius: 26px;\r\n  }\r\n\r\n  #commerss-brands-hero-v2 .cbhv2-core {\r\n    top: 28%;\r\n\r\n    width: 174px;\r\n    height: 174px;\r\n  }\r\n\r\n  #commerss-brands-hero-v2 .cbhv2-core-logo {\r\n    width: 128px;\r\n  }\r\n\r\n  #commerss-brands-hero-v2 .cbhv2-core img {\r\n    width: 128px;\r\n  }\r\n\r\n  #commerss-brands-hero-v2 .cbhv2-orbit-one {\r\n    top: 28%;\r\n\r\n    width: 205px;\r\n    height: 205px;\r\n  }\r\n\r\n  #commerss-brands-hero-v2 .cbhv2-orbit-two {\r\n    top: 28%;\r\n\r\n    width: 315px;\r\n    height: 315px;\r\n  }\r\n\r\n  #commerss-brands-hero-v2 .cbhv2-orbit-three {\r\n    display: none;\r\n  }\r\n\r\n  #commerss-brands-hero-v2 .cbhv2-brand {\r\n    position: static;\r\n\r\n    min-width: 0;\r\n    min-height: 38px;\r\n    padding: 0 10px;\r\n\r\n    font-size: 8px;\r\n    white-space: normal;\r\n    text-align: center;\r\n  }\r\n\r\n  #commerss-brands-hero-v2\r\n  .cbhv2-brand:nth-of-type(n + 9) {\r\n    display: none;\r\n  }\r\n\r\n  #commerss-brands-hero-v2 .cbhv2-universe-footer {\r\n    left: 17px;\r\n    right: 17px;\r\n    bottom: 14px;\r\n  }\r\n\r\n  \/* PIE *\/\r\n\r\n  #commerss-brands-hero-v2 .cbhv2-bottom-inner {\r\n    grid-template-columns: 1fr;\r\n\r\n    width: calc(100% - 28px);\r\n    padding: 12px 0;\r\n  }\r\n\r\n  #commerss-brands-hero-v2\r\n  .cbhv2-bottom-inner > div {\r\n    min-height: 45px;\r\n    padding: 0;\r\n  }\r\n\r\n  #commerss-brands-hero-v2\r\n  .cbhv2-bottom-inner > div + div {\r\n    padding-left: 0;\r\n\r\n    border-top: 1px solid rgba(255, 255, 255, 0.1);\r\n    border-left: 0;\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-brands-hero-v2 *,\r\n  #commerss-brands-hero-v2 *::before,\r\n  #commerss-brands-hero-v2 *::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-brands-hero-v2'\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 revealElements = root.querySelectorAll(\r\n    '.cbhv2-reveal'\r\n  );\r\n\r\n  const universe = root.querySelector(\r\n    '.cbhv2-universe'\r\n  );\r\n\r\n  const core = root.querySelector(\r\n    '.cbhv2-core'\r\n  );\r\n\r\n  const brands = Array.from(\r\n    root.querySelectorAll('.cbhv2-brand')\r\n  );\r\n\r\n  \/*\r\n   * ANIMACI\u00d3N DE ENTRADA\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(\r\n            'is-visible'\r\n          );\r\n\r\n          observer.unobserve(entry.target);\r\n        });\r\n      },\r\n      {\r\n        threshold: 0.12\r\n      }\r\n    );\r\n\r\n    revealElements.forEach(function (element) {\r\n      observer.observe(element);\r\n    });\r\n  } else {\r\n    revealElements.forEach(function (element) {\r\n      element.classList.add('is-visible');\r\n    });\r\n  }\r\n\r\n  \/*\r\n   * PROFUNDIDAD MUY SUAVE EN ESCRITORIO\r\n   *\/\r\n\r\n  if (\r\n    universe &&\r\n    core &&\r\n    window.matchMedia(\r\n      '(hover: hover) and (min-width: 1101px)'\r\n    ).matches\r\n  ) {\r\n    universe.addEventListener(\r\n      'mousemove',\r\n      function (event) {\r\n        const bounds =\r\n          universe.getBoundingClientRect();\r\n\r\n        const x =\r\n          (event.clientX - bounds.left) \/\r\n            bounds.width -\r\n          0.5;\r\n\r\n        const y =\r\n          (event.clientY - bounds.top) \/\r\n            bounds.height -\r\n          0.5;\r\n\r\n        core.style.marginLeft =\r\n          x * -9 + 'px';\r\n\r\n        core.style.marginTop =\r\n          y * -9 + 'px';\r\n\r\n        brands.forEach(function (brand, index) {\r\n          const intensity =\r\n            index % 2 === 0 ? 4 : -4;\r\n\r\n          brand.style.translate =\r\n            x * intensity +\r\n            'px ' +\r\n            y * intensity +\r\n            'px';\r\n        });\r\n      }\r\n    );\r\n\r\n    universe.addEventListener(\r\n      'mouseleave',\r\n      function () {\r\n        core.style.marginLeft = '';\r\n        core.style.marginTop = '';\r\n\r\n        brands.forEach(function (brand) {\r\n          brand.style.translate = '';\r\n        });\r\n      }\r\n    );\r\n  }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f03ae89 e-con e-atomic-element e-flexbox-base e-d3c9613 \" data-id=\"f03ae89\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"f03ae89\" data-e-type=\"e-flexbox\" data-id=\"f03ae89\">\n    \t\t<div class=\"elementor-element elementor-element-a645933 elementor-widget elementor-widget-html\" data-id=\"a645933\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section\r\n  id=\"commerss-brands-metrics-v2\"\r\n  class=\"cbmv2-section\"\r\n  aria-labelledby=\"cbmv2-title\"\r\n>\r\n  <div class=\"cbmv2-shell\">\r\n\r\n    <!-- INTRO -->\r\n    <header class=\"cbmv2-header cbmv2-reveal\">\r\n      <div>\r\n        <span class=\"cbmv2-eyebrow\">\r\n          LO QUE NECESITAS, SIN COMPLICACIONES\r\n        <\/span>\r\n\r\n        <h2 id=\"cbmv2-title\">\r\n          M\u00e1s opciones.<br>\r\n          Una sola relaci\u00f3n.\r\n        <\/h2>\r\n      <\/div>\r\n\r\n      <div class=\"cbmv2-intro\">\r\n        <p>\r\n          Representamos fabricantes y tecnolog\u00edas especializadas para ayudarte\r\n          a comparar alternativas, seleccionar equipos e integrar soluciones\r\n          sin multiplicar proveedores.\r\n        <\/p>\r\n\r\n        <a href=\"#catalogo-marcas\">\r\n          Explorar directorio\r\n          <span aria-hidden=\"true\">\u2193<\/span>\r\n        <\/a>\r\n      <\/div>\r\n    <\/header>\r\n\r\n    <!-- M\u00c9TRICAS -->\r\n    <div class=\"cbmv2-grid\">\r\n\r\n      <!-- 105 MARCAS -->\r\n      <article class=\"cbmv2-card cbmv2-card-primary cbmv2-reveal\">\r\n        <div class=\"cbmv2-card-top\">\r\n          <span class=\"cbmv2-index\">01<\/span>\r\n\r\n          <span class=\"cbmv2-icon\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 48 48\">\r\n              <circle cx=\"24\" cy=\"24\" r=\"6\"><\/circle>\r\n              <circle cx=\"24\" cy=\"24\" r=\"15\"><\/circle>\r\n              <circle cx=\"24\" cy=\"24\" r=\"22\"><\/circle>\r\n              <path d=\"M24 2v7M24 39v7M2 24h7M39 24h7\"><\/path>\r\n            <\/svg>\r\n          <\/span>\r\n        <\/div>\r\n\r\n        <div class=\"cbmv2-card-content\">\r\n          <span class=\"cbmv2-label\">\r\n            PORTAFOLIO\r\n          <\/span>\r\n\r\n          <div class=\"cbmv2-number\">\r\n            <span\r\n              class=\"cbmv2-counter\"\r\n              data-target=\"100\"\r\n            >\r\n              0\r\n            <\/span>\r\n          <\/div>\r\n\r\n          <h3>Marcas especializadas<\/h3>\r\n\r\n          <p>\r\n            Tecnolog\u00edas para distintas etapas, materiales,\r\n            capacidades y procesos industriales.\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"cbmv2-orbits\" aria-hidden=\"true\">\r\n          <i><\/i>\r\n          <i><\/i>\r\n          <i><\/i>\r\n\r\n          <b><\/b>\r\n          <b><\/b>\r\n          <b><\/b>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- UN CONTACTO -->\r\n      <article class=\"cbmv2-card cbmv2-card-contact cbmv2-reveal\">\r\n        <div class=\"cbmv2-card-top\">\r\n          <span class=\"cbmv2-index\">02<\/span>\r\n\r\n          <span class=\"cbmv2-arrow\" aria-hidden=\"true\">\r\n            \u2197\r\n          <\/span>\r\n        <\/div>\r\n\r\n        <div class=\"cbmv2-card-content\">\r\n          <span class=\"cbmv2-label\">\r\n            RELACI\u00d3N COMERCIAL\r\n          <\/span>\r\n\r\n          <div class=\"cbmv2-number\">\r\n            <span>01<\/span>\r\n          <\/div>\r\n\r\n          <h3>Punto de contacto<\/h3>\r\n\r\n          <p>\r\n           Una sola conversaci\u00f3n para acceder a decenas de marcas y cientos de productos para tus proyectos.\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"cbmv2-contact-flow\" aria-hidden=\"true\">\r\n          <span class=\"cbmv2-flow-origin\">\r\n            C\r\n          <\/span>\r\n\r\n          <i><\/i>\r\n\r\n          <div>\r\n            <b><\/b>\r\n            <b><\/b>\r\n            <b><\/b>\r\n            <b><\/b>\r\n          <\/div>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- APLICACIONES -->\r\n      <article class=\"cbmv2-card cbmv2-card-applications cbmv2-reveal\">\r\n        <div class=\"cbmv2-card-top\">\r\n          <span class=\"cbmv2-index\">03<\/span>\r\n\r\n          <span class=\"cbmv2-icon cbmv2-icon-light\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 48 48\">\r\n              <rect x=\"6\" y=\"8\" width=\"14\" height=\"14\" rx=\"4\"><\/rect>\r\n              <rect x=\"28\" y=\"8\" width=\"14\" height=\"14\" rx=\"4\"><\/rect>\r\n              <rect x=\"6\" y=\"28\" width=\"14\" height=\"14\" rx=\"4\"><\/rect>\r\n              <rect x=\"28\" y=\"28\" width=\"14\" height=\"14\" rx=\"4\"><\/rect>\r\n              <path d=\"M20 15h8M13 22v6M35 22v6M20 35h8\"><\/path>\r\n            <\/svg>\r\n          <\/span>\r\n        <\/div>\r\n\r\n        <div class=\"cbmv2-card-content\">\r\n          <span class=\"cbmv2-label\">\r\n            POSIBILIDADES\r\n          <\/span>\r\n\r\n          <div class=\"cbmv2-word-number\">\r\n            Cientos\r\n          <\/div>\r\n\r\n          <h3>de aplicaciones industriales<\/h3>\r\n\r\n          <p>\r\n            Soluciones para almacenar, transportar, medir,\r\n            dosificar, filtrar, mezclar y automatizar.\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"cbmv2-tags\">\r\n          <span>Almacenamiento<\/span>\r\n          <span>Transporte<\/span>\r\n          <span>Dosificaci\u00f3n<\/span>\r\n          <span>Filtraci\u00f3n<\/span>\r\n          <span>Mezclado<\/span>\r\n          <span>Monitoreo y control<\/span>\r\n        <\/div>\r\n      <\/article>\r\n\r\n    <\/div>\r\n\r\n    <!-- CIERRE -->\r\n    <footer class=\"cbmv2-footer cbmv2-reveal\">\r\n      <span>\r\n        \u00bfQu\u00e9 significa para tu operaci\u00f3n?\r\n      <\/span>\r\n\r\n      <div class=\"cbmv2-benefits\">\r\n        <p>\r\n          <i>01<\/i>\r\n          Encontrar el producto ideal\r\n        <\/p>\r\n\r\n        <p>\r\n          <i>02<\/i>\r\n          Menos gesti\u00f3n entre proveedores\r\n        <\/p>\r\n\r\n        <p>\r\n          <i>03<\/i>\r\n          Productos que se integran a tu soluci\u00f3n\r\n        <\/p>\r\n      <\/div>\r\n    <\/footer>\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-brands-metrics-v2 {\r\n  --cbmv2-navy: #063f5b;\r\n  --cbmv2-dark: #042f43;\r\n  --cbmv2-deep: #021f2d;\r\n  --cbmv2-teal: #4ba6a6;\r\n  --cbmv2-teal-light: #86cfcc;\r\n  --cbmv2-text: #657984;\r\n  --cbmv2-soft: #f5f5f7;\r\n  --cbmv2-border: rgba(6, 63, 91, 0.1);\r\n  --cbmv2-radius: 30px;\r\n\r\n  width: 100%;\r\n  overflow: hidden;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 91% 5%,\r\n      rgba(75, 166, 166, 0.1),\r\n      transparent 24%\r\n    ),\r\n    #ffffff;\r\n\r\n  color: var(--cbmv2-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#commerss-brands-metrics-v2 *,\r\n#commerss-brands-metrics-v2 *::before,\r\n#commerss-brands-metrics-v2 *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n#commerss-brands-metrics-v2 .cbmv2-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   ENCABEZADO\r\n================================================== *\/\r\n\r\n#commerss-brands-metrics-v2 .cbmv2-header {\r\n  display: grid;\r\n  grid-template-columns:\r\n    minmax(0, 1.2fr)\r\n    minmax(320px, 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#commerss-brands-metrics-v2 .cbmv2-eyebrow {\r\n  display: block;\r\n  margin-bottom: 15px;\r\n\r\n  color: var(--cbmv2-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#commerss-brands-metrics-v2 .cbmv2-header h2 {\r\n  margin: 0;\r\n\r\n  color: var(--cbmv2-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#commerss-brands-metrics-v2 .cbmv2-intro p {\r\n  margin: 0;\r\n\r\n  color: var(--cbmv2-text);\r\n\r\n  font-size: clamp(16px, 1.25vw, 19px);\r\n  line-height: 1.65;\r\n}\r\n\r\n#commerss-brands-metrics-v2 .cbmv2-intro a {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n\r\n  margin-top: 22px;\r\n\r\n  color: var(--cbmv2-navy);\r\n\r\n  font-size: 13px;\r\n  font-weight: 650;\r\n  text-decoration: none;\r\n}\r\n\r\n#commerss-brands-metrics-v2 .cbmv2-intro a span {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  width: 30px;\r\n  height: 30px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: rgba(75, 166, 166, 0.11);\r\n  color: var(--cbmv2-teal);\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#commerss-brands-metrics-v2\r\n.cbmv2-intro a:hover span {\r\n  transform: translateY(4px);\r\n\r\n  background: var(--cbmv2-teal);\r\n  color: #ffffff;\r\n}\r\n\r\n\/* ==================================================\r\n   GRID\r\n================================================== *\/\r\n\r\n#commerss-brands-metrics-v2 .cbmv2-grid {\r\n  display: grid;\r\n  grid-template-columns:\r\n    minmax(0, 1.15fr)\r\n    minmax(0, 0.85fr)\r\n    minmax(0, 1fr);\r\n\r\n  gap: 15px;\r\n}\r\n\r\n\/* TARJETA BASE *\/\r\n\r\n#commerss-brands-metrics-v2 .cbmv2-card {\r\n  position: relative;\r\n  isolation: isolate;\r\n\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: space-between;\r\n\r\n  min-width: 0;\r\n  min-height: 470px;\r\n  padding: 29px;\r\n  overflow: hidden;\r\n\r\n  border: 1px solid var(--cbmv2-border);\r\n  border-radius: var(--cbmv2-radius);\r\n\r\n  background:\r\n    linear-gradient(\r\n      145deg,\r\n      #ffffff,\r\n      #f5f7f8\r\n    );\r\n\r\n  box-shadow:\r\n    0 3px 9px rgba(6, 63, 91, 0.025),\r\n    0 20px 46px rgba(6, 63, 91, 0.055);\r\n\r\n  transition:\r\n    transform 0.55s cubic-bezier(.22, .61, .36, 1),\r\n    border-color 0.4s ease,\r\n    box-shadow 0.55s ease;\r\n}\r\n\r\n#commerss-brands-metrics-v2 .cbmv2-card:hover {\r\n  z-index: 5;\r\n\r\n  transform: translateY(-9px);\r\n\r\n  border-color: rgba(75, 166, 166, 0.31);\r\n\r\n  box-shadow:\r\n    0 13px 30px rgba(6, 63, 91, 0.08),\r\n    0 38px 75px rgba(6, 63, 91, 0.13);\r\n}\r\n\r\n#commerss-brands-metrics-v2 .cbmv2-card::after {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: -1;\r\n\r\n  pointer-events: none;\r\n\r\n  background:\r\n    linear-gradient(\r\n      115deg,\r\n      transparent 24%,\r\n      rgba(255, 255, 255, 0.78) 47%,\r\n      transparent 70%\r\n    );\r\n\r\n  transform: translateX(-135%);\r\n\r\n  transition:\r\n    transform 1s cubic-bezier(.22, .61, .36, 1);\r\n}\r\n\r\n#commerss-brands-metrics-v2\r\n.cbmv2-card:hover::after {\r\n  transform: translateX(135%);\r\n}\r\n\r\n\/* PARTE SUPERIOR *\/\r\n\r\n#commerss-brands-metrics-v2 .cbmv2-card-top {\r\n  position: relative;\r\n  z-index: 5;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 20px;\r\n}\r\n\r\n#commerss-brands-metrics-v2 .cbmv2-index {\r\n  color: rgba(6, 63, 91, 0.36);\r\n\r\n  font-size: 9px;\r\n  font-weight: 750;\r\n  letter-spacing: 0.13em;\r\n}\r\n\r\n#commerss-brands-metrics-v2 .cbmv2-icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  width: 49px;\r\n  height: 49px;\r\n\r\n  border-radius: 15px;\r\n\r\n  background: rgba(75, 166, 166, 0.12);\r\n  color: var(--cbmv2-navy);\r\n\r\n  transition:\r\n    transform 0.45s ease,\r\n    background 0.35s ease;\r\n}\r\n\r\n#commerss-brands-metrics-v2\r\n.cbmv2-card:hover\r\n.cbmv2-icon {\r\n  transform:\r\n    rotate(-3deg)\r\n    scale(1.07);\r\n\r\n  background: rgba(75, 166, 166, 0.2);\r\n}\r\n\r\n#commerss-brands-metrics-v2 .cbmv2-icon svg {\r\n  width: 29px;\r\n  height: 29px;\r\n\r\n  fill: none;\r\n  stroke: currentColor;\r\n  stroke-width: 1.65;\r\n  stroke-linecap: round;\r\n  stroke-linejoin: round;\r\n}\r\n\r\n#commerss-brands-metrics-v2 .cbmv2-arrow {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  width: 42px;\r\n  height: 42px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: rgba(255, 255, 255, 0.1);\r\n  color: var(--cbmv2-teal-light);\r\n\r\n  font-size: 19px;\r\n\r\n  transition:\r\n    transform 0.35s ease,\r\n    background 0.3s ease;\r\n}\r\n\r\n#commerss-brands-metrics-v2\r\n.cbmv2-card:hover\r\n.cbmv2-arrow {\r\n  transform:\r\n    rotate(5deg)\r\n    scale(1.07);\r\n\r\n  background: var(--cbmv2-teal);\r\n}\r\n\r\n\/* CONTENIDO *\/\r\n\r\n#commerss-brands-metrics-v2 .cbmv2-card-content {\r\n  position: relative;\r\n  z-index: 5;\r\n\r\n  margin-top: auto;\r\n}\r\n\r\n#commerss-brands-metrics-v2 .cbmv2-label {\r\n  display: block;\r\n  margin-bottom: 13px;\r\n\r\n  color: var(--cbmv2-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#commerss-brands-metrics-v2 .cbmv2-number {\r\n  color: var(--cbmv2-navy);\r\n\r\n  font-size: clamp(78px, 8vw, 125px);\r\n  font-weight: 620;\r\n  line-height: 0.78;\r\n  letter-spacing: -0.075em;\r\n}\r\n\r\n#commerss-brands-metrics-v2 .cbmv2-word-number {\r\n  color: var(--cbmv2-navy);\r\n\r\n  font-size: clamp(52px, 5vw, 78px);\r\n  font-weight: 620;\r\n  line-height: 0.9;\r\n  letter-spacing: -0.065em;\r\n}\r\n\r\n#commerss-brands-metrics-v2 .cbmv2-card h3 {\r\n  margin: 23px 0 0;\r\n\r\n  color: var(--cbmv2-navy);\r\n\r\n  font-size: clamp(23px, 2vw, 31px);\r\n  font-weight: 630;\r\n  line-height: 1.05;\r\n  letter-spacing: -0.035em;\r\n}\r\n\r\n#commerss-brands-metrics-v2 .cbmv2-card p {\r\n  max-width: 390px;\r\n  margin: 14px 0 0;\r\n\r\n  color: var(--cbmv2-text);\r\n\r\n  font-size: 13px;\r\n  line-height: 1.6;\r\n}\r\n\r\n\/* ==================================================\r\n   TARJETA 105\r\n================================================== *\/\r\n\r\n#commerss-brands-metrics-v2 .cbmv2-card-primary {\r\n  background:\r\n    radial-gradient(\r\n      circle at 85% 5%,\r\n      rgba(75, 166, 166, 0.22),\r\n      transparent 33%\r\n    ),\r\n    linear-gradient(\r\n      145deg,\r\n      #ffffff,\r\n      #f2f7f7\r\n    );\r\n}\r\n\r\n#commerss-brands-metrics-v2 .cbmv2-orbits {\r\n  position: absolute;\r\n  top: -125px;\r\n  right: -90px;\r\n  z-index: 1;\r\n\r\n  width: 340px;\r\n  height: 340px;\r\n\r\n  opacity: 0.48;\r\n\r\n  transition:\r\n    transform 1.1s cubic-bezier(.22, .61, .36, 1);\r\n}\r\n\r\n#commerss-brands-metrics-v2\r\n.cbmv2-card-primary:hover\r\n.cbmv2-orbits {\r\n  transform:\r\n    rotate(12deg)\r\n    scale(1.05);\r\n}\r\n\r\n#commerss-brands-metrics-v2 .cbmv2-orbits i {\r\n  position: absolute;\r\n\r\n  border: 1px solid rgba(6, 63, 91, 0.16);\r\n  border-radius: 50%;\r\n}\r\n\r\n#commerss-brands-metrics-v2\r\n.cbmv2-orbits i:nth-child(1) {\r\n  inset: 0;\r\n}\r\n\r\n#commerss-brands-metrics-v2\r\n.cbmv2-orbits i:nth-child(2) {\r\n  inset: 48px;\r\n}\r\n\r\n#commerss-brands-metrics-v2\r\n.cbmv2-orbits i:nth-child(3) {\r\n  inset: 98px;\r\n}\r\n\r\n#commerss-brands-metrics-v2 .cbmv2-orbits b {\r\n  position: absolute;\r\n\r\n  width: 9px;\r\n  height: 9px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: var(--cbmv2-teal);\r\n\r\n  box-shadow:\r\n    0 0 0 7px rgba(75, 166, 166, 0.09);\r\n}\r\n\r\n#commerss-brands-metrics-v2\r\n.cbmv2-orbits b:nth-of-type(1) {\r\n  top: 65px;\r\n  left: 56px;\r\n}\r\n\r\n#commerss-brands-metrics-v2\r\n.cbmv2-orbits b:nth-of-type(2) {\r\n  right: 15px;\r\n  bottom: 118px;\r\n}\r\n\r\n#commerss-brands-metrics-v2\r\n.cbmv2-orbits b:nth-of-type(3) {\r\n  left: 153px;\r\n  bottom: 50px;\r\n}\r\n\r\n\/* ==================================================\r\n   TARJETA CONTACTO\r\n================================================== *\/\r\n\r\n#commerss-brands-metrics-v2 .cbmv2-card-contact {\r\n  border-color: transparent;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 88% 3%,\r\n      rgba(128, 213, 209, 0.39),\r\n      transparent 34%\r\n    ),\r\n    linear-gradient(\r\n      145deg,\r\n      var(--cbmv2-navy),\r\n      var(--cbmv2-deep)\r\n    );\r\n\r\n  color: #ffffff;\r\n}\r\n\r\n#commerss-brands-metrics-v2\r\n.cbmv2-card-contact .cbmv2-index {\r\n  color: rgba(255, 255, 255, 0.4);\r\n}\r\n\r\n#commerss-brands-metrics-v2\r\n.cbmv2-card-contact .cbmv2-label {\r\n  color: var(--cbmv2-teal-light);\r\n}\r\n\r\n#commerss-brands-metrics-v2\r\n.cbmv2-card-contact .cbmv2-number,\r\n#commerss-brands-metrics-v2\r\n.cbmv2-card-contact h3 {\r\n  color: #ffffff;\r\n}\r\n\r\n#commerss-brands-metrics-v2\r\n.cbmv2-card-contact p {\r\n  color: rgba(255, 255, 255, 0.65);\r\n}\r\n\r\n\/* DIAGRAMA *\/\r\n\r\n#commerss-brands-metrics-v2 .cbmv2-contact-flow {\r\n  position: absolute;\r\n  top: 100px;\r\n  left: 50%;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  width: 82%;\r\n  max-width: 290px;\r\n\r\n  transform: translateX(-50%);\r\n\r\n  opacity: 0.55;\r\n}\r\n\r\n#commerss-brands-metrics-v2 .cbmv2-flow-origin {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n\r\n  width: 72px;\r\n  height: 72px;\r\n\r\n  border: 1px solid rgba(255, 255, 255, 0.25);\r\n  border-radius: 50%;\r\n\r\n  background: rgba(255, 255, 255, 0.09);\r\n  color: #ffffff;\r\n\r\n  font-size: 26px;\r\n  font-weight: 650;\r\n\r\n  box-shadow:\r\n    0 0 0 12px rgba(255, 255, 255, 0.025);\r\n}\r\n\r\n#commerss-brands-metrics-v2\r\n.cbmv2-contact-flow > i {\r\n  flex: 1;\r\n  height: 1px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      var(--cbmv2-teal-light),\r\n      rgba(135, 208, 205, 0.22)\r\n    );\r\n}\r\n\r\n#commerss-brands-metrics-v2\r\n.cbmv2-contact-flow > div {\r\n  display: grid;\r\n  grid-template-columns: repeat(2, 17px);\r\n  gap: 14px;\r\n}\r\n\r\n#commerss-brands-metrics-v2\r\n.cbmv2-contact-flow b {\r\n  width: 17px;\r\n  height: 17px;\r\n\r\n  border: 1px solid rgba(255, 255, 255, 0.33);\r\n  border-radius: 50%;\r\n\r\n  background: rgba(75, 166, 166, 0.26);\r\n\r\n  transition:\r\n    transform 0.4s ease,\r\n    background 0.3s ease;\r\n}\r\n\r\n#commerss-brands-metrics-v2\r\n.cbmv2-card-contact:hover\r\n.cbmv2-contact-flow b {\r\n  transform: scale(1.2);\r\n  background: var(--cbmv2-teal-light);\r\n}\r\n\r\n\/* ==================================================\r\n   APLICACIONES\r\n================================================== *\/\r\n\r\n#commerss-brands-metrics-v2 .cbmv2-tags {\r\n  position: relative;\r\n  z-index: 5;\r\n\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 7px;\r\n\r\n  margin-top: 27px;\r\n}\r\n\r\n#commerss-brands-metrics-v2 .cbmv2-tags span {\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 var(--cbmv2-border);\r\n  border-radius: 999px;\r\n\r\n  background: rgba(255, 255, 255, 0.72);\r\n  color: var(--cbmv2-text);\r\n\r\n  font-size: 9px;\r\n  font-weight: 620;\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#commerss-brands-metrics-v2\r\n.cbmv2-tags span:hover {\r\n  transform: translateY(-3px);\r\n\r\n  background: var(--cbmv2-teal);\r\n  color: #ffffff;\r\n}\r\n\r\n\/* ==================================================\r\n   PIE\r\n================================================== *\/\r\n\r\n#commerss-brands-metrics-v2 .cbmv2-footer {\r\n  display: grid;\r\n  grid-template-columns:\r\n    minmax(190px, 0.55fr)\r\n    minmax(0, 1.45fr);\r\n\r\n  align-items: center;\r\n  gap: 50px;\r\n\r\n  margin-top: 23px;\r\n  padding: 29px 3px;\r\n\r\n  border-top: 1px solid var(--cbmv2-border);\r\n  border-bottom: 1px solid var(--cbmv2-border);\r\n}\r\n\r\n#commerss-brands-metrics-v2\r\n.cbmv2-footer > span {\r\n  color: var(--cbmv2-navy);\r\n\r\n  font-size: 14px;\r\n  font-weight: 650;\r\n}\r\n\r\n#commerss-brands-metrics-v2 .cbmv2-benefits {\r\n  display: grid;\r\n  grid-template-columns:\r\n    repeat(3, minmax(0, 1fr));\r\n}\r\n\r\n#commerss-brands-metrics-v2\r\n.cbmv2-benefits p {\r\n  display: grid;\r\n  grid-template-columns: 28px minmax(0, 1fr);\r\n  align-items: center;\r\n  gap: 10px;\r\n\r\n  min-height: 45px;\r\n  margin: 0;\r\n  padding: 0 21px;\r\n\r\n  color: var(--cbmv2-text);\r\n\r\n  font-size: 11px;\r\n  font-weight: 600;\r\n}\r\n\r\n#commerss-brands-metrics-v2\r\n.cbmv2-benefits p + p {\r\n  border-left: 1px solid var(--cbmv2-border);\r\n}\r\n\r\n#commerss-brands-metrics-v2\r\n.cbmv2-benefits i {\r\n  color: var(--cbmv2-teal);\r\n\r\n  font-size: 8px;\r\n  font-style: normal;\r\n  font-weight: 750;\r\n}\r\n\r\n\/* ==================================================\r\n   ENTRADA\r\n================================================== *\/\r\n\r\n#commerss-brands-metrics-v2 .cbmv2-reveal {\r\n  opacity: 0;\r\n  transform: translateY(28px);\r\n}\r\n\r\n#commerss-brands-metrics-v2\r\n.cbmv2-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-brands-metrics-v2\r\n.cbmv2-card:nth-child(2).is-visible {\r\n  transition-delay: 0.08s;\r\n}\r\n\r\n#commerss-brands-metrics-v2\r\n.cbmv2-card:nth-child(3).is-visible {\r\n  transition-delay: 0.16s;\r\n}\r\n\r\n\/* ==================================================\r\n   TABLET\r\n================================================== *\/\r\n\r\n@media (max-width: 1050px) {\r\n  #commerss-brands-metrics-v2 .cbmv2-header {\r\n    grid-template-columns: 1fr;\r\n    gap: 26px;\r\n  }\r\n\r\n  #commerss-brands-metrics-v2 .cbmv2-intro {\r\n    max-width: 720px;\r\n  }\r\n\r\n  #commerss-brands-metrics-v2 .cbmv2-grid {\r\n    grid-template-columns:\r\n      repeat(2, minmax(0, 1fr));\r\n  }\r\n\r\n  #commerss-brands-metrics-v2\r\n  .cbmv2-card-primary {\r\n    grid-column: 1 \/ -1;\r\n  }\r\n\r\n  #commerss-brands-metrics-v2 .cbmv2-card {\r\n    min-height: 440px;\r\n  }\r\n\r\n  #commerss-brands-metrics-v2 .cbmv2-footer {\r\n    grid-template-columns: 1fr;\r\n    gap: 20px;\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-brands-metrics-v2 {\r\n    --cbmv2-radius: 23px;\r\n  }\r\n\r\n  #commerss-brands-metrics-v2 .cbmv2-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  #commerss-brands-metrics-v2 .cbmv2-header {\r\n    margin-bottom: 34px;\r\n  }\r\n\r\n  #commerss-brands-metrics-v2 .cbmv2-header h2 {\r\n    font-size: 44px;\r\n  }\r\n\r\n  #commerss-brands-metrics-v2 .cbmv2-grid {\r\n    grid-template-columns: 1fr;\r\n    gap: 12px;\r\n  }\r\n\r\n  #commerss-brands-metrics-v2\r\n  .cbmv2-card-primary {\r\n    grid-column: auto;\r\n  }\r\n\r\n  #commerss-brands-metrics-v2 .cbmv2-card {\r\n    min-height: 420px;\r\n    padding: 24px;\r\n  }\r\n\r\n  #commerss-brands-metrics-v2 .cbmv2-number {\r\n    font-size: 92px;\r\n  }\r\n\r\n  #commerss-brands-metrics-v2\r\n  .cbmv2-word-number {\r\n    font-size: 59px;\r\n  }\r\n\r\n  #commerss-brands-metrics-v2\r\n  .cbmv2-contact-flow {\r\n    top: 90px;\r\n\r\n    max-width: 255px;\r\n  }\r\n\r\n  #commerss-brands-metrics-v2 .cbmv2-benefits {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  #commerss-brands-metrics-v2\r\n  .cbmv2-benefits p {\r\n    padding: 10px 0;\r\n  }\r\n\r\n  #commerss-brands-metrics-v2\r\n  .cbmv2-benefits p + p {\r\n    border-top: 1px solid var(--cbmv2-border);\r\n    border-left: 0;\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-brands-metrics-v2 *,\r\n  #commerss-brands-metrics-v2 *::before,\r\n  #commerss-brands-metrics-v2 *::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-brands-metrics-v2'\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 reveals = root.querySelectorAll(\r\n    '.cbmv2-reveal'\r\n  );\r\n\r\n  const counter = root.querySelector(\r\n    '.cbmv2-counter'\r\n  );\r\n\r\n  let counterStarted = false;\r\n\r\n  function animateCounter() {\r\n    if (!counter || counterStarted) {\r\n      return;\r\n    }\r\n\r\n    counterStarted = true;\r\n\r\n    const target =\r\n      parseInt(counter.dataset.target, 10) || 105;\r\n\r\n    const duration = 1500;\r\n    const start = performance.now();\r\n\r\n    function update(time) {\r\n      const progress =\r\n        Math.min(\r\n          (time - start) \/ duration,\r\n          1\r\n        );\r\n\r\n      const eased =\r\n        1 - Math.pow(1 - progress, 3);\r\n\r\n      counter.textContent =\r\n        Math.floor(target * eased);\r\n\r\n      if (progress < 1) {\r\n        window.requestAnimationFrame(update);\r\n      } else {\r\n        counter.textContent = target;\r\n      }\r\n    }\r\n\r\n    window.requestAnimationFrame(update);\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            if (\r\n              entry.target.classList.contains(\r\n                'cbmv2-card-primary'\r\n              )\r\n            ) {\r\n              animateCounter();\r\n            }\r\n\r\n            observer.unobserve(entry.target);\r\n          });\r\n        },\r\n        {\r\n          threshold: 0.12\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('is-visible');\r\n    });\r\n\r\n    animateCounter();\r\n  }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-d850a4d e-con e-atomic-element e-flexbox-base e-d850a4d-714fc26 \" data-id=\"d850a4d\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"d850a4d\" data-e-type=\"e-flexbox\" data-id=\"d850a4d\">\n    \t\t<div class=\"elementor-element elementor-element-824060d elementor-widget elementor-widget-html\" data-id=\"824060d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section\r\n  id=\"catalogo-marcas\"\r\n  class=\"cmdv3-section\"\r\n  aria-labelledby=\"cmdv3-title\"\r\n>\r\n  <div class=\"cmdv3-shell\">\r\n\r\n    <!-- ENCABEZADO EDITORIAL -->\r\n    <header class=\"cmdv3-header cmdv3-reveal\">\r\n      <div class=\"cmdv3-heading\">\r\n        <span class=\"cmdv3-eyebrow\">\r\n          DIRECTORIO DE MARCAS\r\n        <\/span>\r\n\r\n        <h2 id=\"cmdv3-title\">\r\n          Encuentra los equipos<br>\r\n          para todos tus proyectos.\r\n        <\/h2>\r\n      <\/div>\r\n\r\n      <div class=\"cmdv3-intro\">\r\n        <p>\r\n          Explora nuestro portafolio de marcas.\r\n          Busca directamente por nombre o utiliza el filtro alfab\u00e9tico\r\n          para encontrar una marca.\r\n        <\/p>\r\n\r\n        <div class=\"cmdv3-total\">\r\n          <strong>+100<\/strong>\r\n\r\n          <span>\r\n            marcas dentro<br>\r\n            del portafolio\r\n          <\/span>\r\n        <\/div>\r\n      <\/div>\r\n    <\/header>\r\n\r\n    <!-- MARCAS DESTACADAS -->\r\n    <div class=\"cmdv3-featured-block cmdv3-reveal\">\r\n      <div class=\"cmdv3-featured-heading\">\r\n        <div>\r\n          <span>SELECCI\u00d3N DESTACADA<\/span>\r\n          <h3>Marcas para tus proyectos.<\/h3>\r\n        <\/div>\r\n\r\n        <p>\r\n          Una muestra de los equipos disponibles dentro de nuestro cat\u00e1logo.\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <div\r\n        class=\"cmdv3-featured-carousel\"\r\n        role=\"region\"\r\n        aria-roledescription=\"carrusel\"\r\n        aria-label=\"Marcas destacadas\"\r\n      >\r\n        <button\r\n          class=\"cmdv3-carousel-button cmdv3-carousel-prev\"\r\n          type=\"button\"\r\n          aria-label=\"Ver marca anterior\"\r\n        >\r\n          <span aria-hidden=\"true\">\u2190<\/span>\r\n        <\/button>\r\n\r\n        <div\r\n          class=\"cmdv3-featured-viewport\"\r\n          tabindex=\"0\"\r\n          aria-label=\"Carrusel de seis marcas destacadas\"\r\n        >\r\n          <div class=\"cmdv3-featured-track\">\r\n\r\n            <!-- 01 \u00b7 SYCSA -->\r\n            <a\r\n              class=\"cmdv3-featured-card cmdv3-featured-sycsa\"\r\n              href=\"\/marca\/sycsa\/\"\r\n              aria-label=\"1 de 6: explorar SYCSA\"\r\n            >\r\n              <div class=\"cmdv3-featured-top\">\r\n                <span>01<\/span>\r\n                <i aria-hidden=\"true\">\u2197<\/i>\r\n              <\/div>\r\n\r\n              <div class=\"cmdv3-featured-logo\">\r\n                <img\r\n                  src=\"http:\/\/commerss.com\/wp-content\/uploads\/2026\/07\/Logo-Sycsa-Azul-1-scaled.webp\"\r\n                  alt=\"SYCSA\"\r\n                  loading=\"eager\"\r\n                  decoding=\"async\"\r\n                >\r\n              <\/div>\r\n\r\n              <div class=\"cmdv3-featured-content\">\r\n                <small>ALMACENAMIENTO DE MATERIALES<\/small>\r\n                <strong>SYCSA<\/strong>\r\n\r\n                <p>\r\n                  Silos y tanques para el almacenamiento de materiales a granel.\r\n                <\/p>\r\n              <\/div>\r\n            <\/a>\r\n\r\n            <!-- 02 \u00b7 GARDNER DENVER -->\r\n            <a\r\n              class=\"cmdv3-featured-card cmdv3-featured-gardner\"\r\n              href=\"\/marca\/gardner-denver\/\"\r\n              aria-label=\"2 de 6: explorar Gardner Denver\"\r\n            >\r\n              <div class=\"cmdv3-featured-top\">\r\n                <span>02<\/span>\r\n                <i aria-hidden=\"true\">\u2197<\/i>\r\n              <\/div>\r\n\r\n              <div class=\"cmdv3-featured-logo\">\r\n                <img\r\n                  src=\"\/wp-content\/uploads\/2026\/07\/gardner-denver.webp\"\r\n                  alt=\"Gardner Denver\"\r\n                  loading=\"lazy\"\r\n                  decoding=\"async\"\r\n                >\r\n              <\/div>\r\n\r\n              <div class=\"cmdv3-featured-content\">\r\n                <small>AIRE Y VAC\u00cdO INDUSTRIAL<\/small>\r\n                <strong>Gardner Denver<\/strong>\r\n\r\n                <p>\r\n                  Tecnolog\u00edas para generaci\u00f3n de aire y vac\u00edo\r\n                  en aplicaciones y procesos industriales.\r\n                <\/p>\r\n              <\/div>\r\n            <\/a>\r\n\r\n            <!-- 03 \u00b7 MORRIS COUPLING -->\r\n            <a\r\n              class=\"cmdv3-featured-card cmdv3-featured-morris\"\r\n              href=\"\/marca\/morris-coupling\/\"\r\n              aria-label=\"3 de 6: explorar Morris Coupling\"\r\n            >\r\n              <div class=\"cmdv3-featured-top\">\r\n                <span>03<\/span>\r\n                <i aria-hidden=\"true\">\u2197<\/i>\r\n              <\/div>\r\n\r\n              <div class=\"cmdv3-featured-logo\">\r\n                <img\r\n                  src=\"\/wp-content\/uploads\/2026\/07\/morris.webp\"\r\n                  alt=\"Morris Coupling\"\r\n                  loading=\"lazy\"\r\n                  decoding=\"async\"\r\n                >\r\n              <\/div>\r\n\r\n              <div class=\"cmdv3-featured-content\">\r\n                <small>TRANSPORTE DE MATERIALES<\/small>\r\n                <strong>Morris Coupling<\/strong>\r\n\r\n                <p>\r\n                  Componentes y conexiones para sistemas de transporte\r\n                  neum\u00e1tico y manejo de materiales.\r\n                <\/p>\r\n              <\/div>\r\n            <\/a>\r\n\r\n            <!-- 04 \u00b7 WAM -->\r\n            <a\r\n              class=\"cmdv3-featured-card cmdv3-featured-wam\"\r\n              href=\"\/marca\/wam\/\"\r\n              aria-label=\"4 de 6: explorar WAM\"\r\n            >\r\n              <div class=\"cmdv3-featured-top\">\r\n                <span>04<\/span>\r\n                <i aria-hidden=\"true\">\u2197<\/i>\r\n              <\/div>\r\n\r\n              <div class=\"cmdv3-featured-logo\">\r\n                <img\r\n                  src=\"\/wp-content\/uploads\/2026\/07\/wam.webp\"\r\n                  alt=\"WAM\"\r\n                  loading=\"lazy\"\r\n                  decoding=\"async\"\r\n                >\r\n              <\/div>\r\n\r\n              <div class=\"cmdv3-featured-content\">\r\n                <small>MANEJO DE S\u00d3LIDOS<\/small>\r\n                <strong>WAM<\/strong>\r\n\r\n                <p>\r\n                  Soluciones para transporte, descarga, almacenamiento\r\n                  y procesamiento de materiales a granel.\r\n                <\/p>\r\n              <\/div>\r\n            <\/a>\r\n\r\n            <!-- 05 \u00b7 VORTEX -->\r\n            <a\r\n              class=\"cmdv3-featured-card cmdv3-featured-vortex\"\r\n              href=\"\/marca\/vortex\/\"\r\n              aria-label=\"5 de 6: explorar Vortex\"\r\n            >\r\n              <div class=\"cmdv3-featured-top\">\r\n                <span>05<\/span>\r\n                <i aria-hidden=\"true\">\u2197<\/i>\r\n              <\/div>\r\n\r\n              <div class=\"cmdv3-featured-logo\">\r\n                <img\r\n                  src=\"\/wp-content\/uploads\/2026\/07\/vortex.webp\"\r\n                  alt=\"Vortex\"\r\n                  loading=\"lazy\"\r\n                  decoding=\"async\"\r\n                >\r\n              <\/div>\r\n\r\n              <div class=\"cmdv3-featured-content\">\r\n                <small>CONTROL DE FLUJO<\/small>\r\n                <strong>Vortex<\/strong>\r\n\r\n                <p>\r\n                  V\u00e1lvulas y componentes para controlar el movimiento\r\n                  de polvos, pellets y materiales secos.\r\n                <\/p>\r\n              <\/div>\r\n            <\/a>\r\n\r\n            <!-- 06 \u00b7 BUNTING -->\r\n            <a\r\n              class=\"cmdv3-featured-card cmdv3-featured-bunting\"\r\n              href=\"\/marca\/bunting\/\"\r\n              aria-label=\"6 de 6: explorar Bunting\"\r\n            >\r\n              <div class=\"cmdv3-featured-top\">\r\n                <span>06<\/span>\r\n                <i aria-hidden=\"true\">\u2197<\/i>\r\n              <\/div>\r\n\r\n              <div class=\"cmdv3-featured-logo\">\r\n                <img\r\n                  src=\"\/wp-content\/uploads\/2026\/07\/bunting.webp\"\r\n                  alt=\"Bunting\"\r\n                  loading=\"lazy\"\r\n                  decoding=\"async\"\r\n                >\r\n              <\/div>\r\n\r\n              <div class=\"cmdv3-featured-content\">\r\n                <small>SEPARACI\u00d3N Y DETECCI\u00d3N<\/small>\r\n                <strong>Bunting<\/strong>\r\n\r\n                <p>\r\n                  Equipos magn\u00e9ticos y sistemas de detecci\u00f3n para\r\n                  proteger procesos y mejorar la pureza del producto.\r\n                <\/p>\r\n              <\/div>\r\n            <\/a>\r\n\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <button\r\n          class=\"cmdv3-carousel-button cmdv3-carousel-next\"\r\n          type=\"button\"\r\n          aria-label=\"Ver marca siguiente\"\r\n        >\r\n          <span aria-hidden=\"true\">\u2192<\/span>\r\n        <\/button>\r\n      <\/div>\r\n\r\n      <div\r\n        class=\"cmdv3-carousel-dots\"\r\n        aria-label=\"Seleccionar una marca destacada\"\r\n      ><\/div>\r\n    <\/div>\r\n\r\n    <!-- BARRA DE B\u00daSQUEDA -->\r\n    <div class=\"cmdv3-search-dock cmdv3-reveal\">\r\n      <label class=\"cmdv3-search\">\r\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n          <circle cx=\"11\" cy=\"11\" r=\"6.5\"><\/circle>\r\n          <path d=\"M16 16l5 5\"><\/path>\r\n        <\/svg>\r\n\r\n        <input\r\n          class=\"cmdv3-search-input\"\r\n          type=\"search\"\r\n          placeholder=\"Buscar por nombre de marca\"\r\n          autocomplete=\"off\"\r\n          aria-label=\"Buscar una marca\"\r\n        >\r\n\r\n        <button\r\n          class=\"cmdv3-clear-search\"\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      <div class=\"cmdv3-search-meta\">\r\n        <span class=\"cmdv3-result-count\" aria-live=\"polite\">\r\n          100 marcas\r\n        <\/span>\r\n\r\n        <button class=\"cmdv3-reset\" type=\"button\">\r\n          Limpiar filtros\r\n        <\/button>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- FILTRO ALFAB\u00c9TICO -->\r\n    <div class=\"cmdv3-alphabet-wrapper cmdv3-reveal\">\r\n      <div\r\n        class=\"cmdv3-alphabet\"\r\n        aria-label=\"Filtrar marcas alfab\u00e9ticamente\"\r\n      ><\/div>\r\n    <\/div>\r\n\r\n    <!-- DIRECTORIO -->\r\n    <div class=\"cmdv3-directory\">\r\n      <div\r\n        class=\"cmdv3-grid\"\r\n        aria-live=\"polite\"\r\n      ><\/div>\r\n\r\n      <div class=\"cmdv3-empty\" hidden>\r\n        <span>?<\/span>\r\n\r\n        <h3>No encontramos esa marca.<\/h3>\r\n\r\n        <p>\r\n          Prueba con otro nombre o elimina los filtros activos.\r\n        <\/p>\r\n\r\n        <button type=\"button\">\r\n          Mostrar todas las marcas\r\n        <\/button>\r\n      <\/div>\r\n\r\n      <div class=\"cmdv3-load-wrapper\">\r\n        <button class=\"cmdv3-load-more\" type=\"button\">\r\n          Mostrar m\u00e1s marcas\r\n\r\n          <span aria-hidden=\"true\">\u2193<\/span>\r\n        <\/button>\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#catalogo-marcas {\r\n  --cmdv3-navy: #063f5b;\r\n  --cmdv3-dark: #042f43;\r\n  --cmdv3-deep: #021f2d;\r\n  --cmdv3-teal: #4ba6a6;\r\n  --cmdv3-teal-light: #87d0cd;\r\n  --cmdv3-green: #78b82a;\r\n  --cmdv3-text: #657984;\r\n  --cmdv3-soft: #f5f5f7;\r\n  --cmdv3-border: rgba(6, 63, 91, 0.1);\r\n  --cmdv3-radius: 30px;\r\n\r\n  width: 100%;\r\n  overflow: hidden;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 93% 3%,\r\n      rgba(75, 166, 166, 0.1),\r\n      transparent 23%\r\n    ),\r\n    linear-gradient(\r\n      180deg,\r\n      #ffffff 0%,\r\n      #f6f7f8 32%,\r\n      #ffffff 100%\r\n    );\r\n\r\n  color: var(--cmdv3-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-marcas *,\r\n#catalogo-marcas *::before,\r\n#catalogo-marcas *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n#catalogo-marcas button,\r\n#catalogo-marcas input {\r\n  font-family: inherit;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-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, 120px);\r\n}\r\n\r\n\/* ==================================================\r\n   ENCABEZADO\r\n================================================== *\/\r\n\r\n#catalogo-marcas .cmdv3-header {\r\n  display: grid;\r\n  grid-template-columns:\r\n    minmax(0, 1.3fr)\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: 48px;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-eyebrow {\r\n  display: block;\r\n  margin-bottom: 15px;\r\n\r\n  color: var(--cmdv3-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-marcas .cmdv3-heading h2 {\r\n  margin: 0;\r\n\r\n  color: var(--cmdv3-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-marcas .cmdv3-intro > p {\r\n  margin: 0;\r\n\r\n  color: var(--cmdv3-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-marcas .cmdv3-total {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 16px;\r\n\r\n  margin-top: 25px;\r\n  padding-top: 21px;\r\n\r\n  border-top: 1px solid var(--cmdv3-border);\r\n}\r\n\r\n#catalogo-marcas .cmdv3-total strong {\r\n  color: var(--cmdv3-navy);\r\n\r\n  font-size: 46px;\r\n  font-weight: 630;\r\n  line-height: 0.9;\r\n  letter-spacing: -0.055em;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-total span {\r\n  color: var(--cmdv3-text);\r\n\r\n  font-size: 11px;\r\n  font-weight: 600;\r\n  line-height: 1.4;\r\n}\r\n\r\n\/* ==================================================\r\n   DESTACADAS\r\n================================================== *\/\r\n\r\n#catalogo-marcas .cmdv3-featured-block {\r\n  margin-bottom: 0;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-featured-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#catalogo-marcas\r\n.cmdv3-featured-heading > div > span {\r\n  display: block;\r\n  margin-bottom: 8px;\r\n\r\n  color: var(--cmdv3-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-marcas .cmdv3-featured-heading h3 {\r\n  margin: 0;\r\n\r\n  color: var(--cmdv3-navy);\r\n\r\n  font-size: clamp(25px, 2.4vw, 37px);\r\n  font-weight: 640;\r\n  line-height: 1;\r\n  letter-spacing: -0.04em;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-featured-heading > p {\r\n  max-width: 470px;\r\n  margin: 0;\r\n\r\n  color: var(--cmdv3-text);\r\n\r\n  font-size: 13px;\r\n  line-height: 1.55;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-featured-carousel {\r\n  display: grid;\r\n  grid-template-columns:\r\n    46px\r\n    minmax(0, 1fr)\r\n    46px;\r\n\r\n  align-items: center;\r\n  gap: 12px;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-featured-viewport {\r\n  min-width: 0;\r\n  overflow-x: auto;\r\n  overflow-y: visible;\r\n\r\n  scroll-behavior: smooth;\r\n  scroll-snap-type: x mandatory;\r\n  scrollbar-width: none;\r\n\r\n  outline: none;\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-viewport::-webkit-scrollbar {\r\n  display: none;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-featured-track {\r\n  display: flex;\r\n  gap: 13px;\r\n\r\n  width: 100%;\r\n  min-width: 100%;\r\n\r\n  padding: 9px 2px 17px;\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-track\r\n.cmdv3-featured-card {\r\n  flex:\r\n    0\r\n    0\r\n    calc((100% - 26px) \/ 3);\r\n\r\n  width:\r\n    calc((100% - 26px) \/ 3);\r\n\r\n  scroll-snap-align: start;\r\n  scroll-snap-stop: always;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-carousel-button {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  width: 46px;\r\n  height: 46px;\r\n  padding: 0;\r\n\r\n  border: 1px solid var(--cmdv3-border);\r\n  border-radius: 50%;\r\n\r\n  background: rgba(255, 255, 255, 0.92);\r\n  color: var(--cmdv3-navy);\r\n\r\n  font-size: 18px;\r\n\r\n  cursor: pointer;\r\n\r\n  box-shadow:\r\n    0 9px 24px rgba(6, 63, 91, 0.08);\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    border-color 0.3s ease;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-carousel-button:hover {\r\n  transform: scale(1.07);\r\n\r\n  border-color: var(--cmdv3-navy);\r\n\r\n  background: var(--cmdv3-navy);\r\n  color: #ffffff;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-carousel-button:focus-visible,\r\n#catalogo-marcas .cmdv3-featured-viewport:focus-visible {\r\n  outline: 2px solid var(--cmdv3-teal);\r\n  outline-offset: 4px;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-carousel-dots {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 7px;\r\n\r\n  min-height: 18px;\r\n  margin-top: 3px;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-carousel-dot {\r\n  width: 7px;\r\n  height: 7px;\r\n  padding: 0;\r\n\r\n  border: 0;\r\n  border-radius: 999px;\r\n\r\n  background: rgba(6, 63, 91, 0.18);\r\n\r\n  cursor: pointer;\r\n\r\n  transition:\r\n    width 0.3s ease,\r\n    background 0.3s ease,\r\n    transform 0.3s ease;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-carousel-dot:hover {\r\n  transform: scale(1.2);\r\n\r\n  background: rgba(6, 63, 91, 0.38);\r\n}\r\n\r\n#catalogo-marcas .cmdv3-carousel-dot.is-active {\r\n  width: 24px;\r\n\r\n  background: var(--cmdv3-teal);\r\n}\r\n\r\n\/* TARJETA DESTACADA *\/\r\n\r\n#catalogo-marcas .cmdv3-featured-card {\r\n  position: relative;\r\n  isolation: isolate;\r\n\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: space-between;\r\n\r\n  min-width: 0;\r\n  min-height: 390px;\r\n  padding: 25px;\r\n  overflow: hidden;\r\n\r\n  border: 1px solid var(--cmdv3-border);\r\n  border-radius: 27px;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 85% 3%,\r\n      rgba(75, 166, 166, 0.16),\r\n      transparent 34%\r\n    ),\r\n    linear-gradient(\r\n      145deg,\r\n      #ffffff,\r\n      #f3f6f7\r\n    );\r\n\r\n  color: var(--cmdv3-navy);\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 19px 42px rgba(6, 63, 91, 0.055);\r\n\r\n  transform: translateY(0);\r\n\r\n  transition:\r\n    transform 0.5s cubic-bezier(.22, .61, .36, 1),\r\n    box-shadow 0.5s ease,\r\n    border-color 0.4s ease;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-featured-card:hover {\r\n  z-index: 4;\r\n\r\n  transform: translateY(-9px);\r\n\r\n  border-color: rgba(75, 166, 166, 0.32);\r\n\r\n  box-shadow:\r\n    0 13px 30px rgba(6, 63, 91, 0.08),\r\n    0 38px 70px rgba(6, 63, 91, 0.13);\r\n}\r\n\r\n#catalogo-marcas .cmdv3-featured-card::after {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: -1;\r\n\r\n  pointer-events: none;\r\n\r\n  background:\r\n    linear-gradient(\r\n      115deg,\r\n      transparent 24%,\r\n      rgba(255, 255, 255, 0.75) 47%,\r\n      transparent 70%\r\n    );\r\n\r\n  transform: translateX(-135%);\r\n\r\n  transition:\r\n    transform 1s cubic-bezier(.22, .61, .36, 1);\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-card:hover::after {\r\n  transform: translateX(135%);\r\n}\r\n\r\n#catalogo-marcas .cmdv3-featured-dark {\r\n  border-color: transparent;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 85% 4%,\r\n      rgba(130, 211, 207, 0.39),\r\n      transparent 34%\r\n    ),\r\n    linear-gradient(\r\n      145deg,\r\n      var(--cmdv3-navy),\r\n      var(--cmdv3-deep)\r\n    );\r\n\r\n  color: #ffffff;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-featured-teal {\r\n  border-color: transparent;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 90% 0%,\r\n      rgba(255, 255, 255, 0.28),\r\n      transparent 33%\r\n    ),\r\n    linear-gradient(\r\n      145deg,\r\n      #4ba6a6,\r\n      #326f7f\r\n    );\r\n\r\n  color: #ffffff;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-featured-top {\r\n  position: relative;\r\n  z-index: 4;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-featured-top > span {\r\n  color: rgba(6, 63, 91, 0.34);\r\n\r\n  font-size: 9px;\r\n  font-weight: 750;\r\n  letter-spacing: 0.13em;\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-dark\r\n.cmdv3-featured-top > span,\r\n#catalogo-marcas\r\n.cmdv3-featured-teal\r\n.cmdv3-featured-top > span {\r\n  color: rgba(255, 255, 255, 0.45);\r\n}\r\n\r\n#catalogo-marcas .cmdv3-featured-top i {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  width: 40px;\r\n  height: 40px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: rgba(6, 63, 91, 0.06);\r\n  color: var(--cmdv3-teal);\r\n\r\n  font-size: 18px;\r\n  font-style: normal;\r\n\r\n  transition:\r\n    transform 0.35s ease,\r\n    background 0.3s ease,\r\n    color 0.3s ease;\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-dark\r\n.cmdv3-featured-top i,\r\n#catalogo-marcas\r\n.cmdv3-featured-teal\r\n.cmdv3-featured-top i {\r\n  background: rgba(255, 255, 255, 0.12);\r\n  color: #ffffff;\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-card:hover\r\n.cmdv3-featured-top i {\r\n  transform:\r\n    rotate(5deg)\r\n    scale(1.07);\r\n\r\n  background: var(--cmdv3-teal);\r\n  color: #ffffff;\r\n}\r\n\r\n\/* CONTENIDO DESTACADO *\/\r\n\r\n#catalogo-marcas .cmdv3-featured-content {\r\n  position: relative;\r\n  z-index: 4;\r\n\r\n  margin-top: auto;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-featured-content small {\r\n  display: block;\r\n  margin-bottom: 10px;\r\n\r\n  color: var(--cmdv3-teal);\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-marcas\r\n.cmdv3-featured-dark\r\n.cmdv3-featured-content small,\r\n#catalogo-marcas\r\n.cmdv3-featured-teal\r\n.cmdv3-featured-content small {\r\n  color: var(--cmdv3-teal-light);\r\n}\r\n\r\n#catalogo-marcas .cmdv3-featured-content strong {\r\n  display: block;\r\n\r\n  color: var(--cmdv3-navy);\r\n\r\n  font-size: clamp(25px, 2vw, 32px);\r\n  font-weight: 640;\r\n  line-height: 1;\r\n  letter-spacing: -0.04em;\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-dark\r\n.cmdv3-featured-content strong,\r\n#catalogo-marcas\r\n.cmdv3-featured-teal\r\n.cmdv3-featured-content strong {\r\n  color: #ffffff;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-featured-content p {\r\n  margin: 14px 0 0;\r\n\r\n  color: var(--cmdv3-text);\r\n\r\n  font-size: 12px;\r\n  line-height: 1.55;\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-dark\r\n.cmdv3-featured-content p,\r\n#catalogo-marcas\r\n.cmdv3-featured-teal\r\n.cmdv3-featured-content p {\r\n  color: rgba(255, 255, 255, 0.66);\r\n}\r\n\r\n\r\n\/* ==================================================\r\n   LOGOS DE LAS MARCAS DESTACADAS\r\n================================================== *\/\r\n\r\n\/*\r\n * Los logos se muestran directamente sobre la tarjeta:\r\n * sin caja blanca, sin borde y sin fondo adicional.\r\n *\/\r\n#catalogo-marcas .cmdv3-featured-logo {\r\n  position: absolute;\r\n  top: 74px;\r\n  left: 27px;\r\n  right: 27px;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  height: 135px;\r\n  padding: 8px;\r\n\r\n  background: transparent;\r\n  border: 0;\r\n  border-radius: 0;\r\n  box-shadow: none;\r\n  overflow: visible;\r\n\r\n  transition:\r\n    transform 0.5s cubic-bezier(.22, .61, .36, 1);\r\n}\r\n\r\n#catalogo-marcas .cmdv3-featured-logo::before,\r\n#catalogo-marcas .cmdv3-featured-logo::after {\r\n  display: none;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-featured-logo img {\r\n  position: relative;\r\n  z-index: 2;\r\n\r\n  display: block;\r\n\r\n  \/*\r\n   * Todos los logos usan exactamente la misma caja visual.\r\n   * El archivo se adapta dentro de ella sin deformarse.\r\n   *\/\r\n  width: 220px;\r\n  height: 80px;\r\n  max-width: 88%;\r\n  max-height: 80px;\r\n\r\n  object-fit: contain;\r\n  object-position: center;\r\n\r\n  background: transparent;\r\n\r\n  \/*\r\n   * En logos rasterizados con blanco integrado, multiply hace que\r\n   * el blanco se funda con las tarjetas claras sin apagar sus colores.\r\n   *\/\r\n  mix-blend-mode: multiply;\r\n  filter:\r\n    saturate(1.08)\r\n    contrast(1.05);\r\n\r\n  transition:\r\n    transform 0.5s cubic-bezier(.22, .61, .36, 1),\r\n    filter 0.4s ease;\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-sycsa\r\n.cmdv3-featured-logo img {\r\n  width: 185px;\r\n  height: 66px;\r\n  max-width: 76%;\r\n  max-height: 66px;\r\n\r\n  mix-blend-mode: normal;\r\n  filter: none;\r\n}\r\n\r\n\r\n\/* AJUSTE \u00d3PTICO INDIVIDUAL \u00b7 VORTEX Y BUNTING *\/\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-vortex\r\n.cmdv3-featured-logo img {\r\n  width: 185px;\r\n  height: 66px;\r\n  max-width: 76%;\r\n  max-height: 66px;\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-bunting\r\n.cmdv3-featured-logo img {\r\n  width: 245px;\r\n  height: 88px;\r\n  max-width: 94%;\r\n  max-height: 88px;\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-card:hover\r\n.cmdv3-featured-logo {\r\n  transform: translateY(-4px);\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-card:hover\r\n.cmdv3-featured-logo img {\r\n  transform: scale(1.055);\r\n\r\n  filter:\r\n    saturate(1.15)\r\n    contrast(1.08);\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-sycsa:hover\r\n.cmdv3-featured-logo img {\r\n  filter: none;\r\n}\r\n\r\n\/* PALETAS INDIVIDUALES PARA RESPETAR CADA LOGO *\/\r\n\r\n#catalogo-marcas .cmdv3-featured-gardner {\r\n  background:\r\n    radial-gradient(\r\n      circle at 88% 3%,\r\n      rgba(186, 39, 69, 0.11),\r\n      transparent 34%\r\n    ),\r\n    linear-gradient(\r\n      145deg,\r\n      #fffdfd,\r\n      #f7f2f3\r\n    );\r\n}\r\n\r\n#catalogo-marcas .cmdv3-featured-morris {\r\n  background:\r\n    radial-gradient(\r\n      circle at 88% 3%,\r\n      rgba(73, 180, 214, 0.16),\r\n      transparent 35%\r\n    ),\r\n    linear-gradient(\r\n      145deg,\r\n      #ffffff,\r\n      #eef7f9\r\n    );\r\n}\r\n\r\n#catalogo-marcas .cmdv3-featured-wam {\r\n  background:\r\n    radial-gradient(\r\n      circle at 88% 3%,\r\n      rgba(22, 77, 142, 0.13),\r\n      transparent 35%\r\n    ),\r\n    linear-gradient(\r\n      145deg,\r\n      #ffffff,\r\n      #edf3f8\r\n    );\r\n}\r\n\r\n#catalogo-marcas .cmdv3-featured-vortex {\r\n  border-color: rgba(6, 63, 91, 0.1);\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 88% 3%,\r\n      rgba(68, 68, 68, 0.1),\r\n      transparent 34%\r\n    ),\r\n    linear-gradient(\r\n      145deg,\r\n      #ffffff,\r\n      #eef1f2\r\n    );\r\n\r\n  color: var(--cmdv3-navy);\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-vortex\r\n.cmdv3-featured-top > span {\r\n  color: rgba(6, 63, 91, 0.34);\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-vortex\r\n.cmdv3-featured-top i {\r\n  background: rgba(6, 63, 91, 0.06);\r\n  color: var(--cmdv3-teal);\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-vortex\r\n.cmdv3-featured-content small {\r\n  color: var(--cmdv3-teal);\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-vortex\r\n.cmdv3-featured-content strong {\r\n  color: var(--cmdv3-navy);\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-vortex\r\n.cmdv3-featured-content p {\r\n  color: var(--cmdv3-text);\r\n}\r\n\r\n#catalogo-marcas .cmdv3-featured-bunting {\r\n  background:\r\n    radial-gradient(\r\n      circle at 88% 3%,\r\n      rgba(196, 36, 53, 0.11),\r\n      transparent 35%\r\n    ),\r\n    linear-gradient(\r\n      145deg,\r\n      #ffffff,\r\n      #faf1f2\r\n    );\r\n}\r\n\r\n\/* ==================================================\r\n   VISUAL DESTACADO \u00b7 SYCSA\r\n================================================== *\/\r\n\r\n#catalogo-marcas .cmdv3-featured-sycsa {\r\n  border-color: var(--cmdv3-border);\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 88% 3%,\r\n      rgba(6, 63, 91, 0.12),\r\n      transparent 35%\r\n    ),\r\n    linear-gradient(\r\n      145deg,\r\n      #ffffff,\r\n      #eef4f7\r\n    );\r\n\r\n  color: var(--cmdv3-navy);\r\n}\r\n\r\n#catalogo-marcas .cmdv3-sycsa-visual {\r\n  position: absolute;\r\n  top: 70px;\r\n  left: 25px;\r\n  right: 25px;\r\n\r\n  height: 145px;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  overflow: hidden;\r\n\r\n  border-radius: 24px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      145deg,\r\n      rgba(255, 255, 255, 0.035),\r\n      rgba(135, 208, 205, 0.095)\r\n    );\r\n\r\n  transition:\r\n    transform 0.55s cubic-bezier(.22, .61, .36, 1),\r\n    background 0.4s ease;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-sycsa-visual::before {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n  left: 24px;\r\n  right: 24px;\r\n  bottom: 20px;\r\n\r\n  height: 1px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      transparent,\r\n      rgba(135, 208, 205, 0.44),\r\n      transparent\r\n    );\r\n}\r\n\r\n#catalogo-marcas .cmdv3-sycsa-visual img {\r\n  position: relative;\r\n  z-index: 3;\r\n\r\n  display: block;\r\n\r\n  width: min(205px, 76%);\r\n  height: auto;\r\n  max-height: 70px;\r\n\r\n  object-fit: contain;\r\n\r\n  filter: none;\r\n  opacity: 1;\r\n\r\n  transition:\r\n    transform 0.55s cubic-bezier(.22, .61, .36, 1);\r\n}\r\n\r\n#catalogo-marcas .cmdv3-sycsa-orbit {\r\n  position: absolute;\r\n\r\n  display: block;\r\n\r\n  border: 1px solid rgba(135, 208, 205, 0.15);\r\n  border-radius: 50%;\r\n\r\n  transition:\r\n    transform 0.7s cubic-bezier(.22, .61, .36, 1),\r\n    border-color 0.45s ease;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-sycsa-orbit-one {\r\n  width: 178px;\r\n  height: 178px;\r\n\r\n  right: -72px;\r\n  top: -91px;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-sycsa-orbit-two {\r\n  width: 112px;\r\n  height: 112px;\r\n\r\n  right: -20px;\r\n  top: -45px;\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-sycsa:hover\r\n.cmdv3-sycsa-visual {\r\n  transform: translateY(-4px);\r\n\r\n  background:\r\n    linear-gradient(\r\n      145deg,\r\n      rgba(255, 255, 255, 0.055),\r\n      rgba(135, 208, 205, 0.14)\r\n    );\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-sycsa:hover\r\n.cmdv3-sycsa-visual img {\r\n  transform: scale(1.045);\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-sycsa:hover\r\n.cmdv3-sycsa-orbit-one {\r\n  transform:\r\n    translate(-8px, 8px)\r\n    scale(1.05);\r\n\r\n  border-color: rgba(135, 208, 205, 0.27);\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-sycsa:hover\r\n.cmdv3-sycsa-orbit-two {\r\n  transform:\r\n    translate(-4px, 5px)\r\n    scale(1.08);\r\n\r\n  border-color: rgba(135, 208, 205, 0.3);\r\n}\r\n\r\n\/* VORTEX SOBRE FONDO TEAL *\/\r\n\r\n#catalogo-marcas\r\n.cmdv3-vortex-graphic-light span {\r\n  border-color: rgba(255, 255, 255, 0.34);\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-vortex-graphic-light span:nth-child(3) {\r\n  background: rgba(255, 255, 255, 0.11);\r\n}\r\n\r\n\/* GR\u00c1FICO MORRIS *\/\r\n\r\n#catalogo-marcas .cmdv3-featured-visual {\r\n  position: absolute;\r\n  top: 73px;\r\n  left: 50%;\r\n\r\n  width: 180px;\r\n  height: 130px;\r\n\r\n  transform: translateX(-50%);\r\n}\r\n\r\n#catalogo-marcas .cmdv3-featured-visual span {\r\n  position: absolute;\r\n  left: 50%;\r\n\r\n  display: block;\r\n\r\n  width: 54px;\r\n  height: 130px;\r\n\r\n  border: 1px solid rgba(255, 255, 255, 0.24);\r\n  border-radius: 999px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      rgba(255, 255, 255, 0.04),\r\n      rgba(135, 208, 205, 0.22),\r\n      rgba(255, 255, 255, 0.04)\r\n    );\r\n\r\n  transform-origin: center;\r\n\r\n  transition: transform 0.65s ease;\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-visual span:nth-child(1) {\r\n  transform:\r\n    translateX(-50%)\r\n    rotate(90deg);\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-visual span:nth-child(2) {\r\n  transform:\r\n    translateX(-50%)\r\n    rotate(30deg);\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-visual span:nth-child(3) {\r\n  transform:\r\n    translateX(-50%)\r\n    rotate(-30deg);\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-card:hover\r\n.cmdv3-featured-visual span:nth-child(1) {\r\n  transform:\r\n    translateX(-50%)\r\n    rotate(100deg);\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-card:hover\r\n.cmdv3-featured-visual span:nth-child(2) {\r\n  transform:\r\n    translateX(-50%)\r\n    rotate(40deg);\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-card:hover\r\n.cmdv3-featured-visual span:nth-child(3) {\r\n  transform:\r\n    translateX(-50%)\r\n    rotate(-20deg);\r\n}\r\n\r\n\/* W *\/\r\n\r\n#catalogo-marcas .cmdv3-typographic-mark {\r\n  position: absolute;\r\n  top: 60px;\r\n  right: 16px;\r\n\r\n  color: rgba(75, 166, 166, 0.13);\r\n\r\n  font-size: 190px;\r\n  font-weight: 650;\r\n  line-height: 0.9;\r\n  letter-spacing: -0.12em;\r\n\r\n  transition:\r\n    transform 0.65s ease,\r\n    color 0.45s ease;\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-card:hover\r\n.cmdv3-typographic-mark {\r\n  color: rgba(75, 166, 166, 0.2);\r\n\r\n  transform:\r\n    translateX(-8px)\r\n    scale(1.04);\r\n}\r\n\r\n\/* VORTEX *\/\r\n\r\n#catalogo-marcas .cmdv3-vortex-graphic {\r\n  position: absolute;\r\n  top: 81px;\r\n  left: 50%;\r\n\r\n  width: 165px;\r\n  height: 145px;\r\n\r\n  transform: translateX(-50%);\r\n}\r\n\r\n#catalogo-marcas .cmdv3-vortex-graphic span {\r\n  position: absolute;\r\n  left: 50%;\r\n  top: 50%;\r\n\r\n  display: block;\r\n\r\n  border: 1px solid rgba(75, 166, 166, 0.27);\r\n  border-radius: 50%;\r\n\r\n  transform:\r\n    translate(-50%, -50%)\r\n    rotate(0deg);\r\n\r\n  transition:\r\n    transform 0.75s cubic-bezier(.22, .61, .36, 1);\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-vortex-graphic span:nth-child(1) {\r\n  width: 145px;\r\n  height: 80px;\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-vortex-graphic span:nth-child(2) {\r\n  width: 105px;\r\n  height: 55px;\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-vortex-graphic span:nth-child(3) {\r\n  width: 60px;\r\n  height: 30px;\r\n\r\n  background: rgba(75, 166, 166, 0.1);\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-card:hover\r\n.cmdv3-vortex-graphic span:nth-child(1) {\r\n  transform:\r\n    translate(-50%, -50%)\r\n    rotate(14deg);\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-card:hover\r\n.cmdv3-vortex-graphic span:nth-child(2) {\r\n  transform:\r\n    translate(-50%, -50%)\r\n    rotate(-17deg);\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-card:hover\r\n.cmdv3-vortex-graphic span:nth-child(3) {\r\n  transform:\r\n    translate(-50%, -50%)\r\n    rotate(22deg)\r\n    scale(1.08);\r\n}\r\n\r\n\/* AIRE *\/\r\n\r\n#catalogo-marcas .cmdv3-air-graphic {\r\n  position: absolute;\r\n  top: 87px;\r\n  left: 33px;\r\n  right: 33px;\r\n\r\n  display: grid;\r\n  gap: 17px;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-air-graphic i {\r\n  display: block;\r\n\r\n  height: 1px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      rgba(255, 255, 255, 0),\r\n      rgba(255, 255, 255, 0.54),\r\n      rgba(255, 255, 255, 0)\r\n    );\r\n\r\n  transform-origin: left;\r\n\r\n  transition:\r\n    transform 0.55s ease,\r\n    opacity 0.45s ease;\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-air-graphic i:nth-child(1) {\r\n  width: 70%;\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-air-graphic i:nth-child(2) {\r\n  width: 100%;\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-air-graphic i:nth-child(3) {\r\n  width: 83%;\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-air-graphic i:nth-child(4) {\r\n  width: 55%;\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-featured-card:hover\r\n.cmdv3-air-graphic i {\r\n  transform:\r\n    translateX(12px)\r\n    scaleX(1.05);\r\n}\r\n\r\n\/* ==================================================\r\n   BUSCADOR\r\n================================================== *\/\r\n\r\n#catalogo-marcas .cmdv3-search-dock {\r\n  position: relative;\r\n  z-index: 15;\r\n\r\n  display: grid;\r\n  grid-template-columns:\r\n    minmax(260px, 1fr)\r\n    auto;\r\n\r\n  align-items: center;\r\n  gap: 20px;\r\n\r\n  margin-top: 10px;\r\n  padding: 10px;\r\n\r\n  border: 1px solid var(--cmdv3-border);\r\n  border-radius: 23px;\r\n\r\n  background: rgba(255, 255, 255, 0.89);\r\n\r\n  box-shadow:\r\n    0 14px 35px rgba(6, 63, 91, 0.075);\r\n\r\n  backdrop-filter: blur(22px) saturate(170%);\r\n  -webkit-backdrop-filter: blur(22px) saturate(170%);\r\n}\r\n\r\n#catalogo-marcas .cmdv3-search {\r\n  display: grid;\r\n  grid-template-columns:\r\n    24px\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: 58px;\r\n  padding: 0 8px 0 17px;\r\n\r\n  border-radius: 16px;\r\n\r\n  background: var(--cmdv3-soft);\r\n}\r\n\r\n#catalogo-marcas .cmdv3-search > svg {\r\n  width: 21px;\r\n  height: 21px;\r\n\r\n  fill: none;\r\n  stroke: var(--cmdv3-teal);\r\n  stroke-width: 1.8;\r\n  stroke-linecap: round;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-search-input {\r\n  width: 100%;\r\n  min-width: 0;\r\n\r\n  border: 0;\r\n  outline: none;\r\n\r\n  background: transparent;\r\n  color: var(--cmdv3-navy);\r\n\r\n  font-size: 16px;\r\n  font-weight: 570;\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-search-input::placeholder {\r\n  color: rgba(6, 63, 91, 0.36);\r\n}\r\n\r\n#catalogo-marcas .cmdv3-clear-search {\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-marcas\r\n.cmdv3-clear-search.is-visible {\r\n  opacity: 1;\r\n  pointer-events: auto;\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-clear-search:hover {\r\n  background: rgba(6, 63, 91, 0.12);\r\n}\r\n\r\n#catalogo-marcas .cmdv3-clear-search span {\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(--cmdv3-navy);\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-clear-search span:first-child {\r\n  transform:\r\n    translate(-50%, -50%)\r\n    rotate(45deg);\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-clear-search span:last-child {\r\n  transform:\r\n    translate(-50%, -50%)\r\n    rotate(-45deg);\r\n}\r\n\r\n#catalogo-marcas .cmdv3-search-meta {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 20px;\r\n\r\n  padding: 0 15px;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-result-count {\r\n  color: var(--cmdv3-text);\r\n\r\n  font-size: 11px;\r\n  font-weight: 650;\r\n  white-space: nowrap;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-reset {\r\n  padding: 0;\r\n\r\n  border: 0;\r\n\r\n  background: transparent;\r\n  color: var(--cmdv3-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-marcas .cmdv3-reset.is-visible {\r\n  opacity: 1;\r\n  pointer-events: auto;\r\n}\r\n\r\n\/* ==================================================\r\n   ALFABETO\r\n================================================== *\/\r\n\r\n#catalogo-marcas .cmdv3-alphabet-wrapper {\r\n  overflow-x: auto;\r\n\r\n  padding: 14px 0 19px;\r\n\r\n  scrollbar-width: none;\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-alphabet-wrapper::-webkit-scrollbar {\r\n  display: none;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-alphabet {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 5px;\r\n\r\n  width: 100%;\r\n  min-width: 100%;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-letter {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  min-width: 37px;\r\n  height: 37px;\r\n  padding: 0 11px;\r\n\r\n  border: 1px solid transparent;\r\n  border-radius: 999px;\r\n\r\n  background: transparent;\r\n  color: rgba(6, 63, 91, 0.5);\r\n\r\n  font-size: 10px;\r\n  font-weight: 700;\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#catalogo-marcas .cmdv3-letter:hover {\r\n  transform: translateY(-2px);\r\n\r\n  border-color: var(--cmdv3-border);\r\n\r\n  background: #ffffff;\r\n  color: var(--cmdv3-navy);\r\n}\r\n\r\n#catalogo-marcas .cmdv3-letter.is-active {\r\n  border-color: var(--cmdv3-navy);\r\n\r\n  background: var(--cmdv3-navy);\r\n  color: #ffffff;\r\n}\r\n\r\n\/* ==================================================\r\n   GRID DE MARCAS\r\n================================================== *\/\r\n\r\n#catalogo-marcas .cmdv3-grid {\r\n  display: grid;\r\n  grid-template-columns:\r\n    repeat(4, minmax(0, 1fr));\r\n\r\n  gap: 11px;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-brand-card {\r\n  position: relative;\r\n  isolation: isolate;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 17px;\r\n\r\n  min-width: 0;\r\n  min-height: 118px;\r\n  padding: 15px;\r\n  overflow: hidden;\r\n\r\n  border: 1px solid var(--cmdv3-border);\r\n  border-radius: 21px;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 93% 0%,\r\n      var(--cmdv3-card-glow),\r\n      transparent 40%\r\n    ),\r\n    rgba(255, 255, 255, 0.86);\r\n\r\n  color: var(--cmdv3-navy);\r\n  text-decoration: none;\r\n\r\n  box-shadow:\r\n    0 2px 7px rgba(6, 63, 91, 0.02),\r\n    0 12px 27px rgba(6, 63, 91, 0.04);\r\n\r\n  transform: translateY(0);\r\n\r\n  transition:\r\n    transform 0.4s cubic-bezier(.22, .61, .36, 1),\r\n    border-color 0.35s ease,\r\n    box-shadow 0.4s ease,\r\n    background 0.35s ease;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-brand-card::after {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: -1;\r\n\r\n  background:\r\n    linear-gradient(\r\n      115deg,\r\n      transparent 24%,\r\n      rgba(255, 255, 255, 0.8) 47%,\r\n      transparent 70%\r\n    );\r\n\r\n  transform: translateX(-135%);\r\n\r\n  transition:\r\n    transform 0.85s cubic-bezier(.22, .61, .36, 1);\r\n}\r\n\r\n#catalogo-marcas .cmdv3-brand-card:hover {\r\n  z-index: 4;\r\n\r\n  transform: translateY(-6px);\r\n\r\n  border-color: rgba(75, 166, 166, 0.31);\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 93% 0%,\r\n      var(--cmdv3-card-glow),\r\n      transparent 45%\r\n    ),\r\n    #ffffff;\r\n\r\n  box-shadow:\r\n    0 11px 24px rgba(6, 63, 91, 0.07),\r\n    0 28px 54px rgba(6, 63, 91, 0.1);\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-brand-card:hover::after {\r\n  transform: translateX(135%);\r\n}\r\n\r\n\/* MONOGRAMA *\/\r\n\r\n#catalogo-marcas .cmdv3-monogram {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n\r\n  width: 70px;\r\n  height: 70px;\r\n\r\n  border: 1px solid rgba(6, 63, 91, 0.08);\r\n  border-radius: 20px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      145deg,\r\n      #ffffff,\r\n      rgba(75, 166, 166, 0.11)\r\n    );\r\n\r\n  color: var(--cmdv3-navy);\r\n\r\n  font-size: 23px;\r\n  font-weight: 680;\r\n  letter-spacing: -0.055em;\r\n\r\n  box-shadow:\r\n    inset 0 1px 0 rgba(255, 255, 255, 0.8),\r\n    0 8px 20px rgba(6, 63, 91, 0.055);\r\n\r\n  transition:\r\n    transform 0.4s cubic-bezier(.22, .61, .36, 1),\r\n    background 0.35s ease;\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-brand-card:hover\r\n.cmdv3-monogram {\r\n  transform:\r\n    rotate(-2deg)\r\n    scale(1.05);\r\n\r\n  background:\r\n    linear-gradient(\r\n      145deg,\r\n      #ffffff,\r\n      rgba(75, 166, 166, 0.2)\r\n    );\r\n}\r\n\r\n#catalogo-marcas .cmdv3-brand-logo {\r\n  display: block;\r\n\r\n  width: 55px;\r\n  max-height: 39px;\r\n\r\n  object-fit: contain;\r\n}\r\n\r\n\/* TEXTO *\/\r\n\r\n#catalogo-marcas .cmdv3-brand-copy {\r\n  min-width: 0;\r\n  flex: 1;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-brand-copy small {\r\n  display: block;\r\n  margin-bottom: 6px;\r\n\r\n  color: var(--cmdv3-teal);\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-marcas .cmdv3-brand-copy strong {\r\n  display: block;\r\n\r\n  color: var(--cmdv3-navy);\r\n\r\n  font-size: 14px;\r\n  font-weight: 650;\r\n  line-height: 1.2;\r\n  overflow-wrap: anywhere;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-brand-copy span {\r\n  display: block;\r\n  margin-top: 6px;\r\n\r\n  color: var(--cmdv3-text);\r\n\r\n  font-size: 9px;\r\n  line-height: 1.35;\r\n\r\n  opacity: 0.65;\r\n\r\n  transition:\r\n    opacity 0.3s ease,\r\n    transform 0.3s ease;\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-brand-card:hover\r\n.cmdv3-brand-copy span {\r\n  opacity: 1;\r\n\r\n  transform: translateX(3px);\r\n}\r\n\r\n#catalogo-marcas .cmdv3-brand-arrow {\r\n  flex-shrink: 0;\r\n\r\n  color: var(--cmdv3-teal);\r\n\r\n  font-size: 17px;\r\n\r\n  opacity: 0;\r\n  transform: translateX(-5px);\r\n\r\n  transition:\r\n    opacity 0.3s ease,\r\n    transform 0.3s ease;\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-brand-card:hover\r\n.cmdv3-brand-arrow {\r\n  opacity: 1;\r\n  transform: translateX(0);\r\n}\r\n\r\n\/* ==================================================\r\n   ESTADO VAC\u00cdO Y MOSTRAR M\u00c1S\r\n================================================== *\/\r\n\r\n#catalogo-marcas .cmdv3-empty {\r\n  padding: 65px 25px;\r\n\r\n  border: 1px dashed rgba(6, 63, 91, 0.17);\r\n  border-radius: 25px;\r\n\r\n  background: rgba(255, 255, 255, 0.65);\r\n\r\n  text-align: center;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-empty > span {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  width: 72px;\r\n  height: 72px;\r\n  margin: 0 auto 20px;\r\n\r\n  border-radius: 22px;\r\n\r\n  background: rgba(75, 166, 166, 0.1);\r\n  color: var(--cmdv3-teal);\r\n\r\n  font-size: 30px;\r\n  font-weight: 650;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-empty h3 {\r\n  margin: 0;\r\n\r\n  color: var(--cmdv3-navy);\r\n\r\n  font-size: 27px;\r\n  font-weight: 650;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-empty p {\r\n  margin: 10px auto 20px;\r\n\r\n  color: var(--cmdv3-text);\r\n\r\n  font-size: 13px;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-empty button,\r\n#catalogo-marcas .cmdv3-load-more {\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(--cmdv3-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-marcas .cmdv3-empty button:hover,\r\n#catalogo-marcas .cmdv3-load-more:hover {\r\n  transform: translateY(-3px);\r\n\r\n  background: var(--cmdv3-teal);\r\n}\r\n\r\n#catalogo-marcas .cmdv3-load-wrapper {\r\n  display: flex;\r\n  justify-content: center;\r\n\r\n  padding-top: 34px;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-load-more {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n\r\n  min-height: 53px;\r\n  padding: 0 24px;\r\n}\r\n\r\n#catalogo-marcas .cmdv3-load-more span {\r\n  transition: transform 0.3s ease;\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-load-more:hover span {\r\n  transform: translateY(4px);\r\n}\r\n\r\n\/* ==================================================\r\n   ENTRADA\r\n================================================== *\/\r\n\r\n#catalogo-marcas .cmdv3-reveal {\r\n  opacity: 1;\r\n  transform: translateY(0);\r\n}\r\n\r\n#catalogo-marcas\r\n.cmdv3-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: 1100px) {\r\n  #catalogo-marcas .cmdv3-header {\r\n    grid-template-columns: 1fr;\r\n    gap: 27px;\r\n  }\r\n\r\n  #catalogo-marcas .cmdv3-intro {\r\n    max-width: 740px;\r\n  }\r\n\r\n  #catalogo-marcas\r\n  .cmdv3-featured-track\r\n  .cmdv3-featured-card {\r\n    flex-basis:\r\n      calc((100% - 13px) \/ 2);\r\n\r\n    width:\r\n      calc((100% - 13px) \/ 2);\r\n  }\r\n\r\n  #catalogo-marcas .cmdv3-grid {\r\n    grid-template-columns:\r\n      repeat(3, 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-marcas {\r\n    --cmdv3-radius: 23px;\r\n  }\r\n\r\n  #catalogo-marcas .cmdv3-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-marcas .cmdv3-heading h2 {\r\n    font-size: 44px;\r\n  }\r\n\r\n  #catalogo-marcas .cmdv3-header {\r\n    margin-bottom: 37px;\r\n  }\r\n\r\n  #catalogo-marcas .cmdv3-featured-heading {\r\n    align-items: flex-start;\r\n    flex-direction: column;\r\n    gap: 14px;\r\n  }\r\n\r\n  #catalogo-marcas .cmdv3-featured-carousel {\r\n    grid-template-columns:\r\n      38px\r\n      minmax(0, 1fr)\r\n      38px;\r\n\r\n    gap: 7px;\r\n  }\r\n\r\n  #catalogo-marcas .cmdv3-carousel-button {\r\n    width: 38px;\r\n    height: 38px;\r\n\r\n    font-size: 15px;\r\n  }\r\n\r\n  #catalogo-marcas .cmdv3-featured-track {\r\n    gap: 11px;\r\n\r\n    padding:\r\n      7px\r\n      2px\r\n      14px;\r\n  }\r\n\r\n  #catalogo-marcas\r\n  .cmdv3-featured-track\r\n  .cmdv3-featured-card {\r\n    flex-basis: 100%;\r\n    width: 100%;\r\n    min-height: 390px;\r\n\r\n    scroll-snap-align: start;\r\n  }\r\n\r\n  #catalogo-marcas .cmdv3-search-dock {\r\n    grid-template-columns: 1fr;\r\n    gap: 10px;\r\n\r\n    margin-top: 9px;\r\n\r\n    border-radius: 19px;\r\n  }\r\n\r\n  #catalogo-marcas .cmdv3-search-meta {\r\n    justify-content: space-between;\r\n\r\n    padding: 5px 9px 7px;\r\n  }\r\n\r\n  #catalogo-marcas .cmdv3-grid {\r\n    grid-template-columns:\r\n      repeat(2, minmax(0, 1fr));\r\n\r\n    gap: 8px;\r\n  }\r\n\r\n  #catalogo-marcas .cmdv3-brand-card {\r\n    align-items: flex-start;\r\n    flex-direction: column;\r\n    gap: 15px;\r\n\r\n    min-height: 218px;\r\n    padding: 15px;\r\n\r\n    border-radius: 19px;\r\n  }\r\n\r\n  #catalogo-marcas .cmdv3-monogram {\r\n    width: 67px;\r\n    height: 67px;\r\n\r\n    border-radius: 19px;\r\n  }\r\n\r\n  #catalogo-marcas .cmdv3-brand-copy strong {\r\n    font-size: 14px;\r\n  }\r\n\r\n  #catalogo-marcas .cmdv3-brand-arrow {\r\n    position: absolute;\r\n    top: 18px;\r\n    right: 17px;\r\n\r\n    opacity: 1;\r\n    transform: none;\r\n  }\r\n}\r\n\r\n@media (max-width: 430px) {\r\n  #catalogo-marcas .cmdv3-grid {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  #catalogo-marcas .cmdv3-brand-card {\r\n    display: grid;\r\n    grid-template-columns:\r\n      68px\r\n      minmax(0, 1fr)\r\n      auto;\r\n\r\n    align-items: center;\r\n    gap: 15px;\r\n\r\n    min-height: 100px;\r\n  }\r\n\r\n  #catalogo-marcas .cmdv3-brand-arrow {\r\n    position: static;\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-marcas *,\r\n  #catalogo-marcas *::before,\r\n  #catalogo-marcas *::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    'catalogo-marcas'\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  \/*\r\n   * RUTA PARA LAS P\u00c1GINAS INDIVIDUALES.\r\n   *\/\r\n  const BRAND_BASE = '\/marca\/';\r\n\r\n  \/*\r\n   * CUANDO TENGAS LOS LOGOS, AGREGA SUS URL AQU\u00cd.\r\n   *\r\n   * EJEMPLO:\r\n   *\r\n   * const brandLogos = {\r\n   *   'MORRIS COUPLING': 'https:\/\/sitio.com\/morris.png',\r\n   *   'WAM': 'https:\/\/sitio.com\/wam.png'\r\n   * };\r\n   *\/\r\n  const brandLogos = {\r\n    'SYCSA': '\/wp-content\/uploads\/2026\/07\/Logo-Sycsa-Azul-1-scaled.webp',\r\n    'HAMMERTEK': '\/wp-content\/uploads\/2026\/07\/hammertek.webp',\r\n    'MUNTERS': '\/wp-content\/uploads\/2026\/07\/munters.webp',\r\n    'PRATER': '\/wp-content\/uploads\/2026\/07\/prater.webp',\r\n    'ROLOFER': '\/wp-content\/uploads\/2026\/07\/rolofer.webp',\r\n    'GARDNER DENVER': '\/wp-content\/uploads\/2026\/07\/gardner-denver.webp',\r\n    'KAHL': '\/wp-content\/uploads\/2026\/07\/kahl.webp',\r\n    'LAIDING SYSTEMS': '\/wp-content\/uploads\/2026\/07\/laidig.webp',\r\n    'LAIDIG SYSTEMS': '\/wp-content\/uploads\/2026\/07\/laidig.webp',\r\n    'MATCON': '\/wp-content\/uploads\/2026\/07\/matcon.webp',\r\n    'M-TEC': '\/wp-content\/uploads\/2026\/07\/m-tec.webp',\r\n    'SCHENK PROCESS': '\/wp-content\/uploads\/2026\/07\/schenck-process.webp',\r\n    'SCHENCK PROCESS': '\/wp-content\/uploads\/2026\/07\/schenck-process.webp',\r\n    'DMN WESTINGHOUSE': '\/wp-content\/uploads\/2026\/07\/DMN.webp',\r\n    'DMN': '\/wp-content\/uploads\/2026\/07\/DMN.webp',\r\n    'UNA-DYN': '\/wp-content\/uploads\/2026\/07\/una-dyn.webp',\r\n    'HAVER&BOECKER': '\/wp-content\/uploads\/2026\/07\/haver-boecker.webp',\r\n    'HAVER & BOECKER': '\/wp-content\/uploads\/2026\/07\/haver-boecker.webp',\r\n    'BURKERT': '\/wp-content\/uploads\/2026\/07\/burkert.webp',\r\n    'X-CHANGER': '\/wp-content\/uploads\/2026\/07\/xchanger.webp',\r\n    'ANDRITZ': '\/wp-content\/uploads\/2026\/07\/andritz.webp',\r\n    'AUTMIX': '\/wp-content\/uploads\/2026\/07\/autmix.webp',\r\n    'MORRIS COUPLING': '\/wp-content\/uploads\/2026\/07\/morris.webp',\r\n    'MORRIS': '\/wp-content\/uploads\/2026\/07\/morris.webp',\r\n    'REMBE': '\/wp-content\/uploads\/2026\/07\/rembe.webp',\r\n    'UWT': '\/wp-content\/uploads\/2026\/07\/uwt.webp',\r\n    'SOLIMAR': '\/wp-content\/uploads\/2026\/07\/solimar.webp',\r\n    'FERLIN': '\/wp-content\/uploads\/2026\/07\/ferlin.webp',\r\n    'ENDRESS + HAUSER': '\/wp-content\/uploads\/2026\/07\/endress-hauser.webp',\r\n    'ENDRESS HAUSER': '\/wp-content\/uploads\/2026\/07\/endress-hauser.webp',\r\n    'SIEMENS': '\/wp-content\/uploads\/2026\/07\/siemens.webp',\r\n    'CIESA': '\/wp-content\/uploads\/2026\/07\/ciesa.webp',\r\n    'SODIMATE': '\/wp-content\/uploads\/2026\/07\/sodimate.webp',\r\n    'VORTEX': '\/wp-content\/uploads\/2026\/07\/vortex.webp',\r\n    'WAM': '\/wp-content\/uploads\/2026\/07\/wam.webp',\r\n    'CIMCO': '\/wp-content\/uploads\/2026\/07\/cimico.webp',\r\n    'CIMICO': '\/wp-content\/uploads\/2026\/07\/cimico.webp',\r\n    'CONPRO': '\/wp-content\/uploads\/2026\/07\/conpro.webp',\r\n    'CRAMER ENGINEERING': '\/wp-content\/uploads\/2026\/07\/cramer.webp',\r\n    'CRAMER': '\/wp-content\/uploads\/2026\/07\/cramer.webp',\r\n    'MORILLON': '\/wp-content\/uploads\/2026\/07\/morrillon.webp',\r\n    'OLI': '\/wp-content\/uploads\/2026\/07\/oli.webp',\r\n    'PAYPER': '\/wp-content\/uploads\/2026\/07\/payper.webp',\r\n    'SAVECO': '\/wp-content\/uploads\/2026\/07\/saveco.webp',\r\n    'AIRSWEEP': '\/wp-content\/uploads\/2026\/07\/airsweep.webp',\r\n    'BRABENDER': '\/wp-content\/uploads\/2026\/07\/brabender.webp',\r\n    'BUNTING': '\/wp-content\/uploads\/2026\/07\/bunting.webp',\r\n    'GESCAESER': '\/wp-content\/uploads\/2026\/07\/gescaser.webp',\r\n    'GESCASER': '\/wp-content\/uploads\/2026\/07\/gescaser.webp',\r\n    'SILOS&SILOS': '\/wp-content\/uploads\/2026\/07\/Silos-Silos.webp',\r\n    'SILOS & SILOS': '\/wp-content\/uploads\/2026\/07\/Silos-Silos.webp',\r\n    'SOLBERG': '\/wp-content\/uploads\/2026\/07\/Solberg.webp',\r\n    'SWECO': '\/wp-content\/uploads\/2026\/07\/Sweco.webp',\r\n    'TEKA': '\/wp-content\/uploads\/2026\/07\/Teka.webp',\r\n    'TITAN': '\/wp-content\/uploads\/2026\/07\/Titan.webp',\r\n    'A&J MIXING': '\/wp-content\/uploads\/2026\/07\/AJ.webp',\r\n    'A & J MIXING': '\/wp-content\/uploads\/2026\/07\/AJ.webp',\r\n    'APX SOLUTIONS': '\/wp-content\/uploads\/2026\/07\/apx.webp',\r\n    'BALEROMEX': '\/wp-content\/uploads\/2026\/07\/Baleromex.webp',\r\n    'BINDICATOR': '\/wp-content\/uploads\/2026\/07\/Bindicator.webp',\r\n    'CABLEVEY': '\/wp-content\/uploads\/2026\/07\/Cablevey.webp',\r\n    'DURR UNIVERSAL': '\/wp-content\/uploads\/2026\/07\/Durr.webp',\r\n    'D\u00dcRR UNIVERSAL': '\/wp-content\/uploads\/2026\/07\/Durr.webp',\r\n    'ESAMETAL': '\/wp-content\/uploads\/2026\/07\/ESAMETAL.webp',\r\n    'FOX VENTURY': '\/wp-content\/uploads\/2026\/07\/Fox-Venturi.webp',\r\n    'FOX VENTURI': '\/wp-content\/uploads\/2026\/07\/Fox-Venturi.webp',\r\n    'GONBAR': '\/wp-content\/uploads\/2026\/07\/Gonbar.webp',\r\n    'GS GLOBAL': '\/wp-content\/uploads\/2026\/07\/Gs-Global.webp',\r\n    'JACOBS': '\/wp-content\/uploads\/2026\/07\/Jacob.webp',\r\n    'JACOB': '\/wp-content\/uploads\/2026\/07\/Jacob.webp',\r\n    'KASON': '\/wp-content\/uploads\/2026\/07\/Kason.webp',\r\n    'MARTIN SPROCKET & GEAR DE MEXICO': '\/wp-content\/uploads\/2026\/07\/Martin.webp',\r\n    'MARTIN SPROCKET & GEAR': '\/wp-content\/uploads\/2026\/07\/Martin.webp',\r\n    'BFM (MEXTRADE)': '\/wp-content\/uploads\/2026\/07\/MEXTRADE.webp',\r\n    'MEXTRADE': '\/wp-content\/uploads\/2026\/07\/MEXTRADE.webp',\r\n    'MIXACO': '\/wp-content\/uploads\/2026\/07\/Mix.webp',\r\n    'ONYX': '\/wp-content\/uploads\/2026\/07\/Onyx.webp',\r\n    'PELLETRON': '\/wp-content\/uploads\/2026\/07\/Pelletron.webp',\r\n    'GRACIDA': '\/wp-content\/uploads\/2026\/07\/Gracida-scaled.webp',\r\n    'H-P PRODUCTS': '\/wp-content\/uploads\/2026\/07\/HP-Products-scaled.webp',\r\n    'HP PRODUCTS': '\/wp-content\/uploads\/2026\/07\/HP-Products-scaled.webp',\r\n    'MAGUIRE': '\/wp-content\/uploads\/2026\/07\/Maguire-scaled.webp',\r\n    'MARTIN ENGINEERING': '\/wp-content\/uploads\/2026\/07\/Martin_1-scaled.webp',\r\n    'MOLLET': '\/wp-content\/uploads\/2026\/07\/Mollet-scaled.webp',\r\n    'NOVATEC': '\/wp-content\/uploads\/2026\/07\/Novatec-scaled.webp',\r\n    'PAGANI': '\/wp-content\/uploads\/2026\/07\/Pagani-scaled.webp',\r\n    'ROTOFLO SEVERFIELD': '\/wp-content\/uploads\/2026\/07\/Rotoflo-scaled.webp',\r\n    'ROTOFLO': '\/wp-content\/uploads\/2026\/07\/Rotoflo-scaled.webp',\r\n    'SCREW CONVEYOR': '\/wp-content\/uploads\/2026\/07\/Screw-conveyor-scaled.webp',\r\n    'VEGA': '\/wp-content\/uploads\/2026\/07\/Vega-scaled.webp',\r\n    'VIBRA SCREW': '\/wp-content\/uploads\/2026\/07\/Vibra-screw-scaled.webp',\r\n    'VOLKMANN': '\/wp-content\/uploads\/2026\/07\/Volkmann-scaled.webp',\r\n    'AMERICAN AIR FILTER INTERNATIONAL': '\/wp-content\/uploads\/2026\/07\/AAF-scaled.webp',\r\n    'AAF': '\/wp-content\/uploads\/2026\/07\/AAF-scaled.webp',\r\n    'ACHBERG': '\/wp-content\/uploads\/2026\/07\/Achberg-scaled.webp',\r\n    'BEUMERGROUP': '\/wp-content\/uploads\/2026\/07\/Beumer-group-scaled.webp',\r\n    'BEUMER GROUP': '\/wp-content\/uploads\/2026\/07\/Beumer-group-scaled.webp',\r\n    'BRAY': '\/wp-content\/uploads\/2026\/07\/Briay-scaled.webp',\r\n    'BULK-FLOW A-WARD': '\/wp-content\/uploads\/2026\/07\/Bulk-flow-scaled.webp',\r\n    'BULK FLOW A-WARD': '\/wp-content\/uploads\/2026\/07\/Bulk-flow-scaled.webp',\r\n    'CMB CUSINATO': '\/wp-content\/uploads\/2026\/07\/CMB-CUSINATO-scaled.webp',\r\n    'CONAIR': '\/wp-content\/uploads\/2026\/07\/Conair-scaled.webp',\r\n    'COPERION': '\/wp-content\/uploads\/2026\/07\/Coperion-scaled.webp',\r\n    'DAFANG CRANE': '\/wp-content\/uploads\/2026\/07\/Dafang-Crane-scaled.webp',\r\n    'DORIAN DRAKE': '\/wp-content\/uploads\/2026\/07\/Dorian-Drake-scaled.webp',\r\n    'ENGINEERING PROJECTS MANAGEMENT': '\/wp-content\/uploads\/2026\/07\/Engineer-projects-manager-scaled.webp',\r\n    'ENGINEER PROJECTS MANAGER': '\/wp-content\/uploads\/2026\/07\/Engineer-projects-manager-scaled.webp',\r\n    'ERIEZ': '\/wp-content\/uploads\/2026\/07\/Eriez-scaled.webp',\r\n    'FIKE': '\/wp-content\/uploads\/2026\/07\/Fike-scaled.webp',\r\n    'FIMSA': '\/wp-content\/uploads\/2026\/07\/Fimsa-scaled.webp'\r\n  };\r\n\r\n  \/*\r\n   * LISTA COMPLETA DE 100 MARCAS.\r\n   *\/\r\n  const brandNames = [\r\n    'SYCSA',\r\n    'MORRIS COUPLING',\r\n    'WAM',\r\n    'VORTEX',\r\n    'GARDNER DENVER',\r\n    'MIXACO',\r\n    'SCHENK PROCESS',\r\n    'BUNTING',\r\n    'UNA-DYN',\r\n    'SODIMATE',\r\n    'MUNTERS',\r\n    'BINDICATOR',\r\n    'X-CHANGER',\r\n    'ANDRITZ',\r\n    'GREAT WESTNERN',\r\n    'UWT',\r\n    'FERLIN',\r\n    'KASON',\r\n    'SCREW CONVEYOR',\r\n    'SOLIMAR',\r\n    'BURKERT',\r\n    'AUTMIX',\r\n    'REMBE',\r\n    'ENDRESS + HAUSER',\r\n    'SIEMENS',\r\n    'CIESA',\r\n    'CIMCO',\r\n    'CONPRO',\r\n    'CRAMER ENGINEERING',\r\n    'FESTO',\r\n    'MORILLON',\r\n    'OLI',\r\n    'PAYPER',\r\n    'SAVECO',\r\n    'AIRSWEEP',\r\n    'BRABENDER',\r\n    'GESCAESER',\r\n    'HAMMERTEK',\r\n    'PRATER',\r\n    'ROLOFER',\r\n    'KAHL',\r\n    'LAIDING SYSTEMS',\r\n    'MATCON',\r\n    'M-TEC',\r\n    'DMN WESTINGHOUSE',\r\n    'GIRONET',\r\n    'HAVER&BOECKER',\r\n    'JACOBS',\r\n    'TEKA',\r\n    'BALEROMEX',\r\n    'BFM (MEXTRADE)',\r\n    'DURR UNIVERSAL',\r\n    'ESAMETAL',\r\n    'GREEN SPARE',\r\n    'MARTIN SPROCKET & GEAR DE MEXICO',\r\n    'ONYX',\r\n    'PELLETRON',\r\n    'CABLEVEY',\r\n    'FILTROS Y SERVICIOS DE MEXICO',\r\n    'FOX VENTURY',\r\n    'KEYSTONE',\r\n    'SILOS&SILOS',\r\n    'SOLBERG',\r\n    'TITAN',\r\n    'WORCESTER',\r\n    'GONBAR',\r\n    'MIXER SYSTEMS',\r\n    'SWECO',\r\n    'A&J MIXING',\r\n    'AMERICAN AIR FILTER INTERNATIONAL',\r\n    'BRAY',\r\n    'DORIAN DRAKE',\r\n    'H-P PRODUCTS',\r\n    'VEGA',\r\n    'GCN',\r\n    'GS GLOBAL',\r\n    'APX SOLUTIONS',\r\n    'PAGANI',\r\n    'CMB CUSINATO',\r\n    'MAGUIRE',\r\n    'ITALSILO',\r\n    'ENGINEERING PROJECTS MANAGEMENT',\r\n    'FIMSA',\r\n    'CONAIR',\r\n    'COPERION',\r\n    'BEUMERGROUP',\r\n    'NOVATEC',\r\n    'VIBRA SCREW',\r\n    'ACHBERG',\r\n    'BULK-FLOW A-WARD',\r\n    'DAFANG CRANE',\r\n    'ROTOFLO SEVERFIELD',\r\n    'VOLKMANN',\r\n    'ZENITH',\r\n    'FIKE',\r\n    'ERIEZ',\r\n    'GRACIDA',\r\n    'K-TRON',\r\n    'MARTIN ENGINEERING',\r\n    'MOLLET'\r\n  ];\r\n\r\n  const glowColors = [\r\n    'rgba(75, 166, 166, 0.17)',\r\n    'rgba(6, 63, 91, 0.11)',\r\n    'rgba(120, 184, 42, 0.1)',\r\n    'rgba(95, 154, 191, 0.12)',\r\n    'rgba(94, 191, 182, 0.12)'\r\n  ];\r\n\r\n  const grid = root.querySelector(\r\n    '.cmdv3-grid'\r\n  );\r\n\r\n  const alphabet = root.querySelector(\r\n    '.cmdv3-alphabet'\r\n  );\r\n\r\n  const searchInput = root.querySelector(\r\n    '.cmdv3-search-input'\r\n  );\r\n\r\n  const clearSearch = root.querySelector(\r\n    '.cmdv3-clear-search'\r\n  );\r\n\r\n  const resultCount = root.querySelector(\r\n    '.cmdv3-result-count'\r\n  );\r\n\r\n  const resetButton = root.querySelector(\r\n    '.cmdv3-reset'\r\n  );\r\n\r\n  const emptyState = root.querySelector(\r\n    '.cmdv3-empty'\r\n  );\r\n\r\n  const emptyButton = emptyState.querySelector(\r\n    'button'\r\n  );\r\n\r\n  const loadWrapper = root.querySelector(\r\n    '.cmdv3-load-wrapper'\r\n  );\r\n\r\n  const loadMoreButton = root.querySelector(\r\n    '.cmdv3-load-more'\r\n  );\r\n\r\n  const revealElements = root.querySelectorAll(\r\n    '.cmdv3-reveal'\r\n  );\r\n\r\n  const featuredViewport = root.querySelector(\r\n    '.cmdv3-featured-viewport'\r\n  );\r\n\r\n  const featuredCards = Array.from(\r\n    root.querySelectorAll(\r\n      '.cmdv3-featured-track .cmdv3-featured-card'\r\n    )\r\n  );\r\n\r\n  const carouselPrev = root.querySelector(\r\n    '.cmdv3-carousel-prev'\r\n  );\r\n\r\n  const carouselNext = root.querySelector(\r\n    '.cmdv3-carousel-next'\r\n  );\r\n\r\n  const carouselDots = root.querySelector(\r\n    '.cmdv3-carousel-dots'\r\n  );\r\n\r\n  let selectedLetter = 'TODAS';\r\n  let searchTerm = '';\r\n  let visibleLimit = 24;\r\n\r\n  function normalize(value) {\r\n    return value\r\n      .normalize('NFD')\r\n      .replace(\/[\\u0300-\\u036f]\/g, '')\r\n      .toLowerCase()\r\n      .trim();\r\n  }\r\n\r\n  function slugify(value) {\r\n    return normalize(value)\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(name) {\r\n    const ignoredWords = [\r\n      'DE',\r\n      'DEL',\r\n      'Y',\r\n      'THE',\r\n      'OF'\r\n    ];\r\n\r\n    const words = name\r\n      .replace(\/[()]\/g, ' ')\r\n      .split(\/\\s+\/)\r\n      .filter(Boolean)\r\n      .filter(function (word) {\r\n        return !ignoredWords.includes(\r\n          word.toUpperCase()\r\n        );\r\n      });\r\n\r\n    if (!words.length) {\r\n      return name\r\n        .slice(0, 2)\r\n        .toUpperCase();\r\n    }\r\n\r\n    if (words.length === 1) {\r\n      return words[0]\r\n        .slice(0, 2)\r\n        .toUpperCase();\r\n    }\r\n\r\n    return (\r\n      words[0].charAt(0) +\r\n      words[words.length - 1].charAt(0)\r\n    ).toUpperCase();\r\n  }\r\n\r\n  const brands = brandNames\r\n    .map(function (name, index) {\r\n      return {\r\n        name: name,\r\n        logo: brandLogos[name] || '',\r\n        glow:\r\n          glowColors[\r\n            index % glowColors.length\r\n          ]\r\n      };\r\n    })\r\n    .sort(function (a, b) {\r\n      if (a.name === 'SYCSA') {\r\n        return -1;\r\n      }\r\n\r\n      if (b.name === 'SYCSA') {\r\n        return 1;\r\n      }\r\n\r\n      return a.name.localeCompare(\r\n        b.name,\r\n        'es',\r\n        {\r\n          sensitivity: 'base'\r\n        }\r\n      );\r\n    });\r\n\r\n  function createAlphabet() {\r\n    const existingLetters = Array.from(\r\n      new Set(\r\n        brands.map(function (brand) {\r\n          return normalize(brand.name)\r\n            .charAt(0)\r\n            .toUpperCase();\r\n        })\r\n      )\r\n    ).sort();\r\n\r\n    const letters = [\r\n      'TODAS'\r\n    ].concat(existingLetters);\r\n\r\n    alphabet.innerHTML = '';\r\n\r\n    letters.forEach(function (letter) {\r\n      const button =\r\n        document.createElement('button');\r\n\r\n      button.type = 'button';\r\n      button.className = 'cmdv3-letter';\r\n      button.dataset.letter = letter;\r\n\r\n      button.textContent =\r\n        letter === 'TODAS'\r\n          ? 'Todas'\r\n          : letter;\r\n\r\n      button.addEventListener(\r\n        'click',\r\n        function () {\r\n          selectedLetter = letter;\r\n          visibleLimit = 24;\r\n\r\n          updateAlphabet();\r\n          renderBrands();\r\n        }\r\n      );\r\n\r\n      alphabet.appendChild(button);\r\n    });\r\n\r\n    updateAlphabet();\r\n  }\r\n\r\n  function updateAlphabet() {\r\n    alphabet\r\n      .querySelectorAll('.cmdv3-letter')\r\n      .forEach(function (button) {\r\n        button.classList.toggle(\r\n          'is-active',\r\n          button.dataset.letter ===\r\n            selectedLetter\r\n        );\r\n      });\r\n  }\r\n\r\n  function getFilteredBrands() {\r\n    return brands.filter(function (brand) {\r\n      const normalizedName =\r\n        normalize(brand.name);\r\n\r\n      const matchesSearch =\r\n        !searchTerm ||\r\n        normalizedName.includes(\r\n          searchTerm\r\n        );\r\n\r\n      const matchesLetter =\r\n        selectedLetter === 'TODAS' ||\r\n        normalizedName\r\n          .charAt(0)\r\n          .toUpperCase() ===\r\n          selectedLetter;\r\n\r\n      return (\r\n        matchesSearch &&\r\n        matchesLetter\r\n      );\r\n    });\r\n  }\r\n\r\n  function createBrandCard(brand) {\r\n    const card =\r\n      document.createElement('a');\r\n\r\n    card.className = 'cmdv3-brand-card';\r\n\r\n    card.href =\r\n      BRAND_BASE +\r\n      slugify(brand.name) +\r\n      '\/';\r\n\r\n    card.style.setProperty(\r\n      '--cmdv3-card-glow',\r\n      brand.glow\r\n    );\r\n\r\n    card.setAttribute(\r\n      'aria-label',\r\n      'Explorar la marca ' +\r\n        brand.name\r\n    );\r\n\r\n    const monogram =\r\n      document.createElement('div');\r\n\r\n    monogram.className =\r\n      'cmdv3-monogram';\r\n\r\n    if (brand.logo) {\r\n      const image =\r\n        document.createElement('img');\r\n\r\n      image.className =\r\n        'cmdv3-brand-logo';\r\n\r\n      image.src = brand.logo;\r\n      image.alt = brand.name;\r\n      image.loading = 'lazy';\r\n      image.decoding = 'async';\r\n\r\n      image.addEventListener(\r\n        'error',\r\n        function () {\r\n          monogram.innerHTML = '';\r\n          monogram.textContent =\r\n            initials(brand.name);\r\n        }\r\n      );\r\n\r\n      monogram.appendChild(image);\r\n    } else {\r\n      monogram.textContent =\r\n        initials(brand.name);\r\n    }\r\n\r\n    const copy =\r\n      document.createElement('div');\r\n\r\n    copy.className =\r\n      'cmdv3-brand-copy';\r\n\r\n    const label =\r\n      document.createElement('small');\r\n\r\n    label.textContent =\r\n      'MARCA DEL PORTAFOLIO';\r\n\r\n    const title =\r\n      document.createElement('strong');\r\n\r\n    title.textContent = brand.name;\r\n\r\n    const description =\r\n      document.createElement('span');\r\n\r\n    description.textContent =\r\n      'Ver productos y aplicaciones \u2192';\r\n\r\n    copy.appendChild(label);\r\n    copy.appendChild(title);\r\n    copy.appendChild(description);\r\n\r\n    const arrow =\r\n      document.createElement('span');\r\n\r\n    arrow.className =\r\n      'cmdv3-brand-arrow';\r\n\r\n    arrow.setAttribute(\r\n      'aria-hidden',\r\n      'true'\r\n    );\r\n\r\n    arrow.textContent = '\u2197';\r\n\r\n    card.appendChild(monogram);\r\n    card.appendChild(copy);\r\n    card.appendChild(arrow);\r\n\r\n    return card;\r\n  }\r\n\r\n  function renderBrands() {\r\n    const filtered =\r\n      getFilteredBrands();\r\n\r\n    const filtersAreActive =\r\n      Boolean(searchTerm) ||\r\n      selectedLetter !== 'TODAS';\r\n\r\n    const visibleBrands =\r\n      filtersAreActive\r\n        ? filtered\r\n        : filtered.slice(\r\n            0,\r\n            visibleLimit\r\n          );\r\n\r\n    grid.innerHTML = '';\r\n\r\n    visibleBrands.forEach(\r\n      function (brand) {\r\n        grid.appendChild(\r\n          createBrandCard(brand)\r\n        );\r\n      }\r\n    );\r\n\r\n    resultCount.textContent =\r\n      filtered.length === 1\r\n        ? '1 marca encontrada'\r\n        : filtered.length +\r\n          ' marcas encontradas';\r\n\r\n    const hasFilters =\r\n      Boolean(searchTerm) ||\r\n      selectedLetter !== 'TODAS';\r\n\r\n    resetButton.classList.toggle(\r\n      'is-visible',\r\n      hasFilters\r\n    );\r\n\r\n    clearSearch.classList.toggle(\r\n      'is-visible',\r\n      Boolean(searchInput.value)\r\n    );\r\n\r\n    emptyState.hidden =\r\n      filtered.length !== 0;\r\n\r\n    grid.hidden =\r\n      filtered.length === 0;\r\n\r\n    const canLoadMore =\r\n      !filtersAreActive &&\r\n      visibleLimit < filtered.length;\r\n\r\n    loadWrapper.hidden =\r\n      !canLoadMore;\r\n  }\r\n\r\n  function resetFilters() {\r\n    selectedLetter = 'TODAS';\r\n    searchTerm = '';\r\n    visibleLimit = 24;\r\n\r\n    searchInput.value = '';\r\n\r\n    updateAlphabet();\r\n    renderBrands();\r\n  }\r\n\r\n  searchInput.addEventListener(\r\n    'input',\r\n    function () {\r\n      searchTerm = normalize(\r\n        searchInput.value\r\n      );\r\n\r\n      visibleLimit = 24;\r\n\r\n      renderBrands();\r\n    }\r\n  );\r\n\r\n  clearSearch.addEventListener(\r\n    'click',\r\n    function () {\r\n      searchInput.value = '';\r\n      searchTerm = '';\r\n\r\n      searchInput.focus();\r\n\r\n      renderBrands();\r\n    }\r\n  );\r\n\r\n  resetButton.addEventListener(\r\n    'click',\r\n    resetFilters\r\n  );\r\n\r\n  emptyButton.addEventListener(\r\n    'click',\r\n    resetFilters\r\n  );\r\n\r\n  loadMoreButton.addEventListener(\r\n    'click',\r\n    function () {\r\n      visibleLimit += 24;\r\n\r\n      renderBrands();\r\n    }\r\n  );\r\n\r\n\r\n  \/*\r\n   * CARRUSEL DE MARCAS DESTACADAS\r\n   *\r\n   * Escritorio: 3 tarjetas por vista.\r\n   * Tablet: 2 tarjetas por vista.\r\n   * M\u00f3vil: 1 tarjeta por vista.\r\n   * La navegaci\u00f3n avanza por p\u00e1ginas completas.\r\n   *\/\r\n\r\n  let activeFeaturedPage = 0;\r\n  let featuredScrollFrame = null;\r\n  let featuredResizeTimer = null;\r\n\r\n  function getFeaturedCardsPerView() {\r\n    if (window.innerWidth <= 767) {\r\n      return 1;\r\n    }\r\n\r\n    if (window.innerWidth <= 1100) {\r\n      return 2;\r\n    }\r\n\r\n    return 3;\r\n  }\r\n\r\n  function getFeaturedPageCount() {\r\n    return Math.max(\r\n      1,\r\n      Math.ceil(\r\n        featuredCards.length \/\r\n        getFeaturedCardsPerView()\r\n      )\r\n    );\r\n  }\r\n\r\n  function normalizeFeaturedPage(page) {\r\n    const pageCount =\r\n      getFeaturedPageCount();\r\n\r\n    return (\r\n      (page % pageCount) +\r\n      pageCount\r\n    ) % pageCount;\r\n  }\r\n\r\n  function updateFeaturedDots(page) {\r\n    if (!carouselDots) {\r\n      return;\r\n    }\r\n\r\n    activeFeaturedPage =\r\n      normalizeFeaturedPage(page);\r\n\r\n    carouselDots\r\n      .querySelectorAll(\r\n        '.cmdv3-carousel-dot'\r\n      )\r\n      .forEach(function (dot, index) {\r\n        const isActive =\r\n          index === activeFeaturedPage;\r\n\r\n        dot.classList.toggle(\r\n          'is-active',\r\n          isActive\r\n        );\r\n\r\n        dot.setAttribute(\r\n          'aria-current',\r\n          isActive ? 'true' : 'false'\r\n        );\r\n      });\r\n  }\r\n\r\n  function goToFeaturedPage(\r\n    page,\r\n    behavior\r\n  ) {\r\n    if (\r\n      !featuredViewport ||\r\n      !featuredCards.length\r\n    ) {\r\n      return;\r\n    }\r\n\r\n    const normalizedPage =\r\n      normalizeFeaturedPage(page);\r\n\r\n    const cardsPerView =\r\n      getFeaturedCardsPerView();\r\n\r\n    const targetCardIndex =\r\n      Math.min(\r\n        normalizedPage * cardsPerView,\r\n        featuredCards.length - 1\r\n      );\r\n\r\n    const targetCard =\r\n      featuredCards[targetCardIndex];\r\n\r\n    featuredViewport.scrollTo({\r\n      left: targetCard\r\n        ? targetCard.offsetLeft\r\n        : 0,\r\n      behavior: behavior || 'smooth'\r\n    });\r\n\r\n    updateFeaturedDots(\r\n      normalizedPage\r\n    );\r\n  }\r\n\r\n  function detectFeaturedPage() {\r\n    if (\r\n      !featuredViewport ||\r\n      !featuredCards.length\r\n    ) {\r\n      return;\r\n    }\r\n\r\n    let nearestIndex = 0;\r\n    let nearestDistance = Infinity;\r\n\r\n    featuredCards.forEach(\r\n      function (card, index) {\r\n        const distance = Math.abs(\r\n          card.offsetLeft -\r\n          featuredViewport.scrollLeft\r\n        );\r\n\r\n        if (distance < nearestDistance) {\r\n          nearestDistance = distance;\r\n          nearestIndex = index;\r\n        }\r\n      }\r\n    );\r\n\r\n    const cardsPerView =\r\n      getFeaturedCardsPerView();\r\n\r\n    updateFeaturedDots(\r\n      Math.round(\r\n        nearestIndex \/ cardsPerView\r\n      )\r\n    );\r\n  }\r\n\r\n  function createFeaturedDots() {\r\n    if (\r\n      !carouselDots ||\r\n      !featuredCards.length\r\n    ) {\r\n      return;\r\n    }\r\n\r\n    const cardsPerView =\r\n      getFeaturedCardsPerView();\r\n\r\n    const pageCount =\r\n      getFeaturedPageCount();\r\n\r\n    carouselDots.innerHTML = '';\r\n\r\n    for (\r\n      let page = 0;\r\n      page < pageCount;\r\n      page += 1\r\n    ) {\r\n      const dot =\r\n        document.createElement('button');\r\n\r\n      const first =\r\n        page * cardsPerView + 1;\r\n\r\n      const last =\r\n        Math.min(\r\n          first + cardsPerView - 1,\r\n          featuredCards.length\r\n        );\r\n\r\n      dot.type = 'button';\r\n      dot.className =\r\n        'cmdv3-carousel-dot';\r\n\r\n      dot.setAttribute(\r\n        'aria-label',\r\n        first === last\r\n          ? 'Mostrar marca ' + first\r\n          : 'Mostrar marcas ' +\r\n            first +\r\n            ' a ' +\r\n            last\r\n      );\r\n\r\n      dot.addEventListener(\r\n        'click',\r\n        function () {\r\n          goToFeaturedPage(page);\r\n        }\r\n      );\r\n\r\n      carouselDots.appendChild(dot);\r\n    }\r\n\r\n    updateFeaturedDots(\r\n      Math.min(\r\n        activeFeaturedPage,\r\n        pageCount - 1\r\n      )\r\n    );\r\n  }\r\n\r\n  if (\r\n    featuredViewport &&\r\n    featuredCards.length &&\r\n    carouselPrev &&\r\n    carouselNext &&\r\n    carouselDots\r\n  ) {\r\n    createFeaturedDots();\r\n\r\n    carouselPrev.addEventListener(\r\n      'click',\r\n      function () {\r\n        goToFeaturedPage(\r\n          activeFeaturedPage - 1\r\n        );\r\n      }\r\n    );\r\n\r\n    carouselNext.addEventListener(\r\n      'click',\r\n      function () {\r\n        goToFeaturedPage(\r\n          activeFeaturedPage + 1\r\n        );\r\n      }\r\n    );\r\n\r\n    featuredViewport.addEventListener(\r\n      'keydown',\r\n      function (event) {\r\n        if (event.key === 'ArrowLeft') {\r\n          event.preventDefault();\r\n\r\n          goToFeaturedPage(\r\n            activeFeaturedPage - 1\r\n          );\r\n        }\r\n\r\n        if (event.key === 'ArrowRight') {\r\n          event.preventDefault();\r\n\r\n          goToFeaturedPage(\r\n            activeFeaturedPage + 1\r\n          );\r\n        }\r\n      }\r\n    );\r\n\r\n    featuredViewport.addEventListener(\r\n      'scroll',\r\n      function () {\r\n        if (featuredScrollFrame) {\r\n          cancelAnimationFrame(\r\n            featuredScrollFrame\r\n          );\r\n        }\r\n\r\n        featuredScrollFrame =\r\n          requestAnimationFrame(\r\n            detectFeaturedPage\r\n          );\r\n      },\r\n      {\r\n        passive: true\r\n      }\r\n    );\r\n\r\n    window.addEventListener(\r\n      'resize',\r\n      function () {\r\n        window.clearTimeout(\r\n          featuredResizeTimer\r\n        );\r\n\r\n        featuredResizeTimer =\r\n          window.setTimeout(\r\n            function () {\r\n              activeFeaturedPage = 0;\r\n\r\n              createFeaturedDots();\r\n\r\n              goToFeaturedPage(\r\n                0,\r\n                'auto'\r\n              );\r\n            },\r\n            120\r\n          );\r\n      }\r\n    );\r\n  }\r\n\r\n  \/*\r\n   * ANIMACI\u00d3N DE ENTRADA\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(\r\n            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        {\r\n          threshold: 0.1\r\n        }\r\n      );\r\n\r\n    revealElements.forEach(\r\n      function (element) {\r\n        observer.observe(element);\r\n      }\r\n    );\r\n  } else {\r\n    revealElements.forEach(\r\n      function (element) {\r\n        element.classList.add(\r\n          'is-visible'\r\n        );\r\n      }\r\n    );\r\n  }\r\n\r\n  createAlphabet();\r\n  renderBrands();\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>PORTAFOLIO DE MARCAS 100 marcas Un contacto. Decenas de marcas. Cientos de aplicaciones. Como comercializadora industrial, conectamos tu proyecto con fabricantes y tecnolog\u00edas especializadas para el almacenamiento, dosificaci\u00f3n, filtraci\u00f3n, mezclado y automatizaci\u00f3n. Explorar portafolio Hablar con un especialista \u2197 Distintos productos. Una sola relaci\u00f3n comercial. COMERCIALIZADORA INDUSTRIAL Morris Coupling WAM Vortex Gardner Denver Mixaco Sodimate [&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-298","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/commerss.com\/en\/wp-json\/wp\/v2\/pages\/298","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=298"}],"version-history":[{"count":61,"href":"https:\/\/commerss.com\/en\/wp-json\/wp\/v2\/pages\/298\/revisions"}],"predecessor-version":[{"id":4792,"href":"https:\/\/commerss.com\/en\/wp-json\/wp\/v2\/pages\/298\/revisions\/4792"}],"wp:attachment":[{"href":"https:\/\/commerss.com\/en\/wp-json\/wp\/v2\/media?parent=298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}