/* ============================================================= GROU — Colors & Type Foundations Boutique B2B consulting · Organizational Development Mining · Energy · Maritime-Port ============================================================= */ /* ── Brand type system v2.2 ────────────────────────────────── IBM Plex Serif → titles, big data, subtitles (600 / 700) IBM Plex Sans → body, bullets, captions, UI, eyebrows (400/500/600/700) IBM Plex Mono → ONLY callouts/quotes on dark bands (400, max 1 block/slide) Montserrat Black 900 → EXCLUSIVE to the logo wordmark. Never in the system. NOTA: las fuentes IBM Plex se cargan vía en el de cada página (preconnect + stylesheet), no por @import — mejor rendimiento. */ /* Montserrat kept locally for logo-only contexts (e.g. live-text wordmark fallback). */ @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* ---- Brand palette (dominance-ordered) ---- */ --grou-verde-pizarra: #1E3A2F; /* Dominant. Hero, headers, wordmark */ --grou-verde-musgo: #2D5544; /* Secondary dark. Overlays, gradients */ --grou-cobre-vivo: #B5571A; /* Accent only. CTAs, numbers, key highlights */ --grou-cobre-claro: #DD7B33; /* Brighter copper — small Cobre TEXT on dark bg only (legibility) */ --grou-arena: #E8D5B0; /* Warm neutral. Text on dark, inverted accents */ --grou-hueso: #F7F3EE; /* Content background. Replaces pure white */ --grou-lino: #EDE8E2; /* Alternate soft background. Table rows, quotes */ --grou-casi-negro: #1A1A18; /* Body text. Never pure black */ --grou-gris-calido: #5A5A52; /* Secondary text, captions */ /* ---- Semantic surfaces ---- */ --bg-primary: var(--grou-hueso); --bg-alt: var(--grou-lino); --bg-dark: var(--grou-verde-pizarra); --bg-dark-alt: var(--grou-verde-musgo); /* ---- Semantic foreground ---- */ --fg1: var(--grou-casi-negro); /* primary text on light */ --fg2: var(--grou-gris-calido); /* secondary text on light */ --fg-on-dark-1: var(--grou-hueso); /* primary text on dark */ --fg-on-dark-2: var(--grou-arena); /* secondary/accent text on dark */ --fg-accent: var(--grou-cobre-vivo); /* numbers, key highlights, CTAs */ /* ---- Borders & rules ---- */ --rule-light: rgba(26, 26, 24, 0.12); /* hairline on Hueso */ --rule-dark: rgba(247, 243, 238, 0.14); /* hairline on Pizarra */ --rule-accent: var(--grou-cobre-vivo); /* decorative copper line */ /* ---- Typography families (v2.2 · IBM Plex) ---- */ --font-display: 'IBM Plex Serif', Georgia, 'Times New Roman', serif; /* titles, big data */ --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; /* dark-band callouts only */ --font-logo: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; /* LOGO WORDMARK ONLY */ /* ---- Type scale (display – IBM Plex Serif) ---- */ --fs-display-xl: clamp(56px, 7.5vw, 112px); /* hero wordmark-scale */ --fs-display-l: clamp(44px, 5vw, 72px); /* section openers */ --fs-display-m: clamp(34px, 3.5vw, 52px); /* page titles */ --fs-display-s: clamp(26px, 2.6vw, 36px); /* block titles */ /* ---- Type scale (body – IBM Plex Sans) ---- */ --fs-lead: 22px; /* lede paragraphs */ --fs-body: 17px; /* default body */ --fs-small: 14px; /* captions, UI */ --fs-micro: 12px; /* labels, footnotes */ /* ---- Line-height & tracking ---- */ --lh-tight: 1.05; /* display */ --lh-snug: 1.15; /* display small */ --lh-body: 1.3; /* body (brand rule) */ --lh-loose: 1.55; /* long-form paragraphs */ --tracking-label: 0.12em; /* +20 equivalent */ --tracking-label-wide: 0.2em; /* +40 equivalent */ --tracking-display: -0.01em; /* ---- Spacing scale (industrial, generous) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ---- Radii (industrial = sharp) ---- */ --radius-none: 0px; --radius-sm: 2px; /* rarely used */ --radius-md: 4px; /* inputs, small chips */ --radius-pill: 999px; /* tags only */ /* ---- Elevation (subtle, never glossy) ---- */ --shadow-0: none; --shadow-1: 0 1px 0 rgba(26, 26, 24, 0.06); --shadow-2: 0 2px 8px rgba(26, 26, 24, 0.06), 0 1px 0 rgba(26, 26, 24, 0.04); --shadow-card: 0 12px 32px -18px rgba(26, 26, 24, 0.22); /* ---- Motion ---- */ --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 480ms; /* ---- Layout ---- */ --max-content: 1200px; --max-prose: 680px; --gutter: clamp(20px, 4vw, 64px); } /* ============================================================= Base ============================================================= */ html, body { background: var(--bg-primary); color: var(--fg1); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ============================================================= Semantic text styles ============================================================= */ /* Display headings — IBM Plex Serif, left-aligned, tight */ .h-display, h1.display { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); color: var(--fg1); text-align: left; text-wrap: balance; } h1, .h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-l); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); color: var(--fg1); text-align: left; text-wrap: balance; } h2, .h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-m); line-height: var(--lh-snug); letter-spacing: var(--tracking-display); color: var(--fg1); text-align: left; text-wrap: balance; } h3, .h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-display-s); line-height: var(--lh-snug); color: var(--fg1); text-align: left; } /* Eyebrow / uppercase label (tracked) */ .eyebrow, .label-upper { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-accent); } /* Lede */ .lede { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-lead); line-height: var(--lh-loose); color: var(--fg1); max-width: var(--max-prose); } /* Body */ p, .p { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg1); max-width: var(--max-prose); text-align: left; } /* Secondary / caption */ .caption, small { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-small); line-height: 1.45; color: var(--fg2); } /* Mono callout — dark-band quotes only, max 1 block per slide */ .callout-mono { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-body); line-height: 1.5; letter-spacing: -0.01em; color: var(--fg-on-dark-1); } /* Big numbers — Cobre accent (Plex Serif) */ .big-number { font-family: var(--font-display); font-weight: 700; font-size: clamp(64px, 9vw, 140px); line-height: 0.95; letter-spacing: -0.02em; color: var(--fg-accent); font-feature-settings: 'lnum' 1, 'tnum' 1; } /* Links — no underline; bold or copper for emphasis. Scoped to prose-only (anchors without a class), so nav marks, buttons and image-links stay clean. */ a { color: inherit; text-decoration: none; transition: color var(--dur-base) var(--ease-standard); } a:not([class]) { border-bottom: 1px solid currentColor; } a:not([class]):hover { color: var(--fg-accent); } /* Inverted (on dark) */ .on-dark { color: var(--fg-on-dark-1); } .on-dark .caption, .on-dark small { color: var(--fg-on-dark-2); } .on-dark h1, .on-dark h2, .on-dark h3, .on-dark .h-display, .on-dark .h1, .on-dark .h2, .on-dark .h3 { color: var(--fg-on-dark-1); } /* Copper decorative rule */ .rule-accent { display: block; width: 48px; height: 2px; background: var(--rule-accent); border: 0; margin: var(--space-5) 0; } /* Utility: never justify, always left */ .text-left { text-align: left; } .text-center { text-align: center; } /* sparingly — rarely on brand */ /* ============================================================= v2.2 structural signatures ============================================================= */ /* Cobre underline beneath every content-slide title */ .title-underline { position: relative; padding-bottom: var(--space-4); } .title-underline::after { content: ''; position: absolute; left: 0; bottom: 0; width: 72px; height: 3px; background: var(--grou-cobre-vivo); } /* Cover: absolute Cobre line on the top edge */ .cover-topline { position: relative; } .cover-topline::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--grou-cobre-vivo); } /* Closing seal — Grow. Group. GROU. in Plex Serif (never Mono) */ .grou-seal { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.01em; } .grou-seal .accent { color: var(--grou-cobre-vivo); }