/* ============================================================ Vida Simple — Design Tokens Servicios de ingeniería para tratamiento del agua ============================================================ */ /* Poppins — movido al del HTML como no bloqueante. El @import quedó eliminado para evitar bloqueo de render. */ :root { /* ---------- Brand colors (from logo) ---------- */ --vs-orange: #ee6f28; /* naranjo — primario / CTA */ --vs-blue-light: #22abe2; /* azul claro — agua, accents */ --vs-blue-dark: #27285b; /* azul oscuro — texto, profundo */ --vs-white: #ffffff; /* ---------- Orange scale (CTA / energy) ---------- */ --vs-orange-50: #fff3ec; --vs-orange-100: #ffdcc6; --vs-orange-200: #ffb88a; --vs-orange-300: #fc934f; --vs-orange-400: #f37e36; --vs-orange-500: #ee6f28; /* base */ --vs-orange-600: #d45c1b; --vs-orange-700: #ad4914; --vs-orange-800: #7d340d; --vs-orange-900: #4d2008; /* ---------- Light blue scale (water / fresh) ---------- */ --vs-cyan-50: #ecf9fe; --vs-cyan-100: #cdeefb; --vs-cyan-200: #9bdcf6; --vs-cyan-300: #5fc6ee; --vs-cyan-400: #22abe2; /* base */ --vs-cyan-500: #1797cc; --vs-cyan-600: #127ba8; --vs-cyan-700: #0e5e80; --vs-cyan-800: #093f56; --vs-cyan-900: #052230; /* ---------- Dark blue scale (trust / depth) ---------- */ --vs-navy-50: #eef0fa; --vs-navy-100: #d4d6ee; --vs-navy-200: #a4a8d6; --vs-navy-300: #6f74b8; --vs-navy-400: #44488a; --vs-navy-500: #27285b; /* base */ --vs-navy-600: #1f2049; --vs-navy-700: #181936; --vs-navy-800: #101122; --vs-navy-900: #08080f; /* ---------- Neutrals (warm-leaning, paired with navy) ---------- */ --vs-neutral-0: #ffffff; --vs-neutral-50: #f8f9fc; --vs-neutral-100: #f1f3f8; --vs-neutral-200: #e3e6ef; --vs-neutral-300: #c9cddc; --vs-neutral-400: #9ba1b8; --vs-neutral-500: #6e7390; --vs-neutral-600: #4c5172; --vs-neutral-700: #353a55; --vs-neutral-800: #1f2138; --vs-neutral-900: #0c0d1e; /* ---------- Semantic tokens ---------- */ --color-fg-1: var(--vs-navy-500); /* headings, primary text */ --color-fg-2: var(--vs-neutral-600);/* body */ --color-fg-3: var(--vs-neutral-500);/* secondary */ --color-fg-muted: var(--vs-neutral-400);/* placeholder, meta */ --color-fg-inverse: var(--vs-white); --color-bg-1: var(--vs-white); --color-bg-2: var(--vs-neutral-50); --color-bg-3: var(--vs-neutral-100); --color-bg-inverse: var(--vs-navy-500); --color-accent: var(--vs-orange-500); --color-accent-hover: var(--vs-orange-600); --color-accent-pressed: var(--vs-orange-700); --color-accent-subtle: var(--vs-orange-50); --color-info: var(--vs-cyan-400); --color-info-hover: var(--vs-cyan-500); --color-info-subtle: var(--vs-cyan-50); --color-brand-deep: var(--vs-navy-500); --color-brand-deep-hover: var(--vs-navy-600); --color-success: #1f9d6b; --color-warning: #d99412; --color-danger: #d6383a; --color-border: var(--vs-neutral-200); --color-border-strong: var(--vs-neutral-300); --color-border-focus: var(--vs-cyan-400); --color-divider: var(--vs-neutral-200); /* ---------- Brand gradients (water motion) ---------- */ --gradient-water: linear-gradient(135deg, #22abe2 0%, #27285b 100%); --gradient-sunset: linear-gradient(135deg, #ee6f28 0%, #fc934f 100%); --gradient-hero: linear-gradient(135deg, #27285b 0%, #0e5e80 55%, #22abe2 100%); --gradient-soft: linear-gradient(180deg, #ecf9fe 0%, #ffffff 100%); /* ---------- Typography ---------- */ --font-sans: "Poppins", "Helvetica Neue", "Segoe UI", system-ui, -apple-system, sans-serif; --font-display: "Poppins", "Helvetica Neue", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Type scale — 1.25 modular, base 16 */ --fs-12: 0.75rem; /* 12 */ --fs-14: 0.875rem; /* 14 */ --fs-16: 1rem; /* 16 */ --fs-18: 1.125rem; /* 18 */ --fs-20: 1.25rem; /* 20 */ --fs-24: 1.5rem; /* 24 */ --fs-30: 1.875rem; /* 30 */ --fs-36: 2.25rem; /* 36 */ --fs-48: 3rem; /* 48 */ --fs-60: 3.75rem; /* 60 */ --fs-72: 4.5rem; /* 72 */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.7; --ls-tight: -0.02em; --ls-snug: -0.01em; --ls-normal: 0; --ls-wide: 0.02em; --ls-caps: 0.08em; /* ---------- Spacing (4px base) ---------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* ---------- Radii ---------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-pill: 999px; /* ---------- Shadows (cool-tinted, navy-based) ---------- */ --shadow-xs: 0 1px 2px rgba(39, 40, 91, 0.06); --shadow-sm: 0 2px 6px rgba(39, 40, 91, 0.08), 0 1px 2px rgba(39, 40, 91, 0.04); --shadow-md: 0 8px 20px rgba(39, 40, 91, 0.10), 0 2px 6px rgba(39, 40, 91, 0.05); --shadow-lg: 0 18px 40px rgba(39, 40, 91, 0.14), 0 4px 10px rgba(39, 40, 91, 0.06); --shadow-xl: 0 30px 60px rgba(39, 40, 91, 0.18), 0 8px 16px rgba(39, 40, 91, 0.08); --shadow-orange: 0 12px 28px rgba(238, 111, 40, 0.30); --shadow-cyan: 0 12px 28px rgba(34, 171, 226, 0.28); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6); /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; /* ---------- Layout ---------- */ --container-sm: 640px; --container-md: 800px; --container-lg: 1080px; --container-xl: 1280px; --container-2xl: 1440px; } /* ============================================================ Semantic element styles — apply when this stylesheet is loaded ============================================================ */ html { font-family: var(--font-sans); color: var(--color-fg-1); background: var(--color-bg-1); } body { margin: 0; line-height: var(--lh-normal); font-size: var(--fs-16); -webkit-font-smoothing: antialiased; } /* Headings — display weights for marketing impact */ h1, .h1 { font-family: var(--font-display); font-size: clamp(2.25rem, 4vw + 1rem, 4.5rem); font-weight: var(--fw-black); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--vs-navy-500); margin: 0 0 var(--space-6); } h2, .h2 { font-family: var(--font-display); font-size: clamp(1.75rem, 2.4vw + 1rem, 3rem); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--vs-navy-500); margin: 0 0 var(--space-4); } h3, .h3 { font-size: var(--fs-24); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); color: var(--vs-navy-500); margin: 0 0 var(--space-3); } h4, .h4 { font-size: var(--fs-20); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--vs-navy-500); margin: 0 0 var(--space-2); } h5, .h5 { font-size: var(--fs-16); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--vs-cyan-500); margin: 0 0 var(--space-2); } p, .body { font-size: var(--fs-16); line-height: var(--lh-relaxed); color: var(--color-fg-2); margin: 0 0 var(--space-4); text-wrap: pretty; } .lead { font-size: var(--fs-20); line-height: var(--lh-relaxed); color: var(--color-fg-2); font-weight: var(--fw-regular); } .small, small { font-size: var(--fs-14); color: var(--color-fg-3); } .eyebrow { font-size: var(--fs-12); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--vs-orange-500); } a { color: var(--vs-cyan-500); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--vs-cyan-600); text-decoration: underline; text-underline-offset: 3px; } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; background: var(--vs-neutral-100); color: var(--vs-navy-700); padding: 0.1em 0.35em; border-radius: var(--radius-xs); } ::selection { background: var(--vs-orange-200); color: var(--vs-navy-700); }