/* ==========================================================================
Grupo CFI · Design Tokens
--------------------------------------------------------------------------
Pegable en Odoo 18 Online · Website → Configuración → "Editar el código del
encabezado y el cuerpo" (head), envuelto en . Alternativa:
subir como asset al Media Manager y enlazar con .
Cargar ANTES que site.css.
--------------------------------------------------------------------------
Fuentes (desde Google Fonts, ya enlazadas en el head):
- Mulish (display: H1-H5, números hero, tagline, eyebrows)
- Source Sans 3 (body: párrafos, UI, listas)
========================================================================== */
:root {
/* ---------- BRAND COLORS ---------------------------------------------- */
/* Primary: Pantone 185 C — corporate red. Use with control; never on
large gradient panels or body text. Hero accents, primary CTAs,
key trust marks, the Ciberseguridad vertical. */
--cfi-red: #E30613;
--cfi-red-600: #C8050F; /* hover / pressed */
--cfi-red-700: #A3040C; /* deep accent */
--cfi-red-500: #E30613; /* alias of --cfi-red */
--cfi-red-400: #EC3B46; /* lighter, disabled/ghost */
--cfi-red-100: #FDE6E7; /* subtle tinted backgrounds */
--cfi-red-50: #FEF4F5;
/* Vertical — Protección de Datos: cyan blue (from services catalog) */
--cfi-blue: #1FA9E0;
--cfi-blue-600: #148CBC;
--cfi-blue-700: #0E6D94;
--cfi-blue-400: #5BC1EA;
--cfi-blue-100: #E3F4FC;
--cfi-blue-50: #F1FAFD;
/* Vertical — Implantación SGSI (ISO 27001, ENS, TISAX, DORA, NIS2, CRA) */
--cfi-teal: #5DBFB7;
--cfi-teal-600: #40A8A0;
--cfi-teal-700: #2F8881;
--cfi-teal-400: #85D0CA;
--cfi-teal-100: #E4F4F2;
--cfi-teal-50: #F2FAF9;
/* Product — Software propio (neutral green, kept calm, ISO family) */
--cfi-green: #6FA568;
--cfi-green-600: #568650;
--cfi-green-700: #3F6A3A;
--cfi-green-100: #E8F0E6;
/* ---------- NEUTRALS (warm white → near-black) ------------------------ */
--cfi-ink-900: #111315; /* body text, dense headings on light bg */
--cfi-ink-800: #1F2327;
--cfi-ink-700: #343A40; /* PANTONE Black C 75% — per manual */
--cfi-ink-600: #4A5158;
--cfi-ink-500: #6B7278; /* secondary text */
--cfi-ink-400: #9299A0; /* tertiary / placeholder */
--cfi-ink-300: #C7CCD1; /* strong borders, dividers */
--cfi-ink-200: #E2E5E8; /* default border */
--cfi-ink-100: #EEF0F2; /* subtle fills / section bg */
--cfi-ink-50: #F6F7F8; /* app chrome, card fill on white */
--cfi-paper: #FAFAF8; /* warm paper — primary background */
--cfi-white: #FFFFFF;
/* ---------- SEMANTIC TOKENS ------------------------------------------ */
--fg-1: var(--cfi-ink-900); /* primary text */
--fg-2: var(--cfi-ink-700); /* secondary text */
--fg-3: var(--cfi-ink-500); /* tertiary / meta */
--fg-4: var(--cfi-ink-400); /* disabled / placeholder */
--fg-on-red: var(--cfi-white);
--fg-on-dark: #E9ECEF;
--bg-1: var(--cfi-white); /* surface 1 / cards */
--bg-2: var(--cfi-paper); /* page background */
--bg-3: var(--cfi-ink-50); /* inset panel / app chrome */
--bg-4: var(--cfi-ink-100); /* deeper inset */
--bg-dark: #0D0F11; /* hero dark / footer */
--bg-dark-2: #16191D;
--border-soft: var(--cfi-ink-200);
--border-strong: var(--cfi-ink-300);
--border-onDark: rgba(255,255,255,.10);
--accent: var(--cfi-red); /* default brand accent */
--accent-hover: var(--cfi-red-600);
--accent-press: var(--cfi-red-700);
--focus-ring: rgba(227, 6, 19, .28);
/* State / semantic */
--success: #198754;
--warning: #F0A202;
--danger: var(--cfi-red);
--info: var(--cfi-blue);
/* ---------- RADII ---------------------------------------------------- */
--r-none: 0;
--r-xs: 2px;
--r-sm: 4px; /* inputs, small chips */
--r-md: 8px; /* default card, button */
--r-lg: 12px; /* elevated card, modal */
--r-xl: 18px; /* hero, marquee panel */
--r-2xl: 28px; /* full-bleed statement block (use sparingly) */
--r-pill: 999px;
/* ---------- SHADOWS (subtle, corporate) ------------------------------ */
--shadow-0: 0 1px 0 rgba(17,19,21,.04);
--shadow-1: 0 1px 2px rgba(17,19,21,.06), 0 1px 1px rgba(17,19,21,.04);
--shadow-2: 0 4px 12px -2px rgba(17,19,21,.08), 0 2px 4px rgba(17,19,21,.04);
--shadow-3: 0 12px 32px -8px rgba(17,19,21,.12), 0 4px 8px -2px rgba(17,19,21,.05);
--shadow-4: 0 24px 60px -12px rgba(17,19,21,.18), 0 8px 16px -4px rgba(17,19,21,.08);
--shadow-focus: 0 0 0 4px var(--focus-ring);
--shadow-inner: inset 0 1px 0 rgba(17,19,21,.04);
/* ---------- SPACING (4-point grid) ----------------------------------- */
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 32px;
--space-8: 40px;
--space-9: 48px;
--space-10: 64px;
--space-11: 80px;
--space-12: 96px;
--space-13: 128px;
--space-14: 160px;
/* ---------- TYPOGRAPHY ----------------------------------------------- */
/* Display = Mulish (D-006 · 2026-04-27 · cierra Q1 sobre Aller). */
--font-display: "Mulish", "Source Sans 3", Arial, sans-serif;
--font-body: "Source Sans 3", "Myriad Pro", Arial, sans-serif;
--font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold:600;
--weight-bold: 700;
--leading-tight: 1.1;
--leading-snug: 1.25;
--leading-normal: 1.5;
--leading-relaxed:1.65;
--track-tight: -0.02em;
--track-snug: -0.01em;
--track-normal: 0;
--track-wide: 0.04em;
--track-caps: 0.08em;
/* Type scale — matched to corporate, generous hero sizes */
--t-display-2xl: clamp(56px, 6.4vw, 96px); /* hero statement */
--t-display-xl: clamp(44px, 4.8vw, 72px);
--t-display-lg: clamp(36px, 3.6vw, 56px); /* page header */
--t-h1: 40px;
--t-h2: 32px;
--t-h3: 24px;
--t-h4: 20px;
--t-h5: 17px;
--t-body-lg: 19px; /* intro paragraphs */
--t-body: 16px;
--t-body-sm: 14px;
--t-caption: 13px;
--t-overline: 12px;
/* ---------- MOTION --------------------------------------------------- */
--ease-standard: cubic-bezier(.2, .7, .2, 1);
--ease-in: cubic-bezier(.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, .2, 1);
--ease-in-out: cubic-bezier(.4, 0, .2, 1);
--d-quick: 120ms;
--d-base: 200ms;
--d-slow: 320ms;
--d-slower: 500ms;
/* ---------- LAYOUT --------------------------------------------------- */
--content-narrow: 720px;
--content-base: 1040px;
--content-wide: 1280px;
--content-xwide: 1440px;
}
/* ==========================================================================
BASE
========================================================================== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--t-body);
line-height: var(--leading-normal);
color: var(--fg-1);
background: var(--bg-2);
font-feature-settings: "ss01", "kern";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ==========================================================================
HEADINGS — display font (Mulish), tight, confident
========================================================================== */
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
font-family: var(--font-display);
color: var(--fg-1);
margin: 0 0 .4em;
font-weight: var(--weight-bold);
letter-spacing: var(--track-snug);
line-height: var(--leading-tight);
text-wrap: balance;
}
h1, .h1 { font-size: var(--t-h1); }
h2, .h2 { font-size: var(--t-h2); }
h3, .h3 { font-size: var(--t-h3); letter-spacing: var(--track-normal); }
h4, .h4 { font-size: var(--t-h4); letter-spacing: var(--track-normal); font-weight: var(--weight-semibold); }
h5, .h5 { font-size: var(--t-h5); letter-spacing: var(--track-normal); font-weight: var(--weight-semibold); }
.display-2xl { font-family: var(--font-display); font-weight: 700; font-size: var(--t-display-2xl); line-height: .98; letter-spacing: -0.025em; }
.display-xl { font-family: var(--font-display); font-weight: 700; font-size: var(--t-display-xl); line-height: 1.02; letter-spacing: -0.022em; }
.display-lg { font-family: var(--font-display); font-weight: 700; font-size: var(--t-display-lg); line-height: 1.05; letter-spacing: -0.02em; }
p, .p { margin: 0 0 1em; font-size: var(--t-body); line-height: var(--leading-relaxed); color: var(--fg-2); text-wrap: pretty; }
.lead { font-size: var(--t-body-lg); line-height: var(--leading-relaxed); color: var(--fg-2); }
.small { font-size: var(--t-body-sm); line-height: var(--leading-normal); color: var(--fg-3); }
.caption{ font-size: var(--t-caption); line-height: 1.4; color: var(--fg-3); }
/* Eyebrow / overline — used above section titles; ties into brand via red dot */
.eyebrow {
font-family: var(--font-body);
font-size: var(--t-overline);
font-weight: var(--weight-semibold);
letter-spacing: var(--track-caps);
text-transform: uppercase;
color: var(--fg-3);
display: inline-flex;
align-items: center;
gap: 10px;
}
.eyebrow::before {
content: "";
width: 28px;
height: 2px;
background: currentColor;
display: inline-block;
}
.eyebrow--red { color: var(--cfi-red); }
/* Links */
a { color: var(--cfi-red); text-decoration: none; text-underline-offset: 3px; transition: color var(--d-quick) var(--ease-standard); }
a:hover { color: var(--cfi-red-700); text-decoration: underline; }
a:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: 2px; }
/* Code */
code, pre, kbd { font-family: var(--font-mono); font-size: .92em; }
code { background: var(--bg-3); padding: 1px 6px; border-radius: var(--r-sm); }
/* Selection */
::selection { background: var(--cfi-red); color: #fff; }
/* Tagline utility — "bajo control" style */
.tagline {
font-family: var(--font-display);
font-style: italic;
font-weight: var(--weight-regular);
color: var(--cfi-red);
letter-spacing: -0.005em;
}