/* ========================================================================== EBEN PATRIMONIAL — DESIGN TOKENS Fuente de verdad del sistema visual. -------------------------------------------------------------------------- FUENTE NORMATIVA UNICA "Eben Patrimonial · Manual de Marca · Brand Identity Guidelines · Edicion 2025" (12 paginas), seccion 05 · COLOR Y TIPOGRAFIA. Copia de referencia del proyecto: _marca/manual-marca-2025.pdf Cualquier manual anterior a este queda SIN EFECTO. En particular, la paleta Onyx #1A1A1A / Oro #C8A96E / Crema #F5F0E8 y el icono con la letra "E" pertenecen a un borrador equivocado y no deben reaparecer en ningun archivo. REGLA: ningun archivo del sitio debe declarar un color, tamaño de fuente o espaciado literal. Todo consume una variable de este archivo. Las landings dedicadas por propiedad (/providencia, /marsala, ...) importan SOLO este archivo mas components.css y heredan el sistema completo. Version 2.0 · Julio 2026 · alineado al Manual Edicion 2025 ========================================================================== */ :root { /* ====================================================================== 01 · COLOR — PALETA DE MARCA (literal, del manual) No usar estas variables directamente en componentes. Usar los roles semanticos de la seccion 02. ====================================================================== */ /* --- Los tres colores oficiales. El manual no define ningun otro. --- */ --brand-navy: #0E1932; /* Azul Marino Profundo · Pantone 2767 C RGB 14·25·50 · fondo principal */ --brand-oro: #C5A24A; /* Oro Patrimonial · Pantone 871 C Met RGB 197·162·74 · acento e icono */ --brand-marfil: #F0EDE8; /* Marfil Calido · Pantone 9183 C RGB 240·237·232 · fondos claros */ /* Blanco puro: autorizado por el manual como fondo oficial junto con Navy y Marfil ("Fondos oficiales: Navy, Crema o Blanco puro"). */ --brand-blanco: #FFFFFF; /* --- Derivados tecnicos --- NO estan en el manual. Son necesarios para la capa web (superficies elevadas, bordes, texto secundario, estados). Todos se construyen sobre los tres oficiales variando luminosidad o alfa; ninguno introduce un matiz nuevo. Cada uno lleva anotado el contraste que lo justifica. */ --brand-navy-950: #0A1224; /* fondo mas profundo que Navy */ --brand-navy-800: #16223C; /* superficie elevada sobre Navy */ --brand-navy-700: #24314D; /* borde sobre Navy */ --brand-navy-600: #33445F; /* texto secundario sobre claro · 8.43 */ --brand-azul-tenue: #5A6B87; /* texto atenuado sobre claro · 4.63 */ --brand-azul-claro: #94A1B6; /* texto atenuado sobre Navy · 6.67 */ --brand-oro-oscuro: #7E672F; /* oro legible sobre claro · 4.65 */ --brand-oro-claro: #E0CB92; /* oro suave sobre Navy · 10.90 */ --brand-marfil-palido: #F7F5F2; /* fondo de pagina */ --brand-oro-a12: rgba(197, 162, 74, 0.12); /* velo / borde tenue */ --brand-oro-a24: rgba(197, 162, 74, 0.24); --brand-oro-a40: rgba(197, 162, 74, 0.40); --brand-navy-a08: rgba(14, 25, 50, 0.08); --brand-navy-a16: rgba(14, 25, 50, 0.16); --brand-navy-a60: rgba(14, 25, 50, 0.60); --brand-navy-a88: rgba(14, 25, 50, 0.88); /* ====================================================================== 02 · COLOR — ROLES SEMANTICOS Esto es lo que consumen los componentes. ⚠ RESTRICCIONES DE CONTRASTE VERIFICADAS (WCAG 2.1) El manual define la paleta pero no su uso accesible. Medido sobre los colores del Manual Edicion 2025: Oro #C5A24A sobre Marfil #F0EDE8 ...... 2.08 FALLA Oro #C5A24A sobre Blanco .............. 2.43 FALLA Oro #C5A24A sobre Navy #0E1932 ........ 7.18 AAA Oro Claro #E0CB92 sobre Navy ......... 10.90 AAA Marfil sobre Navy .................... 14.94 AAA Navy sobre Marfil .................... 14.94 AAA Navy sobre Blanco .................... 17.45 AAA Navy sobre relleno Oro ................ 7.18 AAA Navy-600 #33445F sobre Marfil ......... 8.43 AAA Azul Tenue #5A6B87 sobre Marfil ....... 4.63 AA Oro Oscuro #7E672F sobre Marfil ....... 4.65 AA (texto normal) Azul Claro #94A1B6 sobre Navy ......... 6.67 AA CONSECUENCIA, y es la regla mas importante del sistema: el Oro NUNCA es color de texto sobre fondo claro. Sobre claro el Oro vive como relleno de boton, filete, borde, subrayado o icono decorativo. El texto de acento sobre claro es Oro Oscuro #7E672F. Nota: con la paleta anterior el Oro Oscuro solo alcanzaba 3.52 y estaba restringido a ≥24px. Con la paleta definitiva llega a 4.65, asi que ya sirve tambien para texto de tamaño normal. La restriccion estructural del Oro puro, en cambio, no cambia: 1.98 antes, 2.08 ahora, falla igual. ====================================================================== */ /* --- Superficies --- */ --surface-base: var(--brand-marfil-palido);/* fondo de pagina */ --surface-raised: var(--brand-blanco); /* tarjetas, formularios */ --surface-sunken: var(--brand-marfil); /* bandas alternas */ --surface-inverse: var(--brand-navy); /* hero, footer, CTA band */ --surface-inverse-alt: var(--brand-navy-800); /* tarjeta sobre oscuro */ --surface-accent: var(--brand-oro); /* relleno de acento */ /* --- Texto sobre superficie clara --- */ --text-primary: var(--brand-navy); /* 14.94 AAA */ --text-secondary: var(--brand-navy-600); /* 8.43 AAA */ --text-muted: var(--brand-azul-tenue); /* 4.63 AA */ --text-accent: var(--brand-oro-oscuro); /* 4.65 AA */ /* --- Texto sobre superficie oscura --- */ --text-on-inverse: var(--brand-marfil); /* 14.94 AAA */ --text-on-inverse-muted: var(--brand-azul-claro);/* 6.67 AA */ --text-on-inverse-accent: var(--brand-oro); /* 7.18 AAA */ /* --- Texto sobre relleno de acento (oro) --- */ --text-on-accent: var(--brand-navy); /* 7.18 AAA */ /* --- Bordes y filetes --- */ --border-hairline: var(--brand-navy-a08); /* filete estandar claro */ --border-strong: var(--brand-navy-a16); --border-accent: var(--brand-oro-a40); /* filete oro decorativo */ --border-on-inverse: var(--brand-navy-700); --border-accent-inverse: var(--brand-oro-a40); /* --- Foco (accesibilidad de teclado) --- */ --focus-ring: var(--brand-oro-oscuro); --focus-ring-inverse: var(--brand-oro); --focus-ring-width: 2px; --focus-ring-offset: 3px; /* --- Estados de sistema (formularios) --- */ --state-error: #A32D2D; /* 6.4 sobre blanco */ --state-success: #2F6B4F; /* 5.5 sobre blanco */ /* ====================================================================== 03 · TIPOGRAFIA — FAMILIAS Del manual: Cormorant Garamond (titulares/logo), Montserrat (cuerpo/UI), Playfair Display (pull quotes y enfasis editorial). ⚠ Cormorant Garamond tiene trazo muy fino y altura-x baja. En movil es ilegible por debajo de ~24px. Regla del sistema: Cormorant solo de --fs-2xl hacia arriba. Todo lo demas es Montserrat. Esto no contradice el manual: el manual la asigna a titulos y portadas, no a texto corrido. ====================================================================== */ --font-display: 'Cormorant Garamond', 'Cambria', 'Times New Roman', serif; --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-editorial:'Playfair Display', 'Cormorant Garamond', Georgia, serif; /* Pesos autorizados (solo los que cargamos) */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; /* ====================================================================== 04 · TIPOGRAFIA — ESCALA FLUIDA clamp(minimo_movil, preferido, maximo_desktop). Movil 360px → 1440px. ====================================================================== */ --fs-overline: 0.6875rem; /* 11px fijo */ --fs-2xs: 0.75rem; /* 12px */ --fs-xs: 0.8125rem; /* 13px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: clamp(1rem, 0.98rem + 0.10vw, 1.0625rem); /* 16 → 17 */ --fs-lg: clamp(1.0625rem, 1.01rem + 0.28vw, 1.1875rem); /* 17 → 19 */ --fs-xl: clamp(1.25rem, 1.15rem + 0.50vw, 1.5rem); /* 20 → 24 */ --fs-2xl: clamp(1.625rem, 1.42rem + 1.02vw, 2.25rem); /* 26 → 36 */ --fs-3xl: clamp(2rem, 1.63rem + 1.85vw, 3rem); /* 32 → 48 */ --fs-4xl: clamp(2.375rem, 1.79rem + 2.93vw, 4rem); /* 38 → 64 */ --fs-hero: clamp(2.625rem, 1.85rem + 3.85vw, 4.75rem); /* 42 → 76 */ /* Alturas de linea — mas cerradas conforme crece el tamaño */ --lh-tight: 1.08; /* display grande */ --lh-snug: 1.22; /* titulos medianos */ --lh-normal: 1.45; /* subtitulos, lead */ --lh-relaxed: 1.68; /* cuerpo de texto */ /* Tracking */ --ls-tighter: -0.02em; /* display serif grande */ --ls-tight: -0.01em; --ls-normal: 0; --ls-wide: 0.04em; --ls-wider: 0.12em; /* overlines */ --ls-widest: 0.30em; /* wordmark "PATRIMONIAL" */ --ls-wordmark: 0.06em; /* wordmark "EBEN" */ /* Medidas de lectura */ --measure-narrow: 34ch; --measure: 62ch; --measure-wide: 76ch; /* ====================================================================== 05 · ESPACIADO — escala base 4px ====================================================================== */ --sp-0: 0; --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.25rem; /* 20px */ --sp-6: 1.5rem; /* 24px */ --sp-8: 2rem; /* 32px */ --sp-10: 2.5rem; /* 40px */ --sp-12: 3rem; /* 48px */ --sp-16: 4rem; /* 64px */ --sp-20: 5rem; /* 80px */ --sp-24: 6rem; /* 96px */ --sp-32: 8rem; /* 128px */ /* Ritmo vertical de seccion — fluido */ --section-y: clamp(3.5rem, 2.2rem + 6.5vw, 7.5rem); --section-y-tight:clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem); /* Contenedores */ --container-max: 1240px; --container-text: 800px; --gutter: clamp(1.25rem, 0.9rem + 1.75vw, 2.5rem); /* ====================================================================== 06 · FORMA — radios, filetes, sombras El manual es de tono premium sobrio: radios minimos, filetes de 1px, sombras casi imperceptibles. Nada de tarjetas redondeadas tipo SaaS. ====================================================================== */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 3px; --radius-md: 4px; --radius-pill: 999px; --radius-circle:50%; --hairline: 1px; /* Las sombras tiñen en Navy, no en negro neutro: sobre Marfil el negro puro se ve sucio y gris; el Navy conserva la temperatura de la marca. */ --shadow-none: none; --shadow-xs: 0 1px 2px rgba(14, 25, 50, 0.05); --shadow-sm: 0 2px 8px rgba(14, 25, 50, 0.07); --shadow-md: 0 6px 24px rgba(14, 25, 50, 0.10); --shadow-lg: 0 16px 48px rgba(14, 25, 50, 0.14); --shadow-float: 0 8px 28px rgba(14, 25, 50, 0.26); /* boton flotante */ /* ====================================================================== 07 · MOVIMIENTO Sobrio: transiciones cortas, curvas suaves, nada elastico. ====================================================================== */ --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 420ms; --dur-slower: 700ms; --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.45, 0.05, 0.55, 0.95); /* ====================================================================== 08 · CAPAS (z-index) — declaradas, nunca ad-hoc ====================================================================== */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-nav: 200; --z-float: 300; /* boton WhatsApp */ --z-overlay: 400; /* menu movil */ --z-modal: 500; /* ====================================================================== 09 · COMPONENTES — medidas compartidas ====================================================================== */ --nav-h: clamp(64px, 60px + 1vw, 80px); --tap-min: 44px; /* area minima tactil (WCAG 2.5.5) */ --btn-h: 52px; --btn-h-sm: 44px; --btn-px: var(--sp-8); --field-h: 52px; --card-media-ratio: 4 / 3; /* proporcion fija de foto de propiedad */ --grid-gap: clamp(1.25rem, 0.8rem + 2vw, 2.25rem); /* ====================================================================== 10 · BREAKPOINTS (referencia — CSS custom props no sirven en @media, estos valores estan replicados literalmente en components.css/site.css) ====================================================================== */ /* sm 480px · telefono grande md 768px · tablet vertical lg 1024px · tablet horizontal / laptop chico xl 1240px · desktop */ } /* ========================================================================== PREFERENCIA DE MOVIMIENTO REDUCIDO ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-slower: 1ms; } }