/* ============================================================ tokens.css — Inside Consulting Único lugar donde se define la marca. Cambiar --brand aquí repinta todo el sitio: botones, gradientes, acentos, foco. Paleta oficial — manual de identidad, Concepto 03 (DOCS/inside_03.pdf, lámina «Paleta de Color 03»): 01 / TURQUESA #08A4B5 02 / CELESTE #B4E1E6 03 / LAVANDA #A38BC2 04 / ROSA NIEBLA #F3E7EA 05 / AZUL PETRÓLEO #18566A 06 / GRAFITO #303A3D ============================================================ */ :root { /* --- Paleta tal cual viene del manual ---------------------- No se usan directamente en los componentes: son el origen de los roles de abajo, para que el manual y el sitio no se desincronicen. */ --c-turquesa: #08A4B5; --c-celeste: #B4E1E6; --c-lavanda: #A38BC2; --c-rosa: #F3E7EA; --c-petroleo: #18566A; --c-grafito: #303A3D; /* --- Marca ------------------------------------------------- --brand-deep se usa para hover y para el extremo oscuro de los gradientes. */ --brand: var(--c-turquesa); --brand-deep: var(--c-petroleo); --brand-bright: var(--c-celeste); /* acento claro sobre oscuro */ --brand-tint: #EAF6F8; /* fondos suaves sobre claro */ --brand-contrast: #FFFFFF; /* texto encima de --brand */ /* El turquesa sobre blanco da 3.0:1, por debajo del mínimo AA (4.5:1). Para TEXTO e ÍCONOS sobre fondo claro se usa el azul petróleo del manual, que da 8.0:1 sin salirse de la paleta. --brand se reserva para rellenos, fondos y gradientes. */ --brand-text: var(--c-petroleo); /* Canales RGB sueltos: los necesitan las sombras, los velos del hero y los resplandores, que se pintan con alfa. */ --brand-rgb: 8, 164, 181; --brand-bright-rgb: 180, 225, 230; --ink-rgb: 31, 40, 43; /* --- Acento secundario (lavanda + rosa niebla) ------------- Segundo color del manual. Se reserva para elementos que necesitan distinguirse del turquesa sin competir con él. */ --accent: var(--c-lavanda); --accent-deep: #7A5FA3; /* 5.3:1 sobre blanco, apto para texto */ --accent-tint: var(--c-rosa); /* --- Neutros ---------------------------------------------- Toda la escala oscura deriva del grafito del manual. --ink es el fondo de las secciones de impacto. */ --ink: #1F282B; /* grafito profundo */ --ink-soft: var(--c-grafito); /* tarjetas sobre fondo oscuro */ --ink-line: #3F4B4E; /* bordes sobre fondo oscuro */ --paper: #FFFFFF; --paper-soft: #F4F8F9; /* secciones claras alternas */ --paper-mist: var(--c-rosa); /* alterna cálida (.surface-mist) */ --paper-line: #E1E9EB; /* bordes sobre fondo claro */ --gray-900: #253034; --gray-700: #5B686C; /* texto secundario sobre claro */ --gray-500: #8A9598; --gray-300: #CAD3D5; /* --- Color semántico por superficie ------------------------ Las secciones oscuras redefinen estas tres variables (ver .surface-dark en base.css), así los componentes no necesitan saber sobre qué fondo viven. */ --text: var(--gray-900); --text-muted: var(--gray-700); --surface: var(--paper); --surface-raised: var(--paper); --line: var(--paper-line); /* --- Estado ------------------------------------------------ */ --success: #0E9F6E; --danger: #D7263D; --focus-ring: var(--brand); /* --- Gradientes ------------------------------------------- --grad-brand es el de RELLENO: encima siempre va blanco (botón primario, badge sólido, ícono de tarjeta al hover), así que sus tres paradas se mantienen lo bastante oscuras para dar 4.5:1 contra el blanco. El turquesa vivo del manual es demasiado claro para eso, así que vive en --grad-brand-vivid, que solo se usa donde no hay texto. */ --grad-brand: linear-gradient(120deg, #0C7F8D 0%, #106C7E 48%, var(--brand-deep) 100%); --grad-brand-vivid: linear-gradient(120deg, var(--brand-bright) 0%, var(--brand) 45%, var(--brand-deep) 100%); /* Variante para números grandes recortados sobre fondo claro: sus dos extremos superan 3:1, el mínimo AA para texto de gran tamaño. */ --grad-brand-text: linear-gradient(120deg, #0F8393 0%, var(--brand-deep) 100%); --grad-ink: linear-gradient(165deg, #2A3538 0%, var(--ink) 55%, #141B1D 100%); --grad-card: linear-gradient(160deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.02) 100%); --grad-halo: radial-gradient(closest-side, rgba(var(--brand-rgb), .34), rgba(var(--brand-rgb), 0)); /* --- Tipografía -------------------------------------------- */ --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, sans-serif; /* Escala fluida. Los titulares crecen con el viewport sin media queries; el mínimo está pensado para 360px de ancho. */ /* El máximo está calculado para que un titular de ~15 caracteres entre en una sola línea en la columna del hero. Subirlo hace que las líneas se partan y se rompe la animación de entrada. */ --fs-hero: clamp(2.5rem, 6vw, 4.75rem); --fs-h1: clamp(2.25rem, 5.5vw, 4.25rem); --fs-h2: clamp(1.875rem, 4vw, 3.25rem); --fs-h3: clamp(1.375rem, 2.2vw, 1.875rem); --fs-h4: clamp(1.125rem, 1.6vw, 1.3125rem); --fs-lead: clamp(1.0625rem, 1.5vw, 1.375rem); --fs-body: 1.0625rem; --fs-small: 0.9375rem; --fs-tiny: 0.8125rem; --fs-stat: clamp(3rem, 6.5vw, 5rem); --lh-tight: 0.98; /* titulares gigantes */ --lh-snug: 1.14; /* titulares medianos */ --lh-body: 1.65; --tracking-tight: -0.035em; /* Revolut aprieta mucho los display */ --tracking-normal: -0.011em; --tracking-wide: 0.08em; /* eyebrows en mayúsculas */ --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; /* --- Espaciado -------------------------------------------- Escala de 4px. --section-y es el aire vertical generoso entre secciones full-bleed. */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --section-y: clamp(4.5rem, 9vw, 9rem); --gutter: clamp(1.25rem, 4vw, 2.5rem); --container: 1240px; --container-narrow: 820px; /* --- Radios ------------------------------------------------ */ --radius-pill: 999px; --radius-card: 28px; --radius-lg: 20px; --radius-md: 14px; --radius-sm: 10px; /* --- Sombras ----------------------------------------------- */ --shadow-sm: 0 2px 8px rgba(var(--ink-rgb), .07); --shadow-md: 0 12px 32px rgba(var(--ink-rgb), .10); --shadow-lg: 0 28px 64px rgba(var(--ink-rgb), .15); --shadow-brand: 0 14px 34px rgba(var(--brand-rgb), .32); /* --- Movimiento -------------------------------------------- */ --ease-out: cubic-bezier(.22, .61, .36, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --dur-fast: .18s; --dur: .32s; --dur-slow: .6s; /* --- Capas ------------------------------------------------- */ --z-base: 1; --z-sticky: 100; --z-nav: 200; --z-overlay: 300; } /* Superficie oscura: redefine el color semántico para que los componentes (tarjetas, botones, texto) se adapten solos. El hero, las cabeceras interiores y el CTA final también son fondos oscuros, así que comparten estos valores. Si no, un .btn-ghost dentro del hero heredaría el gris oscuro de texto y quedaría ilegible. */ .surface-dark, .hero, .page-hero, .cta-final { --text: #FFFFFF; --text-muted: #AEBCBF; --surface: var(--ink); --surface-raised: var(--ink-soft); --line: var(--ink-line); --focus-ring: var(--brand-bright); /* Sobre el grafito el problema se invierte: hay que aclarar. El celeste da 10.6:1 contra --ink. */ --brand-text: var(--brand-bright); --grad-brand-text: linear-gradient(120deg, var(--brand-bright) 0%, var(--brand) 100%); } /* El hero de la portada es claro: recupera los valores de superficie clara que .hero acaba de cambiar. */ .hero.hero-claro { --text: var(--gray-900); --text-muted: var(--gray-700); --surface: var(--paper); --surface-raised: var(--paper); --line: var(--paper-line); --focus-ring: var(--brand); --brand-text: var(--c-petroleo); --grad-brand-text: linear-gradient(120deg, #0F8393 0%, var(--brand-deep) 100%); } /* Superficie clara alterna (celeste muy diluido). */ .surface-soft { --surface: var(--paper-soft); } /* Superficie clara cálida (rosa niebla del manual). Sirve para alternar cuando dos secciones claras van seguidas. */ .surface-mist { --surface: var(--paper-mist); --line: #E7D8DC; }