/* ⚠️ COPIA GENERADA — NO EDITAR AQUÍ. El original vive en Estetica/manual de marca/tokens.css Para resincronizar: cp "manual de marca/tokens.css" web/tokens.css y volver a pegar esta cabecera. ------------------------------------------------------------------ */ /* ============================================================================ TALENT TOKEN — TOKENS DE MARCA Fuente de verdad de la identidad. Todo lo visual —landing, propuestas, demos, presentaciones— importa este archivo. No se redefinen colores fuera de aquí: si un color no está en esta lista, no es de la marca. Versión 1.0 · 2026-08-17 ========================================================================= */ /* ── FUENTES AUTOALOJADAS ───────────────────────────────────────────────── Geist Sans y Geist Mono, variables, SIL Open Font License 1.1. Copyright (c) 2023 Vercel, en colaboracion con basement.studio. Se sirven desde nuestro propio servidor a proposito: el CDN de Google manda la IP de cada visitante a un tercero fuera de Chile, que es transferencia internacional sin base de licitud (Ley 21.719). Ruta relativa a la raiz del sitio: /fonts/ ========================================================================= */ @font-face { font-family: "Geist"; src: url("/fonts/Geist-Variable.woff2") format("woff2-variations"), url("/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMono-Variable.woff2") format("woff2-variations"), url("/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* ── NEUTRALES ──────────────────────────────────────────────────────── No es negro puro. #000 sobre pantalla OLED corta la profundidad y hace que el naranja vibre. Estos negros llevan una pizca de azul: enfrían el fondo y por contraste el naranja se lee más caliente sin subirle saturación. Es el truco que hace que se vea caro. */ --tt-void: #060709; /* fondo de página */ --tt-abyss: #0B0D11; /* superficie elevada, secciones alternas */ --tt-carbon: #14171D; /* tarjetas */ --tt-slate: #1F242C; /* bordes, divisores */ --tt-steel: #333A45; /* bordes en hover, estados desactivados */ --tt-mist: #9BA3AF; /* texto secundario — 7.9:1 sobre void, AAA */ --tt-snow: #F4F6F8; /* texto principal — 18.6:1. NO uses #fff puro */ /* ── NARANJA DE MARCA ───────────────────────────────────────────────── Rampa completa de un solo tono. El core es más caliente y rojizo que el naranja de To Home (#F26522) a propósito: la agencia no puede confundirse con el cliente. */ --tt-ember: #7A1F05; /* cola de degradados, base de resplandores */ --tt-rust: #C23A08; /* bordes activos, estados presionados */ --tt-orange: #FF4D0D; /* ★ CORE. Botones, acentos. 6.1:1 sobre void */ --tt-ignite: #FF7A2E; /* hover, iconografía */ --tt-flare: #FFA766; /* texto naranja sobre oscuro — 10.5:1, AAA */ --tt-halo: #FFD9BD; /* tintes mínimos, subrayados */ /* ── ORO — EL ACENTO DE TT-OS ───────────────────────────────────────── Segundo color de marca, y el único. No es decoración: **marca las superficies que SON el sistema**, para que el visitante sienta que entró a TT-OS y no que sigue leyendo una página. La regla es por superficie, no por palabra. Llevan oro: el panel que presenta TT-OS, la consola donde se le ve operar, la puerta de entrada al showroom y la chapa de estado del pie. **No** lo lleva la palabra «TT-OS» suelta en un texto o en un menú: pintar la palabra donde aparezca convierte el oro en resaltador y deja de significar nada. Por qué funciona sobre el naranja y no compite con él: comparten familia cálida, así que no abren una segunda paleta, pero el oro es más claro y menos saturado. Leído seguido, el naranja es la marca y el oro es el tramo más alto de la oferta. Se usa en hilo, borde, etiqueta y resplandor. **Nunca en fondo lleno ni en un botón principal**: ahí compite con el naranja y los dos pierden. */ --tt-gold-deep: #A87C2A; /* bordes del panel de TT-OS */ --tt-gold: #E9C46A; /* ★ CORE del oro. 11,1:1 sobre void, AAA */ --tt-gold-pale: #F7E7B4; /* texto en hover, brillo alto del degradado */ /* ── SEÑAL ──────────────────────────────────────────────────────────── Un solo color funcional además del naranja. Verde = vivo, disponible, conectado. Nunca decorativo. */ --tt-live: #34E5A0; --tt-alert: #FFB020; /* advertencias. No es naranja de marca */ /* ── SUPERFICIES TRANSLÚCIDAS ─────────────────────────────────────── */ --tt-glass: rgba(244, 246, 248, 0.04); --tt-glass-border: rgba(244, 246, 248, 0.09); --tt-orange-veil: rgba(255, 77, 13, 0.12); /* ── DEGRADADOS ─────────────────────────────────────────────────────── El futurismo sale de aquí y del movimiento, no de sumar colores. */ --grad-brand: linear-gradient(135deg, #FF4D0D 0%, #FF7A2E 52%, #FFA766 100%); --grad-ember: linear-gradient(180deg, #FF4D0D 0%, #7A1F05 100%); --grad-text: linear-gradient(180deg, #F4F6F8 0%, #9BA3AF 100%); --grad-aurora: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(255, 77, 13, 0.22) 0%, rgba(255, 77, 13, 0.06) 45%, transparent 72%); --grad-hairline: linear-gradient(90deg, transparent, rgba(255,122,46,0.55), transparent); /* Oro. El degradado imita pan de oro: claro, medio, sombra y un brillo final. Un oro plano se ve amarillo mostaza; la sombra es la que lo vuelve metal. */ --grad-gold: linear-gradient(135deg, #F7E7B4 0%, #E9C46A 36%, #A87C2A 68%, #F0D68C 100%); --grad-gold-hair: linear-gradient(90deg, transparent, rgba(233,196,106,0.75), transparent); /* ── RESPLANDOR Y PROFUNDIDAD ─────────────────────────────────────── */ --glow-sm: 0 0 24px -8px rgba(255, 77, 13, 0.45); --glow-md: 0 0 60px -12px rgba(255, 77, 13, 0.55); --glow-lg: 0 0 140px -30px rgba(255, 77, 13, 0.65); --glow-gold: 0 0 60px -18px rgba(233, 196, 106, 0.55); --shadow-card: inset 0 1px 0 rgba(244,246,248,0.05), 0 20px 50px -22px rgba(0,0,0,0.85); --shadow-lift: inset 0 1px 0 rgba(244,246,248,0.08), 0 32px 70px -24px rgba(0,0,0,0.9); /* ── TIPOGRAFÍA ─────────────────────────────────────────────────────── Geist Sans + Geist Mono (OFL, autoalojadas). Ver §3 del manual para por qué no es Helvetica. */ --font-sans: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "Geist Mono", "SF Mono", "JetBrains Mono", ui-monospace, monospace; /* Escala fluida. Un solo set de variables sirve móvil y escritorio. */ --fs-display: clamp(2.75rem, 7.5vw, 6.5rem); --fs-h1: clamp(2.125rem, 5vw, 3.75rem); --fs-h2: clamp(1.625rem, 3.4vw, 2.5rem); --fs-h3: clamp(1.1875rem, 2vw, 1.5rem); --fs-lead: clamp(1.0625rem, 1.6vw, 1.3125rem); --fs-body: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.75rem; --lh-tight: 1.02; /* display */ --lh-snug: 1.16; /* titulares */ --lh-base: 1.6; /* cuerpo */ --lh-loose: 1.75; /* párrafos largos */ /* Geist es una grotesca: en tamaños grandes necesita tracking negativo o se ve suelta y amateur. En etiquetas chicas, lo contrario. */ --tr-display: -0.035em; --tr-head: -0.022em; --tr-body: 0; --tr-label: 0.09em; /* + uppercase + mono */ --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* ── ESPACIADO — base 4px ─────────────────────────────────────────── */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem; --sp-16: 4rem; --sp-24: 6rem; --sp-32: 8rem; --sp-section: clamp(4.5rem, 11vw, 9rem); /* ── RADIOS ───────────────────────────────────────────────────────── */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-full: 999px; /* ── MOVIMIENTO ─────────────────────────────────────────────────────── Sin linear (se ve robótico) y sin rebote (se ve infantil). Expo-out: sale rápido, aterriza suave. Es el que hace que una interfaz se sienta cara. */ --ease-out: cubic-bezier(0.16, 1, 0.30, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --dur-micro: 160ms; /* color de hover, foco */ --dur-element: 420ms; /* una tarjeta que aparece */ --dur-section: 760ms; /* un bloque completo entrando */ --layout-max: 1200px; --layout-pad: clamp(1.25rem, 4vw, 3rem); --z-nav: 100; --z-overlay: 200; --z-modal: 300; } /* Accesibilidad: no es opcional. Quien tiene el sistema en "reducir movimiento" ve la misma página, quieta. */ @media (prefers-reduced-motion: reduce) { :root { --dur-micro: 1ms; --dur-element: 1ms; --dur-section: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }