/* ============================================================================ CUSTODE — Legal Realty S.A.S. 00-tokens.css — SOLO custom properties. Ningun selector fuera de :root. Referencia canonica: docs/DESIGN-SYSTEM.md Ninguna otra hoja del tema puede declarar un hex, un px de tipografia, una duracion o una curva. Todo sale de aqui. SUPERFICIE POR DEFECTO: PAPEL (marfil). La tinta negra es una banda RESERVADA, no el fondo. Mandato de docs/BRAND-DIRECTION.md (cliente, 2026-08-31, reconfirmado 2026-09-01). No hay alternador de tema: la banda oscura es semantica, no una preferencia del usuario. ========================================================================= */ :root { /* ========================================================================== 1. SUPERFICIES — la hoja y la banda Cuatro papeles y una tinta. Una pagina impresa tiene un papel, no cinco fondos. Los papeles se usan por jerarquia de profundidad, nunca por variedad. ====================================================================== */ --c-paper: #FAF8F5; /* ground por defecto 18.45:1 vs tinta */ --c-paper-2: #F0ECE8; /* banda alterna, card 16.64:1 vs tinta */ --c-paper-3: #E7E0D6; /* passe-partout (el marco) 14.93:1 vs tinta */ --c-paper-4: #DBD3C6; /* placeholder de lamina 13.18:1 vs tinta */ --c-ink: #0C0C0C; /* tinta y banda reservada */ --c-ink-band: #0C0C0C; /* alias semantico de la banda oscura */ /* ========================================================================== 2. RAMPA DE TINTA — texto SOBRE papel Seis pasos, interpolados por CONTRASTE objetivo (no por luz lineal) y sesgados a gris calido (R-B ~14) para que ningun gris medio lea azulado junto al laton. Ratios medidos contra --c-paper #FAF8F5. ink-400 es el ULTIMO paso que pasa AA en texto normal. ====================================================================== */ --c-ink-000: #0C0C0C; /* 18.45:1 display, titulares, precios */ --c-ink-100: #37312D; /* 12.08:1 texto enfatico */ --c-ink-200: #4F4842; /* 8.47:1 CUERPO DE TEXTO */ --c-ink-300: #655C56; /* 6.15:1 secundario, pies de lamina */ --c-ink-400: #796F69; /* 4.62:1 metadatos — piso AA normal */ --c-ink-500: #918780; /* 3.31:1 NO TEXTO salvo >=24px */ /* ========================================================================== 3. RAMPA INVERSA — texto SOBRE la banda de tinta Ratios medidos contra --c-ink #0C0C0C. El cuerpo NO va en papel puro sino en inv-200: marfil puro a 17px sobre negro produce halacion y sangra las astas finas de la Didone. ====================================================================== */ --c-inv-000: #FAF8F5; /* 18.45:1 display sobre banda */ --c-inv-100: #E4E1DE; /* 15.02:1 enfasis */ --c-inv-200: #CFCAC6; /* 12.03:1 CUERPO sobre banda */ --c-inv-300: #B5AFAA; /* 9.01:1 secundario */ --c-inv-400: #9C948F; /* 6.56:1 metadatos */ --c-inv-500: #827974; /* 4.60:1 piso AA normal sobre banda */ /* ========================================================================== 4. LATON — ACENTO, JAMAS SUPERFICIE Presupuesto duro: <=3% de los pixeles de cualquier pantallazo. Prohibido como fondo de boton, chip, card o banda. Prohibido en degradado. Prohibido sobre fotografia sin velo. Sobre PAPEL el laton #A89372 da 2.80:1 — DECORATIVO UNICAMENTE (filetes, sellos, bordes, subrayados, emblema). Nunca texto. Dos latones-texto sobre papel, no uno: la WCAG mide el COLOR pero el ojo mide el GROSOR DEL TRAZO. Una Didone de asta fina a 5.01:1 desaparece justo donde una Plex de asta solida se lee perfecto. ====================================================================== */ --c-brass: #A89372; /* decorativo/papel 2.80 · TEXTO/banda 6.60 */ --c-brass-hi: #C2AE8C; /* hover sobre banda 9.06 */ --c-brass-lo: #8A7658; /* active sobre banda 4.48 */ --c-brass-text: #796952; /* TEXTO sobre papel, trazo solido (Plex) */ /* paper 5.01:1 · ivory 4.52:1 — AA */ --c-brass-hair: #6B5D48; /* TEXTO sobre papel, trazo fino */ /* (Italiana / Bodoni) paper 6.03 · ivory 5.44 */ /* Alfas de laton, para filetes y anillos */ --c-brass-a10: rgba(168, 147, 114, .10); --c-brass-a24: rgba(168, 147, 114, .24); --c-brass-a42: rgba(168, 147, 114, .42); --c-brass-a85: rgba(168, 147, 114, .85); --c-brass-ring: rgba(168, 147, 114, .55); /* ========================================================================== 5. GRAMATICA DE FILETES Tres pesos, diferenciados por ALFA y no por grosor: 0.5px se renderiza mal en pantallas 1x, 1px al 14% se renderiza bien en todas. Cada peso SIGNIFICA algo y ese significado no se negocia: hair -> separa CAMPOS dentro de un bloque rule -> separa BLOQUES dentro de una seccion close -> CIERRA un documento (filete doble, compuesto) ====================================================================== */ --c-hair: rgba(12, 12, 12, .14); /* sobre papel */ --c-rule: rgba(12, 12, 12, .28); --c-close: rgba(12, 12, 12, .55); --c-hair-inv: rgba(240, 236, 232, .14); /* sobre banda */ --c-rule-inv: rgba(240, 236, 232, .28); --c-close-inv: rgba(240, 236, 232, .55); --c-hair-w: 1px; --c-close-gap: 2px; /* aire entre las dos lineas del filete doble */ /* ========================================================================== 6. VELOS Y TRATAMIENTO DE IMAGEN Todos los velos son rgba(12,12,12,a) y NUNCA rgba(0,0,0,a): el negro puro contra fotografia calida lee digital y frio. ====================================================================== */ --c-veil-10: rgba(12, 12, 12, .10); --c-veil-28: rgba(12, 12, 12, .28); --c-veil-45: rgba(12, 12, 12, .45); --c-veil-62: rgba(12, 12, 12, .62); --c-veil-86: rgba(12, 12, 12, .86); /* Gradacion uniforme para las 375 laminas: que un set disparejo lea como una sola tirada de imprenta. brightness se queda en 1: hundir las sombras era un movimiento de pagina negra y aqui la pagina es papel. */ --c-grade: saturate(.84) contrast(1.04) brightness(1); /* EL DOBLE ESCURRIDO — el velo SUPERIOR es el hallazgo. Casi toda esta fotografia trae el cielo del Caribe quemado a 255 en el tercio superior, y el blanco clipeado NO se recupera con contrast(): hay que taparlo. DOS INTENSIDADES, y confundirlas destruye la fotografia: --c-scrim-sky la lamina NO lleva texto encima (card, galeria, indice). El unico trabajo del velo es domar el cielo quemado. Verificado en pantalla: aplicar aqui el escurrido completo apaga la foto entera y no compra nada, porque no hay ninguna tipografia que sostener. --c-scrim-top / --c-scrim-bottom la lamina SI lleva texto encima (heroe, banda a sangre, card de retrato). Ahi el escurrido completo es lo que mantiene el marfil legible sobre el cielo. En ambos casos el tercio central queda limpio: ahi vive la arquitectura. */ --c-scrim-sky: linear-gradient(to bottom, rgba(12,12,12,.30) 0%, rgba(12,12,12,.12) 16%, rgba(12,12,12,0) 38%); --c-scrim-top: linear-gradient(to bottom, rgba(12,12,12,.62) 0%, rgba(12,12,12,.28) 18%, rgba(12,12,12,0) 42%); --c-scrim-bottom: linear-gradient(to top, rgba(12,12,12,.86) 0%, rgba(12,12,12,.46) 22%, rgba(12,12,12,0) 58%); /* La banda a sangre sienta el texto mas arriba y necesita pie mas profundo. */ --c-scrim-bleed: linear-gradient(to top, rgba(12,12,12,.94) 0%, rgba(12,12,12,.62) 28%, rgba(12,12,12,.20) 52%, rgba(12,12,12,0) 74%); /* Vinieta descentrada hacia arriba: el sujeto arquitectonico vive en el tercio superior-medio, y los bordes aplastados esconden el borde blando del reescalado. */ --c-vignette: radial-gradient(78% 78% at 50% 34%, rgba(12,12,12,0) 0%, rgba(12,12,12,.18) 38%, rgba(12,12,12,.92) 100%); --c-grain-opacity: .06; --c-plate-mat: 12px; /* passe-partout: el marco que monta la foto */ --c-plate-inner-hair: rgba(240, 236, 232, .10); /* filete INTERIOR: le da borde nitido a una fuente blanda de 979px */ /* ========================================================================== 7. TIPOGRAFIA — FAMILIAS Cinco familias, dos origenes. Italiana y Plex Mono salieron EMBEBIDAS del binario del brandbook: son la marca, no una eleccion. Bodoni Moda para cifras display esta CERRADO por el cliente (2026-09-01). Plex Serif cubre el unico hueco que el brandbook deja: el texto corrido. Las tres Plex comparten esqueleto y metricas, asi que leen como una sola voz en tres registros, no como tres fuentes distintas. Import (verificado HTTP 200, las cinco familias resuelven): https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500&family=IBM+Plex+Mono:wght@500&family=IBM+Plex+Sans:wght@300;400;500&family=IBM+Plex+Serif:ital,wght@0,400;0,500;1,400&family=Italiana&display=swap ====================================================================== */ --c-font-display: "Italiana", "Bodoni Moda", Didot, "Times New Roman", serif; --c-font-figure: "Bodoni Moda", Didot, "Times New Roman", serif; --c-font-prose: "IBM Plex Serif", Georgia, "Times New Roman", serif; --c-font-data: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; --c-font-label: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace; /* ========================================================================== 8. TIPOGRAFIA — ESCALA Todo clamp() fluye entre 390px y 1440px de viewport sin saltos. Los comentarios dan min -> max en px. DISPLAY (Italiana 400) vive SOLO en d1-d3. Piso absoluto 24px. Por debajo de 24px manda Plex Serif. Esa frontera dura es lo que impide que un sistema de cinco familias parezca un accidente. ====================================================================== */ --c-fs-d1: clamp(2.75rem, 1.30rem + 5.95vw, 5.50rem); /* 44 -> 88 */ --c-fs-d2: clamp(1.875rem, 1.06rem + 3.33vw, 3.25rem); /* 30 -> 52 */ --c-fs-d3: clamp(1.50rem, 1.16rem + 1.40vw, 2.125rem); /* 24 -> 34 */ --c-fs-d4: clamp(1.25rem, 1.11rem + 0.57vw, 1.50rem); /* 20 -> 24 (Plex Serif) */ /* CIFRAS (Bodoni Moda, tabular-nums lining-nums SIEMPRE) */ --c-fs-n1: clamp(1.75rem, 1.18rem + 2.33vw, 2.75rem); /* 28 -> 44 precio hero */ --c-fs-n2: clamp(1.375rem, 1.16rem + 0.86vw, 1.75rem); /* 22 -> 28 precio card */ --c-fs-n3: 1.25rem; /* 20 cifra inline */ /* PROSA (IBM Plex Serif) */ --c-fs-lead: clamp(1.125rem, 1.02rem + 0.43vw, 1.3125rem); /* 18 -> 21 */ --c-fs-body: clamp(1.00rem, 0.96rem + 0.19vw, 1.0625rem); /* 16 -> 17 */ --c-fs-small: 0.9375rem; /* 15 */ --c-fs-fine: 0.8125rem; /* 13 */ /* DATO (IBM Plex Sans, tabular-nums SIEMPRE) */ --c-fs-data: 0.9375rem; /* 15 m2, alcobas, banos, estrato, ano */ --c-fs-data-sm: 0.8125rem; /* 13 tablas densas */ /* ETIQUETAS (IBM Plex Mono 500, VERSALITAS, tracking extremo) Solo LETRAS. Jamas digitos: el cero de Plex Mono lleva punto dentro y el cliente lo rechazo por nombre. */ --c-fs-l1: 0.75rem; /* 12 nav, CTA, cejilla de seccion */ --c-fs-l2: 0.6875rem; /* 11 claves de ficha, filtros */ --c-fs-l3: 0.625rem; /* 10 cinta de folio, pie de lamina */ /* PESOS */ --c-fw-display: 400; /* Italiana solo tiene 400 y NUNCA se sintetiza */ --c-fw-figure: 400; --c-fw-figure-md: 500; --c-fw-prose: 400; --c-fw-prose-md: 500; --c-fw-data-lt: 300; --c-fw-data: 400; --c-fw-data-md: 500; --c-fw-label: 500; /* INTERLINEADO */ --c-lh-d1: 1.02; /* >=1.02 obligatorio: con lh menor la tilde de una O acentuada invade la linea de arriba */ --c-lh-d2: 1.08; --c-lh-d3: 1.16; --c-lh-d4: 1.30; --c-lh-figure: 1.10; --c-lh-lead: 1.62; --c-lh-body: 1.72; /* leading de libro, no de web */ --c-lh-small: 1.60; --c-lh-data: 1.50; --c-lh-label: 1.40; /* TRACKING Escritorio y movil. En movil SE REDUCE EL TRACKING, NUNCA EL CUERPO: a 375px de ancho "LEGAL REALTY S.A.S." a +0.28em ocupa 279px y no cabe; a +0.22em entra. Bajar de 10-11px rompe legibilidad y marca a la vez. Presupuesto de ancho: px/caracter = font-size x (0.600 + tracking_em). Se dimensiona contra el ESPANOL, 20-25% mas largo que el ingles. */ --c-tr-d1: -0.005em; --c-tr-d2: 0em; --c-tr-d3: 0.005em; --c-tr-caps: 0.22em; /* Italiana en versalitas: SOLO wordmark y marca de seccion */ --c-tr-l1: 0.26em; --c-tr-l2: 0.28em; --c-tr-l3: 0.30em; --c-tr-data: 0.01em; /* ========================================================================== 9. ESPACIADO — escala base 4, cuantizada Ningun valor de espaciado se elige a mano fuera de esta escala. ====================================================================== */ --c-sp-1: 4px; --c-sp-2: 8px; --c-sp-3: 12px; --c-sp-4: 16px; --c-sp-5: 24px; --c-sp-6: 32px; --c-sp-7: 48px; /* gap de la grilla 3-up */ --c-sp-8: 64px; --c-sp-9: 96px; --c-sp-10: 128px; --c-sp-11: 160px; --c-sp-12: 200px; /* ========================================================================== 10. RITMO VERTICAL — el sistema N/4 Heredado de Serhant y recalibrado hacia arriba: la confianza institucional se lee como espacio. NINGUN padding vertical de seccion se escribe a mano. N=0 es deliberado: hace que dos bandas contiguas se lean como un solo bloque continuo. ====================================================================== */ --c-band: 112px; --c-band-0: 0px; --c-band-1: 28px; --c-band-2: 56px; --c-band-3: 84px; --c-band-4: 112px; --c-band-xl: 176px; /* respiro largo, una vez por pagina */ /* ========================================================================== 11. CONTENEDORES Y GRILLA ====================================================================== */ --c-shell: 1280px; /* ancho de contenido */ --c-prose: 680px; /* ~68-72 caracteres en Plex Serif 17px */ --c-hang: 176px; /* colgado asimetrico izquierdo (papel membretado). Es un offset POR SECCION, no una columna de grilla a nivel de pagina: es lo unico que sobrevive al modelo de contenedores de Elementor. */ --c-split-main: 680px; --c-split-aside: 380px; --c-split-gap: 32px; --c-grid-gap: 48px; --c-gutter: 80px; /* escritorio */ --c-gutter-t: 24px; /* tablet */ --c-gutter-m: 20px; /* movil */ --c-nav-h: 88px; --c-nav-h-m: 64px; --c-field-h: 56px; --c-tap-min: 44px; /* area tactil minima */ /* ========================================================================== 12. RADIOS — cero, y es una decision La esquina viva es el cambio individual de mayor palanca hacia el registro institucional: una foto de esquina cuadrada lee archivistica, documental y juridica. La esquina redondeada lee app de consumo. ====================================================================== */ --c-radius: 0; --c-radius-plate: 0; --c-radius-field: 0; /* ========================================================================== 13. SOMBRAS — no existen como elevacion Un documento no flota sobre la mesa: esta apoyado en ella. No hay box-shadow de elevacion en todo el sistema. El unico uso de sombra es el RELIEVE del sello seco, que no es elevacion sino luz rasante, y el anillo de foco. ====================================================================== */ --c-shadow-none: none; --c-emboss-hi-paper: rgba(255, 255, 255, .95); --c-emboss-lo-paper: rgba(120, 112, 100, .55); --c-emboss-hi-ink: rgba(240, 236, 232, .22); --c-emboss-lo-ink: rgba(0, 0, 0, .90); --c-seal-ghost-ink: rgba(240, 236, 232, .09); /* ========================================================================== 14. FOCO Nunca outline:none sin sustituto. El anillo es de laton porque es el unico momento donde el acento tiene una funcion y no un adorno. ====================================================================== */ --c-focus-w: 2px; --c-focus-offset: 3px; --c-focus-color: var(--c-brass-hair); --c-focus-color-inv: var(--c-brass-hi); /* ========================================================================== 15. MOTION Doctrina: MASA, NO REBOTE. Ninguna curva tiene overshoot, nada escala por encima de 1.03, nada gira, nada tiene paralaje. Un edificio no rebota y un documento no se desliza: se asienta. ====================================================================== */ --c-ease-plate: cubic-bezier(.32, .72, 0, 1); /* imagen, panel, lamina */ --c-ease-ink: cubic-bezier(.22, 1, .36, 1); /* color y opacidad */ --c-ease-rule: cubic-bezier(.16, 1, .30, 1); /* dibujo de filete */ --c-ease-seal: cubic-bezier(.34, .02, .18, 1); /* prensa del sello */ --c-dur-tick: 180ms; /* color, estado de etiqueta */ --c-dur-hover: 400ms; /* subrayado, borde */ --c-dur-rule: 620ms; /* traza de filete */ --c-dur-plate: 700ms; /* escala de imagen, velo */ --c-dur-enter: 900ms; /* entrada al viewport */ --c-dur-seal: 520ms; --c-stagger: 80ms; /* escalonado entre hermanos, leido por el JS */ --c-enter-y: 14px; /* el contenido de un documento no se desliza 100%: se asienta 14px */ --c-zoom-plate: 1.03; /* con fuentes blandas cualquier zoom mayor hace visible el reescalado */ /* ========================================================================== 16. RATIOS DE IMAGEN Cinco, y ninguno mas. Todos son recortes VERTICALES del 4:3 nativo: cero recorte horizontal, porque el ancho es el recurso escaso. PROHIBIDO cualquier ratio vertical para inmuebles — un recorte a 5:6 tira el 37.5% del ancho y convierte un balcon de gran angular en una columna de baldosa. El 4:5 existe SOLO para retratos de personas. ====================================================================== */ --c-ratio-plate: 4 / 3; /* nativo, cero recorte — card y galeria */ --c-ratio-wide: 3 / 2; /* card apaisada cuando la fuente lo aguanta */ --c-ratio-pano: 1.85 / 1; /* placa de heroe */ --c-ratio-scope: 2.39 / 1; /* tira y banda a sangre */ --c-ratio-portrait: 4 / 5; /* SOLO personas */ /* Techo de render POR IMAGEN, no global: nunca por encima de 0.5x el ancho nativo de la fuente (equivale a 1.0x en DPR2). Se guarda como dato junto al archivo. Una fuente de 979px topa en 489px; una de 4160px autoriza el sangrado completo a 1440px. */ --c-plate-max-lo: 489px; /* derivado de las fuentes de 979px */ --c-plate-max-hi: 1440px; /* autorizado por las fuentes de >=2880px */ /* ========================================================================== 17. CAPAS Z — numeros reservados, nunca 9999 ====================================================================== */ --c-z-plate: 1; --c-z-scrim: 2; --c-z-meta: 3; --c-z-nav: 89; --c-z-drop: 90; --c-z-modal: 100; --c-z-grain: 110; /* ========================================================================== 18. BREAKPOINTS — declarados como tokens de referencia. CSS no puede consumir una custom property dentro de @media; estos valores existen para que toda hoja del tema escriba el mismo numero y para que el JS los lea con getComputedStyle. ====================================================================== */ --c-bp-s: 560px; --c-bp-m: 768px; --c-bp-l: 1024px; --c-bp-xl: 1280px; --c-bp-xxl: 1600px; } /* ============================================================================ MOVIL — se reduce el TRACKING y el RITMO, nunca el cuerpo del texto. Sigue siendo :root: no hay ningun selector nuevo. ========================================================================= */ @media (max-width: 767px) { :root { --c-band: 72px; --c-band-0: 0px; --c-band-1: 18px; --c-band-2: 36px; --c-band-3: 54px; --c-band-4: 72px; --c-band-xl: 104px; --c-hang: 0px; /* el colgado asimetrico es un gesto de escritorio; a 390px solo roba ancho */ --c-gutter: var(--c-gutter-m); --c-tr-caps: 0.18em; --c-tr-l1: 0.22em; --c-tr-l2: 0.22em; --c-tr-l3: 0.20em; --c-plate-mat: 8px; --c-nav-h: var(--c-nav-h-m); } } @media (min-width: 768px) and (max-width: 1279px) { :root { --c-gutter: var(--c-gutter-t); --c-hang: 0px; } } /* ============================================================================ MOVIMIENTO REDUCIDO — se anulan las DURACIONES, no los estados. Un usuario con movimiento reducido debe ver la MISMA pagina, no una pagina incompleta: los filetes quedan trazados, no invisibles. La regla que los deja en scaleX(1) vive en 01-base.css. ========================================================================= */ @media (prefers-reduced-motion: reduce) { :root { --c-dur-tick: 1ms; --c-dur-hover: 1ms; --c-dur-rule: 1ms; --c-dur-plate: 1ms; --c-dur-enter: 1ms; --c-dur-seal: 1ms; --c-stagger: 0ms; --c-enter-y: 0px; --c-zoom-plate: 1; } }