{"id":20772,"date":"2026-06-25T11:48:37","date_gmt":"2026-06-25T09:48:37","guid":{"rendered":"https:\/\/cps.es\/brand-center\/"},"modified":"2026-10-22T08:59:09","modified_gmt":"2026-10-22T06:59:09","slug":"brand-center","status":"publish","type":"page","link":"https:\/\/cps.es\/en\/brand-center\/","title":{"rendered":"Brand Center"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"20772\" class=\"elementor elementor-20772 elementor-19706\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f0be4d8 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"f0be4d8\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b4fd293\" data-id=\"b4fd293\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7be5ffb elementor-widget elementor-widget-html\" data-id=\"7be5ffb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ===================================================================\r\n     BRAND CENTER | CPS \u00b7 PYG \u00b7 Eyser\r\n     Fragmento para el widget HTML de Elementor. No lleva <html>,\r\n     <head> ni <body>: Elementor ya los pone. El noindex de esta\r\n     p\u00e1gina se configura en el plugin SEO de WordPress, no aqu\u00ed.\r\n     =================================================================== -->\r\n<style>\r\n\/* ===================================================================\r\n   BASE DEL BRAND CENTER\r\n   Sustituye al reset global de Tailwind (preflight), que afectaba\r\n   a la cabecera y el pie de cps.es. Todo va acotado a #brand-center\r\n   y con un selector de ID para que el CSS del tema y de Elementor\r\n   no se cuele dentro. Las clases de Tailwind (#brand-center :is(...))\r\n   tienen m\u00e1s peso que estas reglas, as\u00ed que siempre mandan:\r\n   :where() deja estas reglas con el peso de un solo ID, suficiente\r\n   para ganar al tema pero por debajo de cualquier clase.\r\n   =================================================================== *\/\r\n:where(#brand-center),\r\n:where(#brand-center) *,\r\n:where(#brand-center) ::before,\r\n:where(#brand-center) ::after {\r\n    box-sizing: border-box;\r\n    border-width: 0;\r\n    border-style: solid;\r\n    border-color: #e5e7eb;\r\n}\r\n#brand-center {\r\n    font-family: 'Segoe UI', Calibri, system-ui, sans-serif;\r\n    color: #1f2937;\r\n    background-color: #ffffff;\r\n    line-height: 1.5;\r\n    text-align: left;\r\n    -webkit-font-smoothing: antialiased;\r\n    -moz-osx-font-smoothing: grayscale;\r\n}\r\n#brand-center :where(h1, h2, h3, h4, p) {\r\n    margin: 0;\r\n    padding: 0;\r\n    font-family: inherit;\r\n    font-size: inherit;\r\n    font-weight: inherit;\r\n    line-height: inherit;\r\n    letter-spacing: inherit;\r\n    text-transform: none;\r\n    color: inherit;\r\n}\r\n#brand-center :where(a, a:hover, a:focus) {\r\n    color: inherit;\r\n    text-decoration: none;\r\n}\r\n#brand-center :where(button, button:hover, button:focus, button:active) {\r\n    margin: 0;\r\n    padding: 0;\r\n    width: auto;\r\n    min-height: 0;\r\n    font: inherit;\r\n    letter-spacing: inherit;\r\n    text-transform: none;\r\n    text-align: inherit;\r\n    color: inherit;\r\n    background-color: transparent;\r\n    background-image: none;\r\n    border: 0 solid #e5e7eb;\r\n    border-radius: 0;\r\n    box-shadow: none;\r\n    cursor: pointer;\r\n}\r\n#brand-center :where(button:focus-visible, a:focus-visible) {\r\n    outline: 2px solid var(--brand-primary);\r\n    outline-offset: 2px;\r\n}\r\n#brand-center :where(aside, header, main, nav, section) {\r\n    display: block;\r\n    margin: 0;\r\n}\r\n#brand-center :where(img, svg) {\r\n    display: block;\r\n    vertical-align: middle;\r\n}\r\n#brand-center :where(img) {\r\n    max-width: 100%;\r\n    height: auto;\r\n}\r\n\r\n\/* ===================================================================\r\n   TAILWIND COMPILADO (v3.4.3, sin preflight, acotado a #brand-center)\r\n   No editar a mano. Si a\u00f1ades al HTML o al JS una clase de Tailwind\r\n   que no aparezca aqu\u00ed, hay que volver a generar este bloque.\r\n   =================================================================== *\/\r\n#brand-center,#brand-center *,#brand-center ::before,#brand-center ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}#brand-center :is(.pointer-events-none){pointer-events:none}#brand-center :is(.fixed){position:fixed}#brand-center :is(.bottom-8){bottom:2rem}#brand-center :is(.left-0){left:0}#brand-center :is(.left-1\\\/2){left:50%}#brand-center :is(.right-0){right:0}#brand-center :is(.top-0){top:0}#brand-center :is(.z-40){z-index:40}#brand-center :is(.z-50){z-index:50}#brand-center :is(.mx-auto){margin-left:auto;margin-right:auto}#brand-center :is(.mb-1){margin-bottom:.25rem}#brand-center :is(.mb-12){margin-bottom:3rem}#brand-center :is(.mb-14){margin-bottom:3.5rem}#brand-center :is(.mb-2){margin-bottom:.5rem}#brand-center :is(.mb-3){margin-bottom:.75rem}#brand-center :is(.mb-5){margin-bottom:1.25rem}#brand-center :is(.mb-6){margin-bottom:1.5rem}#brand-center :is(.mb-8){margin-bottom:2rem}#brand-center :is(.mt-1){margin-top:.25rem}#brand-center :is(.block){display:block}#brand-center :is(.flex){display:flex}#brand-center :is(.grid){display:grid}#brand-center :is(.hidden){display:none}#brand-center :is(.h-11){height:2.75rem}#brand-center :is(.h-20){height:5rem}#brand-center :is(.h-3){height:.75rem}#brand-center :is(.h-3\\.5){height:.875rem}#brand-center :is(.h-4){height:1rem}#brand-center :is(.h-5){height:1.25rem}#brand-center :is(.h-6){height:1.5rem}#brand-center :is(.w-11){width:2.75rem}#brand-center :is(.w-20){width:5rem}#brand-center :is(.w-3){width:.75rem}#brand-center :is(.w-3\\.5){width:.875rem}#brand-center :is(.w-4){width:1rem}#brand-center :is(.w-5){width:1.25rem}#brand-center :is(.w-6){width:1.5rem}#brand-center :is(.w-72){width:18rem}#brand-center :is(.w-full){width:100%}#brand-center :is(.max-w-6xl){max-width:72rem}#brand-center :is(.flex-1){flex:1 1 0%}#brand-center :is(.flex-shrink-0){flex-shrink:0}#brand-center :is(.-translate-x-1\\\/2){--tw-translate-x:-50%}#brand-center :is(.-translate-x-1\\\/2),#brand-center :is(.translate-y-0){transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}#brand-center :is(.translate-y-0){--tw-translate-y:0px}#brand-center :is(.translate-y-2){--tw-translate-y:0.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}#brand-center :is(.grid-cols-1){grid-template-columns:repeat(1,minmax(0,1fr))}#brand-center :is(.flex-col){flex-direction:column}#brand-center :is(.items-start){align-items:flex-start}#brand-center :is(.items-center){align-items:center}#brand-center :is(.items-baseline){align-items:baseline}#brand-center :is(.justify-center){justify-content:center}#brand-center :is(.justify-between){justify-content:space-between}#brand-center :is(.gap-1){gap:.25rem}#brand-center :is(.gap-1\\.5){gap:.375rem}#brand-center :is(.gap-2){gap:.5rem}#brand-center :is(.gap-4){gap:1rem}#brand-center :is(.gap-5){gap:1.25rem}#brand-center :is(.gap-8){gap:2rem}#brand-center :is(.space-y-1>:not([hidden])~:not([hidden])){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}#brand-center :is(.overflow-hidden){overflow:hidden}#brand-center :is(.overflow-x-auto){overflow-x:auto}#brand-center :is(.whitespace-nowrap){white-space:nowrap}#brand-center :is(.rounded-2xl){border-radius:1rem}#brand-center :is(.rounded-full){border-radius:9999px}#brand-center :is(.rounded-lg){border-radius:.5rem}#brand-center :is(.rounded-md){border-radius:.375rem}#brand-center :is(.rounded-xl){border-radius:.75rem}#brand-center :is(.border){border-width:1px}#brand-center :is(.border-2){border-width:2px}#brand-center :is(.border-4){border-width:4px}#brand-center :is(.border-b){border-bottom-width:1px}#brand-center :is(.border-r){border-right-width:1px}#brand-center :is(.border-t){border-top-width:1px}#brand-center :is(.border-gray-100){--tw-border-opacity:1;border-color:rgb(243 244 246\/var(--tw-border-opacity))}#brand-center :is(.border-gray-200){--tw-border-opacity:1;border-color:rgb(229 231 235\/var(--tw-border-opacity))}#brand-center :is(.border-gray-50){--tw-border-opacity:1;border-color:rgb(249 250 251\/var(--tw-border-opacity))}#brand-center :is(.bg-gray-50){--tw-bg-opacity:1;background-color:rgb(249 250 251\/var(--tw-bg-opacity))}#brand-center :is(.bg-gray-900){--tw-bg-opacity:1;background-color:rgb(17 24 39\/var(--tw-bg-opacity))}#brand-center :is(.bg-white){--tw-bg-opacity:1;background-color:rgb(255 255 255\/var(--tw-bg-opacity))}#brand-center :is(.p-2){padding:.5rem}#brand-center :is(.p-5){padding:1.25rem}#brand-center :is(.p-6){padding:1.5rem}#brand-center :is(.px-4){padding-left:1rem;padding-right:1rem}#brand-center :is(.px-5){padding-left:1.25rem;padding-right:1.25rem}#brand-center :is(.px-6){padding-left:1.5rem;padding-right:1.5rem}#brand-center :is(.px-8){padding-left:2rem;padding-right:2rem}#brand-center :is(.py-10){padding-top:2.5rem;padding-bottom:2.5rem}#brand-center :is(.py-2){padding-top:.5rem;padding-bottom:.5rem}#brand-center :is(.py-2\\.5){padding-top:.625rem;padding-bottom:.625rem}#brand-center :is(.py-3){padding-top:.75rem;padding-bottom:.75rem}#brand-center :is(.py-3\\.5){padding-top:.875rem;padding-bottom:.875rem}#brand-center :is(.py-6){padding-top:1.5rem;padding-bottom:1.5rem}#brand-center :is(.pb-2){padding-bottom:.5rem}#brand-center :is(.pb-24){padding-bottom:6rem}#brand-center :is(.pb-3){padding-bottom:.75rem}#brand-center :is(.pt-0){padding-top:0}#brand-center :is(.pt-0\\.5){padding-top:.125rem}#brand-center :is(.pt-12){padding-top:3rem}#brand-center :is(.pt-16){padding-top:4rem}#brand-center :is(.pt-3){padding-top:.75rem}#brand-center :is(.text-left){text-align:left}#brand-center :is(.text-right){text-align:right}#brand-center :is(.font-primary){font-family:Segoe UI,Calibri,system-ui,sans-serif}#brand-center :is(.font-secondary){font-family:Calibri,Segoe UI,system-ui,sans-serif}#brand-center :is(.text-2xl){font-size:1.5rem;line-height:2rem}#brand-center :is(.text-4xl){font-size:2.25rem;line-height:2.5rem}#brand-center :is(.text-lg){font-size:1.125rem;line-height:1.75rem}#brand-center :is(.text-sm){font-size:.875rem;line-height:1.25rem}#brand-center :is(.text-xs){font-size:.75rem;line-height:1rem}#brand-center :is(.font-bold){font-weight:700}#brand-center :is(.font-medium){font-weight:500}#brand-center :is(.font-normal){font-weight:400}#brand-center :is(.font-semibold){font-weight:600}#brand-center :is(.uppercase){text-transform:uppercase}#brand-center :is(.leading-relaxed){line-height:1.625}#brand-center :is(.tracking-\\[0\\.2em\\]){letter-spacing:.2em}#brand-center :is(.tracking-tight){letter-spacing:-.025em}#brand-center :is(.tracking-wider){letter-spacing:.05em}#brand-center :is(.text-emerald-400){--tw-text-opacity:1;color:rgb(52 211 153\/var(--tw-text-opacity))}#brand-center :is(.text-gray-300){--tw-text-opacity:1;color:rgb(209 213 219\/var(--tw-text-opacity))}#brand-center :is(.text-gray-400){--tw-text-opacity:1;color:rgb(156 163 175\/var(--tw-text-opacity))}#brand-center :is(.text-gray-500){--tw-text-opacity:1;color:rgb(107 114 128\/var(--tw-text-opacity))}#brand-center :is(.text-gray-600){--tw-text-opacity:1;color:rgb(75 85 99\/var(--tw-text-opacity))}#brand-center :is(.text-gray-700){--tw-text-opacity:1;color:rgb(55 65 81\/var(--tw-text-opacity))}#brand-center :is(.text-gray-800){--tw-text-opacity:1;color:rgb(31 41 55\/var(--tw-text-opacity))}#brand-center :is(.text-gray-900){--tw-text-opacity:1;color:rgb(17 24 39\/var(--tw-text-opacity))}#brand-center :is(.text-white){--tw-text-opacity:1;color:rgb(255 255 255\/var(--tw-text-opacity))}#brand-center :is(.opacity-0){opacity:0}#brand-center :is(.opacity-100){opacity:1}#brand-center :is(.shadow-lg){--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}#brand-center :is(.shadow-lg),#brand-center :is(.shadow-sm){box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}#brand-center :is(.shadow-sm){--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}#brand-center :is(.outline){outline-style:solid}#brand-center :is(.filter){filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}#brand-center :is(.transition-all){transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}#brand-center :is(.transition-colors){transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}#brand-center :is(.transition-shadow){transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}#brand-center :is(.duration-300){transition-duration:.3s}#brand-center :is(.hover\\:border-brand-primary:hover){border-color:var(--brand-primary)}#brand-center :is(.hover\\:bg-gray-100:hover){--tw-bg-opacity:1;background-color:rgb(243 244 246\/var(--tw-bg-opacity))}#brand-center :is(.hover\\:shadow-md:hover){--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}#brand-center :is(.group:hover .group-hover\\:bg-brand-icon-bg){background-color:var(--brand-icon-bg)}#brand-center :is(.group:hover .group-hover\\:text-brand-primary){color:var(--brand-primary)}@media (min-width:640px){#brand-center :is(.sm\\:h-40){height:10rem}#brand-center :is(.sm\\:w-40){width:10rem}#brand-center :is(.sm\\:grid-cols-2){grid-template-columns:repeat(2,minmax(0,1fr))}#brand-center :is(.sm\\:gap-6){gap:1.5rem}#brand-center :is(.sm\\:px-10){padding-left:2.5rem;padding-right:2.5rem}}@media (min-width:1024px){#brand-center :is(.lg\\:flex){display:flex}#brand-center :is(.lg\\:hidden){display:none}#brand-center :is(.lg\\:grid-cols-3){grid-template-columns:repeat(3,minmax(0,1fr))}#brand-center :is(.lg\\:flex-col){flex-direction:column}#brand-center :is(.lg\\:px-16){padding-left:4rem;padding-right:4rem}#brand-center :is(.lg\\:pb-32){padding-bottom:8rem}#brand-center :is(.lg\\:pt-0){padding-top:0}#brand-center :is(.lg\\:pt-16){padding-top:4rem}}\r\n\r\n\/* ===================================================================\r\n     VARIABLES CSS DE MARCA\r\n     Cada empresa redefine estas variables sobre el contenedor\r\n     #brand-center mediante el atributo data-active-company. El JS solo cambia ese\r\n     atributo; todo el repintado de color del \u00c1REA DE CONTENIDO lo hace\r\n     el CSS. Importante: estas variables NO controlan el color del\r\n     placeholder de logo (ver .mini-logo-* m\u00e1s abajo) \u2014 cada marca\r\n     mantiene su propio color ah\u00ed, fijo, sin importar cu\u00e1l est\u00e9 activa.\r\n     =================================================================== *\/\r\n#brand-center {\r\n--brand-primary: #211261;\r\n--brand-secondary: #dde5ed;\r\n--brand-accent: #211261;\r\n--brand-surface: #ffffff;\r\n--brand-text-on-primary: #ffffff;\r\n--brand-icon-bg: #dde5ed;\r\n}\r\n#brand-center[data-active-company=\"cps\"] {\r\n--brand-primary: #211261;\r\n--brand-secondary: #dde5ed;\r\n--brand-accent: #211261;\r\n--brand-surface: #ffffff;\r\n--brand-text-on-primary: #ffffff;\r\n--brand-icon-bg: #dde5ed;\r\n}\r\n#brand-center[data-active-company=\"pyg\"] {\r\n--brand-primary: #323e48;\r\n--brand-secondary: #84c286;\r\n--brand-accent: #4a68af;\r\n--brand-surface: #ffffff;\r\n--brand-text-on-primary: #ffffff;\r\n--brand-icon-bg: #84c286;\r\n}\r\n#brand-center[data-active-company=\"eyser\"] {\r\n--brand-primary: #71962c;\r\n--brand-secondary: #8b6530;\r\n--brand-accent: #71962c;\r\n--brand-surface: #000000;\r\n--brand-text-on-primary: #ffffff;\r\n--brand-icon-bg: #e3ead5;\r\n}\r\n\/* Utilidades que consumen las variables, ya que Tailwind CDN\r\n     no genera clases para variables CSS. --brand-icon-bg es el\r\n     fondo del icono de las tarjetas de descarga al pasar el rat\u00f3n;\r\n     debe ser un tono claro para que el icono gris se siga viendo. Van prefijadas con\r\n     #brand-center para que el CSS del tema no las pise. *\/\r\n#brand-center .bg-brand-primary {\r\n    background-color: var(--brand-primary);\r\n}\r\n#brand-center .bg-brand-secondary {\r\n    background-color: var(--brand-secondary);\r\n}\r\n#brand-center .bg-brand-accent {\r\n    background-color: var(--brand-accent);\r\n}\r\n#brand-center .text-brand-primary {\r\n    color: var(--brand-primary);\r\n}\r\n#brand-center .text-brand-secondary {\r\n    color: var(--brand-secondary);\r\n}\r\n#brand-center .text-brand-accent {\r\n    color: var(--brand-accent);\r\n}\r\n#brand-center .border-brand-primary {\r\n    border-color: var(--brand-primary);\r\n}\r\n#brand-center .ring-brand-primary {\r\n    box-shadow: 0 0 0 2px var(--brand-primary);\r\n}\r\n\r\n  \/* Scrollbar elegante y discreta para el \u00e1rea de contenido *\/\r\n#brand-center #main-content::-webkit-scrollbar {\r\nwidth: 8px;\r\n}\r\n#brand-center #main-content::-webkit-scrollbar-track {\r\nbackground: transparent;\r\n}\r\n#brand-center #main-content::-webkit-scrollbar-thumb {\r\nbackground-color: #d1d5db;\r\nborder-radius: 9999px;\r\n}\r\n#brand-center #main-content::-webkit-scrollbar-thumb:hover {\r\nbackground-color: #9ca3af;\r\n}\r\n\/* -------------------------------------------------------------------\r\n     PLACEHOLDER DE LOGO (RESPALDO): si la URL de imagen del logo de una\r\n     marca falla al cargar, se sustituye por este monograma con el color\r\n     propio de esa marca, fijo, escrito directamente aqu\u00ed (no depende\r\n     de --brand-primary, que cambia seg\u00fan la empresa activa).\r\n     El sidebar ya NO usa logos ni placeholders, solo texto.\r\n     Si cambias el color principal de una marca en COMPANY_DATA (JS),\r\n     actualiza tambi\u00e9n el HEX aqu\u00ed para que coincida.\r\n     ------------------------------------------------------------------- *\/\r\n#brand-center .mini-logo-cps {\r\n    background-color: #211261;\r\n}\r\n#brand-center .mini-logo-pyg {\r\n    background-color: #323e48;\r\n}\r\n#brand-center .mini-logo-eyser {\r\n    background-color: #71962c;\r\n}\r\n\/* Placeholder de logo: monograma con iniciales sobre el color de marca.\r\n     Se usa autom\u00e1ticamente como respaldo si la URL de imagen del logo\r\n     no carga (ver atributo onerror en las etiquetas <img> del HTML). *\/\r\n#brand-center .logo-placeholder {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-family: 'Segoe UI', system-ui, sans-serif;\r\n    font-weight: 700;\r\n    letter-spacing: 0.02em;\r\n    color: #ffffff;\r\n    user-select: none;\r\n}\r\n\/* Logo real de marca (header de cada vista): el tama\u00f1o de la caja lo\r\n     fijan las clases de Tailwind en el propio <img> (ej. w-20 h-20).\r\n     Esta regla solo se encarga de que la imagen NUNCA se deforme ni\r\n     se recorte dentro de esa caja, conservando su proporci\u00f3n natural. *\/\r\n#brand-center .brand-logo-image {\r\n    object-fit: contain;\r\n}\r\n\/* Animaci\u00f3n de entrada suave al cambiar de vista *\/\r\n#brand-center .view-enter {\r\n    animation: viewFadeIn 400ms ease-out;\r\n}\r\n@keyframes viewFadeIn {\r\nfrom {\r\nopacity: 0;\r\ntransform: translateY(6px);\r\n}\r\nto {\r\nopacity: 1;\r\ntransform: translateY(0);\r\n}\r\n}\r\n\/* Toast de confirmaci\u00f3n de copiado *\/\r\n#brand-center #copy-toast {\r\n    transition: opacity 300ms ease, transform 300ms ease;\r\n}\r\n\/* Indicador activo del sidebar: barra lateral animada *\/\r\n#brand-center .sidebar-btn {\r\n    position: relative;\r\n    transition: background-color 300ms ease, color 300ms ease;\r\n}\r\n#brand-center .sidebar-btn::before {\r\n    content: '';\r\n    position: absolute;\r\n    left: 0;\r\n    top: 0;\r\n    bottom: 0;\r\n    width: 3px;\r\n    background-color: var(--brand-accent-indicator, transparent);\r\n    transform: scaleY(0);\r\n    transition: transform 300ms ease;\r\n}\r\n#brand-center .sidebar-btn[data-active=\"true\"]::before {\r\n    transform: scaleY(1);\r\n}\r\n\/* Sub-tabs de sucursal (solo CPS) *\/\r\n#brand-center .subtab-btn {\r\n    transition: color 300ms ease, border-color 300ms ease;\r\n    border-bottom: 2px solid transparent;\r\n}\r\n#brand-center .subtab-btn[data-active=\"true\"] {\r\n    border-bottom-color: var(--brand-primary);\r\n    color: var(--brand-primary);\r\n}\r\n\/* Tarjeta de color: ahora con 4 filas de datos (HEX, RGB, CMYK,\r\n     Pantone) en vez de solo HEX. Solo el HEX es clicable para copiar. *\/\r\n#brand-center .color-data-row {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    font-family: 'Calibri', system-ui, sans-serif;\r\n}\r\n#brand-center .color-data-label {\r\n    color: #9ca3af;\r\n    font-size: 0.7rem;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em;\r\n}\r\n#brand-center .color-data-value {\r\n    color: #4b5563;\r\n    font-size: 0.75rem;\r\n    font-weight: 600;\r\n}\r\n#brand-center .hex-copy-row {\r\n    cursor: pointer;\r\n    transition: background-color 300ms ease;\r\n}\r\n#brand-center .hex-copy-row:hover {\r\n    background-color: #f9fafb;\r\n}\r\n<\/style>\r\n<div id=\"brand-center\" data-active-company=\"cps\">\r\n<div class=\"flex\">\r\n\r\n  <!-- ============================================================\r\n       SIDEBAR DE ESCRITORIO\r\n       ============================================================ -->\r\n  <aside id=\"sidebar-desktop\" class=\"hidden lg:flex lg:flex-col w-72 bg-white border-r border-gray-200 flex-shrink-0\">\r\n    <div class=\"px-8 py-10\">\r\n      <p class=\"text-xs uppercase tracking-[0.2em] text-gray-400 font-secondary mb-1\">Resource Portal<\/p>\r\n      <h1 class=\"text-2xl font-bold text-gray-900 font-primary\">Brand Center<\/h1>\r\n    <\/div>\r\n    <nav id=\"sidebar-nav-desktop\" class=\"flex-1 px-4 space-y-1\" aria-label=\"Selector de empresa\">\r\n      <!-- Generado por JS desde COMPANY_DATA -->\r\n    <\/nav>\r\n    <div class=\"px-8 py-6 border-t border-gray-100\">\r\n      <p class=\"text-xs text-gray-400 font-secondary leading-relaxed\">  Corporate resources for internal use.<br\/>        <br\/>This website and the resources it contains are for the private and exclusive use of the staff of CPS Infraestructuras Movilidad y Medio Ambiente S.L., PYG Agua y Medio Ambiente Consultores S.L.U., and Eyser Ingenier\u00eda S.L. To ensure the security, privacy, and consistency of our corporate identity, please do not share or forward this link to anyone outside the organization.<\/p>\r\n    <\/div>\r\n  <\/aside>\r\n\r\n  <!-- ============================================================\r\n       BARRA SUPERIOR M\u00d3VIL \/ TABLET\r\n       ============================================================ -->\r\n  <header id=\"mobile-header\" class=\"lg:hidden fixed top-0 left-0 right-0 z-40 bg-white border-b border-gray-200\">\r\n    <div class=\"flex items-center justify-between px-4 py-3\">\r\n      <div class=\"flex items-center gap-2\">\r\n        <h1 class=\"text-lg font-bold text-gray-900\">Brand Center<\/h1>\r\n      <\/div>\r\n      <button id=\"mobile-menu-toggle\" type=\"button\" aria-label=\"Abrir men\u00fa\" aria-expanded=\"false\" class=\"p-2 rounded-md text-gray-600 hover:bg-gray-100 transition-colors duration-300\">\r\n      <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"icon-menu-open\" class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" stroke-width=\"1.75\">\r\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5M3.75 17.25h16.5\"><\/path>\r\n      <\/svg>\r\n      <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"icon-menu-close\" class=\"w-6 h-6 hidden\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" stroke-width=\"1.75\">\r\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\"><\/path>\r\n      <\/svg>\r\n      <\/button>\r\n    <\/div>\r\n\r\n    <!-- Panel colapsable m\u00f3vil: generado por JS -->\r\n    <nav id=\"mobile-menu-panel\" class=\"hidden border-t border-gray-100 px-4 py-3 space-y-1\" aria-label=\"Selector de empresa (m\u00f3vil)\"><\/nav>\r\n  <\/header>\r\n\r\n  <!-- ============================================================\r\n       CONTENIDO PRINCIPAL\r\n       ============================================================ -->\r\n  <main id=\"main-content\" class=\"flex-1 lg:pt-0 pt-16\">\r\n    <div class=\"max-w-6xl mx-auto px-6 sm:px-10 lg:px-16 pt-12 lg:pt-16 pb-24 lg:pb-32\">\r\n\r\n      <!-- Las 3 vistas de empresa (CPS, PYG, Eyser) se generan\r\n           \u00edntegramente por JavaScript a partir de COMPANY_DATA.\r\n           Ver secci\u00f3n \"1. DATOS EDITABLES\" en el <script> m\u00e1s abajo. -->\r\n      <div id=\"company-views-container\"><\/div>\r\n    <\/div>\r\n  <\/main>\r\n<\/div>\r\n\r\n<!-- ============================================================\r\n     TOAST DE COPIADO\r\n     ============================================================ -->\r\n<div id=\"copy-toast\" class=\"fixed bottom-8 left-1\/2 -translate-x-1\/2 z-50 opacity-0 pointer-events-none translate-y-2\">\r\n  <div class=\"bg-gray-900 text-white text-sm font-medium px-5 py-2.5 rounded-full shadow-lg flex items-center gap-2\">\r\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-4 h-4 text-emerald-400\" fill=\"none\" stroke=\"currentColor\" viewbox=\"0 0 24 24\" stroke-width=\"2\">\r\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path>\r\n    <\/svg>\r\n    <span id=\"copy-toast-text\">Copied!<\/span> <\/div>\r\n<\/div>\r\n<\/div>\r\n<script>\r\n(function () {\r\n  'use strict';\r\n\r\n  \/* =================================================================\r\n     \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\r\n     \u2551  1. DATOS EDITABLES                                           \u2551\r\n     \u2551                                                                \u2551\r\n     \u2551  Todo el contenido del sitio (colores, descargables, logos,   \u2551\r\n     \u2551  sucursales) vive aqu\u00ed, en estos objetos y arrays. El HTML de \u2551\r\n     \u2551  cada vista se genera autom\u00e1ticamente a partir de esto.       \u2551\r\n     \u2551                                                                \u2551\r\n     \u2551  Para a\u00f1adir algo nuevo: copia un bloque existente (las       \u2551\r\n     \u2551  llaves { ... } de un color o de una categor\u00eda de descarga),  \u2551\r\n     \u2551  p\u00e9galo justo debajo, separado por una coma, y cambia los     \u2551\r\n     \u2551  valores. No hace falta tocar nada m\u00e1s abajo en el archivo.   \u2551\r\n     \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d\r\n     ================================================================= *\/\r\n\r\n  \/* -----------------------------------------------------------------\r\n     1.1 CATEGOR\u00cdAS DE DESCARGA\r\n     Estas son las categor\u00edas que aparecen repetidas en cada\r\n     sucursal\/marca, con su icono y texto. Para a\u00f1adir una categor\u00eda\r\n     nueva (ej: \"Carteles\"), copia un bloque { ... } completo y p\u00e9galo\r\n     donde quieras dentro del array.\r\n\r\n     Campos:\r\n       key      -> identificador interno SIN espacios ni acentos.\r\n                   Se usa para emparejar esta categor\u00eda con su URL de\r\n                   descarga en cada sucursal\/marca (ver secci\u00f3n 1.2 y\r\n                   1.3 m\u00e1s abajo). Si a\u00f1ades una categor\u00eda nueva,\r\n                   inv\u00e9ntate una key nueva en min\u00fasculas (ej. 'carteles')\r\n                   y \u00fasala tambi\u00e9n al a\u00f1adir sus URLs por sucursal.\r\n       label    -> t\u00edtulo de la tarjeta\r\n       sublabel -> texto peque\u00f1o debajo del t\u00edtulo\r\n       icono    -> SVG (paths) de Heroicons, formato outline 24x24\r\n       infoOnly -> OPCIONAL. Si vale true, la tarjeta es solo\r\n                   informativa: no lleva enlace ni icono de descarga.\r\n       onlyIn   -> OPCIONAL. Si lo omites, la categor\u00eda aparece en\r\n                   TODAS las sucursales\/marcas (comportamiento normal).\r\n                   Si quieres que aparezca SOLO en sucursales concretas\r\n                   de CPS, a\u00f1ade un array con sus keys, por ejemplo:\r\n                   onlyIn: ['espana']  -> solo en CPS Espa\u00f1a\r\n                   onlyIn: ['espana', 'mexico'] -> solo en esas dos\r\n                   Nota: esto solo filtra sucursales de CPS. Para que\r\n                   una categor\u00eda no aparezca en PYG o Eyser (que no\r\n                   tienen sucursales), de momento hay que quitarle\r\n                   manualmente su key del downloadUrls de esa marca.\r\n     ----------------------------------------------------------------- *\/\r\n  var DOWNLOAD_CATEGORIES = [\r\n    {\r\n      key: 'logotipos',\r\n      label: 'Logotipo (JPG, PNG, PDF...)',\r\n      sublabel: 'Pack de marca',\r\n      icon: '<path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z\" \/>'\r\n    },\r\n    {\r\n      key: 'presentacion',\r\n      label: 'Plantilla PPTX Corporativa',\r\n      sublabel: 'Formato PPTX',\r\n      icon: '<path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 3.75v16.5h16.5M7.5 15.75l3-3 3 3 4.5-4.5M3.75 3.75h16.5a.75.75 0 01.75.75v15a.75.75 0 01-.75.75H3.75\" \/>'\r\n    },\r\n    {\r\n      key: 'word',\r\n      label: 'Documentos Modelo',\r\n      sublabel: 'Formato DOCX',\r\n      icon: '<path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z\" \/>'\r\n    },\r\n    {\r\n      key: 'firma',\r\n      label: 'Firma corporativa',\r\n      sublabel: 'Generador de firma de correo',\r\n      icon: '<path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10\" \/>'\r\n    },\r\n    {\r\n      key: 'fondo_ordenador',\r\n      label: 'Fondo de Pantalla',\r\n      sublabel: 'Ordenador (Escritorio)',\r\n      icon: '<path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25\" \/>'\r\n    },\r\n    {\r\n      key: 'fondo_movil',\r\n      label: 'Fondo para M\u00f3vil',\r\n      sublabel: 'Fondo de pantalla',\r\n      icon: '<path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3\" \/>'\r\n    },\r\n    {\r\n      key: 'fondo_teams',\r\n      label: 'Fondo para Videollamadas',\r\n      sublabel: 'Microsoft Teams',\r\n      icon: '<path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z\" \/>'\r\n    },\r\n    {\r\n      key: 'fondo_whatsapp',\r\n      label: 'Fondo de WhatsApp',\r\n      sublabel: 'Foto de perfil - WhatsApp',\r\n      icon: '<path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z\" \/>'\r\n    },\r\n    {\r\n      key: 'cabecera_linkedin',\r\n      label: 'Cabecera LinkedIn',\r\n      sublabel: 'Foto para cabecera',\r\n      icon: '<path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 8.25V18a2.25 2.25 0 0 0 2.25 2.25h13.5A2.25 2.25 0 0 0 21 18V8.25m-18 0V6a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 6v2.25m-18 0h18M5.25 6h.008v.008H5.25V6ZM7.5 6h.008v.008H7.5V6Zm2.25 0h.008v.008H9.75V6Z\" \/>'\r\n    },\r\n    {\r\n      key: 'logotipo_eng',\r\n      label: 'Logotipo ENG',\r\n      sublabel: '',\r\n      onlyIn: ['espana'],\r\n      icon: '<path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z\" \/>'\r\n    },\r\n    {\r\n      key: 'font',\r\n      label: 'Tipograf\u00edas: Segoe UI y Calibri',\r\n      sublabel: 'Ya instaladas en tu ordenador con Windows y Microsoft 365',\r\n      infoOnly: true,\r\n      icon: '<path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12\" \/>'\r\n    }\r\n    \/* Para a\u00f1adir una categor\u00eda nueva, copia desde la l\u00ednea \"{\" hasta\r\n       la l\u00ednea \"},\" de arriba, p\u00e9gala aqu\u00ed debajo, cambia key\/label\/\r\n       sublabel\/icon. Si no tienes un SVG a mano, puedes dejar el mismo\r\n       icono de otra categor\u00eda como provisional. RECUERDA: si a\u00f1ades\r\n       una categor\u00eda nueva aqu\u00ed, tienes que a\u00f1adir tambi\u00e9n su URL en\r\n       CADA sucursal\/marca en la secci\u00f3n 1.2 y 1.3, o esa tarjeta\r\n       aparecer\u00e1 sin enlace de descarga. *\/\r\n  ];\r\n\r\n  \/* -----------------------------------------------------------------\r\n     1.2 COLORES POR EMPRESA\r\n\r\n     Cada color lleva HEX (el \u00fanico editable a mano con seguridad),\r\n     y RGB \/ CMYK \/ Pantone ya calculados.\r\n\r\n     IMPORTANTE sobre estos 3 valores derivados:\r\n     - RGB: conversi\u00f3n matem\u00e1tica exacta del HEX. Siempre fiable.\r\n     - CMYK: f\u00f3rmula est\u00e1ndar de conversi\u00f3n (la misma que usan\r\n       Photoshop\/Illustrator sin perfil ICC). Aproximaci\u00f3n de trabajo,\r\n       no un valor certificado de imprenta.\r\n     - Pantone: el c\u00f3digo Pantone Coated visualmente M\u00c1S CERCANO,\r\n       calculado por distancia de color en espacio LAB contra el\r\n       cat\u00e1logo p\u00fablico Pantone Solid Coated. NO es el Pantone oficial\r\n       de la marca (no existe documentado en ning\u00fan manual). El campo\r\n       \"distancia\" indica cu\u00e1n cercano es el match: por debajo de 3 es\r\n       muy fiable, entre 3 y 6 es razonable, por encima de 6 es solo\r\n       orientativo.\r\n\r\n     Si cambias un HEX aqu\u00ed, los valores RGB\/CMYK\/Pantone que aparecen\r\n     no se recalculan solos (esto es HTML+JS est\u00e1tico, no tiene un\r\n     motor de color en vivo). Si cambias un color de marca, d\u00edmelo y\r\n     te recalculo los 3 valores derivados correctamente.\r\n     ----------------------------------------------------------------- *\/\r\n  var COMPANY_DATA = {\r\n\r\n    cps: {\r\n      name: 'CPS',\r\n      sidebarSubtitle: '4 sucursales',\r\n      tagline: 'Recursos corporativos',\r\n      logoUrl: 'https:\/\/cps.es\/wp-content\/uploads\/brand-center\/cps.png', \/\/ <-- pega aqu\u00ed la URL p\u00fablica del logo de CPS (PNG\/SVG)\r\n      logoInitials: 'CPS',\r\n      colors: [\r\n        { label: 'Principal',     hex: '#211261', rgb: '33, 18, 97',    cmyk: '100, 100, 32, 23', pantone: 'PANTONE 273 C', pantoneDist: 2.0 },\r\n        { label: 'Secundario',    hex: '#B8D8EB', rgb: '184, 216, 235', cmyk: '32, 6, 6, 8',    pantone: 'PANTONE 290 C', pantoneDist: 1.0 },\r\n        { label: 'Apoyo',        hex: '#DDE5ED', rgb: '221, 229, 237',  cmyk: '10, 2, 0, 0', pantone: 'PANTONE 656 C', pantoneDist: 5.3 },\r\n        \/* Para a\u00f1adir un color nuevo a CPS, copia un bloque { ... }\r\n           completo de arriba, p\u00e9galo aqu\u00ed, cambia label y hex, y\r\n           dime el HEX para que te calcule rgb\/cmyk\/pantone exactos. *\/\r\n      ],\r\n      branches: [\r\n        {\r\n          key: 'espana',\r\n          label: 'CPS Espa\u00f1a',\r\n          downloadUrls: {\r\n            logotipos: 'https:\/\/drive.google.com\/uc?export=download&id=1sA78EwwapiANEwVgM2oRLhDH95raOlGo',\r\n            logotipo_eng:'https:\/\/drive.google.com\/uc?export=download&id=1sYfQsq7iIZ0V4IzPDRD0ifmZQoYrQnkm',\r\n            word: 'https:\/\/drive.google.com\/uc?export=download&id=1VTDhiSHWeb-bYxyaX4aKvbjIZuxzoA2a',\r\n            firma: 'https:\/\/drive.google.com\/uc?export=download&id=1AvNkCPma4zyfSdS1Y5ZzvIsozIUA1g3M',\r\n            presentacion: 'https:\/\/drive.google.com\/uc?export=download&id=1zUuyZe5RTPHI6gHO3CHaSQuQusNKGOwL',\r\n            fondo_ordenador: 'https:\/\/drive.google.com\/uc?export=download&id=133rptyBYzVPdXnBAryopG2-rYKCD7nEh',\r\n            fondo_movil: 'https:\/\/drive.google.com\/uc?export=download&id=1w_pSkdCrduA3UuY4iMQthDHtMqQmEfyb',\r\n            fondo_teams: 'https:\/\/drive.google.com\/uc?export=download&id=1EOiR8AW8CHxeYxq7TRyqE8rpkIL6t0V8',\r\n            fondo_whatsapp: 'https:\/\/drive.google.com\/uc?export=download&id=1YTD1TUDWuYu7r8cNP4Gf_EAva-AD2LMU',\r\n            cabecera_linkedin: 'https:\/\/drive.google.com\/uc?export=download&id=1J4_nnppcbkxhB6SQUyaYqgu97k60pmm9',\r\n            dossier: 'https:\/\/drive.google.com\/uc?export=download&id=1mth1uUNUxkGSTlIZrk8rSjy3rEa03jAF'\r\n          }\r\n        },\r\n        {\r\n          key: 'colombia',\r\n          label: 'CPS Colombia',\r\n          downloadUrls: {\r\n            logotipos: 'https:\/\/drive.google.com\/uc?export=download&id=1z9xI4f29CazHpZ-mH6GG51sconbJPG0l',\r\n            presentacion: 'https:\/\/drive.google.com\/uc?export=download&id=1ECJV63ZiGlhLOMIGxmkJk8ULAl5md15L',\r\n            fondo_ordenador: 'https:\/\/drive.google.com\/uc?export=download&id=1YcJNvDp9_o__sHv6iGgEvD6se4IQNhpX',\r\n            fondo_movil: 'https:\/\/drive.google.com\/uc?export=download&id=1XYNh7DS3gaEd4loU9cZ0AqWrWqQOBjKD',\r\n            fondo_teams: 'https:\/\/drive.google.com\/uc?export=download&id=1oIxpyIO1OIxXibVajU0YQ5dJcmWjyIPc',\r\n            fondo_whatsapp: 'https:\/\/drive.google.com\/uc?export=download&id=1V85BmEk1t1i68njHYF9CuRpa9u-EN4xE',\r\n            cabecera_linkedin: 'https:\/\/drive.google.com\/uc?export=download&id=1pDvL-DlwvYI-ywUmP5IZjif7RbUOctoI',\r\n            word: 'https:\/\/drive.google.com\/uc?export=download&id=18puC0uRDPFYvmr7tqB-cGlvHwP8QuKKb',\r\n            firma: 'https:\/\/drive.google.com\/uc?export=download&id=1n7LoUUoRBl3ONLLISfTu2crZvQ7BpSPG'\r\n          }\r\n        },\r\n        {\r\n          key: 'peru',\r\n          label: 'CPS Per\u00fa',\r\n          downloadUrls: {\r\n            logotipos: 'https:\/\/drive.google.com\/uc?export=download&id=1Ugb0xkpzR_-8bACsnW84s03j26rNo_qM',\r\n            presentacion: 'https:\/\/drive.google.com\/uc?export=download&id=1e2s7K4soSOVhjvssmxnQRPp5BcObQ5FV',\r\n            fondo_ordenador: 'https:\/\/drive.google.com\/uc?export=download&id=14jsx4bvDJyA1D-gtSqfML7BnvsUio_N_',\r\n            fondo_movil: 'https:\/\/drive.google.com\/uc?export=download&id=1TRCQm6HJnFMA1Fi9mjDpamDbaKAGRohY',\r\n            fondo_teams: 'https:\/\/drive.google.com\/uc?export=download&id=1sYvfes2AMBTe-LkAZwC1Mh4teWXe9S5T',\r\n            fondo_whatsapp: 'https:\/\/drive.google.com\/uc?export=download&id=19-pFvgo8yQo9oNhjLdbN8__GkRfh7V-L',\r\n            cabecera_linkedin: 'https:\/\/drive.google.com\/uc?export=download&id=1_YcKeTcbDXRuiWcHYO3bWOyO5ZXsQU09',\r\n            word: 'https:\/\/drive.google.com\/uc?export=download&id=1fQbeZTBOUNmh_kY9RrbvPIhxE-XVrWQ0',\r\n            firma: 'https:\/\/drive.google.com\/uc?export=download&id=15Y7BjXqYAUFDUv0kojgEbo8fbbEsFALy'\r\n          }\r\n        },\r\n        {\r\n          key: 'mexico',\r\n          label: 'CPS M\u00e9xico',\r\n          downloadUrls: {\r\n            logotipos: 'https:\/\/drive.google.com\/uc?export=download&id=1LSYOvstDus_MfU44DV4xAsuN6AB5VlDS',\r\n            presentacion: 'https:\/\/drive.google.com\/uc?export=download&id=1QKTbKiWBgvza4n_2I-x9Pm5gvBZ9PXws',\r\n            fondo_ordenador: 'https:\/\/drive.google.com\/uc?export=download&id=16IpsyF1xhcdQHW3qwk6MkKYCAzqdKnDl',\r\n            fondo_movil: 'https:\/\/drive.google.com\/uc?export=download&id=1GeL6itE9xaw5CJitMCGv5INnSioRbt9i',\r\n            fondo_teams: 'https:\/\/drive.google.com\/uc?export=download&id=1uOPUJ8IE6JA6qy7C-a1Ke1CWL4wZ001q',\r\n            fondo_whatsapp: 'https:\/\/drive.google.com\/uc?export=download&id=1DhwiTeXDigL9hc50UcXaW7NWgyvrzpfu',\r\n            cabecera_linkedin: 'https:\/\/drive.google.com\/uc?export=download&id=1D7zl977f8xopni5HQ3WJPEJH6tx016Fo',\r\n            word: 'https:\/\/drive.google.com\/uc?export=download&id=18puC0uRDPFYvmr7tqB-cGlvHwP8QuKKb',\r\n            firma: 'https:\/\/drive.google.com\/uc?export=download&id=1XDXDgomqx5hKtoSOyd2yoFQqZrvabceW'\r\n          }\r\n        }\r\n        \/* Para a\u00f1adir una sucursal nueva, copia un bloque { key: '...',\r\n           label: '...', downloadUrls: { ... } } completo de arriba y\r\n           p\u00e9galo aqu\u00ed. La key debe ir en min\u00fasculas y sin espacios ni\r\n           acentos (se usa internamente). El objeto downloadUrls debe\r\n           tener una l\u00ednea por cada key que exista en DOWNLOAD_CATEGORIES\r\n           (secci\u00f3n 1.1, m\u00e1s arriba); si a\u00f1ades una categor\u00eda nueva ah\u00ed,\r\n           a\u00f1ade tambi\u00e9n su key aqu\u00ed en cada sucursal. *\/\r\n      ]\r\n    },\r\n\r\n    pyg: {\r\n      name: 'PYG',\r\n      sidebarSubtitle: 'Agua y Medio Ambiente',\r\n      tagline: 'Recursos corporativos',\r\n      logoUrl: 'https:\/\/cps.es\/wp-content\/uploads\/brand-center\/pyg.png', \/\/ <-- pega aqu\u00ed la URL p\u00fablica del logo de PYG (PNG\/SVG)\r\n      logoInitials: 'PYG',\r\n      colors: [\r\n        { label: 'Principal',    hex: '#84C286', rgb: '132, 194, 134', cmyk: '32, 0, 31, 24', pantone: 'PANTONE 346 C',  pantoneDist: 9.8 },\r\n        { label: 'Secundario',     hex: '#323E48', rgb: '50, 62, 72',    cmyk: '31, 14, 0, 72', pantone: 'PANTONE 432 C',  pantoneDist: 0.8 },\r\n        { label: 'Apoyo',        hex: '#4A68AF', rgb: '74, 104, 175',  cmyk: '58, 41, 0, 31', pantone: 'PANTONE 7456 C', pantoneDist: 5.3 }\r\n      ],\r\n      branches: [], \/\/ PYG no tiene sub-sucursales\r\n      downloadUrls: {\r\n        logotipos: 'https:\/\/drive.google.com\/uc?export=download&id=10brPLASftlca6FHHgl6ASyFH9yJWwfJx',\r\n        presentacion: 'https:\/\/drive.google.com\/uc?export=download&id=1mpyDmlybQ-U7OBAGfzay7q5we3wv_ZLm',\r\n        fondo_ordenador: 'https:\/\/drive.google.com\/uc?export=download&id=1TOobLhzvgUiUZ4dQ4SavGD24xnu82FBN',\r\n        fondo_movil: 'https:\/\/drive.google.com\/uc?export=download&id=1fZB75jpPBY8PfsOaT3e9v3GbUD8CR540',\r\n        fondo_teams: 'https:\/\/drive.google.com\/uc?export=download&id=1eAxq4ff-AatvGFDyGryld32S4QIg_r2L',\r\n        fondo_whatsapp: 'https:\/\/drive.google.com\/uc?export=download&id=18W4Z3NPsigU8gOOoFpOqBNuM8tFQx5Hd',\r\n        cabecera_linkedin: 'https:\/\/drive.google.com\/uc?export=download&id=1DUnXgt1Hy5JnYfJ-gA7wNdd63nba8j7y',\r\n        word: 'https:\/\/drive.google.com\/uc?export=download&id=1d2XKujG3gh2xzpZYg8UqID_wVWfLWBkr',\r\n        firma: 'https:\/\/drive.google.com\/uc?export=download&id=1AvNkCPma4zyfSdS1Y5ZzvIsozIUA1g3M'\r\n      }\r\n    },\r\n\r\n    eyser: {\r\n      name: 'Eyser Ingenier\u00eda',\r\n      sidebarSubtitle: 'Ingenier\u00eda',\r\n      tagline: 'Recursos corporativos',\r\n      logoUrl: 'https:\/\/cps.es\/wp-content\/uploads\/brand-center\/eyser.png', \/\/ <-- pega aqu\u00ed la URL p\u00fablica del logo de Eyser (PNG\/SVG)\r\n      logoInitials: 'EY',\r\n      colors: [\r\n        { label: 'Principal',  hex: '#71962C', rgb: '113, 150, 44',  cmyk: '25, 0, 71, 41', pantone: 'PANTONE 370 C',  pantoneDist: 4.6 },\r\n        { label: 'Secundario', hex: '#8B6530', rgb: '139, 101, 48',  cmyk: '0, 27, 65, 45', pantone: 'PANTONE 7559 C', pantoneDist: 5.5 },\r\n        { label: 'Apoyo',      hex: '#000000', rgb: '0, 0, 0',       cmyk: '0, 0, 0, 100',  pantone: 'Negro puro', pantoneDist: 5.5 }\r\n      ],\r\n      branches: [], \/\/ Eyser no tiene sub-sucursales\r\n      downloadUrls: {\r\n        logotipos: 'https:\/\/drive.google.com\/uc?export=download&id=1I-ljBWmyAhU_L_LtsK-oXz_5Zg_yHU93',\r\n        presentacion: 'https:\/\/drive.google.com\/uc?export=download&id=1hRH-g3rbq4zH2sD7HEsarOwDEz2K3zpu',\r\n        fondo_ordenador: 'https:\/\/drive.google.com\/uc?export=download&id=1EZVaabC2tpwH6FLlMFqvWcwLZiaqcByq',\r\n        fondo_movil: 'https:\/\/drive.google.com\/uc?export=download&id=1Lv7RZ18GLlIwKB-UhcJvHlxrD3no-kEw',\r\n        fondo_teams: 'https:\/\/drive.google.com\/uc?export=download&id=1zWckaNYEXjCp8hPgdETwSEkGyFIiraen',\r\n        fondo_whatsapp: 'https:\/\/drive.google.com\/uc?export=download&id=1po-RntDoXXPIT6Udf0xW0etQ53ZOoKSr',\r\n        cabecera_linkedin: 'https:\/\/drive.google.com\/uc?export=download&id=1euhFgJRcXDNtdhdhNjLVIE1yFiM53hKq',\r\n        word: 'https:\/\/drive.google.com\/uc?export=download&id=1i0z67B3VkvgQTrH6YjTn9wO4QB-Mp2UW',\r\n        firma: 'https:\/\/drive.google.com\/uc?export=download&id=1AvNkCPma4zyfSdS1Y5ZzvIsozIUA1g3M'\r\n      }\r\n    }\r\n\r\n    \/* Para a\u00f1adir una EMPRESA nueva (ej: una cuarta marca), copia\r\n       todo un bloque \"claveempresa: { ... },\" desde \"cps:\" hasta su\r\n       cierre \"},\" y p\u00e9galo aqu\u00ed. Despu\u00e9s a\u00f1ade su clave al array\r\n       COMPANY_ORDER justo abajo, para que aparezca en el sidebar. *\/\r\n  };\r\n\r\n  \/\/ Orden de aparici\u00f3n en el sidebar. Si a\u00f1ades una empresa nueva\r\n  \/\/ arriba, a\u00f1ade tambi\u00e9n su clave aqu\u00ed en la posici\u00f3n que quieras.\r\n  var COMPANY_ORDER = ['cps', 'pyg', 'eyser'];\r\n\r\n\r\n  \/* =================================================================\r\n     \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\r\n     \u2551  A PARTIR DE AQU\u00cd: L\u00d3GICA DEL SITIO                           \u2551\r\n     \u2551  No necesitas tocar nada de lo que sigue para a\u00f1adir          \u2551\r\n     \u2551  colores, categor\u00edas de descarga, sucursales o marcas.        \u2551\r\n     \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d\r\n     ================================================================= *\/\r\n\r\n  var DOWNLOAD_CARD_ICON_CLOSE =\r\n    '<svg class=\"w-5 h-5 text-gray-300 group-hover:text-brand-primary transition-colors duration-300\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" stroke-width=\"1.75\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5 7.5 12M12 16.5V3\" \/><\/svg>';\r\n\r\n  \/* Tarjeta de descarga: el grosor y color del borde en reposo se\r\n     controlan aqu\u00ed con \"border-2 border-gray-200\" (2px, gris medio).\r\n     Para hacerlo m\u00e1s o menos grueso, cambia \"border-2\" por \"border\"\r\n     (1px) o \"border-4\" (4px). Para cambiar el color en reposo, cambia\r\n     \"border-gray-200\" por otro tono de la escala de grises de Tailwind\r\n     (gray-100 m\u00e1s sutil, gray-300 m\u00e1s marcado). El color al pasar el\r\n     rat\u00f3n ya usa el color principal de la marca activa (hover:border-brand-primary),\r\n     eso no hace falta tocarlo. *\/\r\n  function buildInfoCard(category) {\r\n    return (\r\n      '<div class=\"rounded-xl border-2 border-gray-200 p-5 flex items-center gap-4\">' +\r\n        '<span class=\"w-11 h-11 rounded-lg bg-white flex items-center justify-center flex-shrink-0\">' +\r\n          '<svg class=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" stroke-width=\"1.75\">' + category.icon + '<\/svg>' +\r\n        '<\/span>' +\r\n        '<span class=\"flex-1\">' +\r\n          '<span class=\"block text-sm font-semibold text-gray-800\">' + category.label + '<\/span>' +\r\n          '<span class=\"block text-xs text-gray-400 font-secondary\">' + category.sublabel + '<\/span>' +\r\n        '<\/span>' +\r\n      '<\/div>'\r\n    );\r\n  }\r\n\r\n  function buildDownloadCard(category, downloadUrls) {\r\n    if (category.infoOnly) return buildInfoCard(category);\r\n    var url = (downloadUrls && downloadUrls[category.key]) || '#';\r\n    \/\/ Mientras la URL siga siendo '#' (sin rellenar), el enlace no hace\r\n    \/\/ nada y se queda en la misma pesta\u00f1a. En cuanto pegues una URL\r\n    \/\/ real de Google Drive, se abre autom\u00e1ticamente en pesta\u00f1a nueva\r\n    \/\/ (target=\"_blank\"), para que el usuario no salga del Brand Center.\r\n    var isRealUrl = url !== '#';\r\n    var targetAttr = isRealUrl ? ' target=\"_blank\" rel=\"noopener\"' : '';\r\n    return (\r\n      '<a href=\"' + url + '\"' + targetAttr + ' class=\"download-card group rounded-xl border-2 border-gray-200 p-5 flex items-center gap-4 hover:border-brand-primary hover:shadow-md transition-all duration-300\">' +\r\n        '<span class=\"w-11 h-11 rounded-lg bg-white flex items-center justify-center flex-shrink-0 group-hover:bg-brand-icon-bg transition-colors duration-300\">' +\r\n          '<svg class=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" stroke-width=\"1.75\">' + category.icon + '<\/svg>' +\r\n        '<\/span>' +\r\n        '<span class=\"flex-1\">' +\r\n          '<span class=\"block text-sm font-semibold text-gray-800\">' + category.label + '<\/span>' +\r\n          '<span class=\"block text-xs text-gray-400 font-secondary\">' + category.sublabel + '<\/span>' +\r\n        '<\/span>' +\r\n        DOWNLOAD_CARD_ICON_CLOSE +\r\n      '<\/a>'\r\n    );\r\n  }\r\n\r\n  function buildDownloadGrid(downloadUrls, branchKey) {\r\n    var html = '<div class=\"grid sm:grid-cols-2 lg:grid-cols-3 gap-5\">';\r\n    DOWNLOAD_CATEGORIES.forEach(function (category) {\r\n      \/\/ Si la categor\u00eda tiene \"onlyIn\" definido, solo se muestra cuando\r\n      \/\/ el branchKey actual est\u00e1 en esa lista. Sin \"onlyIn\", se muestra\r\n      \/\/ siempre (comportamiento normal, sin cambios para el resto).\r\n      var isRestricted = Array.isArray(category.onlyIn);\r\n      var allowedHere = !isRestricted || (branchKey && category.onlyIn.indexOf(branchKey) !== -1);\r\n      if (!allowedHere) return;\r\n      html += buildDownloadCard(category, downloadUrls);\r\n    });\r\n    html += '<\/div>';\r\n    return html;\r\n  }\r\n\r\n  function buildPantoneLabel(color) {\r\n    if (color.pantoneDist === 0) {\r\n      \/\/ Caso blanco\/negro puro: el texto ya lo explica todo\r\n      return '<span class=\"color-data-value text-right\" style=\"font-size:0.68rem; font-weight:500; color:#9ca3af; max-width:60%; line-height:1.3;\">' + color.pantone + '<\/span>';\r\n    }\r\n    var confidence = color.pantoneDist <= 3 ? 'muy cercano' : (color.pantoneDist <= 6 ? 'cercano' : 'orientativo');\r\n    return (\r\n      '<span class=\"color-data-value text-right\">' + color.pantone +\r\n      '<\/span>'\r\n    );\r\n  }\r\n\r\n  function buildColorCard(color) {\r\n    return (\r\n      '<div class=\"color-swatch-card rounded-xl border-2 border-gray-100 overflow-hidden hover:shadow-md transition-shadow duration-300\">' +\r\n        '<div class=\"h-20\" style=\"background-color:' + color.hex + '; ' + (color.hex.toLowerCase() === '#ffffff' ? 'border-bottom:1px solid #f3f4f6;' : '') + '\"><\/div>' +\r\n        '<div class=\"px-4 pt-3 pb-2\">' +\r\n          '<p class=\"text-sm font-semibold text-gray-800 mb-2\">' + color.label + '<\/p>' +\r\n        '<\/div>' +\r\n        '<button type=\"button\" data-copy-hex=\"' + color.hex + '\" class=\"hex-copy-row w-full flex items-center justify-between px-4 py-2 border-t border-gray-50 text-left\">' +\r\n          '<span class=\"color-data-label\">Hex<\/span>' +\r\n          '<span class=\"color-data-value flex items-center gap-1.5\">' + color.hex +\r\n            '<svg class=\"w-3.5 h-3.5 text-gray-300\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" stroke-width=\"1.75\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75\" \/><\/svg>' +\r\n          '<\/span>' +\r\n        '<\/button>' +\r\n        '<div class=\"color-data-row px-4 py-2 border-t border-gray-50\">' +\r\n          '<span class=\"color-data-label\">Rgb<\/span><span class=\"color-data-value\">' + color.rgb + '<\/span>' +\r\n        '<\/div>' +\r\n        '<div class=\"color-data-row px-4 py-2 border-t border-gray-50\">' +\r\n          '<span class=\"color-data-label\">Cmyk<\/span><span class=\"color-data-value\">' + color.cmyk + '<\/span>' +\r\n        '<\/div>' +\r\n        '<div class=\"color-data-row px-4 py-2 border-t border-gray-50 items-start\">' +\r\n          '<span class=\"color-data-label pt-0.5\">Pantone<\/span>' + buildPantoneLabel(color) +\r\n        '<\/div>' +\r\n      '<\/div>'\r\n    );\r\n  }\r\n\r\n  function buildLogoMarkup(company, sizeClasses) {\r\n    var initials = company.logoInitials;\r\n    var companyKey = Object.keys(COMPANY_DATA).filter(function (k) { return COMPANY_DATA[k] === company; })[0];\r\n    if (company.logoUrl) {\r\n      \/\/ Sin caja ni fondo: el logo se muestra \"desnudo\", limitado en\r\n      \/\/ altura por sizeClasses para no descontrolar el layout. Si la\r\n      \/\/ imagen falla en cargar, el onerror la sustituye por el\r\n      \/\/ placeholder con iniciales (ese s\u00ed lleva caja, para que las\r\n      \/\/ iniciales se lean bien sobre cualquier fondo de p\u00e1gina).\r\n      return (\r\n        '<img decoding=\"async\" src=\"' + company.logoUrl + '\" alt=\"Logo ' + company.name + '\" class=\"' + sizeClasses + ' flex-shrink-0 brand-logo-image\" ' +\r\n        'onerror=\"this.outerHTML='div class=&quot;' + sizeClasses + ' logo-placeholder mini-logo-' + companyKey + ' rounded-2xl flex-shrink-0 shadow-sm text-2xl&quot;>' + initials + '<\/div>'.replace(\/\"\/g, '&quot;') + '';\">'\r\n      );\r\n    }\r\n    return '<div class=\"' + sizeClasses + ' logo-placeholder mini-logo-' + companyKey + ' rounded-2xl flex-shrink-0 shadow-sm text-2xl\">' + initials + '<\/div>';\r\n  }\r\n\r\n  function buildTypographyBlock() {\r\n    return (\r\n      '<div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">' +\r\n        '<div class=\"rounded-xl border border-gray-100 p-6\">' +\r\n          '<p class=\"text-xs text-gray-400 font-secondary mb-3 uppercase tracking-wider\">Primaria \u00b7 Segoe UI<\/p>' +\r\n          '<div class=\"flex items-baseline gap-2 mb-1\">' +\r\n            '<p style=\"font-family:'Segoe UI', system-ui, sans-serif;\" class=\"text-2xl font-bold text-gray-900\">Aa Bb Cc Dd Ee Ff Gg 123456<\/p>' +\r\n            '<span class=\"text-xs text-gray-400 font-secondary\">Bold<\/span>' +\r\n          '<\/div>' +\r\n          '<div class=\"flex items-baseline gap-2 mb-1\">' +\r\n            '<p style=\"font-family:'Segoe UI', system-ui, sans-serif;\" class=\"text-2xl font-normal text-gray-900\">Aa Bb Cc Dd Ee Ff Gg 123456<\/p>' +\r\n            '<span class=\"text-xs text-gray-400 font-secondary\">Regular<\/span>' +\r\n          '<\/div>' +\r\n\r\n        '<\/div>' +\r\n        '<div class=\"rounded-xl border border-gray-100 p-6\">' +\r\n          '<p class=\"text-xs text-gray-400 font-secondary mb-3 uppercase tracking-wider\">Secundaria \u00b7 Calibri<\/p>' +\r\n          '<div class=\"flex items-baseline gap-2 mb-1\">' +\r\n            '<p style=\"font-family:'Calibri', system-ui, sans-serif;\" class=\"text-2xl font-bold text-gray-900\">Aa Bb Cc Dd Ee Ff Gg 123456<\/p>' +\r\n            '<span class=\"text-xs text-gray-400 font-secondary\">Bold<\/span>' +\r\n          '<\/div>' +\r\n          '<div class=\"flex items-baseline gap-2 mb-1\">' +\r\n            '<p style=\"font-family:'Calibri', system-ui, sans-serif;\" class=\"text-2xl font-normal text-gray-900\">Aa Bb Cc Dd Ee Ff Gg 123456<\/p>' +\r\n            '<span class=\"text-xs text-gray-400 font-secondary\">Regular<\/span>' +\r\n          '<\/div>' +\r\n\r\n        '<\/div>' +\r\n      '<\/div>'\r\n    );\r\n  }\r\n\r\n  function buildCompanyView(companyKey) {\r\n    var company = COMPANY_DATA[companyKey];\r\n    var hasBranches = company.branches.length > 0;\r\n\r\n    \/* Header de marca: texto a la izquierda, logo a la derecha, gracias\r\n       a \"justify-between\" en el contenedor flex. El tama\u00f1o del logo es\r\n       RESPONSIVE: 'w-20 h-20' (80px) en m\u00f3vil, y a partir de tablet\r\n       (prefijo sm:) sube a 'sm:w-40 sm:h-40' (160px, el doble). Esto\r\n       evita que el logo grande se desborde en pantallas estrechas.\r\n       Para cambiar el tama\u00f1o de escritorio, edita los n\u00fameros despu\u00e9s\r\n       de \"sm:\" (cada unidad de Tailwind = 4px). Para cambiar tambi\u00e9n\r\n       el tama\u00f1o en m\u00f3vil, edita los n\u00fameros SIN el prefijo \"sm:\". *\/\r\n    var headerInner =\r\n      '<div class=\"flex items-center justify-between gap-4 sm:gap-6 mb-12\">' +\r\n        '<div>' +\r\n          '<h2 class=\"text-4xl font-bold text-gray-900 font-primary tracking-tight\">' + company.name + '<\/h2>' +\r\n          '<p class=\"text-gray-500 font-secondary mt-1\">' + company.tagline + '<\/p>' +\r\n        '<\/div>' +\r\n        buildLogoMarkup(company, 'w-20 h-20 sm:w-40 sm:h-40') +\r\n      '<\/div>';\r\n\r\n    var colorsHtml =\r\n      '<div class=\"mb-14\">' +\r\n        '<h3 class=\"text-sm font-semibold uppercase tracking-wider text-gray-400 mb-5 font-secondary\">Paleta de Colores<\/h3>' +\r\n        '<div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-' + Math.min(company.colors.length, 4) + ' gap-4\">' +\r\n          company.colors.map(buildColorCard).join('') +\r\n        '<\/div>' +\r\n      '<\/div>';\r\n\r\n    var typographyHtml =\r\n      '<div class=\"mb-14\">' +\r\n        '<h3 class=\"text-sm font-semibold uppercase tracking-wider text-gray-400 mb-5 font-secondary\">Tipograf\u00eda<\/h3>' +\r\n        buildTypographyBlock() +\r\n      '<\/div>';\r\n\r\n    var downloadsHtml;\r\n    if (hasBranches) {\r\n      var tabsHtml =\r\n        '<div class=\"mb-8 border-b border-gray-200\">' +\r\n          '<nav class=\"flex gap-8 overflow-x-auto\" aria-label=\"Selector de sucursal ' + company.name + '\" data-branch-tabs=\"' + companyKey + '\">' +\r\n            company.branches.map(function (branch, i) {\r\n              return '<button type=\"button\" data-cps-branch-btn=\"' + branch.key + '\" data-active=\"' + (i === 0 ? 'true' : 'false') + '\" class=\"subtab-btn pb-3 text-sm font-semibold whitespace-nowrap ' + (i === 0 ? '' : 'text-gray-400') + '\">' + branch.label + '<\/button>';\r\n            }).join('') +\r\n          '<\/nav>' +\r\n        '<\/div>';\r\n\r\n      var panelsHtml = company.branches.map(function (branch, i) {\r\n        return (\r\n          '<div data-cps-branch-panel=\"' + branch.key + '\" class=\"' + (i === 0 ? 'view-enter' : 'hidden') + '\">' +\r\n            '<h4 class=\"text-lg font-bold text-gray-900 mb-6\">' + branch.label + ' \u00b7 Descargables<\/h4>' +\r\n            buildDownloadGrid(branch.downloadUrls, branch.key) +\r\n          '<\/div>'\r\n        );\r\n      }).join('');\r\n\r\n      downloadsHtml = tabsHtml + panelsHtml;\r\n    } else {\r\n      downloadsHtml =\r\n        '<div>' +\r\n          '<h3 class=\"text-sm font-semibold uppercase tracking-wider text-gray-400 mb-5 font-secondary\">Repositorio de Descargables<\/h3>' +\r\n          buildDownloadGrid(company.downloadUrls) +\r\n        '<\/div>';\r\n    }\r\n\r\n    var bodyContent = colorsHtml + typographyHtml + downloadsHtml;\r\n\r\n    return (\r\n      '<section data-company-view=\"' + companyKey + '\" class=\"' + (companyKey === COMPANY_ORDER[0] ? 'view-enter' : 'hidden') + '\">' +\r\n        headerInner +\r\n        bodyContent +\r\n      '<\/section>'\r\n    );\r\n  }\r\n\r\n  function renderAllCompanyViews() {\r\n    var container = document.getElementById('company-views-container');\r\n    var html = '';\r\n    COMPANY_ORDER.forEach(function (key) {\r\n      html += buildCompanyView(key);\r\n    });\r\n    container.innerHTML = html;\r\n  }\r\n\r\n  \/* =================================================================\r\n     2. SIDEBAR Y MEN\u00da M\u00d3VIL (generados desde COMPANY_DATA)\r\n     ================================================================= *\/\r\n  function buildSidebarButton(companyKey, mobile) {\r\n    var company = COMPANY_DATA[companyKey];\r\n    var attr = mobile ? 'data-company-btn-mobile' : 'data-company-btn';\r\n    var isActive = companyKey === COMPANY_ORDER[0];\r\n    return (\r\n      '<button type=\"button\" ' + attr + '=\"' + companyKey + '\" data-active=\"' + (isActive ? 'true' : 'false') + '\" ' +\r\n      'class=\"sidebar-btn w-full flex items-center px-4 ' + (mobile ? 'py-3' : 'py-3.5') + ' rounded-lg text-left font-medium text-gray-700 hover:bg-gray-100' + (isActive ? ' bg-gray-50' : '') + '\">' +\r\n        (mobile\r\n          ? '<span class=\"text-sm font-semibold\">' + company.name + '<\/span>'\r\n          : '<span class=\"flex flex-col\"><span class=\"text-sm font-semibold\">' + company.name + '<\/span><span class=\"hidden text-xs text-gray-400 font-secondary\">' + company.sidebarSubtitle + '<\/span><\/span>'\r\n        ) +\r\n      '<\/button>'\r\n    );\r\n  }\r\n\r\n  function renderSidebars() {\r\n    var desktopNav = document.getElementById('sidebar-nav-desktop');\r\n    var mobileNav = document.getElementById('mobile-menu-panel');\r\n    var desktopHtml = '';\r\n    var mobileHtml = '';\r\n    COMPANY_ORDER.forEach(function (key) {\r\n      desktopHtml += buildSidebarButton(key, false);\r\n      mobileHtml += buildSidebarButton(key, true);\r\n    });\r\n    desktopNav.innerHTML = desktopHtml;\r\n    mobileNav.innerHTML = mobileHtml;\r\n  }\r\n\r\n  \/* =================================================================\r\n     3. NAVEGACI\u00d3N ENTRE EMPRESAS\r\n     ================================================================= *\/\r\n  function setActiveCompany(company) {\r\n    if (COMPANY_ORDER.indexOf(company) === -1) return;\r\n\r\n    document.getElementById('brand-center').setAttribute('data-active-company', company);\r\n\r\n    COMPANY_ORDER.forEach(function (c) {\r\n      var view = document.querySelector('[data-company-view=\"' + c + '\"]');\r\n      if (!view) return;\r\n      if (c === company) {\r\n        view.classList.remove('hidden');\r\n        view.classList.add('view-enter');\r\n      } else {\r\n        view.classList.add('hidden');\r\n        view.classList.remove('view-enter');\r\n      }\r\n    });\r\n\r\n    document.querySelectorAll('[data-company-btn]').forEach(function (btn) {\r\n      var isActive = btn.getAttribute('data-company-btn') === company;\r\n      btn.setAttribute('data-active', isActive ? 'true' : 'false');\r\n      btn.classList.toggle('bg-gray-50', isActive);\r\n    });\r\n\r\n    document.querySelectorAll('[data-company-btn-mobile]').forEach(function (btn) {\r\n      var isActive = btn.getAttribute('data-company-btn-mobile') === company;\r\n      btn.setAttribute('data-active', isActive ? 'true' : 'false');\r\n      btn.classList.toggle('bg-gray-50', isActive);\r\n    });\r\n\r\n    var main = document.getElementById('main-content');\r\n    if (main) main.scrollTop = 0;\r\n  }\r\n\r\n  function attachCompanyNavListeners() {\r\n    document.querySelectorAll('[data-company-btn]').forEach(function (btn) {\r\n      btn.addEventListener('click', function () {\r\n        setActiveCompany(btn.getAttribute('data-company-btn'));\r\n      });\r\n    });\r\n    document.querySelectorAll('[data-company-btn-mobile]').forEach(function (btn) {\r\n      btn.addEventListener('click', function () {\r\n        setActiveCompany(btn.getAttribute('data-company-btn-mobile'));\r\n        closeMobileMenu();\r\n      });\r\n    });\r\n  }\r\n\r\n  \/* =================================================================\r\n     4. SUB-TABS DE SUCURSAL (cualquier empresa con branches.length > 0)\r\n     ================================================================= *\/\r\n  function setActiveBranch(branchKey) {\r\n    document.querySelectorAll('[data-cps-branch-btn]').forEach(function (btn) {\r\n      var isActive = btn.getAttribute('data-cps-branch-btn') === branchKey;\r\n      btn.setAttribute('data-active', isActive ? 'true' : 'false');\r\n      btn.classList.toggle('text-gray-400', !isActive);\r\n    });\r\n    document.querySelectorAll('[data-cps-branch-panel]').forEach(function (panel) {\r\n      var isActive = panel.getAttribute('data-cps-branch-panel') === branchKey;\r\n      if (isActive) {\r\n        panel.classList.remove('hidden');\r\n        panel.classList.add('view-enter');\r\n      } else {\r\n        panel.classList.add('hidden');\r\n        panel.classList.remove('view-enter');\r\n      }\r\n    });\r\n  }\r\n\r\n  function attachBranchTabListeners() {\r\n    document.querySelectorAll('[data-cps-branch-btn]').forEach(function (btn) {\r\n      btn.addEventListener('click', function () {\r\n        setActiveBranch(btn.getAttribute('data-cps-branch-btn'));\r\n      });\r\n    });\r\n  }\r\n\r\n  \/* =================================================================\r\n     5. MEN\u00da M\u00d3VIL (HAMBURGUESA)\r\n     ================================================================= *\/\r\n  var mobileToggle = document.getElementById('mobile-menu-toggle');\r\n  var mobilePanel = document.getElementById('mobile-menu-panel');\r\n  var iconOpen = document.getElementById('icon-menu-open');\r\n  var iconClose = document.getElementById('icon-menu-close');\r\n\r\n  function openMobileMenu() {\r\n    mobilePanel.classList.remove('hidden');\r\n    iconOpen.classList.add('hidden');\r\n    iconClose.classList.remove('hidden');\r\n    mobileToggle.setAttribute('aria-expanded', 'true');\r\n  }\r\n\r\n  function closeMobileMenu() {\r\n    mobilePanel.classList.add('hidden');\r\n    iconOpen.classList.remove('hidden');\r\n    iconClose.classList.add('hidden');\r\n    mobileToggle.setAttribute('aria-expanded', 'false');\r\n  }\r\n\r\n  if (mobileToggle) {\r\n    mobileToggle.addEventListener('click', function () {\r\n      var isOpen = mobileToggle.getAttribute('aria-expanded') === 'true';\r\n      if (isOpen) { closeMobileMenu(); } else { openMobileMenu(); }\r\n    });\r\n  }\r\n\r\n  \/* =================================================================\r\n     6. CLIC PARA COPIAR HEX\r\n     ================================================================= *\/\r\n  var toast = document.getElementById('copy-toast');\r\n  var toastText = document.getElementById('copy-toast-text');\r\n  var toastTimeoutId = null;\r\n\r\n  function showToast(message) {\r\n    toastText.textContent = message;\r\n    toast.classList.remove('opacity-0', 'translate-y-2');\r\n    toast.classList.add('opacity-100', 'translate-y-0');\r\n    if (toastTimeoutId) clearTimeout(toastTimeoutId);\r\n    toastTimeoutId = setTimeout(function () {\r\n      toast.classList.remove('opacity-100', 'translate-y-0');\r\n      toast.classList.add('opacity-0', 'translate-y-2');\r\n    }, 1800);\r\n  }\r\n\r\n  function copyTextFallback(text) {\r\n    var textarea = document.createElement('textarea');\r\n    textarea.value = text;\r\n    textarea.style.position = 'fixed';\r\n    textarea.style.left = '-9999px';\r\n    document.body.appendChild(textarea);\r\n    textarea.select();\r\n    try { document.execCommand('copy'); } catch (err) { console.error('No se pudo copiar el texto: ', err); }\r\n    document.body.removeChild(textarea);\r\n  }\r\n\r\n  function copyHexToClipboard(hex) {\r\n    if (navigator.clipboard && window.isSecureContext) {\r\n      navigator.clipboard.writeText(hex).then(function () {\r\n        showToast('\u00a1Copiado! ' + hex);\r\n      }).catch(function () {\r\n        copyTextFallback(hex);\r\n        showToast('\u00a1Copiado! ' + hex);\r\n      });\r\n    } else {\r\n      copyTextFallback(hex);\r\n      showToast('\u00a1Copiado! ' + hex);\r\n    }\r\n  }\r\n\r\n  function attachCopyListeners() {\r\n    document.querySelectorAll('[data-copy-hex]').forEach(function (swatch) {\r\n      swatch.addEventListener('click', function () {\r\n        copyHexToClipboard(swatch.getAttribute('data-copy-hex'));\r\n      });\r\n    });\r\n  }\r\n\r\n  \/* =================================================================\r\n     7. INICIALIZACI\u00d3N\r\n     ================================================================= *\/\r\n  renderAllCompanyViews();\r\n  renderSidebars();\r\n  attachCompanyNavListeners();\r\n  attachBranchTabListeners();\r\n  attachCopyListeners();\r\n\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Resource Portal Brand Center Corporate resources for internal use. This website and the resources it contains are for the private and exclusive [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-20772","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cps.es\/en\/wp-json\/wp\/v2\/pages\/20772","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cps.es\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cps.es\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cps.es\/en\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/cps.es\/en\/wp-json\/wp\/v2\/comments?post=20772"}],"version-history":[{"count":3,"href":"https:\/\/cps.es\/en\/wp-json\/wp\/v2\/pages\/20772\/revisions"}],"predecessor-version":[{"id":20787,"href":"https:\/\/cps.es\/en\/wp-json\/wp\/v2\/pages\/20772\/revisions\/20787"}],"wp:attachment":[{"href":"https:\/\/cps.es\/en\/wp-json\/wp\/v2\/media?parent=20772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}