/* ═══════════════════════════════════════════════════════════════════════════ CARO & ASOCIADOS — Design tokens Única fuente de verdad de color, tipografía, espacio, ritmo y movimiento. Ningún otro archivo debe declarar un valor literal de color o de fuente. La paleta se deriva del logotipo de la firma: · Navy #03316C — extraído de la cinta del isotipo · Oro #B69566 — extraído del filete que separa el nombre ═══════════════════════════════════════════════════════════════════════════ */ /* ── Tipografía self-hosted ────────────────────────────────────────────── Fuentes variables: un solo archivo cubre todos los pesos. font-display: swap evita el texto invisible mientras cargan (FOIT). */ @font-face { font-family: 'Newsreader'; src: url('/assets/fonts/newsreader-var.woff2') format('woff2-variations'); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212; } @font-face { font-family: 'Newsreader'; src: url('/assets/fonts/newsreader-var-italic.woff2') format('woff2-variations'); font-weight: 200 800; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122; } /* * Marcellus — serif lapidaria para los titulares. * * Tomada del tema Procounsel como referencia VISUAL, no copiada de su CSS: * ese tema es GPL v2 y su hoja de estilos está acoplada al marcado de * WordPress. Aquí solo se adopta la elección tipográfica, que no es * apropiable, y se implementa sobre los tokens propios. * * Es una fuente ESTÁTICA de un solo peso (400), a diferencia de Newsreader e * Inter, que son variables. Por eso no lleva rango de font-weight: pedirle un * 700 haría que el navegador lo sintetizara engordando los trazos, que en una * serif de esta clase se ve mal. Los titulares usan 400 y punto. */ @font-face { font-family: 'Marcellus'; src: url('/assets/fonts/marcellus-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122; } @font-face { font-family: 'InterVar'; src: url('/assets/fonts/inter-var.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122; } :root { /* ── COLOR ─────────────────────────────────────────────────────────── Superficies oscuras: el sitio es predominantemente oscuro y editorial. No hay negro puro (#000): un carbón cálido evita el aspecto "terminal" y hace que el oro y el marfil se sientan impresos, no emitidos. */ --ink-900: #0A0B0C; /* fondo base */ --ink-850: #0E1012; /* elevación mínima */ --ink-800: #131619; /* tarjetas y bandas alternas */ --ink-700: #1A1E22; /* bordes de tarjeta, superficies interactivas */ --ink-600: #252A2F; /* hover sobre superficies oscuras */ /* Superficies claras: se alternan para dar respiro editorial. */ --paper: #F7F5F0; --paper-alt: #EDE9E1; --paper-deep: #E2DCD1; /* Texto */ --ivory: #EDEAE3; /* texto principal sobre oscuro */ --ivory-mute: #B4B0A7; /* texto secundario sobre oscuro */ --ivory-dim: #837F77; /* metadatos, sobre oscuro */ --graphite: #14171A; /* texto principal sobre claro */ --graphite-mute: #4E5257;/* texto secundario sobre claro */ --graphite-dim: #65696F;/* metadatos, sobre claro */ /* Marca */ --navy: #03316C; /* del logotipo — sólido, para fondos claros */ --navy-deep: #021F45; --navy-lift: #4180CF; /* aclarado para uso sobre fondo oscuro */ --gold: #B69566; /* del logotipo — acento único del sitio */ --gold-soft: #C4A579; /* oro intermedio, para bordes y hover */ --gold-warm: #D4BC93; /* oro aclarado, para texto sobre oscuro */ --gold-deep: #755E3A; /* oro oscurecido, para texto sobre claro */ /* Líneas: siempre finas y de bajo contraste. El brief pide "líneas finas" y prohíbe sombras marcadas, así que la jerarquía se construye con filetes, no con elevación. */ --line-dark: rgba(237, 234, 227, 0.13); --line-dark-2: rgba(237, 234, 227, 0.24); --line-light: rgba(20, 23, 26, 0.14); --line-light-2:rgba(20, 23, 26, 0.28); --line-gold: rgba(182, 149, 102, 0.45); /* Estado */ --focus: #D4BC93; --success: #4E7A5E; --danger: #A64B4B; /* ── TIPOGRAFÍA ────────────────────────────────────────────────────── Serif editorial para titulares (autoridad, tradición jurídica). Sans neutra para interfaz y lectura (modernidad, claridad). */ /* Marcellus al frente; Newsreader queda de reserva porque cubre cursiva y más pesos, que Marcellus no tiene. */ --font-display: 'Marcellus', 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; /* Para lo que necesite cursiva o un peso distinto del 400. */ --font-display-alt: 'Newsreader', 'Iowan Old Style', Georgia, serif; --font-sans: 'InterVar', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Escala fluida. clamp() evita media queries para el tamaño de texto y hace que el salto entre breakpoints sea continuo. */ --t-display-1: clamp(3.25rem, 1.2rem + 8.6vw, 9rem); --t-display-2: clamp(2.6rem, 1.3rem + 5.4vw, 6rem); --t-display-3: clamp(2.1rem, 1.3rem + 3.2vw, 3.9rem); --t-display-4: clamp(1.6rem, 1.15rem + 1.9vw, 2.6rem); --t-lead: clamp(1.125rem, 1rem + 0.55vw, 1.45rem); --t-body: 1.0625rem; --t-small: 0.9375rem; --t-micro: 0.8125rem; --t-eyebrow: 0.6875rem; --lh-tight: 1.04; --lh-snug: 1.16; --lh-normal: 1.5; --lh-relaxed:1.72; /* Los titulares serif grandes necesitan tracking negativo para no "abrirse". Los eyebrow en mayúsculas necesitan lo contrario. */ --ls-display: -0.028em; --ls-tight: -0.014em; --ls-normal: 0; --ls-wide: 0.06em; --ls-eyebrow: 0.19em; /* ── ESPACIO ───────────────────────────────────────────────────────── Escala base 8. Los pasos grandes son fluidos porque el brief pide "grandes espacios" en desktop sin ahogar el móvil. */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; /* Aire vertical entre secciones */ --section-y: clamp(5rem, 3rem + 9vw, 11rem); --section-y-lg: clamp(7rem, 3rem + 14vw, 16rem); /* ── LAYOUT ────────────────────────────────────────────────────────── */ --container: 82.5rem; /* 1320px */ --container-text: 46rem; /* ~68 caracteres: medida óptima de lectura */ --container-wide: 96rem; --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 4rem); --grid-cols: 12; --grid-gap: clamp(1rem, 0.5rem + 1.6vw, 2rem); --header-h: 5.25rem; /* ── MOVIMIENTO ────────────────────────────────────────────────────── El brief es explícito: elegante y rápido, nunca de videojuego. Nada por encima de 900ms. Las curvas son suaves al final (ease-out), que es lo que se percibe como "caro" frente al ease-in-out genérico. */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-soft: cubic-bezier(0.33, 1, 0.68, 1); --d-instant: 120ms; --d-fast: 220ms; --d-base: 380ms; --d-slow: 620ms; --d-reveal: 820ms; --radius-none: 0; --radius-sm: 2px; --radius-md: 3px; --z-header: 100; --z-menu: 200; --z-modal: 300; } /* Refuerzo: si el sistema pide menos movimiento, se anula todo el motion. Se declara aquí, en tokens, para que ninguna hoja posterior lo reintroduzca sin darse cuenta. */ @media (prefers-reduced-motion: reduce) { :root { --d-instant: 1ms; --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; --d-reveal: 1ms; } }