{"id":19711,"date":"2026-06-25T11:48:37","date_gmt":"2026-06-25T09:48:37","guid":{"rendered":"https:\/\/cps.es\/cps-pyg-eyser-brand-center\/"},"modified":"2026-06-25T12:49:36","modified_gmt":"2026-06-25T10:49:36","slug":"cps-pyg-eyser-brand-center","status":"publish","type":"page","link":"https:\/\/cps.es\/en\/cps-pyg-eyser-brand-center\/","title":{"rendered":"Brand Center"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\r\n\r\n\r\n\r\n\r\n\r\nBrand Center | CPS \u00b7 PYG \u00b7 Eyser<\/title>\r\n<script src=\"https:\/\/cdn.tailwindcss.com\/3.4.3\"><\/script>\r\n<script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n primary: ['Segoe UI', 'Calibri', 'system-ui', 'sans-serif'],\r\n secondary: ['Calibri', 'Segoe UI', 'system-ui', 'sans-serif'],\r\n },\r\n transitionDuration: {\r\n '300': '300ms',\r\n }\r\n }\r\n }\r\n }\r\n<\/script>\r\n<style>\r\n\/* ===================================================================\r\n PREVENCI\u00d3N DE PARPADEO (FOUC)\r\n Mantiene la pantalla invisible unos milisegundos hasta que \r\n Tailwind termina de compilar, mostrando la web con un fundido.\r\n =================================================================== *\/\r\nbody {\r\n opacity: 0;\r\n animation: bcFadeIn 0.4s ease-out forwards;\r\n animation-delay: 0.2s;\r\n}\r\n@keyframes bcFadeIn {\r\n to { opacity: 1; }\r\n}\r\n\/* Fallback cr\u00edtico: si Tailwind CDN no carga (red restringida, sin\r\n conexi\u00f3n, proxy corporativo), la navegaci\u00f3n entre empresas depende\r\n de esta \u00fanica regla para no mostrar todas las marcas apiladas. *\/\r\n.hidden {\r\n display: none !important;\r\n}\r\n\r\n\/* Fallback cr\u00edtico de layout responsive: replica el comportamiento\r\n de \"hidden lg:flex\" \/ \"lg:hidden\" de Tailwind por si el CDN no\r\n carga. Sin esto, el sidebar de escritorio y la barra m\u00f3vil\r\n depender\u00edan enteramente de una red externa para mostrarse. *\/\r\n@media (min-width: 1024px) {\r\n#sidebar-desktop {\r\n display: flex !important;\r\n}\r\n#mobile-header {\r\n display: none !important;\r\n}\r\n}\r\n\r\n@media (max-width: 1023px) {\r\n#sidebar-desktop {\r\n display: none !important;\r\n}\r\n#mobile-header {\r\n display: block !important;\r\n}\r\n}\r\n\/* ===================================================================\r\n VARIABLES CSS DE MARCA\r\n Cada empresa redefine estas variables sobre el elemento <body>\r\n 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:root {\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}\r\nbody[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}\r\nbody[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}\r\nbody[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}\r\n\/* Utilidades que consumen las variables, ya que Tailwind CDN\r\n no puede generar clases din\u00e1micas para valores arbitrarios en runtime *\/\r\n.bg-brand-primary {\r\n background-color: var(--brand-primary);\r\n}\r\n.bg-brand-secondary {\r\n background-color: var(--brand-secondary);\r\n}\r\n.bg-brand-accent {\r\n background-color: var(--brand-accent);\r\n}\r\n.text-brand-primary {\r\n color: var(--brand-primary);\r\n}\r\n.text-brand-secondary {\r\n color: var(--brand-secondary);\r\n}\r\n.text-brand-accent {\r\n color: var(--brand-accent);\r\n}\r\n.border-brand-primary {\r\n border-color: var(--brand-primary);\r\n}\r\n.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 #main-content::-webkit-scrollbar {\r\nwidth: 8px;\r\n}\r\n#main-content::-webkit-scrollbar-track {\r\nbackground: transparent;\r\n}\r\n#main-content::-webkit-scrollbar-thumb {\r\nbackground-color: #d1d5db;\r\nborder-radius: 9999px;\r\n}\r\n#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.mini-logo-cps {\r\n background-color: #211261;\r\n}\r\n.mini-logo-pyg {\r\n background-color: #323e48;\r\n}\r\n.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.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-logo-image {\r\n object-fit: contain;\r\n}\r\n\/* Animaci\u00f3n de entrada suave al cambiar de vista *\/\r\n.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#copy-toast {\r\n transition: opacity 300ms ease, transform 300ms ease;\r\n}\r\n\/* Indicador activo del sidebar: barra lateral animada *\/\r\n.sidebar-btn {\r\n position: relative;\r\n transition: background-color 300ms ease, color 300ms ease;\r\n}\r\n.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.sidebar-btn[data-active=\"true\"]::before {\r\n transform: scaleY(1);\r\n}\r\n\/* Sub-tabs de sucursal (solo CPS) *\/\r\n.subtab-btn {\r\n transition: color 300ms ease, border-color 300ms ease;\r\n border-bottom: 2px solid transparent;\r\n}\r\n.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.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.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.color-data-value {\r\n color: #4b5563;\r\n font-size: 0.75rem;\r\n font-weight: 600;\r\n}\r\n.hex-copy-row {\r\n cursor: pointer;\r\n transition: background-color 300ms ease;\r\n}\r\n.hex-copy-row:hover {\r\n background-color: #f9fafb;\r\n}\r\n<\/style>\r\n\r\n\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 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 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 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<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 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: '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',\r\n sublabel: 'Seguoe UI y Calibri',\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:\/\/www.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 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 font: 'https:\/\/drive.google.com\/uc?export=download&id=1nMcRcUxOtg1SOVApsZSXZVNanBf1J0Je'\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 font: 'https:\/\/drive.google.com\/uc?export=download&id=1nMcRcUxOtg1SOVApsZSXZVNanBf1J0Je'\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 font: 'https:\/\/drive.google.com\/uc?export=download&id=1nMcRcUxOtg1SOVApsZSXZVNanBf1J0Je'\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 font: 'https:\/\/drive.google.com\/uc?export=download&id=1nMcRcUxOtg1SOVApsZSXZVNanBf1J0Je'\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:\/\/www.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 font: 'https:\/\/drive.google.com\/uc?export=download&id=1nMcRcUxOtg1SOVApsZSXZVNanBf1J0Je'\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:\/\/www.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 font: 'https:\/\/drive.google.com\/uc?export=download&id=1nMcRcUxOtg1SOVApsZSXZVNanBf1J0Je'\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 buildDownloadCard(category, downloadUrls) {\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-secondary 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\" ' + 'onerror=\"this.outerHTML='div class="' + sizeClasses + ' logo-placeholder mini-logo-' + companyKey + ' rounded-2xl flex-shrink-0 shadow-sm text-2xl">' + initials + '<\/div>'.replace(\/\"\/g, '"') + '';\">'\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') + '\" ' + '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.body.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\r\n\r\n<\/div>\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>Brand Center | CPS \u00b7 PYG \u00b7 Eyser Resource Portal Brand Center Corporate resources for internal use. This website and the resources […]<\/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-19711","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cps.es\/en\/wp-json\/wp\/v2\/pages\/19711","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=19711"}],"version-history":[{"count":8,"href":"https:\/\/cps.es\/en\/wp-json\/wp\/v2\/pages\/19711\/revisions"}],"predecessor-version":[{"id":19755,"href":"https:\/\/cps.es\/en\/wp-json\/wp\/v2\/pages\/19711\/revisions\/19755"}],"wp:attachment":[{"href":"https:\/\/cps.es\/en\/wp-json\/wp\/v2\/media?parent=19711"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}