/* ========================================================================== variables.css — Design tokens · Tríada Home (re-skin Consultoría Premium) Fuente única de color, tipografía, espaciado, radios, sombras y tiempos. Cambiar un token aquí lo propaga a TODO el sitio. ========================================================================== */ :root { /* ----- Fondos oscuros (petróleo / navy) ----- */ --c-ink-900: #0C1B26; /* fondo más oscuro (hero / secciones dark) */ --c-ink-950: #0A1620; /* footer (aún más oscuro) */ --c-ink-800: #143a4a; /* azul petróleo de gradientes */ --c-ink-700: #15384a; --c-ink-600: #1a4254; /* ----- Fondos claros (crema / papel) ----- */ --c-cream: #F4F1E9; /* crema principal */ --c-cream-card: #FBF9F3; /* tarjetas sobre crema */ --c-cream-alt: #EFEBDF; /* sección alterna (proceso) */ --c-white: #ffffff; /* ----- Bordes ----- */ --c-border: #E9E3D4; --c-border-soft: #E5DFD0; --c-border-line: #E0D9C8; /* ----- Texto sobre claro ----- */ --c-ink: #14222E; /* titulares */ --c-ink-body: #46555F; /* cuerpo */ --c-muted: #5a6470; /* secundario */ --c-muted-2: #6B7780; /* etiquetas / eyebrow */ --c-muted-3: #8a90a3; /* notas finas */ /* ----- Texto sobre oscuro ----- */ --c-on-dark: #ffffff; --c-on-dark-soft: rgba(234, 229, 216, .82); /* crema translúcida */ --c-on-dark-mut: rgba(234, 229, 216, .72); --c-on-dark-faint: rgba(255, 255, 255, .60); --c-footer-muted-aa: rgba(255, 255, 255, .58); /* etiquetas/copyright del footer · AA ≥4.5:1 sobre --c-ink-950 (≈6.7:1) */ /* ----- Marca: teal (acción primaria) ----- */ --c-teal: #1C7A82; --c-teal-700: #16606A; /* hover / gradiente */ --c-teal-500: #2F8C93; --c-teal-200: #7FD0CC; /* acento sobre oscuro */ /* Anillo de foco. Hereda: cada superficie declara el suyo en base.css. El default es el teal oscuro porque la mayor parte del sitio es crema; sobre crema el teal-200 daba 1.69:1 y el anillo era, en la práctica, invisible. */ --focus-ring: var(--c-teal); /* ----- Tríada: tres áreas ----- */ --c-tec: #3D6E92; /* Tecnología (azul) */ --c-tec-ink: #345d7d; --c-ven: #2F8C93; /* Ventas (teal) */ --c-ven-ink: #236269; --c-fin: #5E9E7E; /* Finanzas (verde) */ --c-fin-ink: #3d7a5e; /* ----- WhatsApp ----- */ --c-wa: #25D366; --c-wa-ink: #0b2e1a; /* ----- Tints (chips por área) ----- */ --c-tint-tec: rgba(61, 110, 146, .10); --c-tint-ven: rgba(47, 140, 147, .12); --c-tint-fin: rgba(94, 158, 126, .16); /* ----- Gradientes reutilizables ----- */ --g-hero: radial-gradient(120% 90% at 82% 6%, #15384a 0%, #0C1B26 52%); --g-quiz: radial-gradient(115% 80% at 15% 0%, #143a4a 0%, #0C1B26 55%); --g-cta: radial-gradient(120% 90% at 85% 100%, #15384a 0%, #0C1B26 58%); /* Vertical, no diagonal: el botón es un objeto físico y la luz viene de arriba, así que la cara superior aclara y la inferior oscurece. Los tres tonos están verificados contra #fff: 4.60:1 · 5.05:1 · 6.91:1 — AA en todo el degradado. */ --g-teal: linear-gradient(180deg, #1F818A 0%, #1C7A82 52%, #17636C 100%); --g-card: linear-gradient(150deg, #1a4254, #0C1B26); --g-band: linear-gradient(140deg, #15384a, #0C1B26); --g-meter: linear-gradient(90deg, #6BA083, #2F8C93, #3D6E92); /* ----- Tipografía ----- */ --font-serif: 'Spectral', Georgia, 'Times New Roman', serif; --font-sans: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Escala fluida (clamp: mínimo móvil → máximo desktop) */ --fs-h1: clamp(2.15rem, 1.3rem + 4.2vw, 4.6rem); --fs-h2: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); --fs-h2-lg: clamp(2.3rem, 1.5rem + 3vw, 3.6rem); --fs-h3: clamp(1.5rem, 1.2rem + .7vw, 1.75rem); --fs-lead: clamp(1.1rem, 1rem + .5vw, 1.35rem); --fs-lead-sm: clamp(1.05rem, 1rem + .4vw, 1.25rem); --fs-body: 1rem; --fs-sm: .95rem; --fs-xs: .8rem; /* ----- Espaciado ----- */ --space-section: clamp(80px, 10vw, 128px); --gutter: clamp(20px, 5vw, 56px); --container: 1180px; --container-narrow: 960px; --container-tight: 820px; /* ----- Radios ----- */ --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-pill: 30px; /* ----- Elevación · luz cenital -------------------------------------------- Una sola fuente de luz, arriba. Lo que se levanta proyecta hacia abajo y recibe un filo de luz en su borde superior; lo que se hunde, al revés. Cada nivel suma tres capas — contacto (corta y nítida), difusa (media) y ambiental (amplia y tenue) — porque una sola capa se lee como mancha, no como volumen. Reglas: blur ≥ 2× offset, alpha bajo por capa, y el tinte es petróleo (--c-ink), nunca negro puro: sobre crema el negro ensucia. -------------------------------------------------------------------------- */ --e1: 0 1px 2px -1px rgba(20, 34, 46, .08), 0 3px 8px -3px rgba(20, 34, 46, .07); --e2: 0 1px 2px -1px rgba(20, 34, 46, .07), 0 6px 14px -6px rgba(20, 34, 46, .09), 0 14px 28px -12px rgba(20, 34, 46, .08); --e3: 0 2px 4px -2px rgba(20, 34, 46, .06), 0 12px 24px -10px rgba(20, 34, 46, .10), 0 26px 48px -20px rgba(20, 34, 46, .14); --e4: 0 4px 8px -4px rgba(20, 34, 46, .06), 0 20px 36px -16px rgba(20, 34, 46, .12), 0 44px 72px -28px rgba(20, 34, 46, .18); /* Tarjeta crema flotando sobre fondo oscuro: una sombra teñida ahí no se ve, así que se asienta con negro en capas. */ --e-float: 0 2px 6px -2px rgba(0, 0, 0, .28), 0 14px 30px -12px rgba(0, 0, 0, .42), 0 40px 72px -30px rgba(0, 0, 0, .60); /* Filos internos: el borde de arriba recibe luz, el de abajo la pierde. --edge-press invierte la luz: la superficie se hunde bajo el dedo. */ --edge-light: inset 0 1px 0 rgba(255, 255, 255, .20); --edge-dark: inset 0 -1px 0 rgba(0, 0, 0, .14); --edge-press: inset 0 2px 5px rgba(0, 0, 0, .22); --edge-inset: inset 0 1px 2px rgba(20, 34, 46, .05); /* ----- Sombras semánticas (apuntan a la escala de elevación) ----- El mapeo conserva el peso percibido de los valores viejos (medido como α pico y tinta integrada bajo el borde): sh-card iba en α .211 → e3 da .162, y sh-card-strong iba en α .212 → e4 da .207. Mapearlas un nivel más abajo habría aplanado el banner de diagnóstico y las tarjetas de experiencias. */ --sh-card: var(--e3); /* tarjeta prominente en reposo */ --sh-card-strong: var(--e4); /* tarjeta levantada / panel destacado */ --sh-form: var(--e-float); --sh-dark: 0 30px 60px -34px rgba(0, 0, 0, .70); /* card oscura sobre oscuro */ --sh-fab: 0 2px 6px -2px rgba(12, 27, 38, .30), 0 12px 26px -10px rgba(12, 27, 38, .45); /* CTA teal: el halo de marca también va en capas. Antes era UNA capa a .95 de alpha (y 1.0 en hover), que se leía como un bloque de color pegado abajo. */ --sh-cta: 0 1px 2px rgba(12, 27, 38, .24), 0 8px 18px -6px rgba(22, 96, 106, .42), 0 20px 38px -20px rgba(22, 96, 106, .46); --sh-cta-hover: 0 2px 4px rgba(12, 27, 38, .26), 0 14px 26px -8px rgba(22, 96, 106, .50), 0 30px 54px -24px rgba(22, 96, 106, .52); --sh-cta-active: 0 1px 2px rgba(12, 27, 38, .32); /* ----- Movimiento ----- */ --t-fast: .2s ease; --t-base: .3s ease; --t-rise: .9s cubic-bezier(.22, .61, .36, 1); --t-acc: .42s cubic-bezier(.4, 0, .2, 1); /* Curva sola, sin duración: --t-acc ya trae los .42s y usarla como easing convierte el segundo valor en un delay. */ --ease: cubic-bezier(.4, 0, .2, 1); /* ----- Z-index ----- */ --z-nav: 60; --z-fab: 80; --z-skip: 200; }