/* ============================================================================ DESIGN TOKENS — Sistema de identidad GCP / R CAPS ---------------------------------------------------------------------------- Arquitectura: 1. :root → NÚCLEO COMPARTIDO (espaciado, radios, sombras, escala tipográfica, transiciones). Neutro de marca. 2. [data-brand="gcp"] → Capa de marca GCP (comercial, marca madre). 3. [data-brand="rcaps"] → Capa de marca R Caps (línea premium, marca hija). Uso: ... o por sección:

...

Los componentes consumen SOLO variables semánticas (--color-primario, --fuente-titulo, etc.), así el cambio de marca es un solo atributo. Trazabilidad: [EXTRAÍDO] = valor muestreado de material real de la marca (logos, catálogo 2025, redes, piezas). HEX tomados píxel a píxel. [PROPUESTA] = valor propuesto para completar el sistema, pendiente de aprobación del cliente. No es identidad oficial existente. Sin dependencias. CSS puro. Cargar las fuentes aparte (Google Fonts): Oswald, Poppins, Michroma (GCP) · Marcellus, Jost (R Caps) ============================================================================ */ /* ============================================================ 1. NÚCLEO COMPARTIDO [PROPUESTA — base estructural común] ============================================================ */ :root { /* ---- Espaciado (base 4px) ---- */ --espacio-3xs: 0.25rem; /* 4px */ --espacio-2xs: 0.5rem; /* 8px */ --espacio-xs: 0.75rem; /* 12px */ --espacio-sm: 1rem; /* 16px */ --espacio-md: 1.5rem; /* 24px */ --espacio-lg: 2rem; /* 32px */ --espacio-xl: 3rem; /* 48px */ --espacio-2xl: 4rem; /* 64px */ --espacio-3xl: 6rem; /* 96px */ /* ---- Escala tipográfica (ratio 1.25 — tercia mayor) ---- */ --texto-xs: 0.75rem; /* 12px — legales, notas */ --texto-sm: 0.875rem; /* 14px — secundario, meta */ --texto-base: 1rem; /* 16px — cuerpo */ --texto-md: 1.25rem; /* 20px — destacado */ --texto-lg: 1.5625rem; /* 25px — h4 */ --texto-xl: 1.953rem; /* 31px — h3 */ --texto-2xl: 2.441rem; /* 39px — h2 */ --texto-3xl: 3.052rem; /* 49px — h1 */ --texto-display: clamp(2.8rem, 1.5rem + 5vw, 4.75rem); /* héroes */ --interlineado-compacto: 1.15; --interlineado-titulo: 1.2; --interlineado-cuerpo: 1.6; /* ---- Radios (escala estructural; el radio SEMÁNTICO lo fija cada marca) ---- */ --radio-xs: 4px; --radio-sm: 8px; --radio-md: 12px; --radio-lg: 20px; --radio-pill: 999px; /* ---- Sombras ---- */ --sombra-sm: 0 1px 3px rgba(20, 18, 16, 0.10); --sombra-md: 0 4px 14px rgba(20, 18, 16, 0.12); --sombra-lg: 0 14px 40px rgba(20, 18, 16, 0.18); /* ---- Movimiento ---- */ --transicion-rapida: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transicion-media: 280ms cubic-bezier(0.4, 0, 0.2, 1); /* ---- Otros ---- */ --ancho-contenido: 72rem; /* 1152px */ --grosor-borde: 1.5px; } /* ============================================================ 2. CAPA DE MARCA — GCP (marca madre, registro comercial) ============================================================ */ [data-brand="gcp"] { /* ---- Color: primarios [EXTRAÍDO] ---- */ --color-tinta: #1F1F1F; /* [EXTRAÍDO] wordmark GCP y sello del catálogo */ --color-tinta-suave: #282828; /* [EXTRAÍDO] paneles del logo y fondos de piezas */ --color-fondo: #F8F8F8; /* [EXTRAÍDO] fondo del logotipo */ --color-superficie: #FFFFFF; /* [EXTRAÍDO] mármol blanco del catálogo 2025 */ --color-primario: #F58634; /* [EXTRAÍDO] naranja del logo GCP */ --color-primario-fuerte: #F06800; /* [EXTRAÍDO] naranja widget de sedes */ --color-primario-vivo: #FF7818; /* [EXTRAÍDO] naranja historias destacadas */ --color-primario-tenue: #FDE7D4; /* [PROPUESTA] tinte al 15% para fondos suaves */ /* ---- Color: secundarios de la tríada del logo [EXTRAÍDO] ---- */ --color-azul: #00AFF0; /* [EXTRAÍDO] cuadro azul del logo */ --color-verde: #00A85A; /* [EXTRAÍDO] cuadro verde del logo */ --color-ambar: #E89800; /* [EXTRAÍDO] etiquetas catálogo 2025 */ /* ---- Color: neutros [PROPUESTA — derivados de la tinta extraída] ---- */ --color-gris-700: #4A4A4A; --color-gris-500: #767472; --color-gris-300: #C9C6C3; --color-gris-150: #E9E7E4; /* ---- Color: estados ---- */ --color-exito: #00A85A; /* [EXTRAÍDO] reutiliza el verde del logo */ --color-info: #00AFF0; /* [EXTRAÍDO] reutiliza el azul del logo */ --color-advertencia: #E89800; /* [EXTRAÍDO] reutiliza el ámbar catálogo */ --color-error: #C43C3C; /* [PROPUESTA] rojo funcional (afín al rojo de avisos usado en redes). Ajustado desde #D64545: aquel se quedaba corto de contraste tanto en etiqueta como en los mensajes de error sobre blanco. */ /* ---- Semánticos de componente ---- */ --color-accion: var(--color-primario); --color-accion-hover: var(--color-primario-fuerte); --color-accion-texto: #FFFFFF; --color-foco: var(--color-azul); /* ---- Tipografía [EXTRAÍDO-APROXIMADO: equivalentes Google Fonts más fieles al catálogo 2025 y al logotipo] ---- */ --fuente-titulo: "Oswald", "Arial Narrow", sans-serif; /* títulos condensados del catálogo */ --fuente-cuerpo: "Poppins", "Segoe UI", sans-serif; /* sans redondeada del logo */ --fuente-marca: "Michroma", "Oswald", sans-serif; /* eco del wordmark técnico GCP — SOLO acentos de marca, nunca UI */ --peso-titulo: 600; --peso-cuerpo: 400; --peso-negrita: 600; --tracking-titulo: 0.01em; --transformacion-titulo: uppercase; /* el catálogo titula siempre en mayúsculas */ /* ---- Forma [PROPUESTA] Botones y etiquetas con arista casi viva (2px): el redondeo suave genérico se leía como plantilla. Las tarjetas conservan el radio amable para no endurecer la lectura. ---- */ --radio-boton: 2px; --radio-etiqueta: 2px; --radio-tarjeta: var(--radio-md); --radio-campo: var(--radio-xs); /* ---- Sombra de marca ---- */ --sombra-accion: 0 6px 18px rgba(240, 104, 0, 0.30); /* [PROPUESTA] halo naranja */ } /* ============================================================ 3. CAPA DE MARCA — R CAPS (línea premium, marca hija) ------------------------------------------------------------ Del material real solo existen: logo (monocromo negro/blanco, serif tipo Trajan en el sello) y fotos de producto en gamuza y cuero (línea Caballista). Todo lo demás es PROPUESTA. ============================================================ */ [data-brand="rcaps"] { /* ---- Color: base monocroma [EXTRAÍDO] ---- */ --color-tinta: #1F1F1F; /* [EXTRAÍDO] negro del sello R Caps */ --color-tinta-suave: #2A2627; /* [PROPUESTA] negro cálido derivado */ --color-fondo: #141112; /* [PROPUESTA] fondo oscuro premium */ --color-superficie: #201D1E; /* [PROPUESTA] superficie elevada */ --color-claro: #FEFEFE; /* [EXTRAÍDO] blanco del ave del logo */ /* ---- Color: acentos cálidos [PROPUESTA — tomados de las fotos de producto en gamuza/cuero de la línea Caballista] ---- */ --color-primario: #C9A961; /* [PROPUESTA] champán / oro suave */ --color-primario-fuerte: #B08F45; /* [PROPUESTA] champán profundo */ --color-cuero: #8B5E3C; /* [PROPUESTA] cuero / coñac */ --color-gamuza: #D9C6A5; /* [PROPUESTA] beige gamuza */ /* ---- Color: neutros cálidos [PROPUESTA] ---- */ --color-gris-700: #57504C; --color-gris-500: #857C76; --color-gris-300: #BBB2AA; --color-gris-150: #EFE9DF; /* ---- Color: estados [PROPUESTA — versión sobria para fondo oscuro] ---- */ --color-exito: #7FA981; --color-info: #8AA7B8; --color-advertencia: #C9A961; --color-error: #C46A5A; /* ---- Semánticos de componente ---- */ --color-accion: var(--color-primario); --color-accion-hover: var(--color-primario-fuerte); --color-accion-texto: #141112; --color-foco: var(--color-gamuza); /* ---- Tipografía [PROPUESTA — Marcellus es el equivalente Google Fonts más cercano al serif tipo Trajan del sello circular] ---- */ --fuente-titulo: "Marcellus", "Georgia", serif; --fuente-cuerpo: "Jost", "Segoe UI", sans-serif; --fuente-marca: "Marcellus", serif; --peso-titulo: 400; /* el serif premium no necesita bold */ --peso-cuerpo: 400; --peso-negrita: 500; --tracking-titulo: 0.08em; /* eco del tracking amplio de PREMIUM */ --transformacion-titulo: uppercase; /* ---- Forma [PROPUESTA — carácter premium: aristas serenas] ---- */ --radio-boton: var(--radio-xs); --radio-etiqueta: var(--radio-xs); --radio-tarjeta: var(--radio-sm); --radio-campo: var(--radio-xs); /* ---- Sombra de marca ---- */ --sombra-accion: 0 8px 24px rgba(201, 169, 97, 0.22); /* [PROPUESTA] halo champán */ }