/* Tokens de Link3rs. Toda la web sale de aquí: si un tamaño o color no está en este fichero, no se usa. Tipografía: escala cerrada. Referencia aprobada (27-sep-2026): el título del hero de /live de la web anterior (SF Pro vía fuente de sistema, 700, -0.015em, interlineado 1.15). Mismos extremos que aquella escala, pero con rem + vw para que respete el zoom y el tamaño de letra del usuario. */ :root { /* ---------- Fuente ---------- Apple: SF Pro (fuente del sistema). Resto (Windows, Android…): Helvetica Neue servida por nosotros ("Link3rs Helvetica", ver fonts.css). En Apple nunca se descarga porque gana SF Pro. */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Link3rs Helvetica", "Helvetica Neue", Helvetica, Arial, sans-serif; /* ---------- Escala tipográfica ---------- */ /* Hero title: 31 → 40 px */ --fs-hero: clamp(1.9375rem, 1.704rem + 0.994vw, 2.5rem); --lh-hero: 1.15; --ls-hero: -0.015em; /* Hero subtitle: 17 → 18.5 px */ --fs-hero-sub: clamp(1.0625rem, 1.024rem + 0.166vw, 1.15625rem); --lh-hero-sub: 1.55; /* Title (título de sección, bold): 28 → 34 px */ --fs-title: clamp(1.75rem, 1.594rem + 0.663vw, 2.125rem); --lh-title: 1.15; --ls-title: -0.015em; /* Subtitle (bajo el título de sección) y body: 16.5 px */ --fs-sub: 1.03125rem; --lh-sub: 1.6; --ls-sub: -0.003em; /* Card title (títulos dentro de tarjetas y bloques): 22 → 26 px */ --fs-card: clamp(1.375rem, 1.271rem + 0.442vw, 1.625rem); --lh-card: 1.25; --ls-card: -0.01em; /* Label (etiqueta encima de un título, nombre de producto): 15 px */ --fs-label: 0.9375rem; --lh-label: 1.6; --ls-label: -0.005em; /* Small (notas, legales, pies de foto): 13.5 px */ --fs-small: 0.84375rem; --lh-small: 1.5; /* ---------- Color ---------- */ /* Neutros */ --c-bg: #ffffff; --c-bg-alt: #f5f5f7; --c-black: #000000; --c-ink: #1d1d1f; /* texto principal · 16.8:1 sobre blanco */ --c-ink-2: #6e6e73; /* texto secundario · 5.1:1 sobre blanco, 4.7:1 sobre bg-alt */ --c-line: #d2d2d7; /* Azul de marca (#0081FE, el del logo). 3.8:1 sobre blanco: sirve para superficies, gráficos y texto grande (≥ 24 px bold), NO para texto normal ni botones con texto blanco. */ --c-blue: #0081fe; /* Azul de acción: enlaces y botones. 4.9:1 sobre blanco y con texto blanco encima (AA). */ --c-blue-ink: #006edb; /* Acentos. "vivid" = rellenos, mockups, ilustración, fondos de color. "-ink" = cuando el color va como texto sobre fondo claro (AA ≥ 4.5:1). */ --c-orange: #ff9500; --c-orange-ink: #b85000; --c-lilac: #af52de; --c-lilac-ink: #8e3fc4; --c-green: #34c759; --c-green-ink: #1a7f37; --c-pink: #ff2d55; --c-pink-ink: #d70f4c; /* Botones (Contact Us, llamadas a la acción): el azul de la web anterior. Decisión de Héctor y Judith (28-sep): se acepta que con texto blanco dé 3.09:1, por debajo de AA (4.5:1). */ --c-cta: #0096ff; --c-cta-hover: #007acc; /* Degradados de texto (el nombre que se destaca en un título grande), petición 30-sep: --grad-backstage: el multicolor, SOLO para Backstage y siempre sobre oscuro (su celeste da 1,9:1 sobre blanco). --grad-blue: el de todo lo demás (Impact, "más de 60 idiomas"…). Sus tonos dan ≥ 3:1 sobre blanco y sobre --c-bg-alt: vale para texto grande (≥ 24 px bold), no para texto normal. */ --grad-blue: linear-gradient(100deg, #0a8fff 0%, var(--c-blue) 30%, #4d5cf5 100%); --grad-backstage: linear-gradient(100deg, #5ac8fa 0%, var(--c-blue) 35%, var(--c-lilac) 70%, var(--c-pink) 100%); /* ---------- Cristal (liquid glass) ---------- Parámetros (se prueban en vivo en /system → "Cristal líquido" y se copian aquí): --glass-opacity transparencia del fondo: 0 = transparente, 1 = blanco opaco --glass-blur-px cuánto desenfoca lo que hay detrás --glass-saturate cuánto aviva los colores de detrás --glass-distortion deformación del fondo en el canto, como una lente (0 = nada). Solo se ve en navegadores Chromium (Chrome, Edge…); en Safari y Firefox queda el desenfoque. Ver src/scripts/glass.ts --glass-bezel hasta dónde llega esa deformación desde el borde --glass-edge-alpha brillo del canto (luz arriba y contorno) --glass-shadow-alpha intensidad de la sombra */ --glass-opacity: 0.72; --glass-blur-px: 20px; --glass-saturate: 180%; --glass-distortion: 0; --glass-bezel: 24px; --glass-edge-alpha: 0.75; --glass-shadow-alpha: 0.18; --glass-bg: rgb(255 255 255 / var(--glass-opacity)); --glass-bg-strong: rgb(255 255 255 / calc(var(--glass-opacity) + 0.08)); --glass-blur: saturate(var(--glass-saturate)) blur(var(--glass-blur-px)); --glass-edge: inset 0 1px 0 rgb(255 255 255 / var(--glass-edge-alpha)), inset 0 0 0 0.5px rgb(255 255 255 / calc(var(--glass-edge-alpha) * 0.667)); --glass-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.08), 0 12px 32px -8px rgb(0 0 0 / var(--glass-shadow-alpha)), 0 2px 6px rgb(0 0 0 / 0.05); /* ---------- Espacio y layout ---------- */ --header-h: 66px; --gutter: 20px; --page-max: 1152px; /* ancho de contenido de la web anterior (contenedor 1200 − 2 × 24) */ --radius-s: 12px; --radius-m: 20px; --radius-l: 28px; /* ---------- Movimiento ---------- La web solo usa la física líquida (abajo), desde el 1-oct también en /system: los muelles de antes (smooth, snappy y bouncy) se han quitado. --ease-out y --dur-*: solo colores y opacidad (no llevan física). */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 180ms; --dur-base: 320ms; /* La física de la web (29-sep): la del menú líquido (src/scripts/morph.ts, MORPH_DEFAULTS). Qué es cada una y cuándo usarla: /system#springs. liquid = lo que se abre, crece o cae desde un control (0,52 s · 0,78) · liquid-fast = lo pequeño o lo que va delante (0,42 s · 0,70) · close = salir, cerrar, parar y frenar (0,3 s · 1, cortado al 97 %) · content-in = el contenido llega después que la forma (fundido y blur 6 px → 0, con un 20 % de retraso). */ --spring-liquid: linear(0, 0.0575, 0.1779, 0.3246, 0.4734, 0.6081, 0.7225, 0.8148, 0.8853, 0.936, 0.9713, 0.9945, 1.0082, 1.0151, 1.0177, 1.0176, 1.0158, 1.0132, 1.0105, 1.008, 1.0058, 1.004, 1.0025, 1.0015, 1.0007, 1.0002, 0.9999, 1); --spring-liquid-dur: 780ms; --spring-liquid-fast: linear(0, 0.0859, 0.2578, 0.4547, 0.6386, 0.787, 0.8971, 0.9715, 1.0154, 1.0362, 1.0426, 1.0401, 1.033, 1.0245, 1.0165, 1.0099, 1.0049, 1.0016, 0.9996, 0.9985, 0.9982, 0.9983, 0.9985, 0.9989, 0.9992, 0.9995, 0.9998, 1); --spring-liquid-fast-dur: 780ms; --spring-close: linear(0, 0.0556, 0.167, 0.2952, 0.4201, 0.5321, 0.628, 0.7075, 0.772, 0.8234, 0.864, 0.8958, 0.9204, 0.9394, 0.9539, 0.9651, 1); --spring-close-dur: 270ms; --content-in: 260ms cubic-bezier(0.22, 1, 0.36, 1); } @media (min-width: 769px) { :root { --gutter: 24px; } } /* Desk no tiene tema oscuro (Hector, 14-11): sólo blanco y gris. */ /* Escrituras que no admiten tracking negativo (el árabe se rompe si se separan las letras) y que necesitan más interlineado: árabe, persa, urdu, hebreo, CJK, tailandés e índicas. */ :lang(ar), :lang(fa), :lang(ur), :lang(he), :lang(zh), :lang(ja), :lang(ko), :lang(th), :lang(hi), :lang(mr), :lang(bn), :lang(gu), :lang(pa), :lang(kn), :lang(ml), :lang(ta), :lang(te) { --ls-hero: 0; --ls-title: 0; --ls-sub: 0; --ls-card: 0; --ls-label: 0; --lh-hero: 1.3; --lh-title: 1.3; --lh-card: 1.35; --lh-sub: 1.75; } :lang(ar), :lang(fa) { --font-sans: -apple-system, BlinkMacSystemFont, "SF Arabic", "Geeza Pro", "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif; } /* El urdu se escribe en nastaliq: letras mucho más altas, necesita aún más aire. */ :lang(ur) { --font-sans: "Noto Nastaliq Urdu", "Urdu Typesetting", -apple-system, BlinkMacSystemFont, "Geeza Pro", "Segoe UI", sans-serif; --lh-hero: 1.8; --lh-title: 1.8; --lh-card: 1.9; --lh-sub: 2.1; } :lang(zh) { --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif; } :lang(ja) { --font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif; } :lang(ko) { --font-sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; }