/* =========================================================================== tokens.css — Sistema de diseño "FOJA" · Cáceres y Virviescas Única fuente de verdad: color, tipografía, escala, espacio, movimiento. No escribir valores crudos en otras hojas; usar siempre estas variables. DOS TEMAS El sitio tiene tema oscuro (por defecto, la identidad de la casa) y tema claro (opt-in, con la paleta blanco + vinotinto de la marca). El tema vive en el atributo data-theme del : ausente o "dark" → oscuro; "light" → claro. Lo fija theme.js, y un script en head-common.html lo aplica antes del primer pintado para que no haya parpadeo. REGLA PARA AÑADIR COLOR Los nombres son SEMÁNTICOS, no literales: --ink es SIEMPRE el fondo de página y --paper es SIEMPRE el color del texto, sin importar el tema (por eso en el tema claro --ink es casi blanco y --paper casi negro: no es un error). Todo color nuevo debe declararse en los DOS bloques; si solo se declara en :root, el tema claro lo hereda del oscuro y se rompe. Para velos y sombras no usar rgba() crudo: usar color-mix(in oklch, var(--ink) N%, transparent), que sigue al tema solo. =========================================================================== */ :root { color-scheme: dark; /* --- COLOR · TEMA OSCURO (por defecto) --------------------------------- Paleta nocturna de imprenta. El acento se usa con avaricia (ver base.css). Nunca #000 ni #FFF: la "tinta" es negro cálido, el "papel" es hueso. */ --ink: #0E0E0D; /* fondo base */ --ink-1: #141311; /* superficie ligeramente elevada */ --ink-2: #1A1814; /* superficie elevada (overlay, paneles sticky) */ --ink-3: #211E19; /* inset más profundo (colofón) */ --paper: #ECE7DD; /* texto principal */ --paper-dim: #B8B2A6; /* subtítulos / entradillas */ --muted: #8A857A; /* etiquetas mono, marginalia, secundario */ --faint: #555049; /* texto terciario / deshabilitado */ --hairline: #2A2824; /* filetes 1px, guías de columna, líderes punteados */ --hairline-2: #38352F; /* filete algo más visible (hover) */ --accent: #C9A24B; /* EL acento — oro mate */ --accent-hi: #DDB968; /* acento de hover, único estado más brillante */ --accent-ghost: rgba(201, 162, 75, 0.10); /* numerales gigantes / trazas */ --accent-soft: rgba(201, 162, 75, 0.22); /* filetes de acento tenues */ --selection: rgba(201, 162, 75, 0.25); /* --- TRATAMIENTO DE IMAGEN (depende del tema) -------------------------- Las fotos se montan sobre la página, así que su revelado cambia con el fondo: sobre tinta hay que apagarlas, sobre papel hay que levantarlas. */ --hero-img-opacity: 0.18; /* foto de fondo del hero de portada */ /* Fotos a sangre (hero de equipo, testimonios): atempera el blanco de estudio hacia la paleta y ajusta el brillo al fondo de la página. */ --photo-filter: saturate(0.75) contrast(1.03) brightness(0.82) sepia(0.18); /* Retratos recortados sobre fondo transparente: sin este filo la silueta oscura se pierde contra la tinta (ver .socio__photo en base.css). */ --photo-halo: drop-shadow(0 0 1px rgba(236, 231, 221, 0.42)) drop-shadow(0 0 18px rgba(201, 162, 75, 0.14)); --map-filter: grayscale(1) contrast(0.92) brightness(0.82); --motif-opacity: 0.16; /* filigrana gigante de las páginas de servicio */ /* Escudo del masthead: blanco + oro, hecho a propósito para fondo oscuro. */ --crest: url("/assets/img/brand/marca-oscuro.webp?v=202607221212"); /* Velos sobre las fotos a sangre. Son degradados completos y no simples opacidades porque cada uno protege una zona distinta del encuadre; el tema claro necesita mucho más velo, porque ahí el texto es oscuro y compite con las zonas claras de la foto en vez de con las oscuras. */ --veil-hero: linear-gradient(180deg, color-mix(in oklch, var(--ink) 55%, transparent) 0%, color-mix(in oklch, var(--ink) 12%, transparent) 26%, color-mix(in oklch, var(--ink) 72%, transparent) 68%, var(--ink) 100%); --veil-band: linear-gradient(180deg, var(--ink) 0%, color-mix(in oklch, var(--ink) 32%, transparent) 24%, color-mix(in oklch, var(--ink) 58%, transparent) 76%, var(--ink) 100%); /* Grano de papel (textura fija, imperceptible, "imprenta"). */ --grain-opacity: 0.045; --grain-blend: overlay; /* --- TIPOGRAFÍA -------------------------------------------------------- display/serif: Vollkorn · mono: Space Mono (etiquetas, folios, navegación). */ --font-display: "Vollkorn", Georgia, "Times New Roman", serif; --font-serif: "Vollkorn", Georgia, "Times New Roman", serif; --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace; /* Ejes y rasgos */ --display-wght: 380; --display-soft: 0; /* --- ESCALA TIPOGRÁFICA FLUIDA (clamp, 360px → 1440px) ----------------- */ --step--2: clamp(0.69rem, 0.67rem + 0.10vw, 0.75rem); /* micro / créditos */ --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem); /* small print / mono */ --step-0: clamp(1.00rem, 0.96rem + 0.20vw, 1.125rem); /* cuerpo */ --step-1: clamp(1.25rem, 1.10rem + 0.60vw, 1.60rem); /* entradilla */ --step-2: clamp(1.60rem, 1.30rem + 1.40vw, 2.60rem); /* sub-encabezados */ --step-3: clamp(2.20rem, 1.50rem + 3.40vw, 4.50rem); /* nombres de área (índice) */ --step-4: clamp(3.00rem, 1.20rem + 8.00vw, 7.00rem); /* títulos de página */ --step-5: clamp(3.40rem, 0.50rem + 11.0vw, 9.50rem); /* hero portada */ /* Numeral gigante de capítulo. Escala con el ancho Y con el alto (min de ambos): el hero es de altura fija (100svh) y el numeral comparte ese espacio con kicker, título y entradilla, así que en pantallas bajas debe ceder o desbordaría el hero. */ --numeral: clamp(4.50rem, min(12vw, 17vh), 13.0rem); --lh-tight: 1.02; /* titulares display */ --lh-snug: 1.18; /* sub-encabezados */ --lh-body: 1.62; /* cuerpo de lectura */ --tracking-mono: 0.22em; /* versalitas mono */ /* --- ESPACIO (base 8px) ------------------------------------------------ */ --s1: 0.5rem; /* 8px */ --s2: 1rem; /* 16px */ --s3: 1.5rem; /* 24px */ --s4: 2.5rem; /* 40px */ --s5: 4rem; /* 64px */ --s6: 6rem; /* 96px */ --section: clamp(6rem, 4rem + 14vh, 14rem); /* respiro vertical entre secciones */ --gutter: clamp(1.25rem, 5vw, 6rem); /* margen lateral de página */ --measure: 62ch; /* medida de columna de lectura */ --maxw: 84rem; /* ancho máximo de contenido */ /* --- MOVIMIENTO -------------------------------------------------------- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-io: cubic-bezier(0.16, 1, 0.3, 1); --dur: 0.6s; --dur-fast:0.32s; --stagger: 70ms; /* --- CAPAS (z-index) --------------------------------------------------- */ --z-motif: -1; /* negativo explícito: garantiza que quede detrás del contenido, no depende del orden en el DOM */ --z-base: 1; --z-rail: 20; --z-header: 50; --z-overlay: 80; --z-grain: 90; /* textura de grano, siempre encima del contenido, nunca interactiva */ --z-skip: 100; } /* =========================================================================== COLOR · TEMA CLARO Paleta de la marca: papel blanco y vinotinto. El rojo y los grises salen de la identidad original de la firma (#730000 sobre #FAFAFA). Aquí solo se redefine color: tipografía, escala, espacio y movimiento son comunes a los dos temas y viven en :root. =========================================================================== */ :root[data-theme="light"] { color-scheme: light; --ink: #FAFAFA; /* fondo base */ --ink-1: #F5F3F0; /* superficie ligeramente elevada */ --ink-2: #F0EDE8; /* superficie elevada (overlay, paneles sticky) */ --ink-3: #EBE8E2; /* inset más profundo (colofón) */ --paper: #242323; /* texto principal */ --paper-dim: #4E4B49; /* subtítulos / entradillas */ --muted: #8F8F8F; /* etiquetas mono, marginalia, secundario */ --faint: #B5B2AF; /* texto terciario / deshabilitado */ --hairline: #E2E2E2; /* filetes 1px, guías de columna */ --hairline-2: #CDCAC6; /* filete algo más visible (hover) */ --accent: #730000; /* EL acento — vinotinto de la marca */ --accent-hi: #8B0000; /* acento de hover */ --accent-ghost: rgba(115, 0, 0, 0.07); --accent-soft: rgba(115, 0, 0, 0.20); --selection: rgba(115, 0, 0, 0.16); /* Sobre papel las fotos no se apagan: se levantan y se desaturan menos. El halo de los retratos recortados deja de ser un filo claro (que sobre blanco sería invisible) y pasa a ser una sombra real. */ --hero-img-opacity: 0.13; --photo-filter: saturate(0.60) contrast(0.88) brightness(1.14) sepia(0.04); --photo-halo: drop-shadow(0 1px 2px rgba(36, 35, 35, 0.20)) drop-shadow(0 10px 28px rgba(115, 0, 0, 0.10)); --map-filter: grayscale(1) contrast(0.95) brightness(1.02); --motif-opacity: 0.09; /* Negro + vinotinto, hecho a propósito para fondo claro. */ --crest: url("/assets/img/brand/marca-claro.webp?v=202607221212"); --veil-hero: linear-gradient(180deg, color-mix(in oklch, var(--ink) 72%, transparent) 0%, color-mix(in oklch, var(--ink) 45%, transparent) 26%, color-mix(in oklch, var(--ink) 85%, transparent) 68%, var(--ink) 100%); --veil-band: linear-gradient(180deg, var(--ink) 0%, color-mix(in oklch, var(--ink) 66%, transparent) 24%, color-mix(in oklch, var(--ink) 82%, transparent) 76%, var(--ink) 100%); /* overlay sobre blanco no oscurece; multiply sí deja ver el grano. */ --grain-opacity: 0.030; --grain-blend: multiply; } /* =========================================================================== PANTALLAS GRANDES Toda la escala del sitio —tipografía, espacio, --maxw, gutter— está en rem, y sus partes fluidas tocan techo alrededor de los 1440px. Por encima de ahí la página se quedaba literalmente congelada: en un monitor de 2560px el contenido seguía midiendo 1344px (poco más de la mitad del ancho) con el cuerpo a 18px, y se leía pequeña y perdida en el centro. Es justo el tamaño de pantalla en el que trabaja un despacho. En vez de recalibrar token por token, se sube el tamaño de letra de la raíz: como todo lo demás se expresa en rem, la página entera crece en proporción y conserva intactas sus relaciones internas (medida de lectura, ritmo vertical, jerarquía tipográfica). Un solo punto de control. Los rem dentro de una media query se resuelven SIEMPRE contra el tamaño inicial (16px), nunca contra el que estamos fijando, así que esto no se realimenta; aun así los umbrales van en px para que se lean sin ambigüedad. =========================================================================== */ /* En el otro extremo, el ritmo vertical del sitio es deliberadamente amplio, pero --section incluye 14vh: en un teléfono alto eso son ~180px arriba Y abajo de cada sección, o sea casi una pantalla entera de vacío en cada costura, y recorrer la página se vuelve pesado. Se aprieta sin renunciar al aire, que sigue siendo generoso para un móvil. */ @media (max-width: 40rem) { :root { --section: clamp(3.5rem, 2rem + 8vh, 7rem); } } @media (min-width: 1600px) { html { font-size: 112.5%; } /* 18px · portátiles grandes y 1920 */ } @media (min-width: 2200px) { html { font-size: 125%; } /* 20px · 2560 y superiores */ }